Merge pull request #1 from Shopify/main

Dawn - New Updates 2024

.github/CONTRIBUTING.md

@@ -32,7 +32,7 @@ Before contributing to Dawn, please read the following theme code principles to
 
 ### Why these principles?
 
-Browsers provide APIs to solve many problems: from [WebGL](https://en.wikipedia.org/wiki/WebGL) and [WASM](https://en.wikipedia.org/wiki/WebAssembly)-powered apps to static websites. The best APIs to use depends on the thing you’re building. Themes power ecommerce websites. In most cases, [Web-native](https://docs.google.com/document/d/11c0EpBmzIPiNrt8hHFz3pnTmEfC7vsC4kktZFoPhhPI/edit#heading=h.fdenrwz0rwne) is a perfect fit for ecommerce websites. Ecommerce needs incredibly fast websites for mostly “logged out” traffic.
+Browsers provide APIs to solve many problems: from [WebGL](https://en.wikipedia.org/wiki/WebGL) and [WASM](https://en.wikipedia.org/wiki/WebAssembly)-powered apps to static websites. The best APIs to use depends on the thing you’re building. Themes power ecommerce websites. In most cases, _Web-native_—making the most of the built-in features of browsers: HTTP, HTML, CSS, JavaScript, and the DOM—is a perfect fit for ecommerce websites. Ecommerce needs incredibly fast websites for mostly “logged out” traffic.
 
 ### Web-native in its purest form
 
@@ -63,16 +63,6 @@ We relentlessly and continuously optimize code within the constraint of being We
 
 Themes must be built with purpose. They shouldn’t support each and every feature in Shopify.
 
-### JavaScript not required, fails gracefully
-
-_NoJS is our baseline._
-
-We extract every bit of speed and functionality out of HTTP, semantic HTML, and CSS before writing our first line of JavaScript.
-
-JavaScript can only be used to progressively enhance features. JavaScript cannot be required to find or purchase products. And the little JavaScript that we use must always fail gracefully, such that every browser gets the most “enhanced” experience that it can within the capabilities that it has.
-
->:information_source: We do so not because we expect buyers to experience our storefronts with JavaScript disabled, but because it keeps us aligned with the other principles: writing fast, server-rendered, Web-native code.
-
 ### Server-rendered
 
 _Our main constraint._
@@ -93,7 +83,7 @@ And since legacy browsers are often the slowest, we don’t burden them with pol
 
 You can follow these steps to go from setting up a store to creating a pull request for Dawn.
 
->:information_source: We'll assume you're already set up with Git and GitHub (if you're not familiar with these, [start with these docs](https://docs.github.com/en/github/getting-started-with-github/quickstart/set-up-git)).
+>:information_source: We'll assume you're already set up with Git and GitHub (if you're not familiar with these, [start with these docs](https://docs.github.com/github/getting-started-with-github/quickstart/set-up-git)).
 
 1. Set up a [development store](https://shopify.dev/themes/tools/development-stores) so you can test your code changes (assuming you don't already have a store).
 2. Install the [Shopify CLI](https://github.com/Shopify/shopify-cli) by following [these steps](https://shopify.dev/themes/tools/cli/installation).
@@ -156,6 +146,6 @@ When you open a pull request, you must fill out the "Ready for review" template
 
 ### Suggested changes
 
-We may ask for changes to be made before a PR can be merged, either using [suggested changes](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/incorporating-feedback-in-your-pull-request) or pull request comments. You can apply suggested changes directly through the UI. You can make any other changes in your fork, then commit them to your branch.
+We may ask for changes to be made before a PR can be merged, either using [suggested changes](https://docs.github.com/github/collaborating-with-issues-and-pull-requests/incorporating-feedback-in-your-pull-request) or pull request comments. You can apply suggested changes directly through the UI. You can make any other changes in your fork, then commit them to your branch.
 
-As you update your PR and apply changes, mark each conversation as [resolved](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/commenting-on-a-pull-request#resolving-conversations).
+As you update your PR and apply changes, mark each conversation as [resolved](https://docs.github.com/github/collaborating-with-issues-and-pull-requests/commenting-on-a-pull-request#resolving-conversations).

.github/ISSUE_TEMPLATE/Bug_issue.md

@@ -1,20 +1,24 @@
 ---
-name: Bug issue
+name: Bug report
 about: Use this template for reporting a bug
-labels: 'type:bug'
-
+labels: bug
 ---
 
-**Describe the current behavior**
+## Describe the current behavior
+
+
+## Describe the expected behavior
+
+
+## Version information (Dawn, browsers and operating systems)
+
+- Dawn Version: 7.0.1
+- Chrome Version 108.0.5359.124
+- macOS Version 13.1
 
-**Describe the expected behavior**
+## Possible solution
 
-**Version information (Dawn, browsers and operating systems)**
-- Dawn Version: 1.0.0
-- Chrome Version 91.0.4472.114
-- macOS Version 11.3.1
 
-**Possible solution**
+## Additional context/screenshots
+<!-- Add any other context about the problem here. If applicable, add screenshots to help explain. -->
 
-**Additional context/screenshots**
-Add any other context about the problem here. If applicable, add screenshots to help explain.

.github/ISSUE_TEMPLATE/Feature_request.md

@@ -1,15 +1,17 @@
 ---
-name: "Feature request"
-about: "Use this template for suggesting a Dawn enhancement"
-labels: 'i: enhancement'
-
+name: Feature request
+about: Use this template for suggesting a Dawn enhancement
+labels: enhancement
 ---
 
-**Describe the enhancement you'd like**
-A clear and concise description of what you want added to Dawn. Add any considered drawbacks.
+## Describe the enhancement you'd like
+<!-- A clear and concise description of what you want added to Dawn. Add any considered drawbacks. -->
+
+
+## Describe alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
 
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+## Additional context/screenshots
+<!-- Maybe a screenshot or design? -->
 
-**Additional context/screenshots**
-Maybe a screenshot or design?

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,17 +1,41 @@
-**Why are these changes introduced?**
+### PR Summary: 
+
+<!-- Please include a short description (using non-technical terms, 1-2 sentences) about the changes you are introducing, what problem is being fixed and/or describe the benefit to merchants. This content will be used in our release notes for Dawn on [themes.shopify.com](https://themes.shopify.com/themes/dawn/styles/default#ReleaseNotes). -->
+
+
+### Why are these changes introduced?
 
 Fixes #0.
 
-**What approach did you take?**
+### What approach did you take?
+
+### Other considerations
+
+### Decision log
+
+| # | Decision | Alternatives | Rationale | Downsides |
+|---|---|---|---|---|
+| 1 |   |   |   |   |
+
+
+### Visual impact on existing themes
+<!-- How will this visually affect merchants who upgrade to a new theme version with this change? -->
+
 
-**Other considerations**
+### Testing steps/scenarios
+<!-- List all the testing tasks that applies to your fix to help peers review your work. -->
+- [ ] Step 1
 
-**Demo links**
+### Demo links
+<!-- Please include a link to a demo store that includes preconfigured sections and settings to allow reviewers to easily test the features you are working on. -->
 
 - [Store](url)
 - [Editor](url)
 
-**Checklist**
+### Checklist
+- [ ] Added PR summary for [release notes](https://themes.shopify.com/themes/dawn/styles/default#ReleaseNotes)
+- [ ] Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
+- [ ] Created a ticket for the [help.shopify.com](https://help.shopify.com) documentation team about updates to theme settings. (Internal-only task)
 - [ ] Followed [theme code principles](https://github.com/Shopify/dawn/blob/main/.github/CONTRIBUTING.md#theme-code-principles)
 - [ ] Linted with [Theme Check](https://github.com/Shopify/theme-check)
 - [ ] Tested on [mobile](https://shopify.dev/themes/store/requirements#mobile-browser-requirements)

.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/lighthouse-ci-action@v1
+        with:
+          store: ${{ secrets.SHOP_STORE_OS2 }}
+          password: ${{ secrets.SHOP_PASSWORD_OS2 }}
+          access_token: ${{ secrets.SHOP_ACCESS_TOKEN }}
+          collection_handle: all
+          lhci_github_app_token: ${{ secrets.LHCI_GITHUB_TOKEN }}
+          pull_theme: ${{ secrets.SHOP_PULL_THEME }}
+  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 }}

.github/workflows/cla.yml

@@ -0,0 +1,22 @@
+name: Contributor License Agreement (CLA)
+
+on:
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+  issue_comment:
+    types: [created]
+
+jobs:
+  cla:
+    runs-on: ubuntu-latest
+    if: |
+      (github.event.issue.pull_request 
+        && !github.event.issue.pull_request.merged_at
+        && contains(github.event.comment.body, 'signed')
+      ) 
+      || (github.event.pull_request && !github.event.pull_request.merged)
+    steps:
+      - uses: Shopify/shopify-cla-action@v1
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          cla-token: ${{ secrets.CLA_TOKEN }}

.prettierrc.json

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

.theme-check.yml

@@ -1,2 +1,4 @@
 MatchingTranslations:
   enabled: false
+TemplateLength:
+  enabled: false

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["shopify.theme-check-vscode"]
+  "recommendations": ["shopify.theme-check-vscode", "esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "editor.formatOnSave": false,
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.formatOnSave": true
+  },
+  "[liquid]": {
+    "editor.defaultFormatter": "Shopify.theme-check-vscode",
+    "editor.formatOnSave": true
+  },
+  "themeCheck.checkOnSave": true
+}

README.md

@@ -1,7 +1,7 @@
 # Dawn
 
-[![Build status](https://github.com/shopify/dawn/actions/workflows/lighthouse-ci.yml/badge.svg?branch=main)](https://github.com/Shopify/dawn/actions/workflows/lighthouse-ci.yml?query=branch%3Amain)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=informational)](/CONTRIBUTING.md)
+[![Build status](https://github.com/shopify/dawn/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/Shopify/dawn/actions/workflows/ci.yml?query=branch%3Amain)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=informational)](/.github/CONTRIBUTING.md)
 
 [Getting started](#getting-started) |
 [Staying up to date with Dawn changes](#staying-up-to-date-with-dawn-changes) |
@@ -15,26 +15,17 @@ Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme develo
 
 * **Web-native in its purest form:** Themes run on the [evergreen web](https://www.w3.org/2001/tag/doc/evergreen-web/). We leverage the latest web browsers to their fullest, while maintaining support for the older ones through progressive enhancement—not polyfills.
 * **Lean, fast, and reliable:** Functionality and design defaults to “no” until it meets this requirement. Code ships on quality. Themes must be built with purpose. They shouldn’t support each and every feature in Shopify.
-* **JavaScript not required, fails gracefully:** We extract every bit of speed and functionality out of HTTP, semantic HTML, and CSS before writing our first line of JavaScript. JavaScript can only be used to progressively enhance features.
 * **Server-rendered:** HTML must be rendered by Shopify servers using Liquid. Business logic and platform primitives such as translations and money formatting don’t belong on the client. Async and on-demand rendering of parts of the page is OK, but we do it sparingly as a progressive enhancement.
 * **Functional, not pixel-perfect:** The Web doesn’t require each page to be rendered pixel-perfect by each browser engine. Using semantic markup, progressive enhancement, and clever design, we ensure that themes remain functional regardless of the browser.
 
 You can find a more detailed version of our theme code principles in the [contribution guide](https://github.com/Shopify/dawn/blob/main/.github/CONTRIBUTING.md#theme-code-principles).
 
 ## Getting started
+We recommend using Dawn as a starting point for theme development. [Learn more on Shopify.dev](https://shopify.dev/themes/getting-started/create).
 
-1. Fork the repository and clone it:
-```sh
-git clone git@github.com:your-username/dawn.git
-cd dawn
-```
-2. Install the [Shopify CLI](https://github.com/Shopify/shopify-cli) by following [these steps](https://shopify.dev/themes/tools/cli/installation).
-3. Launch a development server in the `dawn/` folder:
-```sh
-shopify theme serve
-```
+> If you're building a theme for the Shopify Theme Store, then you can use Dawn as a starting point. However, the theme that you submit needs to be [substantively different from Dawn](https://shopify.dev/themes/store/requirements#uniqueness) so that it provides added value for merchants. Learn about the [ways that you can use Dawn](https://shopify.dev/themes/tools/dawn#ways-to-use-dawn).
 
->:information_source: You'll need access to a Shopify store in order to get started with theme development. If you don't already have one, you can set up a [development store](https://shopify.dev/themes/tools/development-stores).
+Please note that the main branch may include code for features not yet released. The "stable" version of Dawn is available in the theme store.
 
 ## Staying up to date with Dawn changes
 
@@ -63,21 +54,31 @@ There are a number of really useful tools that the Shopify Themes team uses duri
 
 [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.
+You can follow this [quick start guide for theme developers](https://shopify.dev/docs/themes/tools/cli) to get started.
 
 ### Theme Check
 
 We recommend using [Theme Check](https://github.com/shopify/theme-check) as a way to validate and lint your Shopify themes.
 
-We've added Theme Check to Dawn's [list of VS Code extensions](https://github.com/Shopify/dawn/blob/update-README/.vscode/extensions.json) so if you're using Visual Studio Code as your code editor of choice, you'll be prompted to install the [Theme Check VS Code](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) extension upon opening VS Code after you've forked and cloned Dawn.
+We've added Theme Check to Dawn's [list of VS Code extensions](/.vscode/extensions.json) so if you're using Visual Studio Code as your code editor of choice, you'll be prompted to install the [Theme Check VS Code](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) extension upon opening VS Code after you've forked and cloned Dawn.
+
+You can also run it from a terminal with the following Shopify CLI command:
+
+```bash
+shopify theme check
+```
+
+### Continuous Integration
+
+Dawn uses [GitHub Actions](https://github.com/features/actions) to maintain the quality of the theme. [This is a starting point](https://github.com/Shopify/dawn/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!
 
-Theme Check is included as part of [Dawn's GitHub Actions](https://github.com/Shopify/dawn/tree/main/.github/workflows) and can also be run via Shopify CLI's `shopify theme check` command.
+#### Shopify/lighthouse-ci-action
 
-### 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.
 
-We love performant 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 for every commmit to ensure code that gets added doesn't degrade storefront performance over time.
+#### Shopify/theme-check-action
 
-Dawn uses [GitHub Actions](https://github.com/features/actions) to run Shopify/lighthouse-ci-action for every commit. [This is a starting point](https://github.com/Shopify/dawn/blob/main/.github/workflows/lighthouse-ci.yml) and what we suggest to use in order to ensure you're building better themes. Feel free to build off of it!
+Dawn runs [Theme Check](#Theme-Check) on every commit via [Shopify/theme-check-action](https://github.com/Shopify/theme-check-action).
 
 ## Contributing