Detailed example attribution

docs/content_overview.md

@@ -11,6 +11,45 @@
 - Stored in `/src/content/examples/`
 - All translations are stored and edited directly in this repo under the corresponding language folder in `/src/content/examples/`
 
+All original examples (created new for p5.js) since 2024 are collectively attributed to p5.js Contributors under the CC-BY-NC-SA 4.0 license. However, examples that build on prior work (under a compatible license) can be attributed in more detail, to make sure that authorship is clear in citation, and code history is available to viewers.
+
+To add attribution, you can use the following block in the headers, listing in chronological order all arrtibutions. Below is the example from `examples/animation-and-variables-conditions/`:
+
+```yaml
+remix:
+  - description: Inspired by
+
+    attribution:
+      - name: Prof. WM Harris
+        URL: https://people.rit.edu/wmhics/
+
+    code:
+      - URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js
+      - label: pre-2023 code
+
+  - description: Revised by
+
+    attribution:    
+      - name: Caleb Foss
+        URL: https://github.com/calebfoss
+
+    code:
+      - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions
+        label: 2023 revision code
+
+  - collectivelyAttributedSince: 2024
+```
+
+This will result in a block that lists, in order, the initial inspiration; any revision or other remix; and the collective attribution statement that begins in 2024: "From 2024 onwards, edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0."
+
+A remix can be many things ([here is an example analysis of sketch remixing (PDF)](https://dl.acm.org/doi/pdf/10.1145/3563657.3595969)); the `description` will be by default "Remixed by", so a more specific description is recommended.
+
+If the `collectivelyAttributedSince` information is missing, then no year will be included, but the collective attribution statement will still show: "Edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0." You'll see this in examples that were part of a major revision project with specific attribution, but have collective authorship before and after.
+
+Each item in the remix history must have an at least one person listed in the attribution section. When multiple people are listed, their names will be shown in that order. For people, URLs are optional but recommended.
+
+---
+
 ## Tutorials
 
 - Stored in `/src/content/tutorials/`

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.
@@ -17,5 +18,33 @@ export const examplesCollection = defineCollection({
       relatedReference: z.array(reference("reference")).optional(),
       featuredImage: image(),
       featuredImageAlt: z.string().optional().default(""),
+
+      // Optional list of remixes to add to license
+      remix: z
+        .array(
+          z.object({
+            description: z.string().default("Remixed by"),
+            attribution: z
+              .array(
+                z.object({
+                  name: z.string(),
+                  URL: z.string().optional(),
+                })
+              )
+              .optional(),
+            code: z
+              .array(
+                z.object({
+                  label: z.string(),
+                  URL: z.string(),
+                })
+              )
+              .optional(),
+            collectivelyAttributedSince: z.number().optional(),
+          })
+        )
+        .optional()
+        .default([]),
     }),
 });
+

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

@@ -6,6 +6,15 @@ oneLineDescription: Draw 2D shapes.
 relatedReference:
   - en/p5/arc
   - en/p5/ellipse
+
+remix:
+  - description: Revised in 2023 by
+    attribution:
+     - name: Darren Kessner
+       URL: https://github.com/dkessner
+  - collective:
+      since: 2024
+
 ---
 
 This program demonstrates the use of the basic shape

src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx

@@ -3,6 +3,23 @@ featuredImage: "../../../images/featured/01_Shapes_And_Color-01_Color-thumbnail.
 featuredImageAlt: A few basic shapes drawn in different colors over a blue background.
 title: Color
 oneLineDescription: Add color to your sketch.
+
+
+remix:
+  - description: Created by
+
+    attribution:
+      - name: Caleb Foss
+        URL: https://github.com/calebfoss
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions
+
+  - collectivelyAttributedSince: 2024
+
 ---
 
 This expands on the Shape Primitives example by adding

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

@@ -3,6 +3,21 @@ 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:
+
+  - description: Revised by
+
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+
+    code:
+      - label: pre-2023 code
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/17_Drawing/00_Continuous_Lines.js
+      - label: 2023 revision code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/00_Drawing_Lines
+
 ---
 
 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,14 @@ 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:
+  - description: Revised by
+
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+
 ---
 
 This example demonstrates the use of

src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx

@@ -4,6 +4,15 @@ featuredImageAlt: White circles on a black background, with varying degrees of t
 title: Mobile Device Movement
 oneLineDescription: Animate based on device motion.
 featured: true
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 The <a href="https://p5js.org/reference/p5/deviceMoved" target="_blank">deviceMoved()</a>

src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx

@@ -3,6 +3,30 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-03_Condition
 featuredImageAlt: A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background.
 title: Conditions
 oneLineDescription: Use if and else statements to make decisions while your sketch runs.
