First commit

.editorconfig

@@ -0,0 +1,9 @@
+# http://editorconfig.org/
+root = true
+
+[*]
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+on: [push]
+jobs:
+ lhci:
+ name: Lighthouse
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - name: Lighthouse
+ uses: shopify/[email protected]
+ 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
+ steps:
+ - uses: actions/checkout@v3
+ - name: Theme Check
+ uses: shopify/theme-check-action@v1
+ with:
+ token: ${{ github.token }}

.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+# Editor directories and files
+.idea
+dist
+
+# Misc
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+logs
+*.log
+.env

.prettierrc.json

@@ -0,0 +1,15 @@
+{
+ "printWidth": 120,
+ "singleQuote": true,
+ "overrides": [
+ {
+ "files": "*.liquid",
+ "options": {
+ "singleQuote": false,
+ "singleLineLinkTags": true,
+ "liquidSingleQuote": true,
+ "bracketSameLine": true
+ }
+ }
+ ]
+}

.shopifyignore

@@ -0,0 +1,11 @@
+# See https://shopify.dev/themes/tools/cli#excluding-files-from-shopify-cli for more about ignoring files while using Shopify CLI
+
+.DS_Store
+.DS_Store?
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+node_modules
+package.json
+package-lock.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Odestry <https://github.com/odestry>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,92 @@
+# theme-name
+
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&colorA=338fbb&colorB=1c1c1c&logoColor=ffffff)](https://github.com/odestry/contribute)
+[![Discord Shield](https://img.shields.io/discord/983602196493004820?style=flat&colorA=338fbb&colorB=1c1c1c&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/blanklob-community-983602196493004820)
+
+[Usage](#usage) |
+[Tools](#tools) |
+[Contributing](#contributing) |
+[License](#license)
+
+An opinionated lightweight theme starter for all projects.
+
+## Usage
+
+To get started clone the template by clicking the **Use this template** button or by running the following command:
+
+```bash
+git clone https://github.com/odestry/theme-starter.git
+```
+
+### Running the development server
+
+To run the development server, you'll need to have [Shopify CLI](#shopify-cli) as well as [Node.js](https://nodejs.org) installed on your machine.
+
+1. Install the dependencies
+
+```bash
+npm install
+```
+
+2. Connect to your store
+
+To connect your store update the `shopify.theme.toml` file with your store's information.
+
+```toml
+[environments.development]
+store = "john-apparel.myshopify.com"
+```
+
+3. Start the development server
+
+```bash
+npm run dev
+```
+
+After authenticating, this will start a local development server running at `https://localhost:9292` that you can use to preview your changes.
+
+## Tools
+
+There are a number of really useful tools that the Shopify Themes team uses during development. This theme is already set up to work with these tools.
+
+### Shopify CLI
+
+[Shopify CLI](https://github.com/Shopify/shopify-cli) helps you build Shopify themes faster and is used to automate and enhance your local development workflow. It comes bundled with a suite of commands for developing Shopify themes—everything from working with themes on a Shopify store (e.g. creating, publishing, deleting themes) or launching a development server for local theme development.
+
+You can follow this [quick start guide for theme developers](https://github.com/Shopify/shopify-cli#quick-start-guide-for-theme-developers) to get started.
+
+### Tailwind CSS
+
+[Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework for rapidly building custom storefront interfaces. It's a great way to build Shopify themes and sections quickly. You can find the configuration file at `tailwind.config.ts`. We use Vite to compile Tailwind CSS.
+
+### Theme Check
+
+We recommend using [Theme Check](https://github.com/shopify/theme-check) as a way to validate and lint your Shopify themes.
+
+Theme Check is a command line tool that runs a series of tests against your theme code to surface errors, deprecations, and potential bugs. It's a great way to ensure your theme is up to date with the latest best practices and that you're not using any deprecated Liquid or JSON fields.
+
+You can also run it from a terminal with the following Shopify CLI command:
+
+```bash
+shopify theme check
+```
+
+### Continuous Integration
+
+This theme uses [GitHub Actions](https://github.com/features/actions) to maintain the quality of the theme. [This is a starting point](https://github.com/odestry/theme-starter/blob/main/.github/workflows/ci.yml) and what we suggest to use in order to ensure you're building better themes. Feel free to build off of it!
+
+#### Shopify/lighthouse-ci-action
+
+We love fast websites! Which is why we created [Shopify/lighthouse-ci-action](https://github.com/Shopify/lighthouse-ci-action). This runs a series of [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) audits for the home, product and collections pages on a store to ensure code that gets added doesn't degrade storefront performance over time.
+
+#### Shopify/theme-check-action
+
+This theme runs [Theme Check](https://github.com/Shopify/theme-check-action) on every commit via [Shopify/theme-check-action](https://github.com/Shopify/theme-check-action).
+
+## Contributing
+
+We'd love your help! Please read our [contributing guide](https://github.com/odestry/contribute) to learn about our development process, how to propose bug fixes and improvements.
+
+## License
+
+Copyright (c) 2023-present Odestry. See [LICENSE](/LICENSE.md) for further details.

assets/manifest.json.liquid

@@ -0,0 +1,119 @@
+{
+ "short_name": {{ settings.application_name | json }},
+ "name": {{ settings.application_name | json }},
+ "description": {{ settings.application_name | json }},
+ "categories": ["shopping"],
+ {% if settings.application_theme_color != blank %}
+ "theme_color": {{ settings.application_theme_color | json }},
+ {% endif %}
+ {% if settings.application_background_color != blank %}
+ "background_color": {{ settings.application_background_color | json }},
+ {% endif %}
+ "display": "standalone",
+ "orientation": "any",
+ "dir": "auto",
+ {% if settings.application_icon != blank %}
+ "icons": [
+ {% if settings.application_maskable_icon != blank %}
+ {
+ "src": {{ settings.application_icon | image_url: width: 48, height: 48 | json }},
+ "sizes": "48x48",
+ "purpose": "maskable"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 72, height: 72 | json }},
+ "sizes": "72x72",
+ "purpose": "maskable"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 96, height: 96 | json }},
+ "sizes": "96x96",
+ "purpose": "maskable"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 144, height: 144 | json }},
+ "sizes": "144x144",
+ "purpose": "maskable"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 168, height: 168 | json }},
+ "sizes": "168x168",
+ "purpose": "maskable"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 192, height: 192 | json }},
+ "sizes": "192x192",
+ "purpose": "maskable"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 256, height: 256 | json }},
+ "sizes": "256x256",
+ "purpose": "maskable"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 512, height: 512 | json }},
+ "sizes": "512x512",
+ "purpose": "maskable"
+ },
+ {% endif %}
+ {
+ "src": {{ settings.application_icon | image_url: width: 48, height: 48 | json }},
+ "sizes": "48x48"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 72, height: 72 | json }},
+ "sizes": "72x72"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 96, height: 96 | json }},
+ "sizes": "96x96"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 144, height: 144 | json }},
+ "sizes": "144x144"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 168, height: 168 | json }},
+ "sizes": "168x168"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 192, height: 192 | json }},
+ "sizes": "192x192"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 256, height: 256 | json }},
+ "sizes": "256x256"
+ },
+ {
+ "src": {{ settings.application_icon | image_url: width: 512, height: 512 | json }},
+ "sizes": "512x512"
+ }
+ ],
+ {% endif %}
+ "related_applications": [
+ {
+ "platform": "webapp",
+ "url": {{ 'manifest.json' | asset_url | prepend: 'https:' | json }}
+ }
+ ],
+ "shortcuts" : [
+ {% if settings.application_shortcut_name and settings.application_shortcut_link %}
+ {
+ "name": {{ settings.application_shortcut_name | json }},
+ "short_name": {{ settings.application_shortcut_name | json }},
+ {% if settings.application_shortcut_icon != blank %}
+ "icons": [
+ {
+ "src": {{ settings.application_shortcut_icon | image_url: width: 512, height: 512 | json }},
+ "sizes": "512x512"
+ }
+ ],
+ {% endif %}
+ "url": {{ settings.application_shortcut_link | append: '/?utm_source=homescreen' | json }}
+ }
+ {% endif %}
+ ],
+ "start_url": "/?utm_source=pwa",
+ "scope": "/",
+ "id": "/?utm_source=pwa"
+}

