create-easel-theme 0.1.0

package/dist/templates/js/base/layout/theme.liquid

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="{{ request.locale.iso_code }}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="canonical" href="{{ canonical_url | escape }}">
+    <link rel="icon" type="image/svg+xml" href="{{ 'easel.svg' | asset_url }}">
+    <title>{{ page_title | escape }}{% unless page_title contains shop.name %} — {{ shop.name | escape }}{% endunless %}</title>
+    <style>
+      :root { --theme-background: {{ settings.background }}; --theme-foreground: {{ settings.foreground }}; }
+    </style>
+    {% render 'easel-assets' %}
+    {{ content_for_header }}
+  </head>
+  <body>
+    <a class="skip-link" href="#MainContent">{{ 'accessibility.skip_to_content' | t }}</a>
+    <main id="MainContent" tabindex="-1">{{ content_for_layout }}</main>
+  </body>
+</html>

package/dist/templates/js/base/locales/en.default.json

@@ -0,0 +1,13 @@
+{
+  "accessibility": {
+    "skip_to_content": "Skip to content"
+  },
+  "general": {
+    "not_found": "Page not found",
+    "return_home": "Return home",
+    "counter": {
+      "decrease": "Decrease count",
+      "increase": "Increase count"
+    }
+  }
+}

package/dist/templates/js/base/locales/en.default.schema.json

@@ -0,0 +1,21 @@
+{
+  "general": {
+    "not_found_name": "404 page"
+  },
+  "sections": {
+    "hero": {
+      "name": "Hero",
+      "heading": "Heading",
+      "default_heading": "__THEME_NAME__",
+      "text": "Text",
+      "default_text": "<p>Build the storefront experience here.</p>"
+    }
+  },
+  "settings": {
+    "colors": {
+      "name": "Colors",
+      "background": "Background",
+      "foreground": "Foreground"
+    }
+  }
+}

package/dist/templates/js/base/sections/hero.liquid

@@ -0,0 +1,30 @@
+<section class="hero">
+  <h1>{{ section.settings.heading | escape }}</h1>
+  <div>{{ section.settings.text }}</div>
+  {% render 'counter' %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.hero.name",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "t:sections.hero.heading",
+      "default": "t:sections.hero.default_heading"
+    },
+    {
+      "type": "richtext",
+      "id": "text",
+      "label": "t:sections.hero.text",
+      "default": "t:sections.hero.default_text"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:sections.hero.name"
+    }
+  ]
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-404.liquid

