Labyricorn/liquidjs
1
0
Fork 0
mirror of https://github.com/harttle/liquidjs.git synced 2026-09-20 15:00:42 -07:00
Code Issues Packages Projects Releases Wiki Activity

Deploying to gh-pages from @ harttle/liquidjs@afec88b04c 🚀

Browse Source
This commit is contained in:
harttle
2026-06-23 09:40:16 +00:00
parent 0ca57b4fd0
commit 1066f66eb3
147 changed files with 1084 additions and 925 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playground.html
+43 -26
View File
@@ -76,39 +76,51 @@
<div id="playground" role="main">
<div class="wrapper">
<h1 class="inner">Playground</h1>
<header class="playground-hero inner">
<div class="playground-hero-text">
<h1>Playground</h1>
<p class="playground-lead">Edit a template and context JSON — rendered HTML updates as you type.</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">&lt;ul&gt;
{%- for person in people %}
&lt;li&gt;
&lt;a href=&quot;{{person | prepend: &quot;https://example.com/&quot;}}&quot;&gt;
{{ person | capitalize }}
&lt;/a&gt;
&lt;/li&gt;
{%- endfor%}
&lt;/ul&gt;
<div class="playground-workspace">
<div class="playground-pane area-tpl">
<div class="pane-head">
<span class="pane-indicator" data-state="idle" aria-hidden="true"></span>
<h2>Template</h2>
</div>
<div class="pane-body">
<div class="editor" id="editorEl">&lt;p&gt;Hello, {{ name | capitalize }}!&lt;/p&gt;
</div>
</div>
<div class="area-data editor-wrapper">
<h2>Context</h2>
<div class="editor" id="dataEl">{
&quot;people&quot;: [
&quot;alice&quot;,
&quot;bob&quot;,
&quot;carol&quot;
]
</div>
</div>
<div class="playground-pane area-data">
<div class="pane-head">
<span class="pane-indicator" data-state="idle" aria-hidden="true"></span>
<h2>Context</h2>
</div>
<div class="pane-body">
<div class="editor" id="dataEl">{
&quot;name&quot;: &quot;liquid&quot;
}
</div>
</div>
<div class="area-output editor-wrapper">
<h2>Output</h2>
<div class="editor" id="previewEl">Loading...</div>
</div>
</div>
<div class="playground-pane area-output">
<div class="pane-head">
<span class="pane-indicator" data-state="idle" 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">Loading...</code></pre>
</div>
</div>
</div>
</div>
</div>
<p class="inner version"></p>
</div>
</div>
@@ -146,6 +158,11 @@
<script src="js/liquid.browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/ace.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/mode-liquid.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/mode-json.js"></script>
<script>ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/[email protected]/src-min/');</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>