From 984ab48da9bbf057f045284efc18383175ea187d Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Thu, 29 Feb 2024 13:00:54 -0800
Subject: [PATCH] Correctly rendering examples

---
 src/pages/examples/[...slug].astro | 17 -----------------
 src/pages/examples/[slug].astro    | 29 +++++++++++++++++++++++++++++
 src/pages/examples/index.astro     | 21 +++++++++++++++++++--
 src/pages/examples/utils.ts        | 10 ++++++++++
 4 files changed, 58 insertions(+), 19 deletions(-)
 delete mode 100644 src/pages/examples/[...slug].astro
 create mode 100644 src/pages/examples/[slug].astro
 create mode 100644 src/pages/examples/utils.ts

diff --git a/src/pages/examples/[...slug].astro b/src/pages/examples/[...slug].astro
deleted file mode 100644
index 53a2229094..0000000000
--- a/src/pages/examples/[...slug].astro
+++ /dev/null
@@ -1,17 +0,0 @@
----
-import { getCollection } from "astro:content";
-
-export async function getStaticPaths() {
-  const examples = await getCollection("examples");
-  return examples.map((entry) => ({
-    params: { slug: entry.slug },
-    props: { entry },
-  }));
-}
-
-const { entry } = Astro.props;
-const { Content } = await entry.render();
----
-
-<h1>{entry.data.title}</h1>
-<code>{JSON.stringify(entry)}</code>
diff --git a/src/pages/examples/[slug].astro b/src/pages/examples/[slug].astro
new file mode 100644
index 0000000000..e70cd57bd2
--- /dev/null
+++ b/src/pages/examples/[slug].astro
@@ -0,0 +1,29 @@
+---
+import { getCollection } from "astro:content";
+import { exampleContentSlugToLegacyWebsiteSlug } from "./utils";
+import { readFile } from "fs/promises";
+
+export async function getStaticPaths() {
+  const examples = await getCollection("examples");
+  const paths = await Promise.all(
+    examples.map(async (example) => {
+      const codePath = `src/content/examples/${example.id.replace("description.mdx", "code.js")}`;
+      const code = await readFile(codePath, "utf-8");
+      return {
+        params: { slug: exampleContentSlugToLegacyWebsiteSlug(example.slug) },
+        props: { example, code },
+      };
+    }),
+  );
+
+  return paths;
+}
+
+const { example, code } = Astro.props;
+const { Content } = await example.render();
+---
+
+<h1>{example.data.title}</h1>
+<p>{example.data.arialabel}</p>
+<Content />
+<pre>{code}</pre>
diff --git a/src/pages/examples/index.astro b/src/pages/examples/index.astro
index a22671529e..c80f319e61 100644
--- a/src/pages/examples/index.astro
+++ b/src/pages/examples/index.astro
@@ -1,13 +1,30 @@
 ---
 import { getCollection } from "astro:content";
-const exampleEntries = await getCollection("examples");
+import { exampleContentSlugToLegacyWebsiteSlug } from "./utils";
+
+/* We have to modify the Astro.js slug to match existing routing */
+/* This is done dynamically here instead of relying on example authors */
+/* to update their slugs in the MDX Content Entry */
+async function transformExampleSlugs() {
+  const exampleEntries = await getCollection("examples");
+
+  const transformedEntries = exampleEntries.map((entry) => ({
+    ...entry,
+    slug: exampleContentSlugToLegacyWebsiteSlug(entry.slug),
+  }));
+
+  return transformedEntries;
+}
+
+// Using the transformed collection
+const exampleEntries = await transformExampleSlugs();
 ---
 
 <ul>
   {
     exampleEntries.map((exampleEntry) => (
       <li>
-        <a href={exampleEntry.slug}>{exampleEntry.data.title}</a>
+        <a href={`.${exampleEntry.slug}`}>{exampleEntry.data.title}</a>
       </li>
     ))
   }
diff --git a/src/pages/examples/utils.ts b/src/pages/examples/utils.ts
new file mode 100644
index 0000000000..e61491a95d
--- /dev/null
+++ b/src/pages/examples/utils.ts
@@ -0,0 +1,10 @@
+/** Astro automatically uses the directory structure for slug information */
+/** Historically the p5 website has used a different structure for example file vs. webpage routing */
+/** This function transforms the Astro slug to the appropriate webpage route to avoid breaking */
+/** Any inbound legacy links */
+export const exampleContentSlugToLegacyWebsiteSlug = (path: string): string =>
+  path
+    .replace(/^en\/\d+_(.*?)\/\d+_(.*?)\/description$/, "/$1-$2.html")
+    .replace(/_/g, "-");
+
+export default exampleContentSlugToLegacyWebsiteSlug;