adding prettier with precommit hook to format

.prettierignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+yarn.lock
+.prettierignore
+
+public/wp-search.json

README.md

@@ -46,14 +46,14 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 In order to avoid an additional configuration file, we take advantage of some built-in properties of `package.json` to configure some of the website properties.
 
-* homepage: Setting the `homepage` property will update instances where the full URL is required such as Open Graph tags
+- homepage: Setting the `homepage` property will update instances where the full URL is required such as Open Graph tags
 
 ### WordPress
 
 This project aims to take advantage of as many built-in WordPress features by default. Those include:
 
-* Site Title: Used for the homepage header as well as the default meta title
-* Tagline: Used on the homepage for the header subtitle
+- Site Title: Used for the homepage header as well as the default meta title
+- Tagline: Used on the homepage for the header subtitle
 
 ### Images
 
@@ -62,6 +62,7 @@ By default, this Starter doesn't provide any mechanisms for dealing with image c
 To serve the images statically, you have a few options.
 
 #### Jetpack
+
 By enabling the Image Accelerator from Jetpack, your images will automatically be served statically and cached via the wp.com CDN. This feature comes free with the basic installation of Jetpack, requiring only that you connect the WordPress site to the Jetpack service.
 
 [Jetpack CDN](https://jetpack.com/features/design/content-delivery-network/)

config/prettier.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  singleQuote: true,
+  printWidth: 120,
+  overrides: [
+    {
+      files: '*.scss',
+      options: {
+        singleQuote: false,
+      },
+    },
+  ],
+};

jsconfig.json

@@ -5,4 +5,4 @@
       "public/*": ["../public/*"]
     }
   }
-}
+}

next.config.js

@@ -4,10 +4,8 @@ const indexSearch = require('./plugins/search-index');
 
 const WORDPRESS_HOST = 'http://54.243.240.9';
 
-module.exports = withPlugins([
-  [indexSearch]
-], {
+module.exports = withPlugins([[indexSearch]], {
   env: {
-    WORDPRESS_HOST
-  }
-});
+    WORDPRESS_HOST,
+  },
+});

package.json

@@ -2,12 +2,25 @@
   "name": "next-wordpress-starter",
   "homepage": "https://next-wordpress-starter.netlify.app",
   "version": "0.1.0",
-  "private": true,
+  "license": "MIT",
+  "author": "Colby Fayock <hello@colbyfayock.com>",
   "scripts": {
-    "dev": "next dev",
     "build": "next build && next export",
+    "dev": "next dev",
+    "format": "yarn prettier --config ./config/prettier.config.js --write .",
+    "format:nopath": "yarn prettier --config ./config/prettier.config.js --write",
+    "lint": "yarn lint:js",
+    "lint:js": "yarn prettier --config ./config/prettier.config.js --check .",
     "start": "next start"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*": "yarn format:nopath"
+  },
   "dependencies": {
     "loader-utils": "^2.0.0",
     "next": "9.5.2",
@@ -17,5 +30,17 @@
     "react-dom": "16.13.1",
     "react-helmet": "^6.1.0",
     "sass": "^1.26.10"
+  },
+  "devDependencies": {
+    "husky": ">=4",
+    "lint-staged": ">=10",
+    "prettier": "2.1.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/colbyfayock/next-wordpress-starter"
+  },
+  "bugs": {
+    "url": "https://github.com/colbyfayock/next-wordpress-starter/issues"
   }
 }

plugins/search-index-compiler.js

@@ -6,15 +6,14 @@ const PLUGIN_NAME = 'SearchIndex';
 const WORDPRESS_API_POSTS = '/wp-json/wp/v2/posts';
 
 class SearchIndexWebpackPlugin {
-
   constructor(options = {}) {
     this.options = options;
   }
 
   async index(compilation, options) {
     const { host, outputDirectory, outputName } = options;
 
-    if ( typeof host !== 'string' ) {
+    if (typeof host !== 'string') {
       throw new Error(`Failed to compile search index: invalid host type ${typeof host}`);
     }
 
@@ -27,18 +26,18 @@ class SearchIndexWebpackPlugin {
       return {
         title: post.title.rendered,
         slug: post.slug,
-        date: post.date
-      }
+        date: post.date,
+      };
     });
 
     try {
       const indexJson = JSON.stringify({
         generated: Date.now(),
-        posts: index
+        posts: index,
       });
       mkdirp(outputDirectory);
       await promiseToWriteFile(outputLocation, indexJson);
-    } catch(e) {
+    } catch (e) {
       console.log(`Failed to index posts: ${e.message}`);
       throw e;
     }
@@ -47,7 +46,6 @@ class SearchIndexWebpackPlugin {
   apply(compiler) {
     compiler.hooks.beforeCompile.tap(PLUGIN_NAME, async (compilation) => await this.index(compilation, this.options));
   }
-
 }
 
-module.exports = SearchIndexWebpackPlugin;
+module.exports = SearchIndexWebpackPlugin;

plugins/search-index.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-const SearchIndexWebpackPlugin = require("./search-index-compiler");
+const SearchIndexWebpackPlugin = require('./search-index-compiler');
 
 const DEFAULT_OUTPUT_DIRECTORY = './public';
 const DEFAULT_OUTPUT_NAME = 'wp-search.json';
@@ -11,19 +11,19 @@ module.exports = function indexSearch(nextConfig = {}) {
 
   return Object.assign({}, nextConfig, {
     webpack(config) {
-
-      if ( config.watchOptions ) {
+      if (config.watchOptions) {
         config.watchOptions.ignored.push(path.join('**', outputDirectory, outputName));
       }
 
-      config.plugins.push(new SearchIndexWebpackPlugin({
-        host: WORDPRESS_HOST,
-        outputDirectory,
-        outputName
-      }));
+      config.plugins.push(
+        new SearchIndexWebpackPlugin({
+          host: WORDPRESS_HOST,
+          outputDirectory,
+          outputName,
+        })
+      );
 
       return config;
-    }
+    },
   });
-
-}
+};

