refactor(docs): revert playground capture changes to master behavior

Restore Ace output pane, drop Prism and output-preview styling. Simplify docs:dev to rely on docs prestart.

Co-authored-by: Cursor <[email protected]>

docs/themes/navy/layout/partial/after_footer.swig

@@ -1,8 +1,6 @@
 {% if page.layout === 'playground' %}
 {{ js('js/liquid.browser.min.js') }}
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/ace.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markup.min.js"></script>
 {% endif %}
 
 {{ js('js/main') }}

docs/themes/navy/layout/playground.swig

@@ -13,9 +13,7 @@
       </div>
       <div class="area-output editor-wrapper">
         <h2>Output</h2>
-        <div class="output-preview" id="previewEl">
+        <div class="editor" id="previewEl">{{__('playground.loading')}}</div>
-          <pre class="highlight"><code class="language-markup" id="previewCode">{{__('playground.loading')}}</code></pre>
-        </div>
       </div>
     </div>
     <p class="inner version"></p>

docs/themes/navy/source/css/_partial/playground.styl

@@ -68,27 +68,6 @@
       overflow: hidden
       @media mq-mobile
         min-height: 240px
-    .output-preview
-      flex: 1 1 auto
-      min-height: 0
-      code-block-chrome()
-      overflow: auto
-      cursor: default
-      pre.highlight
-        margin: 0
-        min-height: 100%
-        padding: 16px
-        border: none
-        box-shadow: none
-        border-radius: 0
-        background: var(--highlight-background)
-        code
-          display: block
-          font-size: 14px
-          line-height: 1.5
-          background: transparent
-          padding: 0
-          white-space: pre
     .ace_editor
       font-family: font-mono
       font-size: 14px

docs/themes/navy/source/js/main.js

@@ -48,17 +48,20 @@
   const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
   const editor = createEditor('editorEl', 'liquid');
   const dataEditor = createEditor('dataEl', 'json');
-  const previewCode = document.getElementById('previewCode');
+  const preview = createEditor('previewEl', 'html');
+  preview.setReadOnly(true);
+  preview.renderer.setShowGutter(false);
+  preview.renderer.setPadding(16);
 
-  const editors = [editor, dataEditor];
+  const editors = [editor, dataEditor, preview];
   colorScheme.addEventListener('change', function() {
     editors.forEach(applyEditorTheme);
   });
 
   const init = parseArgs(location.hash.slice(1));
   if (init) {
-    editor.setValue(init.tpl, -1);
+    editor.setValue(init.tpl, 1);
-    dataEditor.setValue(init.data, -1);
+    dataEditor.setValue(init.data, 1);
   }
   editor.on('change', update);
   dataEditor.on('change', update);
@@ -115,23 +118,15 @@
     return utoa(obj.tpl) + ',' + utoa(obj.data);
   }
 
-  function setPreview(value) {
-    previewCode.textContent = value;
-    if (window.Prism) {
-      delete previewCode.dataset.highlighted;
-      window.Prism.highlightElement(previewCode);
-    }
-  }
-
   async function update() {
     const tpl = editor.getValue();
     const data = dataEditor.getValue();
     history.replaceState({}, '', '#' + serializeArgs({tpl, data}));
     try {
       const html = await engine.parseAndRender(tpl, JSON.parse(data));
-      setPreview(html);
+      preview.setValue(html, 1);
     } catch (err) {
-      setPreview(err.stack);
+      preview.setValue(err.stack, 1);
       throw err;
     }
   }

package.json

@@ -35,7 +35,7 @@
     "build:apidoc": "shx rm -rf docs/source/api && typedoc --plugin typedoc-plugin-missing-exports ./src --gitRevision master --out docs/source/api",
     "build:changelog": "node bin/build-changelog.js",
     "build:docs-hexo": "cd docs && npm ci && npm run build && shx cp CNAME public/",
-    "docs:dev": "run-s build:docs-liquid build:contributors docs:serve",
+    "docs:dev": "npm run docs:serve",
     "docs:serve": "cd docs && npm run start"
   },
   "bin": {