Use remixLookup to reduce duplicate .mdx headers

Author: ksen0

src/content/examples/config.ts

@@ -1,5 +1,6 @@
 import { z, defineCollection, reference } from "astro:content";
 
+
 /**
  * Content collection for the Examples section of the site.
  * Each file represents a single example.
@@ -22,19 +23,49 @@ export const examplesCollection = defineCollection({
 
       // Start of collective attribution
       collectivelyAttributedSince: z.number().optional(),
-      
+
       // Optional list of remixes to add to license
       remix: z
         .array(
-          z.object({
-            attributionURL: z.string().optional(),
-            attributionLabel: z.string().optional(),
-            remixURL: z.string().optional(),
-            remixLabel: z.string().optional(),
-          })
+          z.union([
+            z.string(),
+            z.object({
+              attributionURL: z.string().optional(),
+              attributionLabel: z.string().optional(),
+              remixURL: z.string().optional(),
+              remixLabel: z.string().optional(),
+            }),
+          ])
         )
         .optional()
         .default([]),
     }),
 });
 
+/**
+ * The `remix` field lets you add remix attributions in two ways:
+ * 1. Full objects with all details.
+ * 2. Short string keys that refer to predefined entries in `remixLookup`.
+ * When rendering (in ExampleLayout.astro), these keys are replaced 
+ * with their full details from `remixLookup`.
+ */
+export const remixLookup = {
+  "revision-2023-calebfoss": {
+    attributionURL: "https://github.com/calebfoss",
+    attributionLabel: "Caleb calebfoss",
+    remixURL: "https://github.com/processing/p5.js-example",
+    remixLabel: "Revised in 2023",
+  },
+  "revision-2023-dkessner": {
+    attributionURL: "https://github.com/dkessner",
+    attributionLabel: "Darren Kessner",
+    remixURL: "https://github.com/processing/p5.js-example",
+    remixLabel: "Revised in 2023",
+  },
+  "revision-2023-katlich112358": {
+    attributionURL: "https://www.klich.co/",
+    attributionLabel: "Kasey Lichtlyter",
+    remixURL: "https://github.com/processing/p5.js-example",
+    remixLabel: "Revised in 2023",
+  }
+};

src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx

@@ -8,10 +8,7 @@ relatedReference:
   - en/p5/ellipse
 
 remix:
-  - attributionURL: https://github.com/dkessner
-    attributionLabel: Darren Kessner
-    remixURL: https://github.com/processing/p5.js-example
-    remixLabel: Revised in 2023
+  - revision-2023-dkessner
 ---
 
 This program demonstrates the use of the basic shape

src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx

@@ -3,6 +3,12 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-00_Drawing_L
 featuredImageAlt: A squiggly rainbow line on a black background.
 title: Drawing Lines
 oneLineDescription: Draw with the mouse.
+
+remix:
+  - attributionURL: https://github.com/dkessner
+    attributionLabel: Darren Kessner
+    remixURL: https://github.com/processing/p5.js-example
+    remixLabel: Revised in 2023
 ---
 
 Click and drag the mouse to draw a line.

src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx

@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-01_Animation
 featuredImageAlt: A small green circle on a black background.
 title: Animation with Events
 oneLineDescription: Pause and resume animation.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 This example demonstrates the use of

src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx

@@ -9,10 +9,7 @@ collectivelyAttributedSince: 2024
 remix:
   - attributionURL: https://natureofcode.com/book/chapter-4-particle-systems/
     attributionLabel: Dan Shiffman's example
-  - attributionURL: https://github.com/dkessner
-    attributionLabel: Darren Kessner
-    remixURL: https://github.com/processing/p5.js-example
-    remixLabel: Revised in 2023
+  - revision-2023-dkessner
 ---
 
 

src/layouts/ExampleLayout.astro

@@ -2,6 +2,7 @@
 import type { CollectionEntry } from "astro:content";
 import Head from "@components/Head/index.astro";
 import { setJumpToState } from "../globals/state";
+import { remixLookup } from "../content/examples/config";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import {
   generateJumpToState,
@@ -41,6 +42,12 @@ const relatedReferences =
       )
     : [];
 
+// Rather than using example.data.remix, use resolvedRemix
+// Which fills in widely-used attributions to avoid duplication
+const resolvedRemix = example.data.remix.map((entry: any) =>
+  typeof entry === "string" ? remixLookup[entry] : entry
+);
+
 const { Content } = await example.render();
 ---
 
@@ -68,7 +75,7 @@ const { Content } = await example.render();
 
         <a href={Astro.url.pathname}>{example.data.title}</a>:   
 
-        {example.data.remix?.map((item, i) => (
+        {resolvedRemix?.map((item, i) => (
           <>
             {i > 0 && " "}
             {item.remixLabel && item.remixURL ? (