Access all examples through Astro

src/content/config.ts

@@ -4,6 +4,7 @@ import { librariesCollection } from "./libraries/config";
 import { peopleCollection } from "./people/config";
 import { sketchesCollection } from "./sketches/config";
 import { referenceCollection } from "./reference/config";
+import { examplesCollection } from "./examples/config";
 
 export const collections = {
   tutorials: tutorialsCollection,
@@ -12,4 +13,5 @@ export const collections = {
   people: peopleCollection,
   sketches: sketchesCollection,
   reference: referenceCollection,
+  examples: examplesCollection,
 };

src/content/examples/config.ts

@@ -0,0 +1,9 @@
+import { z, defineCollection } from "astro:content";
+
+export const examplesCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    arialabel: z.string().optional(),
+  }),
+});

src/content/examples/en/03_Arrays/03_Walk_Over_2dArray/description.mdx

@@ -1,3 +1,10 @@
+---
+title: Walk Over 2d Array
+arialabel: >-
+  Several small black words arranged on a white background.
+---
 
-
-undefined
+contributed by [Prof WM Harris](https://www.rit.edu/directory/wmhics-w-michelle-harris), How to display 2D array contents on the canvas using regular for and for-of loops in multiple different ways.
+A function is created for the canvas, the 2D array (Friend Array) is initialized and walked over using nested loops in different ways.
+Variables x and y are used to place the array item on the canvas in the form of 2D array.
+The final nested loop is used to initialize 2D array (Fish Array) with random Integers (fish ages).

src/content/examples/en/06_Image_Processing/00_ Pixel_Array/description.mdx

@@ -1,8 +1,8 @@
 ---
 title: Pixel Array
+arialabel: A rectangle that changes hues as you move the mouse
 ---
 
-
 Click and drag the mouse up and down to control the signal
 and press and hold any key to see the current pixel being read.
 This program sequentially reads the color of every pixel of an image

src/content/examples/en/06_Image_Processing/01_ Histogram/description.mdx

@@ -1,8 +1,8 @@
 ---
 title: Histogram
+arialabel: A black and white image of white persons in front of a tent with a white bar histogram overlayed on the bottom.
 ---
 
-
 Calculates the histogram of an image.
 A histogram is the frequency distribution of the gray levels with the number of
 pure black values displayed on the left and number of pure white values on the right.