🍭 My blog built with Gatsby. Neat.
## Table of Contents - [🎉 Features](#-features) - [🎆 EXIF extraction](#-exif-extraction) - [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3metamask) - [🕸 Related Posts](#-related-posts) - [🐝 Coinhive](#-coinhive) - [🏆 SEO component](#-seo-component) - [📈 Matomo (formerly Piwik) analytics tracking](#-matomo-formerly-piwik-analytics-tracking) - [gatsby-redirect-from](#gatsby-redirect-from) - [💎 Importing SVG assets](#-importing-svg-assets) - [🍬 Typekit component](#-typekit-component) - [✨ Development](#-development) - [🔮 Linting](#-linting) - [🎈 Add a new post](#-add-a-new-post) - [🚚 Deployment](#-deployment) - [🏛 Licenses](#-licenses) - [Posts](#-posts) - [Photos & images](#-photos-images) --- ## 🎉 Features The whole [blog](https://kremalicious.com) is a React-based Single Page App built with [Gatsby v2](https://www.gatsbyjs.org). ### 🎆 EXIF extraction Automatically extracts EXIF metadata from my photos on build time. For minimal overhead, [fast-exif](https://github.com/titarenko/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](https://github.com/mariusandra/pigeon-maps): If you want to know how this works, have a look at the respective component under - [`src/components/atoms/Exif.jsx`](src/components/atoms/Exif.jsx) - the EXIF node fields creation [`gatsby/exif.js`](gatsby/exif.js) running in [`gatsby-node.js`](gatsby-node.js) ### 💰 Cryptocurrency donation via Web3/MetaMask Lets visitors say thanks with Bitcoin or Ether. Uses [web3.js](https://github.com/ethereum/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](https://github.com/no23reason/react-qr-svg) from the addresses defined in [`config.js`](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/index.jsx) - [`src/components/Web3Donation/Account.jsx`](src/components/Web3Donation/Account.jsx) - [`src/components/Web3Donation/InputGroup.jsx`](src/components/Web3Donation/InputGroup.jsx) - [`src/components/Web3Donation/Conversion.jsx`](src/components/Web3Donation/Conversion.jsx) - [`src/components/Web3Donation/Alerts.jsx`](src/components/Web3Donation/Alerts.jsx) - [`src/components/Web3Donation/utils.jsx`](src/components/Web3Donation/utils.jsx) - [`src/components/atoms/Qr.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`](src/components/molecules/RelatedPosts.jsx) ### 🐝 Coinhive Includes a component for mining Monero with JavaScript via [Coinhive](https://coinhive.com). Functionality is opt-in on a post basis. Simply add this to any post's frontmatter to activate it for this post: ```yaml coinhive: true ``` If you want to know how this works, have a look at the respective component under - [`src/components/atoms/Coinhive.jsx`](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`](src/components/atoms/SEO.jsx) ### 📈 Matomo (formerly Piwik) analytics tracking Site sends usage statistics to my own [Matomo](https://matomo.org) installation. To make this work in Gatsby, I created and open sourced a plugin which is in use on this site. - [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo) ### gatsby-redirect-from - [gatsby-redirect-from](https://github.com/kremalicious/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](https://github.com/zabute/gatsby-plugin-svgr). Makes use of [SVGR](https://github.com/smooth-code/svgr) so SVG assets can be imported like so: ```js import { ReactComponent as Logo } from './components/svg/Logo'