feat: added experience and education pages

gatsby-browser.js

@@ -4,20 +4,24 @@
  * @see https://www.gatsbyjs.org/docs/browser-apis/
  */
 
+require('./src/styles/app.scss') // main styling
+
+const { activeEnv, isProd } = require('./utils/environment')
 const printCorporateMessage = require('./gatsby/browser/corporateMessage')
 const setDefaultTime = require('./gatsby/browser/defaultTime')
 
-require('./src/styles/app.scss') // main styling
-
 // module.exports.wrapPageElement = require('./gatsby/wrapPageElement')
 module.exports.wrapRootElement = require('./gatsby/wrapRootElement')
 
 module.exports.onClientEntry = () => {
   setDefaultTime()
+  console.info(`Environment: %c${activeEnv}`, 'color: blue;')
 }
 
 module.exports.onInitialClientRender = () => {
-  printCorporateMessage()
+  if (isProd) {
+    printCorporateMessage()
+  }
 }
 
 module.exports.onServiceWorkerUpdateReady = () => {

gatsby/node/onCreateNode.js

@@ -15,14 +15,14 @@ module.exports = async ({ node, getNode, actions }) => {
       console.log()
       console.log(dim(`Creating ${source} node`))
       console.log(bold(fileNode.relativePath))
-      console.log(node.frontmatter)
       console.log(fileNode)
     }
 
     if (node.frontmatter.published === false && isProd) {
       return // skip this unpublished stuff only in production
     }
 
+    let parent = null // set parent if the source is a children of another source
     let slug = node.frontmatter.slug || undefined
     if (!slug) {
       slug = createFilePath({ node, getNode })
@@ -46,20 +46,42 @@ module.exports = async ({ node, getNode, actions }) => {
         }
         node.frontmatter = { ...defaults, ...node.frontmatter }
         break
+
       case 'writings':
         defaults = {
           ...defaults,
           categories: [],
           tags: [],
         }
+        break
+
+      case 'education':
+        parent = 'about'
+        defaults = {
+          ...defaults,
+          qualifications: [],
+        }
         node.frontmatter = { ...defaults, ...node.frontmatter }
         break
+
+      case 'experience':
+        parent = 'about'
+        defaults = {
+          ...defaults,
+          responsibilities: [],
+        }
+        node.frontmatter = { ...defaults, ...node.frontmatter }
+        break
+    }
+
+    if (isDev) {
+      console.log(node.frontmatter)
     }
 
     createNodeField({
       node,
       name: 'slug',
-      value: `/${source}/${slug}`,
+      value: parent ? `/${parent}/${source}/${slug}` : `/${source}/${slug}`,
     })
     createNodeField({
       node,

src/components/timeline/Item.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link as NativeLink } from 'gatsby'
+
+import Time from '../Time'
+
+const Item = ({ title, description, started, ended, link }) => (
+  <div className="item">
+    <div className="timespan">
+      <Time date={started} /> – <Time date={ended} />
+    </div>
+    <div className="title">
+      <NativeLink to={link}>{title}</NativeLink>
+    </div>
+    <div className="desc">{description}</div>
+  </div>
+)
+
+export default Item

src/components/timeline/Section.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Item from './Item'
+import Icon from '../Icon'
+
+const Section = ({ name, icon, data }) => {
+  return (
+    <section>
+      <header>
+        <Icon name={icon} />
+        <h2 className="title">{name}</h2>
+      </header>
+      <div className="items">
+        {data.map((props, index) => (
+          <Item key={index} {...props} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default Section

src/components/timeline/Timeline.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import Section from './Section'
+
+const Timeline = ({ data }) => {
+  return (
+    <div className="container container--small">
+      <div id="timeline">
+        {data.map((props, index) => (
+          <Section key={index} {...props} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Timeline

src/pages/about/education.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+import { HistoryConsumer } from '../../provider/history'
+import Head from '../../components/Head'
+import Timeline from '../../components/timeline/Timeline'
+
+class Page extends React.Component {
+  state = {
+    pageName: 'Education',
+  }
+
+  componentDidMount() {
+    const { breadcrumb } = this.props.pageContext
+
+    this.props.history.update({
+      location: breadcrumb.location,
+      crumbLabel: this.state.pageName,
+      crumbs: breadcrumb.crumbs,
+    })
+  }
+
+  render() {
+    const {
+      allMdx: { edges },
+    } = this.props.data
+
+    const timelineSection = edges.map(({ node: { frontmatter, fields, excerpt } }) => ({
+      title: frontmatter.title,
+      description: excerpt,
+      started: frontmatter.started,
+      ended: frontmatter.ended,
+      link: fields.slug,
+    }))
+    const timelineData = [
+      {
+        name: 'Education',
+        icon: 'book',
+        data: timelineSection,
+      },
+    ]
+
+    return (
+      <>
+        <Head pageName={this.state.pageName} bodyClasses="home" />
+
+        <h1 className="headline">{this.state.pageName}</h1>
+
+        <Timeline data={timelineData} />
+      </>
+    )
+  }
+}
+
+export default React.forwardRef((props, ref) => (
+  <HistoryConsumer>
+    {(history) => <Page {...props} ref={ref} history={history} />}
+  </HistoryConsumer>
+))
+
+export const query = graphql`
+  query EducationQuery {
+    allMdx(
+      filter: { fields: { source: { eq: "education" } } }
+      sort: { fields: [frontmatter___ended, frontmatter___started], order: DESC }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            qualifications
+            started
+            ended
+          }
+          fields {
+            slug
+          }
+          excerpt
+        }
+      }
+    }
+  }
+`

src/pages/about/experience.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+import { HistoryConsumer } from '../../provider/history'
+import Head from '../../components/Head'
+import Timeline from '../../components/timeline/Timeline'
+
+class Page extends React.Component {
+  state = {
+    pageName: 'Experience',
+  }
+
+  componentDidMount() {
+    const { breadcrumb } = this.props.pageContext
+
+    this.props.history.update({
+      location: breadcrumb.location,
+      crumbLabel: this.state.pageName,
+      crumbs: breadcrumb.crumbs,
+    })
+  }
+
+  render() {
+    const {
+      allMdx: { edges },
+    } = this.props.data
+
+    const timelineSection = edges.map(({ node: { frontmatter, fields, excerpt } }) => ({
+      title: frontmatter.title,
+      description: excerpt,
+      started: frontmatter.started,
+      ended: frontmatter.ended,
+      link: fields.slug,
+    }))
+    const timelineData = [
+      {
+        name: 'Experience',
+        icon: 'briefcase',
+        data: timelineSection,
+      },
+    ]
+
+    return (
+      <>
+        <Head pageName={this.state.pageName} bodyClasses="home" />
+
+        <h1 className="headline">{this.state.pageName}</h1>
+
+        <Timeline data={timelineData} />
+      </>
+    )
+  }
+}
+
+export default React.forwardRef((props, ref) => (
+  <HistoryConsumer>
+    {(history) => <Page {...props} ref={ref} history={history} />}
+  </HistoryConsumer>
+))
+
+export const query = graphql`
+  query ExperienceQuery {
+    allMdx(
+      filter: { fields: { source: { eq: "experience" } } }
+      sort: { fields: [frontmatter___ended, frontmatter___started], order: DESC }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            position
+            started
+            ended
+          }
+          fields {
+            slug
+          }
+          excerpt
+        }
+      }
+    }
+  }
+`

src/styles/app.scss

@@ -59,6 +59,7 @@
 @import "components/separator";
 @import "components/status";
 @import "components/theme-switch";
+@import "components/timeline";
 @import "components/toast";
 @import "components/tooltip";