build & lint updates

.eslintignore

@@ -0,0 +1,4 @@
+plugins/gatsby-redirect-from
+node_modules
+public
+.cache

.eslintrc

@@ -3,9 +3,10 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
     "plugin:prettier/recommended"
   ],
-  "plugins": ["react", "graphql", "prettier"],
+  "plugins": ["react", "graphql", "prettier", "jsx-a11y"],
   "parserOptions": {
     "sourceType": "module",
     "ecmaFeatures": {

config.js

@@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports = {
+  siteTitle: 'kremalicious',
+  siteTitleShort: 'krlc',
+  siteDescription: 'Blog of designer & developer Matthias Kretschmann.',
+  siteUrl: 'https://kremalicious.com',
+  themeColor: '#88bec8',
+  backgroundColor: '#e7eef4',
+  pathPrefix: null,
+  logo: path.resolve(__dirname, 'src/images/avatar.jpg'),
+  author: {
+    name: 'Matthias Kretschmann',
+    email: 'm@kretschmann.io',
+    uri: 'https://matthiaskretschmann.com',
+    avatar: './src/images/avatar.jpg',
+    twitter: 'https://twitter.com/kremalicious',
+    github: 'https://github.com/kremalicious',
+    facebook: 'https://facebook.com/matthiaskretschmann',
+    bitcoin: '171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V',
+    ether: '0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1'
+  },
+  rss: '/feed.xml',
+  jsonfeed: '/feed.json',
+  typekitID: 'msu4qap',
+  itemsPerPage: 20,
+  menu: [
+    {
+      title: 'Photos',
+      link: '/photos'
+    },
+    {
+      title: 'Goodies',
+      link: '/goodies'
+    }
+  ]
+}

content/menu.yml

@@ -1,5 +0,0 @@
-- title: Photos
-  link: /photos
-
-- title: Goodies
-  link: /goodies

content/meta.yml

@@ -1,31 +0,0 @@
-#
-# Home:                 /
-# Archive Page:         /archive/
-# Pagination:           /page/N/
-# Post:                 /post-slug/
-# RSS Feed:             /feed/
-#
-
-# Basics
-# --------------------
-
-title:                  kremalicious
-tagline:                'Blog of designer & developer Matthias Kretschmann'
-url:                    https://kremalicious.com
-author:
-    name:               Matthias Kretschmann
-    email:              m@kretschmann.io
-    uri:                https://matthiaskretschmann.com
-    twitter:            https://twitter.com/kremalicious
-    github:             https://github.com/kremalicious
-    facebook:           https://facebook.com/matthiaskretschmann
-    googleplus:         https://plus.google.com/+MatthiasKretschmann
-    rss:                /feed.xml
-    jsonfeed:           /feed.json
-    avatar:             ../src/images/avatar.jpg
-    bitcoin:            171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
-    ether:              "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"
-
-
-typekitID:              msu4qap
-itemsPerPage:           20

gatsby-config.js

@@ -1,18 +1,12 @@
 const path = require('path')
-const fs = require('fs')
+const siteConfig = require('./config')
-const yaml = require('js-yaml')
-const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8'))
-const { title, tagline, url, author } = meta
 
 // required for gatsby-plugin-meta-redirect
 require('regenerator-runtime/runtime')
 
 module.exports = {
   siteMetadata: {
-    title: `${title}`,
+    ...siteConfig
-    description: `${tagline}`,
-    siteUrl: `${url}`,
-    author: `${author.name}`
   },
   plugins: [
     {
@@ -29,13 +23,6 @@ module.exports = {
         path: path.join(__dirname, 'content', 'media')
       }
     },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'posts',
-        path: path.join(__dirname, 'content')
-      }
-    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
@@ -129,7 +116,7 @@ module.exports = {
       options: {
         siteId: '1',
         matomoUrl: 'https://analytics.kremalicious.com',
-        siteUrl: `${url}`
+        siteUrl: `${siteConfig.siteUrl}`
       }
     },
     {
@@ -138,14 +125,14 @@ module.exports = {
         logo: './src/images/apple-touch-icon.png',
 
         // WebApp Manifest Configuration
-        appName: title.toLowerCase(),
+        appName: siteConfig.siteTitle.toLowerCase(),
-        appDescription: tagline,
+        appDescription: siteConfig.siteDescription,
-        developerName: author.name,
+        developerName: siteConfig.author.name,
-        developerURL: author.uri,
+        developerURL: siteConfig.author.uri,
         dir: 'auto',
         lang: 'en-US',
-        background: '#e7eef4',
+        background: siteConfig.backgroundColor,
-        theme_color: '#88bec8',
+        theme_color: siteConfig.themeColor,
         display: 'minimal-ui',
         orientation: 'any',
         start_url: '/?homescreen=1',
@@ -172,11 +159,9 @@ module.exports = {
           {
             site {
               siteMetadata {
-                title
-                description
                 siteUrl
-                site_url: siteUrl
                 author
+                site_url: siteUrl
               }
             }
           }
@@ -224,8 +209,8 @@ module.exports = {
         ]
       }
     },
+    'gatsby-plugin-webpack-size',
     'gatsby-plugin-react-helmet',
-    'gatsby-transformer-yaml',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     'gatsby-plugin-sitemap',

gatsby-node.js

@@ -1,13 +1,9 @@
 const path = require('path')
-const fs = require('fs')
-const yaml = require('js-yaml')
 const { createFilePath } = require('gatsby-source-filesystem')
 const fastExif = require('fast-exif')
 const Fraction = require('fraction.js')
 const dms2dec = require('dms2dec')
-
+const { itemsPerPage } = require('./config')
-const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8'))
-const { itemsPerPage } = meta
 
 const redirects = [
   { f: '/feed', t: '/feed.xml' },

package.json

@@ -9,15 +9,19 @@
   "scripts": {
     "start": "gatsby develop",
     "build": "gatsby build",
-    "format": "prettier --write 'src/**/*.{js,jsx}'",
+    "ssr": "npm run build && serve -s public/",
-    "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
+    "format": "run-p format:js format:css format:md format:yaml",
-    "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.jsx",
+    "format:js": "prettier-eslint --write 'src/**/*.{js,jsx}'",
+    "format:css": "prettier-stylelint --write",
+    "format:md": "prettier --write \"**/*.md\" --no-semi",
+    "format:yaml": "prettier --write \"**/*.y?(a)ml\"",
+    "lint:js": "eslint --ext .js,.jsx .",
     "lint:css": "stylelint ./src/**/*.{css,scss}",
-    "lint:md": "markdownlint ./content/posts/**/*.md && markdownlint ./README.md",
+    "lint:md": "markdownlint \"**/*.md\"",
-    "lint": "npm run lint:md && npm run lint:js && npm run lint:css",
+    "lint:yaml": "prettier --list-different \"**/*.y?(a)ml\"",
+    "lint": "run-p --continue-on-error lint:js lint:css lint:yaml",
     "test": "npm run lint",
     "deploy": "./scripts/deploy.sh",
-    "svg": "./scripts/svg.sh",
     "new": "babel-node ./scripts/new.js"
   },
   "browserslist": [
@@ -41,6 +45,7 @@
     "gatsby-plugin-sharp": "^2.0.5",
     "gatsby-plugin-sitemap": "^2.0.1",
     "gatsby-plugin-svgr": "^2.0.0-alpha",
+    "gatsby-plugin-webpack-size": "^0.0.2",
     "gatsby-redirect-from": "^0.1.1",
     "gatsby-remark-autolink-headers": "^2.0.6",
     "gatsby-remark-copy-linked-files": "^2.0.5",
@@ -50,7 +55,6 @@
     "gatsby-source-filesystem": "^2.0.1",
     "gatsby-transformer-remark": "^2.1.4",
     "gatsby-transformer-sharp": "^2.1.3",
-    "gatsby-transformer-yaml": "^2.1.1",
     "graphql": "^0.13.2",
     "intersection-observer": "^0.5.0",
     "load-script": "^1.0.0",
@@ -77,12 +81,15 @@
     "eslint-config-prettier": "^3.1.0",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-graphql": "^2.1.1",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^2.7.0",
     "eslint-plugin-react": "^7.11.1",
     "markdownlint": "^0.11.0",
     "markdownlint-cli": "^0.13.0",
+    "npm-run-all": "^4.1.3",
     "ora": "^3.0.0",
     "prettier": "^1.14.3",
+    "prettier-eslint-cli": "^4.7.1",
     "prettier-stylelint": "^0.4.2",
     "stylelint": "^9.6.0",
     "stylelint-config-css-modules": "^1.3.0",

src/components/atoms/PostActions.jsx

@@ -42,9 +42,7 @@ export default class PostActions extends PureComponent {
           <h1 className={styles.actionTitle}>Found something useful?</h1>
           <p className={styles.actionText}>
             Say thanks{' '}
-            <a href="#" onClick={this.toggleModal}>
+            <button onClick={this.toggleModal}>with Bitcoins or Ether.</button>
-              with Bitcoins or Ether.
-            </a>
           </p>
         </article>
 

src/components/atoms/SEO.jsx

@@ -5,19 +5,15 @@ import Helmet from 'react-helmet'
 
 const query = graphql`
   query {
-    contentYaml {
+    site {
-      title
+      siteMetadata {
-      tagline
+        siteTitle
-      url
+        siteDescription
+        siteUrl
         author {
           name
           twitter
-        avatar {
+          avatar
-          childImageSharp {
-            resize(width: 160) {
-              src
-            }
-          }
         }
       }
     }
@@ -134,7 +130,7 @@ const SEO = ({ post, slug, postSEO }) => (
   <StaticQuery
     query={query}
     render={data => {
-      const siteMeta = data.contentYaml
+      const siteMeta = data.site.siteMetadata
       let title
       let description
       let image
@@ -142,20 +138,20 @@ const SEO = ({ post, slug, postSEO }) => (
 
       if (postSEO) {
         const postMeta = post.frontmatter
-        title = `${postMeta.title} ¦ ${siteMeta.tagline}`
+        title = `${postMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
         description = postMeta.description ? postMeta.description : post.excerpt
         image = postMeta.image
           ? postMeta.image.childImageSharp.fluid.src
-          : siteMeta.author.avatar.childImageSharp.resize.src
+          : siteMeta.author.avatar
-        postURL = `${siteMeta.url}${slug}`
+        postURL = `${siteMeta.siteUrl}${slug}`
       } else {
-        title = `${siteMeta.title} ¦ ${siteMeta.tagline}`
+        title = `${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
-        description = siteMeta.tagline
+        description = siteMeta.siteDescription
-        image = siteMeta.author.avatar.childImageSharp.resize.src
+        image = siteMeta.author.avatar
       }
 
-      image = `${siteMeta.url}${image}`
+      image = `${siteMeta.siteUrl}${image}`
-      const blogURL = siteMeta.url
+      const blogURL = siteMeta.siteUrl
       const url = postSEO ? postURL : blogURL
 
       let schema = createSchemaOrg(

src/components/atoms/SearchInput.jsx

@@ -4,7 +4,7 @@ import styles from './SearchInput.module.scss'
 
 const SearchInput = props => (
   <Fragment>
-    <Input autoFocus type="search" placeholder="Search everything" {...props} />
+    <Input type="search" placeholder="Search everything" {...props} />
     <button className={styles.searchInputClose} onClick={props.onToggle}>
       &times;
     </button>

src/components/atoms/Typekit.jsx

@@ -19,17 +19,19 @@ const TypekitScript = typekitID => (
 
 const query = graphql`
   query {
-    contentYaml {
+    site {
+      siteMetadata {
         typekitID
       }
     }
+  }
 `
 
 const Typekit = () => (
   <StaticQuery
     query={query}
     render={data => {
-      const { typekitID } = data.contentYaml
+      const { typekitID } = data.site.siteMetadata
 
       return (
         typekitID && (

src/components/molecules/Menu.jsx

@@ -6,9 +6,9 @@ import styles from './Menu.module.scss'
 
 const query = graphql`
   query {
-    allMenuYaml {
+    site {
-      edges {
+      siteMetadata {
-        node {
+        menu {
           title
           link
         }
@@ -39,12 +39,12 @@ export default class Menu extends PureComponent {
         <StaticQuery
           query={query}
           render={data => {
-            const { edges } = data.allMenuYaml
+            const { menu } = data.site.siteMetadata
 
-            const MenuItems = edges.map(({ node }) => (
+            const MenuItems = menu.map(item => (
-              <li key={node.title}>
+              <li key={item.title}>
-                <Link onClick={this.toggleMenu} to={node.link}>
+                <Link onClick={this.toggleMenu} to={item.link}>
-                  {node.title}
+                  {item.title}
                 </Link>
               </li>
             ))

src/components/molecules/ModalThanks.jsx

@@ -9,20 +9,22 @@ import styles from './ModalThanks.module.scss'
 
 const query = graphql`
   query {
-    contentYaml {
+    site {
+      siteMetadata {
         author {
           bitcoin
           ether
         }
       }
     }
+  }
 `
 
 const ModalThanks = ({ ...props }) => (
   <StaticQuery
     query={query}
     render={data => {
-      const { author } = data.contentYaml
+      const { author } = data.site.siteMetadata
 
       return (
         <Modal

src/components/molecules/Subscribe.jsx

@@ -5,8 +5,8 @@ import styles from './Subscribe.module.scss'
 
 const query = graphql`
   query {
-    contentYaml {
+    site {
-      author {
+      siteMetadata {
         rss
         jsonfeed
       }
@@ -18,7 +18,7 @@ const Subscribe = () => (
   <StaticQuery
     query={query}
     render={data => {
-      const { rss, jsonfeed } = data.contentYaml.author
+      const { rss, jsonfeed } = data.site.siteMetadata
 
       const links = [rss, jsonfeed]
 

src/components/molecules/Vcard.jsx

@@ -1,24 +1,20 @@
 import React from 'react'
 import { StaticQuery, graphql } from 'gatsby'
-import Img from 'gatsby-image'
+// import Img from 'gatsby-image'
 import IconLinks from './IconLinks'
 import styles from './Vcard.module.scss'
 
 const query = graphql`
   query {
-    contentYaml {
+    site {
+      siteMetadata {
         author {
           name
           uri
           twitter
           github
           facebook
-        avatar {
+          avatar
-          childImageSharp {
-            fixed(width: 80, height: 80) {
-              ...GatsbyImageSharpFixed
-            }
-          }
         }
       }
     }
@@ -36,13 +32,13 @@ const Vcard = () => (
         avatar,
         name,
         uri
-      } = data.contentYaml.author
+      } = data.site.siteMetadata.author
 
       const links = [twitter, github, facebook]
 
       return (
         <div className="vcard author">
-          <Img className={styles.avatar} fixed={avatar.childImageSharp.fixed} />
+          <img className={styles.avatar} src={avatar} alt="avatar" />
           <p className={styles.description}>
             Blog of designer &amp; developer{' '}
             <a className="fn" rel="author" href={uri}>

src/components/organisms/Footer.jsx

@@ -13,7 +13,8 @@ import styles from './Footer.module.scss'
 
 const query = graphql`
   query {
-    contentYaml {
+    site {
+      siteMetadata {
         author {
           name
           uri
@@ -22,6 +23,7 @@ const query = graphql`
         }
       }
     }
+  }
 `
 
 export default class Footer extends PureComponent {
@@ -44,7 +46,7 @@ export default class Footer extends PureComponent {
       <StaticQuery
         query={query}
         render={data => {
-          const { name, uri, bitcoin, github } = data.contentYaml.author
+          const { name, uri, bitcoin, github } = data.site.siteMetadata.author
 
           return (
             <footer role="contentinfo" className={styles.footer}>
@@ -66,14 +68,10 @@ export default class Footer extends PureComponent {
                       <Github />
                       View source
                     </a>
-                    <a
+                    <button className={styles.btc} onClick={this.toggleModal}>
-                      href="#"
-                      className={styles.btc}
-                      onClick={this.toggleModal}
-                    >
                       <Bitcoin />
                       <code>{bitcoin}</code>
-                    </a>
+                    </button>
                   </p>
 
                   <ModalThanks

src/styles/_syntax.scss

@@ -173,9 +173,9 @@ copyright  Copyright (C) 2017                                  +
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   */
 
-/*+------+
+/* +------+
     + Base +
-    +------+*/
+    +------+ */
 .source {
     -webkit-font-smoothing: auto;
     color: #d8dee9;
@@ -185,9 +185,9 @@ copyright  Copyright (C) 2017                                  +
     color: #d8dee9;
 }
 
-/*+----------+
+/* +----------+
     + Entities +
-    +----------+*/
+    +----------+ */
 .comment {
     color: #4c566a;
 }
@@ -516,7 +516,7 @@ copyright  Copyright (C) 2017                                  +
     color: #d8dee9;
 }
 
-/*+--- Languages ---+*/
+/* +--- Languages ---+ */
 
 /*
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -976,9 +976,9 @@ copyright  Copyright (C) 2017                                  +
     (http://scala-lang.org)
   */
 
-/*+------+
+/* +------+
     + Java +
-    +------+*/
+    +------+ */
 .source.java .comment.block.javadoc .variable.parameter {
     color: #88c0d0;
 }
@@ -1012,9 +1012,9 @@ copyright  Copyright (C) 2017                                  +
     color: #81a1c1;
 }
 
-/*+-------+
+/* +-------+
     + Scala +
-    +-------+*/
+    +-------+ */
 .source.scala .entity.name.package {
     color: #8fbcbb;
 }
@@ -1035,9 +1035,9 @@ copyright  Copyright (C) 2017                                  +
     color: #8fbcbb;
 }
 
-/*+-----------------+
+/* +-----------------+
     + Java Properties +
-    +-----------------+*/
+    +-----------------+ */
 .source.java-properties .meta.key-pair {
     color: #81a1c1;
 }
@@ -1396,9 +1396,9 @@ copyright  Copyright (C) 2017                                  +
     font-weight: bold;
 }
 
-/*+----------------+
+/* +----------------+
     + Theme Settings +
-    +----------------+*/
+    +----------------+ */
 
 /*
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -1411,11 +1411,11 @@ copyright  Copyright (C) 2017                                  +
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   */
 
-/*+-------------+
+/* +-------------+
   + Accessibility +
-  +---------------+*/
+  +---------------+ */
 
-/*+--- Custom Comment Contrast ---+*/
+/* +--- Custom Comment Contrast ---+ */
 .theme-nord-atom-syntax-accessibility-custom-comment-contrast .comment {
     color: #4c566a;
 }

src/templates/Post.jsx

@@ -18,7 +18,7 @@ import styles from './Post.module.scss'
 
 const Post = ({ data, location }) => {
   const { markdownRemark: post } = data
-  const { contentYaml: meta } = data
+  const meta = data.site.siteMetadata
   const {
     title,
     image,
@@ -48,7 +48,7 @@ const Post = ({ data, location }) => {
           {image && image.fields && <Exif exif={image.fields.exif} />}
           <PostContent post={post} />
           {type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
-          <PostActions slug={slug} url={meta.url} />
+          <PostActions slug={slug} url={meta.siteUrl} />
           <PostMeta post={post} meta={meta} />
         </article>
 
@@ -117,11 +117,13 @@ export const pageQuery = graphql`
       rawMarkdownBody
     }
 
-    contentYaml {
+    site {
-      url
+      siteMetadata {
+        siteUrl
         author {
           uri
         }
       }
     }
+  }
 `

static/robots.txt

@@ -2,7 +2,7 @@ User-agent: *
 Disallow: /search/
 Disallow: /page/
 Disallow: /*/page/
-Disallow: /tag/
+Disallow: /tags/
 Disallow: /api/
 
 Sitemap: https://kremalicious.com/sitemap.xml