diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..ea92f360 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +plugins/gatsby-redirect-from +node_modules +public +.cache diff --git a/.eslintrc b/.eslintrc index bcf8949d..48d2d1d1 100644 --- a/.eslintrc +++ b/.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": { diff --git a/.travis.yml b/.travis.yml index 6abe4d23..edab949d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,7 +11,7 @@ install: script: - npm test - - npm run build + - travis_wait 60 npm run build after_success: - pip install --user awscli diff --git a/config.js b/config.js new file mode 100644 index 00000000..830390b8 --- /dev/null +++ b/config.js @@ -0,0 +1,33 @@ +module.exports = { + siteTitle: 'kremalicious', + siteTitleShort: 'krlc', + siteDescription: 'Blog of designer & developer Matthias Kretschmann.', + siteUrl: 'https://kremalicious.com', + themeColor: '#88bec8', + backgroundColor: '#e7eef4', + pathPrefix: null, + 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', + bitcoin: '171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V', + ether: '0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1' + }, + rss: '/feed.xml', + jsonfeed: '/feed.json', + typekitID: 'msu4qap', + itemsPerPage: 20, + menu: [ + { + title: 'Photos', + link: '/photos' + }, + { + title: 'Goodies', + link: '/goodies' + } + ] +} diff --git a/content/menu.yml b/content/menu.yml deleted file mode 100644 index 1fdba700..00000000 --- a/content/menu.yml +++ /dev/null @@ -1,5 +0,0 @@ -- title: Photos - link: /photos - -- title: Goodies - link: /goodies diff --git a/content/meta.yml b/content/meta.yml deleted file mode 100644 index 75529cc2..00000000 --- a/content/meta.yml +++ /dev/null @@ -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 diff --git a/gatsby-config.js b/gatsby-config.js index e6f395a1..790ed403 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,18 +1,12 @@ const path = require('path') -const fs = require('fs') -const yaml = require('js-yaml') -const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) -const { title, tagline, url, author } = meta +const siteConfig = require('./config') // required for gatsby-plugin-meta-redirect require('regenerator-runtime/runtime') module.exports = { siteMetadata: { - title: `${title}`, - description: `${tagline}`, - siteUrl: `${url}`, - author: `${author.name}` + ...siteConfig }, 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(), - appDescription: tagline, - developerName: author.name, - developerURL: author.uri, + appName: siteConfig.siteTitle.toLowerCase(), + appDescription: siteConfig.siteDescription, + developerName: siteConfig.author.name, + developerURL: siteConfig.author.uri, dir: 'auto', lang: 'en-US', - background: '#e7eef4', - theme_color: '#88bec8', + background: siteConfig.backgroundColor, + theme_color: siteConfig.themeColor, display: 'minimal-ui', orientation: 'any', start_url: '/?homescreen=1', @@ -172,26 +159,27 @@ module.exports = { { site { siteMetadata { - title - description + siteTitle + siteDescription siteUrl + title: siteTitle + description: siteDescription site_url: siteUrl - author } } } `, feeds: [ { - serialize: ({ query: { site, allMarkdownRemark } }) => { + serialize: ({ query: { allMarkdownRemark } }) => { return allMarkdownRemark.edges.map(edge => ({ title: edge.node.frontmatter.title, date: edge.node.fields.date, description: feedContent(edge), - url: site.siteMetadata.siteUrl + edge.node.fields.slug, + url: siteConfig.siteUrl + edge.node.fields.slug, categories: edge.node.frontmatter.tags, - author: site.siteMetadata.author, - guid: site.siteMetadata.siteUrl + edge.node.fields.slug + author: siteConfig.author.name, + guid: siteConfig.siteUrl + edge.node.fields.slug })) }, query: ` @@ -224,8 +212,8 @@ module.exports = { ] } }, + 'gatsby-plugin-webpack-size', 'gatsby-plugin-react-helmet', - 'gatsby-transformer-yaml', 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', 'gatsby-plugin-sitemap', diff --git a/gatsby-node.js b/gatsby-node.js index ddf895c2..b6734dbc 100644 --- a/gatsby-node.js +++ b/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 meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) -const { itemsPerPage } = meta +const { itemsPerPage } = require('./config') const redirects = [ { f: '/feed', t: '/feed.xml' }, diff --git a/package.json b/package.json index fabe68c2..7635ad8d 100644 --- a/package.json +++ b/package.json @@ -9,15 +9,19 @@ "scripts": { "start": "gatsby develop", "build": "gatsby build", - "format": "prettier --write 'src/**/*.{js,jsx}'", - "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", - "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.jsx", + "ssr": "npm run build && serve -s public/", + "format": "run-p format:js format:css format:md format:yaml", + "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": "npm run lint:md && npm run lint:js && npm run lint:css", + "lint:md": "markdownlint \"**/*.md\"", + "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": [ @@ -27,11 +31,11 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", - "gatsby": "^2.0.12", - "gatsby-image": "^2.0.12", + "gatsby": "^2.0.13", + "gatsby-image": "^2.0.13", "gatsby-plugin-catch-links": "^2.0.3", "gatsby-plugin-favicon": "^3.1.4", - "gatsby-plugin-feed": "^2.0.5", + "gatsby-plugin-feed": "^2.0.6", "gatsby-plugin-lunr": "^1.2.0", "gatsby-plugin-matomo": "^0.5.0", "gatsby-plugin-meta-redirect": "^1.1.0", @@ -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", @@ -48,9 +53,8 @@ "gatsby-remark-images": "^2.0.3", "gatsby-remark-smartypants": "^2.0.5", "gatsby-source-filesystem": "^2.0.1", - "gatsby-transformer-remark": "^2.1.4", + "gatsby-transformer-remark": "^2.1.5", "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": "^3.0.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", diff --git a/src/components/atoms/PostActions.jsx b/src/components/atoms/PostActions.jsx index c1f10b44..8c3ff3c3 100644 --- a/src/components/atoms/PostActions.jsx +++ b/src/components/atoms/PostActions.jsx @@ -42,9 +42,9 @@ export default class PostActions extends PureComponent {

Found something useful?

Say thanks{' '} - +

diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx index a72b53c1..0a353834 100644 --- a/src/components/atoms/SEO.jsx +++ b/src/components/atoms/SEO.jsx @@ -5,19 +5,22 @@ import Helmet from 'react-helmet' const query = graphql` query { - contentYaml { - title - tagline - url - author { - name - twitter - avatar { - childImageSharp { - resize(width: 160) { - src - } - } + site { + siteMetadata { + siteTitle + siteDescription + siteUrl + author { + name + twitter + } + } + } + + logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) { + edges { + node { + relativePath } } } @@ -88,8 +91,8 @@ const MetaTags = ({ siteMeta }) => ( @@ -134,7 +137,9 @@ const SEO = ({ post, slug, postSEO }) => ( { - const siteMeta = data.contentYaml + const siteMeta = data.site.siteMetadata + const logo = data.logo.edges[0].node.relativePath + let title let description let image @@ -142,20 +147,18 @@ 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 - postURL = `${siteMeta.url}${slug}` + image = postMeta.image ? postMeta.image.childImageSharp.fluid.src : logo + postURL = `${siteMeta.siteUrl}${slug}` } else { - title = `${siteMeta.title} ¦ ${siteMeta.tagline}` - description = siteMeta.tagline - image = siteMeta.author.avatar.childImageSharp.resize.src + title = `${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}` + description = siteMeta.siteDescription + image = logo } - image = `${siteMeta.url}${image}` - const blogURL = siteMeta.url + image = `${siteMeta.siteUrl}${image}` + const blogURL = siteMeta.siteUrl const url = postSEO ? postURL : blogURL let schema = createSchemaOrg( diff --git a/src/components/atoms/SearchInput.jsx b/src/components/atoms/SearchInput.jsx index 04ef9fca..654dc90a 100644 --- a/src/components/atoms/SearchInput.jsx +++ b/src/components/atoms/SearchInput.jsx @@ -4,7 +4,7 @@ import styles from './SearchInput.module.scss' const SearchInput = props => ( - + diff --git a/src/components/atoms/Typekit.jsx b/src/components/atoms/Typekit.jsx index 82fe3a53..5b4d00b9 100644 --- a/src/components/atoms/Typekit.jsx +++ b/src/components/atoms/Typekit.jsx @@ -19,8 +19,10 @@ const TypekitScript = typekitID => ( const query = graphql` query { - contentYaml { - typekitID + site { + siteMetadata { + typekitID + } } } ` @@ -29,7 +31,7 @@ const Typekit = () => ( { - const { typekitID } = data.contentYaml + const { typekitID } = data.site.siteMetadata return ( typekitID && ( diff --git a/src/components/molecules/Menu.jsx b/src/components/molecules/Menu.jsx index e97c37cc..c3278cb8 100644 --- a/src/components/molecules/Menu.jsx +++ b/src/components/molecules/Menu.jsx @@ -6,9 +6,9 @@ import styles from './Menu.module.scss' const query = graphql` query { - allMenuYaml { - edges { - node { + site { + siteMetadata { + menu { title link } @@ -39,12 +39,12 @@ export default class Menu extends PureComponent { { - const { edges } = data.allMenuYaml + const { menu } = data.site.siteMetadata - const MenuItems = edges.map(({ node }) => ( -
  • - - {node.title} + const MenuItems = menu.map(item => ( +
  • + + {item.title}
    • )) diff --git a/src/components/molecules/ModalThanks.jsx b/src/components/molecules/ModalThanks.jsx index 56a1ca2d..6aa723bd 100644 --- a/src/components/molecules/ModalThanks.jsx +++ b/src/components/molecules/ModalThanks.jsx @@ -9,10 +9,12 @@ import styles from './ModalThanks.module.scss' const query = graphql` query { - contentYaml { - author { - bitcoin - ether + site { + siteMetadata { + author { + bitcoin + ether + } } } } @@ -22,7 +24,7 @@ const ModalThanks = ({ ...props }) => ( { - const { author } = data.contentYaml + const { author } = data.site.siteMetadata return ( ( { - const { rss, jsonfeed } = data.contentYaml.author + const { rss, jsonfeed } = data.site.siteMetadata const links = [rss, jsonfeed] diff --git a/src/components/molecules/Vcard.jsx b/src/components/molecules/Vcard.jsx index 3cb67cf0..7bcbce31 100644 --- a/src/components/molecules/Vcard.jsx +++ b/src/components/molecules/Vcard.jsx @@ -6,17 +6,24 @@ import styles from './Vcard.module.scss' const query = graphql` query { - contentYaml { - author { - name - uri - twitter - github - facebook - avatar { + site { + siteMetadata { + author { + name + uri + twitter + github + facebook + } + } + } + + avatar: allFile(filter: { name: { eq: "avatar" } }) { + edges { + node { childImageSharp { - fixed(width: 80, height: 80) { - ...GatsbyImageSharpFixed + fixed(width: 80, height: 80, quality: 90) { + ...GatsbyImageSharpFixed_withWebp_noBase64 } } } @@ -33,16 +40,22 @@ const Vcard = () => ( twitter, github, facebook, - avatar, name, uri - } = data.contentYaml.author + } = data.site.siteMetadata.author + const avatar = data.avatar.edges[0].node.childImageSharp.fixed const links = [twitter, github, facebook] return (
    - + avatar

    Blog of designer & developer{' '}