Connect and use CMS

[SahilFruitwala]

Hello, I am still figuring out Astro and wanted to use your theme. You have done a fabulous job. But instead of working on files, it is much more flexible to work with CMS tools. Can you guide where should I make changes? I tried to use official documentation but seems like it is not working.

[satnaing]

Hello @SahilFruitwala!
You can you AstroPaper with any Headless CMS. However, AstroPaper is developed with file-system-based contents in mind. I've written a blog post about using AstroPaper with git-based HeadlessCMS.

In order to connect AstroPaper with an API-driven CMS, you have to update the data fetching logic.
For example:

// From this
const posts = await Astro.glob<Frontmatter>("../contents/**/*.md");

// To this
const response = await fetch("https://your-cms-url.com/posts");
const posts = await response.json();

Besides, you might have to replace frontmatter properties with your API data.
For example, if your API response is something like this,

[
  {
  "userId": 1,
  "id": 1,
  "slug": "some-dummy-post",
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  // some more data
]

You need to update the post displaying code too.

// from this
sortedPosts.map(
  ({ frontmatter }, index) =>
    index < 4 && (
      <Card
        href={`/posts/${slugify(frontmatter)}`}
        post={frontmatter}
        secHeading={false}
      />
    )
)

// to this
sortedPosts.map(
  (post, index) =>
    index < 4 && (
      <Card
        href={`/posts/${slugger(post.slug)}`}
        post={post}
        secHeading={false}
      />
    )
)

[SahilFruitwala]

Got it Thanks. 🙌🏼

[AustinSaysHello]

@SahilFruitwala did you ever get it to work with the CMS? Curious to see if you had to make any additional changes