🍭 My blog built with Gatsby + TypeScript. Neat.
The whole blog is a React-based Single Page App built with Gatsby v2.
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:
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/createExif.jsrunning ingatsby-node.js
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/molecules/Web3Donation/index.jsxsrc/components/molecules/Web3Donation/Account.jsxsrc/components/molecules/Web3Donation/InputGroup.jsxsrc/components/molecules/Web3Donation/Conversion.jsxsrc/components/molecules/Web3Donation/Alerts.jsxsrc/components/molecules/Web3Donation/utils.jsxsrc/components/atoms/Qr.jsx
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.
If you want to know how this works, have a look at the respective components under
src/components/molecules/Search/Search.jsxsrc/components/molecules/Search/SearchResults.jsx- more in
src/components/molecules/Search/
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
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-matomowill render this at the end of the post:
See it live on Matomo plugin for Gatsby.
If you want to know how this works, have a look at the respective component under
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:
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
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 />Includes a component for adding the Typekit snippet.
If you want to know how this works, have a look at the respective component under
git clone git@github.com:kremalicious/blog.git
cd blog/
# GATSBY_GITHUB_TOKEN is required for some parts
cp .env.sample .env
vi .env
npm i
npm startESlint, Prettier, and Stylelint are setup for all linting purposes:
npm run lintTo automatically format all code files:
npm run format
npm run format:cssTest suite is setup with Jest and react-testing-library.
To run all tests, including all linting tests:
npm testAll test files live beside the respective component. Testing setup, fixtures, and mocks can be found in ./jest.config.js and ./jest folder.
npm run new "Hello World"
npm run new "Hello World" 2017-12-27Create 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.jpgEvery branch or Pull Request is automatically deployed by Vercel 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.
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 script, syncing the contents of the public/ folder to S3:
npm run deployThe MIT License (MIT)
EXCEPT FOR:
All post content under ./content/posts is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
All photos & image assets 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. 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!