mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
vcard download
This commit is contained in:
parent
462ccbc27c
commit
62c7d1e2e2
File diff suppressed because one or more lines are too long
@ -13,6 +13,7 @@
|
|||||||
"deploy": "./deploy.sh"
|
"deploy": "./deploy.sh"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"file-saver": "^1.3.8",
|
||||||
"gatsby": "^1.9.259",
|
"gatsby": "^1.9.259",
|
||||||
"gatsby-image": "^1.0.51",
|
"gatsby-image": "^1.0.51",
|
||||||
"gatsby-link": "^1.6.44",
|
"gatsby-link": "^1.6.44",
|
||||||
@ -31,7 +32,8 @@
|
|||||||
"js-yaml": "^3.11.0",
|
"js-yaml": "^3.11.0",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-markdown": "^3.3.0",
|
"react-markdown": "^3.3.0",
|
||||||
"react-transition-group": "^2.3.1"
|
"react-transition-group": "^2.3.1",
|
||||||
|
"vcf": "^2.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-eslint": "^8.2.3",
|
"babel-eslint": "^8.2.3",
|
||||||
|
@ -38,12 +38,7 @@ const Social = ({ meta, minimal, hide }) => {
|
|||||||
<FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
|
<FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
|
||||||
<aside className={classes}>
|
<aside className={classes}>
|
||||||
{Object.keys(social).map((key, i) => (
|
{Object.keys(social).map((key, i) => (
|
||||||
<OutboundLink
|
<OutboundLink className="social__link" href={social[key]} key={i}>
|
||||||
className="social__link"
|
|
||||||
href={social[key]}
|
|
||||||
key={i}
|
|
||||||
title={key}
|
|
||||||
>
|
|
||||||
<SocialIcon title={key} className="icon" />
|
<SocialIcon title={key} className="icon" />
|
||||||
<span className="social__title">{key}</span>
|
<span className="social__title">{key}</span>
|
||||||
</OutboundLink>
|
</OutboundLink>
|
||||||
|
@ -1,25 +1,66 @@
|
|||||||
import React from 'react'
|
import React, { Component } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
import vCard from 'vcf'
|
||||||
|
import FileSaver from 'file-saver'
|
||||||
import Social from '../molecules/Social'
|
import Social from '../molecules/Social'
|
||||||
import './Footer.scss'
|
import './Footer.scss'
|
||||||
|
|
||||||
const Footer = ({ meta }) => {
|
class Footer extends Component {
|
||||||
const year = new Date().getFullYear()
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.handleAddressbookClick = this.handleAddressbookClick.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
constructVcard() {
|
||||||
<footer className="footer">
|
const meta = this.props.meta
|
||||||
<Social meta={meta} minimal />
|
const contact = new vCard()
|
||||||
<p className="footer__actions">
|
const photo = meta.avatarBase64
|
||||||
<a href={meta.addressbook}>Add to addressbook</a>
|
|
||||||
<a href={meta.gpg}>PGP/GPG key</a>
|
contact.set('fn', meta.title)
|
||||||
</p>
|
contact.set('title', meta.tagline)
|
||||||
<p>
|
contact.set('email', meta.email)
|
||||||
<small>
|
contact.set('url', meta.url, { type: 'Portfolio' })
|
||||||
© {year} {meta.title} — All Rights Reserved
|
contact.add('url', meta.social.Blog, { type: 'Blog' })
|
||||||
</small>
|
contact.set('nickname', 'kremalicious')
|
||||||
</p>
|
contact.add('x-socialprofile', meta.social.Twitter, { type: 'twitter' })
|
||||||
</footer>
|
contact.add('x-socialprofile', meta.social.GitHub, { type: 'GitHub' })
|
||||||
)
|
contact.set('photo', photo, { encoding: 'b', type: 'JPEG' })
|
||||||
|
|
||||||
|
const vcard = contact.toString('3.0')
|
||||||
|
this.downloadVcard(vcard, meta)
|
||||||
|
}
|
||||||
|
|
||||||
|
downloadVcard(vcard, meta) {
|
||||||
|
const blob = new Blob([vcard], { type: 'text/x-vcard' })
|
||||||
|
FileSaver.saveAs(blob, `${meta.title.toLowerCase()}.vcf`)
|
||||||
|
}
|
||||||
|
|
||||||
|
handleAddressbookClick(e) {
|
||||||
|
e.preventDefault()
|
||||||
|
this.constructVcard()
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const year = new Date().getFullYear()
|
||||||
|
const meta = this.props.meta
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="footer">
|
||||||
|
<Social meta={meta} minimal />
|
||||||
|
<p className="footer__actions">
|
||||||
|
<a href="#" onClick={this.handleAddressbookClick}>
|
||||||
|
Add to addressbook
|
||||||
|
</a>
|
||||||
|
<a href={meta.gpg}>PGP/GPG key</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<small>
|
||||||
|
© {year} {meta.title} — All Rights Reserved
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Footer.propTypes = {
|
Footer.propTypes = {
|
||||||
|
@ -18,8 +18,7 @@
|
|||||||
|
|
||||||
.footer__actions {
|
.footer__actions {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: -($spacer / 2);
|
margin-bottom: $spacer;
|
||||||
margin-bottom: $spacer * 3;
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
BIN
src/images/avatar.jpg
Normal file
BIN
src/images/avatar.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 233 KiB |
@ -1,73 +0,0 @@
|
|||||||
import oceanprotocol from './portfolio-oceanprotocol.png'
|
|
||||||
import oceanprotocol01 from './portfolio-oceanprotocol-01.png'
|
|
||||||
import oceanprotocol02 from './portfolio-oceanprotocol-02.png'
|
|
||||||
import ipdb from './portfolio-ipdb.png'
|
|
||||||
import ipdb01 from './portfolio-ipdb-01.png'
|
|
||||||
import ipdb02 from './portfolio-ipdb-02.png'
|
|
||||||
import biv from './portfolio-biv.png'
|
|
||||||
import ninenineeightfour from './portfolio-9984.png'
|
|
||||||
import bigchaindb from './portfolio-bigchaindb.png'
|
|
||||||
import bigchaindb01 from './portfolio-bigchaindb-01.png'
|
|
||||||
import bigchaindb02 from './portfolio-bigchaindb-02.png'
|
|
||||||
import bigchaindb03 from './portfolio-bigchaindb-03.png'
|
|
||||||
import chartmogul from './portfolio-chartmogul.png'
|
|
||||||
import chartmogul01 from './portfolio-chartmogul-01.png'
|
|
||||||
import chartmogul02 from './portfolio-chartmogul-02.png'
|
|
||||||
import sharethemeal from './portfolio-sharethemeal.png'
|
|
||||||
import ezeep from './portfolio-ezeep.png'
|
|
||||||
import ezeep01 from './portfolio-ezeep-01.png'
|
|
||||||
import ezeep02 from './portfolio-ezeep-02.png'
|
|
||||||
import ezeep03 from './portfolio-ezeep-03.png'
|
|
||||||
import ezeep04 from './portfolio-ezeep-04.png'
|
|
||||||
import ezeep05 from './portfolio-ezeep-05.png'
|
|
||||||
import ezeep06 from './portfolio-ezeep-06.png'
|
|
||||||
import mrreader from './portfolio-mrreader.png'
|
|
||||||
import outofwhaleoil from './portfolio-outofwhaleoil.png'
|
|
||||||
import outofwhaleoil01 from './portfolio-outofwhaleoil-01.png'
|
|
||||||
import outofwhaleoil02 from './portfolio-outofwhaleoil-02.png'
|
|
||||||
import ipixelpad from './portfolio-ipixelpad.png'
|
|
||||||
import unihalle from './portfolio-unihalle.png'
|
|
||||||
import unihalle01 from './portfolio-unihalle-01.png'
|
|
||||||
import unihalle02 from './portfolio-unihalle-02.png'
|
|
||||||
import coffeecup from './portfolio-coffeecup.png'
|
|
||||||
import allinnia from './portfolio-allinnia.png'
|
|
||||||
import allinnia01 from './portfolio-allinnia-01.png'
|
|
||||||
import allinnia02 from './portfolio-allinnia-02.png'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
oceanprotocol,
|
|
||||||
oceanprotocol01,
|
|
||||||
oceanprotocol02,
|
|
||||||
ipdb,
|
|
||||||
ipdb01,
|
|
||||||
ipdb02,
|
|
||||||
biv,
|
|
||||||
ninenineeightfour,
|
|
||||||
bigchaindb,
|
|
||||||
bigchaindb01,
|
|
||||||
bigchaindb02,
|
|
||||||
bigchaindb03,
|
|
||||||
chartmogul,
|
|
||||||
chartmogul01,
|
|
||||||
chartmogul02,
|
|
||||||
sharethemeal,
|
|
||||||
ezeep,
|
|
||||||
ezeep01,
|
|
||||||
ezeep02,
|
|
||||||
ezeep03,
|
|
||||||
ezeep04,
|
|
||||||
ezeep05,
|
|
||||||
ezeep06,
|
|
||||||
mrreader,
|
|
||||||
outofwhaleoil,
|
|
||||||
outofwhaleoil01,
|
|
||||||
outofwhaleoil02,
|
|
||||||
ipixelpad,
|
|
||||||
unihalle,
|
|
||||||
unihalle01,
|
|
||||||
unihalle02,
|
|
||||||
coffeecup,
|
|
||||||
allinnia,
|
|
||||||
allinnia01,
|
|
||||||
allinnia02,
|
|
||||||
}
|
|
@ -70,6 +70,17 @@ export const query = graphql`
|
|||||||
tagline
|
tagline
|
||||||
description
|
description
|
||||||
url
|
url
|
||||||
|
email
|
||||||
|
avatar {
|
||||||
|
childImageSharp {
|
||||||
|
original: resize {
|
||||||
|
src
|
||||||
|
}
|
||||||
|
small: resize(width: 256) {
|
||||||
|
src
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
social {
|
social {
|
||||||
Email
|
Email
|
||||||
Blog
|
Blog
|
||||||
@ -86,6 +97,7 @@ export const query = graphql`
|
|||||||
addressbook
|
addressbook
|
||||||
typekit
|
typekit
|
||||||
googleanalytics
|
googleanalytics
|
||||||
|
avatarBase64
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user