mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 18:00:06 +01:00
coinhive component
This commit is contained in:
parent
3aabf39c27
commit
088089e684
GPG Key ID:
606EEEF3C479A91F
@ -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
|
||||
@ -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 %}
|
||||
]
|
||||
}
|
||||
102
_src/feed.xml
102
_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 }} →</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 %}
|
||||
<img src="{{ site.media_url }}/w_940/media/{{ post.image }}" />
|
||||
{% endif %}
|
||||
|
||||
{{ post.content | markdownify | xml_escape }}
|
||||
|
||||
{% if post.layout == "link" %}
|
||||
<a href="{{ post.linkurl | xml_escape }}">Go to source &#187;</a> <br />
|
||||
<a href="{{ site.url }}{{ post.url | xml_escape }}" title="Permalink for this post">&#8734;</a>
|
||||
{% 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>
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
@ -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",
|
||||
|
||||
127
src/components/atoms/Coinhive.jsx
Normal file
127
src/components/atoms/Coinhive.jsx
Normal file
@ -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>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
18
src/components/atoms/Coinhive.module.scss
Normal file
18
src/components/atoms/Coinhive.module.scss
Normal file
@ -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;
|
||||
}
|
||||
30
src/components/atoms/Transitions.js
Normal file
30
src/components/atoms/Transitions.js
Normal file
@ -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' }
|
||||
}
|
||||
}
|
||||
@ -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,10 +17,11 @@ 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 (
|
||||
<Fragment>
|
||||
<Layout location={location}>
|
||||
<Helmet title={title}>
|
||||
{style && <link rel="stylesheet" href={style.publicURL} />}
|
||||
@ -30,13 +32,17 @@ const Post = ({ data, location }) => {
|
||||
<article className={styles.hentry}>
|
||||
<PostTitle type={type} linkurl={linkurl} title={title} />
|
||||
<PostLead post={post} />
|
||||
{image && <PostImage fluid={image.childImageSharp.fluid} alt={title} />}
|
||||
{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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user