restore footer

2025-01-02 18:13:10 +01:00 · 2018-08-11 02:39:18 +02:00 · 2018-08-11 02:39:18 +02:00 · 0f510e3fe7
commit 0f510e3fe7
parent a3ab615eb6
8 changed files with 336 additions and 67 deletions
--- a/content/meta.yml
+++ b/content/meta.yml
@ -20,6 +20,7 @@ author:
    github:             kremalicious
    facebook:           matthiaskretschmann
    googleplus:         +MatthiasKretschmann
+    avatar:             ../src/images/avatar.jpg
    bitcoin:            171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
    ether:              "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"

--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -30,6 +30,13 @@ module.exports = {
        path: path.join(__dirname, 'content')
      }
    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'images',
+        path: path.join(__dirname, 'src', 'images')
+      }
+    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@ -1,58 +1,28 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
 import Container from './atoms/Container'
 import Head from './molecules/Head'
 import Header from './organisms/Header'
+import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'

-const Layout = ({ children }) => {
-  return (
-    <StaticQuery
-      query={graphql`
-        query {
-          # the content/meta.yml file
-          contentYaml {
-            title
-            tagline
-            url
-            author {
-              name
-              email
-              uri
-              twitter
-              github
-              facebook
-              googleplus
-              bitcoin
-              ether
-            }
-          }
-        }
-      `}
-      render={data => {
-        const meta = data.contentYaml
+const Layout = ({ children }) => (
+  <Fragment>
+    <Head />
+    <Header />

-        return (
-          <Fragment>
-            <Head meta={meta} />
-            <Header />
+    <main className={styles.document}>
+      <div className={styles.content}>
+        <Container>{children}</Container>
+      </div>
+    </main>

-            <main className={styles.site__document}>
-              <div className={styles.site__content}>
-                <Container>{children}</Container>
-              </div>
-            </main>
-          </Fragment>
-        )
-      }}
-    />
-  )
-}
+    <Footer />
+  </Fragment>
+)

 Layout.propTypes = {
-  children: PropTypes.any.isRequired,
-  location: PropTypes.object.isRequired
+  children: PropTypes.any.isRequired
 }

 export default Layout
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@ -8,8 +8,7 @@
    position: relative;
 }

-.site__content,
-.footer__content {
+.content {
    padding: 0 $spacer;
    width: 100%;

@ -22,7 +21,7 @@
 // site background
 /////////////////////////////////////

-.site__document {
+.document {
    width: 100%;
    padding-top: ($spacer * 2);
    background-color: $page-background-color;
@ -40,6 +39,7 @@
        @include transition;

        margin-top: $spacer * 2.65;
+        margin-bottom: $spacer * 20;
        position: relative;
        z-index: 2;

--- a/src/components/molecules/Head.jsx
+++ b/src/components/molecules/Head.jsx
@ -1,28 +1,39 @@
 import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
+import { StaticQuery, graphql } from 'gatsby'
 import Typekit from '../atoms/Typekit'

-const Head = ({ meta }) => {
-  const { title, tagline } = meta
+const Head = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        contentYaml {
+          title
+          tagline
+        }
+      }
+    `}
+    render={data => {
+      const { title, tagline } = data.contentYaml

-  return (
-    <Fragment>
-      <Helmet
-        defaultTitle={`${title.toLowerCase()} ¦ ${tagline.toLowerCase()}`}
-        titleTemplate={`%s ¦ ${title.toLowerCase()}`}
-      >
-        <meta name="apple-mobile-web-app-title" content={title.toLowerCase()} />
-        <meta name="theme-color" content="#e7eef4" />
-      </Helmet>
+      return (
+        <Fragment>
+          <Helmet
+            defaultTitle={`${title.toLowerCase()} ¦ ${tagline.toLowerCase()}`}
+            titleTemplate={`%s ¦ ${title.toLowerCase()}`}
+          >
+            <meta
+              name="apple-mobile-web-app-title"
+              content={title.toLowerCase()}
+            />
+            <meta name="theme-color" content="#e7eef4" />
+          </Helmet>

-      <Typekit />
-    </Fragment>
-  )
-}
-
-Head.propTypes = {
-  meta: PropTypes.object.isRequired
-}
+          <Typekit />
+        </Fragment>
+      )
+    }}
+  />
+)

 export default Head
--- a/src/components/organisms/Footer.jsx
+++ b/src/components/organisms/Footer.jsx
@ -0,0 +1,143 @@
+import React, { PureComponent } from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+import Img from 'gatsby-image'
+
+import Container from '../atoms/Container'
+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'
+
+class Footer extends PureComponent {
+  constructor(props) {
+    super(props)
+
+    this.state = { year: null }
+  }
+
+  componentDidMount() {
+    const year = new Date().getFullYear()
+    this.setState({ year })
+  }
+
+  render() {
+    return (
+      <StaticQuery
+        query={graphql`
+          query {
+            contentYaml {
+              author {
+                name
+                email
+                uri
+                twitter
+                github
+                facebook
+                googleplus
+                avatar {
+                  childImageSharp {
+                    fixed(width: 80, height: 80) {
+                      ...GatsbyImageSharpFixed
+                    }
+                  }
+                }
+                bitcoin
+                ether
+              }
+            }
+          }
+        `}
+        render={data => {
+          const { author } = data.contentYaml
+
+          return (
+            <footer role="contentinfo" className={styles.footer}>
+              <Container>
+                <div className="vcard author">
+                  <Img
+                    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">
+                      Matthias Kretschmann
+                    </a>
+                  </p>
+
+                  <p>
+                    <a href="https://github.com/kremalicious/kremalicious3/blob/master/_src/">
+                      <Github />
+                      View source
+                    </a>
+                    <a href="#" className={styles.btc}>
+                      <Bitcoin />
+                      <code>{author.bitcoin}</code>
+                    </a>
+                  </p>
+                </section>
+              </Container>
+            </footer>
+          )
+        }}
+      />
+    )
+  }
+}
+
+export default Footer
--- a/src/components/organisms/Footer.module.scss
+++ b/src/components/organisms/Footer.module.scss
@ -0,0 +1,137 @@
+@import 'variables';
+@import 'mixins';
+
+.footer {
+    text-align: center;
+    padding-top: $spacer * 2;
+    color: $text-color-light;
+    line-height: $spacer;
+
+    @media (min-width: $screen-sm) {
+        position: fixed;
+        width: 100%;
+        border: 0;
+        will-change: transform;
+        z-index: 0;
+        bottom: 0;
+        box-shadow: none;
+    }
+
+    svg {
+        fill: $brand-grey-light;
+    }
+}
+
+.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;
+
+    p {
+        margin-bottom: 0;
+        font-size: $font-size-mini;
+    }
+
+    svg {
+        width: 15px;
+        height: 15px;
+        margin-right: .2em;
+        margin-bottom: -2px;
+        display: inline-block;
+    }
+}
+
+// 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);
+
+    // stylelint-disable-next-line
+    svg {
+        width: 10px;
+        margin-right: 0;
+    }
+
+    code {
+        font-size: .6rem;
+        background: none;
+        color: $link-color;
+        padding: 0;
+    }
+}
--- a/src/images/avatar.jpeg
+++ b/src/images/avatar.jpeg