iframe experiment

stereobooster · Feb 13, 2025 · 2d53d2c · 2d53d2c
1 parent 2052ba1
commit 2d53d2c
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 19 deletions.
diff --git a/packages/docs/src/content/docs/examples/d2-test.md b/packages/docs/src/content/docs/examples/d2-test.md
@@ -4,18 +4,6 @@ title: d2 test
 
 ## Interesting ones
 
-### Image/icon
-
-```d2 strategy=inline darkScheme=false
-my network: {
-  icon: https://icons.terrastruct.com/infra/019-network.svg
-}
-github: {
-  shape: image
-  icon: https://icons.terrastruct.com/dev/github.svg
-}
-```
-
 ### Interactive example
 
 ```d2 strategy=inline darkScheme=false graphFormat=dagre class=shadow svgo=false
@@ -31,6 +19,36 @@ a:@"shared/x.d2"
 a -> b
 ```
 
+## `strategy=iframe`
+
+### Images/icons
+
+```d2 strategy=iframe
+my-network: {
+  icon: https://icons.terrastruct.com/infra/019-network.svg
+}
+github: {
+  shape: image
+  icon: https://icons.terrastruct.com/dev/github.svg
+}
+a
+b
+c
+```
+
+### Link
+
+```d2 strategy=iframe
+direction: right
+a -> b -> c -> d -> e
+a {
+  link: https://example.com
+  label: link
+}
+```
+
+- `a` requires `target="_top"`
+
 ## containers
 
 ```d2

diff --git a/packages/docs/src/content/docs/start-here/strategy.md b/packages/docs/src/content/docs/start-here/strategy.md
@@ -78,7 +78,7 @@ add `fsPath` (`public/beoe`) to `.gitignore`
 </figure>
 ```
 
-**Note**: this strategy requires to additional options:
+**Note**: this strategy requires two additional options:
 
 ```js
 use(rehypeDiagram, {
@@ -96,11 +96,10 @@ add `fsPath` (`public/beoe`) to `.gitignore`
 
 **Note**:
 
-- there is also `allowfullscreen`, `loading=lazy`, `role=img`
-- I wonder if there will be issues with fitting image or if it would allow navigation of top frame
-  - `target=_top` + `allow-top-navigation`
+- there is issue with navigation of top frame: links need `target=_top`, iframe maybe needs `allow-top-navigation`
 - link preview won't work
-- maybe there will be issues with `@beoe/pan-zoom`
+- there are issues with `@beoe/pan-zoom`: gestures doesn't work, buttons work though
+- there is also `allowfullscreen`
 
 ## Pros and cons
 

diff --git a/packages/pan-zoom/css/PanZoomUi.css b/packages/pan-zoom/css/PanZoomUi.css
@@ -9,7 +9,8 @@
 }
 
 .beoe svg,
-.beoe img {
+.beoe img,
+.beoe iframe {
   /* need to center smaller images to fix bug in zoom functionality */
   margin: auto;
   display: block;
@@ -22,6 +23,10 @@
   pointer-events: none;
 }
 
+.beoe iframe {
+  width: 100%;
+}
+
 /* UI */
 
 .beoe {

diff --git a/packages/rehype-code-hook-img/src/types.ts b/packages/rehype-code-hook-img/src/types.ts
@@ -72,9 +72,13 @@ export type Strategy =
    */
   | "data-url"
   /**
-   * SVG stored as standalone file
+   * SVG as standalone file in `img`
    */
   | "file"
+  /**
+   * Experimental. SVG as standalone file in `iframe`
+   */
+  | "iframe"
   /**
    * SVG as data-uri in img
    * @deprecated

diff --git a/packages/rehype-code-hook-img/src/utils.ts b/packages/rehype-code-hook-img/src/utils.ts
@@ -66,11 +66,39 @@ function image({
 }) {
   return h("img", {
     src: url ?? svgToMiniDataURI(svg!),
+    // ...(width && height ? { style: `aspect-ratio: ${width} / ${height}` } : {}),
     ...(url ? { loading: "lazy", decoding: "async" } : {}),
     ...rest,
   });
 }
 
+function iframe({
+  svg,
+  url,
+  alt,
+  width,
+  height,
+  ...rest
+}: {
+  svg?: string;
+  url?: string;
+  width?: string | number;
+  height?: string | number;
+  alt?: string;
+  class?: string;
+}) {
+  return h("iframe", {
+    src: url,
+    title: alt,
+    ...(width && height ? { style: `aspect-ratio: ${width} / ${height}` } : {}),
+    loading: "lazy",
+    role: "img",
+    frameborder: "0",
+    // allowfullscreen: true,
+    ...rest,
+  });
+}
+
 function figure(className: string | undefined, children: any[]) {
   return h(
     "figure",
@@ -217,6 +245,39 @@ export function svgStrategy(
         figure(className, [image({ width, height, alt, url })])
       );
     }
+    case "iframe": {
+      if (fsPath == undefined || webPath == undefined) return;
+
+      if (darkScheme === "class" && darkSvg) {
+        return Promise.all([fileUrl(svg), fileUrl(darkSvg)]).then(
+          ([url, darkUrl]) =>
+            figure(
+              className,
+              // wrap in additional div for svg-pan-zoom
+              [
+                h("div", [
+                  iframe({ width, height, alt, class: "beoe-light", url }),
+                  iframe({
+                    width,
+                    height,
+                    alt,
+                    class: "beoe-dark",
+                    url: darkUrl,
+                  }),
+                ]),
+              ]
+            )
+        );
+      }
+
+      if (darkScheme === "media") {
+        console.warn("darkScheme media doesn't work for iframe strategy");
+      }
+
+      return fileUrl(svg).then((url) =>
+        figure(className, [iframe({ width, height, alt, url })])
+      );
+    }
     default: {
       if (darkScheme === "class" && darkSvg) {
         const element = fromHtmlIsomorphic(removeWidthHeight(svg), {