From 92957cf8c2a2c2ddde7ecb8d269630f179dbce49 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 21 Aug 2024 17:18:36 -0400
Subject: [PATCH] add 404 pages for Storyteller and FakeYou

---
 scripts/ci/build-fakeyou.com.sh               |   3 +
 scripts/ci/build-storyteller.ai.sh            |   4 +
 .../fakeyou.com/public/404_fakeyou.html       | 143 ++++++++++++++++++
 .../fakeyou.com/public/404_storyteller.html   | 143 ++++++++++++++++++
 4 files changed, 293 insertions(+)
 create mode 100644 src/website/packages/fakeyou.com/public/404_fakeyou.html
 create mode 100644 src/website/packages/fakeyou.com/public/404_storyteller.html

diff --git a/scripts/ci/build-fakeyou.com.sh b/scripts/ci/build-fakeyou.com.sh
index d4b34a89d0..e1a94da3d3 100755
--- a/scripts/ci/build-fakeyou.com.sh
+++ b/scripts/ci/build-fakeyou.com.sh
@@ -55,5 +55,8 @@ cp src/netlify_configs/fakeyou.com/_redirects fakeyou.com/
 cp src/netlify_configs/fakeyou.com/netlify.toml fakeyou.com/
 cp src/netlify_configs/fakeyou.com/netlify.toml ./
 
+echo "Copying 404 page..."
+mv src/website/packages/fakeyou.com/build/404_fakeyou.html fakeyou.com/404.html
+
 echo "List files in build directory"
 find fakeyou.com/
diff --git a/scripts/ci/build-storyteller.ai.sh b/scripts/ci/build-storyteller.ai.sh
index 360f609094..b9f78c451c 100755
--- a/scripts/ci/build-storyteller.ai.sh
+++ b/scripts/ci/build-storyteller.ai.sh
@@ -56,5 +56,9 @@ cp src/netlify_configs/storyteller.ai/_redirects storyteller.ai/
 cp src/netlify_configs/storyteller.ai/netlify.toml storyteller.ai/
 cp src/netlify_configs/storyteller.ai/netlify.toml ./
 
+echo "Copying 404 page..."
+# NB: storyteller is part of the "fakeyou.com" build
+mv src/website/packages/fakeyou.com/build/404_fakeyou.html storyteller.ai/404.html
+
 echo "List files in build directory"
 find storyteller.ai/
diff --git a/src/website/packages/fakeyou.com/public/404_fakeyou.html b/src/website/packages/fakeyou.com/public/404_fakeyou.html
new file mode 100644
index 0000000000..457b297879
--- /dev/null
+++ b/src/website/packages/fakeyou.com/public/404_fakeyou.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+
+    <!-- Preload important images on index so they don't load late. -->
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/fakeyou/FakeYou-Logo.png"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/mascot/kitsune_pose2.webp"
+    />
+    <!-- Preload images on other pages. -->
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/mascot/kitsune_pose7.webp"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/mascot/kitsune_pose3.webp"
+    />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1c1c25" />
+    <meta name="description" content="Storyteller.ai AI creation engine" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- Google Tag Manager -->
+    <!-- This *eventually* replaces gtag.js :/ -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != "dataLayer" ? "&l=" + l : "";
+        j.async = true;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, "script", "dataLayer", "GTM-K62TJT9N");
+    </script>
+    <!-- End Google Tag Manager -->
+
+    <!-- Google tag (gtag.js) -->
+    <!-- This replaces old universal analytics. -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-525G5MXFJG"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-525G5MXFJG");
+    </script>
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Storyteller.ai | Your AI creation engine</title>
+
+    <!-- Twitter, Discord, etc. -->
+    <meta
+      property="og:title"
+      content="Storyteller.ai | Your AI creation engine"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://storyteller.ai" />
+    <meta property="og:image" content="%PUBLIC_URL%/apple-touch-icon.png" />
+    <meta
+      property="og:description"
+      content="Storyteller.ai is your AI creation engine."
+    />
+
+    <!-- Include this to make the og:image larger -->
+    <meta name="twitter:card" content="summary_large_image" />
+
+    <!-- OLD FakeYou; TODO(echelon): Remove when done. -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,300;0,400;1,300&family=Fugaz+One&family=Merriweather:wght@300&family=Fira+Sans:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- New FakeYou -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Tolt Affiliate Program -->
+    <script
+      async
+      src="https://cdn.tolt.io/tolt.js"
+      data-tolt="a221670f-8727-41bd-9ae9-e6cf9fe5e127"
+    ></script>
+
+    <!-- import bootstrap
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    -->
+  </head>
+  <body>
+    <h1>This Page Could Not Be Found</h1>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/website/packages/fakeyou.com/public/404_storyteller.html b/src/website/packages/fakeyou.com/public/404_storyteller.html
new file mode 100644
index 0000000000..457b297879
--- /dev/null
+++ b/src/website/packages/fakeyou.com/public/404_storyteller.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+
+    <!-- Preload important images on index so they don't load late. -->
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/fakeyou/FakeYou-Logo.png"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/mascot/kitsune_pose2.webp"
+    />
+    <!-- Preload images on other pages. -->
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/mascot/kitsune_pose7.webp"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/mascot/kitsune_pose3.webp"
+    />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1c1c25" />
+    <meta name="description" content="Storyteller.ai AI creation engine" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- Google Tag Manager -->
+    <!-- This *eventually* replaces gtag.js :/ -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != "dataLayer" ? "&l=" + l : "";
+        j.async = true;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, "script", "dataLayer", "GTM-K62TJT9N");
+    </script>
+    <!-- End Google Tag Manager -->
+
+    <!-- Google tag (gtag.js) -->
+    <!-- This replaces old universal analytics. -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-525G5MXFJG"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-525G5MXFJG");
+    </script>
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Storyteller.ai | Your AI creation engine</title>
+
+    <!-- Twitter, Discord, etc. -->
+    <meta
+      property="og:title"
+      content="Storyteller.ai | Your AI creation engine"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://storyteller.ai" />
+    <meta property="og:image" content="%PUBLIC_URL%/apple-touch-icon.png" />
+    <meta
+      property="og:description"
+      content="Storyteller.ai is your AI creation engine."
+    />
+
+    <!-- Include this to make the og:image larger -->
+    <meta name="twitter:card" content="summary_large_image" />
+
+    <!-- OLD FakeYou; TODO(echelon): Remove when done. -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,300;0,400;1,300&family=Fugaz+One&family=Merriweather:wght@300&family=Fira+Sans:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- New FakeYou -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Tolt Affiliate Program -->
+    <script
+      async
+      src="https://cdn.tolt.io/tolt.js"
+      data-tolt="a221670f-8727-41bd-9ae9-e6cf9fe5e127"
+    ></script>
+
+    <!-- import bootstrap
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    -->
+  </head>
+  <body>
+    <h1>This Page Could Not Be Found</h1>
+  </body>
+</html>
\ No newline at end of file