[WIP]Improvment: Read the docs

src/templates/MarkdownList.jsx

@@ -1,14 +1,26 @@
 import { Link } from "gatsby"
 import React from "react"
 import Layout from "../components/Layout"
+import HeaderSection from '../components/HeaderSection'
+import Content from '../components/Content'
+import styles from './Doc.module.scss'
+import MarkdownTemplate from "./MarkdownTemplate"
 
 export default function MarkdownList({pageContext}) {
   return (
     <Layout>
-        <div>{pageContext.name}</div>
+        <HeaderSection title={pageContext.name} />
+        <Content>
+        <main className={styles.wrapper}>
+        <aside className={styles.sidebar}>
         <ul>
          {pageContext.markdownList.map(({node})=><li><Link to={node.frontmatter.slug}>{node.frontmatter.title}</Link></li>)}
         </ul>
+        </aside>
+        {/* <MarkdownTemplate path={pageContext.markdownList[0]}></MarkdownTemplate> */}
+        {/* {pageContext.markdownList[0]} */}
+        </main>
+        </Content>
     </Layout>
   )
 }

src/templates/MarkdownTemplate.jsx

@@ -4,15 +4,20 @@ import DocToc from '../components/DocToc'
 import DocHeader from '../components/DocHeader'
 import DocContent from '../components/DocContent'
 import Layout from '../components/Layout'
+import HeaderSection from '../components/HeaderSection'
+import Content from '../components/Content'
 
 export default function MarkdownTemplate({data}) {
     const post = data.markdownRemark
   return (
     <Layout>
         {/* <div dangerouslySetInnerHTML={{__html:post.html}}></div> */}
-        <DocHeader title={post.frontmatter.title}/>
+        {/* <DocHeader title={post.frontmatter.title}/> */}
+        <HeaderSection title={post.frontmatter.title} />
         {post.tableOfContents && <DocToc tableOfContents={post.tableOfContents} />}
+        <Content>
         <DocContent html={post.html} htmlAst={post.htmlAst} />
+        </Content>
     </Layout>
   )
 }
@@ -26,6 +31,7 @@ export const postQuery = graphql`
       frontmatter {
         slug
         title
+        section
       }
       ...PageFooter
     }