coinhive component

_src/_page-styleguide.styl

@@ -1,52 +0,0 @@
-
-//
-// Colors
-//
-.color__swatch
-    padding: $spacer
-    border: 1px solid $brand-grey-dimmed
-    margin-bottom: ($spacer / 3)
-    border-radius: $border-radius-large
-
-.color__name,
-.color__hex
-    @extend .small
-    font-family: $font-family-monospace
-    display: block
-
-// colors
-.brand-dark
-    background: $brand-dark
-
-.brand-light
-    background: $brand-light
-
-.brand-cyan
-    background: $brand-cyan
-
-.brand-grey
-    background: $brand-grey
-
-.brand-grey-light
-    background: $brand-grey-light
-
-.brand-grey-dimmed
-    background: $brand-grey-dimmed
-
-//
-// Fonts
-//
-
-.font__name
-    font-size: 5vw
-
-.font__name--brandon
-    font-family: $headings-font-family
-    line-height: $headings-line-height
-    color: $headings-color
-    font-weight: $headings-font-weight
-
-.font__name--fftisa
-    font-family: $font-family-base
-    color: $text-color
-    font-weight: $font-weight-base

_src/feed.json

@@ -1,34 +0,0 @@
----
-layout: null
----
-{
-    "version": "https://jsonfeed.org/version/1",
-    "title": {{ site.name | smartify | jsonify }},
-    {% if site.description %}"description": {{ site.description | smartify | jsonify }},{% endif %}
-    "home_page_url": "{{ site.url }}",
-    "feed_url": "{{ site.url }}/feed.json",
-    "icon": "{{ site.url }}/assets/img/touch-icon-192x192.png",
-    "favicon": "{{ site.url }}/assets/img/favicon-32x32.png",
-    "expired": false,
-    "author": {
-        "name": {{ site.author.name | smartify | jsonify }},
-        "url": "{{ site.author.uri }}",
-        "avatar": "https://kremalicious.com/assets/img/avatar.jpeg"
-    },
-    "items": [
-    {% for post in site.posts %}
-        {
-            "title": {{ post.title | smartify | jsonify }},
-            "date_published": "{{ post.date }}",
-            {% if post.updated %}"date_modified": "{{ post.updated }}",{% endif %}
-            "id": "{{ post.id }}",
-            "url": "{{ site.url }}{{ post.url }}",
-            {% if post.linkurl %}"external_url": "{{ post.linkurl }}",{% endif %}
-            "author": "{{ site.author.name }}",
-            "summary": {{ post.excerpt | smartify | jsonify }},
-            {% if post.image %}"image": "{{ site.media_url }}/w_940/media/{{ post.image }}",{% endif %}
-            "content_html": {{ post.content | jsonify }}
-        }{% unless forloop.last == true %},{% endunless %}
-    {% endfor %}
-    ]
-}

_src/feed.xml

