How to create new file in next.js with github-api?

I followed your guide on open authoring in a nextJS project via the tinacms-github-api. Amazing work, thx!
However, that left me thinking how I would create/add a new file (JSON or MD) to create a new content instance for e.g. a blog post or other content sourced from a file.
I saw there is similar functionality in this gatsby-remark-creator plugin, however that leverages the git API…

Did I overlook that functionality somehow or is this still on the roadmap?
What could be a workaround for me to create a plugin myself leveraging the existing tinacms-github-api?

1 Like

Hi :wave: Thanks for posting; it’s a great question.

You’ll need to make a custom content-creator plugin that posts to the GitHub API in the onSubmit. We haven’t written a guide on this yet but feel free to reference the MarkdownCreatorPlugin in tinacms.org to see how this would work.

1 Like

Thank you for your help! Looking at the referenced MarkdownCreatorPlugin and the afore mentioned RemarkCreatorPlugin, I think it would be great to have this as a more universal concept, no?
I am thinking of a way to have the creator plugin decoupled from the API that you are using.

If the APIs (git, github etc.) would share a similar interface that defines an e.g. “saveFile” method and then either pass in the api into the creator plugin which just executes the “saveFile” of the API.

Might be a discussion that should happen in a GH issue, not here though…

1 Like

Yeah that’s a great idea — to make general ‘creator’ plugins for the various file types that accept custom onSubmit callbacks. Feel free to make a feature request issue in github to get the party started!

1 Like

Totally agree with this! I also followed the Next.js open authoring guide (which is great by the way :grinning:) and was looking for similar functionality. In my case I am trying to figure out how to commit a new page (blog post using markdown) from open authoring which will render on a dynamic route. ie, have a way in Tina to create a new blog post applicable to the pages/blog/[slug].js route within Next.js.

@kendall @pixelmord any leads since your last post on how to do this? @kendall I know you referenced the MarkdownCreatorPlugin and mentioned it would have to be a custom content-creator plugin, but I am still a bit confused on how this would work. Appreciate any help on this!

Hi mcdev,

basically just copy the creator plugin from here: https://github.com/tinacms/tinacms.org/blob/master/utils/plugins/MarkdownCreatorPlugin.ts

And then create an instance like it is done here:
github.com/tinacms/tinacms.org/blob/master/tinacms/BlogPostCreator.ts

And then use the plugin with the usePlugin-hook wherever you need/want, e.g. in the layout like done here:
github.com/tinacms/tinacms.org/blob/2d35238843da47f3d9af302d22ba59743726bf55/components/layout/Layout.tsx#L20
In Layout.tsx you have the benefit that it is available on every page (that uses the Layout ;))

Hope that helps!

3 Likes

@pixelmord Awesome, thank you for leading me in the right direction with those examples! Makes sense logically, and will take a look at implementing in my project.