@@ -0,0 +1,11 @@
+<section class="not-found">
+  <h1>{{ 'general.not_found' | t }}</h1>
+  <a href="{{ routes.root_url }}">{{ 'general.return_home' | t }}</a>
+</section>
+
+{% schema %}
+{
+  "name": "t:general.not_found_name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/snippets/counter.liquid

@@ -0,0 +1,9 @@
+{% doc %}
+  Counter labels are provided by Liquid so client-side components share the theme's translations.
+{% enddoc %}
+
+<div data-easel-counter data-decrease="{{ 'general.counter.decrease' | t | escape }}" data-increase="{{ 'general.counter.increase' | t | escape }}">
+  <button type="button" data-decrease-button aria-label="{{ 'general.counter.decrease' | t | escape }}" disabled>−</button>
+  <output>0</output>
+  <button type="button" data-increase-button aria-label="{{ 'general.counter.increase' | t | escape }}" disabled>+</button>
+</div>

package/dist/templates/js/base/src/main.js

@@ -0,0 +1,21 @@
+import { mountSections } from './sections';
+const dispose = mountSections('[data-easel-counter]', (element) => {
+    const decrease = element.querySelector('[data-decrease-button]');
+    const increase = element.querySelector('[data-increase-button]');
+    const output = element.querySelector('output');
+    if (!decrease || !increase || !output)
+        return () => { };
+    let count = 0;
+    const controller = new AbortController();
+    decrease.disabled = false;
+    increase.disabled = false;
+    decrease.addEventListener('click', () => {
+        output.value = String(--count);
+    }, { signal: controller.signal });
+    increase.addEventListener('click', () => {
+        output.value = String(++count);
+    }, { signal: controller.signal });
+    return () => controller.abort();
+});
+if (import.meta.hot)
+    import.meta.hot.dispose(dispose);

package/dist/templates/js/base/src/sections.js

@@ -0,0 +1,44 @@
+export function mountSections(selector, initialize) {
+    const cleanups = new Map();
+    function mount(root) {
+        const elements = [...root.querySelectorAll(selector)];
+        if (root instanceof HTMLElement && root.matches(selector))
+            elements.unshift(root);
+        for (const element of elements) {
+            if (!(element instanceof HTMLElement) || cleanups.has(element))
+                continue;
+            const fallback = element.innerHTML;
+            const dispose = initialize(element);
+            cleanups.set(element, () => {
+                dispose();
+                element.innerHTML = fallback;
+            });
+        }
+    }
+    function unmount(root) {
+        for (const [element, dispose] of cleanups) {
+            if (!root.contains(element))
+                continue;
+            dispose();
+            cleanups.delete(element);
+        }
+    }
+    function handleSectionLoad(event) {
+        if (event.target instanceof HTMLElement)
+            mount(event.target);
+    }
+    function handleSectionUnload(event) {
+        if (event.target instanceof HTMLElement)
+            unmount(event.target);
+    }
+    mount(document);
+    document.addEventListener('shopify:section:load', handleSectionLoad);
+    document.addEventListener('shopify:section:unload', handleSectionUnload);
+    return () => {
+        document.removeEventListener('shopify:section:load', handleSectionLoad);
+        document.removeEventListener('shopify:section:unload', handleSectionUnload);
+        for (const dispose of cleanups.values())
+            dispose();
+        cleanups.clear();
+    };
+}

package/dist/templates/js/base/src/style.css

@@ -0,0 +1,61 @@
+:root {
+  color: var(--theme-foreground);
+  background: var(--theme-background);
+  font-family: system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+button {
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+}
+
+.counter,
+[data-easel-counter] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+output {
+  min-width: 2ch;
+  text-align: center;
+}
+
+.skip-link {
+  position: absolute;
+  transform: translateY(-200%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.hero,
+.not-found {
+  margin-inline: auto;
+  max-width: 64rem;
+  padding: 4rem 1.5rem;
+}

package/dist/templates/js/base/templates/404.json

@@ -0,0 +1,9 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-404",
+      "settings": {}
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/js/base/templates/index.json

@@ -0,0 +1,9 @@
+{
+  "sections": {
+    "hero": {
+      "type": "hero",
+      "settings": {}
+    }
+  },
+  "order": ["hero"]
+}

package/dist/templates/js/react/src/main.jsx

@@ -0,0 +1,23 @@
+import '@vitejs/plugin-react/preamble';
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { mountSections } from './sections';
+function Counter({ decrease, increase }) {
+    const [count, setCount] = useState(0);
+    return (<div className="counter">
+      <button type="button" aria-label={decrease} onClick={() => setCount((value) => value - 1)}>
+        −
+      </button>
+      <output>{count}</output>
+      <button type="button" aria-label={increase} onClick={() => setCount((value) => value + 1)}>
+        +
+      </button>
+    </div>);
+}
+const dispose = mountSections('[data-easel-counter]', (element) => {
+    const root = createRoot(element);
+    root.render(<Counter decrease={element.dataset.decrease ?? ''} increase={element.dataset.increase ?? ''}/>);
+    return () => root.unmount();
+});
+if (import.meta.hot)
+    import.meta.hot.dispose(dispose);

package/dist/templates/js/vue/src/Counter.vue

@@ -0,0 +1,18 @@
+<script setup>
+import {ref} from 'vue';
+
+defineProps({
+  decrease: {type: String, required: true},
+  increase: {type: String, required: true},
+});
+
+const count = ref(0);
+</script>
+
+<template>
+  <div class="counter">
+    <button type="button" :aria-label="decrease" @click="count -= 1">−</button>
+    <output>{{ count }}</output>
+    <button type="button" :aria-label="increase" @click="count += 1">+</button>
+  </div>
+</template>

package/dist/templates/js/vue/src/main.js

@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+import Counter from './Counter.vue';
+import { mountSections } from './sections';
+const dispose = mountSections('[data-easel-counter]', (element) => {
+    const app = createApp(Counter, {
+        decrease: element.dataset.decrease ?? '',
+        increase: element.dataset.increase ?? '',
+    });
+    app.mount(element);
+    return () => app.unmount();
+});
+if (import.meta.hot)
+    import.meta.hot.dispose(dispose);

package/dist/templates/ts/alpine/snippets/counter.liquid

@@ -0,0 +1,9 @@
+{% doc %}
+  Disabled fallback buttons become interactive when Alpine initializes this section.
+{% enddoc %}
+
+<div class="counter" x-data="easelCounter">
+  <button type="button" aria-label="{{ 'general.counter.decrease' | t | escape }}" disabled :disabled="false" @click="count -= 1">−</button>
+  <output x-text="count">0</output>
+  <button type="button" aria-label="{{ 'general.counter.increase' | t | escape }}" disabled :disabled="false" @click="count += 1">+</button>
+</div>

package/dist/templates/ts/alpine/src/main.ts

@@ -0,0 +1,22 @@
+import Alpine from 'alpinejs';
+
+Alpine.data('easelCounter', () => ({count: 0}));
+Alpine.start();
+
+function handleSectionLoad(event: Event): void {
+  if (event.target instanceof HTMLElement) Alpine.initTree(event.target);
+}
+
+function handleSectionUnload(event: Event): void {
+  if (event.target instanceof HTMLElement) Alpine.destroyTree(event.target);
+}
+
+document.addEventListener('shopify:section:load', handleSectionLoad);
+document.addEventListener('shopify:section:unload', handleSectionUnload);
+
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    document.removeEventListener('shopify:section:load', handleSectionLoad);
+    document.removeEventListener('shopify:section:unload', handleSectionUnload);
+  });
+}

package/dist/templates/ts/base/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.easel/
+*.zip
+assets/easel-*
+snippets/easel-assets.liquid

package/dist/templates/ts/base/assets/easel.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="16" fill="#171717"/>
+  <path d="M32 9v8M23 41l-6 14m24-14 6 14M14 41h36M20 17h24v18H20z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/templates/ts/base/config/settings_data.json

@@ -0,0 +1,12 @@
+{
+  "current": {
+    "background": "#f5f2eb",
+    "foreground": "#171714"
+  },
+  "presets": {
+    "Default": {
+      "background": "#f5f2eb",
+      "foreground": "#171714"
+    }
+  }
+}

package/dist/templates/ts/base/config/settings_schema.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "theme_info",
+    "theme_name": "__THEME_NAME__",
+    "theme_version": "0.1.0",
+    "theme_author": "Billy Noyes",
+    "theme_documentation_url": "https://github.com/BillyNoyes/Easel",
+    "theme_support_url": "https://github.com/BillyNoyes/Easel/issues"
+  },
+  {
+    "name": "t:settings.colors.name",
+    "settings": [
+      {
+        "type": "color",
+        "id": "background",
+        "label": "t:settings.colors.background",
+        "default": "#f5f2eb"
+      },
+      {
+        "type": "color",
+        "id": "foreground",
+        "label": "t:settings.colors.foreground",
+        "default": "#171714"
+      }
+    ]
+  }
+]

package/dist/templates/ts/base/layout/theme.liquid

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="{{ request.locale.iso_code }}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="canonical" href="{{ canonical_url | escape }}">
+    <link rel="icon" type="image/svg+xml" href="{{ 'easel.svg' | asset_url }}">
+    <title>{{ page_title | escape }}{% unless page_title contains shop.name %} — {{ shop.name | escape }}{% endunless %}</title>
+    <style>
+      :root { --theme-background: {{ settings.background }}; --theme-foreground: {{ settings.foreground }}; }
+    </style>
+    {% render 'easel-assets' %}
+    {{ content_for_header }}
+  </head>
+  <body>
+    <a class="skip-link" href="#MainContent">{{ 'accessibility.skip_to_content' | t }}</a>
+    <main id="MainContent" tabindex="-1">{{ content_for_layout }}</main>
+  </body>
+</html>

package/dist/templates/ts/base/locales/en.default.json

@@ -0,0 +1,13 @@
+{
+  "accessibility": {
+    "skip_to_content": "Skip to content"
+  },
+  "general": {
+    "not_found": "Page not found",
+    "return_home": "Return home",
+    "counter": {
+      "decrease": "Decrease count",
+      "increase": "Increase count"
+    }
+  }
+}

package/dist/templates/ts/base/locales/en.default.schema.json

@@ -0,0 +1,21 @@
+{
+  "general": {
+    "not_found_name": "404 page"
+  },
+  "sections": {
+    "hero": {
+      "name": "Hero",
+      "heading": "Heading",
+      "default_heading": "__THEME_NAME__",
+      "text": "Text",
+      "default_text": "<p>Build the storefront experience here.</p>"
+    }
+  },
+  "settings": {
+    "colors": {
+      "name": "Colors",
+      "background": "Background",
+      "foreground": "Foreground"
+    }
+  }
+}

package/dist/templates/ts/base/sections/hero.liquid

@@ -0,0 +1,30 @@
+<section class="hero">
+  <h1>{{ section.settings.heading | escape }}</h1>
+  <div>{{ section.settings.text }}</div>
+  {% render 'counter' %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.hero.name",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "t:sections.hero.heading",
+      "default": "t:sections.hero.default_heading"
+    },
+    {
+      "type": "richtext",
+      "id": "text",
+      "label": "t:sections.hero.text",
+      "default": "t:sections.hero.default_text"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:sections.hero.name"
+    }
+  ]
+}
+{% endschema %}

package/dist/templates/ts/base/sections/main-404.liquid

@@ -0,0 +1,11 @@
+<section class="not-found">
+  <h1>{{ 'general.not_found' | t }}</h1>
+  <a href="{{ routes.root_url }}">{{ 'general.return_home' | t }}</a>
+</section>
+
+{% schema %}
+{
+  "name": "t:general.not_found_name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/ts/base/snippets/counter.liquid

@@ -0,0 +1,9 @@
+{% doc %}
+  Counter labels are provided by Liquid so client-side components share the theme's translations.
+{% enddoc %}
+
+<div data-easel-counter data-decrease="{{ 'general.counter.decrease' | t | escape }}" data-increase="{{ 'general.counter.increase' | t | escape }}">
+  <button type="button" data-decrease-button aria-label="{{ 'general.counter.decrease' | t | escape }}" disabled>−</button>
+  <output>0</output>
+  <button type="button" data-increase-button aria-label="{{ 'general.counter.increase' | t | escape }}" disabled>+</button>
+</div>

package/dist/templates/ts/base/src/main.ts

@@ -0,0 +1,29 @@
+import {mountSections} from './sections';
+
+const dispose = mountSections('[data-easel-counter]', (element) => {
+  const decrease = element.querySelector<HTMLButtonElement>('[data-decrease-button]');
+  const increase = element.querySelector<HTMLButtonElement>('[data-increase-button]');
+  const output = element.querySelector('output');
+  if (!decrease || !increase || !output) return () => {};
+  let count = 0;
+  const controller = new AbortController();
+  decrease.disabled = false;
+  increase.disabled = false;
+  decrease.addEventListener(
+    'click',
+    () => {
+      output.value = String(--count);
+    },
+    {signal: controller.signal},
+  );
+  increase.addEventListener(
+    'click',
+    () => {
+      output.value = String(++count);
+    },
+    {signal: controller.signal},
+  );
+  return () => controller.abort();
+});
+
+if (import.meta.hot) import.meta.hot.dispose(dispose);

package/dist/templates/ts/base/src/sections.ts

@@ -0,0 +1,47 @@
+export function mountSections(
+  selector: string,
+  initialize: (element: HTMLElement) => () => void,
+): () => void {
+  const cleanups = new Map<HTMLElement, () => void>();
+
+  function mount(root: ParentNode): void {
+    const elements = [...root.querySelectorAll(selector)];
+    if (root instanceof HTMLElement && root.matches(selector)) elements.unshift(root);
+    for (const element of elements) {
+      if (!(element instanceof HTMLElement) || cleanups.has(element)) continue;
+      const fallback = element.innerHTML;
+      const dispose = initialize(element);
+      cleanups.set(element, () => {
+        dispose();
+        element.innerHTML = fallback;
+      });
+    }
+  }
+
+  function unmount(root: ParentNode): void {
+    for (const [element, dispose] of cleanups) {
+      if (!root.contains(element)) continue;
+      dispose();
+      cleanups.delete(element);
+    }
+  }
+
+  function handleSectionLoad(event: Event): void {
+    if (event.target instanceof HTMLElement) mount(event.target);
+  }
+
+  function handleSectionUnload(event: Event): void {
+    if (event.target instanceof HTMLElement) unmount(event.target);
+  }
+
+  mount(document);
+  document.addEventListener('shopify:section:load', handleSectionLoad);
+  document.addEventListener('shopify:section:unload', handleSectionUnload);
+
+  return () => {
+    document.removeEventListener('shopify:section:load', handleSectionLoad);
+    document.removeEventListener('shopify:section:unload', handleSectionUnload);
+    for (const dispose of cleanups.values()) dispose();
+    cleanups.clear();
+  };
+}

package/dist/templates/ts/base/src/style.css

@@ -0,0 +1,61 @@
+:root {
+  color: var(--theme-foreground);
+  background: var(--theme-background);
+  font-family: system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+button {
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+}
+
+.counter,
+[data-easel-counter] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+output {
+  min-width: 2ch;
+  text-align: center;
+}
+
+.skip-link {
+  position: absolute;
+  transform: translateY(-200%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.hero,
+.not-found {
+  margin-inline: auto;
+  max-width: 64rem;
+  padding: 4rem 1.5rem;
+}

package/dist/templates/ts/base/templates/404.json

@@ -0,0 +1,9 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-404",
+      "settings": {}
+    }
+  },
+  "order": ["main"]
+}