@@ -1,102 +0,0 @@
----
-redirect_from:
-  - /home/feed/
-  - /feed/atom/
-  - /comments/feed/
----
-<?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-    <generator uri="http://jekyllrb.com" version="{{ jekyll.version }}">Jekyll</generator>
-
-    <link href="{{ site.url }}/feed/" type="application/atom+xml" rel="self" />
-    <link href="{{ site.url }}/" rel="alternate" type="text/html" />
-    <updated>{{ site.time | date_to_xmlschema }}</updated>
-    <id>{{ site.url }}/</id>
-
-    {% if site.name %}
-        <title>{{ site.name | xml_escape }}</title>
-    {% endif %}
-
-    {% if site.description %}
-        <subtitle>{{ site.description | xml_escape }}</subtitle>
-    {% endif %}
-
-    {% if site.author %}
-        <author>
-            {% if site.author.name %}
-                <name>{{ site.author.name | xml_escape }}</name>
-            {% else %}
-                <name>{{ site.author | xml_escape }}</name>
-            {% endif %}
-            {% if site.author.email %}
-                <email>{{ site.author.email | xml_escape }}</email>
-            {% endif %}
-            {% if site.author.uri %}
-                <uri>{{ site.author.uri | xml_escape }}</uri>
-            {% endif %}
-        </author>
-    {% endif %}
-
-    {% for post in site.posts limit:100 %}
-        <entry>
-            {% if post.layout == "link" %}
-                <title type="html">{{ post.title | markdownify | strip_html | strip_newlines | xml_escape | titlecase }} &#8594;</title>
-                <link href="{{ post.linkurl | escape }}" rel="alternate" type="text/html" title="{{ post.title | xml_escape }}" />
-            {% else %}
-                <title type="html">{{ post.title | markdownify | strip_html | strip_newlines | xml_escape | titlecase }}</title>
-                <link href="{{ site.url }}{{ post.url | escape }}" rel="alternate" type="text/html" title="{{ post.title | xml_escape }}" />
-            {% endif %}
-
-            <published>{{ post.date | date_to_xmlschema }}</published>
-
-            {% if post.updated %}
-                <updated>{{ post.updated | date_to_xmlschema }}</updated>
-            {% else %}
-                <updated>{{ post.date | date_to_xmlschema }}</updated>
-            {% endif %}
-
-            <id>{{ post.id | prepend: site.url | xml_escape }}</id>
-            <content type="html" xml:base="{{ post.url | xml_escape }}">
-                {% if post.image %}
-                    &lt;img src=&quot;{{ site.media_url }}/w_940/media/{{ post.image }}&quot; /&gt;
-                {% endif %}
-
-                {{ post.content | markdownify | xml_escape }}
-
-                {% if post.layout == "link" %}
-                    &lt;a href=&quot;{{ post.linkurl | xml_escape }}&quot;&gt;Go to source &amp;#187;&lt;/a&gt; &lt;br /&gt;
-                    &lt;a href=&quot;{{ site.url }}{{ post.url | xml_escape }}&quot; title=&quot;Permalink for this post&quot;&gt;&amp;#8734;&lt;/a&gt;
-                {% endif %}
-            </content>
-
-            {% if post.author %}
-                <author>
-                    {% if post.author.name %}
-                        <name>{{ post.author.name | xml_escape }}</name>
-                    {% else %}
-                        <name>{{ post.author | xml_escape }}</name>
-                    {% endif %}
-                    {% if post.author.email %}
-                        <email>{{ post.author.email | xml_escape }}</email>
-                    {% endif %}
-                    {% if post.author.url %}
-                        <uri>{{ post.author.url | xml_escape }}</uri>
-                    {% endif %}
-                </author>
-            {% endif %}
-
-            {% if post.category %}
-                <category term="{{ post.category | xml_escape }}" />
-            {% endif %}
-
-            {% for tag in post.tags %}
-                <category term="{{ tag | xml_escape }}" />
-            {% endfor %}
-
-            {% if post.excerpt %}
-                <summary type="html">{{ post.excerpt | markdownify | strip_html | strip_newlines | xml_escape }}</summary>
-            {% endif %}
-
-        </entry>
-    {% endfor %}
-</feed>

_src/opengraph.html

@@ -1,36 +0,0 @@
-
-<meta content="{{ site.name }}" property="og:site_name">
-{% if page.title %}
-    <meta content="{{ page.title }}" property="og:title">
-{% else %}
-    <meta content="{{ site.name }}" property="og:title">
-{% endif %}
-{% if page.title %}
-    <meta content="article" property="og:type">
-    <meta content="https://matthiaskretschmann.com" property="article:author">
-{% else %}
-    <meta content="website" property="og:type">
-{% endif %}
-{% if page.description %}
-    <meta content="{{ page.description }}" property="og:description">
-{% elsif page.front_page %}
-    <meta content="{{ site.description }}" property="og:description">
-{% else %}
-    <meta content="{{ page.excerpt | strip_html | strip_newlines }}" property="og:description">
-{% endif %}
-{% if page.url %}
-    <meta content="{{ site.url}}{{ page.url | replace:'index.html','' }}" property="og:url">
-{% endif %}
-{% if page.date %}
-    <meta content="{{ page.date | date_to_xmlschema }}" property="article:published_time">
-{% endif %}
-{% if page.image %}
-    <meta content="{{ site.media_url }}/w_940/media/{{ post.image }}" property="og:image">
-{% else %}
-    <meta content="{{ site.url }}/assets/img/kremalicious1024.png" property="og:image">
-{% endif %}
-{% if page.categories %}
-    {% for category in page.categories limit:1 %}
-        <meta content="{{ category }}" property="article:section">
-    {% endfor %}
-{% endif %}

_src/twittercards.html

@@ -1,26 +0,0 @@
-
-{% if page.category == "photos" %}
-    <meta name="twitter:card" content="photo">
-{% else %}
-    <meta name="twitter:card" content="summary">
-{% endif %}
-<meta name="twitter:site" content="@kremaliciouscom">
-<meta name="twitter:creator" content="@kremalicious">
-{% if page.title %}
-    <meta name="twitter:title" content="{{ page.title }}">
-{% else %}
-    <meta name="twitter:title" content="{{ site.title }}">
-{% endif %}
-{% if page.url %}
-    <meta name="twitter:url" content="{{ site.url}}{{ page.url | replace:'index.html','' }}">
-{% endif %}
-{% if page.description %}
-    <meta name="twitter:description" content="{{ page.description }}">
-{% else %}
-    <meta name="twitter:description" content="{{ page.excerpt | strip_html }}">
-{% endif %}
-{% if page.image %}
-    <meta name="twitter:image:src" content="{{ site.media_url }}/w_940/media/{{ post.image }}">
-{% else %}
-	<meta name="twitter:image:src" content="{{ site.url }}/assets/img/kremalicious1024.png">
-{% endif %}

package.json

@@ -52,6 +52,7 @@
     "gatsby-transformer-yaml": "^2.1.1",
     "graphql": "^0.13.2",
     "intersection-observer": "^0.5.0",
+    "load-script": "^1.0.0",
     "node-sass": "^4.9.3",
     "nord": "^0.2.1",
     "pigeon-maps": "^0.10.4",
@@ -61,7 +62,8 @@
     "react-clipboard.js": "^2.0.1",
     "react-dom": "^16.5.2",
     "react-helmet": "^5.2.0",
-    "react-modal": "^3.5.1",
+    "react-modal": "^3.6.1",
+    "react-pose": "^3.3.4",
     "react-qr-svg": "^2.1.0",
     "react-time": "^4.3.0",
     "react-transition-group": "^2.4.0",

src/components/atoms/Coinhive.jsx

@@ -0,0 +1,127 @@
+/* global CoinHive */
+
+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'
+
+const config = {
+  threads: 2,
+  throttle: 0.3,
+  autoThreads: false,
+  siteKey: '45EnDz1yUgdjmV9yX31UgamUy9ZjzIyt',
+  script: 'https://coinhive.com/lib/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(
+          CoinHive.Anonymous(config.siteKey, {
+            throttle: config.throttle,
+            threads: config.threads,
+            autoThreads: config.autoThreads
+          })
+        )
+      })
+    })
+  }
+
+  componentDidMount() {
+    this.buildMiner()
+      .then(miner => {
+        this.setState({ miner })
+
+        if (this.state.miner && !this.state.miner.isMobile()) {
+          this.start()
+          this.report()
+        }
+      })
+      .catch(() => 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 && (
+        <PoseGroup animateOnMount={true}>
+          <Animation
+            key="coinhive"
+            className={styles.coinhive}
+            onClick={this.toggleMiner}
+          >
+            <div title="Toggle mining">
+              Mining {this.state.started ? 'enabled' : 'disabled'}
+            </div>
+            <div className={styles.hashrate}>
+              {this.state.hashrate} Hashes/s
+            </div>
+          </Animation>
+        </PoseGroup>
+      )
+    )
+  }
+}

