footer refactor

.codeclimate.yml

@@ -2,4 +2,4 @@ version: '2'
 checks:
   method-lines:
     config:
-      threshold: 50 # Gatsby's StaticQuery makes render functions pretty long
+      threshold: 55 # Gatsby's StaticQuery makes render functions pretty long

content/meta.yml

@@ -16,10 +16,12 @@ author:
     name:               Matthias Kretschmann
     email:              m@kretschmann.io
     uri:                https://matthiaskretschmann.com
-    twitter:            kremalicious
+    twitter:            https://twitter.com/kremalicious
-    github:             kremalicious
+    github:             https://github.com/kremalicious
-    facebook:           matthiaskretschmann
+    facebook:           https://facebook.com/matthiaskretschmann
-    googleplus:         +MatthiasKretschmann
+    googleplus:         https://plus.google.com/+MatthiasKretschmann
+    rss:                https://kremalicious.com/feed.xml
+    jsonfeed:           http://kremalicious.com/feed.json
     avatar:             ../src/images/avatar.jpg
     bitcoin:            171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
     ether:              "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"

src/components/molecules/IconLinks.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './IconLinks.module.scss'
+
+import Twitter from '../svg/Twitter'
+import Github from '../svg/Github'
+import Facebook from '../svg/Facebook'
+import Rss from '../svg/Rss'
+import Jsonfeed from '../svg/Jsonfeed'
+
+const NetworkIcon = ({ link }) => {
+  if (link.includes('twitter')) {
+    return <Twitter className={styles.twitter} />
+  } else if (link.includes('github')) {
+    return <Github className={styles.github} />
+  } else if (link.includes('facebook')) {
+    return <Facebook className={styles.facebook} />
+  } else if (link.includes('feed.xml')) {
+    return <Rss className={styles.rss} />
+  } else if (link.includes('feed.json')) {
+    return <Jsonfeed className={styles.json} />
+  }
+}
+
+const IconLinks = ({ links }) => (
+  <p>
+    {links.map(link => (
+      <a key={link} className={styles.link} href={link}>
+        <NetworkIcon link={link} />
+      </a>
+    ))}
+  </p>
+)
+
+IconLinks.propTypes = {
+  links: PropTypes.array.isRequired
+}
+
+export default IconLinks

src/components/molecules/IconLinks.module.scss

@@ -0,0 +1,44 @@
+@import 'variables';
+
+.link {
+    text-align: center;
+    width: 2rem;
+    padding: $spacer / 4;
+    margin: 0;
+    display: inline-block;
+    color: $text-color-light;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    svg {
+        transition: color .3s ease-in-out;
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+.twitter:hover {
+    fill: #019ad2;
+}
+
+.facebook:hover {
+    fill: #3b5998;
+}
+
+.github:hover {
+    fill: #333;
+}
+
+.rss:hover {
+    fill: #e15a00;
+}
+
+.json:hover {
+    fill: #8be028;
+}

src/components/molecules/Subscribe.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+import IconLinks from './IconLinks'
+import styles from './Subscribe.module.scss'
+
+const Subscribe = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        contentYaml {
+          author {
+            rss
+            jsonfeed
+          }
+        }
+      }
+    `}
+    render={data => {
+      const { rss, jsonfeed } = data.contentYaml.author
+
+      const links = [rss, jsonfeed]
+
+      return (
+        <aside className={styles.subscribe}>
+          <h1 className={styles.title}>Subscribe</h1>
+          <IconLinks links={links} />
+        </aside>
+      )
+    }}
+  />
+)
+
+export default Subscribe

src/components/molecules/Subscribe.module.scss

@@ -0,0 +1,16 @@
+@import 'variables';
+
+// Subscribe component
+.subscribe {
+    margin: $spacer auto;
+
+    p {
+        text-align: center;
+        margin: 0;
+    }
+}
+
+.title {
+    font-size: $font-size-h5;
+    margin-bottom: $spacer / 2;
+}

src/components/molecules/Vcard.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+import Img from 'gatsby-image'
+import IconLinks from './IconLinks'
+import styles from './Vcard.module.scss'
+
+const Vcard = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        contentYaml {
+          author {
+            name
+            uri
+            twitter
+            github
+            facebook
+            avatar {
+              childImageSharp {
+                fixed(width: 80, height: 80) {
+                  ...GatsbyImageSharpFixed
+                }
+              }
+            }
+          }
+        }
+      }
+    `}
+    render={data => {
+      const {
+        twitter,
+        github,
+        facebook,
+        avatar,
+        name,
+        uri
+      } = data.contentYaml.author
+
+      const links = [twitter, github, facebook]
+
+      return (
+        <div className="vcard author">
+          <Img className={styles.avatar} fixed={avatar.childImageSharp.fixed} />
+          <p className={styles.description}>
+            Blog of designer &amp; developer{' '}
+            <a className="fn" rel="author" href={uri}>
+              {name}
+            </a>
+          </p>
+
+          <IconLinks links={links} />
+        </div>
+      )
+    }}
+  />
+)
+
+export default Vcard

src/components/molecules/Vcard.module.scss

@@ -0,0 +1,19 @@
+@import 'variables';
+@import 'mixins';
+
+.avatar {
+    @include media-frame;
+
+    margin-bottom: ($spacer / 2);
+    border-radius: 50%;
+}
+
+.description {
+    font-size: $font-size-h5;
+    margin-top: 0;
+    margin-bottom: ($spacer / 4);
+
+    a {
+        display: block;
+    }
+}

