Merge pull request #11 from macklinu/switch-from-webpack-to-parcel

Switch from Webpack to Parcel for documentation site
lowmess · Dec 15, 2018 · 24b7201 · 24b7201
2 parents 29cc7f9 + cda3252
commit 24b7201
Show file tree

Hide file tree

Showing 12 changed files with 3,427 additions and 2,250 deletions.
diff --git a/www/.babelrc b/www/.babelrc
@@ -1,6 +1,7 @@
 {
+  "plugins": ["preval"],
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "modules": false
     }]
   ]

diff --git a/www/.browserslistrc b/www/.browserslistrc
@@ -0,0 +1,8 @@
+> 0.25%
+last 2 chrome versions
+last 2 edge versions
+last 2 firefox versions
+last 2 safari versions
+not dead
+not ie <= 11
+not op_mini all
diff --git a/www/.gitignore b/www/.gitignore
@@ -1,3 +1,4 @@
 public
 node_modules
-.DS_Store
+.DS_Store
+.cache
diff --git a/www/.postcssrc b/www/.postcssrc
@@ -0,0 +1,10 @@
+{
+  "plugins": {
+    "autoprefixer": {},
+    "cssnano": {},
+    "css-mqpacker": {}
+  },
+  "map": {
+    "inline": false
+  }
+}
diff --git a/www/package.json b/www/package.json
@@ -6,45 +6,34 @@
   "author": "Alec Lomas",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server",
-    "prebuild": "node generate-colors",
-    "build": "webpack",
-    "prebuild:min": "cross-env NODE_ENV=production node generate-colors",
-    "build:min": "cross-env NODE_ENV=production webpack -p"
+    "start": "parcel src/index.html --out-dir public",
+    "build": "parcel build src/index.html --out-dir public",
+    "build:min": "cross-env NODE_ENV=production parcel build src/index.html --out-dir public"
   },
   "dependencies": {
-    "autoprefixer": "^7.1.6",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
+    "autoprefixer": "^9.4.2",
+    "babel-plugin-preval": "^3.0.1",
     "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
-    "css-mqpacker": "^6.0.1",
-    "cssnano": "^3.10.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "fs-extra": "^4.0.2",
-    "html-webpack-plugin": "^2.30.1",
+    "css-mqpacker": "^7.0.0",
+    "cssnano": "^4.1.7",
     "postcss": "^6.0.14",
-    "postcss-custom-media": "^6.0.0",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
-    "postcss-nested": "^2.1.2",
     "random-a11y-combo": "^1.0.0",
     "randomcolor": "^0.5.3",
-    "style-loader": "^0.19.0",
-    "tachyons": "^4.9.0",
-    "webpack": "^3.8.1"
+    "tachyons": "^4.9.0"
   },
   "devDependencies": {
+    "@abide-community/parcel-plugin-clean-out-dir": "^1.0.0",
     "eslint": "3.19.0",
     "eslint-config-lowmess": "1.1.0",
+    "parcel-bundler": "^1.10.3",
     "prettier": "^1.8.2",
     "stylelint": "8.1.1",
-    "stylelint-config-lowmess": "0.2.0",
-    "webpack-dev-server": "^2.9.4"
+    "stylelint-config-lowmess": "0.2.0"
   },
-  "browserslist": [
-    "last 2 versions",
-    "> 5%"
-  ]
+  "alias": {
+    "hero-patterns": "../src/hero-patterns.js",
+    "package.json": "../package.json"
+  }
 }
diff --git a/www/postcss.config.js b/www/postcss.config.js
diff --git a/www/generate-colors.js → www/src/colors.js b/www/generate-colors.js → www/src/colors.js
@@ -1,10 +1,9 @@
-const fs = require('fs-extra')
+// @preval
+
 const randomColor = require('randomcolor')
 const combo = require('random-a11y-combo')
-const hero = require('../dist/hero-patterns.cjs.js')
+const hero = require('../../dist/hero-patterns.cjs.js')
 
-// create 'public', should always fire
-if (!fs.existsSync('public')) fs.mkdirSync('public')
 // pre-generate color combinations
 // this can make the build hang but speeds up the site tremendously
 const combos = []
@@ -13,4 +12,5 @@ const colors = randomColor({ count: num })
 for (const color of colors) {
   combos.push(combo(color))
 }
