dynamic discord links (fakeyou vs storyteller)

packages/components/src/elements/DiscordLink.tsx

@@ -3,6 +3,7 @@ import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ThirdPartyLinks } from "../constants/ThirdPartyLinks";
+import { GetWebsite, Website } from "../env/GetWebsite";
 
 interface Props {
   text?: string;
@@ -10,6 +11,12 @@ interface Props {
 }
 
 function DiscordLink(props: Props) {
+  const website = GetWebsite();
+  const discordLink = 
+    website.website === Website.FakeYou ? 
+      ThirdPartyLinks.FAKEYOU_DISCORD : 
+      ThirdPartyLinks.STORYTELLER_DISCORD;
+
   const linkText = props.text === undefined ? "Discord" : props.text;
   const iconAfterText = props.iconAfterText ? true : false;
   const linkBody = iconAfterText ? (
@@ -25,7 +32,7 @@ function DiscordLink(props: Props) {
   );
   return (
     <a
-      href={ThirdPartyLinks.FAKEYOU_DISCORD}
+      href={discordLink}
       target="_blank"
       rel="noopener noreferrer"
     >

packages/components/src/elements/DiscordLink2.tsx

@@ -3,6 +3,7 @@ import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ThirdPartyLinks } from "../constants/ThirdPartyLinks";
+import { GetWebsite, Website } from "../env/GetWebsite";
 
 interface Props {
   hideIcon?: boolean;
@@ -18,7 +19,18 @@ function DiscordLink2(props: Props) {
   const showIcon = !(props.hideIcon ? true : false);
   const iconBeforeText = props.iconBeforeText ? true : false;
 
-  const linkTitle = props.title ? props.title : "FakeYou Discord";
+  const website = GetWebsite();
+  const discordLink = 
+    website.website === Website.FakeYou ? 
+      ThirdPartyLinks.FAKEYOU_DISCORD : 
+      ThirdPartyLinks.STORYTELLER_DISCORD;
+
+  const defaultTitle = 
+    website.website === Website.FakeYou ? 
+      "FakeYou Discord" : 
+      "Storyteller Discord" ;
+
+  const linkTitle = props.title ? props.title : defaultTitle;
 
   if (showIcon) {
     linkBody = iconBeforeText ? (
@@ -36,7 +48,7 @@ function DiscordLink2(props: Props) {
 
   return (
     <a
-      href={ThirdPartyLinks.FAKEYOU_DISCORD}
+      href={discordLink}
       target="_blank"
       rel="noopener noreferrer"
     >

packages/components/src/env/GetDiscordLink.ts

@@ -0,0 +1,11 @@
+import { ThirdPartyLinks } from "../constants/ThirdPartyLinks";
+import { GetWebsite, Website } from "./GetWebsite";
+
+const DISCORD_LINK : string = 
+  GetWebsite().website === Website.FakeYou ? 
+      ThirdPartyLinks.FAKEYOU_DISCORD : 
+      ThirdPartyLinks.STORYTELLER_DISCORD;
+
+export function GetDiscordLink() : string {
+  return DISCORD_LINK;
+}

packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx

@@ -25,6 +25,7 @@ import {
   faFilm,
 } from "@fortawesome/pro-solid-svg-icons";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { GetDiscordLink } from "@storyteller/components/src/env/GetDiscordLink";
 import { FakeYouFrontendEnvironment } from "@storyteller/components/src/env/FakeYouFrontendEnvironment";
 import { useInferenceJobs, useLocalize } from "hooks";
 import { Logout } from "@storyteller/components/src/api/session/Logout";
@@ -479,7 +480,7 @@ export default function SideNav({
             </li>
             <li className="mb-3">
               <a
-                href="https://discord.gg/fakeyou"
+                href={GetDiscordLink()}
                 target="_blank"
                 rel="noreferrer"
               >

packages/fakeyou.com/src/v2/view/pages/contest/CommunityCommissionsPage.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWaveformLines } from "@fortawesome/pro-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
+import { GetDiscordLink } from "@storyteller/components/src/env/GetDiscordLink";
 
 interface Props {}
 
@@ -51,7 +52,7 @@ function CommunityCommissionsPage(props: Props) {
                     Upload Voice Model
                   </Link>
                   <a
-                    href="https://discord.gg/fakeyou"
+                    href={GetDiscordLink()}
                     className="btn btn-discord text-white"
                     target="_blank"
                     rel="noreferrer"

packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx

@@ -1,5 +1,6 @@
 import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { GetDiscordLink } from "@storyteller/components/src/env/GetDiscordLink";
 // import { Panel } from "components/common";
 import { useLocalize } from "hooks";
 import React from "react";
@@ -57,7 +58,7 @@ export default function FakeYouLandingBody(props: FakeYouLandingBodyProps) {
             <p className="opacity-75">{t("communityText")}</p>
             <div className="d-flex mt-4 gap-3">
               <a
-                href="https://discord.gg/fakeyou"
+                href={GetDiscordLink()}
                 target="_blank"
                 rel="noreferrer"
                 className="btn btn-discord"

packages/storyteller.io/src/common/Footer.tsx

@@ -7,6 +7,7 @@ import {
   faTwitch,
   faTwitter,
 } from "@fortawesome/free-brands-svg-icons";
+import { GetDiscordLink } from "@storyteller/components/src/env/GetDiscordLink";
 
 interface Props {}
 
@@ -18,7 +19,7 @@ function Footer(props: Props) {
           <div className="container footer-top text-center">
             <div className="d-flex gap-4 justify-content-center p-4 pb-5">
               <a
-                href="https://discord.gg/fakeyou"
+                href={GetDiscordLink()}
                 className="footer-social-icon"
                 rel="noreferrer"
                 target="_blank"