Fix code snippets in the CMS guides

[ArmandPhilippot]

Note

Still in draft. I need to double check the lines highlighting.

Description (required)

Fixes and formats some code snippets in the CMS guides.

• In apostrophecms.mdx:

  • "Displaying the blog posts": content doesn't exist, so I assume this should be main. And the <h3> tag wasn't closed.

• In builderio.mdx:

  • "Displaying a list of blog posts": TS complains about the destructured props (e.g; Binding element 'slug' implicitly has an 'any' type.). The easier fix seems to not destructure the props and explicitly type post as any.

• In buttercms.mdx:

  • "Fetching Data": response and response.data can be undefined, so we need to use optional chaining when accessing response.data.data.shopitem. Same in the next code snippet.

• In cloudcannon.mdx:

  • "Displaying a single entry": entry can be undefined, so we need to handle that case.

• In cosmic.mdx:

  • In several places: post.metadata.tags is implicitly any.
  • "Generating Individual Blog Posts with Astro": aspectRatio doesn't exist on the Image component. Not sure when this was removed, the related PRs are from 2023: https://github.com/search?q=repo%3Awithastro%2Fastro+aspectRatio&type=pullrequests

• In drupal.mdx:

  • "Displaying a list of articles": some import paths were not deep enough.
  • TS doesn't like jsona/lib/JsonaTypes imports (cannot find module). Not sure what the right fix here.

• In ghost.mdx:

  • "Displaying a list of posts" and "Generating pages": posts is const posts: void | PostsOrPages, we need to use conditional chaining
  • Removes the backticks in the LinkCard as they are not rendered.

• In keystatic.mdx:

  • "Displaying a single entry": render() must be imported; this was the old way.
  • The Astro code snippets used tsx and were missing a title. (using tsx seems to work once rendered, but not in the code editor)

• In kontent-ai.mdx:

  • "Static site generation": The getStaticPaths() function and <article /> were not closed properly.
  • "On-demand rendering": The <article /> was not closed properly.

• In preprcms.mdx:

  • "Create a GraphQL query to retrieve your blog articles": TS complains because post is implicitly any.
  • "Creating individual blog post pages":
    • The queries folder was in src not src/lib earlier.
    • TS complains because content is implicitly any.

• In statamic.mdx:

  • "REST API": TS complains because post is implicitly any.
  • "GraphQL":
    • the two variables page and locale come from nowhere. I think we can replace them with hardcoded strings to explain what they are: some might not be familiar with GraphL and something starting with "my..." would be clearer for them.
    • TS complains about post being implicitly any

• In storyblok.mdx:

  • "Connecting Bloks to components": TS complains because blok, story, and post are implicitly any.
  • "Generating pages": TS complains because story is implicitly any.

• In strapi.mdx:

  • "Optional: Creating the Article interface": in "Generating article pages", TS complains with Property 'image' does not exist on type 'Article'; we need to add the image property to the Article interface.
  • "Generating article pages":
    • add a fake import for MyMarkdownComponent.
    • some import paths are too deep

• In tina-cms.mdx:

  • "Integrating with Astro": it seems the step 2 is no longer necessary. At least with pnpm... it doesn't hurt to keep it though.
  • In step 4, the tina directory is not a "dotfile": https://tina.io/docs/tina-folder/overview

• In umbraco.mdx:

  • "Fetching Data": TS complains because article is implicitly any.
  • "Generating individual blog posts":
    • The path in a code snippet title was incomplete.
    • TS complains about article.properties (doesn't exist on type never); we need an explicit type for articles.

• In wordpress.mdx:

  • TS complains because post is implicitly any in several places.

I haven't updated the PayloadCMS guide because this seems outdated...

References

• Related to: Fix TypeScript errors in "Configuration" & "Routing and navigation" code snippets #14089. TL;DR: Improve UX by preventing the appearance of red squiggles (TS) and visual changes (formatting with Astro extension) when the user copies and pastes a code snippet.

[github-actions]

Preview deployment

✅ Deployment complete!

• Latest commit: 943ad1d
• Preview: https://armand-fix-cms-code-snippets.previews.docs.astro.build
• Workflow run: View logs

[astrobot-houston]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the tracking.ignoredKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
guides/cms/apostrophecms.mdx	Source changed, localizations will be marked as outdated.
guides/cms/builderio.mdx	Source changed, localizations will be marked as outdated.
guides/cms/buttercms.mdx	Source changed, localizations will be marked as outdated.
guides/cms/cloudcannon.mdx	Source changed, localizations will be marked as outdated.
guides/cms/cosmic.mdx	Source changed, localizations will be marked as outdated.
guides/cms/drupal.mdx	Source changed, localizations will be marked as outdated.
guides/cms/ghost.mdx	Source changed, localizations will be marked as outdated.
guides/cms/keystatic.mdx	Source changed, localizations will be marked as outdated.
guides/cms/kontent-ai.mdx	Source changed, localizations will be marked as outdated.
guides/cms/preprcms.mdx	Source changed, localizations will be marked as outdated.
guides/cms/statamic.mdx	Source changed, localizations will be marked as outdated.
guides/cms/storyblok.mdx	Source changed, localizations will be marked as outdated.
guides/cms/strapi.mdx	Source changed, localizations will be marked as outdated.
guides/cms/tina-cms.mdx	Source changed, localizations will be marked as outdated.
guides/cms/umbraco.mdx	Source changed, localizations will be marked as outdated.
guides/cms/wordpress.mdx	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.