add contentful cms guide

[kevinzunigacuellar]

What kind of changes does this PR include?

• New or updated content

Description

• Add Contentful CMS guide
• Continues #1467
• Netlify preview link

Notes

• Include example to add webhook to trigger redeployments when published?
• Starter template?
• include example using the images API?
• include example using graphql API?

To do

• SSR section
• Webhooks

References

• Contentful and Next.js Tutorial
• contentful.js
• contentful-nextjs-starter
• storyblok-astro-integration
• contentful docs

Demo | Github

Comments

• Sarah: https://github.com/withastro/docs/pull/1467#issuecomment-1243609365
• Dan: https://github.com/withastro/docs/pull/1467#pullrequestreview-1107674856

[netlify[bot]]

✅ Deploy Preview for astro-docs-2 ready!

Name	Link
🔨 Latest commit	f3be84b785e60db4c9863a5763f6046768a99eb3
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/6352d87de308860008c302b8
😎 Deploy Preview	https://deploy-preview-1565--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[kevinzunigacuellar]

@Jutanium and @sarah11918 thank you for the feedback. I am not sure if we should include a tutorial on creating content on contentful. Maybe we can recommend getting started with "dummy" content or referencing an official tutorial.

I was thinking maybe we should showcase some of the Astro features that could be useful for CMSes (eg. Dynamic pages).

PD: I have updated the page to include previous review suggestions (link in the description)

[sarah11918]

Just commenting that so far, I think this is great!

From reading @Jutanium's earlier comment, it sounds like he was thinking of there being more Contentful stuff up front (i.e. that process he went through with the screenshots to add a post to a space, defining the fields to use etc.)?

Seeing this, I'm not sure I would want that to come earlier this guide's steps. I do kind of like that this as-is is focused on the Astro side of things, and assumes you already have (or will separately create) a Space. I think for Contentful in particular, one of the use-cases we are going to see is people using this becuase they already have Contentful. I think this level of detail fits with our docs in general and reads very much like all our other pages (whose mandate is not to teach you how to use other things.) I think there will be lots of people who will be happy to see the new Astro files needed, what their content should be, and example of a simple fetch and will be off to the races. It almost seems like getting "bogged down" to get into Contentful-specific stuff too early here.

It's almost like there are 2 levels of guides wanting to exist: this one ("Connect Astro to Contentful CMS), and then I might do a "Setting up Your Astro + Contentful Blog" tutorial (or extension) immediately after this. (Something that I think we can reuse on each guide, with the specific CMS data fetching updated) A "now that you've hooked up Astro and Contentful... Something like:

Tutorial/Extension: Set up your Astro Blog Pages using Contentful CMS

Prerequisites:

• An existing Contenful space with credentials (see above)
• An existing Astro project, configured with the following files as described above (tree diagram highlighting the 4 new files)

Setting up your Contentful space/environment

This will be much what Dan described, and unique to each CMS. Here, you can establish some good default fields (that we will use below) and make whatever suggestions here that will make using Contentful in Astro specifically more helpful.

Create individual pages for each Blog Post

( show a full, working `src/pages/posts/[post].astro) that fetches and renders an individual blog post with all the goodies like title, date, image, text content.

Create a blog index page

(show a full, working src/pages/blog.astro that renders something like: title (with link), image, description, date for each blog post - this can even be a <Post /> component imported and used)

What do you think, Dan? Kevin?

[sarah11918]

Haven't forgotten about you, Kevin!

@Jutanium - have you checked in on this lately? I was waiting to do final edits after you were happy. I think it would work well to have this one finished and merged this week if it's ready, and then let Kevin start tackling the next ones!

[Jutanium]

@sarah11918 Yep, we got this to a good spot, and @kevinzunigacuellar has moved on to the Storyblok one!

[sarah11918]

Perfect! I'll make sure to review this one today/tomorrow and we can .... get that money???

[sarah11918]

LGTM! I am approving, and now just waiting for Dan to sign off.... then there's a big green Friday button for @kevinzunigacuellar! 🎉