Add dark versions of the marble graphics

.github/workflows/docs.yml

@@ -20,10 +20,10 @@ jobs:
       - name: Setup mdBook
         uses: peaceiris/actions-mdbook@v2
         with:
-          mdbook-version: '0.4.2'
+          mdbook-version: '0.4.44'
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '22'
       - run: yarn install
         working-directory: ./Documentation
       - name: Build Marble Graphics

Documentation/package.json

@@ -8,6 +8,7 @@
     "@swirly/parser": "^0.21.0",
     "@swirly/renderer-node": "^0.21.0",
     "@swirly/theme-default-light": "^0.21.0",
+    "@swirly/theme-default-dark": "^0.21.0",
     "glob": "^7.1.7"
   }
 }

Documentation/scripts/build-marble-graphics.mjs

@@ -3,6 +3,7 @@ import { basename, extname, dirname, join as joinPath } from 'path';
 import { promises as fs } from 'fs';
 import { parseMarbleDiagramSpecification } from '@swirly/parser';
 import { lightStyles } from '@swirly/theme-default-light';
+import { darkStyles } from '@swirly/theme-default-dark';
 import { renderMarbleDiagram } from '@swirly/renderer-node';
 import globWithCallback from 'glob';
 
@@ -12,12 +13,16 @@ const inputFiles = await glob("src/**/*.swirly");
 
 await Promise.all(inputFiles.map(async path => {
     const svgFileName = basename(path, extname(path)) + ".svg";
+    const darkSvgFileName = basename(path, extname(path)) + "-dark.svg"
     const svgFilePath = joinPath(dirname(path), svgFileName);
+    const darkSvgPath = joinPath(dirname(path), darkSvgFileName);
 
     const unparsedSpec = await fs.readFile(path, 'utf8');
     const spec = await parseMarbleDiagramSpecification(unparsedSpec);
-    const { xml } = renderMarbleDiagram(spec, { lightStyles });
+    const { xml } = renderMarbleDiagram(spec, { styles: lightStyles });
     await fs.writeFile(svgFilePath, xml, { encoding: 'utf8' });
+    const { xml: darkXml } = renderMarbleDiagram(spec, { styles: darkStyles });
+    await fs.writeFile(darkSvgPath, darkXml, { encoding: 'utf8' });
 
     console.log(`${path} -> ${svgFilePath}`);
 }));

Documentation/src/enumerable-extensions/adjacent-group-by.md

@@ -1,3 +1,8 @@
 ## AdjacentGroupBy
 
-![adjacent-group-by with marbles](adjacent-group-by.svg)
+<picture>
+    <picture>
+      <source srcset="adjacent-group-by-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="adjacent-group-by.svg" alt="A marble diagram showing the AdjacentGroupBy operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/cartesian-product.md

@@ -5,7 +5,12 @@ is the set of all ordered pairs (a, b) where a ∈ A and b ∈ B.
 
 In other words: The Cartesian product produces all possible pairs of two given `IEnumerable`s.
 
-![cartesian-product with marbles](cartesian-product.svg "Marble me!")
+<picture>
+    <picture>
+      <source srcset="cartesian-product-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="cartesian-product.svg" alt="A marble diagram showing the CartesianProduct operation">
+    </picture>
+</picture>
 
 ### Recipe
 The Cartesian product can be easily implemented ad-hoc using LINQ's built-in `SelectMany` extension function:

Documentation/src/enumerable-extensions/chunk.md

@@ -3,7 +3,12 @@
 With the `.Chunk(int)` extension method, you can turn an `IEnumerable<T>` into a `IEnumerable<IEnumerable<T>>`, with the inner Enumerables being of the given size.
 Empty and negative chunk sizes are not allowed and will throw a `ArgumentOutOfRangeException`.
 
-![chunk with marbles](chunk.svg)
+<picture>
+    <picture>
+      <source srcset="chunk-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="chunk.svg" alt="A marble diagram showing the Chunk operation">
+    </picture>
+</picture>
 
 ### Examples
 
