Correctly rendering examples

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>

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>
     ))
   }

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;