mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
Merge pull request #125 from kremalicious/feature/remove-coinhive
remove coinhive
This commit is contained in:
GitHub
commit
c3bbc60818
21
README.md
21
README.md
@ -20,7 +20,6 @@
|
||||
- [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3metamask)
|
||||
- [🔍 Search](#-search)
|
||||
- [🕸 Related Posts](#-related-posts)
|
||||
- [🐝 Coinhive](#-coinhive)
|
||||
- [📝 GitHub changelog rendering](#-github-changelog-rendering)
|
||||
- [🏆 SEO component](#-seo-component)
|
||||
- [📈 Matomo (formerly Piwik) analytics tracking](#-matomo-formerly-piwik-analytics-tracking)
|
||||
@ -96,22 +95,6 @@ If you want to know how this works, have a look at the respective component unde
|
||||
|
||||
- [`src/components/molecules/RelatedPosts.jsx`](src/components/molecules/RelatedPosts.jsx)
|
||||
|
||||
### 🐝 Coinhive
|
||||
|
||||
Includes a component for mining Monero with JavaScript via [Coinhive](https://coinhive.com).
|
||||
|
||||
<img width="166" alt="screen shot 2018-10-11 at 21 09 49" src="https://user-images.githubusercontent.com/90316/46827858-03f75a80-cd9a-11e8-84f1-65b7d0027124.png" />
|
||||
|
||||
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)
|
||||
|
||||
### 📝 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/).
|
||||
@ -154,10 +137,10 @@ Site sends usage statistics to my own [Matomo](https://matomo.org) installation.
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
```jsx
|
||||
import { ReactComponent as Logo } from './components/svg/Logo'
|
||||
|
||||
<Logo />
|
||||
;<Logo />
|
||||
```
|
||||
|
||||
### 🍬 Typekit component
|
||||
|
||||
@ -4,6 +4,4 @@ type: photo
|
||||
title: iPad Porn
|
||||
image: ../media/97a44d6080b711e181bd12313817987b_7.jpg
|
||||
date: 2012-04-07 13:43:00+00:00
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
@ -7,7 +7,6 @@ date: 2007-03-01 20:50:32+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
The Adjustment Tool Guide gives an in-depth-view of the Adjustment tool in Aperture. The documentary provided by Apple isn't that what most people were looking for. But Kendall Gelner wrote his own Adjustment Tools Guide originally for the Aperture Version 1.0.1.
|
||||
|
||||
@ -10,8 +10,6 @@ tags:
|
||||
- tutorial
|
||||
- macos
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2008/02/how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites/
|
||||
---
|
||||
|
||||
@ -6,8 +6,6 @@ download: ../media/aperturefiletypes_by_kremalicious.zip
|
||||
author: Matthias Kretschmann
|
||||
date: 2008-04-04T01:55:54.000Z
|
||||
|
||||
category:
|
||||
coinhive: true
|
||||
tags:
|
||||
- goodies
|
||||
- icon
|
||||
|
||||
@ -6,7 +6,6 @@ author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-09 13:13:42+00:00
|
||||
|
||||
coinhive: true
|
||||
tags:
|
||||
- design
|
||||
- tutorial
|
||||
|
||||
@ -6,7 +6,6 @@ author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-14 13:51:39+00:00
|
||||
|
||||
coinhive: true
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
|
||||
@ -10,8 +10,6 @@ tags:
|
||||
- css
|
||||
- tutorial
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
|
||||
---
|
||||
|
||||
@ -6,7 +6,6 @@ image: ../media/canoscanlide500f.jpg
|
||||
|
||||
date: 2008-05-04 16:04:48+00:00
|
||||
|
||||
coinhive: true
|
||||
tags:
|
||||
- photography
|
||||
- tutorial
|
||||
|
||||
@ -7,7 +7,6 @@ image: ../media/aperturescan.png
|
||||
|
||||
date: 2008-05-05 04:15:11+00:00
|
||||
|
||||
coinhive: true
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- aperture
|
||||
- tutorial
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2008/05/high-quality-watermarks-with-aperture/
|
||||
---
|
||||
|
||||
@ -10,8 +10,6 @@ date: 2008-05-07 19:22:49+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
There are already some lists like this available on the web and they are always very subjective so I thought I should add my subjective list too. While Aperture was released I was coding this website and had not much time for writing about it. So although a bit late here is my absolutely biased list of my favorite 15 new features included in Apple's Aperture since version 2.0. It's in a nice countdown order ending with the best new feature (to me) at the bottom. Just click on the little screenshots to smoothly zoom to the full version of them.
|
||||
|
||||
@ -9,8 +9,6 @@ date: 2008-05-18 05:00:01+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow.
|
||||
|
||||
@ -9,8 +9,6 @@ date: 2008-05-28 15:29:56+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture.
|
||||
|
||||
@ -12,8 +12,6 @@ tags:
|
||||
- goodies
|
||||
- wallpaper
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /first-wallpaper-chives/
|
||||
---
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- goodies
|
||||
- icon
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /new-goodie-niepces-camera-obscura-and-the-history-of-the-first-photograph/
|
||||
- /4-more-icons-niepces-camera-obscura-v11/
|
||||
|
||||
@ -12,8 +12,6 @@ tags:
|
||||
- goodies
|
||||
- wallpaper
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /new-goodie-niepces-camera-obscura-wallpaper-pack/
|
||||
---
|
||||
|
||||
@ -13,8 +13,6 @@ tags:
|
||||
- macos
|
||||
- ubuntu
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /ubuntu-as-mac-file-server-and-time-machine-volume/trackback/
|
||||
- 2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- aperture
|
||||
- tutorial
|
||||
- macos
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software.
|
||||
|
||||
@ -6,14 +6,12 @@ image: ../media/Teaser-Mars-U.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-09-23 23:22:16+00:00
|
||||
|
||||
|
||||
tags:
|
||||
- goodies
|
||||
- wallpaper
|
||||
- futurama
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /new-goodie-futurama-mars-university-wallpaper/
|
||||
---
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- photography
|
||||
- aperture
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2008/10/the-definite-guide-to-watermarks-in-apple-aperture/
|
||||
---
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- tutorial
|
||||
- wordpress
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/
|
||||
---
|
||||
|
||||
@ -10,8 +10,6 @@ tags:
|
||||
- design
|
||||
- tutorial
|
||||
- wordpress
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -9,8 +9,6 @@ tags:
|
||||
- design
|
||||
- futurama
|
||||
- mac
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
|
||||
|
||||
@ -12,8 +12,6 @@ tags:
|
||||
- wallpaper
|
||||
- futurama
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2009/02/out-of-whale-oil/
|
||||
---
|
||||
|
||||
@ -12,8 +12,6 @@ tags:
|
||||
- goodies
|
||||
- tutorial
|
||||
- wordpress
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -10,8 +10,6 @@ tags:
|
||||
- tutorial
|
||||
- wordpress
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2009/12/wordpress-post-thumbnails/
|
||||
---
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- icon
|
||||
- ios
|
||||
- ipad
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
So, what to do when [everyone seem](http://www.littleboxofideas.com/blog/design-resources/5-very-useful-free-ipad-icon-sets-for-designers) [to release iPad icons](http://line25.com/articles/free-apple-ipad-icon-set-for-your-website-designs) but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here's my take on the smaller sizes of an [Apple iPad](http://www.apple.com/ipad/) icon, called iPixelPad in the sizes 48px, 32px and 16px. Everything drawn pixel-perfect from scratch. Heck, even the wallpaper.
|
||||
|
||||
@ -12,8 +12,6 @@ tags:
|
||||
- goodies
|
||||
- wallpaper
|
||||
- futurama
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
The Futurama episode [Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App) mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- goodies
|
||||
- wordpress
|
||||
- ios
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
Made a quick WordPress plugin which transforms the standard WordPress update & comment notification badges into iOS-styled ones.
|
||||
|
||||
@ -13,8 +13,6 @@ tags:
|
||||
- tutorial
|
||||
- wordpress
|
||||
|
||||
coinhive: true
|
||||
|
||||
redirect_from:
|
||||
- /2012/05/wp-icons-template/
|
||||
---
|
||||
|
||||
@ -9,8 +9,6 @@ date: 2012-06-13 19:01:20+00:00
|
||||
tags:
|
||||
- design
|
||||
- wordpress
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina assets](http://core.trac.wordpress.org/ticket/20293) for all the icons in the admin area to make them look crisp on devices with high-dpi screens like the iPhone or iPad 3, most flagship Android devices and of course the new ÜberMacBookPro.
|
||||
|
||||
@ -11,8 +11,6 @@ date: 2012-07-16 14:36:58+00:00
|
||||
tags:
|
||||
- design
|
||||
- css
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
There's this HTML element meant for marking up keyboard keys named `<kbd>`. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.
|
||||
|
||||
@ -13,8 +13,6 @@ tags:
|
||||
- goodies
|
||||
- iphone
|
||||
- wallpaper
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstall-fight-club-day-three-apple-samsung-trial/in/2971889) the original iPhone was developed in a locked down building under the name "Project Purple". Because of the secrecy involved, the team decorated the building with [Fight Club](http://www.imdb.com/title/tt0137523/) references. If you don't think this demands a wallpaper, you're weird.
|
||||
|
||||
@ -14,8 +14,6 @@ tags:
|
||||
- tor
|
||||
- macos
|
||||
- goodies
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
There are many reasons you might want to browse anonymously which can be accomplished by using [Tor](https://www.torproject.org). The setup instructions on Tor's website are quite scattered and outdated so here are some steps to setup Tor on macOS with a simple automated script at the end.
|
||||
|
||||
@ -11,8 +11,6 @@ tags:
|
||||
- goodies
|
||||
- css
|
||||
- svg
|
||||
|
||||
coinhive: true
|
||||
---
|
||||
|
||||
The badges provided by all app store providers just don't play well together with their varying typography and different sizing. So let's make them all visually unified, infinitely scalable, with pure text for easier localization and some web interaction styles. And while we’re at it: different sizes with the same markup by using some modifier classes.
|
||||
|
||||
@ -1,129 +0,0 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import loadScript from 'load-script'
|
||||
import posed, { PoseGroup } from 'react-pose'
|
||||
import { fadeIn } from './Transitions'
|
||||
import styles from './Coinhive.module.scss'
|
||||
import { ReactComponent as Play } from '../../images/play.svg'
|
||||
import { ReactComponent as Pause } from '../../images/pause.svg'
|
||||
|
||||
const config = {
|
||||
threads: 2,
|
||||
throttle: 0.3,
|
||||
autoThreads: false,
|
||||
siteKey: '45EnDz1yUgdjmV9yX31UgamUy9ZjzIyt',
|
||||
script: '/coinhive.min.js'
|
||||
}
|
||||
|
||||
const Animation = posed.div(fadeIn)
|
||||
|
||||
export default class CoinHiveClient extends PureComponent {
|
||||
state = {
|
||||
miner: null,
|
||||
hashrate: 0,
|
||||
started: false,
|
||||
intervalId: null
|
||||
}
|
||||
|
||||
intervalId = null
|
||||
|
||||
buildMiner = () => {
|
||||
if (this.state.miner && this.state.miner.isRunning()) {
|
||||
this.stop()
|
||||
}
|
||||
|
||||
return new Promise(resolve => {
|
||||
loadScript(config.script, error => {
|
||||
if (error) return
|
||||
|
||||
resolve(
|
||||
window.CoinHive.Anonymous(config.siteKey, {
|
||||
throttle: config.throttle,
|
||||
threads: config.threads,
|
||||
autoThreads: config.autoThreads
|
||||
})
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
try {
|
||||
let miner = await this.buildMiner()
|
||||
this.setState({ miner })
|
||||
|
||||
if (this.state.miner && !this.state.miner.isMobile()) {
|
||||
this.start()
|
||||
this.report()
|
||||
}
|
||||
} catch (error) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.destroy()
|
||||
}
|
||||
|
||||
start() {
|
||||
this.state.miner.start()
|
||||
this.setState({ started: true })
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.state.miner.stop()
|
||||
this.setState({ started: false })
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (!this.state.miner) return
|
||||
|
||||
this.state.miner.stop()
|
||||
delete this.state.miner
|
||||
clearInterval(this.state.intervalId)
|
||||
}
|
||||
|
||||
hashrate() {
|
||||
return this.state.miner.getHashesPerSecond().toFixed(2)
|
||||
}
|
||||
|
||||
report() {
|
||||
if (!this.state.miner) return
|
||||
|
||||
let intervalId = setInterval(
|
||||
() => this.setState({ hashrate: this.hashrate() }),
|
||||
1500
|
||||
)
|
||||
this.setState({ intervalId })
|
||||
}
|
||||
|
||||
toggleMiner = () => {
|
||||
if (this.state.started) {
|
||||
this.stop()
|
||||
} else {
|
||||
this.start()
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
this.state.miner &&
|
||||
!this.state.miner.isMobile() && (
|
||||
<PoseGroup animateOnMount={true}>
|
||||
<Animation
|
||||
key="coinhive"
|
||||
className={styles.coinhive}
|
||||
onClick={this.toggleMiner}
|
||||
>
|
||||
<div title="Toggle mining">
|
||||
{this.state.started ? <Pause /> : <Play />}
|
||||
Mining {this.state.started ? 'enabled' : 'disabled'}
|
||||
</div>
|
||||
<div className={styles.hashrate}>
|
||||
{this.state.hashrate} Hashes/s
|
||||
</div>
|
||||
</Animation>
|
||||
</PoseGroup>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
.coinhive {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
font-size: $font-size-mini;
|
||||
padding: ($spacer / 3) ($spacer / 2) ($spacer / 3) $spacer;
|
||||
background: rgba($page-background-color, .5);
|
||||
border-top-left-radius: 4px;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
min-width: 7rem;
|
||||
|
||||
svg {
|
||||
fill: $brand-grey-light;
|
||||
margin-bottom: .1rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: -1rem;
|
||||
margin-right: .2rem;
|
||||
margin-top: -.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hashrate {
|
||||
opacity: .6;
|
||||
}
|
||||
@ -10,7 +10,6 @@ import PostContent from '../components/Post/PostContent'
|
||||
import PostActions from '../components/Post/PostActions'
|
||||
import PostLinkActions from '../components/Post/PostLinkActions'
|
||||
import SEO from '../components/atoms/SEO'
|
||||
import Coinhive from '../components/atoms/Coinhive'
|
||||
import PostMeta from '../components/Post/PostMeta'
|
||||
import Exif from '../components/atoms/Exif'
|
||||
import RelatedPosts from '../components/molecules/RelatedPosts'
|
||||
@ -19,15 +18,7 @@ import styles from './Post.module.scss'
|
||||
const Post = ({ data, location }) => {
|
||||
const { markdownRemark: post } = data
|
||||
const meta = data.site.siteMetadata
|
||||
const {
|
||||
title,
|
||||
image,
|
||||
type,
|
||||
linkurl,
|
||||
style,
|
||||
coinhive,
|
||||
tags
|
||||
} = post.frontmatter
|
||||
const { title, image, type, linkurl, style, tags } = post.frontmatter
|
||||
const { slug, githubLink } = post.fields
|
||||
|
||||
return (
|
||||
@ -57,7 +48,6 @@ const Post = ({ data, location }) => {
|
||||
|
||||
{type === 'post' && <RelatedPosts tags={tags} />}
|
||||
</Layout>
|
||||
{coinhive && <Coinhive />}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
@ -108,7 +98,6 @@ export const pageQuery = graphql`
|
||||
updated
|
||||
tags
|
||||
linkurl
|
||||
coinhive
|
||||
style {
|
||||
publicURL
|
||||
}
|
||||
|
||||
3
static/coinhive.min.js
vendored
3
static/coinhive.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user