1
0
Fork 0
blog/README.md

268 lines
11 KiB
Markdown
Raw Normal View History

2018-09-27 23:15:17 +02:00
<p align="center">
<a href="https://kremalicious.com"><img src="src/images/github-header.png" /></a>
</p>
<p align="center">
<strong>🍭 My blog built with <a href="http://gatsbyjs.org">Gatsby</a>. Neat.</strong>
</p>
<p align="center">
<a href="https://kremalicious.com">kremalicious.com</a>
</p>
<p align="center">
<a href="https://travis-ci.com/kremalicious/blog"><img src="https://travis-ci.com/kremalicious/blog.svg?branch=master" /></a>
<a href="https://codeclimate.com/github/kremalicious/blog/maintainability"><img src="https://api.codeclimate.com/v1/badges/4e86c791349cd12368cd/maintainability" /></a>
2019-05-02 21:11:52 +02:00
<a href="https://codeclimate.com/github/kremalicious/blog/test_coverage"><img src="https://api.codeclimate.com/v1/badges/4e86c791349cd12368cd/test_coverage" /></a>
2018-09-27 23:15:17 +02:00
<a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/kremalicious/blog.svg" /></a>
</p>
2013-11-20 23:33:58 +01:00
2018-11-21 23:39:09 +01:00
---
2013-12-04 23:52:22 +01:00
2018-09-29 21:27:30 +02:00
- [🎉 Features](#-features)
- [🎆 EXIF extraction](#-exif-extraction)
2018-10-13 18:13:36 +02:00
- [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3metamask)
2018-11-18 16:41:37 +01:00
- [🔍 Search](#-search)
2018-11-18 19:54:25 +01:00
- [🕸 Related Posts](#-related-posts)
2018-11-21 23:39:09 +01:00
- [📝 GitHub changelog rendering](#-github-changelog-rendering)
2019-10-03 19:42:12 +02:00
- [🌗 Theme Switcher](#-theme-switcher)
2018-09-29 21:27:30 +02:00
- [🏆 SEO component](#-seo-component)
- [📈 Matomo (formerly Piwik) analytics tracking](#-matomo-formerly-piwik-analytics-tracking)
2018-10-11 21:14:15 +02:00
- [gatsby-redirect-from](#gatsby-redirect-from)
2018-09-29 21:27:30 +02:00
- [💎 Importing SVG assets](#-importing-svg-assets)
- [🍬 Typekit component](#-typekit-component)
- [✨ Development](#-development)
- [🔮 Linting](#-linting)
2019-05-02 21:11:52 +02:00
- [👩‍🔬 Testing](#-testing)
2018-11-01 19:35:18 +01:00
- [🎈 Add a new post](#-add-a-new-post)
2018-09-29 21:27:30 +02:00
- [🚚 Deployment](#-deployment)
- [🏛 Licenses](#-licenses)
2018-11-05 23:32:02 +01:00
- [Posts](#posts)
- [Photos & images](#photos--images)
2018-09-29 21:27:30 +02:00
2018-09-27 23:15:17 +02:00
---
2014-08-10 15:30:06 +02:00
2018-09-27 23:15:17 +02:00
## 🎉 Features
The whole [blog](https://kremalicious.com) is a React-based Single Page App built with [Gatsby v2](https://www.gatsbyjs.org).
2018-09-29 21:27:30 +02:00
### 🎆 EXIF extraction
2018-09-27 23:15:17 +02:00
2018-10-14 02:25:24 +02:00
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.
2018-10-10 00:06:41 +02:00
In the end looks like this, including location display with [pigeon-maps](https://github.com/mariusandra/pigeon-maps):
2018-10-14 20:28:35 +02:00
<img width="1098" alt="screen shot 2018-10-14 at 20 27 39" src="https://user-images.githubusercontent.com/90316/46920507-9d6b7a00-cfef-11e8-84c8-a1997f471cae.png">
2018-10-10 00:06:41 +02:00
2018-10-11 21:14:15 +02:00
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)
2018-11-18 23:52:57 +01:00
- the EXIF node fields creation [`gatsby/createExifFields.js`](gatsby/createExifFields.js) running in [`gatsby-node.js`](gatsby-node.js)
2018-10-11 21:14:15 +02:00
### 💰 Cryptocurrency donation via Web3/MetaMask
2018-10-13 18:13:36 +02:00
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.
2018-10-11 21:14:15 +02:00
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).
2018-11-18 19:54:25 +01:00
<img width="700" alt="screen shot 2018-10-14 at 22 03 57" src="https://user-images.githubusercontent.com/90316/46921544-1a512080-cffd-11e8-919f-d3e86dbd5cc5.png" />
2018-10-11 21:14:15 +02:00
If you want to know how this works, have a look at the respective components under
2019-10-28 23:00:55 +01:00
- [`src/components/molecules/Web3Donation/index.jsx`](src/components/molecules/Web3Donation/index.jsx)
- [`src/components/molecules/Web3Donation/Account.jsx`](src/components/molecules/Web3Donation/Account.jsx)
- [`src/components/molecules/Web3Donation/InputGroup.jsx`](src/components/molecules/Web3Donation/InputGroup.jsx)
- [`src/components/molecules/Web3Donation/Conversion.jsx`](src/components/molecules/Web3Donation/Conversion.jsx)
- [`src/components/molecules/Web3Donation/Alerts.jsx`](src/components/molecules/Web3Donation/Alerts.jsx)
- [`src/components/molecules/Web3Donation/utils.jsx`](src/components/molecules/Web3Donation/utils.jsx)
2018-10-11 21:14:15 +02:00
- [`src/components/atoms/Qr.jsx`](src/components/atoms/Qr.jsx)
2018-09-27 23:15:17 +02:00
2018-11-18 19:54:25 +01:00
### 🔍 Search
A global search is provided with [gatsby-plugin-lunr](https://github.com/humanseelabs/gatsby-plugin-lunr). That plugin creates a [Lunr](https://lunrjs.com) search index file of all posts on build time which is then queried against when the search field is used.
<img width="700" alt="screen shot 2018-11-18 at 19 44 30" src="https://user-images.githubusercontent.com/90316/48676679-634f4400-eb6a-11e8-936d-293505d5c5d9.png">
If you want to know how this works, have a look at the respective components under
2019-10-28 23:00:55 +01:00
- [`src/components/molecules/Search/Search.jsx`](src/components/molecules/Search/Search.jsx)
- [`src/components/molecules/Search/SearchResults.jsx`](src/components/molecules/Search/SearchResults.jsx)
- more in [`src/components/molecules/Search/`](src/components/molecules/Search/)
2018-11-18 19:54:25 +01:00
2018-09-29 21:27:30 +02:00
### 🕸 Related Posts
2018-09-29 20:09:02 +02:00
2018-09-29 21:27:30 +02:00
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.
2018-11-18 19:54:25 +01:00
<img width="700" alt="screen shot 2018-10-11 at 21 03 03" src="https://user-images.githubusercontent.com/90316/46827531-14f39c00-cd99-11e8-84aa-0e851c32c89c.png" />
2018-10-11 21:14:15 +02:00
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)
2018-11-21 23:39:09 +01:00
### 📝 GitHub changelog rendering
Adds ability to show contents of a changelog, rendered from a `CHANGELOG.md` on GitHub from the given repository. The use case is to enhance release posts about projects hosted on GitHub. Makes use of the GitHub GraphQL API via [gatsby-source-graphql](https://www.gatsbyjs.org/packages/gatsby-source-graphql/).
Adding this to a post's YAML frontmatter:
```yaml
changelog: gatsby-plugin-matomo
```
will render this at the end of the post:
<img width="700" alt="screen shot 2018-11-21 at 23 03 38" src="https://user-images.githubusercontent.com/90316/48870593-bc74dd00-ede1-11e8-9051-df55ab7b48d1.png">
See it live on [Matomo plugin for Gatsby](https://kremalicious.com/gatsby-plugin-matomo#changelog).
If you want to know how this works, have a look at the respective component under
- [`src/components/atoms/Changelog.jsx`](src/components/atoms/Changelog.jsx)
2019-10-03 19:42:12 +02:00
### 🌗 Theme Switcher
Includes a theme switcher which allows user to toggle between a light and a dark theme. Switching between them also happens automatically based on user's system preferences utilizing [use-dark-mode](https://github.com/donavon/use-dark-mode).
If you want to know how, have a look at the respective components:
- [`src/components/molecules/ThemeSwitch.jsx`](src/components/molecules/ThemeSwitch.jsx)
2018-09-27 23:15:17 +02:00
### 🏆 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.
2018-10-11 21:14:15 +02:00
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)
2018-09-27 23:15:17 +02:00
### 📈 Matomo (formerly Piwik) analytics tracking
2018-10-11 21:14:15 +02:00
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)
2018-09-27 23:15:17 +02:00
2018-09-29 02:54:31 +02:00
### gatsby-redirect-from
2018-10-11 21:14:15 +02:00
- [gatsby-redirect-from](https://github.com/kremalicious/gatsby-redirect-from)
2018-09-29 02:54:31 +02:00
2018-09-27 23:15:17 +02:00
### 💎 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:
2019-03-19 22:58:03 +01:00
```jsx
2018-09-27 23:15:17 +02:00
import { ReactComponent as Logo } from './components/svg/Logo'
2019-03-19 22:58:03 +01:00
;<Logo />
2018-09-27 23:15:17 +02:00
```
### 🍬 Typekit component
Includes a component for adding the Typekit snippet.
2018-10-11 21:14:15 +02:00
If you want to know how this works, have a look at the respective component under
- [`src/components/atoms/Typekit.jsx`](src/components/atoms/Typekit.jsx)
2018-09-27 23:15:17 +02:00
## ✨ Development
2013-11-20 23:33:58 +01:00
2019-10-17 18:23:16 +02:00
You can simply use [Docker](https://www.docker.com) & [Docker Compose](https://docs.docker.com/compose/) or install and run dependencies on your local system.
2018-09-29 02:54:31 +02:00
```bash
2019-10-17 18:23:16 +02:00
git clone git@github.com:kremalicious/blog.git
cd blog/
2018-11-21 23:39:09 +01:00
# GITHUB_TOKEN is required for some parts
cp .env.sample .env
vi .env
2019-10-17 18:23:16 +02:00
# use Docker
docker-compose up
# or go with local system
npm i
2018-09-29 02:54:31 +02:00
npm start
```
2018-09-27 23:15:17 +02:00
### 🔮 Linting
ESlint, Prettier, and Stylelint are setup for all linting purposes:
```bash
npm run lint
```
To automatically format all code files:
2013-12-08 15:33:16 +01:00
2014-07-03 19:38:00 +02:00
```bash
2018-09-27 23:15:17 +02:00
npm run format
npm run format:css
2013-12-04 23:52:22 +01:00
```
2013-11-30 17:13:19 +01:00
2019-05-02 21:11:52 +02:00
### 👩‍🔬 Testing
Test suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library).
To run all tests, including all linting tests:
```bash
npm test
```
All test files live beside the respective component. Testing setup, fixtures, and mocks can be found in `./jest.config.js` and `./jest` folder.
For local development, run the test watcher:
```bash
npm run test:watch
```
2018-11-01 19:35:18 +01:00
### 🎈 Add a new post
2018-09-27 23:15:17 +02:00
2018-09-29 02:54:31 +02:00
```bash
2018-11-01 19:35:18 +01:00
npm run new "Hello World"
2018-11-06 20:52:59 +01:00
npm run new "Hello World" 2017-12-27
2018-09-29 02:54:31 +02:00
```
2019-10-05 00:30:38 +02:00
Create a new photo post with date, title & description pre-filled from EXIF/IPTC data of a given image file:
2018-11-05 23:32:02 +01:00
```bash
2019-10-05 00:30:38 +02:00
npm run new photo /path/to/photo.jpg
2018-11-05 23:32:02 +01:00
```
2018-10-11 21:30:59 +02:00
- [`scripts/new.js`](scripts/new.js)
2018-11-01 19:35:18 +01:00
- [`scripts/new.md`](scripts/new.md)
2019-10-05 00:30:38 +02:00
- [`scripts/new-photo.md`](scripts/new-photo.md)
2018-09-27 23:15:17 +02:00
## 🚚 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`](scripts/deploy.sh) script, syncing the contents of the `public/` folder to S3:
2013-12-08 15:33:16 +01:00
2013-12-04 23:52:22 +01:00
```bash
2018-09-27 23:15:17 +02:00
npm run deploy
2013-12-04 23:52:22 +01:00
```
2014-08-10 14:50:44 +02:00
2018-09-27 23:15:17 +02:00
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
2014-08-10 14:50:44 +02:00
2018-08-29 00:14:58 +02:00
The MIT License (MIT)
2018-11-18 16:41:37 +01:00
EXCEPT FOR:
2018-08-29 00:14:58 +02:00
2014-08-10 14:50:44 +02:00
### Posts
2018-11-18 16:41:37 +01:00
[![Creative Commons License](https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png)](http://creativecommons.org/licenses/by-nc-sa/4.0/)
2018-08-29 00:14:58 +02:00
2018-11-18 16:41:37 +01:00
All post content under `./content/posts` is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).
2014-08-10 14:50:44 +02:00
### Photos & images
2018-11-18 16:41:37 +01:00
All photos & image assets are plain ol' copyright.
2014-08-10 14:50:44 +02:00
2018-07-19 16:49:20 +02:00
Copyright (c) 20082018 Matthias Kretschmann
2014-08-10 14:50:44 +02:00
2018-11-18 16:41:37 +01:00
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. Also please be aware, the combination of typography, colors & layout makes up my brand identity. So please don't just clone everything, but rather do a remix!