update diagram articles

Author: stereobooster

.gitignore

@@ -22,3 +22,4 @@ pnpm-debug.log*
 
 .braindb
 .turbo
+packages/website/public/beoe/

packages/website/astro.config.mjs

@@ -13,6 +13,13 @@ import { rehypeGnuplot } from "@beoe/rehype-gnuplot";
 import starlightDigitalGarden from "starlight-digital-garden";
 
 const cache = await getCache();
+const diagramConfigs = {
+  cache,
+  strategy: "file",
+  darkScheme: "class",
+  fsPath: "public/beoe",
+  webPath: "/beoe",
+};
 
 // https://astro.build/config
 export default defineConfig({
@@ -77,12 +84,9 @@ export default defineConfig({
   markdown: {
     // remarkPlugins: [],
     rehypePlugins: [
-      [
-        rehypeMermaid,
-        { class: "not-content", cache, strategy: "img-class-dark-mode" },
-      ],
+      [rehypeMermaid, diagramConfigs],
+      [rehypeGnuplot, diagramConfigs],
       [rehypeGraphviz, { class: "not-content", cache }],
-      [rehypeGnuplot, { class: "not-content", cache }],
       rehypeHeadingIds,
       [rehypeAutolinkHeadings, { behavior: "append" }],
     ],

packages/website/package.json

@@ -11,18 +11,18 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^5.3.0",
-    "@astrojs/starlight": "^0.28.3",
-    "@beoe/cache": "^0.0.1",
-    "@beoe/rehype-gnuplot": "^0.0.2",
-    "@beoe/rehype-graphviz": "^0.0.2",
-    "@beoe/rehype-mermaid": "^0.0.2",
+    "@astrojs/markdown-remark": "^6.0.0",
+    "@astrojs/starlight": "^0.29.2",
+    "@beoe/cache": "^0.1.0",
+    "@beoe/rehype-gnuplot": "^0.3.0",
+    "@beoe/rehype-graphviz": "^0.3.0",
+    "@beoe/rehype-mermaid": "^0.3.0",
     "@braindb/core": "0.0.15",
-    "@iconify/json": "^2.2.261",
-    "@pagefind/default-ui": "^1.1.1",
-    "astro": "^4.16.6",
-    "astro-og-canvas": "^0.5.4",
-    "astro-seo-schema": "^4.0.2",
+    "@iconify/json": "^2.2.279",
+    "@pagefind/default-ui": "^1.2.0",
+    "astro": "^4",
+    "astro-og-canvas": "^0.5.5",
+    "astro-seo-schema": "^4",
     "canvaskit-wasm": "^0.39.1",
     "edeap": "0.0.3",
     "graphology": "^0.25.4",
@@ -31,16 +31,16 @@
     "graphology-svg": "^0.1.3",
     "graphology-utils": "^2.5.2",
     "netlify-plugin-playwright-cache": "^0.0.1",
-    "playwright": "^1.48.1",
-    "playwright-chromium": "^1.48.1",
+    "playwright": "^1.49.0",
+    "playwright-chromium": "^1.49.0",
     "rehype-autolink-headings": "^7.1.0",
     "schema-dts": "^1.1.2",
     "sharp": "^0.33.5",
-    "sigma": "3.0.0-beta.33",
+    "sigma": "3.0.0-beta.38",
     "starlight-digital-garden": "workspace:*",
     "starlight-katex": "workspace:*",
-    "typescript": "^5.6.3",
-    "unplugin-icons": "^0.19.3",
+    "typescript": "^5.7.2",
+    "unplugin-icons": "^0.21.0",
     "venn-isomorphic": "^0.0.2"
   }
 }

packages/website/src/content/docs/recipes/diagrams.md

@@ -10,7 +10,7 @@ There are two ways to work with diagrams:
    - [[mermaid-diagrams-in-markdown|Mermaid]]
    - [[gnuplot-diagram]]
    - [[graphviz-diagram]]
-   - [Astro D2](https://astro-d2.vercel.app/)
+   - [Astro D2](https://beoe.stereobooster.com/diagrams/d2/)
 2. Use them as components inside MDX or Astro pages:
    - [[timeline-diagram]]
    - [[euler-diagram]]
@@ -20,13 +20,4 @@ There are two ways to work with diagrams:
 
 ## Ideal solution
 
-- It should be rendered as (inline) SVG on the server side:
-  - No JavaScript required on the client side.
-  - Users can use <kbd>Cmd</kbd> + <kbd>F</kbd> to search text.
-- Style it with CSS variables (or CSS classes):
-  - This would allow for implementing dark mode without JavaScript.
-- Optionally add [[svg-pan-zoom|small JS to implement pan/zoom/drag]].
-
-## Ideas
-
-- [Penrose](https://github.com/penrose/penrose)
+Read more about different options and trade-offs [here](https://beoe.stereobooster.com/start-here/getting-started/).

packages/website/src/content/docs/recipes/gnuplot-diagram.mdx

@@ -4,7 +4,7 @@ tags: [markdown, code-fences, diagram]
 description: Gnuplot inside "code fences" converted to diagrams - static SVGs, no client-side JavaScript
 ---
 
-```gnuplot
+```gnuplot alt="example of the Gnuplot diagram"
 # Plotting filledcurves with different transparencies
 #
 # AUTHOR: Hagen Wierstorf
@@ -66,13 +66,22 @@ import { Steps } from "@astrojs/starlight/components";
 
 2. Configure Astro. See note about [[rehype-plugins-for-code]].
 
-   ```js {2, 6}
+   ```js {2, 7-14}
    // astro.config.mjs
    import { rehypeGnuplot } from "@beoe/rehype-gnuplot";
 
    export default defineConfig({
      markdown: {
-       rehypePlugins: [[rehypeGnuplot, { class: "not-content" }]],
+       rehypePlugins: [
+         [
+           rehypeGnuplot,
+           {
+             strategy: "file",
+             fsPath: "public/beoe",
+             webPath: "/beoe",
+           },
+         ],
+       ],
      },
    });
    ```
@@ -85,15 +94,25 @@ import { Steps } from "@astrojs/starlight/components";
 
 4. **Optional** configure cache
 
-   ```js {2, 4, 8}
+   ```js {2, 4, 15}
    // astro.config.mjs
    import { getCache } from "@beoe/cache";
 
    const cache = await getCache();
 
    export default defineConfig({
      markdown: {
-       rehypePlugins: [[rehypeGnuplot, { class: "not-content", cache }]],
+       rehypePlugins: [
+         [
+           rehypeGnuplot,
+           {
+             strategy: "file",
+             fsPath: "public/beoe",
+             webPath: "/beoe",
+             cache,
+           },
+         ],
+       ],
      },
    });
    ```
@@ -105,18 +124,18 @@ import { Steps } from "@astrojs/starlight/components";
 ## Example
 
 ````md
-```gnuplot
+```gnuplot alt="Plot of sin(x)"
 plot [-10:10] sin(x)
 ```
 ````
 
-```gnuplot
+```gnuplot alt="Plot of sin(x)"
 plot [-10:10] sin(x)
 ```
 
 ## Bonus: XKCD-style
 
-```gnuplot
+```gnuplot alt="example of the Gnuplot diagram in XKCD style"
 # Gnuplot file that plots a couple of functions in the xkcd style
 # Not a proper rendition, as the axis are still straight lines
 # Also, when plotting functions, the jiggling can only be done in

packages/website/src/content/docs/recipes/graphviz-diagram.mdx

@@ -4,7 +4,7 @@ tags: [markdown, code-fences, diagram]
 description: Graphviz inside "code fences" converted to diagrams - static SVGs, no client-side JavaScript
 ---
 
-```dot
+```dot alt="example of the Graphviz diagram"
 digraph finite_state_machine {
   bgcolor="transparent";
 	fontname="Helvetica,Arial,sans-serif";
@@ -116,13 +116,13 @@ To remove the background, use `bgcolor="transparent"`.
 ## Example
 
 ````md
-```dot
+```dot alt="example of the Graphviz diagram"
 digraph x {bgcolor="transparent";rankdir=LR;node [shape=box]
   Start -> Stop}
 ```
 ````
 
-```dot
+```dot alt="example of the Graphviz diagram"
 digraph x {bgcolor="transparent";rankdir=LR;node [shape=box]
   Start -> Stop}
 ```
@@ -138,16 +138,3 @@ See for inspiration:
 
 - [tintinweb.graphviz-interactive-preview](https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-interactive-preview)
 - [SVG Zoom To Element](https://bettertyped.github.io/react-zoom-pan-pinch/?path=/story/examples-svg-zoom-to-element--svg-zoom-to-element)
-
-Alternatively, I can parse DOT language and use different renderers, for example:
-
-- **Parsers**
-  - [ts-graphviz](https://github.com/ts-graphviz/ts-graphviz)
-  - [vis.js](https://github.com/visjs/vis-network/blob/master/lib/network/dotparser.js)
-  - [dotparser](https://www.npmjs.com/package/dotparser)
-  - [@dagrejs/graphlib-dot](https://www.npmjs.com/package/@dagrejs/graphlib-dot)
-- **Renderers**
-  - [Graphviz JSON](https://graphviz.org/docs/outputs/json/) to render coordinates
-  - [vizdom](https://github.com/vizdom-dev/vizdom)
-  - [Apache ECharts](https://echarts.apache.org/handbook/en/basics/release-note/5-5-0/#server-side-rendering-%EF%BC%8B-lightweight-client-runtime) supports "hydration" of SVGs
-  - [Others](https://graph.stereobooster.com/notes/Visualisation)