added prettier

Author: Sameer Ahamed

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-    "prettier.useTabs": true,
-    "editor.tabSize": 2,
-    "html.format.wrapLineLength": 80,
-    "editor.wordWrap": "on"
-}
+  "prettier.useTabs": true,
+  "editor.tabSize": 2,
+  "html.format.wrapLineLength": 80,
+  "editor.wordWrap": "on"
+}

README.md

@@ -1,10 +1,10 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/63521b78-612e-4a2f-a409-3fa8009e7f3b/deploy-status)](https://app.netlify.com/sites/frosty-perlman-9da1cb/deploys) &nbsp;<a href="https://twitter.com/intent/follow?screen_name=stackrole">
-  <img src="https://img.shields.io/twitter/follow/stackrole.svg?label=Follow%20@Stackrole" alt="Follow @stackrole" />
+<img src="https://img.shields.io/twitter/follow/stackrole.svg?label=Follow%20@Stackrole" alt="Follow @stackrole" />
 </a>
 
 # Foundation
 
-A starter to launch your blazing fast personal website and a blog, Built with [Gatsby][gatsby] and [Netlify CMS][netlifyCMS].
+A starter to launch your blazing fast personal website and a blog, Built with [Gatsby][gatsby] and [Netlify CMS][netlifycms].
 
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/stackrole/gatsby-starter-foundation)
 
