- make sure mini-repls dont mess up the markup

- use fetch to get unmodified page source - cleanup stuff
felixroos · Feb 19, 2025 · 78eda2a · 78eda2a
1 parent 81b68de
commit 78eda2a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 32 deletions.
diff --git a/idlecycles/chapter1.html b/idlecycles/chapter1.html
@@ -298,10 +298,13 @@ <h3>Chapter 1: REPL</h3>
     </p>
     <script>
       // render source code
-      const html = document.querySelector("html").outerHTML;
-      const loc = html.split("\n").length;
-      document.querySelector("#pre").textContent = html;
-      document.querySelector("#loc").textContent = `show source (${loc} loc)`;
+      fetch(window.location.href)
+        .then((response) => response.text())
+        .then((html) => {
+          const label = `show source (${html.split("\n").length} loc)`;
+          document.querySelector("#pre").textContent = html;
+          document.querySelector("#loc").textContent = label;
+        });
     </script>
   </body>
 </html>
diff --git a/idlecycles/chapter2.html b/idlecycles/chapter2.html
@@ -51,11 +51,9 @@
       // render codeblock from script tag
       let codeblock = (scriptElement, indent = 0) => {
         const script = document.currentScript;
-        setTimeout(() => {
-          const pre = document.createElement("pre");
-          pre.textContent = getCode(scriptElement, indent);
-          script.after(pre);
-        }, 1);
+        const pre = document.createElement("pre");
+        pre.textContent = getCode(scriptElement, indent);
+        script.after(pre);
       };
       function getCode(scriptElement, indent = 0) {
         return scriptElement.innerText
@@ -68,10 +66,6 @@
     <script>
       class MiniREPL extends HTMLElement {
         static observedAttributes = ["code", "rows"];
-
-        constructor() {
-          super();
-        }
         init() {
           const code = this.getAttribute("code");
           const rows = this.getAttribute("rows");
@@ -187,7 +181,7 @@ <h3>slow and fast</h3>
       This will have the effect of scaling the time axis of our Haps. This is
       the visual representation:
     </p>
-    <mini-repl code="fast(5, cat('cyan','magenta','yellow'))" />
+    <mini-repl code="fast(5, cat('cyan','magenta','yellow'))"></mini-repl>
 
     <p>
       The trick is to first scale up our timespan and then scale down the time
@@ -203,7 +197,7 @@ <h3>slow and fast</h3>
 
     <p>Example:</p>
 
-    <mini-repl code="slow(2, cat('cyan','magenta','yellow'))" />
+    <mini-repl code="slow(2, cat('cyan','magenta','yellow'))"></mini-repl>
 
     <p>
       The fact that there are gray areas is due to the way the visual is
@@ -224,7 +218,7 @@ <h3>seq</h3>
     </script>
 
     <p>This function will squeeze its given values into a single cycle:</p>
-    <mini-repl code="seq('cyan','magenta','yellow')" />
+    <mini-repl code="seq('cyan','magenta','yellow')"></mini-repl>
 
     <p>
       Here we can already see a cool property of functional programming: If we
@@ -248,7 +242,7 @@ <h3>stack</h3>
       place. This will only have a visual effect when the stacked colors are
       transparent:
     </p>
-    <mini-repl code="stack('#ff000050', '#0000ff50')" />
+    <mini-repl code="stack('#ff000050', '#0000ff50')"></mini-repl>
 
     <h3>Patterns of Patterns</h3>
 
@@ -301,7 +295,7 @@ <h3>Patterns of Patterns</h3>
 
     <p>And magically, we can nest Patterns as deep as we like:</p>
 
-    <mini-repl id="deep-nesting" rows="12" />
+    <mini-repl id="deep-nesting" rows="12"></mini-repl>
     <script>
       document.querySelector("#deep-nesting").setAttribute(
         "code",
@@ -337,10 +331,13 @@ <h3>Patterns of Patterns</h3>
     </p>
     <script>
       // render source code
-      const html = document.querySelector("html").outerHTML;
-      const loc = html.split("\n").length;
-      document.querySelector("#pre").textContent = html;
-      document.querySelector("#loc").textContent = `show source (${loc} loc)`;
+      fetch(window.location.href)
+        .then((response) => response.text())
+        .then((html) => {
+          const label = `show source (${html.split("\n").length} loc)`;
+          document.querySelector("#pre").textContent = html;
+          document.querySelector("#loc").textContent = label;
+        });
     </script>
   </body>
 </html>
diff --git a/idlecycles/chapter3.html b/idlecycles/chapter3.html
@@ -68,10 +68,6 @@
     <script>
       class MiniREPL extends HTMLElement {
         static observedAttributes = ["code", "rows"];
-
-        constructor() {
-          super();
-        }
         init() {
           const code = this.getAttribute("code");
           const rows = this.getAttribute("rows");
@@ -256,7 +252,7 @@ <h3>Pattern as a class</h3>
 
     <mini-repl
       code="cat('cyan', seq('magenta','white').fast(2), 'yellow').fast(7)"
-    />
+    ></mini-repl>
 
     <p>
       Before we were checking for value being a function, now we have to check
@@ -314,7 +310,7 @@ <h3>lastOf / firstOf</h3>
 
     <mini-repl
       code="cat('cyan', 'magenta', 'yellow').lastOf(4, x=>x.fast(12))"
-    />
+    ></mini-repl>
     <p>
       That's all for today! In the next chapter, we're going to implement a
       basic mini notation parser.
@@ -331,10 +327,13 @@ <h3>lastOf / firstOf</h3>
     </p>
     <script>
       // render source code
-      const html = document.querySelector("html").outerHTML;
-      const loc = html.split("\n").length;
-      document.querySelector("#pre").textContent = html;
-      document.querySelector("#loc").textContent = `show source (${loc} loc)`;
+      fetch(window.location.href)
+        .then((response) => response.text())
+        .then((html) => {
+          const label = `show source (${html.split("\n").length} loc)`;
+          document.querySelector("#pre").textContent = html;
+          document.querySelector("#loc").textContent = label;
+        });
     </script>
   </body>
 </html>