Content Collections

By default, TurboStarter uses Content Collections to store and retrieve content from the MDX files.

Content from there is used to populate data in the following places:

• Blog
• Legal pages
• Documentation

Of course, you can add more collections and views, as it's very flexible.

Defining new collection

To define a new collection, you need to create a new file in the packages/cms/src/collections directory:

import { defineCollection } from "@content-collections/core";
 
export const legal = defineCollection({
  name: "legal",
  directory: "src/collections/legal/content",
  include: "**/*.mdx",
  schema: (z) => ({
    title: z.string(),
    description: z.string(),
  }),
  transform: async (doc, context) => {
    const mdx = await transformMDX(doc, context);
 
    return {
      ...mdx,
      slug: slugify(doc.title, { lower: true }),
    };
  },
});

Then it's passed to the config in packages/cms/content-collections.ts file which is used to generate types and parse content from MDX files.

import { defineConfig } from "@content-collections/core";
 
import { legal } from "./src/collections/legal";
 
export default defineConfig({
  collections: [legal],
});

When you run a development server, content collections will be automatically rebuilt (in .content-collections directory) and you will be able to import the content and metadata of each file in your application.

Using content collections

To get some content from @turbostarter/cms package, you need to use the exported content constant which include all the generated content and provides API to interact with the content.

import { content } from "@turbostarter/cms";
 
export default function Page({ params }: { params: { slug: string[] } }) {
  const page = content.legal.getPage(params.slug);
 
  return <div>{page.data.title}</div>;
}

Voila! You can now access the content from the MDX files.