Put examples in JSON

Simplifies content collection parsing, and there's this:
withastro/astro#12689

src/content.config.ts

@@ -1,34 +1,9 @@
 import {defineCollection, z} from 'astro:content';
+import {glob} from "astro/loaders";
 
-
-// Examples should be like this:
-// examples/foo/grammar.txt
-// examples/foo/input.txt
 // TODO: convert to markdown, if astro is happy with multiple files in a single markdown file - easier to do titles too
 export const examples = defineCollection({
-    loader: async () => {
-        // Would prefer to get a list of folders in the examples directory but Vite only seems to want to
-        // grab files. So we get both and match them up, a little awkwardly.
-        const grammars = import.meta.glob('./examples/**/grammar.txt', { query: "?raw", import: "default"})
-        const inputs = import.meta.glob('./examples/**/input.txt', { query: "?raw", import: "default"})
-        if (Object.keys(grammars).length !== Object.keys(inputs).length) {
-            throw new Error('Mismatch between grammars and inputs')
-        }
-        const examples: { id: string, title: string, grammar: string, input: string }[] = []
-        for (const [path, grammarFile] of Object.entries(grammars)) {
-            const folder = path.split('/').slice(-2, -1)[0]
-            const grammar = await grammarFile() as string
-            // yuck...
-            const input = await inputs[`./examples/${folder}/input.txt`]() as string
-            examples.push({
-                id: folder,
-                title: folder,
-                grammar,
-                input,
-            })
-        }
-        return examples;
-    },
+    loader: glob({pattern: "src/examples/*.json"}),
     // This schema ensures that the data read in the collection above is valid, by parsing it with Zod
     schema: z.object({
         title: z.string(),

src/examples/csv.json

@@ -0,0 +1,5 @@
+{
+  "title": "CSV",
+  "grammar": "CSV     = Hdr Row+\nHdr     = Row\nRow     = field (',' field)* '\\r'? '\\n'\nfield   = _string / _text / ''\n\n_text   = ~[,\\n\\r]+\n_string = '\"' (~[\"] / '\"\"')* '\"'\n",
+  "input": "A,B,C\na1,b1,c1\na2,\"b,2\",c2\na3,b3,c3\n"
+}

src/examples/date.json

@@ -0,0 +1,5 @@
+{
+  "title": "Date",
+  "grammar": "date  = year '-' month '-' day\nyear  = [1-2][0-9]*3\nmonth = '0'[1-9] / '1'[0-2]\nday   = [0-3][0-9]\n\n# A simple example to play around with.\n# More examples in menu at top.\n\n# This Dingus is only a toy web-page.\n# To try your own pPEG grammars use\n# the peg-play.mjs command line tool,\n# that lets you work on your own files.",
+  "input": "2021-02-03"
+}

src/examples/json.json

@@ -0,0 +1,5 @@
+{
+  "title": "JSON",
+  "grammar": "json   = _ value _\nvalue  =  Str / Arr / Obj / num / lit\nObj    = '{'_ (memb (_','_ memb)*)? _'}'\nmemb   = Str _':'_ value\nArr    = '['_ (value (_','_ value)*)? _']'\nStr    = '\"' chars* '\"'\nchars  = ~[\\u0000-\\u001F\"\\]+ / '\\' esc\nesc    = [\"\\/bfnrt] / 'u' [0-9a-fA-F]*4\nnum    = _int _frac? _exp?\n_int   = '-'? ([1-9] [0-9]* / '0')\n_frac  = '.' [0-9]+\n_exp   = [eE] [+-]? [0-9]+\nlit    = 'true' / 'false' / 'null'\n_      = [ \\t\\n\\r]*\n",
+  "input": "{\n    \"answer\": 42,\n    \"mixed\": [1, 2.3, \"a\\tstring\", true, [4, 5]],\n    \"empty\": {}\n}"
+}

src/examples/url.json

@@ -0,0 +1,5 @@
+{
+  "title": "URL",
+  "grammar": "# Equivalent to the regular expression for\n# well-formed URI's in RFC 3986.\nURI     = (scheme ':')? ('//' auth)?\n          path ('?' query)? ('#' frag)?\nscheme  = ~[:/?#]+\nauth    = ~[/?#]*\npath    = ~[?#]*\nquery   = ~'#'*\nfrag    = ~[ \\t\\n\\r]*\n",
+  "input": "http://www.ics.uci.edu/pub/ietf/uri/#Related"
+}

src/pages/index.astro

@@ -74,7 +74,7 @@ const examples = (await getCollection("examples")).map(c => c.data)
             display: grid;
             grid-template-rows: auto 1fr;
             border: thin solid gray;
-            min-height: 0; // necessary to prevent divs from growing below screen
+            min-height: 0; /** necessary to prevent divs from growing below screen **/
         }
 
         .header {