notes

stereobooster · Dec 2, 2024 · 2f24b66 · 2f24b66
1 parent 5c3c641
commit 2f24b66
Showing 1 changed file with 102 additions and 4 deletions.
diff --git a/packages/demo/src/content/docs/index.md b/packages/demo/src/content/docs/index.md
@@ -4,7 +4,7 @@ title: Diagram All The Things
 
 ## Strategies
 
-### inline svg
+### inline
 
 - **pros**
   - interactivity
@@ -15,7 +15,7 @@ title: Diagram All The Things
   - dark theme
     - class based
     - `prefers-color-scheme`
-    - allows to add dark theme to tools that don't support it out of box (`graphviz`, `vizdom`, `gnuplot`)
+    - allows to add dark theme to tools that don't support it out of the box (`graphviz`, `vizdom`, `gnuplot`)
 - **cons**
   - CSS conflicts
     - CSS from website can affect diagram
@@ -27,7 +27,7 @@ title: Diagram All The Things
   - DOM footprint
   - easy to integrate, especially if there is no inline CSS in SVG
 
-### img with data-uri
+### data-url
 
 - **pros**
   - no CSS conflicts
@@ -40,7 +40,7 @@ title: Diagram All The Things
   - no DOM footprint, but overall weight of HTML is high as in previous strategy
   - easy to integrate - only need to add a bit of CSS to support dark theme
 
-### img external
+### file
 
 - **pros**
   - no CSS conflicts
@@ -53,3 +53,101 @@ title: Diagram All The Things
   - no interactivity
   - some tools don't support dark theme out of the box (`graphviz`, `vizdom`, `gnuplot`)
   - harder to integrate - need to resolve where to write file, how to do cache busting...
+
+---
+
+# TODO
+
+## Strategy
+
+### `inline`
+
+**Default strategy**.
+
+```html
+<figure class="beoe"><svg>...</svg></figure>
+```
+
+### `data-url`
+
+```html
+<figure class="beoe">
+  <img src="data:image/svg+xml,..." width="..." height="..." alt="..." />
+</figure>
+```
+
+### `file`
+
+```html
+<figure class="beoe">
+  <img src="/path/to.svg" width="..." height="..." alt="..." />
+</figure>
+```
+
+## Dark scheme
+
+### none
+
+**Default**.
+
+```html
+<figure class="beoe">only one image</figure>
+```
+
+### `class`
+
+```html
+<figure class="beoe">
+  <div>
+    <img class="beoe-light" src="..." />
+    <img class="beoe-dark" src="..." />
+  </div>
+</figure>
+```
+
+You would need to add CSS, something like this
+
+```CSS
+html[data-theme="light"] .beoe-dark {
+  display: none;
+}
+
+html[data-theme="dark"] .beoe-light {
+  display: none;
+}
+```
+
+### `media`
+
+```html
+<figure class="beoe">
+  <picture>
+    <img src="..." />
+    <source media="(prefers-color-scheme: dark)" src="..." />
+  </picture>
+</figure>
+```
+
+## Strategy vs dark scheme
+
+|            | `class` | `media` |
+| ---------- | ------- | ------- |
+| `inline`   | maybe   | no      |
+| `data-url` | yes     | yes     |
+| `file`     | yes     | yes     |
+
+## Strategy 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    |
+
+## Interactivity
+
+- Links (`<a href="...">`)
+- Search text in the diagram (<Kbd>Cmd</kbd> + <Kbd>F</kbd>)
+- With JS, for example, if we inline JSON data