From 9e665f6673a3d6362672b20bd0141167648d13b2 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Thu, 17 Sep 2020 22:02:28 +0200
Subject: [PATCH] Create initial layout

---
 gatsby-config.js              | 13 +++++-
 src/components/footer.js      | 12 +++++
 src/components/header.js      | 53 ++++++++++-----------
 src/components/layout.js      | 44 +++++++++---------
 src/components/seo.js         | 88 -----------------------------------
 src/components/social.js      | 50 ++++++++++++++++++++
 src/pages/404.js              |  4 +-
 src/pages/index.js            |  9 +---
 src/styles/footer.module.scss | 10 ++++
 src/styles/header.module.scss | 24 ++++++++++
 src/styles/layout.module.scss | 11 +++++
 src/styles/social.module.scss | 22 +++++++++
 src/styles/variables.scss     |  1 +
 13 files changed, 193 insertions(+), 148 deletions(-)
 create mode 100644 src/components/footer.js
 delete mode 100644 src/components/seo.js
 create mode 100644 src/components/social.js
 create mode 100644 src/styles/footer.module.scss
 create mode 100644 src/styles/header.module.scss
 create mode 100644 src/styles/layout.module.scss
 create mode 100644 src/styles/social.module.scss

diff --git a/gatsby-config.js b/gatsby-config.js
index 85ce61a..f79c271 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,8 +1,17 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
+    title: `Matúš Námešný`,
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    author: `Matúš Námešný`,
+    email: "matus@namesny.com",
+    social: {
+      names: ["github", "codepen", "linkedin"],
+      links: [
+        "https://github.com/LordMathis",
+        "https://codepen.io/LordMathis/",
+        "https://www.linkedin.com/in/mat%C3%BA%C5%A1-n%C3%A1me%C5%A1n%C3%BD-3903b6128/",
+      ]
+    },  
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
diff --git a/src/components/footer.js b/src/components/footer.js
new file mode 100644
index 0000000..8a26c47
--- /dev/null
+++ b/src/components/footer.js
@@ -0,0 +1,12 @@
+import React from "react"
+import styles from '../styles/footer.module.scss'
+
+const Footer = ({authorName}) => (
+  <footer className={styles.footer}>
+    © {new Date().getFullYear()} {authorName}, Built with
+    {` `}
+    <a href="https://www.gatsbyjs.org" className={styles.link}>Gatsby</a>
+  </footer>
+)
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/header.js b/src/components/header.js
index 8990b7e..2ce91a3 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,42 +1,43 @@
 import { Link } from "gatsby"
+import Social from "./social"
 import PropTypes from "prop-types"
 import React from "react"
+import styles from "../styles/header.module.scss"
 
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `rebeccapurple`,
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
-    </div>
+const Header = ({ siteTitle, socialNames, socialLinks, email }) => (
+  <header className={styles.header}>
+    <nav className={styles.links}>
+      <ul>
+        <li key="home">
+          <Link to="/" className={styles.nameLink}>{siteTitle} |</Link>
+        </li>
+        <li key="about">
+          <a href='/#about'>
+            <span>About</span>
+          </a>
+        </li>
+        <li key="blog">
+          <a href='/#blog'>
+            <span>Blog</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <Social links={ socialLinks } names={ socialNames } email={ email }/>
   </header>
 )
 
 Header.propTypes = {
   siteTitle: PropTypes.string,
+  socialNames: PropTypes.arrayOf(PropTypes.string),
+  socialLinks: PropTypes.arrayOf(PropTypes.string),
 }
 
 Header.defaultProps = {
   siteTitle: ``,
+  socialNames: [],
+  socialLinks: [],
+  email: ``,
 }
 
 export default Header
diff --git a/src/components/layout.js b/src/components/layout.js
index 61e1707..7060f82 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -1,22 +1,24 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
 import React from "react"
 import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
+import Footer from "./footer"
+import { Helmet } from "react-helmet"
+import styles from "../styles/layout.module.scss"
 
-const Layout = ({ children }) => {
+const Layout = ({ children, title }) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
         siteMetadata {
           title
+          author
+          email
+          social {
+            names
+            links
+          }
         }
       }
     }
@@ -24,21 +26,21 @@ const Layout = ({ children }) => {
 
   return (
     <>
-      <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
+      <Helmet
+        titleTemplate={`%s | ${data.site.siteMetadata.author}`}>
+        <html lang="en" amp />
+        <title>{title}</title>
+        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" rel="preload" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"></link>
+      </Helmet>
+      <Header
+        siteTitle={data.site.siteMetadata.title}
+        socialNames={data.site.siteMetadata.social.names}
+        socialLinks={data.site.siteMetadata.social.links}
+        email={data.site.siteMetadata.email} />
+      <div className={styles.content}>
         <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
       </div>
+      <Footer authorName={data.site.siteMetadata.author}/>
     </>
   )
 }
