Labyricorn/liquid
1
0
Fork 0
mirror of https://github.com/Shopify/liquid.git synced 2026-09-12 23:40:45 -07:00
Code Issues Packages Projects Releases Wiki Activity

Change inline snippet identifier from string to variable

Browse Source 
Currently, snippet files identified by strings. This
PR makes changes to render to allow for new inline
snippets to use variables as identifiers instead
This commit is contained in:
Julia Boutin
2025-10-30 12:00:44 +01:00
committed by Guilherme Carreiro
parent 12bbbc4537
commit c7ad1c90ca
3 changed files with 68 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/server/templates/index.liquid
+22 -61
View File
@@ -1,71 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Code Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/dracula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/htmlmixed/htmlmixed.min.js"></script>
<style>
.liquid, .CodeMirror {
position: fixed;
height: 100vh;
width: 50vw;
top: 0;
font-size: 24px;
}
.liquid {
left: 0;
}
.CodeMirror {
left: 50%;
}
.CodeMirror-hscrollbar {
overflow: hidden;
}
</style>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Snippets</title>
<body>
<div class="liquid">
{% snippet "main" %}
<div class="liquid" style="font-size: 56px;">
{% # Snippet input %}
{% snippet "input" |type, name| %}
<div>
<label>{{ type | capitalize }}</label>
<input type={{ type }}>
</div>
{% endsnippet %}
{% snippet main %}
{% assign foo = false %}
<p>Hi {{ arg | upcase }}!!!</p>
{% snippet "league" %}
<h1>Welcome to the league of super evil</h1>
{% endsnippet %}
{% render "league" %}
{% render "input", type: "text" %}
{% render "input", type: "password" %}
<p>This is an inline snippet</p>
<ul>
<li><a href="/wow-a-link">wow a link</a></li>
<li>1 + 1 = {{ 1 | plus: 1 }}</li>
<li>{% if true %}Yes!{% endif %}</li>
<li>{% if foo %}NO{% endif %}</li>
<li>{{ missing_var | default: 'fallback' }}</li>
</ul>
{% endsnippet %}
{% render 'main' %}
{% render main, arg: 'lsf' %}
</div>
<textarea id="code">
{% capture html %}{% render 'main' %}{% endcapture %}
{{ html | escape }}
</textarea>
<script>
const editorElement = document.querySelector('#code')
const editor = CodeMirror.fromTextArea(editorElement, {
lineNumbers: true,
mode: "htmlmixed",
theme: "dracula"
});
</script>
</body>
</html>