1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00
🍭 My blog kremalicious.com built with Astro. Neat. https://kremalicious.com
Go to file
dependabot-preview[bot] 078f3443a7
Bump eslint from 7.0.0 to 7.1.0
Bumps [eslint](https://github.com/eslint/eslint) from 7.0.0 to 7.1.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/master/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v7.0.0...v7.1.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
2020-05-25 06:38:42 +00:00
_aws fixes 2018-09-27 22:25:00 +02:00
content copy editing, add list of hosting provider plugins 2020-05-23 11:36:45 +02:00
gatsby formatting 2020-05-08 13:27:40 +02:00
jest package updates 2020-05-22 14:38:19 +02:00
scripts formatting 2020-05-08 13:27:40 +02:00
src more user-friendly service worker update message 2020-05-23 13:38:02 +02:00
static generate json feed 2019-04-13 23:03:39 +02:00
.dockerignore add Docker for local development 2019-10-17 18:23:16 +02:00
.env.sample github token change 2019-11-17 13:11:42 +01:00
.eslintrc add eslint-plugin-testing-library 2019-12-14 13:53:07 +01:00
.gitignore package updates, add lock file 2019-11-16 15:23:17 +01:00
.markdownlint.json post tweaks 2019-11-07 00:58:12 +01:00
.prettierrc migrate to TypeScript 2019-10-02 13:48:33 +02:00
.stylelintrc package updates 2019-11-09 12:28:19 +01:00
.travis.yml add eslint-plugin-testing-library 2019-12-14 13:53:07 +01:00
babel.config.js package updates 2020-05-19 21:59:52 +02:00
config.js new post: /uses 2020-05-10 22:58:43 +02:00
docker-compose.yml empty related posts build fix 2019-11-16 16:10:34 +01:00
Dockerfile add Docker for local development 2019-10-17 18:23:16 +02:00
gatsby-browser.js more user-friendly service worker update message 2020-05-23 13:38:02 +02:00
gatsby-config.js use development tag 2020-05-10 22:57:00 +02:00
gatsby-node.js remove web3.js webpack workaround 2020-04-03 14:52:20 +02:00
gatsby-ssr.js put web3 donation on page, kick out modal 2019-11-17 23:58:38 +01:00
jest.config.js TypeScript & Jest setup cleanup 2020-05-08 14:10:36 +02:00
LICENSE cleanup 2018-08-29 00:17:24 +02:00
package-lock.json Bump eslint from 7.0.0 to 7.1.0 2020-05-25 06:38:42 +00:00
package.json Bump eslint from 7.0.0 to 7.1.0 2020-05-25 06:38:42 +00:00
README.md Update README.md 2020-05-17 03:27:04 +02:00
tsconfig.json package updates 2019-11-15 21:15:43 +01:00

🍭 My blog built with Gatsby + TypeScript. Neat.

kremalicious.com



🎉 Features

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

🎆 EXIF extraction

Automatically extracts EXIF & IPTC metadata from my photos on build time. For minimal overhead, fast-exif & node-iptc parse every JPG file upon Gatsby file node creation and add the extracted 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:

screen shot 2018-10-14 at 20 27 39

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

💰 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.

screen shot 2018-10-14 at 22 03 57

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

A global search is provided with gatsby-plugin-lunr. That plugin creates a Lunr search index file of all posts on build time which is then queried against when the search field is used.

screen shot 2018-11-18 at 19 44 30

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

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.

screen shot 2018-10-11 at 21 03 03

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

📝 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.

Adding this to a post's YAML frontmatter:

changelog: gatsby-plugin-matomo

will render this at the end of the post:

screen shot 2018-11-21 at 23 03 38

See it live on Matomo plugin for Gatsby.

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

🌗 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.

If you want to know how, have a look at the respective components:

🏆 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

📈 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-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

Development

You can simply use Docker & Docker Compose or install and run dependencies on your local system.

git clone git@github.com:kremalicious/blog.git
cd blog/

# GATSBY_GITHUB_TOKEN is required for some parts
cp .env.sample .env
vi .env

# use Docker
docker-compose up

# or go with local system
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

👩‍🔬 Testing

Test suite is setup with Jest and react-testing-library.

To run all tests, including all linting tests:

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:

npm run test:watch

🎈 Add a new post

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

Create a new photo post with date, title & description pre-filled from EXIF/IPTC data of a given image file:

npm run new photo /path/to/photo.jpg

🚚 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

Creative Commons License

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 are plain ol' copyright.

Copyright (c) 20082018 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. 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!