Merge pull request #86 from kremalicious/feature/microformats

add hcard markup

package.json

@@ -22,6 +22,7 @@
     "new": "babel-node ./scripts/new.js"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "file-saver": "^2.0.0",
     "gatsby": "^2.0.80",
     "gatsby-image": "^2.0.25",

src/components/Layout.jsx

@@ -14,6 +14,7 @@ import styles from './Layout.module.scss'
 // }
 
 const timeout = 250
+const RoutesContainer = posed.div(fadeIn)
 
 export default class Layout extends PureComponent {
   static propTypes = {
@@ -25,8 +26,6 @@ export default class Layout extends PureComponent {
     const { children, location } = this.props
     const isHomepage = location.pathname === '/'
 
-    const RoutesContainer = posed.div(fadeIn)
-
     return (
       <>
         <Typekit />

src/components/molecules/LogoUnit.jsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
+import classNames from 'classnames'
 import { moveInBottom } from '../atoms/Transitions'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 import styles from './LogoUnit.module.scss'
@@ -15,33 +16,36 @@ const query = graphql`
   }
 `
 
-const Animation = posed.div(moveInBottom)
-
 export default class LogoUnit extends PureComponent {
   static propTypes = {
     minimal: PropTypes.bool
   }
 
+  Animation = posed.div(moveInBottom)
+  nameClasses = classNames('p-name', [styles.title])
+  descriptionClasses = classNames('p-job-title', [styles.description])
+
   render() {
+    let wrapClasses = classNames([styles.logounit], {
+      [styles.minimal]: this.props.minimal
+    })
+
     return (
       <StaticQuery
         query={query}
         render={data => {
           const { title, tagline } = data.dataYaml
-          const { minimal } = this.props
 
           return (
-            <Animation>
+            <div className={wrapClasses}>
-              <div className={minimal ? styles.minimal : styles.logounit}>
+              <this.Animation>
-                <Logo className={styles.logounit__logo} />
+                <Logo className={styles.logo} />
-                <h1 className={styles.logounit__title}>
+                <h1 className={this.nameClasses}>{title.toLowerCase()}</h1>
-                  {title.toLowerCase()}
+                <p className={this.descriptionClasses}>
-                </h1>
-                <p className={styles.logounit__description}>
                   {tagline.toLowerCase()}
                 </p>
+              </this.Animation>
             </div>
-            </Animation>
           )
         }}
       />

src/components/molecules/LogoUnit.module.scss

@@ -4,7 +4,7 @@
     display: block;
 }
 
-.logounit__logo {
+.logo {
     display: block;
     width: 1.5rem;
     height: 1.5rem;
@@ -14,20 +14,20 @@
     margin-right: auto;
 }
 
-.logounit__title,
+.title,
-.logounit__description {
+.description {
     display: inline-block;
     margin-bottom: 0;
 }
 
-.logounit__title {
+.title {
     font-size: $font-size-h3;
     margin-right: $spacer / 4;
     color: $brand-main;
     line-height: $line-height;
 }
 
-.logounit__description {
+.description {
     font-size: $font-size-h4;
     color: $brand-grey-light;
 
@@ -46,13 +46,12 @@
 }
 
 .minimal {
-    composes: logounit;
     transform: scale(.7);
     transform-origin: top center;
     transform-box: border-box;
 
-    .logounit__title,
+    .title,
-    .logounit__description {
+    .description {
         color: $text-color-light;
 
         :global(.dark) & {
@@ -60,7 +59,7 @@
         }
     }
 
-    .logounit__logo {
+    .logo {
         margin-bottom: $spacer / 3;
         opacity: .5;
     }

src/components/molecules/Networks.jsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
+import classNames from 'classnames'
 import { moveInTop } from '../atoms/Transitions'
 
 import { ReactComponent as Email } from '../../images/email.svg'
@@ -50,33 +51,24 @@ class NetworkIcon extends PureComponent {
   }
 }
 
-const Animation = posed.aside(moveInTop)
-
 export default class Networks extends PureComponent {
-  state = {
-    classes: styles.networks
-  }
-
   static propTypes = {
     minimal: PropTypes.bool,
     hide: PropTypes.bool
   }
 
-  componentDidMount() {
+  Animation = posed.aside(moveInTop)
-    this.toggleClasses()
-  }
 
-  componentDidUpdate() {
+  linkClasses = key =>
-    this.toggleClasses()
+    classNames({
-  }
+      'u-url': key !== 'Email',
+      'u-email': key === 'Email',
+      [styles.link]: true
+    })
 
-  toggleClasses = () => {
+  wrapClasses = classNames([styles.networks], {
-    if (this.props.minimal) {
+    [styles.minimal]: this.props.minimal
-      this.setState({ classes: `${styles.networks} ${styles.minimal}` })
+  })
-    } else {
-      this.setState({ classes: styles.networks })
-    }
-  }
 
   render() {
     return (
@@ -87,14 +79,18 @@ export default class Networks extends PureComponent {
 
           return (
             !this.props.hide && (
-              <Animation className={this.state.classes}>
+              <this.Animation className={this.wrapClasses}>
                 {Object.keys(meta.social).map((key, i) => (
-                  <a className={styles.link} href={meta.social[key]} key={i}>
+                  <a
+                    className={this.linkClasses(key)}
+                    href={meta.social[key]}
+                    key={i}
+                  >
                     <NetworkIcon title={key} className={icons.icon} />
                     <span className={styles.title}>{key}</span>
                   </a>
                 ))}
-              </Animation>
+              </this.Animation>
             )
           )
         }}

src/components/organisms/Footer.jsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
+import classNames from 'classnames'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../molecules/LogoUnit'
 import Networks from '../molecules/Networks'
@@ -17,30 +18,39 @@ const query = graphql`
 
     dataYaml {
       title
+      url
       gpg
     }
   }
 `
 
+let classes = classNames('h-card', [styles.footer])
+
 export default class Footer extends PureComponent {
   state = { year: new Date().getFullYear() }
 
   FooterMarkup = ({ meta, pkg, year }) => (
-    <footer className={styles.footer}>
+    <footer className={classes}>
       <Link to={'/'}>
         <LogoUnit minimal />
       </Link>
 
       <Networks minimal />
 
-      <p className={styles.footer__actions}>
+      <p className={styles.actions}>
         <Vcard />
-        <a href={meta.gpg}>PGP/GPG key</a>
+        <a className="u-key" href={meta.gpg}>
+          PGP/GPG key
+        </a>
         <a href={pkg.bugs}>Found a bug?</a>
       </p>
-      <p className={styles.footer__copyright}>
+      <p className={styles.copyright}>
         <small>
-          &copy; {year} {meta.title} &mdash; All Rights Reserved
+          &copy; {year}{' '}
+          <a className="u-url" href={meta.url}>
+            {meta.title}
+          </a>{' '}
+          &mdash; All Rights Reserved
         </small>
       </p>
     </footer>

src/components/organisms/Footer.module.scss

@@ -21,7 +21,7 @@
     }
 }
 
-.footer__actions {
+.actions {
     a {
         display: inline-block;
         padding: 0 $spacer / 4;
@@ -36,3 +36,9 @@
         }
     }
 }
+
+.copyright {
+    a {
+        color: inherit;
+    }
+}

src/components/organisms/Header.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Link, StaticQuery, graphql } from 'gatsby'
+import classNames from 'classnames'
 import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 import ThemeSwitch from '../molecules/ThemeSwitch'
@@ -25,6 +26,10 @@ export default class Header extends PureComponent {
   render() {
     const { minimal } = this.props
 
+    let headerClasses = classNames([styles.header], {
+      [styles.minimal]: minimal
+    })
+
     return (
       <StaticQuery
         query={query}
@@ -32,10 +37,10 @@ export default class Header extends PureComponent {
           const meta = data.dataYaml
 
           return (
-            <header className={minimal ? styles.minimal : styles.header}>
+            <header className={headerClasses}>
               <ThemeSwitch />
 
-              <Link className={styles.header__link} to={'/'}>
+              <Link className={styles.link} to={'/'}>
                 <LogoUnit minimal={minimal} />
               </Link>
 

src/components/organisms/Header.module.scss

@@ -12,19 +12,18 @@
     text-align: center;
 }
 
-.header__link {
+.link {
     pointer-events: none;
     display: block;
     width: 100%;
 }
 
 .minimal {
-    composes: header;
     height: auto;
     padding-top: $spacer * 2;
     padding-bottom: 0;
 
-    .header__link {
+    .link {
         pointer-events: all;
         width: auto;
     }