Home A - Z
Page Index

An Otter Wiki

Commit 6550f1

2026-04-28 11:46:46 lisa: Add Excalidraw embed test page (5 approaches)
/dev/null .. sd/Test-Excalidraw-Embed.md
@@ 0,0 1,59 @@
+# Test — Excalidraw Embed
+
+Hamilton College · Year 12 · 2026
+
+Test page for embedding an Excalidraw read-only diagram. Trying several approaches so we can see which OtterWiki actually renders.
+
+Source link: <https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6>
+
+---
+
+## Approach 1 — Plain markdown link
+
+Always works as a fallback:
+
+[Open the Excalidraw diagram (read-only)](https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6)
+
+---
+
+## Approach 2 — Raw HTML `<iframe>`
+
+If OtterWiki passes raw HTML through, this should embed the diagram inline.
+
+<iframe src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600" style="border: 1px solid #ccc; border-radius: 4px;"></iframe>
+
+---
+
+## Approach 3 — `<iframe>` inside a fenced HTML block
+
+Some markdown renderers strip raw HTML but allow it inside an `=html` fence:
+
+```=html
+<iframe src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600" style="border: 1px solid #ccc;"></iframe>
+```
+
+---
+
+## Approach 4 — `<embed>` tag
+
+```=html
+<embed src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600">
+```
+
+---
+
+## Approach 5 — `<object>` tag
+
+```=html
+<object data="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600"></object>
+```
+
+---
+
+## Notes
+
+- If only Approach 1 renders → OtterWiki strips raw HTML; embedding requires either an OtterWiki plugin/macro or exporting the diagram as PNG/SVG and uploading the static image.
+- If Approach 2 (or 3/4/5) renders → we can embed Excalidraw diagrams directly on any wiki page using that pattern.
+- Excalidraw read-only links allow students to **view and pan** the diagram but not edit — perfect for embedded reference figures.
+
+If only the plain link works, the practical fallback is to **export the Excalidraw diagram as PNG** (File → Export to PNG inside Excalidraw), commit it under the wiki page's folder (e.g. `Page Name/diagram.png`), and embed with `![alt](Page%20Name/diagram.png)` — same pattern we used for the Data Collection Methods primary/secondary figure.
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9