Merge pull request #14 from tinacms/docs-ssg

static generation for docs

package.json

@@ -31,6 +31,7 @@
     "dotenv": "^8.2.0",
     "email-validator": "^2.0.4",
     "express": "^4.17.1",
+    "fast-glob": "^3.1.1",
     "final-form": "^4.18.7",
     "fs": "^0.0.1-security",
     "glob": "^7.1.6",
@@ -40,7 +41,7 @@
     "jsonp": "^0.2.1",
     "matter": "^0.2.0",
     "moment": "^2.24.0",
-    "next": "^9.1.7",
+    "next": "^9.2.2-canary.12",
     "next-svgr": "0.0.2",
     "next-tinacms-json": "^0.2.0",
     "next-tinacms-markdown": "^0.1.0",

pages/docs/[...slug].tsx

@@ -33,6 +33,50 @@ export default function DocTemplate(props) {
   )
 }
 
+export async function unstable_getStaticProps(ctx) {
+  let { slug: slugs } = ctx.params
+
+  const slug = slugs.join('/')
+  const content = await import(`../../content/docs/${slug}.md`)
+  const doc = matter(content.default)
+
+  const docsNavData = await import('../../content/toc-doc.json')
+  const nextDocPage =
+    doc.data.next &&
+    matter((await import(`../../content${doc.data.next}.md`)).default)
+  const prevDocPage =
+    doc.data.prev &&
+    matter((await import(`../../content${doc.data.prev}.md`)).default)
+
+  return {
+    props: {
+      doc: {
+        data: { ...doc.data, slug },
+        content: doc.content,
+      },
+      docsNav: docsNavData.default,
+      nextPage: {
+        slug: doc.data.next,
+        title: nextDocPage && nextDocPage.data.title,
+      },
+      prevPage: {
+        slug: doc.data.prev,
+        title: prevDocPage && prevDocPage.data.title,
+      },
+    },
+  }
+}
+
+export async function unstable_getStaticPaths() {
+  const fg = require('fast-glob')
+  const contentDir = './content/docs/'
+  const files = await fg(`${contentDir}**/*.md`)
+  return files.map(file => {
+    const path = file.substring(contentDir.length, file.length - 3)
+    return { params: { slug: path.split('/') } }
+  })
+}
+
 const DocsLayout = styled.div`
   padding: 6rem 0 3rem 0;
 
@@ -66,34 +110,3 @@ const DocsContent = styled.div`
     font-size: 1.75rem;
   }
 `
-
-DocTemplate.getInitialProps = async function(ctx) {
-  const { slug: slugs } = ctx.query
-  const fullSlug = slugs.join('/')
-  const content = await import(`../../content/docs/${fullSlug}.md`)
-  const doc = matter(content.default)
-
-  const docsNavData = await import('../../content/toc-doc.json')
-  const nextDocPage =
-    doc.data.next &&
-    matter((await import(`../../content${doc.data.next}.md`)).default)
-  const prevDocPage =
-    doc.data.prev &&
-    matter((await import(`../../content${doc.data.prev}.md`)).default)
-
-  return {
-    doc: {
-      data: { ...doc.data, slug: fullSlug },
-      content: doc.content,
-    },
-    docsNav: docsNavData.default,
-    nextPage: {
-      slug: doc.data.next,
-      title: nextDocPage && nextDocPage.data.title,
-    },
-    prevPage: {
-      slug: doc.data.prev,
-      title: prevDocPage && prevDocPage.data.title,
-    },
-  }
-}