@@ -13,6 +13,7 @@ Need help launching your website? My DM's are open on <a href="https://twitter.c
 [![Gatsby Starter Foundation Screenshot](static/assets/gatsby-starter-foundation-light-mode.jpg)](https://foundation.stackrole.com)
 
 ## 👌 Features
+
 - A Blog and Personal website with Netlify CMS.
 - Responsive Web Design
 - Dark / Light Mode
@@ -28,17 +29,18 @@ Need help launching your website? My DM's are open on <a href="https://twitter.c
 - Invite collaborators into Netlify CMS, without giving access to your Github account via Git Gateway
 - Gatsby Incremental Builds with Netlify.
 
-
 [![Gatsby Starter Foundation Screenshot](static/assets/gatsby-starter-foundation-dark-mode.jpg)](https://foundation.stackrole.com)
 
 ## 🚀 Quick Deploy
+
 Just click on the **Deploy to Netlify** button.
 
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/stackrole/gatsby-starter-foundation)
 
 This would fork `gatsby-starter-foundation` to your Github account and start building your website on [Netlify](https://netlify.com). Once the deployment is done. Your website will be live and website address would look like **site-name.netlify.app**
 
 ### Further Instructions
+
 - [Access to Netlify CMS](#access-to-netlify-cms)
 - [Editing content and Adding posts](#editing-content-and-adding-posts)
 - [Customing Site details](#customing-site-details)
@@ -49,34 +51,42 @@ This would fork `gatsby-starter-foundation` to your Github account and start bui
 - [Thank you from Stackrole](#thank-you)
 
 ## ⚙ Access to Netlify CMS
+
 - Goto app.netlify.com > select your website from the list
 - Goto identity and Click **Enable Identiy**
 - Click on **Invite Users** and invite yourself. You will receive an email and you need to accept the invitation to set the password.
 - Now headover to Settings > Identity > Services and **Enable Git Gateway**
-- You can also manage who can register and log in to your CMS. Goto  Settings > Identity > Registration >Registration Preferences. I would prefer to keep it to **Invite Only**, if i am the only one using it.
+- You can also manage who can register and log in to your CMS. Goto Settings > Identity > Registration >Registration Preferences. I would prefer to keep it to **Invite Only**, if i am the only one using it.
 - Now, goto to **site-name.netlify.app/admin/**, and login with your credentials.
 
 ## 📝 Editing content and Adding posts
-Once you are in your Netlify CMS, you can navigate to Posts and Pages. Here you will find a list of existing pages and posts. 
+
+Once you are in your Netlify CMS, you can navigate to Posts and Pages. Here you will find a list of existing pages and posts.
 
 You can select any existing post or page to start editing or add a **New Post**. Have fun :)
 
 ## ⚙ Customing Site details
-You can find all the website settings such website Site title, Website URL, Google anlaytics etc,.. in your Netlify CMS `Admin > Settings > General`
 
+You can find all the website settings such website Site title, Website URL, Google anlaytics etc,.. in your Netlify CMS `Admin > Settings > General`
 
 ## 🌐 Adding Custom domain to netlify website
+
 We have written a short article on [Custom domain with Netlify website](custom-domain)
 
 ## 🖥 Install Locally
+
 Use the Gatsby CLI to create a new site, specifying the `gatsby-starter-foundation` starter.
+
 ```bash
 gatsby new gatsby-starter-foundation https://github.com/stackrole/gatsby-starter-foundation
 ```
+
 > You need Node and Gatsby-CLI installed, check out Gatsby [Setup Instructions](https://www.gatsbyjs.org/tutorial/part-zero/)
 
 ### Start developing
+
 Navigate into your new site’s directory and start it up.
+
 ```shell
 cd my-hello-world-starter/
 gatsby develop
@@ -125,7 +135,7 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje
 
 8.  **`LICENSE`**: Gatsby is licensed under the MIT license.
 
-9. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
+9.  **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
 
 10. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
 
@@ -139,18 +149,18 @@ Looking for more guidance? Full documentation for Gatsby lives [on the website](
 
 - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
 
-
 ## 🙏 Thank you
-We really appreciate you taking time to build your website with our `gatsby-starter-foundation`. 
 
-I would love to get your feedback and contributions. 
+We really appreciate you taking time to build your website with our `gatsby-starter-foundation`.
+
+I would love to get your feedback and contributions.
 
 Feel free to ping [@stackrole](stackrole) for help regarding your JAMstack website, our DM's are open. And do not forget to share you website with me 😊
 
 [![Check out Stackrole.com - A Jamstack marketplace](static/assets/twitter-header.jpg)](https://stackrole.com)
 
 [gatsby]: https://gatsbyjs.org
-[netlifyCMS]: https://www.netlifycms.org
+[netlifycms]: https://www.netlifycms.org
 [stackrole]: https://stackrole.com
 [twitter]: https://twitter.com/stackrole
 [custom-domain]: https://stackrole.com/adding-custom-domain-netlify

gatsby-browser.js

@@ -7,4 +7,4 @@ export const onServiceWorkerUpdateReady = () => {
   if (answer === true) {
     window.location.reload()
   }
-}
+}

gatsby-config.js

@@ -86,7 +86,7 @@ module.exports = {
     },
     `gatsby-plugin-sass`,
     `gatsby-plugin-react-helmet`,
-    'gatsby-plugin-theme-ui',
+    "gatsby-plugin-theme-ui",
     `gatsby-plugin-netlify-cms`,
     {
       resolve: `gatsby-plugin-google-analytics`,
@@ -107,6 +107,6 @@ module.exports = {
         icon: "static" + settings.meta.iconimage,
       },
     },
-    'gatsby-plugin-offline',
+    "gatsby-plugin-offline",
   ],
 }

gatsby-node.js

@@ -8,9 +8,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const result = await graphql(`
     {
-      allMarkdownRemark(
-        sort: { order: DESC, fields: [frontmatter___date] }
-      ) {
+      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
         edges {
           node {
             id
@@ -54,7 +52,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     })
 
     // Count blog posts.
-    if (post.node.frontmatter.template === 'blog-post') {
+    if (post.node.frontmatter.template === "blog-post") {
       blogPostsCount++
     }
   })
@@ -75,7 +73,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       },
     })
   })
-
 }
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
@@ -88,4 +85,4 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       value: slug,
     })
   }
-}
+}

src/assets/scss/_defaults.scss

@@ -1,27 +1,29 @@
 *,
 *:after,
 *:before {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 html,
 body {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 }
 body {
-	font-family: var(--font-family);
-	font-size: 18px;
+  font-family: var(--font-family);
+  font-size: 18px;
 }
 code {
-	font-family: var(--font-family-mono);
-} 
+  font-family: var(--font-family-mono);
+}
 main {
-	p { line-height: 1.5; }
+  p {
+    line-height: 1.5;
+  }
 }
 a {
-	color: var(--home-link-color);
-	text-decoration: none;
-	&:hover {
-		color: var(--home-link-hover-color);
-	}
-}
+  color: var(--home-link-color);
+  text-decoration: none;
+  &:hover {
+    color: var(--home-link-hover-color);
+  }
+}

src/assets/scss/_theme-variables.scss

@@ -5,27 +5,26 @@ $breakpoint-lg: 1022px;
 $breakpoint-xl: 1200px;
 
 :root {
-
-	--font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
-	--font-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+  --font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
+    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+  --font-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+    monospace;
   --font-size-small: 12px;
 
   --home-link-color: #d4d4d4;
-  --home-link-hover-color:  var(--primary-color);
-
-  --button-color: #E5C3D3;
-  --button-alternate-color: #5C2941;
+  --home-link-hover-color: var(--primary-color);
 
-  --post-link-color: #0F070B;
+  --button-color: #e5c3d3;
+  --button-alternate-color: #5c2941;
 
+  --post-link-color: #0f070b;
 
   --nav-link-hover-bg: #111;
-  --text-color-meta: rgba(0,0,0,0.5);
+  --text-color-meta: rgba(0, 0, 0, 0.5);
 
   --label-text: #777;
-  --input-focus-border: #83AAAC;
-  
-  // CSS Grid Utility
-  --grid-gap: 30px; 
+  --input-focus-border: #83aaac;
 
-}
+  // CSS Grid Utility
+  --grid-gap: 30px;
+}

src/assets/scss/_utility.scss

@@ -10,4 +10,4 @@
   &.-love {
     color: red;
   }
-}
+}