Add 2023 revision attributions

ksen0 · ksen0 · commit c2a9d3ea93c9 · 2025-06-02T23:16:18.000+02:00
diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts
@@ -49,7 +49,15 @@ export const examplesCollection = defineCollection({
  * When rendering (in ExampleLayout.astro), these keys are replaced 
  * with their full details from `remixLookup`.
  */
-export const remixLookup = {
+
+type RemixEntry = {
+  attributionURL: string;
+  attributionLabel: string;
+  remixURL: string;
+  remixLabel: string;
+};
+
+export const remixLookup: { [key: string]: RemixEntry } = {
   "revision-2023-calebfoss": {
     attributionURL: "https://github.com/calebfoss",
     attributionLabel: "Caleb calebfoss",
@@ -67,5 +75,5 @@ export const remixLookup = {
     attributionLabel: "Kasey Lichtlyter",
     remixURL: "https://github.com/processing/p5.js-example",
     remixLabel: "Revised in 2023",
-  }
-};
+  },
+};
diff --git a/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx b/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx
@@ -5,10 +5,7 @@ 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
+  - revision-2023-dkessner
 ---
 
 Click and drag the mouse to draw a line.
diff --git a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/05_Transformation-01_Rotate-thumbnail.p
 featuredImageAlt: Line segments rotated around center of canvas.
 title: Rotate
 oneLineDescription: Rotate the coordinate system.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 The
diff --git a/src/content/examples/en/05_Transformation/02_Scale/description.mdx b/src/content/examples/en/05_Transformation/02_Scale/description.mdx
@@ -3,6 +3,10 @@ featuredImage: "../../../images/featured/05_Transformation-02_Scale-thumbnail.pn
 featuredImageAlt: Solid rectangles stacked on top of one another.
 title: Scale
 oneLineDescription: Modify the coordinate system scale.
+
+
+remix:
+  - revision-2023-dkessner
 ---
 
 The
diff --git a/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx b/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/06_Calculating_Values-02_Random-thumbna
 featuredImageAlt: A small purple circle on a black background.
 title: Random
 oneLineDescription: Get random numbers.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 This example demonstrates the use of the
diff --git a/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx b/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx
@@ -3,6 +3,14 @@ featuredImage: "../../../images/featured/07_Repetition-05_Recursive_Tree-thumbna
 featuredImageAlt: A rainbow fractal tree on a black background.
 title: Recursive Tree
 oneLineDescription: Draw a tree using a function that calls itself.
+
+
+remix:
+  - attributionURL: https://processing.org/examples/tree.html
+    attributionLabel: Processing example by Dan Shiffman
+    remixLabel: Based on
+  - revision-2023-dkessner
+collectivelyAttributedSince: 2024
 ---
 
 This is an example of rendering a simple tree-like structure via recursion.
diff --git a/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx b/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx
@@ -4,6 +4,9 @@ featuredImageAlt: A point on the unit circle, together with the corresponding si
 title: Sine and Cosine
 oneLineDescription: Animate circular, back and forth, and wave motion.
 featured: true
+
+remix:
+  - revision-2023-dkessner
 ---
 
 This example demonstrates the
diff --git a/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx b/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-01_Aim-thumbnail.p
 featuredImageAlt: Two eyes on a black background.
 title: Aim
 oneLineDescription: Rotate toward a point.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 The
diff --git a/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx b/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx
@@ -3,6 +3,13 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-02_Triangle_Strip-
 featuredImageAlt: Rainbow ring made up of triangles whose vertices lie on two concentric circles.
 title: Triangle Strip
 oneLineDescription: Split a ring into triangles.
+
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionURL: https://archive.p5js.org/examples/form-triangle-strip.html
+    attributionLabel: Ira Greenberg
+  - revision-2023-dkessner
 ---
 
 This example demonstrates how to create a shape
diff --git a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx
@@ -3,6 +3,12 @@ featuredImage: "../../../images/featured/13_Classes_And_Objects-00_Snowflakes-th
 featuredImageAlt: Snowflakes falling on a black background.
 title: Snowflakes
 oneLineDescription: Animate snowfall.
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionURL: https://archive.p5js.org/examples/simulate-snowflakes.html
+    attributionLabel: Aatish Bhatia
+  - revision-2023-dkessner
 ---
 
 This example demonstrates the use of a particle system
diff --git a/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx b/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/13_Classes_And_Objects-03_Flocking-thum
 featuredImageAlt: A group of bird-like objects, represented by rainbow triangles, modeling flocking behavior.
 title: Flocking
 oneLineDescription: Simulate bird flocking behavior.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 Demonstration of flocking behavior.
diff --git a/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx b/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx
@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_R
 featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
 title: Non-Orthogonal Reflection
 oneLineDescription: Simulate a ball bouncing on a slanted surface.
+
+remix:
+  - attributionLabel: Processing example by Ira Greenberg
+    attributionURL: https://processing.org/examples/reflection1.html
+    remixLabel: Based on
+  - attributionLabel: David Blitz
+    remixLabel: Ported by
+  - revision-2023-dkessner
+collectivelyAttributedSince: 2024
 ---
 
 This example demonstrates a ball bouncing on a slanted
diff --git a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx
@@ -3,6 +3,12 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-01_Soft_Body-thumbn
 featuredImageAlt: A yellow pentagon on a black background.
 title: Soft Body
 oneLineDescription: Simulate the physics of a soft body accelerating toward the mouse.
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionURL: https://archive.p5js.org/examples/simulate-soft-body.html
+    attributionLabel: Ira Greenberg
+  - revision-2023-dkessner
 ---
 
 Physics simulation of a soft body experiencing
diff --git a/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx b/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx
@@ -3,12 +3,17 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-02_Forces-thumbnail
 featuredImageAlt: 9 multicolored circles at varying heights on a grey background.
 title: Forces
 oneLineDescription: Simulate forces on multiple bodies as they move through liquid.
+
+remix:
+  - attributionURL: http://natureofcode.com
+    attributionLabel: Dan Shiffman's "Nature of Code"
+    remixLabel: Inspired by
+  - revision-2023-dkessner
 ---
 
 Demonstration of multiple forces acting on bodies.
 Bodies experience gravity continuously. Bodies experience fluid
 resistance when in "water".
-(<a href="http://natureofcode.com">natureofcode.com</a>)
 
 The force calculations are performed using the
 <a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
diff --git a/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx b/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx
@@ -3,8 +3,11 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-05_Mandelbrot-thumb
 featuredImageAlt: Colorful rendering of the Mandelbrot set.
 title: Mandelbrot Set
 oneLineDescription: Visualize a mathematical set that produces fractal structures.
+
+remix:
+  - attributionURL: https://processing.org/examples/mandelbrot.html
+    attributionLabel: Dan Shiffman's example for Processing
+  - revision-2023-dkessner
 ---
 
-Colorful rendering of the Mandelbrot set
-based on Daniel Shiffman's
-<a href="https://processing.org/examples/mandelbrot.html">Mandelbrot Example</a> for Processing.
+Colorful rendering of the Mandelbrot set.
diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro
@@ -78,12 +78,19 @@ const { Content } = await example.render();
         {resolvedRemix?.map((item, i) => (
           <>
             {i > 0 && " "}
-            {item.remixLabel && item.remixURL ? (
+            {item.remixLabel ? (
               <>
-                <a href={item.remixURL}>{item.remixLabel}</a>
+                {item.remixURL ? (
+                  <>
+                    <a href={item.remixURL}>{item.remixLabel}</a> by
+                  </>
+                ) : (
+                  item.remixLabel
+                )}
+
                 {item.attributionLabel && (
                   <>
-                    {" "}by{" "}
+                    {" "}
                     {item.attributionURL ? (
                       <a href={item.attributionURL}>{item.attributionLabel}</a>
                     ) : (