diff --git a/src/components/seo.js b/src/components/seo.js
deleted file mode 100644
index aee4d45..0000000
--- a/src/components/seo.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-
-function SEO({ description, lang, meta, title }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-          }
-        }
-      }
-    `
-  )
-
-  const metaDescription = description || site.siteMetadata.description
-
-  return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:title`,
-          content: title,
-        },
-        {
-          property: `og:description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:type`,
-          content: `website`,
-        },
-        {
-          name: `twitter:card`,
-          content: `summary`,
-        },
-        {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author,
-        },
-        {
-          name: `twitter:title`,
-          content: title,
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription,
-        },
-      ].concat(meta)}
-    />
-  )
-}
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-}
-
-export default SEO
diff --git a/src/components/social.js b/src/components/social.js
new file mode 100644
index 0000000..f87bd2b
--- /dev/null
+++ b/src/components/social.js
@@ -0,0 +1,50 @@
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import styles from '../styles/social.module.scss'
+
+export default class Social extends Component {
+  static propTypes = {
+    links: PropTypes.arrayOf(PropTypes.string),
+    names: PropTypes.arrayOf(PropTypes.string),
+    email: PropTypes.string
+  }
+
+  render () {
+    let key = 0
+    const names = this.props.names
+    const links = this.props.links
+
+    const zipped = names.map(function(e, i) {
+      return [e, links[i]];
+    });
+
+    const socialLinks = zipped.map((val) => {
+      const link = (
+        <li key={key}>
+          <a href={val[1]} role="link">
+            {val[0]}
+          </a>
+        </li>
+      )
+      key += 1
+      return link
+    })
+
+    socialLinks.push(
+      <li key={key}>
+        <a href={`mailto:${this.props.email}`} role="link">
+          e-mail
+        </a>
+      </li>
+    )
+
+    return (
+      <div className={styles.socialNavbar} role="list">
+        <ul>
+          {socialLinks}
+        </ul>
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/pages/404.js b/src/pages/404.js
index bc4c31d..f29e40c 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,11 +1,9 @@
 import React from "react"
 
 import Layout from "../components/layout"
-import SEO from "../components/seo"
 
 const NotFoundPage = () => (
-  <Layout>
-    <SEO title="404: Not found" />
+  <Layout title="404: Not found" >
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
   </Layout>
diff --git a/src/pages/index.js b/src/pages/index.js
index eb21bc8..ae534e3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,21 +1,14 @@
 import React from "react"
-import { Link } from "gatsby"
 
 import Layout from "../components/layout"
-import Image from "../components/image"
-import SEO from "../components/seo"
 
 import "../styles/global.scss"
 
 const IndexPage = () => (
-  <Layout>
-    <SEO title="Home" />
+  <Layout title="Home">
     <h1>Hi people</h1>
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
-    </div>
   </Layout>
 )
 
diff --git a/src/styles/footer.module.scss b/src/styles/footer.module.scss
new file mode 100644
index 0000000..9b6ef3f
--- /dev/null
+++ b/src/styles/footer.module.scss
@@ -0,0 +1,10 @@
+@import "./variables.scss";
+
+.footer {
+  padding: 10px;
+  text-align: center;
+}
+
+.link {
+  color: $white;
+}
\ No newline at end of file
diff --git a/src/styles/header.module.scss b/src/styles/header.module.scss
new file mode 100644
index 0000000..23a5b9f
--- /dev/null
+++ b/src/styles/header.module.scss
@@ -0,0 +1,24 @@
+@import "./variables.scss";
+
+.header {
+  overflow: auto;
+}
+
+.links {
+  float: left;
+  ul {
+    list-style: none;
+    li {
+      display: inline;
+      margin: 5px;
+      a {
+        color: $white;
+        text-decoration: none;
+      }
+    }
+  }
+}
+  
+.nameLink {
+  font-size: 1.4em;
+}
\ No newline at end of file
diff --git a/src/styles/layout.module.scss b/src/styles/layout.module.scss
new file mode 100644
index 0000000..36e413b
--- /dev/null
+++ b/src/styles/layout.module.scss
@@ -0,0 +1,11 @@
+@import "./variables.scss";
+
+.content {
+  text-align: center;
+  margin: 0 auto;
+
+  @media only screen and (min-width: $breakLarge) {
+    width: 80%;
+    display: flex;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/social.module.scss b/src/styles/social.module.scss
new file mode 100644
index 0000000..8945741
--- /dev/null
+++ b/src/styles/social.module.scss
@@ -0,0 +1,22 @@
+@import "./variables.scss";
+
+
+.socialNavbar {
+
+  float: right;
+  vertical-align: bottom;
+
+  ul {
+    list-style: none;
+    li {
+      display: inline;
+    }
+  }
+  a {
+    color: $white;
+    text-shadow: $black 0px 0px 2px;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    margin: 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 27d38ee..ead5570 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,6 +1,7 @@
 // Colors
 $blackRussian: #222129;
 $white: #f8f8ff;
+$black: #2f2f2f;
 $blue: #0f52bf;
 
 //Fonts