Merge pull request #565 from tinacms/refactor-to-get-github-file

Refactor to get GitHub file

package.json

@@ -54,7 +54,7 @@
     "next": "^9.5.0",
     "next-seo": "^4.1.0",
     "next-svgr": "0.0.2",
-    "next-tinacms-github": "^0.2.1",
+    "next-tinacms-github": "^0.26.0",
     "next-tinacms-json": "^0.3.17",
     "next-tinacms-markdown": "^0.2.17",
     "node-fetch": "^2.6.0",
@@ -74,16 +74,16 @@
     "react-syntax-highlighter": "^12.2.1",
     "react-textarea-autosize": "^7.1.2",
     "react-tinacms-date": "^0.1.1",
-    "react-tinacms-editor": "^0.8.4",
-    "react-tinacms-github": "^0.6.0",
-    "react-tinacms-inline": "^0.10.1",
+    "react-tinacms-editor": "^0.26.0",
+    "react-tinacms-github": "^0.26.0",
+    "react-tinacms-inline": "^0.26.0",
     "remark": "^11.0.2",
     "remark-parse": "^8.0.0",
     "remark-shortcodes": "^0.3.1",
     "serve": "11.2.0",
     "strip-markdown": "^3.1.1",
     "styled-components": "^4.4.1",