src/components/organisms/Footer.jsx

@@ -1,16 +1,13 @@
 import React, { PureComponent } from 'react'
 import { StaticQuery, graphql } from 'gatsby'
-import Img from 'gatsby-image'
 
 import Container from '../atoms/Container'
+import Vcard from '../molecules/Vcard'
+import Subscribe from '../molecules/Subscribe'
 import ModalThanks from '../molecules/ModalThanks'
 
-import Twitter from '../svg/Twitter'
 import Github from '../svg/Github'
-import Facebook from '../svg/Facebook'
 import Bitcoin from '../svg/Bitcoin'
-import Rss from '../svg/Rss'
-import Jsonfeed from '../svg/Jsonfeed'
 
 import styles from './Footer.module.scss'
 
@@ -41,95 +38,32 @@ class Footer extends PureComponent {
             contentYaml {
               author {
                 name
-                email
                 uri
-                twitter
-                github
-                facebook
-                googleplus
-                avatar {
-                  childImageSharp {
-                    fixed(width: 80, height: 80) {
-                      ...GatsbyImageSharpFixed
-                    }
-                  }
-                }
                 bitcoin
               }
             }
           }
         `}
         render={data => {
-          const { author } = data.contentYaml
+          const { name, uri, bitcoin } = data.contentYaml.author
 
           return (
             <footer role="contentinfo" className={styles.footer}>
               <Container>
-                <div className="vcard author">
+                <Vcard />
-                  <Img
+                <Subscribe />
-                    className={styles.avatar}
-                    fixed={author.avatar.childImageSharp.fixed}
-                  />
-                  <p className={styles.description}>
-                    Blog of designer &amp; developer{' '}
-                    <a className="fn" rel="author" href={author.uri}>
-                      {author.name}
-                    </a>
-                  </p>
-
-                  <p>
-                    <a
-                      className={styles.link}
-                      href={`https://twitter.com/${author.twitter}`}
-                    >
-                      <Twitter className={styles.twitter} />
-                    </a>
-                    <a
-                      className={styles.link}
-                      href={`https://github.com/${author.github}`}
-                    >
-                      <Github className={styles.github} />
-                    </a>
-                    <a
-                      className={styles.link}
-                      href={`https://www.facebook.com/${author.facebook}`}
-                    >
-                      <Facebook className={styles.facebook} />
-                    </a>
-                  </p>
-                </div>
-
-                <aside className={styles.subscribe}>
-                  <h1 className={styles.title}>Subscribe</h1>
-                  <p>
-                    <a
-                      className={styles.link}
-                      href="http://kremalicious.com/feed.xml"
-                      title="RSS Feed"
-                    >
-                      <Rss className={styles.rss} />
-                    </a>
-                    <a
-                      className={styles.link}
-                      href="http://kremalicious.com/feed.json"
-                      title="JSON Feed"
-                    >
-                      <Jsonfeed className={styles.json} />
-                    </a>
-                  </p>
-                </aside>
 
                 <section className={styles.copyright}>
                   <p>
                     &copy; 2005&ndash;
                     {this.state.year + ' '}
-                    <a href="http://matthiaskretschmann.com" rel="me">
+                    <a href={uri} rel="me">
-                      Matthias Kretschmann
+                      {name}
                     </a>
                   </p>
 
                   <p>
-                    <a href="https://github.com/kremalicious/kremalicious3/blob/master/_src/">
+                    <a href="https://github.com/kremalicious/kremalicious3/">
                       <Github />
                       View source
                     </a>
@@ -139,7 +73,7 @@ class Footer extends PureComponent {
                       onClick={this.toggleModal}
                     >
                       <Bitcoin />
-                      <code>{author.bitcoin}</code>
+                      <code>{bitcoin}</code>
                     </a>
                   </p>
 

src/components/organisms/Footer.module.scss

@@ -22,23 +22,6 @@
     }
 }
 
-.avatar {
-    @include media-frame;
-
-    margin-bottom: ($spacer / 2);
-    border-radius: 50%;
-}
-
-.description {
-    font-size: $font-size-h5;
-    margin-top: 0;
-    margin-bottom: ($spacer / 4);
-
-    a {
-        display: block;
-    }
-}
-
 .copyright {
     padding-top: $spacer;
     padding-bottom: $spacer;
@@ -57,68 +40,6 @@
     }
 }
 
-// Subscribe component
-.subscribe {
-    margin: $spacer auto;
-
-    p {
-        text-align: center;
-        margin: 0;
-    }
-}
-
-.link {
-    text-align: center;
-    width: 2rem;
-    padding: $spacer / 4;
-    margin: 0;
-    display: inline-block;
-    color: $text-color-light;
-
-    &:first-child {
-        margin-left: 0;
-    }
-
-    &:last-child {
-        margin-right: 0;
-    }
-
-    svg {
-        transition: color .3s ease-in-out;
-        display: block;
-        margin: 0 auto;
-    }
-}
-
-.rss:hover {
-    fill: #e15a00;
-}
-
-.json:hover {
-    fill: #8be028;
-}
-
-.twitter:hover {
-    fill: #019ad2;
-}
-
-.google:hover {
-    fill: #c63b1e;
-}
-
-.facebook:hover {
-    fill: #3b5998;
-}
-
-.github:hover {
-    fill: #333;
-}
-
-.title {
-    font-size: $font-size-h5;
-    margin-bottom: ($spacer/2);
-}
-
 .btc {
     margin-left: ($spacer / 2);