+
+remix:
+  - description: Inspired by
+
+    attribution:
+      - name: Prof. WM Harris
+        URL: https://people.rit.edu/wmhics/
+
+    code:
+      - URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js
+        label: pre-2023 code
+
+  - description: Revised by
+
+    attribution:
+      - name: Caleb Foss
+        URL: https://github.com/calebfoss
+
+    code:
+      - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions
+        label: 2023 revision code
+
+  - collectivelyAttributedSince: 2024
+
 ---
 
 If and else statements allow a

src/content/examples/en/03_Imported_Media/00_Words/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/03_Imported_Media-00_Words-thumbnail.pn
 featuredImageAlt: Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned.
 title: Words
 oneLineDescription: Load fonts and draw text.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 The <a href="https://p5js.org/reference/p5/text" target="_blank">text()</a> function is used for inserting text into the canvas.

src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/03_Imported_Media-01_Copy_Image_Data-th
 featuredImageAlt: Black-and-white photograph of a parrot. A curvy line is drawn across the image; within the confines of that line, color is added to the photograph.
 title: Copy Image Data
 oneLineDescription: Paint from an image file onto the canvas.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 Using the <a href="https://p5js.org/reference/p5/copy" target="_blank">copy()</a> 

src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx

@@ -3,6 +3,17 @@ featuredImage: "../../../images/featured/03_Imported_Media-02_Alpha_Mask-thumbna
 featuredImageAlt: Two leaf sprigs side by side on a white background. The right sprig is labeled "Mask." The left sprig is labeled "Masked Image," and uses the shape of the right sprig to mask a photograph of tulips.
 title: Alpha Mask
 oneLineDescription: Use one image to cut out a section of another image.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Malay Vasa
+        URL: https://github.com/Malayvasa
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 Using the 

src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/03_Imported_Media-03_Image_Transparency
 featuredImageAlt: An astronaut on a planet as the background with a slightly transparent version of this image overlaid and to the left.
 title: Image Transparency
 oneLineDescription: Make an image translucent on the canvas.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 This program overlays one image over another by modifying the

src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/03_Imported_Media-04_Create_Audio-thumb
 featuredImageAlt: A close up of an audio player timestamp, reading "0:00 / 2."
 title: Audio Player
 oneLineDescription: Create a player for an audio file.
+
+
+remix:
+  - description: Created by
+
+    attribution:
+      - name: Caleb Foss
+        URL: https://github.com/calebfoss
+
 ---
 
 <a href="https://p5js.org/reference/p5/createAudio" target="_blank">createAudio()</a>

src/content/examples/en/03_Imported_Media/05_Video/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/03_Imported_Media-05_Video-thumbnail.pn
 featuredImageAlt: A screenshot of a video of a hand, with the pointer finger touching a desk.
 title: Video Player
 oneLineDescription: Create a player for a video file.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 Using the <a href="https://p5js.org/reference/p5/noCanvas" target="_blank">noCanvas()</a>

src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/03_Imported_Media-06_Video_Canvas-thumb
 featuredImageAlt: Two overlaid screenshots of a video of a hand, with the pointer finger touching a desk. Text to the top right of the screenshot reads "Click the canvas to start and pause the video feed."
 title: Video on Canvas
 oneLineDescription: Display and stylize a video on the canvas.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 Using the 

src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/04_Input_Elements-00_Image_Drop-thumbna
 featuredImageAlt: A grey background with white text reading "Drag an image file onto the canvas."
 title: Image Drop
 oneLineDescription: Display an image that the page visitor dragged and dropped.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 <a href="https://p5js.org/reference/p5.Element/drop" target="_blank">drop()</a>

src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx

@@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/04_Input_Elements-01_Input_Button-thumb
 featuredImageAlt: An input field with a submit button, labeled "Hello, p5!"
 title: Input and Button
 oneLineDescription: Use text input from the page visitor.
+
+
+remix:
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 Using the 

src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx

@@ -3,6 +3,20 @@ featuredImage: "../../../images/featured/04_Input_Elements-02_DOM_Form_Elements-
 featuredImageAlt: A survey on a yellow background, consisting of an input field, radio buttons, and a dropdown.
 title: Form Elements
 oneLineDescription: Create a form and respond to the results.
+
+collectivelyAttributedSince: 2024
+remix:
+
+  - attribution:
+      - URL: https://people.rit.edu/wmhics/
+        name: Prof. WM Harris
+
+  - description: Revised by
+
+    attribution:
+      - name: Kasey Lichtlyter
+        URL: https://www.klich.co/
+
 ---
 
 The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" target="_blank">Document Object Model</a>,

src/content/examples/en/05_Transformation/01_Rotate/description.mdx

@@ -3,6 +3,15 @@ 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:
+  - description: Revised by
+
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+
 ---
 
 The