Update footer, add about, some layouting

Author: npalm

content/pages/about/about.md

@@ -1,168 +1,20 @@
 ---
-title: "About gatsby-starter-morning-dew"
-slug: gatsby-starter-morning-dew
-cover: ./gatsby-cover.png
+title: "About the blog"
+slug: about
 date: 2018-09-30
 language: en
-disqus: true
+disqus: false
 type: page
 ---
 
-[![Build Status](https://travis-ci.org/maxpou/gatsby-starter-morning-dew.svg?branch=master)](https://travis-ci.org/maxpou/gatsby-starter-morning-dew) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![Maintainability](https://api.codeclimate.com/v1/badges/e09f1ac1a5cdb2987a6f/maintainability)](https://codeclimate.com/github/maxpou/gatsby-starter-morning-dew/maintainability)
+# The blog
 
+The 040 code blog is an initiative from Developers that have a relation with the city [Eindhoven](https://www.thisiseindhoven.com/en), in the [Netherlonds](https://www.youtube.com/watch?v=eE_IUPInEuc). The name `040` points to area code used at the time we used the old landline for calling our friends and family.
 
-## gatsby-starter-morning-dew
+Articles on this blog are our ideas, experiments and opinion. For each blog post we make a nice picture from a place in Eindhoven that we like for some reason.
+<p><br></p>
 
-Gatsby starter for creating a new blog!
+# Credits
 
-[Demo website.](https://maxpou.github.io/gatsby-starter-morning-dew/)
+This blog is created with the [Gatsby](https://www.gatsbyjs.org/), an awesome framework to create a static blog using [React](https://reactjs.org/) and [GraphQL](https://graphql.org/). And to get even faster started we have based the blog on the React Starter [gatsby-starter-morning-dew](https://github.com/maxpou/gatsby-starter-morning-dew) 
 
-![screenshot](https://i.imgur.com/aRTBbKs.jpg)
-
-
-## Installation
-
-
-* with Gatsby-cli: `gatsby new gatsby-blog https://github.com/maxpou/gatsby-starter-morning-dew`
-
-* without Gatsby-cli
-
-  ```bash
-  git clone my-site [email protected]:maxpou/gatsby-starter-morning-dew.git
-  cd my-site
-  yarn install
-  ```
-
-## Features
-
-- [💜 Gatsby v2](https://www.gatsbyjs.org/) / React 16
-- 🔍 SEO optimized (robot.txt)
-- 💌 Write posts/pages in Markdown
-  - 🎨 Code syntax highlight
-  - 📚 Multilang support (blog post only)
-- 📱 Responsive design
-- ✨ PWA ready
-  - ✈️ Offline support
-  - 📃 Manifest support 
-- [🔧 Fully configurable (see data/siteConfig.js)](./data/siteConfig.js)
-- 💬 Disqus support
-- 💅 css-in-js (with [styled-components](https://www.styled-components.com))
-- 🔖 Groups post with tags
-- 📊 Google Analytics support
-- 🐦 post preview image generation (Twitter, Facebook)
-- 💎 Developer tools (eslint, prettier)
-- 👷 Travis CI support
-
-
-![Lighthouse scores (locally :bowtie:)](https://lighthouse.now.sh/?perf=97&pwa=100&a11y=92&bp=100&seo=100)
-
-
-## Commands
-
-```sh
-# working locally
-yarn dev
-
-# generate build
-yarn build
-
-# format code
-yarn format
-
-# lint code
-yarn lint
-
-# Generate generate post preview images (yarn dev need to run before)
-yarn generatePostPreviewImages
-```
-
-**:warning: Add `--prefix-paths` if you are using path prefix!**
-
-## Configure
-
-```js
-module.exports = {
-  siteTitle: 'gatsby-starter-morning-dew',
-  siteDescription: "👋 Hey I'm a Gatsby starter!",
-  authorName: 'Maxence Poutord',
-  twitterUsername: '_maxpou',
-  authorAvatar: '/images/avatar.jpeg',
-  multilangPosts: true, // enable/disable flags in post lists
-  authorDescription: `
-  For the last decade, Maxence Poutord has worked with a variety of web technologies. He is currently focused on front-end development.
-  On his day to day job, he is working as a senior front-end engineer at VSware. He is also a frequent tech speaker and a mentor.
-  As a new digital nomad, he is living where the WIFI and sun is 😎 <br>
-  Do you want to know more? <a href="https://www.maxpou.fr/about" target="_blank">Visit my website!</a>
-  `,
-  siteUrl: 'https://maxpou.github.io/',
-  disqusSiteUrl: 'https://www.maxpou.fr/',
-  // Prefixes all links. For cases when deployed to maxpou.fr/gatsby-starter-morning-dew/
-  pathPrefix: '/gatsby-starter-morning-dew', // Note: it must *not* have a trailing slash.
-  siteCover: '/images/cover.jpg',
-  googleAnalyticsId: 'UA-67868977-1',
-  background_color: '#ffffff',
-  theme_color: '#222222',
-  display: 'minimal-ui',
-  icon: 'src/assets/gatsby-icon.png',
-  disqusShortname: 'maxpou',
-  postsPerPage: 6,
-  headerLinks: [
-    {
-      label: '🏡',
-      url: '/',
-    },
-    {
-      label: 'Blog',
-      url: '/',
-    },
-    {
-      label: 'About',
-      url: '/about',
-    },
-    {
-      label: 'Installation',
-      url: '/how-to-install',
-    },
-  ],
-  // Footer information (ex: Github, Netlify...)
-  websiteHost: {
-    name: 'GitHub',
-    url: 'https://github.com',
-  },
-  footerLinks: [
-    [
-      'Explore',
-      {
-        label: 'Blog',
-        url: '/',
-      },
-      {
-        label: 'About',
-        url: '/about',
-      },
-      {
-        label: 'Installation',
-        url: '/how-to-install',
-      },
-    ],
-    [
-      'Follow the author',
-      {
-        label: 'Github',
-        url: 'https://github.com/maxpou/gatsby-starter-morning-dew',
-        iconClassName: 'fa fa-github',
-      },
-      {
-        label: 'Website',
-        url: 'https://www.maxpou.fr',
-        iconClassName: 'fa fa-globe',
-      },
-      {
-        label: 'Twitter',
-        url: 'https://twitter.com/_maxpou',
-        iconClassName: 'fa fa-twitter',
-      },
-    ],
-  ],
-}
-```

data/siteConfig.js

@@ -42,6 +42,33 @@ module.exports = {
   ],
   // Footer information (ex: Github, Netlify...)
   footerLinks: [
-
+    [
+      '040 code © 2019',
+      {
+        label: 'Gatsby',
+        prefix: 'Buildt with ',
+        url: 'https://www.gatsbyjs.org/',
+      },
+    ],
+    [
+      'Blog',
+      {
+        label: 'home',
+        prefix: '',
+        url: '/',
+      },
+      {
+        label: 'about',
+        prefix: '',
+        url: '/about',
+      },
+    ],
+    [
+      'Source',
+      {
+        label: 'Github',
+        url: 'https://github.com/040code/',
+      },
+    ],
   ],
 }

src/components/Footer.js

@@ -10,7 +10,7 @@ const FooterWrapper = styled.footer`
   color: #ffffff;
   padding-left: 20px;
   padding-right: 20px;
-  margin: 0 auto;
+  margin: 3.5em auto 0 0 ;
 
   & nav {
     display: flex;
@@ -88,6 +88,7 @@ class Footer extends React.Component {
       if (item.url.startsWith('/')) {
         return (
           <span className="footer-item">
+            {item.prefix}
             <Link className="footer-link" to={item.url}>
               {item.label}
             </Link>
@@ -96,6 +97,8 @@ class Footer extends React.Component {
       }
       return (
         <span className="footer-item">
+          {item.prefix}
+          <i className={item.iconClassName}></i>
           <a className="footer-link" href={item.url}>
             {item.label}
           </a>
@@ -116,17 +119,6 @@ class Footer extends React.Component {
     return (
       <FooterWrapper>
         <nav>
-          <div className="footer-col">
-            <h5 className="footer-title">{authorName} © 2019</h5>
-            <p className="footer-item-text">
-              Built with{' '}
-              <a className="footer-link" href="https://www.gatsbyjs.org">
-                Gatsby
-              </a>
-              .
-            </p>
-
-          </div>
           {footerLinks.map((column, i) => {
             return <FooterColumn column={column} key={`footer-column-${i}`} />
           })}