🌟projects and blog posts now actually work

assets/content/about/aboutMe.md

@@ -1,3 +1,8 @@
+---
+type: about
+path: '/'
+---
+
 Hi, I'm James.
 I'm currently on industrial placement in [Silicon Valley](https://en.wikipedia.org/wiki/Silicon_Valley) at [Cisco Systems](https://www.cisco.com) in between my studies at the [University of Kent](https://www.kent.ac.uk), and between my day to day work I actively contribute to my ongoing projects.
 In my spare time you'll probably find me hopping on a cheap plane somewhere, camera in my hand and in search for an adventure.

assets/content/blog/blog.json

@@ -0,0 +1,4 @@
+{
+  "title": "Blog",
+  "about": "This is where I write things. Or at least it will be where I write things, as soon as I start writing things."
+}

assets/content/projects/projects.json

@@ -0,0 +1,4 @@
+{
+  "title": "Projects",
+  "about": "Here are some of the projects I have worked on and am proud enough of to publicise here."
+}

gatsby-browser.js

@@ -1 +1,7 @@
+/* eslint-disable import/prefer-default-export */
 import './src/styles/global.scss';
+import React from 'react';
+import { CodeProvider } from './src/components/common/CodeContext';
+
+// eslint-disable-next-line react/prop-types
+export const wrapRootElement = ({ element }) => <CodeProvider>{element}</CodeProvider>;

gatsby-config.js

@@ -8,8 +8,8 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `src`,
-        path: `${__dirname}/src/`,
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
       },
     },
     {
@@ -26,20 +26,40 @@ module.exports = {
         path: `${__dirname}/assets/content/about/`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `projects`,
+        path: `${__dirname}/assets/content/projects/`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `blog`,
+        path: `${__dirname}/assets/content/blog/`,
+      },
+    },
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
-        trackingId: 'UA-133320080-1',
+        trackingId: `UA-133320080-1`,
       },
     },
     {
-      resolve: 'gatsby-plugin-web-font-loader',
+      resolve: `gatsby-plugin-web-font-loader`,
       options: {
         google: {
           families: ['Major Mono Display', 'Roboto Mono', 'Titillium Web'],
         },
       },
     },
