Prepare for interactive guides

Author: dwursteisen

tiny-doc/src/docs/asciidoc/docinfo-header.html

@@ -260,6 +260,26 @@
         color: #ff0080;
     }
 
+    /* Static code block + "Try it" button (matches API fn-card pattern) */
+    .fn-card__try-btn { margin-left: auto; }
+    .fn-card__filename {
+        color: #888;
+        font-size: .8rem;
+        font-family: 'Source Code Pro', monospace;
+    }
+    .fn-card__code {
+        padding: 20px 24px;
+        background: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-top: none;
+        border-radius: 0 0 10px 10px;
+        font-family: 'Source Code Pro', monospace;
+        font-size: .88rem;
+        line-height: 1.7;
+        color: #333;
+    }
+    .fn-card__code pre { margin: 0; white-space: pre-wrap; }
+
     /* Status bar: reload progress indicator */
     .tiny-status-bar {
         width: calc(100%);

tiny-doc/src/docs/asciidoc/tiny-tutorial.adoc

@@ -37,7 +37,20 @@ function _init()
 end
 ```
 
-== Step 2: Update the Game State
+== Step 2: Draw the Game
+In the `_draw()` callback, we'll draw the paddles and the ball using the `shape.rectf()` and `shape.circlef()` functions.
+
+```lua
+function _draw()
+  -- Draw game
+  gfx.cls()
+  shape.rectf(player1_pos.x, player1_pos.y, paddle_width, paddle_height, 7)
+  shape.rectf(player2_pos.x, player2_pos.y, paddle_width, paddle_height, 7)
+  shape.circlef(ball_pos.x, ball_pos.y, ball_radius, 7)
+end
+```
+
+== Step 3: Update the Game State
 In the `_update()` callback, we'll update the game state by moving the paddles and the ball. We'll also check for collisions between the ball and the paddles, and update the ball's velocity accordingly.
 
 ```lua
@@ -83,18 +96,7 @@ function _update()
 end
 ```
 
-== Step 3: Draw the Game
-In the `_draw()` callback, we'll draw the paddles and the ball using the `shape.rectf()` and `shape.circlef()` functions.
 
-```lua
-function _draw()
-  -- Draw game
-  gfx.cls()
-  shape.rectf(player1_pos.x, player1_pos.y, paddle_width, paddle_height, 7)
-  shape.rectf(player2_pos.x, player2_pos.y, paddle_width, paddle_height, 7)
-  shape.circlef(ball_pos.x, ball_pos.y, ball_radius, 7)
-end
-```
 
 And that's it! With these three steps, you should have a basic Pong game up and running in Lua. Feel free to experiment with the game state, update function, and drawing function to customize the game to your liking.
 

tiny-web-editor/src/jsMain/kotlin/Main.kt

@@ -83,28 +83,69 @@ private fun setupDocMode(
     val spritePath = game.getAttribute("sprite")
     val levelPath = game.getAttribute("level")
 
+    // Check if the fn-card structure already exists (e.g. API page from fn-card.peb).
+    // If not, create the toolbar + static code block + "Try it" button dynamically.
+    val hasFnCard = game.parentElement?.classList?.contains("fn-card__example") == true
+    var codeBlock: Element? = null
+
+    if (!hasFnCard) {
+        val toolbar = document.createElement("div") {
+            setAttribute("class", "tiny-toolbar")
+        }
+        game.after(toolbar)
+
+        toolbar.appendChild(
+            document.createElement("span") {
+                setAttribute("class", "fn-card__filename")
+                textContent = "example.lua"
+            },
+        )
+
+        val tryButton = document.createElement("a") {
+            setAttribute("class", "fn-card__try-btn tiny-button")
+            innerHTML = """<i data-lucide="play"></i> Try it"""
+        }
+        toolbar.appendChild(tryButton)
+
+        codeBlock = document.createElement("div") {
+            setAttribute("class", "fn-card__code")
+            val pre = document.createElement("pre")
+            pre.innerHTML = highlightStatic(code)
+            appendChild(pre)
+        }
+        toolbar.after(codeBlock)
+
+        tryButton.addEventListener("click", {
+            game.dispatchEvent(Event("play"))
+        })
+
+        js("if (typeof lucide !== 'undefined') { lucide.createIcons(); }")
+    }
+
     val container = document.createElement("div").apply {
         setAttribute("class", "tiny-container")
         asDynamic().style.display = "none"
     }
-    game.after(container)
+    (codeBlock ?: game).after(container)
 
     val codeToUse = decodedCode ?: "-- Update the code to update the game!\n$code"
 
     var started = false
-    game.addEventListener("play", {
+
+    fun startGame() {
         if (!started) {
+            codeBlock?.asDynamic()?.style?.display = "none"
             container.asDynamic().style.display = ""
             createGame(container, index, codeToUse, spritePath, levelPath, rootPath)
             started = true
         }
-    })
+    }
+
+    game.addEventListener("play", { startGame() })
 
     // There is a user code. Let's unfold the game.
     if (savedCode != null) {
-        container.asDynamic().style.display = ""
-        createGame(container, index, codeToUse, spritePath, levelPath, rootPath)
-        started = true
+        startGame()
     }
 }
 
@@ -268,6 +309,21 @@ fun setCaret(
     return position
 }
 
+/**
+ * Highlight Lua code for static display (no line wrapping in divs).
+ * Same highlighting rules as [highlight] but suited for a <pre> block.
+ */
+fun highlightStatic(content: String): String {
+    return content
+        .replace(Regex("(\".*?\")"), "<strong class=\"code_string\">$1</strong>")
+        .replace(Regex("--(.*)"), """<em class="code_comment">--$1</em>""")
+        .replace(
+            Regex("\\b(if|else|elif|end|while|for|in|of|continue|break|return|function|local|do)\\b"),
+            """<strong class="code_keyword">$1</strong>""",
+        )
+        .replace(Regex("\\b(\\d+)"), "<em class=\"code_number\">$1</em>")
+}
+
 /**
  * Highlight the code with HTML tags.
  *