Merge pull request #57 from jakewies/prettier

Add prettier

.prettierignore

@@ -1,2 +1,11 @@
-content
+exampleSite/content
 layouts
+static
+
+package.json
+public
+node_modules
+
+.DS_Store
+logs
+*.log

CONTRIBUTING.md

@@ -1,13 +1,7 @@
 # Contributing
 
-First off, thank you for your time and effort! This project is not very large and easy to jump into.
-
-## Development stack
-
-- Built with [Hugo](https://gohugo.io/) 🔥
-- [Gulp](https://gulpjs.com/) as a build tool 🍹
-- Styles in [Stylus](http://stylus-lang.com/) 💅🏻
-- [Yarn](https://yarnpkg.com/) as a package manager 📦
+First off, thank you for your time and effort! This project is not very large
+and easy to jump into.
 
 ## Getting started
 
@@ -22,30 +16,27 @@ yarn install
 
 ## Scripts
 
-There are 3 npm scripts that can be used for development purposes:
-
 ```bash
 yarn develop
 ```
 
-This command will start a hugo webserver and serve the `exampleSite`. This works well because the example site uses `hugo-theme-codex`, so any changes
-we make to the codebase can be viewed in real time.
+Triggers a one-time build of the static directory.
 
 ```bash
-yarn watch:assets
+yarn format
 ```
 
-If you are working with `js` or `css` you will probably want to run this command in a separate tab from `yarn develop` so that any changes to assets like javascript and css will trigger a re-build by `gulp``.
+Runs prettier on the entire project directory.
 
-```bash
-yarn build:assets
-```
+## Assets
 
-Triggers a one-time build of the static directory.
+The `assets/` directory is where you can write JS and SCSS, which get processed
+into CSS files before being placed in the `static/` directory.
 
 ## Questions
 
-If you have any questions feel free to reach out to me directly. Best ways to contact me:
+If you have any questions feel free to reach out to me directly. Best ways to
+contact me:
 
 - Twitter: https://twitter.com/jakewies
 - Email: [email protected]

assets/scss/_main.scss

@@ -1,9 +1,9 @@
-@import 'partials/normalize';
-@import 'partials/vars';
-@import 'partials/reset';
-@import 'partials/typography';
-@import 'partials/nav';
-@import 'partials/social-icons';
+@import "partials/normalize";
+@import "partials/vars";
+@import "partials/reset";
+@import "partials/typography";
+@import "partials/nav";
+@import "partials/social-icons";
 
 body.nav--active {
   overflow: hidden;
@@ -12,7 +12,6 @@ body.nav--active {
 main {
   padding: 3rem 1.5rem 1rem;
 
-
   @media screen and (min-width: $medium) {
     padding-left: calc(1.5rem + #{$navWidth});
   }

assets/scss/pages/about.scss

@@ -1,4 +1,4 @@
-@import '../main';
+@import "../main";
 
 .splash-container {
   height: 100%;

assets/scss/pages/posts.scss

@@ -1,5 +1,5 @@
-@import '../main';
-@import '../partials/post-list';
+@import "../main";
+@import "../partials/post-list";
 
 .tags__list {
   list-style: none;
@@ -40,7 +40,7 @@
   font-size: 0.9rem;
 
   &::before {
-    content: '#';
+    content: "#";
     font-size: 0.7rem;
     padding-right: 1px;
   }

assets/scss/pages/tags.scss

@@ -1,12 +1,13 @@
-@import '../main';
-@import '../partials/post-list';
+@import "../main";
+@import "../partials/post-list";
 
 .tag__header {
   align-items: baseline;
   display: flex;
   margin: 0 auto 3rem;
 
-  a, .separator {
+  a,
+  .separator {
     color: $grey;
     font-size: 1.5rem;
   }

assets/scss/partials/_colors.scss

@@ -1,7 +1,7 @@
 $black: #111;
-$lightGrey: #F7F7F7;
-$greyTableBorder: #EEEEEE;
-$grey: #9B9B9B;
+$lightGrey: #f7f7f7;
+$greyTableBorder: #eeeeee;
+$grey: #9b9b9b;
 $darkGrey: #717171;
 $white: #fff;
-$primary: #9013FE;
+$primary: #9013fe;

assets/scss/partials/_github-syntax-highlighting.scss

@@ -77,7 +77,7 @@ pre[class*="language-"] {
   color: #032f62;
 }
 
-.language-jsx span[class="comment"]{
+.language-jsx span[class="comment"] {
   color: pink;
 }
 
@@ -91,7 +91,10 @@ pre[class*="language-"] {
 }
 
 .language-html .token.tag .token.attr-value,
-.language-html .token.tag .token.attr-value .token.punctuation:not(:first-child) {
+.language-html
+  .token.tag
+  .token.attr-value
+  .token.punctuation:not(:first-child) {
   color: #032f62;
 }
 

assets/scss/partials/_nav.scss

@@ -1,4 +1,4 @@
-@import 'burger';
+@import "burger";
 
 .nav {
   font-size: 16px;
@@ -35,7 +35,6 @@
     width: auto;
   }
 
-
   @media screen and (max-width: $medium - 1) {
     transform: translateY(-25px);
     opacity: 0;

assets/scss/partials/_normalize.scss

@@ -6,8 +6,8 @@ button[type="submit"] {
 }
 
 input,
-input[type=text],
-input[type=email] {
+input[type="text"],
+input[type="email"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;

assets/scss/partials/_reset.scss

@@ -1,6 +1,7 @@
 @import "colors";
 
-html, body {
+html,
+body {
   background-color: $white;
   color: $black;
   height: 100%;
@@ -10,7 +11,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   padding: 0;
   margin: 0;
   box-sizing: inherit;

assets/scss/partials/_social-icons.scss

@@ -8,7 +8,7 @@
   height: 1.2rem;
   background-size: contain;
   background-repeat: no-repeat;
-  
+
   &:not(:last-child) {
     margin-right: 2em;
   }

assets/scss/partials/_typography.scss

@@ -7,7 +7,8 @@ $scale: 1.414;
 $leading: $baseLineHeight * 1rem;
 
 html {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: 95%;
 
@@ -20,7 +21,12 @@ html {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin-top: $leading;
   margin-bottom: 0;
   line-height: $leading;
@@ -74,32 +80,31 @@ ol {
 blockquote {
   &::before {
     position: absolute;
-    content: '\201C';
+    content: "\201C";
 
     font-size: 6em;
-    font-family: 'Roboto', serif;
-    margin-top: 0.10em;;
+    font-family: "Roboto", serif;
+    margin-top: 0.1em;
     margin-left: -0.2em;
-    
+
     z-index: -1;
     color: darken($white, 7%);
   }
-  
+
   margin-top: $leading;
   margin-bottom: $leading;
   line-height: $leading;
   color: $black;
-  
+
   cite {
     &::before {
-      content: "— "
+      content: "— ";
     }
-    
+
     font-style: italic;
-    font-size: .95em;
+    font-size: 0.95em;
     color: $darkGrey;
   }
-
 }
 
 pre {

assets/scss/partials/_vars.scss

@@ -1,5 +1,5 @@
-@import '_colors';
-@import '_screenSizes';
+@import "_colors";
+@import "_screenSizes";
 
 $navWidth: 100px;
 $meatWidth: 28px;

package.json

@@ -5,7 +5,18 @@
   "description": "A minimal blog theme for Hugo",
   "license": "MIT",
   "scripts": {
-    "develop": "hugo server -s ./exampleSite/"
+    "develop": "hugo server -s ./exampleSite/",
+    "format": "prettier ./ --write"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "devDependencies": {
+    "husky": "^4.2.5",
+    "lint-staged": ">=10",
+    "prettier": "^2.0.5"
   },
   "browserslist": [
     "last 2 version",
@@ -17,5 +28,8 @@
     "hugo",
     "blog",
     "go"
-  ]
+  ],
+  "lint-staged": {
+    "*.{js,css,scss}": "prettier --write"
+  }
 }

prettier.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  arrowParens: "avoid",
+  bracketSpacing: false,
+  endOfLine: "lf",
+  htmlWhitespaceSensitivity: "css",
+  printWidth: 80,
+  proseWrap: "always",
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "all",
+  useTabs: false,
+};