+    {
+      resolve: `gatsby-plugin-favicon`,
+      options: {
+        logo: './assets/images/avatar.jpg',
+      },
+    },
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-sass`,
     `gatsby-plugin-sharp`,

gatsby-node.js

@@ -0,0 +1,73 @@
+const path = require('path');
+
+const { createFilePath } = require(`gatsby-source-filesystem`);
+
+exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
+  const { createNodeField } = boundActionCreators;
+  if (node.internal.type === `MarkdownRemark`) {
+    const slug = createFilePath({ node, getNode, basePath: `pages` });
+    createNodeField({
+      node,
+      name: 'slug',
+      value: slug,
+    });
+
+    const dirSplit = path.parse(slug).dir.split(path.sep);
+    if (dirSplit.length > 0 && dirSplit[0] === '') {
+      dirSplit.shift(); // because path starts with /, '' is always at position 0
+    }
+
+    let type = 'page';
+    switch (dirSplit[0]) {
+      case 'projects':
+        type = 'project';
+        break;
+      case 'blog':
+        type = 'post';
+        break;
+    }
+
+    createNodeField({
+      node,
+      name: 'type',
+      value: type,
+    });
+  }
+};
+
+exports.createPages = ({ graphql, boundActionCreators }) => {
+  const { createPage } = boundActionCreators;
+
+  return new Promise((resolve, reject) => {
+    graphql(`
+      {
+        allMarkdownRemark {
+          edges {
+            node {
+              fields {
+                slug
+                type
+              }
+            }
+          }
+        }
+      }
+    `).then(result => {
+      result.data.allMarkdownRemark.edges.map(({ node }) => {
+        const templatePath =
+          node.fields.type === 'project'
+            ? './src/templates/project.jsx'
+            : './src/templates/blogPost.jsx';
+        createPage({
+          path: node.fields.slug,
+          component: path.resolve(templatePath),
+          context: {
+            // Data passed to context is available in page queries as GraphQL variables.
+            slug: node.fields.slug,
+          },
+        });
+      });
+      resolve();
+    });
+  });
+};

package.json

@@ -18,6 +18,7 @@
     "@fortawesome/react-fontawesome": "^0.1.4",
     "gatsby": "^2.0.76",
     "gatsby-image": "^2.0.29",
+    "gatsby-plugin-favicon": "^3.1.5",
     "gatsby-plugin-google-analytics": "^2.0.10",
     "gatsby-plugin-react-helmet": "^3.0.5",
     "gatsby-plugin-sass": "^2.0.8",

src/components/common/CodeContext.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const defaultState = {
+  language: 'java',
+  changeLanguage: () => {},
+};
+
+const CodeContext = React.createContext(defaultState);
+
+class CodeProvider extends React.Component {
+  state = {
+    language: 'java',
+  };
+
+  changeLanguage = language => {
+    let newLanguage = '';
+    switch (language.toLowerCase()) {
+      case 'javascript':
+        newLanguage = 'javascript';
+        break;
+      case 'react':
+        newLanguage = 'javascript';
+        break;
+      case 'python':
+        newLanguage = 'python';
+        break;
+      case 'java':
+        newLanguage = 'java';
+        break;
+      default:
+        newLanguage = 'java';
+    }
+    this.setState({ language: newLanguage });
+  };
+
+  render() {
+    const { children } = this.props;
+    const { language } = this.state;
+    return (
+      <CodeContext.Provider
+        value={{
+          language,
+          changeLanguage: this.changeLanguage,
+        }}
+      >
+        {children}
+      </CodeContext.Provider>
+    );
+  }
+}
+
+CodeProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+};
+
+export default CodeContext;
+
+export { CodeProvider };

src/components/common/header/header.jsx

@@ -2,13 +2,12 @@ import React from 'react';
 import NavBar from './navbar';
 import '../../../styles/codestyle.scss';
 import './header.scss';
+import CodeContext from '../CodeContext';
 
-export default class Header extends React.Component {
-  render() {
-    return (
-      <header className="translucent">
-        <NavBar language="java" />
-      </header>
-    );
-  }
-}
+const Header = () => (
+  <header className="translucent">
+    <CodeContext.Consumer>{({ language }) => <NavBar language={language} />}</CodeContext.Consumer>
+  </header>
+);
+
+export default Header;

src/components/common/header/navbar.jsx

@@ -3,26 +3,24 @@ import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import './header.scss';
 
-export default class NavBar extends React.Component {
-  render() {
-    return (
-      <nav className={`navbar ${this.props.language}`}>
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/projects">Projects</Link>
-          </li>
-          <li>
-            <Link to="/blog">Blog</Link>
-          </li>
-        </ul>
-      </nav>
-    );
-  }
-}
+const NavBar = ({ language }) => (
+  <nav className={`navbar ${language}`}>
+    <ul>
+      <li>
+        <Link to="/">Home</Link>
+      </li>
+      <li>
+        <Link to="/projects">Projects</Link>
+      </li>
+      <li>
+        <Link to="/blog">Blog</Link>
+      </li>
+    </ul>
+  </nav>
+);
 
 NavBar.propTypes = {
   language: PropTypes.string.isRequired,
 };
+
+export default NavBar;

src/components/containers/complexWrapper.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Me from '../me/me';
+import './complexWrapper.scss';
+
+const ComplexWrapper = ({ children }) => (
+  <div id={'content'}>
+    <aside id={'content_left'}>
+      <Me />
+    </aside>
+    <section id={'main'}>{children}</section>
+  </div>
+);
+
+ComplexWrapper.propTypes = {
+  children: PropTypes.any.isRequired,
+};
+
+export default ComplexWrapper;

src/components/containers/complexWrapper.scss

@@ -0,0 +1,36 @@
+#content {
+  display: flex;
+  position: relative;
+  margin: 0;
+
+  $leftWidth: 300px;
+
+  letter-spacing: 0.15ch;
+
+  @media (min-width: 750px) {
+    #content_left {
+      width: $leftWidth;
+      position: fixed;
+      z-index: 1;
+      height: 100%;
+    }
+    #main {
+      width: 100%;
+      margin-top: 80px;
+      margin-bottom: 50px;
+      padding-left: $leftWidth;
+      max-width: 800px;
+    }
+  }
+  @media (max-width: 750px) {
+    #content_left {
+      display: none;
+    }
+    #main {
+      width: 100%;
+      margin-top: 80px;
+      margin-bottom: 50px;
+      padding: 0 40px;
+    }
+  }
+}

src/components/wrapper.jsx → src/components/containers/wrapper.jsx

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import Header from './common/header/header';
-import Footer from './common/footer/footer';
-import SEO from './common/seo';
+import Header from '../common/header/header';
+import Footer from '../common/footer/footer';
+import SEO from '../common/seo';
 import './wrapper.scss';
 
 library.add(faAngleDown, fab);
 
 const Wrapper = ({ title, children }) => (
-  <div id={'body'}>
+  <div id={'wrapper'}>
     <SEO title={title} />
     <Header />
     {children}

src/components/containers/wrapper.scss

@@ -0,0 +1,4 @@
+#wrapper {
+  // margin: 0 20px;
+  height: 100vh;
+}