diff --git a/README.md b/README.md index 0ef5f9f..789d8bf 100644 --- a/README.md +++ b/README.md @@ -47,3 +47,6 @@ Ideas for other diagrams: [Text to Diagram](https://stereobooster.com/posts/text The logo is an illustration from [Oliver Byrne's Elements of Euclid: The First Six Books with Coloured Diagrams and Symbols](https://www.c82.net/euclid/). ## TODO + +- update readmes for all packages. Point to online documentation and remove duplication +- online example for pan-zoom \ No newline at end of file diff --git a/packages/demo/src/content/docs/diagrams/d2.mdx b/packages/demo/src/content/docs/diagrams/d2.mdx index 682be2d..0110cbc 100644 --- a/packages/demo/src/content/docs/diagrams/d2.mdx +++ b/packages/demo/src/content/docs/diagrams/d2.mdx @@ -53,7 +53,7 @@ const html = await unified() .process(`markdown`); ``` -It supports caching the same way as `@beoe/rehype-code-hook` does. +Check out other [options](/start-here/configuration/). ### Configuration diff --git a/packages/demo/src/content/docs/diagrams/gnuplot.mdx b/packages/demo/src/content/docs/diagrams/gnuplot.mdx index 5d6c6ce..65c7287 100644 --- a/packages/demo/src/content/docs/diagrams/gnuplot.mdx +++ b/packages/demo/src/content/docs/diagrams/gnuplot.mdx @@ -69,7 +69,7 @@ const html = await unified() .process(`markdown`); ``` -It supports caching the same way as `@beoe/rehype-code-hook` does. +Check out other [options](/start-here/configuration/). ### Configuration diff --git a/packages/demo/src/content/docs/diagrams/graphviz.mdx b/packages/demo/src/content/docs/diagrams/graphviz.mdx index 539fc85..46c7e73 100644 --- a/packages/demo/src/content/docs/diagrams/graphviz.mdx +++ b/packages/demo/src/content/docs/diagrams/graphviz.mdx @@ -89,7 +89,7 @@ const html = await unified() .process(`markdown`); ``` -It supports caching the same way as `@beoe/rehype-code-hook` does. +Check out other [options](/start-here/configuration/). ### Configuration diff --git a/packages/demo/src/content/docs/diagrams/mermaid.mdx b/packages/demo/src/content/docs/diagrams/mermaid.mdx index dc46f5d..de438d8 100644 --- a/packages/demo/src/content/docs/diagrams/mermaid.mdx +++ b/packages/demo/src/content/docs/diagrams/mermaid.mdx @@ -55,7 +55,7 @@ const html = await unified() .process(`markdown`); ``` -It supports caching the same way as `@beoe/rehype-code-hook` does. +Check out other [options](/start-here/configuration/). ### Configuration diff --git a/packages/demo/src/content/docs/diagrams/vizdom.mdx b/packages/demo/src/content/docs/diagrams/vizdom.mdx index b93aad7..29c5269 100644 --- a/packages/demo/src/content/docs/diagrams/vizdom.mdx +++ b/packages/demo/src/content/docs/diagrams/vizdom.mdx @@ -141,7 +141,7 @@ const html = await unified() .process(`markdown`); ``` -It supports caching the same way as `@beoe/rehype-code-hook` does. +Check out other [options](/start-here/configuration/). ### Configuration diff --git a/packages/demo/src/content/docs/examples/d2-test.md b/packages/demo/src/content/docs/examples/d2-test.md index 1e65f0f..c7f8c8f 100644 --- a/packages/demo/src/content/docs/examples/d2-test.md +++ b/packages/demo/src/content/docs/examples/d2-test.md @@ -287,7 +287,6 @@ direction: right a -> b -> c -> d -> e ``` - ## UML class ```d2 diff --git a/packages/demo/src/content/docs/index.mdx b/packages/demo/src/content/docs/index.mdx index 770c437..cf45463 100644 --- a/packages/demo/src/content/docs/index.mdx +++ b/packages/demo/src/content/docs/index.mdx @@ -11,7 +11,7 @@ hero: tagline: Easily add diagrams to Markdown using Rehype, Remark plugins, and more. actions: - text: Tell me more - link: /getting-started/ + link: /start-here/getting-started/ icon: right-arrow - text: View on GitHub link: https://github.com/stereobooster/beoe @@ -23,7 +23,7 @@ import { CardGrid, Card } from "@astrojs/starlight/components"; - A versatile diagramming options, such as **Mermaid**, **D2**, **PlantUML**, and more enabling + A versatile diagramming options, such as **Mermaid**, **D2**, and more enabling users to create, edit, and visualize a wide range of diagram types. diff --git a/packages/demo/src/content/docs/packages/index.md b/packages/demo/src/content/docs/packages/index.md index d3cb22e..1af11ff 100644 --- a/packages/demo/src/content/docs/packages/index.md +++ b/packages/demo/src/content/docs/packages/index.md @@ -2,9 +2,9 @@ title: "Other packages" --- +- [@beoe/pan-zoom](https://github.com/stereobooster/beoe/tree/main/packages/pan-zoom/) - [@beoe/rehype-code-hook](https://github.com/stereobooster/beoe/tree/main/packages/rehype-code-hook/) - [@beoe/sqlitecache](https://github.com/stereobooster/beoe/tree/main/packages/sqlitecache/) - [@beoe/cache](https://github.com/stereobooster/beoe/tree/main/packages/cache/) - [@beoe/remark-code-hook](https://github.com/stereobooster/beoe/tree/main/packages/remark-code-hook/) -- [@beoe/pan-zoom](https://github.com/stereobooster/beoe/tree/main/packages/pan-zoom/) - [@beoe/fenceparser](https://github.com/stereobooster/beoe/tree/main/packages/fenceparser/) diff --git a/packages/demo/src/content/docs/start-here/configuration.md b/packages/demo/src/content/docs/start-here/configuration.md index c1c6643..e1ea751 100644 --- a/packages/demo/src/content/docs/start-here/configuration.md +++ b/packages/demo/src/content/docs/start-here/configuration.md @@ -14,7 +14,7 @@ All Rehype diagram plugins support (at least) following configurations: All configurations can be set either globally or locally (via fence-code meta). Global configurations applies to all diagrams. Local configurations applies only to one diagram. Local configurations always override global, with exception for `class` option (it applies all provided classes). -Also you want be able to set `cache` and `svgo` via local configurations, excpet disabling them with `false` value. +Also you won't be able to set `cache` and `svgo` via local configurations, except disabling them with `false` value. ## Global configurations @@ -27,7 +27,7 @@ const cache = await getCache(); use(rehypeDiagram, { strategy: "file", darkTheme: "class", - class: "not-content", + class: "something", cache, }); ``` diff --git a/packages/demo/src/content/docs/start-here/dark-scheme.mdx b/packages/demo/src/content/docs/start-here/dark-scheme.mdx index 355a76d..45efade 100644 --- a/packages/demo/src/content/docs/start-here/dark-scheme.mdx +++ b/packages/demo/src/content/docs/start-here/dark-scheme.mdx @@ -20,14 +20,12 @@ diagram text ``` ```` -**none** is a default option. +`undefined` is a default option. ## Options ### `undefined` -**Default**. - ```html
only one image
``` @@ -74,7 +72,7 @@ html[data-theme="dark"] .beoe-light { | `data-url` | yes | yes | | `file` | yes | yes | -(1) - for example, works for Mermaid, but doesn't work for D2: +(1) - for example, works for Mermaid, but doesn't work for D2 (check with light mode): import { Tabs, TabItem } from "@astrojs/starlight/components"; diff --git a/packages/demo/src/content/docs/start-here/getting-started.md b/packages/demo/src/content/docs/start-here/getting-started.md index 135dca5..b02d7e0 100644 --- a/packages/demo/src/content/docs/start-here/getting-started.md +++ b/packages/demo/src/content/docs/start-here/getting-started.md @@ -4,8 +4,6 @@ sidebar: order: 1 --- -## Basic - Basic idea. You have Markdown like this: ````md @@ -14,7 +12,7 @@ diagram text ``` ```` -..and you will get an output like this (image of your diagram): +...and you will get an output like this (image of your diagram): ```html ... @@ -26,4 +24,4 @@ or ``` -Diagrams can be embedded in HTML differently, each with its own advantages and trade-offs. [Read more here](/start-here/strategy/) +Diagrams can be embedded in HTML differently, each with its own advantages and trade-offs. [Read more here](/start-here/strategy/). diff --git a/packages/demo/src/content/docs/start-here/interactivity.mdx b/packages/demo/src/content/docs/start-here/interactivity.mdx index 6836bfe..fef48c4 100644 --- a/packages/demo/src/content/docs/start-here/interactivity.mdx +++ b/packages/demo/src/content/docs/start-here/interactivity.mdx @@ -155,10 +155,12 @@ document.querySelectorAll(".vizdom").forEach((container) => { }) ``` -Which allows to add interesting interactivity. See examples below. **Try hower and click nodes**. +Which allows to add interesting interactivity. See examples below. ### Vizdom Example 1 +**Try** hower nodes. + ```vizdom strategy=inline dataGraph=dagre class=shadow @@ -252,6 +254,8 @@ document.querySelectorAll(".vizdom.shadow").forEach((container) => { ### Vizdom Example 2 +**Try** hower and click one or two nodes. + ```vizdom strategy=inline dataGraph=dagre class=ants diff --git a/packages/demo/src/content/docs/start-here/strategy.md b/packages/demo/src/content/docs/start-here/strategy.md index 4d2bfbe..cfd1c5c 100644 --- a/packages/demo/src/content/docs/start-here/strategy.md +++ b/packages/demo/src/content/docs/start-here/strategy.md @@ -62,10 +62,11 @@ use(rehypeDiagram, { ## Pros and cons -| | `inline` | `data-url` | `file` | -| ---------------------- | ------------ | ---------- | ------ | -| Interactivity | possible | no | no | -| CSS conflicts | probably yes | no | no | -| Can be styled with CSS | yes | no | no | -| DOM footprint | high | low | low | -| HTML footprint | high | high | low | +| | `inline` | `data-url` | `file` | +| ------------------------------------------------------- | ------------ | ---------- | ------ | +| [Interactivity](/start-here/interactivity/) | yes | no | no | +| [Can be styled with CSS](/start-here/styling-with-css/) | yes | no | no | +| CSS conflicts | probably yes | no | no | +| [`...`](/start-here/accessibility/) | no | yes | yes | +| DOM footprint | high | low | low | +| HTML footprint | high | high | low | diff --git a/packages/pan-zoom/README.md b/packages/pan-zoom/README.md index d67b6bd..fafede8 100644 --- a/packages/pan-zoom/README.md +++ b/packages/pan-zoom/README.md @@ -48,7 +48,7 @@ If you **have container** element in HTML: import { PanZoom } from "@beoe/pan-zoom"; document.querySelectorAll(".beoe").forEach((container) => { - const element = container.querySelector("svg, img[src$='.svg' i]"); + const element = container.firstElementChild; if (!element) return; new PanZoom({ element, container }).on(); });