Add templates to doc pages and give docs home one

content/docs/index.md

@@ -1,3 +1,7 @@
+---
+template: 'doc-home'
+---
+
 # DVC Documentation
 
 Welcome! In here you may find all the guiding material and technical documents

src/gatsby/models/docs/createPages.js

@@ -1,3 +1,4 @@
+const path = require('path')
 const GithubSlugger = require('github-slugger')
 
 const slugger = new GithubSlugger()
@@ -43,6 +44,7 @@ const createPages = async ({ graphql, actions }) => {
               id
               rawMarkdownBody
               slug
+              template
             }
           }
         }
@@ -54,17 +56,19 @@ const createPages = async ({ graphql, actions }) => {
     throw docsResponse.errors
   }
 
-  const docComponent = require.resolve('../../../templates/doc-home.tsx')
+  const docComponent = require.resolve('../../../templates/doc.tsx')
 
   docsResponse.data.docs.edges.forEach(doc => {
     const {
-      node: { id, slug, rawMarkdownBody }
+      node: { id, slug, rawMarkdownBody, template }
     } = doc
     const headings = parseHeadings(rawMarkdownBody)
 
     if (slug) {
       actions.createPage({
-        component: docComponent,
+        component: template
+          ? require.resolve(path.resolve('src', 'templates', template + '.tsx'))
+          : docComponent,
         path: slug,
         context: {
           id,

src/gatsby/models/docs/onCreateMarkdownContentNode.js

@@ -14,7 +14,8 @@ function createMarkdownDocsNode(api, { parentNode }) {
   const fieldData = {
     slug,
     rawMarkdownBody: node.rawMarkdownBody,
-    sourcePath: relativePath
+    sourcePath: relativePath,
+    template: node.frontmatter.template
   }
 
   const docNode = {

src/gatsby/models/markdown-content/fields.js

@@ -12,5 +12,6 @@ module.exports = {
   timeToRead: {
     type: 'String!',
     resolve: parentResolverPassthrough()
-  }
+  },
+  template: 'String'
 }

src/templates/doc-home.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import { Node } from 'unist'
-import { getItemByPath } from '../utils/shared/sidebar'
 
 import SEO from '../components/SEO'
 
@@ -27,11 +26,9 @@ const DocHomePage: React.FC<IDocHomePageProps> = ({
     page: { htmlAst }
   } = data
 
-  const { label } = getItemByPath(slug)
-
   return (
     <>
-      <SEO title={label} />
+      <SEO title="Home" />
       <Documentation htmlAst={htmlAst} path={slug} headings={headings} />
     </>
   )
@@ -40,7 +37,7 @@ const DocHomePage: React.FC<IDocHomePageProps> = ({
 export default DocHomePage
 
 export const pageQuery = graphql`
-  query DocPage($id: String!) {
+  query DocHomePage($id: String!) {
     page: docsPage(id: { eq: $id }) {
       htmlAst
     }

src/templates/doc.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import { Node } from 'unist'
+import { getItemByPath } from '../utils/shared/sidebar'
+
+import SEO from '../components/SEO'
+
+import Documentation from '../components/Documentation'
+
+interface IDocPageProps {
+  data: {
+    page: {
+      htmlAst: Node
+    }
+  }
+  pageContext: {
+    slug: string
+    headings: []
+  }
+}
+
+const DocPage: React.FC<IDocPageProps> = ({
+  data,
+  pageContext: { slug, headings }
+}) => {
+  const {
+    page: { htmlAst }
+  } = data
+
+  const { label } = getItemByPath(slug)
+
+  return (
+    <>
+      <SEO title={label} />
+      <Documentation htmlAst={htmlAst} path={slug} headings={headings} />
+    </>
+  )
+}
+
+export default DocPage
+
+export const pageQuery = graphql`
+  query DocPage($id: String!) {
+    page: docsPage(id: { eq: $id }) {
+      htmlAst
+    }
+  }
+`