blog/README.md

🍭 My blog built with Gatsby. Neat.

kremalicious.com

Table of Contents

• Table of Contents
• 🎉 Features
  • 🎆 EXIF extraction
  • 💰 Cryptocurrency donation via Web3/MetaMask
  • 🕸 Related Posts
  • 🐝 Coinhive
  • 🏆 SEO component
  • 📈 Matomo (formerly Piwik) analytics tracking
  • gatsby-redirect-from
  • 💎 Importing SVG assets
  • 🍬 Typekit component
• ✨ Development
  • 🔮 Linting
  • 🎈 Add a new post
• 🚚 Deployment
• 🏛 Licenses
  • Posts
  • Photos & images

---

🎉 Features

The whole blog is a React-based Single Page App built with Gatsby v2.

🎆 EXIF extraction

Automatically extracts EXIF metadata from my photos on build time. For minimal overhead, fast-exif parses every JPG file upon Gatsby file node creation and adds the extracted EXIF data as node fields.

This way, EXIF data is only extracted at build time and can be simply queried with GraphQL at run time.

In the end looks like this, including location display with pigeon-maps:

If you want to know how this works, have a look at the respective component under

• src/components/atoms/Exif.jsx
• the EXIF node fields creation gatsby/exif.js running in gatsby-node.js

💰 Cryptocurrency donation via Web3/MetaMask

Lets visitors say thanks with Bitcoin or Ether. Uses web3.js for sending Ether transactions via MetaMask, Brave or Mist. Component listens to account & network changes and adapts accordingly.

As a fallback, QR codes are generated with react-qr-svg from the addresses defined in config.js.

If you want to know how this works, have a look at the respective components under

• src/components/Web3Donation/index.jsx
• src/components/Web3Donation/Account.jsx
• src/components/Web3Donation/InputGroup.jsx
• src/components/Web3Donation/Conversion.jsx
• src/components/Web3Donation/Alerts.jsx
• src/components/Web3Donation/utils.jsx
• src/components/atoms/Qr.jsx

🕸 Related Posts

Under each post a list of related posts is displayed which are based on the tags of the currently viewed post. Also allows loading more related posts in place.

If you want to know how this works, have a look at the respective component under

• src/components/molecules/RelatedPosts.jsx

🐝 Coinhive

Includes a component for mining Monero with JavaScript via Coinhive.

Functionality is opt-in on a post basis. Simply add this to any post's frontmatter to activate it for this post:

coinhive: true

If you want to know how this works, have a look at the respective component under

• src/components/atoms/Coinhive.jsx

🏆 SEO component

Includes a SEO component which automatically switches all required meta tags for search engines, Twitter Cards, and Facebook OpenGraph tags based on the browsed route/page.

If you want to know how this works, have a look at the respective component under

• src/components/atoms/SEO.jsx

📈 Matomo (formerly Piwik) analytics tracking

Site sends usage statistics to my own Matomo installation. To make this work in Gatsby, I created and open sourced a plugin which is in use on this site.

• gatsby-plugin-matomo

gatsby-redirect-from

• gatsby-redirect-from

💎 Importing SVG assets

All SVG assets under src/images/ will be converted to React components with the help of gatsby-plugin-svgr. Makes use of SVGR so SVG assets can be imported like so:

import { ReactComponent as Logo } from './components/svg/Logo'

<Logo />

🍬 Typekit component

Includes a component for adding the Typekit snippet.

If you want to know how this works, have a look at the respective component under

• src/components/atoms/Typekit.jsx

✨ Development

You need to have the following tools installed on your development machine before moving on:

• Node.js
• npm

Then install dependencies and start everything up:

npm i
npm start

🔮 Linting

ESlint, Prettier, and Stylelint are setup for all linting purposes:

npm run lint

To automatically format all code files:

npm run format
npm run format:css

🎈 Add a new post

npm run new "Hello World"
npm run new "Hello World" 2017-12-27

npm run new "Hello World" photo
npm run new "Hello World" photo 2017-12-27

• scripts/new.js
• scripts/new.md

🚚 Deployment

Automatic deployments are triggered upon successful tests & builds on Travis:

• push to master initiates a live deployment
• any Pull Request, and subsequent pushes to it, initiates a beta deployment

The deploy command simply calls the scripts/deploy.sh script, syncing the contents of the public/ folder to S3:

npm run deploy

The deploymeng script can be used locally too, the branch checks are only happening for Travis builds, allowing to deploy any branch from local machine.

🏛 Licenses

The MIT License (MIT)

except for:

Posts

All post content under ./content/posts is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Photos & images

All photos & image assets under ./content/media, ./src/images, and assets sheet.psd are plain ol' copyright.

Copyright (c) 2008–2018 Matthias Kretschmann

Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission.