docs(examples): feature p5.strands translations and add 2026 attribution support

- Feature the 3 new p5.strands example pages and unfeature 3 older sketches
- Fix GLSL title formatting ("Shader as a Texture (GLSL)")
- Update collectivelyAttributedSince to 2026 for the new translations
- Extend examples content schema to accept 2026 attribution year
- Add 2026 attribution string in UI copy (en)

Signed-off-by: MissTipo <dorine.a.tipo@gmail.com>

Author: MissTipo

src/content/examples/config.ts

@@ -41,10 +41,10 @@ export const examplesCollection = defineCollection({
               )
               .optional(),
             // Collective attribution message either does not specify a year,
-            // or specifies 2024. To add a new possible value, update:
+            // or specifies a year from 2024 onwards. 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(),
+            collectivelyAttributedSince: z.union([z.literal(2024), z.literal(2026)]).optional(),
           })
         )
         .optional()

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

@@ -3,7 +3,6 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-02_Mobile_De
 featuredImageAlt: White circles on a black background, with varying degrees of transparency.
 title: Mobile Device Movement
 oneLineDescription: Animate based on device motion.
-featured: true
 
 remix:
   - description: Revised by
@@ -24,4 +23,4 @@ In this example, the
 <a href="https://p5js.org/reference/p5/accelerationY" target="_blank">accelerationY</a>,
 and <a href="https://p5js.org/reference/p5/accelerationZ" target="_blank">accelerationZ</a>
 values set the position and size of a circle.
-This only works for mobile devices.
+This only works for mobile devices.

src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx

@@ -3,7 +3,6 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-00_Sine_Cosine-thu
 featuredImageAlt: A point on the unit circle, together with the corresponding sine and cosine values on their graphs.
 title: Sine and Cosine
 oneLineDescription: Animate circular, back and forth, and wave motion.
-featured: true
 
 remix:
   - description: Revised by
@@ -28,4 +27,4 @@ The animation shows uniform circular motion around the unit circle
 (circle with radius 1). Any angle measured from the the x-axis
 determines a point on the circle. The cosine and sine of the angle
 are defined to be the x and y coordinates, respectively, of that
-point.
+point.

src/content/examples/en/11_3D/07_Filter_Shader_p5strands/description.mdx

@@ -3,6 +3,7 @@ featuredImage: "../../../images/featured/11_3D-04_Filter_Shader-thumbnail.png"
 featuredImageAlt: A screenshot of a video of a city crosswalk, with offset colors.
 title: Filter Shader (p5.strands)
 oneLineDescription: Manipulate imagery with a shader, written in p5.strands.
+featured: true
 
 remix:
   - description: Created by
@@ -21,7 +22,7 @@ remix:
       - label: 2026 p5.strands translation
         URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/11_3D/07_Filter_Shader_p5strands
 
-  - collectivelyAttributedSince: 2024
+  - collectivelyAttributedSince: 2026
 ---
 
 This is a p5.strands version of the Filter Shader example. Filter shaders apply

src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx

@@ -3,6 +3,7 @@ featuredImage: "../../../images/featured/11_3D-05_Adjusting_Positions_With_A_Sha
 featuredImageAlt: A red-to-blue waving ribbon on a white background.
 title: Adjusting Positions with a Shader (p5.strands)
 oneLineDescription: Use a shader to adjust shape vertices, written in p5.strands.
+featured: true
 
 remix:
   - description: Created by
@@ -21,7 +22,7 @@ remix:
       - label: 2026 p5.strands translation
         URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands
 
-  - collectivelyAttributedSince: 2024
+  - collectivelyAttributedSince: 2026
 ---
 
 This is a p5.strands version of the Adjusting Positions with a Shader example.

src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx

@@ -1,7 +1,7 @@
 ---
 featuredImage: "../../../images/featured/12_Advanced_Canvas_Rendering-02_Shader_As_A_Texture-thumbnail.png"
 featuredImageAlt: Two spheres broken up into a square grid with a gradient in each grid.
-title: Shader as a Texture(GLSL)
+title: Shader as a Texture (GLSL)
 oneLineDescription: Generate a texture for a 3D shape using a shader.
 
 remix:

src/content/examples/en/12_Advanced_Canvas_Rendering/03_Shader_As_A_Texture_p5strands/description.mdx

@@ -3,6 +3,7 @@ featuredImage: "../../../images/featured/12_Advanced_Canvas_Rendering-02_Shader_
 featuredImageAlt: Two spheres broken up into a square grid with a gradient in each grid.
 title: Shader as a Texture (p5.strands)
 oneLineDescription: Generate a texture for a 3D shape using a shader, written in p5.strands.
+featured: true
 
 remix:
   - description: Based on
@@ -29,7 +30,7 @@ remix:
       - label: 2026 p5.strands translation
         URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/12_Advanced_Canvas_Rendering/03_Shader_As_A_Texture_p5strands
 
-  - collectivelyAttributedSince: 2024
+  - collectivelyAttributedSince: 2026
 ---
 
 This is a p5.strands version of the Shader as a Texture example.

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

@@ -3,7 +3,6 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-03_Smoke_Particle_S
 featuredImageAlt: Rainbow colored smoke angled towards the right of the canvas, with a white arrow above the smoke pointing right.
 title: Smoke Particles
 oneLineDescription: Simulate smoke with a particle system.
-featured: true
 
 remix:
   - description: Based on
@@ -30,4 +29,4 @@ positions and velocities are performed with p5.Vector methods.
 
 The particle system is implemented as a
 <a href="https://p5js.org/reference/p5/class">class</a>, which contains an array of
-objects (of class Particle).
+objects (of class Particle).

src/content/ui/en.yaml

@@ -208,6 +208,7 @@ attribution:
   and: and
   Edited and maintained by: Edited and maintained by
   From 2024 onwards, edited and maintained by: From 2024 onwards, edited and maintained by
+  From 2026 onwards, edited and maintained by: From 2026 onwards, edited and maintained by
   You can find the code history of these examples here: You can find the code history of these examples here
   You can suggest improvements by: You can suggest improvements by
   contributing to the current website: contributing to the current website