Updated theme pwa to latest starter

odestry · Aug 29, 2023 · 0689ae5 · 0689ae5
1 parent b6fbb89
commit 0689ae5
Show file tree

Hide file tree

Showing 32 changed files with 165 additions and 157 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,20 +1,6 @@
 name: CI
 on: [push]
 jobs:
-  lhci:
-    name: Lighthouse
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Lighthouse
-        uses: shopify/lighthouse-ci-action@v1.1.1
-        with:
-          store: ${{ secrets.SHOP_STORE }}
-          password: ${{ secrets.SHOP_PASSWORD }}
-          collection_handle: all
-          access_token: ${{ secrets.SHOP_ACCESS_TOKEN }}
-          lhci_github_app_token: ${{ secrets.LHCI_GITHUB_TOKEN }}
-
   theme-check:
     name: Theme Check
     runs-on: ubuntu-latest

diff --git a/assets/styles.css b/assets/styles.css
diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -43,7 +43,7 @@
         "type": "color",
         "id": "application_theme_color",
         "label": "Application color",
-        "default": "#000000"
+        "default": "#1c1c1c"
       },
       {
         "type": "color",

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="canonical" href="{{ canonical_url }}">
 
+    {% if shop.brand.logo != blank %}
+      <link rel="icon" type="image/png" href="{{ shop.brand.logo | image_url: width: 32, height: 32 }}">
+    {% endif %}
+
     {% render 'application' %}
 
     <title>{{ page_title }}</title>
@@ -16,18 +20,31 @@
 
     {% render 'typography' %}
 
-    {{ content_for_header }}
+    {{ 'styles.css' | asset_url | stylesheet_tag }}
 
-    {{ 'styles.css' | asset_url | stylesheet_tag: preload: true }}
+    {{ content_for_header }}
   </head>
   <body class="min-h-screen">
+    <header class="sticky top-0 container mx-auto px-4 flex justify-between items-center py-2 lg:py-4">
+      <a href="{{ routes.root_url }}" class="font-medium text-lg lg:text-xl no-underline">
+        {{ shop.name }}
+      </a>
+      <a href="https://github.com/odestry/theme-pwa" class="text-gray-500 no-underline" target="_blank">
+        View on Github
+      </a>
+    </header>
+
     <main
       id="MainContent"
       class="flex flex-col outline-none"
       tabindex="-1">
       {{ content_for_layout }}
     </main>
 
+    <footer class="container mx-auto px-4 text-gray-400 py-6 lg:py-8">
+      {{ powered_by_link }}
+    </footer>
+
     {% render 'development-screen-indicator' %}
 
     <script>

diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
   "scripts": {
     "dev": "run-p -sr shopify:dev watch",
     "shopify:dev": "shopify theme dev -e development",
-    "pull": "shopify theme pull -d -o sections/*.json templates/*.json config/*.json",
-    "watch": "vite build --watch",
+    "pull": "shopify theme pull -d -o sections/*.json templates/**/*.json config/*.json",
+    "watch": "vite build -w",
     "build": "vite build --minify"
   },
   "devDependencies": {

diff --git a/sections/main-404.liquid b/sections/main-404.liquid
@@ -8,7 +8,7 @@
     </p>
     {% if section.settings.button_label != blank %}
       <a
-        class="inline-flex items-center justify-center px-6 h-11 font-medium rounded-sm text-white bg-black"
+        class="inline-flex items-center justify-center rounded-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 px-8 h-12 text-white bg-black"
         href="{{ routes.root_url }}">
         {{ section.settings.button_label }}
       </a>

diff --git a/sections/main-section.liquid b/sections/main-section.liquid
@@ -1,18 +1,23 @@
-<section class="grid items-center py-12 md:py-16 lg:py-20">
+<section
+  class="grid items-center py-[calc(var(--spacing)*0.75)] lg:py-[--spacing]"
+  style="--spacing: {{ section.settings.spacing }}px">
   <div class="container mx-auto px-4 flex flex-col items-start gap-4 md:gap-5">
-    {% render 'image', class: 'h-[50vh] lg:h-[30rem]', image: section.settings.image %}
+    {% liquid
+      assign image = section.settings.image | default: page_image
+      render 'image' with image, class: 'aspect-square md:aspect-auto lg:h-[30rem]', preload: true
+    %}
     <h1 class="max-w-xl scroll-m-20 text-4xl font-medium tracking-tight lg:text-5xl">
       {{ section.settings.heading }}
     </h1>
     <p class="max-w-prose text-xl text-gray-500">
       {{ section.settings.text }}
     </p>
-    {% if section.settings.label != blank %}
+    {% if section.settings.button_label != blank %}
       <button
         type="button"
-        class="inline-flex items-center justify-center px-6 h-11 font-medium rounded-sm text-white bg-black [.no-js_&]:hidden application-button">
-        {{ section.settings.label }}
-      </a>
+        class="inline-flex items-center justify-center rounded-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 px-8 h-12 text-white bg-black application-button">
+        {{ section.settings.button_label }}
+      </button>
     {% endif %}
   </div>
 </section>
@@ -40,9 +45,24 @@
     },
     {
       "type": "text",
-      "id": "label",
+      "id": "button_label",
       "label": "Button Label",
       "default": "Install Application"
+    },
+    {
+      "type": "range",
+      "id": "spacing",
+      "min": 0,
+      "max": 80,
+      "step": 4,
+      "unit": "px",
+      "label": "Vertical Spacing",
+      "default": 16
+    }
+  ],
+  "presets": [
+    {
+      "name": "Main Section"
     }
   ]
 }

