Initial format for detailed example attribution

Author: ksen0

src/content/examples/config.ts

@@ -17,5 +17,12 @@ export const examplesCollection = defineCollection({
       relatedReference: z.array(reference("reference")).optional(),
       featuredImage: image(),
       featuredImageAlt: z.string().optional().default(""),
+      archiveAttributionPrefix: z.string().optional().default(""),
+      archiveAttributionName: z.string().optional().default(""),
+      archiveAttributionURL: z.string().optional().default(""),
+      revisedAttributionPrefix: z.string().optional().default(""),
+      revisedAttributionPrefixURL: z.string().optional().default(""),
+      revisedAttributionName: z.string().optional().default(""),
+      revisedAttributionURL: z.string().optional().default(""),
     }),
 });

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

@@ -4,15 +4,17 @@ featuredImageAlt: Rainbow colored smoke angled towards the right of the canvas,
 title: Smoke Particles
 oneLineDescription: Simulate smoke with a particle system.
 featured: true
+archiveAttributionPrefix: Based on
+archiveAttributionName: Dan Shiffman's example
+archiveAttributionURL: https://natureofcode.com/book/chapter-4-particle-systems/
+revisedAttributionPrefix: Revised in 2023
+revisedAttributionPrefixURL: https://github.com/processing/p5.js-example
+revisedAttributionName: Darren Kessner
+revisedAttributionURL: https://github.com/dkessner
 ---
 
 
-Smoke particle system demo, based on
-Dan Shiffman's original
-<a href="https://natureofcode.com/book/chapter-4-particle-systems/">example</a>
-for Processing.
-
-The code makes use of the
+This smoke particle system demo makes use of the
 <a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
 class, including the
 <a href="https://p5js.org/reference/p5/createVector">createVector()</a>

src/layouts/ExampleLayout.astro

@@ -63,14 +63,21 @@ const { Content } = await example.render();
     <div class="rendered-markdown">
       <Content />
     </div>
-    <EditableSketch code={code} />
-    <p>{example.data.arialabel}</p>
     <div class="rendered-markdown">
       <p>
-        <a href={Astro.url.pathname}>{example.data.title}</a> by <a href="https://p5js.org/people">p5.js Contributors</a> and the <a href="https://processingfoundation.org/people">Processing Foundation</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>.
+
+        <a href={Astro.url.pathname}>{example.data.title}</a>: 
+        {example.data.archiveAttributionPrefix} <a href={example.data.archiveAttributionURL}>{example.data.archiveAttributionName}</a>.
+        <a href={example.data.revisedAttributionPrefixURL}>{example.data.revisedAttributionPrefix}</a> by <a href={example.data.revisedAttributionURL}>{example.data.revisedAttributionName}</a>.
+        From 2023 onwards, edited and maintained by <a href="https://github.com/processing/p5.js?tab=readme-ov-file#contributors">p5.js Contributors</a> and the <a href="https://processingfoundation.org/people">Processing Foundation</a>. Licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>.
+
       </p>
       <img src="/images/by-nc-sa.svg" />
     </div>
+
+    <EditableSketch code={code} />
+    <p>{example.data.arialabel}</p>
+
   </div>
   <div class="grid gap-y-4xl lg:gap-y-mb-3xl mt-2xl">
     {