Add HOCON playground with interactive tutorials

.github/workflows/test.yml

@@ -0,0 +1,41 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  vitest:
+    name: vitest
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22
+          cache: npm
+
+      - run: npm ci
+
+      - run: npm test
+
+  build:
+    name: astro build
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22
+          cache: npm
+
+      - run: npm ci
+
+      - run: npm run build

README.md

@@ -11,6 +11,7 @@ npm install
 npm run dev      # http://localhost:4321/docs/
 npm run build    # static output in ./dist
 npm run preview  # serve ./dist locally
+npm test         # vitest unit tests for the playground
 ```
 
 Requires Node 20+ (CI runs Node 22).
@@ -46,6 +47,16 @@ astro.config.mjs          Astro + Starlight configuration (sidebar, locales, the
 - English content lives at `/docs/en/...`.
 - Russian content lives at `/docs/ru/...`. Pages without a Russian translation fall back to English with a "translate this page" notice.
 
+## Playground
+
+`/docs/playground/` is a browser-side editor for HOCON menu configs (CodeMirror 6 + custom HOCON parser, no backend). It lives outside the Starlight content layout so it can use the full viewport.
+
+- Source: `src/lib/playground/`
+- Pages: `src/pages/playground.astro` (editor), `src/pages/playground/about.astro` (overview)
+- Styles: `src/styles/playground.css` (scoped via `<style is:global>` on the page; intentionally not registered in `astro.config.mjs > customCss` so the rest of the docs site is unaffected)
+- Tests: `npm test` (vitest + happy-dom)
+- Extend autocomplete data in `src/lib/playground/catalog/`, add lessons in `src/lib/playground/tutorial/lessons/`.
+
 ## Image paths
 
 `base` is set to `/docs/` because the site lives at `https://abstractmenus.github.io/docs/`. Astro does not auto-prefix `base` for raw URLs inside Markdown. Reference public assets with the base included:

astro.config.mjs

@@ -22,7 +22,9 @@ export default defineConfig({
     starlight({
       title: "AbstractMenus",
       description: "Documentation for the AbstractMenus Paper/Folia GUI plugin.",
-      favicon: "/favicon.ico",
+      // Astro 6 requires public-asset URLs to include the configured base.
+      // Starlight passes this through verbatim into <link rel="icon" href=...>.
+      favicon: BASE + "favicon.ico",
       logo: { src: "./src/assets/logo.png", alt: "AbstractMenus" },
       social: [
         { icon: "discord", label: "Discord", href: "https://discord.gg/4VGP3Gv" },
@@ -188,6 +190,15 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: 'Playground',
+          translations: { ru: 'Песочница' },
+          // Full URL because Starlight rewrites relative links per locale
+          // (would otherwise become /docs/en/playground/, which 404s).
+          link: SITE + BASE + 'playground/',
+          badge: { text: 'beta', variant: 'note' },
+          attrs: { 'data-playground-link': 'true' },
+        },
         {
           slug: "changelog",
           attrs: { "data-changelog-link": "true" },
@@ -257,6 +268,23 @@ export default defineConfig({
             "})();",
           ].join(""),
         },
+        {
+          // Sidebar's Playground entry has to be a full URL because Starlight
+          // would otherwise rewrite a relative path through the locale segment
+          // and 404. The static URL is a production fallback; this script
+          // rewrites it to the current origin on every load so the link works
+          // identically in dev (localhost), preview, and production.
+          tag: "script",
+          content: [
+            "(function(){",
+            "function fix(){",
+            "var as=document.querySelectorAll('a[data-playground-link]');",
+            "for(var i=0;i<as.length;i++){as[i].href=window.location.origin+'" + BASE + "playground/';}",
+            "}",
+            "if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',fix);}else{fix();}",
+            "})();",
+          ].join(""),
+        },
       ],
     }),
     mdx(),