Labyricorn/liquidjs
1
0
Fork 0
mirror of https://github.com/harttle/liquidjs.git synced 2026-10-03 00:55:13 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): polish playground layout and regenerate README demo GIF

Browse Source
This commit is contained in:
Yang Jun
2026-06-22 23:06:38 +08:00
parent ac94a2b376
commit 18178e8896
8 changed files with 303 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/themes/navy/layout/playground.swig
Vendored
+36 -14
View File
@@ -1,23 +1,45 @@
<div id="playground" role="main">
<div class="wrapper">
<h1 class="inner">{{__('playground.title')}}</h1>
<header class="playground-hero inner">
<div class="playground-hero-text">
<h1>{{__('playground.title')}}</h1>
<p class="playground-lead">{{__('playground.lead')}}</p>
</div>
<p class="playground-version version"></p>
</header>
<div class="loader" role=status aria-busy=true></div>
<div id="editors" class="inner hide" aria-hide=true>
<div class="area-tpl editor-wrapper">
<h2>Template</h2>
<div class="editor" id="editorEl">{{ raw('partial/demo.liquid') }}</div>
</div>
<div class="area-data editor-wrapper">
<h2>Context</h2>
<div class="editor" id="dataEl">{{ raw('partial/demo.json') }}</div>
</div>
<div class="area-output editor-wrapper">
<h2>Output</h2>
<div class="output-preview" id="previewEl">
<pre class="highlight"><code class="language-markup" id="previewCode">{{__('playground.loading')}}</code></pre>
<div class="playground-workspace">
<div class="playground-pane area-tpl">
<div class="pane-head">
<span class="pane-indicator" aria-hidden="true"></span>
<h2>Template</h2>
</div>
<div class="pane-body">
<div class="editor" id="editorEl">{{ raw('partial/demo.liquid') }}</div>
</div>
</div>
<div class="playground-pane area-data">
<div class="pane-head">
<span class="pane-indicator" aria-hidden="true"></span>
<h2>Context</h2>
</div>
<div class="pane-body">
<div class="editor" id="dataEl">{{ raw('partial/demo.json') }}</div>
</div>
</div>
<div class="playground-pane area-output">
<div class="pane-head">
<span class="pane-indicator" aria-hidden="true"></span>
<h2>Output</h2>
</div>
<div class="pane-body">
<div class="output-preview" id="previewEl">
<pre class="highlight"><code class="language-markup" id="previewCode">{{__('playground.loading')}}</code></pre>
</div>
</div>
</div>
</div>
</div>
<p class="inner version"></p>
</div>
</div>