Demo

2026-09-15 08:50:45 -07:00 · 2024-09-20 13:02:02 +02:00
parent d7045f9d64
commit 30ea917a38
3 changed files with 76 additions and 3 deletions
@@ -28,3 +28,7 @@ group :test do
    gem 'liquid-c', github: 'Shopify/liquid-c', ref: 'main'
  end
 end
+
+group :development do
+  gem "webrick"
+end
@@ -53,6 +53,7 @@ GEM
    terminal-table (3.0.2)
      unicode-display_width (>= 1.1.1, < 3)
    unicode-display_width (2.5.0)
+    webrick (1.8.1)

 PLATFORMS
  ruby
@@ -70,6 +71,7 @@ DEPENDENCIES
  rubocop-shopify (~> 2.12.0)
  stackprof
  terminal-table
+  webrick

 BUNDLED WITH
   2.5.7
@@ -1,6 +1,73 @@
-<p>Hello world!</p>
+<!DOCTYPE html>
+  <html lang="en">

-<p>It is {{date}}</p>
+  <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>
+
+  <body>
+    <div class="liquid">
+      {% snippet "main" %}
+
+        {% # Snippet input %}
+        {% snippet "input" %}
+          <label>User:</label>
+          <input />
+        {% endsnippet %}


-<p>Check out the <a href="/products">Products</a> screen </p>
+        {% # Snippet banner %}
+        {% snippet "banner" %}
+          <marquee direction="up" height="100px">
+            Welcome to my store!
+          </marquee>
+        {% endsnippet %}
+
+        {% render 'input' %}
+        {% render 'input' %}
+        {% render 'banner' %}
+
+      {% endsnippet %}
+      {% render 'main' %}
+    </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>