Merge pull request #1012 from processing/pr-1009-2.0

Detailed example attribution (2.0/beta branch)

Author: ksen0

docs/content_overview.md

@@ -11,6 +11,73 @@
 - 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 attribution. Below is the example from `examples/animation-and-variables-conditions/`:
+
+```yaml
+remix:
+  - description: Inspired by
+    attribution:
+      - name: Name Name
+        URL: a-valid-link
+    code:
+      - label: pre-2023 code
+        URL: a-valid-link
+  - description: Revised by
+    attribution:    
+      - name: Name Name
+        URL: a-valid-link
+    code:
+      - label: 2023 revision code
+        URL: a-valid-link
+
+  - 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.
+
+To credit individuals, you can use the following descriptions, with `attribution.name` including the name of the author or contributor, with an optional link.
+
+* Remixed by
+* Revised by
+* Created by
+
+```yaml
+remix:
+  - description: Created by
+    attribution:
+      - name: Someone
+        URL: ...
+```
+
+To credit a specific work that was (1) not created by the p5.js contributors since 2024 and (2) is under a compatible license, you can use the following descriptions. Here, `attribution.name` should include both the person and a specific work of theirs that was the inspiration.
+
+* Inspired by
+* Based on
+
+```yaml
+remix:
+  - description: Inspired by
+    attribution:
+      - name: Someone's prior work
+        URL: ...
+```
+
+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.
+
+These attribution histories **do not need to be individually translated** for each sketch. It is enough to make sure that the descriptions (like 'Created by' and so on) appear in the different language strings in `src/content/ui/`. Then, these will be used for all examples. See [Localization](./localization.md) for more info. If you use special descriptions or names in the attribution, these do need either new strings, or localization in the respective example translations (in `src/content/examples/{language}`).
+
+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. Note that the collective attribution message either does not specify a year,
+ or specifies 2024. To add a new possible value, update:
+
+1. `content/examples/config.ts` to include new permitted values;
+2. and `content/ui/{language}.yaml` strings for attribution to include the text
+
+---
+
 ## 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,37 @@ 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(),
+            // Collective attribution message either does not specify a year,
+            // or specifies 2024. To add a new possible value, update:
+            // 1) content/examples/config.ts to include new permitted values;
+            // 2) and content/ui/*.yaml strings for attribution to include the text
+            collectivelyAttributedSince: z.literal(2024).optional(),
+          })
+        )
+        .optional()
+        .default([]),
     }),
 });
+

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

@@ -6,6 +6,24 @@ 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
+  - 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/01_Shapes_And_Color/00_Shape_Primitives
+      - label: pre-2023 code
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/01_Form/01_Shape_Primitives.js
+  - collectivelyAttributedSince: 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,19 @@ 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/01_Shapes_And_Color/01_Color
+  - 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,17 @@ 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,17 @@ 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
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/01_Animation_With_Events
+      - label: pre-2023 code
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/00_Structure/06_Redraw.js
 ---
 
 This example demonstrates the use of

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

@@ -4,6 +4,17 @@ 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/
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/02_Mobile_Device_Movement
+      - label: pre-2023 code
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/35_Mobile/02_Acceleration_Color.js
 ---
 
 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,24 @@ 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: the Conditional Shapes Example by Prof. WM Harris
+        URL: https://archive.p5js.org/examples/control-conditional-shapes.html
+    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,18 @@ 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/
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/01_Shapes_And_Color/01_Color
+      - label: pre-2023 code
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/19_Typography/01_Words.js
+
 ---
 
 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,18 @@ 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/
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/01_Copy_Image_Data
+      - label: pre-2023 code
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/05_Image/10_Copy_Method.js
+
 ---
 
 Using the <a href="https://p5js.org/reference/p5/copy" target="_blank">copy()</a>