#11: Completed initial footer

gatsby-node.js

@@ -7,7 +7,11 @@ exports.onCreatePage = async ({page, actions}) => {
     const path = locale.default ? page.path : `${locale.path}${page.path}`;
     createPage({...page,
       path,
-      context: {...page.context, locale: key}
+      context: {...page.context,
+        locale: key,
+        pagePath: page.path,
+        localizedPath: path
+      }
     });
   });
 };

src/components/footer/footer.jsx

@@ -1,9 +1,36 @@
 import React from 'react';
-import {StaticQuery, graphql} from 'gatsby';
+import {StaticQuery, graphql, Link} from 'gatsby';
+import locales from '../../i18n/locales';
 import '../../styles/main.scss';
 
-const FooterWithMetadata = ({data}) => (
+const FooterWithMetadata = ({data, pageContext}) => (
   <div className={'footer'}>
+    <div className={'footer__locale'}>
+      <ul>
+        {Object.values(locales).map(locale =>
+          (<li><Link
+            to={locale.default ? pageContext.pagePath : `${locale.path}${pageContext.pagePath}`}>
+            {locale.name}
+          </Link></li>)
+        )}
+      </ul>
+    </div>
+    <div className={'footer__deprecated'}>
+      <ul>
+        <li><a href={'https://www.marcnuri.com/adr-online'}>ADR Online</a></li>
+        <li><a href={'https://www.marcnuri.com/uuid'}>UUID</a></li>
+        <li><a href={'https://www.marcnuri.com/iban'}>IBAN</a></li>
+      </ul>
+    </div>
+    <div className={'footer__social'}>
+      <ul>
+        <li><a href={'https://www.linkedin.com/in/marcnuri'}>LinkedIn</a></li>
+        <li><a href={'https://www.github.com/manusa'}>GitHub</a></li>
+        <li><a href={'https://www.twitter.com/MarcNuri'}>Twitter</a></li>
+        <li><a href={'https://blog.marcnuri.com'}>Blog</a></li>
+        <li><a href={'https://presentations.marcnuri.com'}>Talks</a></li>
+      </ul>
+    </div>
     <div className={'footer__copyright'}>
       &copy; {data.site.siteMetadata.year} <a href={data.site.siteMetadata.siteUrl}>Marc Nuri</a>
     </div>

src/components/header/header-title.jsx

@@ -9,7 +9,7 @@ const L = ({children}) => (
 );
 
 const HeaderTitle = () => (
-  <span>
+  <span onClick={() => window.scrollTo(0, 0)}>
     <S>&lt;</S>
     M
     <L>a</L>

src/components/home/home.jsx

@@ -49,7 +49,7 @@ class Home extends React.Component {
     const {pageContext, intl} = this.props;
     const {coverClassName} = this.state;
     return (
-      <Layout className={'home'} locale={pageContext.locale}>
+      <Layout className={'home'} pageContext={pageContext}>
         <Seo
           lang={pageContext.locale}
           title={`${

src/components/layout.jsx

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 import Header from './header/header';
 import Footer from './footer/footer';
 
-const Layout = ({className, children}) => (
+const Layout = ({pageContext, className, children}) => (
   <div className={className}>
-    <Header />
+    <Header pageContext={pageContext} />
     {children}
-    <Footer />
+    <Footer pageContext={pageContext} />
   </div>
 );
 
 Layout.propTypes = {
+  pageContext: PropTypes.object.isRequired,
   className: PropTypes.string
 };
 

src/styles/base/_variables.scss

@@ -4,6 +4,7 @@ $header-font-family: 'Montserrat';
 $header-font-weight: 600;
 
 // Colors
+$color-green: #7ea896;
 $color-blue: #78bcda;
 $color-blue-dark: #649bb7;
 $color-blue-darker: #3c5e6d;

src/styles/components/_footer.scss

@@ -1,18 +1,59 @@
 @import '../base/variables';
 
+$transition-time: 250ms;
+$spacing: 12px;
+
 .footer {
   padding: $footer-padding;
   background: $footer-background;
+  font-family: 'Montserrat';
+  & &__locale {
+    margin-bottom: $spacing;
+    font-size: 0.75rem;
+    color: $color-green;
+    a {
+      color: $color-green;
+    }
+    li {
+      display: inline-block;
+      &:not(:first-child) {
+        &::before {
+          content: '|';
+          margin: 0 $spacing / 2;
+        }
+      }
+    }
+  }
+
+  & &__deprecated,
+  & &__social {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    li {
+      margin: $spacing / 2;
+    }
+  }
   & &__copyright {
+    margin-top: $spacing;
     color: $color-blue;
     text-align: center;
-    font-family: 'Montserrat';
-    a, a:active, a:hover {
-      color: $color-blue;
-      text-decoration: none;
-    }
-    a:hover {
-      color: $color-blue-dark;
-    }
+  }
+  a, a:active, a:hover {
+    color: $color-blue;
+    text-decoration: none;
+    transition: color ease-in-out $transition-time;
+  }
+  a:hover {
+    color: $color-blue-dark;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    list-style: none;
   }
 }

src/styles/components/_header.scss

@@ -33,6 +33,7 @@ $scrolled-color: #333;
   & &__title {
     $parent: &;
     margin-left: $header-padding;
+    cursor: pointer;
 
     & #{$self}__title-long,
     & #{$self}__title-short {