Update Discord link throughout site

- old Discord link pointed to wrong channel - updated invite link - used in 8 different templates - extracted to config var - make sure we always open in a new window - fixes #611
tradingstrategy-ai · Oct 18, 2023 · d291458 · d291458
1 parent b7aec3e
commit d291458
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 41 deletions.
diff --git a/.env b/.env
@@ -29,6 +29,7 @@ TS_PUBLIC_GHOST_API_URL=https://trading-strategy.ghost.io
 TS_PUBLIC_GHOST_CONTENT_API_KEY=4f54e499a627473f560945d524
 TS_PUBLIC_TYPESENSE_API_URL=https://46afmqk2swp39eulp-1.a1.typesense.net
 TS_PUBLIC_TYPESENSE_API_KEY=7XrkyQC7seRaD1vLtenpBIinfwqk5ua1
+TS_PUBLIC_DISCORD_URL=https://discord.gg/5M88m9nM8H
 TS_PUBLIC_WALLET_CONNECT_PROJECT_ID=9ee7efad98897eb60ba023db6aa72355
 TS_PUBLIC_STRATEGIES='[{"id":"enzyme-polygon-eth-usdc","name":"ETH-USDC breakout","url":"https://enzyme-polygon-eth-usdc.tradingstrategy.ai"},{"id":"enzyme-polygon-matic-usdc","name":"MATIC-USDC breakout","url":"https://enzyme-polygon-matic-usdc.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-usdc-sls","name":"ETH-USDC Long Strength","url":"https://enzyme-polygon-eth-usdc-sls.tradingstrategy.ai"},{"id":"enzyme-polygon-multipair","name":"Polygon multipair breakout","url":"https://enzyme-polygon-multipair.tradingstrategy.ai"},{"id":"polygon-multipair-momentum","name":"Polygon multipair momentum","url":"https://polygon-multipair-momentum.tradingstrategy.ai"},{"id":"arbitrum-btc-usdc-sls","name":"BTC-USDC long strength","url":"https://arbitrum-btc-usdc-sls.tradingstrategy.ai"}]'
 # Uncomment to test chain maintenance error

diff --git a/src/lib/components/ContentCard.svelte b/src/lib/components/ContentCard.svelte
@@ -20,18 +20,18 @@ logic is required. Use `slot="cta"` instead of `ctaLabel` when custom button opt
 <script lang="ts">
 	import { Button, Icon } from '$lib/components';
 
-	export let ctaLabel = '';
-	export let ctaFullWidth = false;
-	export let description = '';
 	export let icon: string | undefined = undefined;
-	export let href = '';
 	export let title: string | undefined = undefined;
+	export let description = '';
+	export let ctaFullWidth = false;
+	export let ctaLabel = '';
+	export let href: string | undefined = undefined;
+	export let target: string | undefined = undefined;
+	export let rel: string | undefined = undefined;
 
 	$: tag = href ? 'a' : 'div';
 
-	$: anchorProps = {
-		href
-	};
+	$: anchorProps = { href, rel, target };
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -1,22 +1,51 @@
 <script>
+	import { discordUrl } from '$lib/config';
 	import { SocialIcon } from '$lib/components';
 
 	export let small = false;
 </script>
 
 <footer class:small>
 	<div class="icon-group">
-		<SocialIcon {small} name="github" href="https://github.com/tradingstrategy-ai" title="GitHub" />
-		<SocialIcon {small} name="discord" href="https://discord.gg/en8tW6MDtw" title="Discord" />
-		<SocialIcon {small} name="telegram" href="https://t.me/trading_protocol" title="Telegram" />
-		<SocialIcon {small} name="twitter" href="https://twitter.com/tradingprotocol" title="Twitter" />
+		<SocialIcon
+			{small}
+			name="github"
+			href="https://github.com/tradingstrategy-ai"
+			title="GitHub"
+			target="_blank"
+			rel="noreferrer"
+		/>
+		<SocialIcon {small} name="discord" href={discordUrl} title="Discord" target="_blank" rel="noreferrer" />
+		<SocialIcon
+			{small}
+			name="telegram"
+			href="https://t.me/trading_protocol"
+			title="Telegram"
+			target="_blank"
+			rel="noreferrer"
+		/>
+		<SocialIcon
+			{small}
+			name="twitter"
+			href="https://twitter.com/tradingprotocol"
+			title="Twitter"
+			target="_blank"
+			rel="noreferrer"
+		/>
 	</div>
 
 	<div class="icon-group">
