✨TinaCMS - Create a Gatsby Starter

SSWConsulting / SSW.Rules

Generator for ssw.com.au/rules

https://www.ssw.com.au/rules

MIT License

15 stars 13 forks source link

✨TinaCMS - Create a Gatsby Starter #1588

Open bradystroud opened 1 month ago

bradystroud commented 1 month ago

CC: @JackDevAU

Description

Create a Gatsby Starter that integrates TinaCMS based on the provided proof of concept (POC) repository at https://github.com/JackDevAU/tinatsby_doc. The starter needs to be cleaned up, a custom build script must be added (since Vercel's automagic build script cannot be used), and documentation should be written and published on tina.io.

Acceptance Criteria

[x] Clean up the POC at https://github.com/JackDevAU/tinatsby_doc
[x] ~Add a custom build script (avoid using Vercel's automagic build script)~
[x] Write and publish documentation for the Gatsby Starter on tina.io (https://tina.io/docs/frameworks/gatsby)
[x] Upload code from the PoC to the starter template: https://github.com/tinacms/tina-gatsby-starter.git

JackDevAU commented 3 weeks ago

Copied from a chat with Hugo

I made a quick update video for you regarding the Gatsby x Tina starter: https://youtu.be/PCOTqD6VJhc

You can see that it works without skipping the client so that's pretty nice! I'd love to get your opinion about this, especially the CORS issue I mention at the end.

Here is the link to the repo, I made it public so you should have access: https://github.com/Freego1783/tina-gatsby-test

isaaclombardssw commented 3 weeks ago

Note – if the Gatsby starter we build is actually a viable solution... should we try and get on here (Gatsby plugin library)?

Freego1783 commented 3 weeks ago

Hey @JackDevAU,

I forked the starter repo and created a PR if you wanna have a look: https://github.com/tinacms/tina-gatsby-starter/pull/1
I also forked the Gatsby page on tina.io and created a PR: https://github.com/tinacms/tina.io/pull/2412

The key point for making Gatsby play nicely with Tina was to force the version of graphql to be the one expected by Tina. To achieve this we used a resolutions property in the package.json file.

After that everything went relatively well, except when we deployed on Vercel we had some problems with the visual editing in admin mode because Tina uses an iframe to display the content and we were experiencing CORS issues. To fix that we had to add a headers config in gatsby-config.ts, but I think it's a bit too permissive and we should probably make it better.

What do you think?

Freego1783 commented 1 week ago

Hey @JackDevAU

Looks like both PRs are ready to be merged but I cannot do it myself. Can you do it 🙂?