Tinacms: Support Docusaurus (v2)

Created on 17 Jan 2020 · 3Comments · Source: tinacms/tinacms

Summary

Support TinaCMS usage with Docusaurus

Basic example

Supporting the most basic Docusaurus site

npx @docusaurus/init@next init my-website classic

...add Tina

Motivation

Docusaurus is growing in popularity as a solution for docs. It would be wonderful to support it as well!

P.S. - I would be interested in contributing to help make this happen!

enhancement

Source

jsjoeio

👍8 👀3

Most helpful comment

Yes. We have everything we need, it's just a question of figuring out how to use what we have in the Docusaurus framework. Here's what needs to be figured out:

Add Tina component to the app. This needs to be done as high up as possible so it's never removed while navigating. In gatsby-plugin-tinacms we use the wrapRootElement in the gatsby-browser.js file to do this.
We need to start start up the @tinacms/api-git server so we can write to disk. The gatsby-tinacms-git plugin does this using onCreateDevServer. With Next.js sites it is done more manually
Add forms to pages would consist of several things:
- For the Blog, this would be done by overriding the BlogPostPage from your theme and calling the useLocalForm. You could look to useRemarkForm for inspiration in setting up that form.
- For that form to be usable, we need to add metadata to the props of BlogPostPage. Specifically, we need the equivalents of fileRelativePath, rawMarkdownBody, and rawFrontmatter.

ncphillips on 17 Jan 2020

👍3

All 3 comments

That's very interesting. Since it's React + Markdown based, I suspect that most of the heavy lifting is already done. Definitely something worth checking out.

ncphillips on 17 Jan 2020

👍2

Yes. We have everything we need, it's just a question of figuring out how to use what we have in the Docusaurus framework. Here's what needs to be figured out:

Add Tina component to the app. This needs to be done as high up as possible so it's never removed while navigating. In gatsby-plugin-tinacms we use the wrapRootElement in the gatsby-browser.js file to do this.
We need to start start up the @tinacms/api-git server so we can write to disk. The gatsby-tinacms-git plugin does this using onCreateDevServer. With Next.js sites it is done more manually
Add forms to pages would consist of several things:
- For the Blog, this would be done by overriding the BlogPostPage from your theme and calling the useLocalForm. You could look to useRemarkForm for inspiration in setting up that form.
- For that form to be usable, we need to add metadata to the props of BlogPostPage. Specifically, we need the equivalents of fileRelativePath, rawMarkdownBody, and rawFrontmatter.