basic dm-playground embedding

Author: ZeWaka

book.toml

@@ -7,6 +7,8 @@ src = "src"
 
 [output.html]
 default-theme = "dark"
+additional-js = ["theme/playground-embed.js"]
+additional-css = ["theme/playground-embed.css"]
 
 #[output.html.fold]
 #enable = true

src/preprocessor.md

@@ -20,13 +20,13 @@ var/daytime = NIGHT  // daytime = 1
 
 There also exists a subset of defines called Macros. These are in the format: `#define Name(Parameters) Value`. These are basically like procs, but without the ability to have variables stored within. These are great for common operations, such as checking conditions.
 
-```dm
-/// Returns true if given is a client
-#define isclient(x) istype(x, /client)
+```dm playground
+#define isred(x) (x.color == "#ff0000")
 
-/proc/hello(client/bar)
-	if (isclient(bar))
-		world << "Hello there!"
+/proc/main()
+  var/obj/dog = new /obj{color = "#ff0000"}
+  if (isred(dog))
+    world.log << "Hello there!"
 ```
 
 ## #if / #elif / #else / #ifdef / #endif

theme/playground-embed.css

@@ -0,0 +1,3 @@
+/* Styles for DM Playground embeds */
+.dm-playground-container { resize: both; overflow: hidden; max-width: 100%; }
+.dm-playground-iframe { border: none; width: 100%; height: 100%; min-height: 200px; }

theme/playground-embed.js

@@ -0,0 +1,55 @@
+// Replace marked ```dm playground code blocks with dm-playground embeds.
+(function(){
+  function utf8ToBase64(str){
+    var bytes = new TextEncoder().encode(str);
+    var binary = String.fromCharCode.apply(null, Array.from(bytes));
+    return btoa(binary);
+  }
+  function makePlaygroundURL(code){
+    return 'https://play.dm-lang.org/?embed&code=' + encodeURIComponent(utf8ToBase64(code));
+  }
+  function createIframe(src){
+    var ifr = document.createElement('iframe');
+    ifr.src = src;
+    ifr.className = 'dm-playground-iframe';
+    return ifr;
+  }
+
+  document.addEventListener('DOMContentLoaded', function(){
+    const codeBlocks = Array.from(document.querySelectorAll('pre > code'));
+    codeBlocks.forEach(function(code){
+      const cls = code.className || '';
+      const parentCls = code.parentElement && code.parentElement.className ? code.parentElement.className : '';
+      if (cls.indexOf('language-dm') === -1) return;
+      if (cls.indexOf('playground') === -1 && parentCls.indexOf('playground') === -1) return;
+
+      const codeText = code.textContent || '';
+      var wrapper = document.createElement('div');
+      wrapper.className = 'dm-playground-container';
+
+      try {
+        var ifr = createIframe(makePlaygroundURL(codeText));
+        // Auto-height: estimate based on code lines
+        const lines = (codeText.match(/\n/g) || []).length + 1;
+        const estimated = Math.min(Math.max(lines * 16 + 88, 200), 900);
+        wrapper.style.height = estimated + 'px';
+        wrapper.style.minHeight = '200px';
+        wrapper.appendChild(ifr);
+      } catch (e) {
+        var err = document.createElement('div');
+        wrapper.appendChild(err);
+      }
+
+      // Replace the <pre> element with the playground wrapper
+      var pre = code.parentElement;
+      if (pre?.parentElement) {
+        try {
+          pre.parentElement.replaceChild(wrapper, pre);
+        } catch (e) {
+          // fallback: append after if replaceChild fails
+          pre.parentElement.insertBefore(wrapper, pre.nextSibling);
+        }
+      }
+    });
+  });
+})();