Merge pull request #2 from clean-commit/0.3.1

0.3.1

content/blog/hello-world.md

@@ -1,5 +1,5 @@
 ---
 type: article
-layout: article
+layout: Article
 title: Hello World
 ---

content/settings/theme-settings.md

@@ -1,5 +1,4 @@
 ---
-templateKey: theme-settings
 layout: null
 type: settings
 contact:

gatsby-node.js

@@ -33,7 +33,10 @@ exports.createPages = ({ actions, graphql }) => {
 
     // Filter out the footer, navbar, and meetups so we don't create pages for those
     const postOrPage = result.data.allMarkdownRemark.edges.filter((edge) => {
-      if (edge.node.frontmatter.layout == null) {
+      if (
+        edge.node.frontmatter.layout == null ||
+        edge.node.frontmatter.layout == 'hidden'
+      ) {
         return false
       } else {
         return true

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-starter",
   "description": "Clean starter for gatsby website, with image optimization and GDPR cookies",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "author": "Wojciech Kałużny",
   "dependencies": {
     "classnames": "^2.2.6",

src/cms/partials/seo.js

@@ -13,7 +13,7 @@ const seo = {
     {
       label: 'Meta Description',
       name: 'description',
-      widget: 'string',
+      widget: 'text',
       required: false,
     },
     {
@@ -22,7 +22,7 @@ const seo = {
       widget: 'image',
       required: false,
     },
-  ]
+  ],
 }
 
-export default seo
+export default seo

src/pages/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { graphql } from 'gatsby'
 import PropTypes from 'prop-types'
 import ReactSVG from 'react-svg'
 import Layout from '@/components/Layout'
@@ -8,28 +9,50 @@ export const HomePageTemplate = ({ data }) => {
   return (
     <>
       <div className='min-h-screen flex items-center justify-center'>
-        <div className="container px-5 sm:px-10">
-          <section className="w-full bg-teal-100 py-20 px-5 rounded-lg shadow border-grey-lighter border">
+        <div className='container px-5 sm:px-10'>
+          <section className='w-full bg-teal-100 py-20 px-5 rounded-lg shadow border-grey-lighter border'>
             <div className='text-center mx-auto'>
-              <ReactSVG src="/img/logo.svg" className="logo"></ReactSVG>
+              <ReactSVG src='/img/logo.svg' className='logo'></ReactSVG>
             </div>
-            <div className="text-center mt-6">
-              <span className="mr-3">
-                <GitHubButton href="https://github.com/clean-commit/gatsby-starter" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-show-count="true" data-icon="octicon-star" aria-label="Star clean-commit/gatsby-starter on GitHub">Star</GitHubButton>
+            <div className='text-center mt-6'>
+              <span className='mr-3'>
+                <GitHubButton
+                  href='https://github.com/clean-commit/gatsby-starter'
+                  data-color-scheme='no-preference: dark; light: light; dark: dark;'
+                  data-show-count='true'
+                  data-icon='octicon-star'
+                  aria-label='Star clean-commit/gatsby-starter on GitHub'>
+                  Star
+                </GitHubButton>
               </span>
               <span>
-                <GitHubButton href="https://github.com/clean-commit/gatsby-starter/archive/master.zip" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-icon="octicon-download" aria-label="Download clean-commit/gatsby-starter on GitHub">Download</GitHubButton>
+                <GitHubButton
+                  href='https://github.com/clean-commit/gatsby-starter/archive/master.zip'
+                  data-color-scheme='no-preference: dark; light: light; dark: dark;'
+                  data-icon='octicon-download'
+                  aria-label='Download clean-commit/gatsby-starter on GitHub'>
+                  Download
+                </GitHubButton>
               </span>
             </div>
 
-
-            {data.links.length > 0 ? <div className="links">
-              {
-                data.links.map(({ link: link }, i) => {
-                  return <a href={link.url} key={i} target="_blank" className="links__item">{link.content}</a>
-                })
-              }
-            </div> : ''}
+            {data.links.length > 0 ? (
+              <div className='links'>
+                {data.links.map(({ link: link }, i) => {
+                  return (
+                    <a
+                      href={link.url}
+                      key={i}
+                      target='_blank'
+                      className='links__item'>
+                      {link.content}
+                    </a>
+                  )
+                })}
+              </div>
+            ) : (
+              ''
+            )}
           </section>
         </div>
       </div>
@@ -41,7 +64,6 @@ const HomePage = ({ data }) => {
   const { frontmatter } = data.markdownRemark
 
   return (
-
     <Layout hideNav={true}>
       <HomePageTemplate data={frontmatter} />
     </Layout>
@@ -69,9 +91,7 @@ export const pageQuery = graphql`
         }
       }
     }
-    
   }
 `
 
-
 export default HomePage

src/styles/common/_forms.scss

@@ -1,117 +1,82 @@
 .input,
 .textarea {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 2px;
-  max-width: 100%;
-  width: 100%;
+  @apply border border-solid w-full;
   transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out;
 
-  &::placeholder {
-    // color: darken(color(bg, 3), 8%);
-  }
-
-  &::-ms-input-placeholder {
-    // color: darken(color(bg, 3), 8%);
-  }
-
+  &::placeholder,
+  &::-ms-input-placeholder,
   &:-ms-input-placeholder {
-    // color: darken(color(bg, 3), 8%);
+    @apply text-black;
   }
 
   &:hover {
-    // border-color: darken(color(primary, 1), 10%);
+    @apply border-grey-darker;
   }
 
   &:active,
   &:focus {
-    outline: none;
-    // border-color: color(primary, 1);
-  }
+    @apply outline-none;
 
   &[disabled] {
-    cursor: not-allowed;
-    // background-color: color(bg, 3);
-    // border-color: color(bg, 3);
+    @apply cursor-not-allowed;
   }
 }
 
 .form-container {
-  position: relative;
-  overflow: hidden;
+  @apply relative overflow-hidden;
+
   &__status {
-    display: block;
-    position: absolute;
-    z-index: 9;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @apply flex items-center justify-center absolute z-10 w-full h-full opacity-0;
     transform: translateY(100%);
-    opacity: 0;
     transition: opacity 0.4s ease, transform 0.4s ease;
 
     h1 {
-      margin: 0;
-      text-align: center;
+      @apply m-0 text-center;
     }
 
     &--active {
+      @apply opacity-100;
       transform: translateY(0);
-      opacity: 1;
     }
   }
 }
 
 .label {
-  @apply font-bold text-base;
-  padding-left: 2px;
-  margin-bottom: 4px;
+  @apply font-bold text-base mb-2 pl-1;
 }
 
 .input {
-  -moz-appearance: none;
-  -webkit-appearance: none;
+  @apply appearance-none px-5 py-3 shadow-none;
   line-height: 20px;
-  padding: 13px 16px;
-  height: 48px;
-  box-shadow: none;
+  height: 48px; 
 
   .inline-input {
-    display: inline;
+    @apply inline;
   }
 }
 
 .textarea {
-  display: block;
-  min-width: 100%;
+  @apply block min-w-full resize-y px-5 py-3;
   min-height: 200px;
-  resize: vertical;
-  padding: 13px 16px;
 
   .inline-textarea {
-    display: inline;
+    @apply inline;
   }
 }
 
 .control {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 15px;
+  @apply flex flex-col mb-4;
   &__error {
-    padding-left: 2px;
-
-    @apply font-bold;
+    @apply font-bold pl-1; 
   }
 }
 
 .field-grouped {
-  margin-bottom: 15px;
+  @apply mb-4;
   > .control {
-    margin-bottom: 0;
+    @apply mb-0;
     &:not(:last-child) {
-      margin-bottom: 8px;
+      @apply mb-2;
     }
   }
 }

src/styles/common/_global.scss

@@ -1,13 +1,11 @@
 body {
-  margin: 0;
-  padding: 0;
+  @apply m-0 p-0;
 }
 
 a {
-  text-decoration: none;
-  font-weight: bold;
+  @apply font-bold no-underline;
 }
 
 img {
-  max-width: 100%;
+  @apply max-w-full;
 }

src/styles/pages/page.scss

@@ -1,15 +1,13 @@
 .logo {
   svg {
-    @apply mx-auto;
+    @apply mx-auto w-auto;
     height: 30px;
-    width: auto;
   }
 }
 
 .links {
   @apply flex justify-center flex-wrap items-center mt-6;
   &__item {
-    margin: 5px;
-    @apply text-sm;
+    @apply text-sm m-2;
   }
 }