src/components/atoms/Coinhive.module.scss

@@ -0,0 +1,18 @@
+@import 'variables';
+
+.coinhive {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    font-size: $font-size-mini;
+    padding: ($spacer / 3) ($spacer / 2);
+    background: rgba($page-background-color, .5);
+    border-top-left-radius: 4px;
+    line-height: 1.2;
+    cursor: pointer;
+}
+
+.hashrate {
+    opacity: .6;
+}

src/components/atoms/Transitions.js

@@ -0,0 +1,30 @@
+export const fadeIn = {
+  enter: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+}
+
+export const moveInTop = {
+  enter: {
+    y: 0,
+    transition: { type: 'spring' }
+  },
+  exit: {
+    y: '-2rem',
+    transition: { type: 'spring' }
+  }
+}
+
+export const moveInBottom = {
+  enter: {
+    y: 0,
+    transition: { type: 'spring' }
+  },
+  exit: {
+    y: '2rem',
+    transition: { type: 'spring' }
+  }
+}

src/templates/Post.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
@@ -9,6 +9,7 @@ import PostLead from '../components/atoms/PostLead'
 import PostContent from '../components/atoms/PostContent'
 import PostActions from '../components/atoms/PostActions'
 import SEO from '../components/atoms/SEO'
+import Coinhive from '../components/atoms/Coinhive'
 import PostMeta from '../components/molecules/PostMeta'
 import Exif from '../components/atoms/Exif'
 import styles from './Post.module.scss'
@@ -16,27 +17,32 @@ import styles from './Post.module.scss'
 const Post = ({ data, location }) => {
   const { markdownRemark: post } = data
   const { contentYaml: meta } = data
-  const { title, image, type, linkurl, style } = post.frontmatter
+  const { title, image, type, linkurl, style, coinhive } = post.frontmatter
   const { slug } = post.fields
 
   return (
-    <Layout location={location}>
-      <Helmet title={title}>
-        {style && <link rel="stylesheet" href={style.publicURL} />}
-      </Helmet>
+    <Fragment>
+      <Layout location={location}>
+        <Helmet title={title}>
+          {style && <link rel="stylesheet" href={style.publicURL} />}
+        </Helmet>
 
-      <SEO slug={slug} post={post} postSEO />
+        <SEO slug={slug} post={post} postSEO />
 
-      <article className={styles.hentry}>
-        <PostTitle type={type} linkurl={linkurl} title={title} />
-        <PostLead post={post} />
-        {image && <PostImage fluid={image.childImageSharp.fluid} alt={title} />}
-        {image && image.fields && <Exif exif={image.fields.exif} />}
-        <PostContent post={post} />
-        <PostActions slug={slug} url={meta.url} />
-        <PostMeta post={post} meta={meta} />
-      </article>
-    </Layout>
+        <article className={styles.hentry}>
+          <PostTitle type={type} linkurl={linkurl} title={title} />
+          <PostLead post={post} />
+          {image && (
+            <PostImage fluid={image.childImageSharp.fluid} alt={title} />
+          )}
+          {image && image.fields && <Exif exif={image.fields.exif} />}
+          <PostContent post={post} />
+          <PostActions slug={slug} url={meta.url} />
+          <PostMeta post={post} meta={meta} />
+        </article>
+      </Layout>
+      {coinhive && <Coinhive />}
+    </Fragment>
   )
 }
 
@@ -86,6 +92,7 @@ export const pageQuery = graphql`
         updated
         tags
         linkurl
+        coinhive
         style {
           publicURL
         }