assets/service-worker.js

@@ -0,0 +1,68 @@
+// Define a name for our cache
+const CACHE_NAME = 'v1_cache';
+
+const urlsToCache = [
+ '/',
+ // Add more URLs and assets that you want to cache...
+];
+
+// Installation event. This is triggered as soon as the worker executes,
+// and it's only called once per service worker. This is the perfect time
+// to cache our static assets.
+self.addEventListener('install', event => {
+ event.waitUntil(
+ // Open the cache
+ caches.open(CACHE_NAME)
+ .then((cache) => {
+ // Add all URLs to the cache
+ return cache.addAll(urlsToCache)
+ .then(() => {
+ // Skip waiting forces the waiting service worker to become the active service worker.
+ self.skipWaiting()
+ });
+ })
+ // If something went wrong with the cache, log it.
+ .catch(error => console.log('Failed to cache', error))
+ );
+});
+
+// Activate event. This is a good time to clean up old caches.
+self.addEventListener('activate', event => {
+ const cacheWhitelist = [CACHE_NAME];
+
+ event.waitUntil(
+ // Get all cache keys (cache names)
+ caches.keys()
+ .then(cacheNames => {
+ // Return a single promise that resolves when all old caches are deleted.
+ return Promise.all(
+ cacheNames.map(cacheName => {
+ // If this cache name isn't present in the whitelist, delete it.
+ if (cacheWhitelist.indexOf(cacheName) === -1) {
+ return caches.delete(cacheName);
+ }
+ })
+ );
+ })
+ .then(() => {
+ // Enables the newly installed service worker to take control of the page
+ // and start handling fetch events.
+ self.clients.claim()
+ })
+ );
+});
+
+// Fetch event. This triggers every time a page controlled by this service worker makes a request.
+self.addEventListener('fetch', event => {
+ event.respondWith(
+ // Check if the request is for something we have in our cache
+ caches.match(event.request)
+ .then(response => {
+ // If the response is in the cache, return it, else fetch it from the network.
+ if (response) {
+ return response;
+ }
+ return fetch(event.request);
+ })
+ );
+});