1
0
Fork 0
blog/README.md

259 lines
11 KiB
Markdown
Raw Normal View History

2018-09-27 23:15:17 +02:00
<p align="center">
2021-01-30 20:55:42 +01:00
<a href="https://kremalicious.com"><img src="https://raw.githubusercontent.com/kremalicious/portfolio/main/src/images/github-header.png" /></a>
2018-09-27 23:15:17 +02:00
</p>
<p align="center">
2019-11-24 14:29:25 +01:00
<strong>🍭 My blog built with <a href="http://gatsbyjs.org">Gatsby</a> + TypeScript. Neat.</strong>
2018-09-27 23:15:17 +02:00
</p>
<p align="center">
<a href="https://kremalicious.com">kremalicious.com</a>
</p>
<p align="center">
2021-01-30 20:37:10 +01:00
<a href="https://github.com/kremalicious/blog/actions"><img src="https://github.com/kremalicious/blog/workflows/CI/badge.svg" /></a>
2018-09-27 23:15:17 +02:00
<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
</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)
2021-01-30 20:37:10 +01:00
- [S3 Deployment](#s3-deployment)
2018-09-29 21:27:30 +02:00
- [🏛 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
Automatically extracts EXIF & IPTC metadata from my photos on build time. For minimal overhead, [fast-exif](https://github.com/titarenko/fast-exif) & [node-iptc](https://github.com/derekbaron/node-iptc) parse every JPG file upon Gatsby file node creation and add the extracted data as node fields.
2018-10-14 02:25:24 +02:00
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)
- the EXIF node fields creation [`gatsby/createExif.js`](gatsby/createExif.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
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
2019-11-17 13:11:42 +01:00
# GATSBY_GITHUB_TOKEN is required for some parts
2018-11-21 23:39:09 +01:00
cp .env.sample .env
vi .env
2019-10-17 18:23:16 +02:00
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)
2021-02-28 04:09:56 +01:00
- [`scripts/new-article.md`](scripts/new-article.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
2021-01-30 21:44:40 +01:00
Every branch or Pull Request is automatically deployed by [Vercel](https://vercel.com) with their GitHub integration. A link to a preview deployment will appear under each Pull Request. Because of Vercel's maximum cache size of 500MB, Vercel is not used for the production deployment.
2018-09-27 23:15:17 +02:00
2021-01-30 20:37:10 +01:00
### S3 Deployment
2021-01-30 21:44:40 +01:00
The latest deployment of the `main` branch is automatically deployed to S3 from the GitHub Action as the production deployment, aliased to `kremalicious.com`. The deploy command simply calls the [`scripts/deploy-s3.sh`](scripts/deploy-s3.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
2021-01-30 21:44:40 +01: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
## 🏛 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!