diff --git a/snippets/application.liquid b/snippets/application.liquid
@@ -19,8 +19,6 @@
 
   <link rel="manifest" href="{{ 'manifest.json' | asset_url }}" type="application/json">
 
-  {% comment %} {% assign service_worker_url = shop.domain | append: '/cdn/shop/t/70/assets/' | append: 'service-worker.js' | prepend: 'https://' %} {% endcomment %}
-
   {% unless request.design_mode %}
     <script>
       if ('serviceWorker' in navigator) {

diff --git a/snippets/image.liquid b/snippets/image.liquid
@@ -1,9 +1,9 @@
 {% comment %}theme-check-disable ImgLazyLoading, RemoteAsset{% endcomment %}
 {% comment %}
-  Renders a specific image.
+  Renders an image tag with all necessary attributes.
 
   Accepts:
-    - image: {object} Image object (required)
+    - image: {object} Image object (optional)
     - class: {string} Extra classes (optional)
     - lazyload: {boolean} Lazyload the image (optional) (default: false)
     - alt: {string} Custom image ALT (optional) (default: image.alt)
@@ -14,45 +14,47 @@
 {% endcomment %}
 
 {% liquid
-  assign image_class = 'aspect-auto h-auto w-full rounded-sm object-cover ' | append: class
+  assign class = 'aspect-auto h-auto w-full object-cover rounded-sm ' | append: class
   assign alt = alt | default: image.alt | escape
 
+  assign lazyload = lazyload | default: false
+
   assign priority = 'auto'
   assign decoding = 'auto'
 
-  if lazyload == false or lazyload == null
-    assign loading = 'eager'
-    assign priority = 'high'
-  elsif lazyload == true
+  if lazyload
     assign loading = 'lazy'
     assign decoding = 'async'
+  else
+    assign loading = 'eager'
+    assign priority = 'high'
   endif
 %}
 
-<picture class="{{ image_class }}">
+<picture class="{{ class }}">
   {% if image and image != blank %}
     {{
       image
       | image_url: width: image.width
       | image_tag:
-        alt: image_alt,
-        class: image_class,
-        widths: '200,300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200',
+        alt: alt,
+        class: class,
+        widths: '100,200,300,400,500,600,700,800,1000,1200,1400,1600,1800,2000',
         loading: loading,
         fetchpriority: priority,
         decoding: decoding
     }}
   {% else %}
     {% liquid
-      assign placeholder_name = placeholder | default: 'hero-apparel-1'
-      assign placeholder_image = placeholder_name | placeholder_svg_tag | base64_encode | prepend: 'data:image/svg+xml;base64,'
+      assign placeholder = placeholder | default: 'hero-apparel-1'
+      assign placeholder_image = placeholder | placeholder_svg_tag | base64_encode | prepend: 'data:image/svg+xml;base64,'
     %}
 
     <img
       role="presentation"
-      class="{{ image_class }}"
+      class="{{ class }}"
       src="{{ placeholder_image }}"
-      alt="{{ placeholder_name }}"
+      alt="{{ placeholder }}"
       width="800"
       height="800"
       loading="{{ loading }}"

diff --git a/snippets/typography.liquid b/snippets/typography.liquid
@@ -1,52 +1,48 @@
 {% comment %}theme-check-disable AssetPreload{% endcomment %}
 {% comment %}
-  Renders typography variables and tokens.
+  Renders typography styles and preloads fonts.
 
   Usage:
     {% render 'typography' %}
 {% endcomment %}
 
 {% comment %} We check if its a system font, or a web-safe font {% endcomment %}
-{% unless settings.enable_custom_font %}
-  {% unless settings.font_heading.system? %}
-    <link rel="preload" href="{{ settings.font_heading | font_url }}" type="font/woff2" as="font" fetchpriority="high" crossorigin>
-  {% endunless %}
+{% unless settings.font_heading.system? %}
+  <link rel="preload" href="{{ settings.font_heading | font_url }}" type="font/woff2" as="font" fetchpriority="high" crossorigin>
+{% endunless %}
 
-  {% unless settings.font_body.system? %}
-    <link rel="preload" href="{{ settings.font_body | font_url }}" type="font/woff2" as="font" fetchpriority="high" crossorigin>
-  {% endunless %}
+{% unless settings.font_body.system? %}
+  <link rel="preload" href="{{ settings.font_body | font_url }}" type="font/woff2" as="font" fetchpriority="high" crossorigin>
 {% endunless %}
 
 {% style %}
-  {% unless settings.enable_custom_font %}
-    {% unless settings.font_heading.system? %}
-      {% liquid
-        assign font_heading_medium = settings.font_heading | font_modify: 'weight', '500'
-        assign font_heading_semi_bold = settings.font_heading | font_modify: 'weight', '600'
-        assign font_heading_bold = settings.font_heading | font_modify: 'weight', 'bold'
-        assign font_heading_bold_italic = font_heading_bold | font_modify: 'style', 'italic'
-      %}
+  {% unless settings.font_heading.system? %}
+    {% liquid
+      assign font_heading_medium = settings.font_heading | font_modify: 'weight', '500'
+      assign font_heading_semi_bold = settings.font_heading | font_modify: 'weight', '600'
+      assign font_heading_bold = settings.font_heading | font_modify: 'weight', 'bold'
+      assign font_heading_bold_italic = font_heading_bold | font_modify: 'style', 'italic'
+    %}
 
-      {{ settings.font_heading | font_face: font_display: 'swap' }}
-      {{ font_heading_medium | font_face: font_display: 'swap' }}
-      {{ font_heading_semi_bold | font_face: font_display: 'swap' }}
-      {{ font_heading_bold | font_face: font_display: 'swap' }}
-      {{ font_heading_bold_italic | font_face: font_display: 'swap' }}
-    {% endunless %}
+    {{ settings.font_heading | font_face: font_display: 'swap' }}
+    {{ font_heading_medium | font_face: font_display: 'swap' }}
+    {{ font_heading_semi_bold | font_face: font_display: 'swap' }}
+    {{ font_heading_bold | font_face: font_display: 'swap' }}
+    {{ font_heading_bold_italic | font_face: font_display: 'swap' }}
+  {% endunless %}
 
-    {% unless settings.font_body.system? %}
-      {% liquid
-        assign font_body_semi_bold = settings.font_body | font_modify: 'weight', '500'
-        assign font_body_bold = settings.font_body | font_modify: 'weight', 'bold'
-        assign font_body_italic = font_body | font_modify: 'style', 'italic'
-        assign font_body_bold_italic = font_body_bold | font_modify: 'style', 'italic'
-      %}
+  {% unless settings.font_body.system? %}
+    {% liquid
+      assign font_body_semi_bold = settings.font_body | font_modify: 'weight', '500'
+      assign font_body_bold = settings.font_body | font_modify: 'weight', 'bold'
+      assign font_body_italic = settings.font_body | font_modify: 'style', 'italic'
+      assign font_body_bold_italic = font_body_bold | font_modify: 'style', 'italic'
+    %}
 
-      {{ settings.font_body | font_face: font_display: 'swap' }}
-      {{ font_body_semi_bold | font_face: font_display: 'swap' }}
-      {{ font_body_bold | font_face: font_display: 'swap' }}
-      {{ font_body_italic | font_face: font_display: 'swap' }}
-      {{ font_body_bold_italic | font_face: font_display: 'swap' }}
-    {% endunless %}
+    {{ settings.font_body | font_face: font_display: 'swap' }}
+    {{ font_body_semi_bold | font_face: font_display: 'swap' }}
+    {{ font_body_bold | font_face: font_display: 'swap' }}
+    {{ font_body_italic | font_face: font_display: 'swap' }}
+    {{ font_body_bold_italic | font_face: font_display: 'swap' }}
   {% endunless %}
 {% endstyle %}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    text-size-adjust: 100%;
+    text-rendering: optimizeLegibility;
+    font-variant-ligatures: none;
+  }
+
+  details > summary {
+    @apply list-none;
+  }
+
+  details summary::-webkit-details-marker {
+    @apply hidden;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss'
 
 export default {
-  content: ['./**/*.{liquid,json,js}'],
+  content: ['./*/*.{liquid,json,js}'],
   theme: {},
   plugins: []
 } satisfies Config
diff --git a/templates/404.json b/templates/404.json
@@ -1,12 +1,10 @@
 {
   "sections": {
     "main": {
-      "type": "main-404",
-      "settings": {
-      }
+      "type": "main-404"
     }
   },
   "order": [
     "main"
   ]
-}
+}
diff --git a/templates/article.json b/templates/article.json
@@ -1,12 +1,10 @@
 {
   "sections": {
     "main": {
-      "type": "main-404",
-      "settings": {
-      }
+      "type": "main-404"
     }
   },
   "order": [
     "main"
   ]
-}
+}
diff --git a/templates/blog.json b/templates/blog.json
@@ -1,12 +1,10 @@
 {
   "sections": {
     "main": {
-      "type": "main-404",
-      "settings": {
-      }
+      "type": "main-404"
     }
   },
   "order": [
     "main"
   ]
-}
+}