create-easel-theme 0.1.0 → 0.2.2

package/dist/templates/js/base/templates/list-collections.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-list-collections"
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/js/base/templates/page.contact.json

@@ -0,0 +1,11 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-page"
+    },
+    "form": {
+      "type": "contact-form"
+    }
+  },
+  "order": ["main", "form"]
+}

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-page"
+    }
+  },
+  "order": ["main"]
+}

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

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

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-product"
+    }
+  },
+  "order": ["main"]
+}

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-search"
+    }
+  },
+  "order": ["main"]
+}

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

@@ -2,7 +2,7 @@
   {
     "name": "theme_info",
     "theme_name": "__THEME_NAME__",
-    "theme_version": "0.1.0",
+    "theme_version": "0.2.2",
     "theme_author": "Billy Noyes",
     "theme_documentation_url": "https://github.com/BillyNoyes/Easel",
     "theme_support_url": "https://github.com/BillyNoyes/Easel/issues"

package/dist/templates/ts/base/layout/password.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>{{ shop.name | escape }}</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

@@ -2,6 +2,37 @@
   "accessibility": {
     "skip_to_content": "Skip to content"
   },
+  "article": {
+    "back_to_blog": "Back to {{ blog }}"
+  },
+  "blog": {
+    "empty": "No articles found."
+  },
+  "cart": {
+    "title": "Cart",
+    "empty": "Your cart is empty.",
+    "continue_shopping": "Continue shopping",
+    "quantity": "Quantity",
+    "subtotal": "Subtotal",
+    "update": "Update cart",
+    "checkout": "Checkout"
+  },
+  "collection": {
+    "empty": "No products found."
+  },
+  "collections": {
+    "title": "Collections",
+    "empty": "No collections found."
+  },
+  "contact": {
+    "title": "Contact us",
+    "success": "Thanks for contacting us. We'll get back to you soon.",
+    "name": "Name",
+    "email": "Email",
+    "phone": "Phone number",
+    "message": "Message",
+    "send": "Send"
+  },
   "general": {
     "not_found": "Page not found",
     "return_home": "Return home",
@@ -9,5 +40,27 @@
       "decrease": "Decrease count",
       "increase": "Increase count"
     }
+  },
+  "gift_card": {
+    "disabled": "This gift card is disabled.",
+    "expired": "This gift card has expired.",
+    "expires_on": "Expires {{ date }}.",
+    "code": "Gift card code",
+    "continue_shopping": "Continue shopping"
+  },
+  "password": {
+    "password": "Store password",
+    "enter": "Enter store"
+  },
+  "product": {
+    "add_to_cart": "Add to cart",
+    "sold_out": "Sold out"
+  },
+  "search": {
+    "title": "Search",
+    "label": "Search the store",
+    "submit": "Search",
+    "results": "{{ count }} results for “{{ terms }}”",
+    "empty": "No results found."
   }
 }

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

@@ -3,12 +3,42 @@
     "not_found_name": "404 page"
   },
   "sections": {
+    "contact_form": {
+      "name": "Contact form"
+    },
     "hero": {
       "name": "Hero",
       "heading": "Heading",
       "default_heading": "__THEME_NAME__",
       "text": "Text",
       "default_text": "<p>Build the storefront experience here.</p>"
+    },
+    "main_article": {
+      "name": "Article"
+    },
+    "main_blog": {
+      "name": "Blog"
+    },
+    "main_cart": {
+      "name": "Cart"
+    },
+    "main_collection": {
+      "name": "Collection"
+    },
+    "main_list_collections": {
+      "name": "Collection list"
+    },
+    "main_page": {
+      "name": "Page"
+    },
+    "main_password": {
+      "name": "Password page"
+    },
+    "main_product": {
+      "name": "Product"
+    },
+    "main_search": {
+      "name": "Search"
     }
   },
   "settings": {

package/dist/templates/ts/base/sections/contact-form.liquid

@@ -0,0 +1,23 @@
+<section class="page contact">
+  <h2>{{ 'contact.title' | t }}</h2>
+  {% form 'contact' %}
+    {% if form.posted_successfully? %}<p>{{ 'contact.success' | t }}</p>{% endif %}
+    {{ form.errors | default_errors }}
+    <label for="ContactName-{{ section.id }}">{{ 'contact.name' | t }}</label>
+    <input id="ContactName-{{ section.id }}" type="text" name="contact[name]" value="{{ form.name | escape }}" autocomplete="name">
+    <label for="ContactEmail-{{ section.id }}">{{ 'contact.email' | t }}</label>
+    <input id="ContactEmail-{{ section.id }}" type="email" name="contact[email]" value="{{ form.email | escape }}" autocomplete="email" required>
+    <label for="ContactPhone-{{ section.id }}">{{ 'contact.phone' | t }}</label>
+    <input id="ContactPhone-{{ section.id }}" type="tel" name="contact[phone]" value="{{ form.phone | escape }}" autocomplete="tel">
+    <label for="ContactMessage-{{ section.id }}">{{ 'contact.message' | t }}</label>
+    <textarea id="ContactMessage-{{ section.id }}" name="contact[body]" rows="8" required>{{ form.body | escape }}</textarea>
+    <button type="submit">{{ 'contact.send' | t }}</button>
+  {% endform %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.contact_form.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,15 @@
+<article class="page article">
+  <a href="{{ blog.url }}">{{ 'article.back_to_blog' | t: blog: blog.title }}</a>
+  <header>
+    <h1>{{ article.title | escape }}</h1>
+    <p>{{ article.published_at | time_tag: format: 'date' }}</p>
+  </header>
+  <div class="rte">{{ article.content }}</div>
+</article>
+
+{% schema %}
+{
+  "name": "t:sections.main_article.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,28 @@
+<section class="page">
+  <h1>{{ blog.title | escape }}</h1>
+  {% paginate blog.articles by 12 %}
+    {% if blog.articles_count > 0 %}
+      <ul class="resource-list" role="list">
+        {% for article in blog.articles %}
+          <li>
+            <article class="card">
+              <h2><a href="{{ article.url }}">{{ article.title | escape }}</a></h2>
+              <p>{{ article.published_at | time_tag: format: 'date' }}</p>
+              {% if article.excerpt != blank %}<div class="rte">{{ article.excerpt }}</div>{% endif %}
+            </article>
+          </li>
+        {% endfor %}
+      </ul>
+      {{ paginate | default_pagination }}
+    {% else %}
+      <p>{{ 'blog.empty' | t }}</p>
+    {% endif %}
+  {% endpaginate %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_blog.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,31 @@
+<section class="page">
+  <h1>{{ 'cart.title' | t }}</h1>
+  {% if cart.item_count == 0 %}
+    <p>{{ 'cart.empty' | t }}</p>
+    <a href="{{ routes.all_products_collection_url }}">{{ 'cart.continue_shopping' | t }}</a>
+  {% else %}
+    {% form 'cart', cart %}
+      <ul class="cart-items" role="list">
+        {% for item in cart.items %}
+          <li class="cart-item">
+            <a href="{{ item.url }}">{{ item.product.title | escape }}</a>
+            {% unless item.product.has_only_default_variant %}<p>{{ item.variant.title | escape }}</p>{% endunless %}
+            <label for="CartQuantity-{{ forloop.index }}">{{ 'cart.quantity' | t }}</label>
+            <input id="CartQuantity-{{ forloop.index }}" type="number" name="updates[]" value="{{ item.quantity }}" min="0">
+            <p>{{ item.final_line_price | money }}</p>
+          </li>
+        {% endfor %}
+      </ul>
+      <p>{{ 'cart.subtotal' | t }}: {{ cart.total_price | money }}</p>
+      <button type="submit" name="update">{{ 'cart.update' | t }}</button>
+      <button type="submit" name="checkout">{{ 'cart.checkout' | t }}</button>
+    {% endform %}
+  {% endif %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_cart.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,25 @@
+<section class="page">
+  <header>
+    <h1>{{ collection.title | escape }}</h1>
+    {% if collection.description != blank %}<div class="rte">{{ collection.description }}</div>{% endif %}
+  </header>
+  {% paginate collection.products by 24 %}
+    {% if collection.products_count > 0 %}
+      <div class="resource-grid">
+        {% for product in collection.products %}
+          {% render 'product-card', product: product %}
+        {% endfor %}
+      </div>
+      {{ paginate | default_pagination }}
+    {% else %}
+      <p>{{ 'collection.empty' | t }}</p>
+    {% endif %}
+  {% endpaginate %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_collection.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/ts/base/sections/main-list-collections.liquid

@@ -0,0 +1,27 @@
+<section class="page">
+  <h1>{{ 'collections.title' | t }}</h1>
+  {% paginate collections by 24 %}
+    <div class="resource-grid">
+      {% for collection in collections %}
+        <article class="card">
+          <a href="{{ collection.url }}">
+            {% if collection.featured_image %}
+              {{ collection.featured_image | image_url: width: 720 | image_tag: loading: 'lazy', widths: '240, 360, 540, 720', sizes: '(min-width: 64rem) 20rem, 50vw', alt: collection.featured_image.alt | default: collection.title }}
+            {% endif %}
+            <h2>{{ collection.title | escape }}</h2>
+          </a>
+        </article>
+      {% else %}
+        <p>{{ 'collections.empty' | t }}</p>
+      {% endfor %}
+    </div>
+    {{ paginate | default_pagination }}
+  {% endpaginate %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_list_collections.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,11 @@
+<section class="page">
+  <h1>{{ page.title | escape }}</h1>
+  <div class="rte">{{ page.content }}</div>
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_page.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,17 @@
+<section class="page password">
+  <h1>{{ shop.name | escape }}</h1>
+  {% if shop.password_message != blank %}<div class="rte">{{ shop.password_message }}</div>{% endif %}
+  {% form 'storefront_password' %}
+    {{ form.errors | default_errors }}
+    <label for="StorefrontPassword-{{ section.id }}">{{ 'password.password' | t }}</label>
+    <input id="StorefrontPassword-{{ section.id }}" type="password" name="password" autocomplete="current-password" required>
+    <button type="submit">{{ 'password.enter' | t }}</button>
+  {% endform %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_password.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,25 @@
+<section class="page product">
+  <div class="product__media">
+    {% if product.featured_image %}
+      {{ product.featured_image | image_url: width: 1200 | image_tag: widths: '360, 540, 720, 960, 1200', sizes: '(min-width: 48rem) 50vw, 100vw', alt: product.featured_image.alt | default: product.title }}
+    {% endif %}
+  </div>
+  <div class="product__details">
+    <h1>{{ product.title | escape }}</h1>
+    <p>{{ product.selected_or_first_available_variant.price | money }}</p>
+    {% if product.description != blank %}<div class="rte">{{ product.description }}</div>{% endif %}
+    {% form 'product', product %}
+      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+      <button type="submit" name="add"{% unless product.selected_or_first_available_variant.available %} disabled{% endunless %}>
+        {% if product.selected_or_first_available_variant.available %}{{ 'product.add_to_cart' | t }}{% else %}{{ 'product.sold_out' | t }}{% endif %}
+      </button>
+    {% endform %}
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_product.name",
+  "settings": []
+}
+{% endschema %}

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

@@ -0,0 +1,28 @@
+<section class="page">
+  <h1>{{ 'search.title' | t }}</h1>
+  <form action="{{ routes.search_url }}" method="get" role="search">
+    <label for="SearchInput-{{ section.id }}">{{ 'search.label' | t }}</label>
+    <input id="SearchInput-{{ section.id }}" type="search" name="q" value="{{ search.terms | escape }}">
+    <button type="submit">{{ 'search.submit' | t }}</button>
+  </form>
+  {% if search.performed %}
+    {% paginate search.results by 24 %}
+      <p>{{ 'search.results' | t: count: search.results_count, terms: search.terms }}</p>
+      <ul class="resource-list" role="list">
+        {% for item in search.results %}
+          <li><a href="{{ item.url }}">{{ item.title | escape }}</a></li>
+        {% else %}
+          <li>{{ 'search.empty' | t }}</li>
+        {% endfor %}
+      </ul>
+      {{ paginate | default_pagination }}
+    {% endpaginate %}
+  {% endif %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_search.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/ts/base/snippets/product-card.liquid

@@ -0,0 +1,15 @@
+{% doc %}
+  Renders a product link with its featured image and price.
+
+  @param {product} product - The product to render.
+{% enddoc %}
+
+<article class="card">
+  <a href="{{ product.url }}">
+    {% if product.featured_image %}
+      {{ product.featured_image | image_url: width: 720 | image_tag: loading: 'lazy', widths: '240, 360, 540, 720', sizes: '(min-width: 64rem) 20rem, 50vw', alt: product.featured_image.alt | default: product.title }}
+    {% endif %}
+    <h2>{{ product.title | escape }}</h2>
+  </a>
+  <p>{{ product.price | money }}</p>
+</article>

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

@@ -54,8 +54,81 @@ output {
 }
 
 .hero,
-.not-found {
+.not-found,
+.page {
   margin-inline: auto;
   max-width: 64rem;
   padding: 4rem 1.5rem;
 }
+
+.page > :first-child,
+.card > :first-child {
+  margin-block-start: 0;
+}
+
+.page > :last-child,
+.card > :last-child {
+  margin-block-end: 0;
+}
+
+.resource-grid,
+.resource-list,
+.cart-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+  gap: 1.5rem;
+  padding: 0;
+  list-style: none;
+}
+
+.card img,
+.product__media img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.product {
+  display: grid;
+  gap: 2rem;
+}
+
+form {
+  display: grid;
+  gap: 0.75rem;
+  max-width: 40rem;
+}
+
+input:not([type='hidden']),
+textarea {
+  width: 100%;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0.75rem;
+}
+
+.rte,
+.rte img,
+.rte iframe {
+  max-width: 100%;
+}
+
+.gift-card__balance {
+  font-size: 2rem;
+}
+
+.gift-card__code {
+  display: block;
+  width: fit-content;
+  margin-block: 1rem;
+  border: 1px solid currentColor;
+  padding: 0.75rem;
+}
+
+@media (min-width: 48rem) {
+  .product {
+    grid-template-columns: 1fr 1fr;
+  }
+}

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-article"
+    }
+  },
+  "order": ["main"]
+}

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-blog"
+    }
+  },
+  "order": ["main"]
+}

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-cart"
+    }
+  },
+  "order": ["main"]
+}

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-collection"
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/ts/base/templates/gift_card.liquid

@@ -0,0 +1,35 @@
+{% layout none %}
+
+<!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>{{ gift_card.product.title | default: shop.name | escape }}</title>
+    <style>
+      :root { --theme-background: {{ settings.background }}; --theme-foreground: {{ settings.foreground }}; }
+    </style>
+    {% render 'easel-assets' %}
+    {{ content_for_header }}
+  </head>
+  <body>
+    <main class="page gift-card">
+      <h1>{{ gift_card.product.title | default: shop.name | escape }}</h1>
+      <p class="gift-card__balance">{{ gift_card.balance | money_with_currency }}</p>
+      {% unless gift_card.enabled %}
+        <p>{{ 'gift_card.disabled' | t }}</p>
+      {% endunless %}
+      {% if gift_card.expired %}
+        <p>{{ 'gift_card.expired' | t }}</p>
+      {% elsif gift_card.expires_on %}
+        {% assign expiration_date = gift_card.expires_on | date: format: 'date' %}
+        <p>{{ 'gift_card.expires_on' | t: date: expiration_date }}</p>
+      {% endif %}
+      <p>{{ 'gift_card.code' | t }}</p>
+      <code class="gift-card__code">{{ gift_card.code | format_code }}</code>
+      <a href="{{ shop.url }}">{{ 'gift_card.continue_shopping' | t }}</a>
+    </main>
+  </body>
+</html>

package/dist/templates/ts/base/templates/list-collections.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-list-collections"
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/ts/base/templates/page.contact.json

@@ -0,0 +1,11 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-page"
+    },
+    "form": {
+      "type": "contact-form"
+    }
+  },
+  "order": ["main", "form"]
+}

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

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-page"
+    }
+  },
+  "order": ["main"]
+}

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

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