Use Prettier (parcel-bundler#281)

* Add .editorconfig * Add husky and pretty-quick * Add prettier * Add Prettier config * Add pre-commit config * Update prettier config * Add format script * Run format script
codeaholicguy · Oct 25, 2018 · 6d9f46d · 6d9f46d
1 parent 4a1400a
commit 6d9f46d
Show file tree

Hide file tree

Showing 221 changed files with 1,604 additions and 1,272 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/package.json b/package.json
@@ -6,17 +6,26 @@
   "repository": "git://git@github.com:parcel-bundler/website.git",
   "author": "Devon Govett <devongovett@gmail.com>",
   "license": "MIT",
-  "dependencies": {
-    "express": "^4.16.2"
-  },
-  "devDependencies": {
-    "markdown-styles": "^3.1.10",
-    "now": "^11.2.4"
-  },
   "scripts": {
     "build": "./build.sh",
     "clean": "rm -rf dist",
     "start": "node src/server.js",
+    "format": "prettier --write 'src/**/*.{md,js,css,json}'",
     "deploy": "now"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "dependencies": {
+    "express": "^4.16.2"
+  },
+  "devDependencies": {
+    "husky": "^1.1.2",
+    "markdown-styles": "^3.1.10",
+    "now": "^11.2.4",
+    "prettier": "^1.14.3",
+    "pretty-quick": "^1.8.0"
   }
 }
diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 120,
+  semi: false,
+  singleQuote: true
+}
diff --git a/src/assets/home.css b/src/assets/home.css
@@ -1,31 +1,53 @@
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   min-width: 250px;
-  font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
-  background:#fefefe;
+  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
+  background: #fefefe;
 }
 
-h1,h2,h3,h4,h5,h6{
-font-weight:400;
-color:#111;
-line-height:1em;
-font-family: "Gill Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+  color: #111;
+  line-height: 1em;
+  font-family: 'Gill Sans', 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+h4,
+h5,
+h6 {
+  font-weight: bold;
+}
+h1 {
+  font-size: 3.2em;
+}
+h2 {
+  font-size: 2em;
+}
+h3 {
+  font-size: 1.5em;
+}
+h4 {
+  font-size: 1.2em;
+}
+h5 {
+  font-size: 1em;
+}
+h6 {
+  font-size: 0.9em;
 }
-h4,h5,h6{ font-weight: bold; }
-h1{ font-size:3.2em; }
-h2{ font-size:2em; }
-h3{ font-size:1.5em; }
-h4{ font-size:1.2em; }
-h5{ font-size:1em; }
-h6{ font-size:0.9em; }
 
 header {
-  background: #21374B;
-  color: #E7DACB;
+  background: #21374b;
+  color: #e7dacb;
   text-align: center;
   padding: 80px 0 50px 0;
-  font-family: "Gill Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Gill Sans', 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .logo {
@@ -37,7 +59,7 @@ header {
 header .subtitle {
   margin: 0;
   font-size: 1.5em;
-  color: #E7DACB;
+  color: #e7dacb;
 }
 
 .parcel {
@@ -99,11 +121,11 @@ header .subtitle {
   display: inline-block;
   padding: 8px 0;
   width: 180px;
-  color: #E7DACB;
-  border: 1px solid #E7DACB;
+  color: #e7dacb;
+  border: 1px solid #e7dacb;
   border-radius: 50px;
   text-decoration: none;
-  font-family: "Gill Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Gill Sans', 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 20px;
   transition: opacity 200ms;
   text-align: center;
@@ -115,8 +137,8 @@ header .subtitle {
 }
 
 .get-started {
-  background: #E7DACB;
-  color: #21374B;
+  background: #e7dacb;
+  color: #21374b;
 }
 
 header .links {
@@ -125,11 +147,11 @@ header .links {
   right: 0;
   display: flex;
   margin: 20px;
-  align-items: center;  
+  align-items: center;
 }
 
 header .links a {
-  color: #E7DACB;
+  color: #e7dacb;
   text-decoration: none;
   padding-left: 20px;
   transition: color 125ms;
@@ -159,9 +181,9 @@ header .links a:hover {
 main {
   max-width: 1000px;
   margin: 0 auto;
-  color:#444;
-  font-size:16px;
-  line-height:1.5em;
+  color: #444;
+  font-size: 16px;
+  line-height: 1.5em;
 }
 
 main section {
@@ -185,8 +207,20 @@ main > section {
   padding: 0 20px;
 }
 
-pre, code, kbd, samp { color: #000; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.98em; }
-pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; font-size: 12px; }
+pre,
+code,
+kbd,
+samp {
+  color: #000;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.98em;
+}
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-size: 12px;
+}
 
 p code {
   font-size: 0.95em;
@@ -205,7 +239,8 @@ tr:nth-child(2n + 1) {
   background: #efefef;
 }
 
-td, th {
+td,
+th {
   padding: 5px 10px;
   text-align: left;
   border: 1px solid #ddd;
@@ -226,9 +261,9 @@ td, th {
 }
 
 footer {
-  background: #21374B;
-  color: #E7DACB;
-  font-family: "Gill Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: #21374b;
+  color: #e7dacb;
+  font-family: 'Gill Sans', 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   padding: 40px 0 20px 0;
   margin-top: 40px;
   text-align: center;
@@ -252,7 +287,7 @@ footer nav ul {
 
 footer nav a,
 footer .copyright a {
-  color: #E7DACB;
+  color: #e7dacb;
   text-decoration: none;
   transition: color 125ms;
   line-height: 1.7em;
@@ -273,7 +308,7 @@ footer h3 {
   text-transform: uppercase;
   font-size: 13px;
   opacity: 0.7;
-  color: #E7DACB;
+  color: #e7dacb;
 }
 
 footer .copyright {

diff --git a/src/assets/icons.js b/src/assets/icons.js
@@ -1,19 +1,4 @@
-var icons = [
-  'js',
-  'json',
-  'css',
-  'sass',
-  'less',
-  'html',
-  'jpg',
-  'png',
-  'gif',
-  'bmp',
-  'svg',
-  'raw',
-  'rs',
-  'ts'
-]
+var icons = ['js', 'json', 'css', 'sass', 'less', 'html', 'jpg', 'png', 'gif', 'bmp', 'svg', 'raw', 'rs', 'ts']
 
 var container = document.querySelector('.icons')
 
@@ -23,11 +8,7 @@ function spawn() {
   svg.style.left = 25 + Math.random() * 50 + '%'
   svg.setAttribute('class', 'icon')
   var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-  use.setAttributeNS(
-    'http://www.w3.org/1999/xlink',
-    'href',
-    'assets/icons.svg#' + icon,
-  )
+  use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'assets/icons.svg#' + icon)
   svg.appendChild(use)
   container.appendChild(svg)
 

diff --git a/src/assets/pilcrow.css b/src/assets/pilcrow.css
@@ -13,9 +13,9 @@ h3:hover .header-link:before,
 h4:hover .header-link:before,
 h5:hover .header-link:before,
 h6:hover .header-link:before {
-    content: "\00B6";/* pilcrow */
-    color: #888;
-    font-size: smaller;
+  content: '\00B6'; /* pilcrow */
+  color: #888;
+  font-size: smaller;
 }
 
 .header-link {