From 27435ba3dc5731f1174ba3137d3ca10b0e79467d Mon Sep 17 00:00:00 2001
From: Sylvestre Ledru <sylvestre@debian.org>
Date: Wed, 13 May 2026 08:43:16 +0200
Subject: [PATCH] Fix id collision between commands placeholder and section
 heading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Zola auto-generates id="available-commands" on the "Available commands"
<h2>. The placeholder <p> shared that id, so getElementById matched the
heading first and the populate-from-WASM_COMMANDS script ended up
overwriting the heading text — rendering the command list at h2 size.
Rename the placeholder to a non-colliding id.
---
 content/playground.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/playground.md b/content/playground.md
index c4babf363..9f3c6a13e 100644
--- a/content/playground.md
+++ b/content/playground.md
@@ -37,7 +37,7 @@ template = "page.html"
     }
     // Populate the "Available commands" list from the build-generated list
     if (typeof WASM_COMMANDS !== "undefined" && Array.isArray(WASM_COMMANDS)) {
-      var listEl = document.getElementById("available-commands");
+      var listEl = document.getElementById("wasm-commands-list");
       if (listEl) {
         listEl.innerHTML = WASM_COMMANDS.slice().sort().map(function(c) {
           return "<code>" + c + "</code>";
@@ -113,7 +113,7 @@ Multiple commands can be separated by newlines (`%0A` in the URL):
 
 The following commands run as **real Rust coreutils compiled to WebAssembly**:
 
-<p id="available-commands">Loading the list of available commands…</p>
+<p id="wasm-commands-list">Loading the list of available commands…</p>
 
 The following are **shell builtins** implemented in JavaScript: