vcard download

package.json

@@ -13,6 +13,7 @@
     "deploy": "./deploy.sh"
   },
   "dependencies": {
+    "file-saver": "^1.3.8",
     "gatsby": "^1.9.259",
     "gatsby-image": "^1.0.51",
     "gatsby-link": "^1.6.44",
@@ -31,7 +32,8 @@
     "js-yaml": "^3.11.0",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.0",
-    "react-transition-group": "^2.3.1"
+    "react-transition-group": "^2.3.1",
+    "vcf": "^2.0.1"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.3",

src/components/molecules/Social.jsx

@@ -38,12 +38,7 @@ const Social = ({ meta, minimal, hide }) => {
       <FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
         <aside className={classes}>
           {Object.keys(social).map((key, i) => (
-            <OutboundLink
-              className="social__link"
-              href={social[key]}
-              key={i}
-              title={key}
-            >
+            <OutboundLink className="social__link" href={social[key]} key={i}>
               <SocialIcon title={key} className="icon" />
               <span className="social__title">{key}</span>
             </OutboundLink>

src/components/organisms/Footer.jsx

@@ -1,16 +1,56 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import vCard from 'vcf'
+import FileSaver from 'file-saver'
 import Social from '../molecules/Social'
 import './Footer.scss'
 
-const Footer = ({ meta }) => {
+class Footer extends Component {
+  constructor(props) {
+    super(props)
+    this.handleAddressbookClick = this.handleAddressbookClick.bind(this)
+  }
+
+  constructVcard() {
+    const meta = this.props.meta
+    const contact = new vCard()
+    const photo = meta.avatarBase64
+
+    contact.set('fn', meta.title)
+    contact.set('title', meta.tagline)
+    contact.set('email', meta.email)
+    contact.set('url', meta.url, { type: 'Portfolio' })
+    contact.add('url', meta.social.Blog, { type: 'Blog' })
+    contact.set('nickname', 'kremalicious')
+    contact.add('x-socialprofile', meta.social.Twitter, { type: 'twitter' })
+    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={meta.addressbook}>Add to addressbook</a>
+          <a href="#" onClick={this.handleAddressbookClick}>
+            Add to addressbook
+          </a>
           <a href={meta.gpg}>PGP/GPG key</a>
         </p>
         <p>
@@ -21,6 +61,7 @@ const Footer = ({ meta }) => {
       </footer>
     )
   }
+}
 
 Footer.propTypes = {
   meta: PropTypes.object,

src/components/organisms/Footer.scss

@@ -18,8 +18,7 @@
 
 .footer__actions {
     width: 100%;
-    margin-top: -($spacer / 2);
-    margin-bottom: $spacer * 3;
+    margin-bottom: $spacer;
 
     a {
         display: inline-block;

src/images/index.js

@@ -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,
-}

src/layouts/index.jsx

@@ -70,6 +70,17 @@ export const query = graphql`
       tagline
       description
       url
+      email
+      avatar {
+        childImageSharp {
+          original: resize {
+            src
+          }
+          small: resize(width: 256) {
+            src
+          }
+        }
+      }
       social {
         Email
         Blog
@@ -86,6 +97,7 @@ export const query = graphql`
       addressbook
       typekit
       googleanalytics
+      avatarBase64
     }
   }
 `