mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
Peter deHaanandharttle
22386b0212
Fix a couple of errors that were appearing on https://harttle.land/liquidjs/#feature-list
405 lines
19 KiB
HTML
405 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>
|
|
LiquidJS
|
|
</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta property="og:title" content="LiquidJS">
|
|
<meta property="og:locale" content="en_US">
|
|
<meta name="description" content="A shopify compatible Liquid template engine in pure JavaScript.">
|
|
<meta property="og:description" content="A shopify compatible Liquid template engine in pure JavaScript.">
|
|
<link rel="canonical" href="https://harttle.github.io/liquidjs">
|
|
<meta property="og:url" content="https://harttle.github.io/liquidjs/">
|
|
<meta property="og:site_name" content="LiquidJS">
|
|
<script type="application/ld+json">
|
|
{
|
|
"@type":"WebSite",
|
|
"url":"https://harttle.github.io/liquidjs/",
|
|
"name":"LiquidJS",
|
|
"description":"A shopify compatible Liquid template engine in pure JavaScript.",
|
|
"headline":"LiquidJS",
|
|
"@context":"http://schema.org"
|
|
}
|
|
</script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#157878">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<style>
|
|
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
|
|
body{padding:0;margin:0;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;color:#606c71}
|
|
*{box-sizing:border-box}
|
|
a{background-color:transparent}a:active,a:hover{outline:0}
|
|
h1{font-size:2em;margin:0.67em 0}
|
|
textarea{overflow:auto}
|
|
#skip-to-content{height:1px;width:1px;position:absolute;overflow:hidden;top:-10px}
|
|
#skip-to-content:focus{position:fixed;top:10px;left:10px;height:auto;width:auto;background:#e19447;outline:thick solid #e19447}
|
|
a{color:#1e6bb8;text-decoration:none}
|
|
a:hover{text-decoration:underline}
|
|
.btn{display:inline-block;margin-bottom:1rem;color:rgba(255,255,255,0.7);background-color:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);border-style:solid;border-width:1px;border-radius:0.3rem;transition:color 0.2s, background-color 0.2s, border-color 0.2s}
|
|
.btn:hover{color:rgba(255,255,255,0.8);text-decoration:none;background-color:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)}
|
|
.btn+.btn{margin-left:1rem}
|
|
.page-header{color:#fff;text-align:center;background-color:#159957;background-image:linear-gradient(120deg, #155799, #159957)}
|
|
.project-name{margin-top:0;margin-bottom:0.1rem}
|
|
.project-tagline{margin-bottom:2rem;font-weight:normal;opacity:0.7}
|
|
.main-content{word-wrap:break-word}
|
|
.main-content :first-child{margin-top:0}
|
|
.site-footer{padding-top:2rem;margin-top:2rem;border-top:solid 1px #eff0f1}
|
|
.site-footer-owner{display:block;font-weight:bold}
|
|
.site-footer-credits{color:#819198}
|
|
.row {
|
|
display: flex;
|
|
}
|
|
.row > div {
|
|
flex: 0 1 50%;
|
|
height: 350px;
|
|
}
|
|
#editor {
|
|
font-size: 16px;
|
|
margin-right: 30px;
|
|
}
|
|
#preview {
|
|
font-size: 16px;
|
|
padding: 0 15px;
|
|
overflow: auto;
|
|
width: 30%;
|
|
}
|
|
#feature {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#feature li {
|
|
flex: 0 0 25%;
|
|
}
|
|
@media (min-width: 64em){.page-header{padding:5rem 6rem} }
|
|
@media (min-width: 42em) and (max-width: 64em){.page-header{padding:3rem 4rem} }
|
|
@media (max-width: 42em){.page-header{padding:2rem 1rem} }
|
|
@media (min-width: 64em){ .btn{padding:0.75rem 1rem} }
|
|
@media (min-width: 42em) and (max-width: 64em){.btn{padding:0.6rem 0.9rem;font-size:0.9rem} }
|
|
@media (max-width: 42em){.btn{display:block;width:100%;padding:0.75rem;font-size:0.9rem} .btn+.btn{margin-top:1rem;margin-left:0} }
|
|
@media (min-width: 64em){.project-name{font-size:3.25rem} }
|
|
@media (min-width: 42em) and (max-width: 64em){.project-name{font-size:2.25rem} }
|
|
@media (max-width: 42em){.project-name{font-size:1.75rem} }
|
|
@media (min-width: 64em){.project-tagline{font-size:1.25rem} }
|
|
@media (min-width: 42em) and (max-width: 64em){.project-tagline{font-size:1.15rem} }
|
|
@media (max-width: 42em){.project-tagline{font-size:1rem} }
|
|
@media (min-width: 64em){.main-content{padding:2rem 6rem;margin:0 auto;font-size:1.1rem} }
|
|
@media (min-width: 42em) and (max-width: 64em){.main-content{padding:2rem 4rem;font-size:1.1rem} }
|
|
@media (max-width: 42em){.main-content{padding:2rem 1rem;font-size:1rem} }
|
|
@media (min-width: 64em){.site-footer{font-size:1rem} }
|
|
@media (min-width: 42em) and (max-width: 64em){.site-footer{font-size:1rem} }
|
|
@media (max-width: 42em){.site-footer{font-size:0.9rem} }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a id="skip-to-content" href="#content">Skip to the content.</a>
|
|
<header class="page-header" role="banner">
|
|
<h1 class="project-name">LiquidJS</h1>
|
|
<h2 class="project-tagline">A shopify compatible Liquid template engine in pure JavaScript.</h2>
|
|
<a href="https://github.com/harttle/liquidjs" class="btn">View on Github</a>
|
|
<a href="https://github.com/harttle/liquidjs/wiki" class="btn">Tutorials</a>
|
|
<a href="./classes/_liquid_.liquid.html" class="btn">API Reference</a>
|
|
</header>
|
|
<main id="content" class="main-content" role="main">
|
|
<h2 id="feature-list">Feature List</h2>
|
|
<ol id="feature"></ol>
|
|
<script>
|
|
feature.list = [{
|
|
title: 'assign tag',
|
|
code: "{% assign name = 'alice' | capitalize %}\n{% assign greeting = 'Welcom to LiquidJS' %}\n\nMy name is {{ name }}, {{ greeting | upcase }}.",
|
|
url: 'https://shopify.github.io/liquid/tags/variable/'
|
|
}, {
|
|
title: 'if tag',
|
|
code: '{% assign var = 3 %}\n\n{% if var == 1 %}\n var == 1\n{% elsif var == 2 %}\n var == 2\n{% else %}\n var is not 1 or 2\n{% endif %}',
|
|
url: 'https://shopify.github.io/liquid/tags/control-flow/'
|
|
}, {
|
|
title: 'unless tag',
|
|
code: '{% assign var = 2 %}\n\n{% unless var == 1 %}\n var not 1\n{% else %}\n var == 1\n{% endunless %}',
|
|
url: 'https://shopify.github.io/liquid/tags/control-flow/'
|
|
}, {
|
|
title: 'case/when tag',
|
|
code: '{% assign var = 2 %}\n\n{% case var %}\n {% when 1 %}var == 1\n {% when 2 %}var == 2\n {% else %}var is not 1 or 2\n{% endcase %}',
|
|
url: 'https://shopify.github.io/liquid/tags/control-flow/'
|
|
}, {
|
|
title: 'for tag',
|
|
code: '{% for val in (10..20) limit: 5 %}\n <p>index: {{forloop.index0}}, value: {{val}}</o>\n{% endfor %}',
|
|
url: 'https://shopify.github.io/liquid/tags/iteration/'
|
|
}, {
|
|
title: 'cycle tag',
|
|
code: '<li>{% cycle "one", "two", "three" %}</li>\n<li>{% cycle "one", "two", "three" %}</li>\n<li>{% cycle "one", "two", "three" %}</li>\n<li>{% cycle "one", "two", "three" %}</li>\n<li>{% cycle "one", "two", "three" %}</li>',
|
|
url: 'https://shopify.github.io/liquid/tags/iteration/'
|
|
}, {
|
|
title: 'tablerow tag',
|
|
code: '<table>\n {% tablerow val in (10..20) cols:3 %}\n {{ val }}\n {% endtablerow %}\n</table>',
|
|
url: 'https://shopify.github.io/liquid/tags/iteration/'
|
|
}, {
|
|
title: 'capture tag',
|
|
code: '{% capture name%}\n{{"alice" | capitalize}} Smith\n{% endcapture %}\n\nMy name is {{name}}',
|
|
url: 'https://shopify.github.io/liquid/tags/variable/'
|
|
}, {
|
|
title: 'increment tag',
|
|
code: '<p>\ncount1:\n{% increment count1 %}\n{% increment count1 %}\n</p>\n\n<p>\ncount2:\n{% increment count2 %}\n{% increment count2 %}\n{% increment count2 %}\n{% increment count2 %}\n</p>',
|
|
url: 'https://shopify.github.io/liquid/tags/variable/'
|
|
}, {
|
|
title: 'decrement tag',
|
|
code: '<p>\ncount1:\n{% decrement count1 %}\n{% decrement count1 %}\n</p>\n\n<p>\ncount2:\n{% decrement count2 %}\n{% decrement count2 %}\n{% decrement count2 %}\n{% decrement count2 %}\n</p>',
|
|
url: 'https://shopify.github.io/liquid/tags/variable/'
|
|
}, {
|
|
title: 'raw tag',
|
|
code: '<pre>\n{% raw %}\n {% if var == 1 %}\n var == 1\n {% elsif var == 2 %}\n var == 2\n {% else %}\n var is not 1 or 2\n {% endif %}\n{% endraw %}\n</pre>',
|
|
url: 'https://help.shopify.com/themes/liquid/tags/theme-tags#raw'
|
|
}, {
|
|
title: 'comment tag',
|
|
code: '<p>This line is before comment</p>\n\n{% comment %}This line will never show.{% endcomment %}\n\n<p>This line is after comment</p>',
|
|
url: 'https://help.shopify.com/themes/liquid/tags/theme-tags#comment'
|
|
}, {
|
|
title: 'include tag',
|
|
code: "<h3> Todo List</h3>\n<ul>\n {% for i in (1..5) %}\n {% include 'todo.liquid' order: i %}\n {% endfor %}\n</ul>",
|
|
url: 'https://help.shopify.com/themes/liquid/tags/theme-tags#include'
|
|
}, {
|
|
title: 'layout tag',
|
|
code: '{% layout "page.liquid" %}\n \n{% block "content" %}\n <p>This is the content block.</p>\n{% endblock %}',
|
|
url: 'https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout'
|
|
}, {
|
|
title: 'abs filter',
|
|
code: '{{ -2.01 | abs }}',
|
|
url: 'https://shopify.github.io/liquid/filters/abs/'
|
|
}, {
|
|
title: 'append filter',
|
|
code: '{{ "abc" | append: "def" }}',
|
|
url: 'https://shopify.github.io/liquid/filters/append'
|
|
}, {
|
|
title: 'at_least filter',
|
|
code: '{{ -2 | at_least: 0 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/at_least'
|
|
}, {
|
|
title: 'at_most filter',
|
|
code: '{{ 2 | at_most: 0 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/at_most'
|
|
}, {
|
|
title: 'ceil filter',
|
|
code: '{{ 2.5 | ceil }}',
|
|
url: 'https://shopify.github.io/liquid/filters/ceil'
|
|
}, {
|
|
title: 'floor filter',
|
|
code: '{{ 2.5 | floor }}',
|
|
url: 'https://shopify.github.io/liquid/filters/floor'
|
|
}, {
|
|
title: 'capitalize filter',
|
|
code: '{{ "alice" | capitalize }}',
|
|
url: 'https://shopify.github.io/liquid/filters/capitalize'
|
|
}, {
|
|
title: 'date filter',
|
|
code: '{{ "now" | date: "year: %y, month: %m, day: %d"}}',
|
|
url: 'https://shopify.github.io/liquid/filters/date'
|
|
}, {
|
|
title: 'default filter',
|
|
code: '{{ "" | default: "it\'s empty" }}',
|
|
url: 'https://shopify.github.io/liquid/filters/default'
|
|
}, {
|
|
title: 'divided_by filter',
|
|
code: '{{ 32 | divided_by: 4 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/divided_by'
|
|
}, {
|
|
title: 'downcase filter',
|
|
code: '{{ "ALICE" | downcase }}',
|
|
url: 'https://shopify.github.io/liquid/filters/downcase'
|
|
}, {
|
|
title: 'upcase filter',
|
|
code: '{{ "alice" | upcase }}',
|
|
url: 'https://shopify.github.io/liquid/filters/upcase'
|
|
}, {
|
|
title: 'escape filter',
|
|
code: '<pre><code>{{ "< > &" | escape }}</code></pre>',
|
|
url: 'https://shopify.github.io/liquid/filters/escape'
|
|
}, {
|
|
title: 'escape_once filter',
|
|
code: '<pre><code>{{ "< >" | escape_once }}</code></pre>',
|
|
url: 'https://shopify.github.io/liquid/filters/escape_once'
|
|
}, {
|
|
title: 'first filter',
|
|
code: '{{ (10..20) | first }}',
|
|
url: 'https://shopify.github.io/liquid/filters/first'
|
|
}, {
|
|
title: 'last filter',
|
|
code: '{{ (10..20) | last }}',
|
|
url: 'https://shopify.github.io/liquid/filters/last'
|
|
}, {
|
|
title: 'join filter',
|
|
code: '{{ (1..5) | join: ","}}',
|
|
url: 'https://shopify.github.io/liquid/filters/join'
|
|
}, {
|
|
title: 'lstrip filter',
|
|
code: '<pre>BEFORE{{ " foo " | lstrip }}AFTER</pre>',
|
|
url: 'https://shopify.github.io/liquid/filters/lstrip'
|
|
}, {
|
|
title: 'rstrip filter',
|
|
code: '<pre>BEFORE{{ " foo " | rstrip }}AFTER</pre>',
|
|
url: 'https://shopify.github.io/liquid/filters/rstrip'
|
|
}, {
|
|
title: 'strip filter',
|
|
code: '<pre>BEFORE{{ " foo " | strip }}AFTER</pre>',
|
|
url: 'https://shopify.github.io/liquid/filters/strip'
|
|
}, {
|
|
title: 'strip_html filter',
|
|
code: '<pre>{{ "<p>foo</p><p>bar</p>" | strip_html }}</pre>',
|
|
url: 'https://shopify.github.io/liquid/filters/strip_html'
|
|
}, {
|
|
title: 'strip_newlines filter',
|
|
code: '{% capture var %}\nfoo\nbar\n{% endcapture %}\n\n<pre>{{ var | strip_newlines }}</pre>',
|
|
url: 'https://shopify.github.io/liquid/filters/strip_newlines'
|
|
}, {
|
|
title: 'map filter',
|
|
code: '{% assign list = "a ab abc abcd" | split: " " %}\n{% assign lengths = list | map: "length" %}\n\n{% for length in lengths %}\n- {{ length }}\n{% endfor %}',
|
|
url: 'https://shopify.github.io/liquid/filters/map'
|
|
}, {
|
|
title: 'minus filter',
|
|
code: '{{ 4 | minus: 2 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/minus'
|
|
}, {
|
|
title: 'modulo filter',
|
|
code: '{{ 3 | modulo: 2 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/modulo'
|
|
}, {
|
|
title: 'newline_to_br filter',
|
|
code: '{% capture string_with_newlines %}\nHello\nthere\n{% endcapture %}\n\n{{ string_with_newlines | newline_to_br }}',
|
|
url: 'https://shopify.github.io/liquid/filters/newline_to_br'
|
|
}, {
|
|
title: 'plus filter',
|
|
code: '{{ 2 | plus: 3}}',
|
|
url: 'https://shopify.github.io/liquid/filters/plus'
|
|
}, {
|
|
title: 'prepend filter',
|
|
code: '{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}',
|
|
url: 'https://shopify.github.io/liquid/filters/prepend'
|
|
}, {
|
|
title: 'remove filter',
|
|
code: '{{ "I strained to see the train through the rain" | remove: "rain" }}',
|
|
url: 'https://shopify.github.io/liquid/filters/remove'
|
|
}, {
|
|
title: 'remove_first filter',
|
|
code: '{{ "I strained to see the train through the rain" | remove_first: "rain" }}',
|
|
url: 'https://shopify.github.io/liquid/filters/remove_first'
|
|
}, {
|
|
title: 'replace filter',
|
|
code: '{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}',
|
|
url: 'https://shopify.github.io/liquid/filters/replace'
|
|
}, {
|
|
title: 'replace_first filter',
|
|
code: '{{ "Take my protein pills and put my helmet on" | replace_first: "my", "your" }}',
|
|
url: 'https://shopify.github.io/liquid/filters/replace_first'
|
|
}, {
|
|
title: 'reverse filter',
|
|
code: '{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}\n\n{{ my_array | reverse | join: ", " }}',
|
|
url: 'https://shopify.github.io/liquid/filters/reverse'
|
|
}, {
|
|
title: 'round filter',
|
|
code: '{{ 1.2 | round }}',
|
|
url: 'https://shopify.github.io/liquid/filters/round'
|
|
}, {
|
|
title: 'size filter',
|
|
code: '{{ "Ground control to Major Tom." | size }}',
|
|
url: 'https://shopify.github.io/liquid/filters/size'
|
|
}, {
|
|
title: 'slice filter',
|
|
code: '{{ "Liquid" | slice: 0 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/slice'
|
|
}, {
|
|
title: 'sort filter',
|
|
code: '{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}\n{{ my_array | sort | join: ", " }}',
|
|
url: 'https://shopify.github.io/liquid/filters/sort'
|
|
}, {
|
|
title: 'sort_natural filter',
|
|
code: '{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}\n{{ my_array | sort_natural | join: ", " }}',
|
|
url: 'https://shopify.github.io/liquid/filters/sort_natural'
|
|
}, {
|
|
title: 'split filter',
|
|
code: '{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}\n\n{{ my_array | reverse | join: ", " }}',
|
|
url: 'https://shopify.github.io/liquid/filters/split'
|
|
}, {
|
|
title: 'times filter',
|
|
code: '{{ 3 | times: 2 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/times'
|
|
}, {
|
|
title: 'truncate filter',
|
|
code: '{{ "Ground control to Major Tom." | truncate: 20 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/truncate'
|
|
}, {
|
|
title: 'truncatewords filter',
|
|
code: '{{ "Ground control to Major Tom." | truncatewords: 3 }}',
|
|
url: 'https://shopify.github.io/liquid/filters/truncatewords'
|
|
}, {
|
|
title: 'uniq filter',
|
|
code: '{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}\n{{ my_array | uniq | join: ", " }}',
|
|
url: 'https://shopify.github.io/liquid/filters/uniq'
|
|
}, {
|
|
title: 'url_decode filter',
|
|
code: '{{ "%27Stop%21%27+said+Fred" | url_decode }}',
|
|
url: 'https://shopify.github.io/liquid/filters/url_decode'
|
|
}, {
|
|
title: 'url_encode filter',
|
|
code: '{{ "[email protected]" | url_encode }}',
|
|
url: 'https://shopify.github.io/liquid/filters/url_encode'
|
|
}]
|
|
|
|
feature.innerHTML = feature.list.map(function(feat, idx) {
|
|
return '<li><a href="#feature-list" idx="' + idx + '">' + feat.title + '</a></li>'
|
|
}).join('')
|
|
</script>
|
|
|
|
<h2 id="playground">Playground</h2>
|
|
<div class="row">
|
|
<div id="editor">{{ "welcome to liquid" | capitalize }}</div>
|
|
<div id="preview">Loading...</div>
|
|
</div>
|
|
<p id="link"></p>
|
|
<script src="https://unpkg.com/liquidjs/dist/liquid.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"></script>
|
|
<script>
|
|
var engine = new liquidjs.Liquid();
|
|
var editor = ace.edit("editor");
|
|
editor.setTheme("ace/theme/monokai");
|
|
editor.getSession().setMode("ace/mode/liquid");
|
|
editor.on('change', update);
|
|
|
|
var previewEditor = ace.edit("preview");
|
|
previewEditor.setTheme("ace/theme/monokai");
|
|
previewEditor.getSession().setMode("ace/mode/html");
|
|
|
|
update();
|
|
|
|
feature.addEventListener('click', function (e) {
|
|
if (e.target.tagName === 'A') {
|
|
var feat = feature.list[e.target.getAttribute('idx')];
|
|
editor.setValue(feat.code || '')
|
|
editor.clearSelection()
|
|
link.innerHTML = feat.title + ': <a href="' + feat.url + '">' + feat.url + '</a>'
|
|
}
|
|
})
|
|
|
|
function update(delta) {
|
|
var tpl = editor.getValue()
|
|
engine.parseAndRender(tpl)
|
|
.then(function (html) {
|
|
previewEditor.setValue(html)
|
|
previewEditor.clearSelection()
|
|
})
|
|
.catch(function (err) {
|
|
previewEditor.setValue(err.stack)
|
|
previewEditor.clearSelection()
|
|
throw err
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<footer class="site-footer">
|
|
<span class="site-footer-owner"><a href="https://github.com/harttle/liquidjs">LiquidJS</a> is maintained by <a href=
|
|
"https://github.com/harttle">harttle</a>.</span> <span class="site-footer-credits">This page applies <a href=
|
|
"https://pages-themes.github.io/cayman/">cayman theme</a> provided by <a href=
|
|
"https://github.com/pages-themes">pages-themes</a>.</span>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|