docs

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

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
 

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
 

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
 

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
 

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
 

packages/demo/src/content/docs/examples/d2-test.md

@@ -287,7 +287,6 @@ direction: right
 a -> b -> c -> d -> e
 ```
 
-
 ## UML class
 
 ```d2

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";
 
 <CardGrid stagger>
   <Card title="Many options" icon="list-format">
-    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.
   </Card>
   <Card title="Dark mode" icon="moon">

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/)

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,
 });
 ```

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
 <figure class="beoe">only one image</figure>
 ```
@@ -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";
 

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
 <svg>...</svg>
@@ -26,4 +24,4 @@ or
 <img src="..." />
 ```
 
-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/).

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.
+
 <Tabs>
   <TabItem label="Diagram">
 ```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.
+
 <Tabs>
   <TabItem label="Diagram">
 ```vizdom strategy=inline dataGraph=dagre class=ants

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     |
+| [`<img alt="..." >`](/start-here/accessibility/)        | no           | yes        | yes    |
+| DOM footprint                                           | high         | low        | low    |
+| HTML footprint                                          | high         | high       | low    |

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();
 });