-		<SocialIcon {small} name="linkedin" href="https://www.linkedin.com/company/trading-strategy/" title="LinkedIn" />
+		<SocialIcon
+			{small}
+			name="linkedin"
+			href="https://www.linkedin.com/company/trading-strategy/"
+			title="LinkedIn"
+			target="_blank"
+			rel="noreferrer"
+		/>
 		<SocialIcon {small} name="newspaper" title="Newsletter" href="/newsletter" />
 		<SocialIcon {small} name="reading" title="Blog" href="/blog" />
-		<SocialIcon {small} external name="rss" href="/blog/rss.xml" title="RSS" />
+		<SocialIcon {small} name="rss" href="/blog/rss.xml" title="RSS" target="_blank" />
 	</div>
 </footer>
 

diff --git a/src/lib/components/SocialIcon.svelte b/src/lib/components/SocialIcon.svelte
@@ -4,14 +4,15 @@
 	export let name: string;
 	export let title = name;
 	export let href: string | undefined = undefined;
-	export let external = false;
+	export let rel: string | undefined = undefined;
+	export let target: string | undefined = undefined;
 	export let small = false;
 
 	$: tag = href ? 'a' : 'span';
-	$: rel = external ? 'external' : undefined;
+	$: anchorProps = { href, rel, target };
 </script>
 
-<svelte:element this={tag} class="social-icon" class:small {href} {title} {rel}>
+<svelte:element this={tag} class="social-icon" class:small {title} {...anchorProps}>
 	<Icon {name} />
 </svelte:element>
 

diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -88,6 +88,16 @@ export const typesenseConfig = config(
 	'TYPESENSE_API_URL'
 );
 