@@ -30,4 +35,4 @@ If required, you can also pass a result selector, that turns the inner IEnumerab
 var magicSquare = new List<int> { 4, 9, 2, 3, 5, 7, 8, 1, 6 };
 var result = magicSquare.Chunk(3, Enumerable.Average); // equivalent to magicSquare.Chunk(3, number => Enumerable.Average(number));
 // Result: IEnumerable<int> with 5, 5, 5 as items
-```
+```

Documentation/src/enumerable-extensions/enumerable-extensions.md

@@ -7,29 +7,55 @@ Funcky offers a few additional ones which can come in handy.
 <!-- toc -->
 
 {{#include ./adjacent-group-by.md}}
+
 {{#include ./average-or-none.md}}
+
 {{#include ./cartesian-product.md}}
+
 {{#include ./chunk.md}}
+
 {{#include ./for-each.md}}
+
 {{#include ./first-or-none.md}}
+
 {{#include ./inspect.md}}
+
 {{#include ./interleave.md}}
+
 {{#include ./intersperse.md}}
+
 {{#include ./materialize.md}}
+
 {{#include ./merge.md}}
+
 {{#include ./none.md}}
+
 {{#include ./pairwise.md}}
+
 {{#include ./partition.md}}
+
 {{#include ./power-set.md}}
+
 {{#include ./shuffle.md}}
+
 {{#include ./sliding-window.md}}
+
 {{#include ./split.md}}
+
 {{#include ./take-every.md}}
+
 {{#include ./transpose.md}}
+
 {{#include ./where-not-null.md}}
+
 {{#include ./where-select.md}}
+
 {{#include ./with-first.md}}
+
 {{#include ./with-index.md}}
+
 {{#include ./with-last.md}}
+
 {{#include ./with-previous.md}}
+
 {{#include ./zip-longest.md}}

Documentation/src/enumerable-extensions/interleave.md

@@ -1,3 +1,8 @@
 ## Interleave
 
-![interleave with marbles](interleave.svg)
+<picture>
+    <picture>
+      <source srcset="interleave-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="interleave.svg" alt="A marble diagram showing the Interleave operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/intersperse.md

@@ -1,3 +1,8 @@
 ## Intersperse
 
-![intersperse with marbles](intersperse.svg)
+<picture>
+    <picture>
+      <source srcset="intersperse-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="intersperse.svg" alt="A marble diagram showing the Interleave operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/merge.md

@@ -1,6 +1,11 @@
 ## Merge
 
-![merge with marbles](merge.svg)
+<picture>
+    <picture>
+      <source srcset="merge-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="merge.svg" alt="A marble diagram showing the Merge operation">
+    </picture>
+</picture>
 
 ### Examples
 
@@ -12,9 +17,9 @@ Given two sequences which are already ordered the same way:
 ```
 
 By merging we get one single sequence with the all elements of the given sequences with the same order.
-  
+
 ```
-  sequence1.Merge(sequence2) => 
+  sequence1.Merge(sequence2) =>
               [1, 2,       7,    9,         14    ]
               [      3, 6,    8,    11, 12,     16]
               -------------------------------------

Documentation/src/enumerable-extensions/pairwise.md

@@ -1,17 +1,22 @@
 ## PairWise
 
-![pairwise with marbles](pairwise.svg)
+<picture>
+    <picture>
+      <source srcset="pairwise-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="pairwise.svg" alt="A marble diagram showing the Pairwise operation">
+    </picture>
+</picture>
 
 ### Example
 
-``` 
+```
 animals = [ 🐵, 🐶, 🐺, 🐱, 🦄, 🐷, 🦁]
- 
+
 animals.PairWise() =>
     [[🐵, 🐶],
 	 [🐶, 🐺],
 	 [🐺, 🐱],
 	 [🐱, 🦄],
 	 [🦄, 🐷],
 	 [🐷, 🦁]]
-``` 
+```

Documentation/src/enumerable-extensions/partition.md

@@ -1,13 +1,18 @@
 ## Partition
 
-![partition with marbles](partition.svg)
+<picture>
+    <picture>
+      <source srcset="partition-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="partition.svg" alt="A marble diagram showing the Partition operation">
+    </picture>
+</picture>
 
 ### Example
 
-``` 
+```
 plantBasedFood = [🍉, 🍩 , 🎂, 🍌, 🍫, 🍓, 🍒, 🥕, 🌽, 🥧 ]
 
-plantBasedFood.Partition(IsProcessedFood?) 
+plantBasedFood.Partition(IsProcessedFood?)
   => [[🍩 , 🎂, 🍫, 🥧],
       [🍉, 🍌, 🍓, 🍒, 🥕, 🌽]]
-```
+```

Documentation/src/enumerable-extensions/power-set.md

@@ -1,3 +1,8 @@
 ## PowerSet
 
-![power-set with marbles](power-set.svg)
+<picture>
+    <picture>
+      <source srcset="power-set-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="power-set.svg" alt="A marble diagram showing the PowerSet operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/shuffle.md

@@ -1,3 +1,8 @@
 ## Shuffle
 
-![shuffle with marbles](shuffle.svg)
+<picture>
+    <picture>
+      <source srcset="shuffle-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="shuffle.svg" alt="A marble diagram showing the Shuffle operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/sliding-window.md

@@ -1,4 +1,8 @@
 ## SlidingWindow
 
-![sliding-window with marbles](sliding-window.svg)
-
+<picture>
+    <picture>
+      <source srcset="sliding-window-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="sliding-window.svg" alt="A marble diagram showing the SlidingWindow operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/split.md

@@ -1,3 +1,8 @@
 ## Split
 
-![split with marbles](split.svg)
+<picture>
+    <picture>
+      <source srcset="split-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="split.svg" alt="A marble diagram showing the Split operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/take-every.md

@@ -1,3 +1,8 @@
 ## TakeEvery
 
-![take-every with marbles](take-every.svg)
+<picture>
+    <picture>
+      <source srcset="take-every-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="take-every.svg" alt="A marble diagram showing the TakeEvery operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/transpose.md

@@ -1,3 +1,8 @@
 ## Transpose
 
-![transpose with marbles](transpose.svg)
+<picture>
+    <picture>
+      <source srcset="transpose-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="transpose.svg" alt="A marble diagram showing the Transpose operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/where-not-null.md

@@ -1,3 +1,8 @@
 ## WhereNotNull
 
-![where-not-null with marbles](where-not-null.svg)
+<picture>
+    <picture>
+      <source srcset="where-not-null-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="where-not-null.svg" alt="A marble diagram showing the WhereNotNull operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/where-select.md

@@ -1,3 +1,8 @@
 ## WhereSelect
 
-![where-select with marbles](where-select.svg)
+<picture>
+    <picture>
+      <source srcset="where-select-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="where-select.svg" alt="A marble diagram showing the WhereSelect operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/with-first.md

@@ -1,3 +1,8 @@
 ## WithFirst
 
-![with-first with marbles](with-first.svg)
+<picture>
+    <picture>
+      <source srcset="with-first-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="with-first.svg" alt="A marble diagram showing the WithFirst operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/with-index.md

@@ -1,3 +1,8 @@
 ## WithIndex
 
-![with-index with marbles](with-index.svg)
+<picture>
+    <picture>
+      <source srcset="with-index-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="with-index.svg" alt="A marble diagram showing the WithIndex operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/with-last.md

@@ -1,3 +1,8 @@
 ## WithLast
 
-![with-last with marbles](with-last.svg)
+<picture>
+    <picture>
+      <source srcset="with-last-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="with-last.svg" alt="A marble diagram showing the WithLast operation">
+    </picture>
+</picture>

Documentation/src/enumerable-extensions/with-previous.md

@@ -1,17 +1,22 @@
 ## WithPrevious
 
-![with-previous with marbles](with-previous.svg)
+<picture>
+    <picture>
+      <source srcset="with-previous-dark.svg" media="(prefers-color-scheme: dark)">
+      <img src="with-previous.svg" alt="A marble diagram showing the WithPrevious operation">
+    </picture>
+</picture>
 
 ### Example
 
-``` 
+```
 animals = [ 🦄, 🐺, 🐷, 🦁, 🐵, 🐶 ]
- 
+
 animals.WithPrevious() =>
     [[∅, 🦄],
 	 [🦄, 🐺],
 	 [🐺, 🐷],
 	 [🐷, 🦁],
 	 [🦁, 🐵],
 	 [🐵, 🐶]]
-``` 
+```