mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-17 21:40:39 -07:00
docs(readme): README overhaul, used-by grid, and docs homepage (#914)
* docs(readme): lead with quick start and scannable structure Restructure the README to match common OSS conventions: tagline and badges above the fold, copy-paste Quick start, Features list, and a compact Used by section. Remove the star plea, centered logo, and per-project marketing blurbs that pushed useful content down. Co-authored-by: Cursor <[email protected]> * docs(readme): playground GIF, used-by grid, and docs homepage sync Add data/used-by.json with build:used-by for README and docs homepage, playground demo capture, and shared home-section layout. Used by lists products with site logos; Financial Support keeps org and individual sponsors. Co-authored-by: Cursor <[email protected]> * chore: use .local for playground capture scratch files Co-authored-by: Cursor <[email protected]> * fix: satisfy eslint in build-used-by and capture scripts Co-authored-by: Cursor <[email protected]> * chore: drop one-off playground capture script Co-authored-by: Cursor <[email protected]> * refactor(docs): copy Used by from README like financial contributors Drop data/used-by.json and build-used-by.js; build-contributors.js now extracts USED-BY-BEGIN/END to used-by.swig. Co-authored-by: Cursor <[email protected]> * refactor(docs): inline Used by section, drop home-section partial Co-authored-by: Cursor <[email protected]> * fix(docs): drop redundant logo styles from .contributors Co-authored-by: Cursor <[email protected]> * fix(docs): build liquid bundle before hexo serve Co-authored-by: Cursor <[email protected]> * refactor(docs): drop playground window chrome from capture demo Co-authored-by: Cursor <[email protected]> * 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]> * refactor(docs): rely on docs prebuild for liquid bundle and contributors Co-authored-by: Cursor <[email protected]> * feat(docs): show playground output as Prism-highlighted HTML code Co-authored-by: Cursor <[email protected]> * feat(docs): polish playground layout and regenerate README demo GIF * fix(docs): align playground GIF capture with live editor styling * fix(docs): unify playground pane padding and hold output on errors Match editor inset to the output panel, drop Prism from output preview, keep the last render while typing invalid template/context, and refresh the README demo GIF. * fix(docs): regenerate playground GIF with held output during typing * feat(docs): sync Used by logos and polish playground Inline README Used by grid on the docs homepage, refine playground layout and live output behavior, and drop the unused build-used-by script from package scripts. Co-authored-by: Cursor <[email protected]> * fix(docs): restore Rock RMS logo and remove duplicate entry Restore the official Rock RMS wordmark (GetImage.ashx?id=72534) instead of the SparkDevNetwork GitHub org avatar that was wrongly substituted for it. Co-authored-by: Cursor <[email protected]> * fix(docs): regenerate playground GIF with live indicator states Restore the capture script for the new pane-indicator layout so the README demo shows correct idle/active/pending/ok colors and pulsing animations while typing. * fix(docs): static playground GIF with correct indicator colors Capture one frame per keystroke with animations disabled so dot states (idle/active/pending/ok) match the live playground without pulsing. Co-authored-by: Cursor <[email protected]> * docs: use square Rock RMS icon in Used by section Co-authored-by: Cursor <[email protected]> * fix(docs): ensure capture indicator colors apply instantly Disable indicator transitions and cancel active animations before setting data-state so pending yellow is not stuck on the prior ok green. Co-authored-by: Cursor <[email protected]> * docs: point Microsoft Used by link to microsoft.com The merged tile title covers Power Pages and Azure API Management; href should go to Microsoft home, not Power Pages only. Co-authored-by: Cursor <[email protected]> * docs: remove Dailycontributors from Used by section No evidence they run on LiquidJS; they are an OpenCollective sponsor only. Co-authored-by: Cursor <[email protected]> * docs: reword intro to say Liquid, not Shopify Liquid Move Shopify into the compatibility list and drop the shopify/liquid link from README; align package.json description. Co-authored-by: Cursor <[email protected]> * fix(docs): restore playground output as Prism-highlighted HTML Co-authored-by: Cursor <[email protected]> * docs: add extensible to README intro and package description EOF Co-authored-by: Cursor <[email protected]> * chore: move playground capture script to .local Co-authored-by: Cursor <[email protected]> * fix(docs): drop unused Ace mode-html from playground Output pane uses Prism, not Ace; template and context editors still need liquid/json modes and basePath for themes. Co-authored-by: Cursor <[email protected]> * docs: sync intro sentence across package and site metadata Align package.json, docs config, manifest, llms.txt, and AGENTS.md tagline to the README canonical description. Co-authored-by: Cursor <[email protected]> * docs: trim verbose intro in intro-to-liquid tutorial Remove README tagline and repo-purpose copy duplicated by the recent metadata sync. Co-authored-by: Cursor <[email protected]> * docs: shorten homepage banner subtitle Trim docs site banner and short taglines after the em dash; keep full description for meta tags and npm/README. * docs: simplify playground GIF caption in README Co-authored-by: Cursor <[email protected]> * docs: dedupe homepage subtitle and description into _config.yml Remove redundant front matter from index.pug; theme falls back to site config for banner and meta tags. Co-authored-by: Cursor <[email protected]> --------- Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Yang Jun
+2
-2
@@ -1,6 +1,6 @@
|
||||
title: LiquidJS
|
||||
subtitle: "A simple, expressive, and safe template engine for JavaScript."
|
||||
description: "LiquidJS is a simple, expressive, and safe template engine for JavaScript, compatible with Shopify and GitHub Pages."
|
||||
subtitle: "A simple, expressive, extensible Liquid template engine for JavaScript"
|
||||
description: "A simple, expressive, extensible Liquid template engine for JavaScript — Shopify, Jekyll and GitHub Pages compatible, for Node.js, browsers, and the CLI, with TypeScript support."
|
||||
author: Harttle
|
||||
language: en
|
||||
timezone: UTC
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
layout: index
|
||||
description: LiquidJS is a simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript.
|
||||
subtitle: A simple, expressive and safe template engine.
|
||||
---
|
||||
ul#intro-feature-list
|
||||
li.intro-feature-wrap
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# LiquidJS
|
||||
|
||||
> A simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.
|
||||
> A simple, expressive, extensible Liquid template engine for JavaScript
|
||||
|
||||
## Tutorials
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"short_name": "LiquidJS",
|
||||
"name": "LiquidJS",
|
||||
"description": "A simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript.",
|
||||
"description": "A simple, expressive, extensible Liquid template engine for JavaScript",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon/apple-touch-icon-57x57.png",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -3,9 +3,9 @@ title: The Liquid Template Language
|
||||
describe: A short introduction to the Liquid template language and some simple demos.
|
||||
---
|
||||
|
||||
LiquidJS is a simple, expressive and safe [Shopify][shopify/liquid] / GitHub Pages compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. Liquid is originally implemented in Ruby and used by GitHub Pages, Jekyll and Shopify, see [Differences with Shopify/liquid][diff].
|
||||
Liquid is a template language originally implemented in Ruby and used by Shopify, Jekyll, and GitHub Pages. LiquidJS implements it in JavaScript; see [Differences with Shopify/liquid][diff] for compatibility notes.
|
||||
|
||||
LiquidJS syntax is relatively simple. There are 2 types of markups in LiquidJS:
|
||||
There are 2 types of markups in LiquidJS:
|
||||
|
||||
- **Tags**. A tag consists of a tag name and optional arguments wrapped between `{%raw%}{%{%endraw%}` and `%}`.
|
||||
- **Outputs**. An output consists of a value and a list of filters, which is optional, wrapped between `{%raw%}{{{%endraw%}` and `}}`.
|
||||
@@ -56,5 +56,4 @@ Typically tags appear in pairs with a start tag and a corresponding end tag. For
|
||||
|
||||
A complete list of tags supported by LiquidJS can be found [here](../tags/overview.html).
|
||||
|
||||
[shopify/liquid]: https://github.com/Shopify/liquid
|
||||
[diff]: ./differences.html
|
||||
|
||||
Vendored
+5
-1
@@ -13,10 +13,14 @@ index:
|
||||
description: 'Thanks to these wonderful people! See <a href="tutorials/contribution-guidelines.html">contribution guidelines</a> if you'd like to help.'
|
||||
sponsors:
|
||||
title: Sponsors
|
||||
description: 'If you personally love LiquidJS or it's benefiting your business, please <a href="https://github.com/sponsors/harttle">sponsor us</a>!'
|
||||
description: 'Organizations and individuals who <a href="https://github.com/sponsors/harttle">sponsor LiquidJS</a>. Thank you!'
|
||||
used_by:
|
||||
title: Used by
|
||||
description: 'Products and projects running on LiquidJS. <a href="https://github.com/harttle/liquidjs/edit/master/README.md">Open a PR</a> to add yours.'
|
||||
|
||||
playground:
|
||||
title: Playground
|
||||
lead: Edit a template and context JSON — rendered HTML updates as you type.
|
||||
loading: Loading...
|
||||
|
||||
page:
|
||||
|
||||
Vendored
+18
-5
@@ -1,6 +1,6 @@
|
||||
<header id="banner" class="wrapper">
|
||||
<div class="inner inner-content">
|
||||
<h2 id="banner-title">{{ page.subtitle }}</h2>
|
||||
<h2 id="banner-title">{{ page.subtitle | default(config.subtitle) }}</h2>
|
||||
<div id="banner-share">{{ partial('partial/share') }}</div>
|
||||
<div id="banner-start">
|
||||
<code id="banner-start-command">npm install liquidjs</code><a id="banner-start-link" href="./tutorials/setup.html"><i class="icon-arrow-right"></i></a>
|
||||
@@ -14,15 +14,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contributors-wrap">
|
||||
<div id="used-by-wrap">
|
||||
<div class="wrapper">
|
||||
<div class="inner inner-content">
|
||||
<div class="section-header">
|
||||
<h3>{{__('index.contributors.title')}}</h3>
|
||||
<p class="description">{{__('index.contributors.description')}}</p>
|
||||
<h3>{{__('index.used_by.title')}}</h3>
|
||||
<p class="description">{{__('index.used_by.description')}}</p>
|
||||
</div>
|
||||
<div class="contributors">
|
||||
{{ partial('partial/all-contributors') }}
|
||||
{{ partial('partial/used-by') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,3 +40,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contributors-wrap">
|
||||
<div class="wrapper">
|
||||
<div class="inner inner-content">
|
||||
<div class="section-header">
|
||||
<h3>{{__('index.contributors.title')}}</h3>
|
||||
<p class="description">{{__('index.contributors.description')}}</p>
|
||||
</div>
|
||||
<div class="contributors">
|
||||
{{ partial('partial/all-contributors') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
{% 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]/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>
|
||||
{% endif %}
|
||||
|
||||
{{ js('js/main') }}
|
||||
|
||||
+1
-5
@@ -1,7 +1,3 @@
|
||||
{
|
||||
"people": [
|
||||
"alice",
|
||||
"bob",
|
||||
"carol"
|
||||
]
|
||||
"name": "liquid"
|
||||
}
|
||||
|
||||
+1
-9
@@ -1,9 +1 @@
|
||||
<ul>
|
||||
{%- for person in people %}
|
||||
<li>
|
||||
<a href="{{person | prepend: "https://example.com/"}}">
|
||||
{{ person | capitalize }}
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor%}
|
||||
</ul>
|
||||
<p>Hello, {{ name | capitalize }}!</p>
|
||||
|
||||
+37
-13
@@ -1,21 +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="editor" id="previewEl">{{__('playground.loading')}}</div>
|
||||
<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">{{ raw('partial/demo.liquid') }}</div>
|
||||
</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">{{ raw('partial/demo.json') }}</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">{{__('playground.loading')}}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="inner version"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -126,7 +126,7 @@
|
||||
background: var(--color-link-hover)
|
||||
color: #fff
|
||||
|
||||
#sponsors-wrap, #contributors-wrap
|
||||
#used-by-wrap, #sponsors-wrap, #contributors-wrap
|
||||
background: var(--color-navy-lighter)
|
||||
border-top: 1px solid #161d24
|
||||
border-bottom: 1px solid #161d24
|
||||
@@ -181,7 +181,7 @@
|
||||
|
||||
#contributors-wrap
|
||||
border: none
|
||||
overflow: hidden;
|
||||
overflow: hidden
|
||||
|
||||
.contributors
|
||||
tr
|
||||
|
||||
+260
-55
@@ -1,107 +1,312 @@
|
||||
#playground
|
||||
--playground-gap: 12px
|
||||
--playground-radius: 10px
|
||||
--playground-inset: 16px
|
||||
background: var(--color-content-bg)
|
||||
overflow: hidden
|
||||
box-shadow: var(--panel-shadow)
|
||||
|
||||
.wrapper
|
||||
margin-bottom: 40px
|
||||
margin-bottom: 32px
|
||||
@media mq-mobile
|
||||
margin-bottom: 20px
|
||||
|
||||
.playground-hero
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
align-items: flex-end
|
||||
justify-content: space-between
|
||||
gap: 16px 24px
|
||||
padding-top: 32px
|
||||
padding-bottom: 20px
|
||||
@media mq-mobile
|
||||
padding-top: 16px
|
||||
padding-bottom: 12px
|
||||
gap: 10px
|
||||
align-items: flex-start
|
||||
|
||||
.playground-hero-text
|
||||
flex: 1 1 280px
|
||||
min-width: 0
|
||||
|
||||
h1
|
||||
font-size: 36px
|
||||
font-weight: 300
|
||||
margin-top: 40px
|
||||
margin-bottom: 24px
|
||||
color: var(--color-default)
|
||||
|
||||
h2
|
||||
font-size: 0.8125rem
|
||||
font-size: 28px
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04em
|
||||
color: var(--color-gray)
|
||||
letter-spacing: -0.02em
|
||||
margin: 0 0 8px
|
||||
color: var(--color-default)
|
||||
@media mq-mobile
|
||||
font-size: 22px
|
||||
margin-bottom: 4px
|
||||
|
||||
.playground-lead
|
||||
margin: 0
|
||||
font-size: 15px
|
||||
line-height: 1.5
|
||||
color: var(--color-gray)
|
||||
@media mq-mobile
|
||||
font-size: 14px
|
||||
line-height: 1.45
|
||||
|
||||
.playground-version
|
||||
flex: 0 0 auto
|
||||
margin: 0
|
||||
font-size: 12px
|
||||
line-height: 1.4
|
||||
font-family: font-mono
|
||||
padding: 6px 12px
|
||||
border-radius: 999px
|
||||
background: var(--playground-surface)
|
||||
border: 1px solid var(--color-border)
|
||||
color: var(--color-gray)
|
||||
a
|
||||
color: var(--color-default)
|
||||
text-decoration: none
|
||||
font-weight: 500
|
||||
&:hover
|
||||
color: var(--color-link)
|
||||
text-decoration: none
|
||||
|
||||
#editors
|
||||
display: grid
|
||||
overflow: hidden
|
||||
margin-bottom: 0
|
||||
height: 75vh
|
||||
min-height: 480px
|
||||
|
||||
.playground-workspace
|
||||
display: grid
|
||||
gap: var(--playground-gap)
|
||||
grid-template-columns: 1fr 1fr
|
||||
grid-template-rows: 3fr 2fr
|
||||
grid-gap: 16px
|
||||
align-items: stretch
|
||||
@media mq-normal
|
||||
overflow: hidden
|
||||
height: 75vh
|
||||
max-height: unquote('calc(100vh - 200px)')
|
||||
min-height: 520px
|
||||
@media mq-mobile
|
||||
height: auto
|
||||
min-height: 0
|
||||
grid-template-columns: 1fr
|
||||
grid-template-rows: auto
|
||||
grid-gap: 20px
|
||||
gap: 12px
|
||||
|
||||
.area-tpl
|
||||
grid-row: 1
|
||||
grid-column: 1
|
||||
min-height: 0
|
||||
--pane-dot: var(--color-link)
|
||||
.area-data
|
||||
grid-row: 2
|
||||
grid-column: 1
|
||||
min-height: 0
|
||||
--pane-dot: var(--highlight-orange)
|
||||
.area-output
|
||||
grid-column: 2
|
||||
grid-row: 1 / -1
|
||||
min-height: 0
|
||||
min-width: 0
|
||||
--pane-dot: var(--highlight-green)
|
||||
@media mq-mobile
|
||||
grid-row: auto
|
||||
grid-column: 1
|
||||
|
||||
.editor-wrapper
|
||||
.playground-pane
|
||||
display: flex
|
||||
gap: 8px
|
||||
flex-direction: column
|
||||
min-height: 0
|
||||
overflow: hidden
|
||||
.editor
|
||||
flex: 1 1 auto
|
||||
min-height: 0
|
||||
position: relative
|
||||
code-block-chrome()
|
||||
overflow: hidden
|
||||
@media mq-mobile
|
||||
min-height: 240px
|
||||
.ace_editor
|
||||
font-family: font-mono
|
||||
font-size: 14px
|
||||
line-height: 1.5
|
||||
border-radius: 6px
|
||||
.ace_scrollbar
|
||||
z-index: 2
|
||||
background: var(--playground-pane-head)
|
||||
border: 1px solid var(--code-border)
|
||||
border-radius: var(--playground-radius)
|
||||
box-shadow: var(--code-shadow)
|
||||
|
||||
.version
|
||||
font-size: 0.8125rem
|
||||
line-height: 1.5
|
||||
.pane-head
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 10px
|
||||
flex-shrink: 0
|
||||
height: 36px
|
||||
padding: 0 var(--playground-inset)
|
||||
border-bottom: 1px solid var(--code-border)
|
||||
@media mq-mobile
|
||||
height: 32px
|
||||
padding: 0 10px
|
||||
h2
|
||||
font-size: 13px
|
||||
font-weight: 600
|
||||
letter-spacing: 0.01em
|
||||
text-transform: none
|
||||
color: var(--color-default)
|
||||
margin: 0
|
||||
@media mq-mobile
|
||||
font-size: 12px
|
||||
|
||||
.pane-indicator
|
||||
width: 8px
|
||||
height: 8px
|
||||
border-radius: 50%
|
||||
flex-shrink: 0
|
||||
background: unquote('color-mix(in srgb, var(--pane-dot) 38%, var(--color-border))')
|
||||
transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease
|
||||
|
||||
&[data-state="active"]
|
||||
background: var(--pane-dot)
|
||||
animation: playground-dot-typing 0.85s ease-in-out infinite
|
||||
|
||||
&[data-state="pending"]
|
||||
background: var(--highlight-yellow)
|
||||
|
||||
&[data-state="ok"]
|
||||
background: var(--highlight-green)
|
||||
animation: playground-dot-ok 0.45s ease-out
|
||||
|
||||
&[data-state="error"]
|
||||
background: var(--highlight-red)
|
||||
animation: playground-dot-error 0.35s ease-out
|
||||
|
||||
.area-output .pane-indicator
|
||||
&[data-state="pending"]
|
||||
animation: playground-dot-pending 0.55s ease-in-out infinite
|
||||
|
||||
@keyframes playground-dot-typing
|
||||
0%, 100%
|
||||
transform: scale(1)
|
||||
box-shadow: 0 0 0 0 unquote('color-mix(in srgb, var(--pane-dot) 0%, transparent)')
|
||||
50%
|
||||
transform: scale(1.2)
|
||||
box-shadow: 0 0 0 4px unquote('color-mix(in srgb, var(--pane-dot) 28%, transparent)')
|
||||
|
||||
@keyframes playground-dot-pending
|
||||
0%, 100%
|
||||
transform: scale(1)
|
||||
opacity: 0.75
|
||||
50%
|
||||
transform: scale(1.12)
|
||||
opacity: 1
|
||||
|
||||
@keyframes playground-dot-ok
|
||||
0%
|
||||
transform: scale(0.85)
|
||||
box-shadow: 0 0 0 0 unquote('color-mix(in srgb, var(--highlight-green) 50%, transparent)')
|
||||
70%
|
||||
transform: scale(1.15)
|
||||
box-shadow: 0 0 0 5px unquote('color-mix(in srgb, var(--highlight-green) 0%, transparent)')
|
||||
100%
|
||||
transform: scale(1)
|
||||
box-shadow: none
|
||||
|
||||
@keyframes playground-dot-error
|
||||
0%, 100%
|
||||
transform: translateX(0)
|
||||
20%
|
||||
transform: translateX(-2px)
|
||||
40%
|
||||
transform: translateX(2px)
|
||||
60%
|
||||
transform: translateX(-1px)
|
||||
80%
|
||||
transform: translateX(1px)
|
||||
|
||||
.pane-body
|
||||
flex: 1 1 auto
|
||||
min-height: 0
|
||||
min-width: 0
|
||||
display: flex
|
||||
flex-direction: column
|
||||
overflow: hidden
|
||||
background: var(--highlight-background)
|
||||
|
||||
.area-tpl .pane-body,
|
||||
.area-data .pane-body
|
||||
padding: var(--playground-inset)
|
||||
box-sizing: border-box
|
||||
@media mq-mobile
|
||||
padding: 12px
|
||||
|
||||
.area-tpl .ace_gutter,
|
||||
.area-data .ace_gutter
|
||||
display: none
|
||||
width: 0
|
||||
min-width: 0
|
||||
|
||||
.area-tpl .ace_editor,
|
||||
.area-data .ace_editor,
|
||||
.area-tpl .ace_scroller,
|
||||
.area-data .ace_scroller,
|
||||
.area-tpl .ace_content,
|
||||
.area-data .ace_content,
|
||||
.area-tpl .ace_text-layer,
|
||||
.area-data .ace_text-layer
|
||||
background: transparent
|
||||
|
||||
.editor
|
||||
flex: 1 1 auto
|
||||
min-height: 0
|
||||
position: relative
|
||||
overflow: hidden
|
||||
@media mq-mobile
|
||||
min-height: 180px
|
||||
|
||||
.output-preview
|
||||
flex: 1 1 auto
|
||||
min-height: 0
|
||||
min-width: 0
|
||||
width: 100%
|
||||
overflow: auto
|
||||
@media mq-mobile
|
||||
min-height: 120px
|
||||
pre.highlight
|
||||
margin: 0
|
||||
min-height: 100%
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
padding: var(--playground-inset)
|
||||
border: none
|
||||
box-shadow: none
|
||||
border-radius: 0
|
||||
background: transparent
|
||||
color: var(--highlight-foreground)
|
||||
overflow-x: hidden
|
||||
overflow-y: auto
|
||||
white-space: pre-wrap
|
||||
overflow-wrap: break-word
|
||||
@media mq-mobile
|
||||
padding: 12px
|
||||
code
|
||||
display: block
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
font-family: font-mono
|
||||
font-size: 14px
|
||||
line-height: 1.55
|
||||
color: var(--highlight-foreground)
|
||||
background: transparent
|
||||
padding: 0
|
||||
white-space: inherit
|
||||
overflow-wrap: inherit
|
||||
@media mq-mobile
|
||||
font-size: 13px
|
||||
|
||||
.ace_editor
|
||||
font-family: font-mono
|
||||
color: var(--color-gray)
|
||||
margin-top: 20px
|
||||
margin-bottom: 32px
|
||||
a
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: var(--color-link)
|
||||
text-decoration: underline
|
||||
font-size: 14px
|
||||
line-height: 1.55
|
||||
border-radius: 0
|
||||
@media mq-mobile
|
||||
font-size: 13px
|
||||
.ace_scrollbar
|
||||
z-index: 2
|
||||
|
||||
.hide
|
||||
display: none
|
||||
|
||||
.loader
|
||||
width: 48px
|
||||
height: 48px
|
||||
margin: 150px auto 200px
|
||||
border: 3px solid var(--color-border)
|
||||
width: 40px
|
||||
height: 40px
|
||||
margin: 120px auto 160px
|
||||
border: 2px solid var(--color-border)
|
||||
border-top-color: var(--color-link)
|
||||
border-radius: 50%
|
||||
animation: spin 0.8s infinite linear
|
||||
animation: playground-spin 0.7s infinite linear
|
||||
@media mq-mobile
|
||||
margin: 60px auto 80px
|
||||
|
||||
@keyframes spin
|
||||
@keyframes playground-spin
|
||||
100%
|
||||
transform: rotate(360deg)
|
||||
|
||||
+4
@@ -37,6 +37,8 @@ vendor-prefixes = webkit moz ms official
|
||||
--highlight-aqua: #0550ae
|
||||
--highlight-blue: #0550ae
|
||||
--highlight-purple: #8250df
|
||||
--playground-surface: #f3f4f6
|
||||
--playground-pane-head: #fff
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -75,6 +77,8 @@ vendor-prefixes = webkit moz ms official
|
||||
--highlight-aqua: #79c0ff
|
||||
--highlight-blue: #79c0ff
|
||||
--highlight-purple: #d2a8ff
|
||||
--playground-surface: hsl(218, 26%, 10%)
|
||||
--playground-pane-head: hsl(218, 22%, 16%)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Vendored
+119
-16
@@ -38,8 +38,8 @@
|
||||
|
||||
(function() {
|
||||
// playground
|
||||
/* global liquidjs, ace */
|
||||
if (!location.pathname.match(/playground.html$/)) return;
|
||||
/* global liquidjs, ace, Prism */
|
||||
if (!/\/playground(?:\.html)?$/.test(location.pathname)) return;
|
||||
updateVersion(liquidjs.version);
|
||||
const engine = new liquidjs.Liquid({
|
||||
memoryLimit: 1e5,
|
||||
@@ -48,14 +48,19 @@
|
||||
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const editor = createEditor('editorEl', 'liquid');
|
||||
const dataEditor = createEditor('dataEl', 'json');
|
||||
const preview = createEditor('previewEl', 'html');
|
||||
preview.setReadOnly(true);
|
||||
preview.renderer.setShowGutter(false);
|
||||
preview.renderer.setPadding(16);
|
||||
const previewCode = document.getElementById('previewCode');
|
||||
const indicatorTpl = document.querySelector('.area-tpl .pane-indicator');
|
||||
const indicatorData = document.querySelector('.area-data .pane-indicator');
|
||||
const indicatorOutput = document.querySelector('.area-output .pane-indicator');
|
||||
|
||||
const editors = [editor, dataEditor, preview];
|
||||
const editors = [editor, dataEditor];
|
||||
let previewValue = '';
|
||||
let hadPreview = false;
|
||||
let renderTimer = null;
|
||||
const RENDER_DELAY = 180;
|
||||
colorScheme.addEventListener('change', function() {
|
||||
editors.forEach(applyEditorTheme);
|
||||
if (previewValue) setPreview(previewValue);
|
||||
});
|
||||
|
||||
const init = parseArgs(location.hash.slice(1));
|
||||
@@ -63,9 +68,11 @@
|
||||
editor.setValue(init.tpl, 1);
|
||||
dataEditor.setValue(init.data, 1);
|
||||
}
|
||||
editor.on('change', update);
|
||||
dataEditor.on('change', update);
|
||||
update();
|
||||
editor.on('change', onTemplateChange);
|
||||
dataEditor.on('change', onContextChange);
|
||||
editor.on('focus', function () { setIndicator(indicatorTpl, 'active'); });
|
||||
dataEditor.on('focus', function () { setIndicator(indicatorData, 'active'); });
|
||||
scheduleUpdate();
|
||||
ready();
|
||||
|
||||
function ready() {
|
||||
@@ -87,6 +94,8 @@
|
||||
|
||||
function applyEditorTheme(editor) {
|
||||
editor.setTheme(getEditorTheme());
|
||||
editor.renderer.setPadding(0);
|
||||
editor.container.style.background = 'transparent';
|
||||
}
|
||||
|
||||
function createEditor(id, lang) {
|
||||
@@ -96,15 +105,61 @@
|
||||
fontFamily: '"Source Code Pro", ui-monospace, Monaco, Menlo, Consolas, monospace',
|
||||
fontSize: '14px',
|
||||
showPrintMargin: false,
|
||||
showGutter: false,
|
||||
highlightActiveLine: false,
|
||||
tabSize: 2,
|
||||
useSoftTabs: true,
|
||||
scrollPastEnd: 0.25
|
||||
scrollPastEnd: 0
|
||||
});
|
||||
editor.getSession().setMode('ace/mode/' + lang);
|
||||
editor.renderer.setScrollMargin(8, 8, 0, 0);
|
||||
editor.renderer.setShowGutter(false);
|
||||
if (editor.renderer.$gutter) {
|
||||
editor.renderer.$gutter.style.display = 'none';
|
||||
}
|
||||
editor.renderer.setScrollMargin(0, 0, 0, 0);
|
||||
bindClipboard(editor);
|
||||
return editor;
|
||||
}
|
||||
|
||||
function bindClipboard(editor) {
|
||||
editor.commands.addCommand({
|
||||
name: 'copy',
|
||||
bindKey: {win: 'Ctrl-C', mac: 'Command-C'},
|
||||
exec: function (ed) {
|
||||
const text = ed.getCopyText();
|
||||
if (!text) return;
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
},
|
||||
readOnly: true
|
||||
});
|
||||
editor.commands.addCommand({
|
||||
name: 'cut',
|
||||
bindKey: {win: 'Ctrl-X', mac: 'Command-X'},
|
||||
exec: function (ed) {
|
||||
const text = ed.getCopyText();
|
||||
if (!text) return;
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(text).then(function () {
|
||||
ed.insert('');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
editor.commands.addCommand({
|
||||
name: 'paste',
|
||||
bindKey: {win: 'Ctrl-V', mac: 'Command-V'},
|
||||
exec: function (ed) {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.readText().then(function (text) {
|
||||
ed.insert(text);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function parseArgs(hash) {
|
||||
if (!hash) return;
|
||||
try {
|
||||
@@ -118,16 +173,64 @@
|
||||
return utoa(obj.tpl) + ',' + utoa(obj.data);
|
||||
}
|
||||
|
||||
function setPreview(value) {
|
||||
previewValue = value;
|
||||
previewCode.textContent = value;
|
||||
if (window.Prism) {
|
||||
delete previewCode.dataset.highlighted;
|
||||
window.Prism.highlightElement(previewCode);
|
||||
}
|
||||
}
|
||||
|
||||
function setIndicator(indicator, state) {
|
||||
if (indicator) indicator.dataset.state = state;
|
||||
}
|
||||
|
||||
function onTemplateChange() {
|
||||
setIndicator(indicatorTpl, 'active');
|
||||
if (indicatorData.dataset.state !== 'error') setIndicator(indicatorData, 'idle');
|
||||
setIndicator(indicatorOutput, 'pending');
|
||||
scheduleUpdate();
|
||||
}
|
||||
|
||||
function onContextChange() {
|
||||
setIndicator(indicatorData, 'active');
|
||||
if (indicatorTpl.dataset.state !== 'error') setIndicator(indicatorTpl, 'idle');
|
||||
setIndicator(indicatorOutput, 'pending');
|
||||
scheduleUpdate();
|
||||
}
|
||||
|
||||
function scheduleUpdate() {
|
||||
clearTimeout(renderTimer);
|
||||
renderTimer = setTimeout(update, RENDER_DELAY);
|
||||
}
|
||||
|
||||
async function update() {
|
||||
const tpl = editor.getValue();
|
||||
const data = dataEditor.getValue();
|
||||
history.replaceState({}, '', '#' + serializeArgs({tpl, data}));
|
||||
let parsed;
|
||||
try {
|
||||
const html = await engine.parseAndRender(tpl, JSON.parse(data));
|
||||
preview.setValue(html, 1);
|
||||
parsed = JSON.parse(data);
|
||||
} catch (err) {
|
||||
preview.setValue(err.stack, 1);
|
||||
throw err;
|
||||
setIndicator(indicatorData, 'error');
|
||||
setIndicator(indicatorTpl, 'idle');
|
||||
setIndicator(indicatorOutput, 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const html = await engine.parseAndRender(tpl, parsed);
|
||||
if (html !== '' || !hadPreview) {
|
||||
setPreview(html);
|
||||
if (html !== '') hadPreview = true;
|
||||
}
|
||||
setIndicator(indicatorTpl, 'idle');
|
||||
setIndicator(indicatorData, 'idle');
|
||||
setIndicator(indicatorOutput, 'ok');
|
||||
} catch (err) {
|
||||
setIndicator(indicatorTpl, 'error');
|
||||
setIndicator(indicatorData, 'idle');
|
||||
setIndicator(indicatorOutput, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user