+/**
+ * Load Discord invite URL and warn if not available.
+ */
+export const discordUrl = config((url: string) => {
+	if (!url) {
+		console.warn('Discord invite URL not configured');
+	}
+	return url;
+}, 'DISCORD_URL');
+
 /**
  * Load configured strategies.
  *

diff --git a/src/routes/ErrorPageInfo.svelte b/src/routes/ErrorPageInfo.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { discordUrl } from '$lib/config';
 	import { Button } from '$lib/components';
 
 	export let status: number;
@@ -16,7 +17,7 @@
 
 	<div class="buttons">
 		<slot />
-		<Button secondary label="Get help on Discord" icon="discord" href="https://discord.gg/en8tW6MDtw" target="_blank" />
+		<Button secondary label="Get help on Discord" icon="discord" href={discordUrl} target="_blank" rel="noreferrer" />
 	</div>
 </section>
 

diff --git a/src/routes/MaintenanceNotice.svelte b/src/routes/MaintenanceNotice.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { maintenanceNotice } from '$lib/config';
+	import { discordUrl, maintenanceNotice } from '$lib/config';
 	import { Alert, Button, Section } from '$lib/components';
 </script>
 
 {#if maintenanceNotice}
 	<Section padding="sm">
 		<Alert status="warning" title="Site maintenance">
 			{@html maintenanceNotice}
-			<Button slot="cta" icon="discord" label="Join Discord" href="https://discord.gg/en8tW6MDtw" />
+			<Button slot="cta" icon="discord" label="Join Discord" href={discordUrl} target="_blank" rel="noreferrer" />
 		</Alert>
 	</Section>
 {/if}
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { discordUrl } from '$lib/config';
 	import { Banner, Button, HeroVideo, Section } from '$lib/components';
 	import IntroHero from './IntroHero.svelte';
 	import Audience from './Audience.svelte';
@@ -59,8 +60,9 @@
 				secondary
 				label="Join our Discord server"
 				icon="discord"
-				href="https://discord.gg/en8tW6MDtw"
+				href={discordUrl}
 				target="_blank"
+				rel="noreferrer"
 			/>
 		</div>
 	</Section>

diff --git a/src/routes/about/Audience.svelte b/src/routes/about/Audience.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { discordUrl } from '$lib/config';
 	import { Button, Grid, Section, SummaryBox } from '$lib/components';
 </script>
 
@@ -44,8 +45,9 @@
 					slot="cta"
 					label="Join our Discord server"
 					icon="discord"
-					href="https://discord.gg/en8tW6MDtw"
+					href={discordUrl}
 					target="_blank"
+					rel="noreferrer"
 				/>
 			</SummaryBox>
 		</Grid>

diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { discordUrl } from '$lib/config';
 	import heroImage from '$lib/assets/illustrations/communication-1.svg?raw';
 	import { ContentCard, ContentCardsSection, ContentCardsTemplate, HeroBanner } from '$lib/components';
 </script>
@@ -13,71 +14,83 @@
 
 	<ContentCardsSection cols={3} title="Discuss & develop">
 		<ContentCard
-			ctaLabel="Join our server"
 			icon="discord"
 			title="Discord chat"
-			href="https://discord.gg/en8tW6MDtw"
 			description="Join our expert community of traders, developers, and analysts and DeFi specialists."
+			ctaLabel="Join our server"
+			href={discordUrl}
+			target="_blank"
+			rel="noreferrer"
 		/>
 		<ContentCard
-			ctaLabel="Browse code"
 			icon="github"
 			title="GitHub"
-			href="https://github.com/tradingstrategy-ai/"
 			description="Explore Trading Strategy open-source code on our GitHub repository."
+			ctaLabel="Browse code"
+			href="https://github.com/tradingstrategy-ai/"
+			target="_blank"
+			rel="noreferrer"
 		/>
 		<ContentCard
-			ctaLabel="Start tutorials"
 			icon="read-glasses"
 			title="Learn algorithmic trading"
-			href="https://tradingstrategy.ai/docs/learn/index.html"
 			description="Learn how to write trading algorithms with our learning resources collection."
+			ctaLabel="Start tutorials"
+			href="https://tradingstrategy.ai/docs/learn/index.html"
 		/>
 	</ContentCardsSection>
 
 	<ContentCardsSection cols={3} title="Follow us">
 		<ContentCard
-			ctaLabel="Read blog"
 			icon="reading"
 			title="Blog"
-			href="/blog"
 			description="Join our expert community of traders, developers, and analysts and DeFi specialists."
+			ctaLabel="Read blog"
+			href="/blog"
 		/>
 		<ContentCard
-			ctaLabel="Follow us"
 			icon="twitter"
 			title="Twitter"
-			href="https://twitter.com/TradingProtocol"
 			description="Follow us on Twitter for trading alerts, DeFi insight and protocol news."
+			ctaLabel="Follow us"
+			href="https://twitter.com/TradingProtocol"
+			target="_blank"
+			rel="noreferrer"
 		/>
 		<ContentCard
-			ctaLabel="Subscribe to our channel"
 			icon="youtube"
 			title="YouTube"
-			href="https://www.youtube.com/channel/UCXBQRclPxMY40n52-k3VhYQ"
 			description="Subscribe to our Youtube channel and watch the latest videos on DeFi and algorithmic trading."
+			ctaLabel="Subscribe to our channel"
+			href="https://www.youtube.com/channel/UCXBQRclPxMY40n52-k3VhYQ"
+			target="_blank"
+			rel="noreferrer"
 		/>
 		<ContentCard
-			ctaLabel="Follow our company"
 			icon="linkedin"
 			title="LinkedIn"
-			href="https://www.linkedin.com/company/trading-strategy/"
 			description="Follow us on LinkedIn and join our community of traders, developers and quant experts."
+			ctaLabel="Follow our company"
+			href="https://www.linkedin.com/company/trading-strategy/"
+			target="_blank"
+			rel="noreferrer"
 		/>
 		<ContentCard
-			ctaLabel="Join our group"
 			icon="telegram"
 			title="Telegram"
-			href="https://t.me/trading_protocol"
 			description="Subscribe to our Telegram channel for trading alerts, DeFi insight and protocol news."
+			ctaLabel="Join our group"
+			href="https://t.me/trading_protocol"
+			target="_blank"
+			rel="noreferrer"
 		/>
 		<div style:display="contents" style:cursor="pointer">
 			<ContentCard
-				ctaLabel="Subscribe to newsletter"
 				icon="newspaper"
 				title="Newsletter"
-				href="/newsletter"
 				description="Subscribe to our newsletter and never miss protocol updates, trading tips, news and insights."
+				ctaLabel="Subscribe to newsletter"
+				href="/newsletter"
 			/>
 		</div>
 	</ContentCardsSection>

diff --git a/src/routes/qr/+page.svelte b/src/routes/qr/+page.svelte
@@ -5,6 +5,7 @@ on the conference rolls.
 
 -->
 <script lang="ts">
+	import { discordUrl } from '$lib/config';
 	import { HeroBanner, ContentCard, ContentCardsSection, ContentCardsTemplate } from '$lib/components';
 	import BrandMark from '$lib/assets/brand-mark.svg?raw';
 </script>
@@ -24,28 +25,36 @@ on the conference rolls.
 			icon="discord"
 			title="Discord chat"
 			description="Join our expert community of traders, developers, and analysts and DeFi specialists."
-			href="https://discord.gg/en8tW6MDtw"
+			href={discordUrl}
+			target="_blank"
+			rel="noreferrer"
 		/>
 
 		<ContentCard
 			icon="twitter"
 			title="Twitter"
 			description="Follow us on Twitter for trading alerts, DeFi insight and protocol news."
 			href="https://twitter.com/TradingProtocol"
+			target="_blank"
+			rel="noreferrer"
 		/>
 
 		<ContentCard
 			icon="linkedin"
 			title="LinkedIn"
 			description="Follow us on LinkedIn and join our community of traders, developers and quant experts."
 			href="https://www.linkedin.com/company/trading-strategy/"
+			target="_blank"
+			rel="noreferrer"
 		/>
 
 		<ContentCard
 			icon="telegram"
 			title="Telegram"
 			description="Subscribe to our Telegram channel for trading alerts, DeFi insight and protocol news."
 			href="https://t.me/trading_protocol"
+			target="_blank"
+			rel="noreferrer"
 		/>
 
 		<ContentCard
@@ -60,6 +69,8 @@ on the conference rolls.
 			title="YouTube"
 			description="Subscribe to our Youtube channel and watch the latest videos on DeFi and algorithmic trading."
 			href="https://www.youtube.com/channel/UCXBQRclPxMY40n52-k3VhYQ"
+			target="_blank"
+			rel="noreferrer"
 		/>
 	</ContentCardsSection>
 </ContentCardsTemplate>
diff --git a/src/routes/wizard/WizardHeader.svelte b/src/routes/wizard/WizardHeader.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { discordUrl } from '$lib/config';
 	import { Button, Logo, Section } from '$lib/components';
 
 	$: windowInnerWidth = 0;
@@ -13,11 +14,12 @@
 		</a>
 
 		<Button
-			href="https://discord.gg/en8tW6MDtw"
+			href={discordUrl}
 			icon="discord"
 			label={windowInnerWidth >= 768 ? 'Get help' : undefined}
 			size="sm"
 			target="_blank"
+			rel="noreferrer"
 		/>
 	</div>
 </Section>