added esbuild, updated readme

README.md

@@ -7,7 +7,7 @@ A blank slate theme for Shopify 2.0 with Tailwind CSS
 ## Demo
 - [Live demo](https://human-dev.myshopify.com/) (Password: `tacos`)
 - Tailwind components demo (`sections/demo-css.liquid`)
-- Richtext demo (`sections/css-richtext.liquid`)
+- Richtext demo (`sections/demo-richtext.liquid`)
 
 ## Global Settings
 Configured in `config/settings_schema.json` and defined as CSS custom properties in `assets/root.css.liquid`.
@@ -25,11 +25,6 @@ Danshari is a minimally styled theme. However, the following pages are applied d
 - Blog page & Articles
 - Search results page
 
-## Tailwind CSS
-Run Yarn scripts to watch/build Tailwind CSS
-- Watch: `yarn css:watch`
-- Build: `yarn css:build`
-
 ## Media Queries
 Use VS Code snippets (defined in `.vscode/danshari.code-snippets`) and Tailwind screen utilities.
 

assets/predictive-search.min.js

@@ -1 +1,50 @@
-let searchForms=document.querySelectorAll("form.search-form");for(let o of searchForms){let t=o.querySelector('input[name="q"]'),e=o.querySelector(".search-suggestions"),s=document.querySelector("#suggestion-group-template"),i=document.querySelector("#suggestion-item-template");t.addEventListener("keyup",delayAfterKeyup(async g=>{let l=await getSuggestions(g.target.value);e.innerHTML="",e.dataset.query=g.target.value;for(const[m,a]of Object.entries(l))if(a.length){let u=s.content.cloneNode(!0);u.querySelector(".suggestion-group-title").textContent=m,a.map(r=>{let n=i.content.cloneNode(!0);if(n.querySelector(".suggestion-item-url").href=r.url,n.querySelector(".suggestion-item-title").textContent=r.title,!!r.featuredImage||!!r.image){let c=n.querySelector(".suggestion-item-img img");c.src=resizeImg(r.image||r.featuredImage,"100x100"),c.alt=r.featuredImage?r.featuredImage.alt:r.title}u.querySelector(".suggestion-group-list").appendChild(n)}),e.appendChild(u)}},window.predictiveSearchOptions.keyUpDelay))}async function getSuggestions(o){let t=new URLSearchParams;const{resources:e}=window.predictiveSearchOptions;t.set("q",o),t.set("resources[type]",e.type),t.set("resources[limit]",e.limit);let s=await fetch("/search/suggest.json?"+t.toString());return!!s.ok&&(await s.json()).resources.results}function resizeImg(o,t){const[e,s,i]=o.split(/\.(png|jpg|gif)/g);return`${e}_${t}.${s}${i}`}function delayAfterKeyup(o,t){let e=0;return function(...s){clearTimeout(e),e=setTimeout(o.bind(this,...s),t||0)}}
+let searchForms = document.querySelectorAll("form.search-form");
+for (let searchForm of searchForms) {
+  let searchFormInput = searchForm.querySelector('input[name="q"]');
+  let searchSuggestions = searchForm.querySelector(".search-suggestions");
+  let suggestionGroupTemplate = document.querySelector("#suggestion-group-template");
+  let suggestionItemTemplate = document.querySelector("#suggestion-item-template");
+  searchFormInput.addEventListener("keyup", delayAfterKeyup(async (e) => {
+    let suggestionResults = await getSuggestions(e.target.value);
+    searchSuggestions.innerHTML = "";
+    searchSuggestions.dataset.query = e.target.value;
+    for (const [type, results] of Object.entries(suggestionResults)) {
+      if (!!results.length) {
+        let suggestionGroup = suggestionGroupTemplate.content.cloneNode(true);
+        suggestionGroup.querySelector(".suggestion-group-title").textContent = type;
+        results.map((result) => {
+          let suggestionItem = suggestionItemTemplate.content.cloneNode(true);
+          suggestionItem.querySelector(".suggestion-item-url").href = result.url;
+          suggestionItem.querySelector(".suggestion-item-title").textContent = result.title;
+          if (!!result.featuredImage || !!result.image) {
+            let suggestionImg = suggestionItem.querySelector(".suggestion-item-img img");
+            suggestionImg.src = resizeImg(result.image || result.featuredImage, "100x100");
+            suggestionImg.alt = !!result.featuredImage ? result.featuredImage.alt : result.title;
+          }
+          suggestionGroup.querySelector(".suggestion-group-list").appendChild(suggestionItem);
+        });
+        searchSuggestions.appendChild(suggestionGroup);
+      }
+    }
+  }, window.predictiveSearchOptions.keyUpDelay));
+}
+async function getSuggestions(query) {
+  let params = new URLSearchParams();
+  const { resources } = window.predictiveSearchOptions;
+  params.set("q", query);
+  params.set("resources[type]", resources.type);
+  params.set("resources[limit]", resources.limit);
+  let response = await fetch("/search/suggest.json?" + params.toString());
+  return !!response.ok && (await response.json()).resources.results;
+}
+function resizeImg(url, size) {
+  const [before, ext, after] = url.split(/\.(png|jpg|gif)/g);
+  return `${before}_${size}.${ext}${after}`;
+}
+function delayAfterKeyup(fn, ms) {
+  let timer = 0;
+  return function(...args) {
+    clearTimeout(timer);
+    timer = setTimeout(fn.bind(this, ...args), ms || 0);
+  };
+}

assets/theme.min.js

@@ -1 +1,17 @@
-(function(){let l=document.documentElement,o=document.querySelector("#shopify-section-header").offsetHeight;l.style.setProperty("--header-height",`${o}px`);let r=document.querySelectorAll(".qty-selector");for(let e of r){let c=e.querySelectorAll(".qty-inc"),n=e.querySelector(".qty-value");for(let t of c)t.addEventListener("click",y=>{y.preventDefault();let s=parseInt(t.dataset.inc);n.stepUp(s)})}})();
+(function() {
+  let root = document.documentElement;
+  let headerHeight = document.querySelector("#shopify-section-header").offsetHeight;
+  root.style.setProperty("--header-height", `${headerHeight}px`);
+  let qty_selectors = document.querySelectorAll(".qty-selector");
+  for (let qty_selector of qty_selectors) {
+    let qty_incs = qty_selector.querySelectorAll(".qty-inc");
+    let qty_value = qty_selector.querySelector(".qty-value");
+    for (let qty_inc of qty_incs) {
+      qty_inc.addEventListener("click", (e) => {
+        e.preventDefault();
+        let inc_val = parseInt(qty_inc.dataset.inc);
+        qty_value.stepUp(inc_val);
+      });
+    }
+  }
+})();

config/settings_schema.json

@@ -2,7 +2,7 @@
   {
     "name": "theme_info",
     "theme_name": "Danshari",
-    "theme_version": "0.8.0",
+    "theme_version": "0.8.1",
     "theme_author": "mitchuman",
     "theme_documentation_url": "https:\/\/github.com\/mitchuman\/danshari",
     "theme_support_url": "https:\/\/github.com\/mitchuman\/danshari"

package.json

@@ -7,13 +7,16 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "yarn shopify:switch && shopify theme serve",
     "shopify:switch": "shopify switch --store=human-dev.myshopify.com",
-    "css:watch": "tailwindcss -i assets/tailwind.css -o assets/tailwind.min.css --watch",
-    "css:build": "tailwindcss -i assets/tailwind.css -o assets/tailwind.min.css --postcss --minify"
+    "dev": "yarn shopify:switch && shopify theme serve",
+    "dev:css": "tailwindcss -i assets/tailwind.css -o assets/tailwind.min.css --watch",
+    "build": "yarn build:css && yarn build:js",
+    "build:css": "tailwindcss -i assets/tailwind.css -o assets/tailwind.min.css --postcss --minify",
+    "build:js": "rm assets/*.min.js && esbuild assets/*.js --outdir=assets --out-extension:.js=.min.js"
   },
   "devDependencies": {
     "autoprefixer": "^10.3.7",
+    "esbuild": "^0.13.8",
     "postcss": "^8.3.9",
     "tailwindcss": "^2.2.17"
   }

snippets/demo-css.liquid

@@ -19,6 +19,7 @@
   </p>
   <p>
     <input class="input" type="email" placeholder=".input[type=email]" />
+    <input class="input" type="text" placeholder=".input[disabled]" disabled />
     <select class="input">
       <option default selected disabled>select.input</option>
     </select>

snippets/demo-richtext.liquid

@@ -4,7 +4,7 @@
   <h1 class="h1">Heading 1</h1>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maiores veritatis porro consectetur similique itaque nobis nemo, tempora unde eligendi animi neque enim natus culpa alias architecto, officiis optio nostrum?</p>
   <p>This is a <a href="#">link</a>.</p>
-  <h2 class="text-2xl">Heading 2</h2>
+  <h2 class="h2">Heading 2</h2>
   <ul>
     <li>foo</li>
     <li>bar</li>

tailwind.config.js

@@ -4,12 +4,12 @@ module.exports = {
   darkMode: false,
   theme: {
     screens: {
-      'mobile': {max: '640px'},
-      'mobile+': {min: '641px'},
-      'tablet': {max: '768px'},
-      'tablet+': {min: '769px'},
-      'desktop': {max: '1280px'},
-      'desktop+': {min: '1281px'},
+      'mobile': { max: '640px' },
+      'mobile+': { min: '641px' },
+      'tablet': { max: '768px' },
+      'tablet+': { min: '769px' },
+      'desktop': { max: '1280px' },
+      'desktop+': { min: '1281px' },
     },
     fontFamily: {
       'heading': 'var(--font-heading)',

yarn.lock

@@ -307,6 +307,114 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.8.tgz#c20e875c3c98164b1ffba9b28637bdf96f5e9e7c"
+  integrity sha512-AilbChndywpk7CdKkNSZ9klxl+9MboLctXd9LwLo3b0dawmOF/i/t2U5d8LM6SbT1Xw36F8yngSUPrd8yPs2RA==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.8.tgz#f46e6b471ddbf62265234808a6a1aa91df18a417"
+  integrity sha512-b6sdiT84zV5LVaoF+UoMVGJzR/iE2vNUfUDfFQGrm4LBwM/PWXweKpuu6RD9mcyCq18cLxkP6w/LD/w9DtX3ng==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.8.tgz#a991157a6013facd4f2e14159b7da52626c90154"
+  integrity sha512-R8YuPiiJayuJJRUBG4H0VwkEKo6AvhJs2m7Tl0JaIer3u1FHHXwGhMxjJDmK+kXwTFPriSysPvcobXC/UrrZCQ==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.8.tgz#301601d2e443ad458960e359b402a17d9500be9d"
+  integrity sha512-zBn6urrn8FnKC+YSgDxdof9jhPCeU8kR/qaamlV4gI8R3KUaUK162WYM7UyFVAlj9N0MyD3AtB+hltzu4cysTw==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.8.tgz#039a63acc12ec0892006c147ea221e55f9125a9f"
+  integrity sha512-pWW2slN7lGlkx0MOEBoUGwRX5UgSCLq3dy2c8RIOpiHtA87xAUpDBvZK10MykbT+aMfXc0NI2lu1X+6kI34xng==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.8.tgz#c537b67d7e694b60bfa2786581412838c6ba0284"
+  integrity sha512-T0I0ueeKVO/Is0CAeSEOG9s2jeNNb8jrrMwG9QBIm3UU18MRB60ERgkS2uV3fZ1vP2F8i3Z2e3Zju4lg9dhVmw==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.8.tgz#0092fc8a064001a777bfa0e3b425bb8be8f96e6a"
+  integrity sha512-Bm8SYmFtvfDCIu9sjKppFXzRXn2BVpuCinU1ChTuMtdKI/7aPpXIrkqBNOgPTOQO9AylJJc1Zw6EvtKORhn64w==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.8.tgz#5cd3f2bb924212971482e8dbc25c4afd09b28110"
+  integrity sha512-X4pWZ+SL+FJ09chWFgRNO3F+YtvAQRcWh0uxKqZSWKiWodAB20flsW/OWFYLXBKiVCTeoGMvENZS/GeVac7+tQ==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.8.tgz#ad634f96bf2975536907aeb9fdb75a3194f4ddce"
+  integrity sha512-4/HfcC40LJ4GPyboHA+db0jpFarTB628D1ifU+/5bunIgY+t6mHkJWyxWxAAE8wl/ZIuRYB9RJFdYpu1AXGPdg==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.8.tgz#57857edfebf9bf65766dc8be1637f2179c990572"
+  integrity sha512-o7e0D+sqHKT31v+mwFircJFjwSKVd2nbkHEn4l9xQ1hLR+Bv8rnt3HqlblY3+sBdlrOTGSwz0ReROlKUMJyldA==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.8.tgz#fdb82a059a5b86bb10fb42091b4ebcf488b9cd46"
+  integrity sha512-eZSQ0ERsWkukJp2px/UWJHVNuy0lMoz/HZcRWAbB6reoaBw7S9vMzYNUnflfL3XA6WDs+dZn3ekHE4Y2uWLGig==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.8.tgz#d7879e7123d3b2c04754ece8bd061aa6866deeff"
+  integrity sha512-gZX4kP7gVvOrvX0ZwgHmbuHczQUwqYppxqtoyC7VNd80t5nBHOFXVhWo2Ad/Lms0E8b+wwgI/WjZFTCpUHOg9Q==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.8.tgz#88b280b6cb0a3f6adb60abf27fc506c506a35cf0"
+  integrity sha512-afzza308X4WmcebexbTzAgfEWt9MUkdTvwIa8xOu4CM2qGbl2LanqEl8/LUs8jh6Gqw6WsicEK52GPrS9wvkcw==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.8.tgz#229ae7c7703196a58acd0f0291ad9bebda815d63"
+  integrity sha512-mWPZibmBbuMKD+LDN23LGcOZ2EawMYBONMXXHmbuxeT0XxCNwadbCVwUQ/2p5Dp5Kvf6mhrlIffcnWOiCBpiVw==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.8.tgz#892d093e32a21c0c9135e5a0ffdc380aeb70e763"
+  integrity sha512-QsZ1HnWIcnIEApETZWw8HlOhDSWqdZX2SylU7IzGxOYyVcX7QI06ety/aDcn437mwyO7Ph4RrbhB+2ntM8kX8A==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.8.tgz#7defd8d79ae3bb7e6f53b65a7190be7daf901686"
+  integrity sha512-76Fb57B9eE/JmJi1QmUW0tRLQZfGo0it+JeYoCDTSlbTn7LV44ecOHIMJSSgZADUtRMWT9z0Kz186bnaB3amSg==
+
+[email protected]:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.8.tgz#e59ae004496fd8a5ab67bfc7945a2e47480d6fb9"
+  integrity sha512-HW6Mtq5eTudllxY2YgT62MrVcn7oq2o8TAoAvDUhyiEmRmDY8tPwAhb1vxw5/cdkbukM3KdMYtksnUhF/ekWeg==
+
+esbuild@^0.13.8:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.8.tgz#bd7cc51b881ab067789f88e17baca74724c1ec4f"
+  integrity sha512-A4af7G7YZLfG5OnARJRMtlpEsCkq/zHZQXewgPA864l9D6VjjbH1SuFYK/OSV6BtHwDGkdwyRrX0qQFLnMfUcw==
+  optionalDependencies:
+    esbuild-android-arm64 "0.13.8"
+    esbuild-darwin-64 "0.13.8"
+    esbuild-darwin-arm64 "0.13.8"
+    esbuild-freebsd-64 "0.13.8"
+    esbuild-freebsd-arm64 "0.13.8"
+    esbuild-linux-32 "0.13.8"
+    esbuild-linux-64 "0.13.8"
+    esbuild-linux-arm "0.13.8"
+    esbuild-linux-arm64 "0.13.8"
+    esbuild-linux-mips64le "0.13.8"
+    esbuild-linux-ppc64le "0.13.8"
+    esbuild-netbsd-64 "0.13.8"
+    esbuild-openbsd-64 "0.13.8"
+    esbuild-sunos-64 "0.13.8"
+    esbuild-windows-32 "0.13.8"
+    esbuild-windows-64 "0.13.8"
+    esbuild-windows-arm64 "0.13.8"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"