...
 
Commits (2)
import React, { Component } from 'react';
import NextLink from 'next/link';
export default class Link extends Component {
render() {
const { children, href, ...props } = this.props;
return (
<NextLink href={ href }>
<a href={ href } { ...props } rel={ this.rel() }>
{ children }
</a>
</NextLink>
);
}
rel() {
const { href = '', rel = '' } = this.props;
const rels = rel.split(/\s+/)
.filter(r => r.length)
.reduce((o, r) => ({
...o,
[r]: true,
}), {
noreferrer: !!href.match(/^(https?:)?\/\//i),
});
return Object.keys(rels).filter(r => rels[r]).sort().join(' ') || undefined;
}
}
import React, { Component } from 'react';
import Link from '../Link';
import css from 'next/css';
const style = {
root: css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333',
color: 'white',
minHeight: '10vh',
padding: '1em',
fontWeight: 'bold',
}),
topLine: css({
margin: '1em 0',
}),
link: css({
color: 'white',
}),
imgLink: css({
display: 'inline-block',
padding: '0.5em',
}),
};
export default class Footer extends Component {
render() {
return (
<footer className={ style.root }>
<div className={ style.topLine }>
Website design, production and hosting by&#160;
<Link href="https://grepular.com" className={ style.link }>
Mike Cardwell
</Link>
</div>
<div>
<Link
href = "https://www.digitalocean.com/?refcode=2529a7adf896"
title = "This Website, hosted on Digital Ocean - Fast, Cheap, Reliable VPS hosting (affiliate link)"
className = { style.imgLink }
>
<img alt="Digital Ocean" src="/static/images/digitalocean-badge-white.png" width="140"/>
</Link>
<Link
href = "bitcoin:1PQLtWnjUi1itHLG6QCQeHM3Nxua8pRsq1"
title = "Leave a Bitcoin tip"
className = { style.imgLink }
>
<img alt="Bitcoin" src="/static/images/bitcoin.png"/>
</Link>
<Link
href = "zcash:zcAN9ij9YZ7Cc9HMqCfcjpusELTTKQWutgjSRH9Dxx5E4DLTKTxRye5FgFs7vDPn1edSoBNFvLPTxn7byjgwQaMVJeJ64kQ"
title = "Leave a Zcash tip"
className = { style.imgLink }
>
<img alt="Zcash" src="/static/images/zcash.png"/>
</Link>
<Link
href = "//twitter.com/mickeyc"
title = "Twitter"
className = { style.imgLink }
>
<img alt="Twitter" src="/static/images/twitter-26x26.png"/>
</Link>
</div>
</footer>
);
}
}
import React, { Component } from 'react';
import ServerDate from '../ServerDate';
import ServerDate from '../../ServerDate';
import Head from 'next/head';
import Link from 'next/link';
import css from 'next/css';
import Footer from './Footer';
const style = {
root: css({
flexGrow: 1,
......@@ -19,9 +21,9 @@ const style = {
justifyContent: 'center',
backgroundColor: '#333',
color: 'white',
minHeight: '10vh',
alignItems: 'center',
padding: '1em',
minHeight: '10vh',
alignItems: 'center',
padding: '1em',
}),
title: {
root: css({
......@@ -128,6 +130,7 @@ export default class Wrapper extends Component {
}
{ this.props.children }
</main>
<Footer/>
</div>
);
......