plugins/util.js

@@ -7,13 +7,13 @@ const fs = require('fs');
 function promiseToWriteFile(location, content) {
   return new Promise((resolve, reject) => {
     fs.writeFile(location, content, (err) => {
-      if ( err ) {
+      if (err) {
         reject(err);
         return;
       }
       resolve();
-    })
-  })
+    });
+  });
 }
 
 module.exports.promiseToWriteFile = promiseToWriteFile;
@@ -29,10 +29,10 @@ function mkdirp(directory) {
   split.forEach((dir) => {
     temp = `${temp}/${dir}`;
 
-    if (!fs.existsSync(temp) ) {
+    if (!fs.existsSync(temp)) {
       fs.mkdirSync(temp);
     }
   });
 }
 
-module.exports.mkdirp = mkdirp;
+module.exports.mkdirp = mkdirp;

src/components/Footer/Footer.js

@@ -8,11 +8,10 @@ const Footer = () => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        Powered by{' '}
-        <img src="/vercel.svg" alt="Vercel Logo" />
+        Powered by <img src="/vercel.svg" alt="Vercel Logo" />
       </a>
     </footer>
-  )
-}
+  );
+};
 
-export default Footer;
+export default Footer;

src/components/Footer/Footer.module.scss

@@ -1,5 +1,4 @@
 .footer {
-
   width: 100%;
   height: 100px;
   border-top: 1px solid #eaeaea;
@@ -19,5 +18,4 @@
     color: inherit;
     text-decoration: none;
   }
-
-}
+}

src/components/Footer/index.js

@@ -1 +1 @@
-export { default } from './Footer';
+export { default } from './Footer';

src/components/Header/Header.js

@@ -3,9 +3,9 @@ import styles from './Header.module.scss';
 const Header = ({ children }) => {
   return (
     <header className={styles.header}>
-      <div className={styles.container}>{ children }</div>
+      <div className={styles.container}>{children}</div>
     </header>
-  )
-}
+  );
+};
 
-export default Header;
+export default Header;

src/components/Header/Header.module.scss

@@ -1,15 +1,11 @@
 @import "styles/components/_container";
 
 .header {
-
   margin-bottom: 5rem;
 
   p {
-
     &:last-child {
       margin-bottom: 0;
     }
-
   }
-
-}
+}

src/components/Header/index.js

@@ -1 +1 @@
-export { default } from './Header';
+export { default } from './Header';

src/components/Layout/Layout.js

@@ -14,8 +14,8 @@ const Layout = ({ children, displayNav = true }) => {
 
   const helmetSettings = {
     defaultTitle: pageTitle,
-    titleTemplate: `%s - ${pageTitle}`
-  }
+    titleTemplate: `%s - ${pageTitle}`,
+  };
 
   return (
     <div className={styles.container}>
@@ -27,15 +27,13 @@ const Layout = ({ children, displayNav = true }) => {
         <meta property="og:site_name" content={pageTitle} />
       </Helmet>
 
-      { displayNav && <Nav />}
+      {displayNav && <Nav />}
 
-      <main className={styles.main}>
-        { children }
-      </main>
+      <main className={styles.main}>{children}</main>
 
       <Footer />
     </div>
-  )
-}
+  );
+};
 
-export default Layout;
+export default Layout;

src/components/Layout/Layout.module.scss

@@ -14,4 +14,4 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-}
+}

src/components/Layout/index.js

@@ -1 +1 @@
-export { default } from './Layout';
+export { default } from './Layout';

src/components/Nav/Nav.js

@@ -8,9 +8,9 @@ const Nav = () => {
 
   return (
     <nav className={styles.nav}>
-      <a href="/">{ name }</a>
+      <a href="/">{name}</a>
     </nav>
-  )
-}
+  );
+};
 
-export default Nav;
+export default Nav;