feat: Start guide template

gatsby-node.js

@@ -5,10 +5,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const result = await graphql(`
     {
-      allMarkdownRemark(
-        sort: { order: DESC, fields: [frontmatter___date] }
-        limit: 1000
-      ) {
+      allMarkdownRemark(limit: 1000) {
         edges {
           node {
             frontmatter {

src/components/BreadcrumbBar.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import './BreadcrumbBar.scss';
+
+const BreadcrumbBar = () => {
+  return <div className="breadcrumbBar">hey</div>;
+};
+
+export default BreadcrumbBar;

src/components/BreadcrumbBar.scss

@@ -0,0 +1,5 @@
+.breadcrumbBar {
+  background: rgb(202, 201, 201);
+  height: 50px;
+  width: 100%;
+}

src/markdown-pages/example.md

@@ -1,8 +1,8 @@
 ---
-path: "/docs/1"
-date: "2020-04-20"
-title: "My cool docs"
-template: "example-template"
+path: '/docs/1'
+duration: '30 min'
+title: 'Build an app'
+template: 'GuideTemplate'
 ---
 
 ### This doc is great

src/templates/example-template.js → src/templates/GuideTemplate.js

@@ -1,37 +1,42 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
+import Layout from '../components/Layout';
+import BreadcrumbBar from '../components/BreadcrumbBar';
 
-export default function Template({
+export default function GuideTemplate({
   data, // this prop will be injected by the GraphQL query below.
 }) {
   const { markdownRemark } = data; // data.markdownRemark holds your post data
   const { frontmatter, html } = markdownRemark;
   return (
-    <div className="doc-container">
-      <div className="doc">
-        <h1>{frontmatter.title}</h1>
-        <h2>{frontmatter.date}</h2>
-        <div
-          className="doc-content"
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
+    <Layout>
+      <BreadcrumbBar />
+      <div className="guideTemplate-container">
+        <div>
+          <h1>{frontmatter.title}</h1>
+          <h2>{frontmatter.duration}</h2>
+          <div
+            className="guideTemplate-content"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        </div>
       </div>
-    </div>
+    </Layout>
   );
 }
 export const pageQuery = graphql`
   query($path: String!) {
     markdownRemark(frontmatter: { path: { eq: $path } }) {
       html
       frontmatter {
-        date(formatString: "MMMM DD, YYYY")
+        duration
         path
         title
       }
     }
   }
 `;
-Template.propTypes = {
+GuideTemplate.propTypes = {
   data: PropTypes.object,
 };