diff --git a/README.md b/README.md index 7a37cc5c..61cad950 100644 --- a/README.md +++ b/README.md @@ -18,10 +18,12 @@ - [🎉 Features](#-features) - [🎆 EXIF extraction](#-exif-extraction) + - [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3-metamask) - [🕸 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) + - [gatsby-redirect-from](#gatsby-redirect-from) - [💎 Importing SVG assets](#-importing-svg-assets) - [🍬 Typekit component](#-typekit-component) - [✨ Development](#-development) @@ -46,27 +48,67 @@ In the end looks like this, including location display with [pigeon-maps](https: screen shot 2018-10-09 at 23 59 39 -If you want to know how, have a look at the respective component under [`src/components/atoms/Exif.jsx`](src/components/atoms/Exif.jsx) and the EXIF node fields creation in [`gatsby-node.js`](gatsby-node.js). +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 in [`gatsby-node.js`](gatsby-node.js) + +### 💰 Cryptocurrency donation via Web3/MetaMask + +Lets visitors say thanks with Bitcoin or Ether. Includes full Web3 client for sending Ether via MetaMask or Mist. + +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). + +screen shot 2018-10-11 at 21 01 37 + +If you want to know how this works, have a look at the respective components under + +- [`src/components/atoms/Web3Donation.jsx`](src/components/atoms/Web3Donation.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, have a look at the respective component under [`src/components/molecules/Pagination.jsx`](src/components/molecules/Pagination.jsx) +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 + +- [`src/components/molecules/RelatedPosts.jsx`](src/components/molecules/RelatedPosts.jsx) + +### 🐝 Coinhive + +Includes a component for mining Monero with JavaScript via [Coinhive](https://coinhive.com). + +screen shot 2018-10-11 at 21 09 49 + +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, have a look at the respective component under [`src/components/atoms/SEO.jsx`](src/components/atoms/SEO.jsx) +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, [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo), which is in use on this site. +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 -https://github.com/kremalicious/gatsby-redirect-from +- [gatsby-redirect-from](https://github.com/kremalicious/gatsby-redirect-from) ### 💎 Importing SVG assets @@ -82,7 +124,9 @@ import { ReactComponent as Logo } from './components/svg/Logo' Includes a component for adding the Typekit snippet. -If you want to know how, have a look at the respective component under [`src/components/atoms/Typekit.jsx`](src/components/atoms/Typekit.jsx) +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) ## ✨ Development