Collect common 3rd party links as central constants; dropdown Discord

packages/components/src/constants/ThirdPartyLinks.ts

@@ -0,0 +1,15 @@
+/**
+ * Define links to third party sources here so we can update them in one place.
+ */
+class ThirdPartyLinks {
+    // This should only need to change if our Nitro expires.
+    // Old FakeYou Discord invite link: https://discord.gg/H72KFXm
+    public static readonly FAKEYOU_DISCORD = "https://discord.gg/fakeyou";
+
+    // A link to Twitter that will open a "Follow" prompt
+    public static readonly FAKEYOU_TWITTER_WITH_FOLLOW_INTENT = "https://twitter.com/intent/follow?screen_name=FakeYouApp";
+
+    public static readonly FAKEYOU_PATREON = "https://www.patreon.com/fakeyou";
+}
+
+export { ThirdPartyLinks }

packages/components/src/elements/DiscordLink.tsx

@@ -2,6 +2,7 @@ import React from "react";
 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";
 
 interface Props {
   text?: string;
@@ -24,7 +25,7 @@ function DiscordLink(props: Props) {
   );
   return (
     <a
-      href="https://discord.gg/fakeyou"
+      href={ThirdPartyLinks.FAKEYOU_DISCORD}
       target="_blank"
       rel="noopener noreferrer"
     >

packages/components/src/elements/DiscordLink2.tsx

@@ -2,6 +2,7 @@ import React from "react";
 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";
 
 interface Props {
   hideIcon?: boolean;
@@ -35,7 +36,7 @@ function DiscordLink2(props: Props) {
 
   return (
     <a
-      href="https://discord.gg/H72KFXm"
+      href={ThirdPartyLinks.FAKEYOU_DISCORD}
       target="_blank"
       rel="noopener noreferrer"
     >

packages/components/src/elements/PatreonLink.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faPatreon } from "@fortawesome/free-brands-svg-icons";
+import { ThirdPartyLinks } from "../constants/ThirdPartyLinks";
 
 interface Props {
   text?: string;
@@ -24,7 +25,7 @@ function PatreonLink(props: Props) {
   );
   return (
     <a
-      href="https://www.patreon.com/FakeYou"
+      href={ThirdPartyLinks.FAKEYOU_PATREON}
       target="_blank"
       rel="noopener noreferrer"
     >

packages/components/src/elements/TwitterLink.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ThirdPartyLinks } from "../constants/ThirdPartyLinks";
 
 interface Props {
   hideIcon?: boolean;
@@ -35,7 +36,7 @@ function TwitterLink(props: Props) {
 
   return (
     <a
-      href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
+      href={ThirdPartyLinks.FAKEYOU_TWITTER_WITH_FOLLOW_INTENT}
       target="_blank"
       rel="noopener noreferrer"
     >

packages/fakeyou/src/v2/view/NewFooterNavFc.tsx

@@ -15,6 +15,7 @@ import {
   faTwitter,
   faFacebook,
 } from "@fortawesome/free-brands-svg-icons";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -83,7 +84,7 @@ function NewFooterNavFc(props: Props) {
         <div className="d-flex justify-content-center gap-4">
           <a
             className="social-icon"
-            href="https://discord.gg/fakeyou"
+            href={ThirdPartyLinks.FAKEYOU_DISCORD}
             target="_blank"
             rel="noopener noreferrer"
             title="Join our Discord Server"
@@ -101,7 +102,7 @@ function NewFooterNavFc(props: Props) {
           </a>
           <a
             className="social-icon"
-            href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
+            href={ThirdPartyLinks.FAKEYOU_TWITTER_WITH_FOLLOW_INTENT}
             target="_blank"
             rel="noopener noreferrer"
             title="Follow us on Twitter"
@@ -119,7 +120,7 @@ function NewFooterNavFc(props: Props) {
           </a>
           <a
             className="social-icon"
-            href="https://www.patreon.com/FakeYou"
+            href={ThirdPartyLinks.FAKEYOU_PATREON}
             target="_blank"
             rel="noopener noreferrer"
             title="Support us by becoming a patreon"

packages/fakeyou/src/v2/view/NewTopNavFc.tsx

@@ -19,7 +19,7 @@ import {
   faComputer,
   faLaptop,
 } from "@fortawesome/free-solid-svg-icons";
-import { faPatreon } from "@fortawesome/free-brands-svg-icons";
+import { faDiscord, faPatreon } from "@fortawesome/free-brands-svg-icons";
 import { Logout } from "@storyteller/components/src/api/session/Logout";
 import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
 import {
@@ -37,6 +37,7 @@ import {
 import Tippy from "@tippyjs/react";
 import "tippy.js/dist/tippy.css";
 import "tippy.js/animations/shift-away.css";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -380,6 +381,16 @@ function NewTopNavFc(props: Props) {
                         Leaderboard
                       </Link>
                     </li>
+                    <li data-bs-toggle="offcanvas">
+                      <a className="dropdown-item" 
+                          href={ThirdPartyLinks.FAKEYOU_DISCORD} 
+                          title="discord chat" 
+                          target="_blank" 
+                          rel="noopener noreferrer">
+                        <FontAwesomeIcon icon={faDiscord} className="me-2" />
+                        Discord Chat
+                      </a>
+                    </li>
                     <li data-bs-toggle="offcanvas">
                       <Link className="dropdown-item" to="/patrons" title="to patron list">
                         <FontAwesomeIcon icon={faPatreon} className="me-2" />

packages/fakeyou/src/v2/view/about/terms_page/TermsPage.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 
 interface Props {}
 
@@ -28,7 +29,7 @@ function TermsPage(props: Props) {
               We do not condone the use of FakeYou for any type of deception,
               slur, abuse, or mistreatment of any individual or group. Please
               report such abuses to our{" "}
-              <a href="https://discord.gg/H72KFXm">
+              <a href={ThirdPartyLinks.FAKEYOU_DISCORD}>
                 community staff on Discord
               </a>
               . Bad actors will have their access revoked and materials deleted.

packages/fakeyou/src/v2/view/patrons/PatronPage.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPatreon } from "@fortawesome/free-brands-svg-icons";
 import { motion } from "framer-motion";
 import { container, item, image, panel } from "../../../data/animation";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 interface Props {
   sessionWrapper: SessionWrapper;
 }
@@ -29,7 +30,7 @@ function PatronPage(props: Props) {
 
             <motion.div className="d-flex" variants={item}>
               <a
-                href="https://www.patreon.com/fakeyou"
+                href={ThirdPartyLinks.FAKEYOU_PATREON}
                 target="_blank"
                 rel="noreferrer"
                 className="btn btn-primary"

packages/fakeyou/src/v2/view/w2l/w2l_template_view/W2lTemplateViewFc.tsx

@@ -25,6 +25,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 
 interface EnqueueJobResponsePayload {
   success: boolean;
@@ -190,7 +191,7 @@ function W2lTemplateViewFc(props: Props) {
         <span>
           Not yet (ask for approval in our&nbsp;
           <a
-            href="https://discord.gg/H72KFXm"
+            href={ThirdPartyLinks.FAKEYOU_DISCORD}
             target="_blank"
             rel="noopener noreferrer"
           >

packages/storyteller-home/src/pages/index/IndexPage.tsx

@@ -27,6 +27,7 @@ import { useEffect } from "react";
 import gsap from "gsap";
 import SplitType from "split-type";
 import Scene from "./Scene";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks"
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
@@ -164,7 +165,7 @@ function IndexPage() {
             data-scroll-position="top"
           >
             <Tippy content="Discord" placement="right">
-              <a href="https://discord.gg/fakeyou">
+              <a href={ThirdPartyLinks.FAKEYOU_DISCORD}>
                 <FontAwesomeIcon icon={faDiscord} />
               </a>
             </Tippy>
@@ -591,7 +592,7 @@ function IndexPage() {
                 </p>
                 <div>
                   <a
-                    href="https://discord.gg/fakeyou"
+                    href={ThirdPartyLinks.FAKEYOU_DISCORD}
                     rel="noreferrer"
                     target="_blank"
                     className="btn btn-primary mt-4"
@@ -687,7 +688,7 @@ function IndexPage() {
                   </p>
                   <div>
                     <a
-                      href="https://discord.gg/fakeyou"
+                      href={ThirdPartyLinks.FAKEYOU_DISCORD}
                       rel="noreferrer"
                       target="_blank"
                       className="btn btn-primary mt-3"