-    "tinacms": "^0.22.1",
+    "tinacms": "^0.26.0",
     "webpack": "^4.41.5"
   },
   "devDependencies": {

pages/blog/[slug].tsx

@@ -18,7 +18,7 @@ import { InlineGithubForm } from 'components/layout/InlineGithubForm'
 const fg = require('fast-glob')
 import { Button } from 'components/ui/Button'
 import Error from 'next/error'
-import { getMarkdownPreviewProps } from 'utils/getMarkdownFile'
+import { getMarkdownPreviewProps } from 'utils/getMarkdownPreviewProps'
 import { InlineWysiwyg } from 'components/inline-wysiwyg'
 import { usePlugin, useCMS } from 'tinacms'
 import { useLastEdited } from 'utils/useLastEdited'

pages/blog/page/[page_index].tsx

@@ -16,7 +16,7 @@ import {
 import { DynamicLink, BlogPagination } from 'components/ui'
 import { InlineGithubForm } from 'components/layout/InlineGithubForm'
 import { useForm } from 'tinacms'
-import { getMarkdownPreviewProps } from 'utils/getMarkdownFile'
+import { getMarkdownPreviewProps } from 'utils/getMarkdownPreviewProps'
 import { PreviewData } from 'next-tinacms-github'
 const Index = props => {
   const { currentPage, numPages } = props

pages/docs/releases.tsx

@@ -81,7 +81,6 @@ export const getStaticProps: GetStaticProps = async function({
   for (const filePath of releaseFiles) {
     const slug = filePath.substring(contentDir.length, filePath.length - 3)
     const absPath = path.resolve(`${filePath}`)
-    console.log(absPath)
     const doc = matter(fs.readFileSync(absPath, 'utf8'))
 
     releases.push({
@@ -96,7 +95,7 @@ export const getStaticProps: GetStaticProps = async function({
   return {
     props: {
       preview: false,
-      docsNav,
+      docsNav: docsNav.data,
       releases,
     },
   }

pages/guides/[category]/[guide]/[step].tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { GetStaticProps, GetStaticPaths } from 'next'
-import { getMarkdownPreviewProps } from 'utils/getMarkdownFile'
+import { getMarkdownPreviewProps } from 'utils/getMarkdownPreviewProps'
 import { DocsLayout, MarkdownContent } from 'components/layout'
 import { NextSeo } from 'next-seo'
 import { DocsPagination, LastEdited } from 'components/ui'

pages/guides/index.tsx

@@ -1,5 +1,5 @@
 import { getGuideNavProps } from 'utils/guide_helpers'
-import { readMarkdownFile } from 'utils/getMarkdownFile'
+import { readMarkdownFile } from 'utils/getMarkdownPreviewProps'
 import React, { useMemo } from 'react'
 import { useRouter } from 'next/router'
 import { DocsLayout, Wrapper, MarkdownContent } from 'components/layout'

utils/docs/getDocProps.ts

@@ -1,14 +1,11 @@
-import { getJsonPreviewProps } from '../getJsonPreviewProps'
-import { getMarkdownPreviewProps } from '../getMarkdownFile'
+import { getJsonFile } from '../getJsonPreviewProps'
+import {
+  getMarkdownPreviewProps,
+  getMarkdownFile,
+} from '../getMarkdownPreviewProps'
 
 export async function getDocsNav(preview: boolean, previewData: any) {
-  const previewProps = await getJsonPreviewProps(
-    'content/toc-doc.json',
-    preview,
-    previewData
-  )
-
-  return previewProps.props.file.data
+  return getJsonFile('content/toc-doc.json', preview, previewData)
 }
 
 export async function getDocProps({ preview, previewData }: any, slug: string) {
@@ -20,10 +17,11 @@ export async function getDocProps({ preview, previewData }: any, slug: string) {
     )
   ).props
 
+  const docsNav = await getDocsNav(preview, previewData)
   return {
     props: {
       ...currentDoc,
-      docsNav: await getDocsNav(preview, previewData),
+      docsNav: docsNav.data,
       nextPage: await getPageRef(
         currentDoc.file.data.frontmatter.next,
         preview,
@@ -49,13 +47,13 @@ export async function getPageRef(
       title: null,
     }
   }
-  const prevDocPreviewData = await getMarkdownPreviewProps(
+  const prevDoc = await getMarkdownFile(
     `content${slug}.md`,
     preview,
     previewData
   )
 
-  const { title } = prevDocPreviewData.props.file.data.frontmatter
+  const { title } = prevDoc.data.frontmatter
 
   return { slug, title }
 }

utils/getJsonPreviewProps.ts

@@ -1,29 +1,47 @@
 import { readFile } from './readFile'
 import path from 'path'
-import { getGithubPreviewProps, parseJson } from 'next-tinacms-github'
+import { parseJson, getGithubFile, GithubFile } from 'next-tinacms-github'
 
 export const getJsonPreviewProps = async (
   fileRelativePath: string,
   preview: boolean,
   previewData: any
 ) => {
+  let file = null
+  let error = null
+
+  try {
+    file = await getJsonFile(fileRelativePath, preview, previewData)
+  } catch (e) {
+    error = e
+  }
+
+  return {
+    props: {
+      error,
+      preview: !!preview,
+      file,
+    },
+  }
+}
+
+export async function getJsonFile<T = any>(
+  fileRelativePath: string,
+  preview: boolean,
+  previewData: any
+): Promise<GithubFile<T>> {
   if (preview) {
-    return getGithubPreviewProps({
+    return getGithubFile<T>({
       ...previewData,
-      fileRelativePath: fileRelativePath,
+      fileRelativePath,
       parse: parseJson,
     })
   }
-  const data = await readJsonFile(fileRelativePath)
+
   return {
-    props: {
-      error: null,
-      preview: false,
-      file: {
-        fileRelativePath: fileRelativePath,
-        data,
-      },
-    },
+    sha: '',
+    fileRelativePath,
+    data: await readJsonFile(fileRelativePath),
   }
 }
 

utils/getMarkdownFile.ts → utils/getMarkdownPreviewProps.ts

@@ -2,7 +2,7 @@ import path from 'path'
 import matter from 'gray-matter'
 import { readFile } from './readFile'
 import { formatExcerpt } from '.'
-import { getGithubPreviewProps, parseMarkdown } from 'next-tinacms-github'
+import { parseMarkdown, getGithubFile, GithubFile } from 'next-tinacms-github'
 import toc from 'markdown-toc'
 import { slugifyTocHeading } from './docs/slugifyToc'
 
@@ -23,33 +23,43 @@ export const getMarkdownPreviewProps = async (
   preview: boolean,
   previewData: any
 ) => {
-  if (preview) {
-    let previewProps = await getGithubPreviewProps({
-      ...previewData,
-      fileRelativePath: fileRelativePath,
-      parse: parseMarkdown,
-    })
-    if (!previewProps.props.error) {
-      //TODO - make parse async so we can use parseMarkdownWithExcerpt function above
-      previewProps.props.file.data.excerpt = await formatExcerpt(
-        previewProps.props.file.data.markdownBody
-      )
-    }
-    return {
-      props: {
-        ...previewProps.props,
-        tocItems: toc(previewProps.props.file.data.markdownBody).content,
-      },
-    }
+  let file = null
+  let error = null
+  let tocItems = null
+
+  try {
+    file = await getMarkdownFile(fileRelativePath, preview, previewData)
+    file.data.excerpt = await formatExcerpt(file.data.markdownBody)
+    tocItems = toc(file.data.markdownBody).content
+  } catch (e) {
+    error = e
   }
-  const file = await readMarkdownFile(fileRelativePath)
+
   return {
     props: {
       error: null,
-      preview: false,
+      preview: !!preview,
       file,
       tocItems: toc(file.data.markdownBody, { slugify: slugifyTocHeading })
         .content,
     },
   }
 }
+
+export async function getMarkdownFile(
+  fileRelativePath: string,
+  preview: boolean,
+  previewData: any
+): Promise<GithubFile<any>> {
+  if (preview) {
+    return getGithubFile<any>({
+      ...previewData,
+      fileRelativePath,
+      parse: parseMarkdown,
+    })
+  }
+
+  const file = await readMarkdownFile(fileRelativePath)
+
+  return { sha: '', ...file }
+}