-fs.outputJsonSync('./public/colors.json', combos)
+
+module.exports = combos
diff --git a/www/src/index.html b/www/src/index.html
@@ -11,9 +11,9 @@
 <body class="sans-serif min-vh-100 dark-gray">
   <header class="pa4">
     <nav class="flex-ns justify-between-ns items-center-ns">
-      <div class="flex-none-ns flex items-center mb2 mb0-ns">
-        <h1 class="f3 fw4 mv0 mr2">hero-patterns.js</h1>
-        <span class="version silver fw3"></span>
+      <div class="flex-none-ns flex items-baseline mb2 mb0-ns">
+        <h1 class="f4 f3-l fw4 mv0 mr2">hero-patterns.js</h1>
+        <span class="version silver f6 f5-l fw3"></span>
       </div>
       <ul class="list tr-ns pl0 mv0">
         <li class="di mr3">
@@ -29,7 +29,7 @@ <h1 class="f3 fw4 mv0 mr2">hero-patterns.js</h1>
     </nav>
   </header>
   <main>
-    <div class="cf heroes"></div>
+    <div class="heroes"></div>
     <div class="pa4 lh-copy">
       <h2 class="f3 fw4 mv3">Installation</h2>
       <pre class="pre ba b--black-10 br2 bg-light-gray pa3"><code class="language-bash code">yarn add hero-patterns</code></pre>
@@ -80,6 +80,7 @@ <h2 class="f3 fw4 mb3 mt4">Usage</h2>
       </ul>
     </div>
   </footer>
+  <script src="./main.js"></script>
 </body>
 
 </html>
diff --git a/www/src/main.css b/www/src/main.css
@@ -1,7 +1,20 @@
 @charset 'utf-8';
 
-@import 'tachyons/src/tachyons';
+@media (min-width: 48em) {
+  .heroes {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 72em);
-@custom-media --breakpoint-large screen and (min-width: 96em);
+@media (min-width: 72em) {
+  .heroes {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 96em) {
+  .heroes {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
diff --git a/www/src/main.js b/www/src/main.js
@@ -1,7 +1,8 @@
-import colors from 'colors'
 import { version } from 'package.json'
 import * as hero from 'hero-patterns'
+import colors from './colors'
 
+import 'tachyons'
 import './main.css'
 
 // Add version number to header
@@ -16,24 +17,28 @@ const genAlpha = () => {
   return roundTo(5, random(23, 102)) / 100
 }
 
-const markup = fn => {
+const markup = name => {
   // generate random color combination and opacity value
   let [c1, c2] = colors[random(1, colors.length) - 1]
   if (random(1, 2) === 1) [c1, c2] = [c2, c1]
   const alpha = genAlpha()
+
   // create strings from function name
-  const name = fn.name.replace(/([A-Z])/g, ' $1')
-  const ident = fn.name.replace(/([A-Z])/g, '-$1').toLowerCase()
+  const id = name.replace(/([A-Z])/g, '-$1').toLowerCase()
+  const formatName = name.replace(/([A-Z])/g, ' $1')
+
+  // generate code example
   const params = alpha === 1 ? `'${c2}'` : `'${c2}', ${alpha}`
-  const func = `${fn.name}(${params})`
+  const functionCode = `${name}(${params})`
+
   // generate actual markup
-  const style = `background-position: center; background-color: ${c1}; background-image: ${fn(c2, alpha)}`
+  const style = `background-position: center; background-color: ${c1}; background-image: ${hero[name](c2, alpha)}`
   const html = `
-    <div class="hero w-100 w-50-ns w-third-m w-25-l fl" id="${ident}" role="presentation">
+    <div class="hero" id="${id}" role="presentation">
       <div class="hide-child aspect-ratio aspect-ratio--16x9" style="${style}">
         <div class="child aspect-ratio--object bg-black-70 flex flex-column items-center justify-center pa3">
-          <span class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${name}</span>
-          <code class="mt2 pv2 ph3 ba b--white br2 code white f6 f5-ns">${func}</code>
+          <span class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${formatName}</span>
+          <code class="mt2 pv2 ph3 ba b--white br2 code white f6 f5-ns">${functionCode}</code>
         </div>
       </div>
     </div>`
@@ -42,6 +47,7 @@ const markup = fn => {
   return template.content.firstElementChild
 }
 
+const heroes = document.querySelector('.heroes')
 for (const pattern in hero) {
-  document.querySelector('.heroes').appendChild(markup(hero[pattern]))
+  heroes.appendChild(markup(pattern))
 }
diff --git a/www/webpack.config.js b/www/webpack.config.js