use content collection as enum

[odd void]

Can i use a content collection such as "authors" for an enum type in my "blog" collection?

[brave adder]

Hi @odd void. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, you can use a content collection such as "authors" as a reference in your "blog" collection. This is done using the reference() function from the Collections API. This function is used to define a relationship, or “reference,” from one collection to another. It accepts a collection name and validates the entry identifier(s) specified in your content frontmatter or data file.

Here is an example of how you can reference the "authors" collection in your "blog" collection:

import { defineCollection, reference, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    // Reference a single author from the `authors` collection by `id`
    author: reference('authors'),
    // Other properties...
  }),
});

const authors = defineCollection({
  type: 'data',
  schema: z.object({
    // Author properties...
  }),
});

export const collections = { blog, authors };

In this example, each blog post can reference an author from the "authors" collection by their id. This allows you to reuse author profiles across multiple blog posts.

For more information, you can refer to the Astro documentation on content collections (https://docs.astro.build/en/guides/content-collections/#defining-collection-references).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@odd void kapa.ai is still learning and improving, please let us know how it did by reacting below

[odd void]

@brave adder what's the correct format for an authors content collection?

[brave adder]

Let me check the knowledge base for you. One moment! :books:

---

The format for an authors content collection in Astro would typically involve creating a directory for the authors inside the src/content directory. Each author would then be represented by a file in this directory. The file could be a Markdown (.md), MDX (.mdx), YAML (.yaml), or JSON (.json) file.

Here's an example of how you might structure an authors content collection:

src/content/
  - authors/
    - grace-hopper.json
    - alan-turing.json

Each author file would then contain the data for that author. For example, the grace-hopper.json file might look like this:

{
  "name": "Grace Hopper",
  "bio": "Grace Brewster Murray Hopper was an American computer scientist and United States Navy rear admiral.",
  "photoUrl": "/images/authors/grace-hopper.jpg"
}

You can also define a schema for your authors collection in a src/content/config.ts file:

import { defineCollection, z } from 'astro:content';

const authors = defineCollection({
  type: 'data',
  schema: z.object({
    name: z.string(),
    bio: z.string(),
    photoUrl: z.string().url(),
  }),
});

export const collections = { authors };

This schema validates the data in your authors collection and provides TypeScript type-safety.

For more information, you can refer to the Astro documentation on content collections (https://docs.astro.build/en/guides/content-collections/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@odd void kapa.ai is still learning and improving, please let us know how it did by reacting below

[odd void]

@brave adder how can display the name of the author on the static blog post page?

[brave adder]

Let me check the knowledge base for you. One moment! :books:

---

To display the name of the author on a static blog post page, you would first need to fetch the author data in your blog post page. This can be done in the getStaticPaths() function, where you fetch the blog post data. You would include the author data in the props returned for each page.

Here's an example of how you might do this:

export async function getStaticPaths() {
  const { items } = await contentfulClient.getEntries<BlogPost>({ content_type: "blogPost", });
  const pages = items.map((item) => ({
    params: { slug: item.fields.slug },
    props: {
      title: item.fields.title,
      content: documentToHtmlString(item.fields.content),
      date: new Date(item.fields.date).toLocaleDateString(),
      author: item.fields.author.fields.name, // Fetch the author name
    },
  }));
  return pages;
}

In this example, item.fields.author.fields.name is used to fetch the name of the author. This assumes that your blog posts in Contentful have a reference to an author, and that the author has a name field.

Then, in the HTML template portion of your page component, you can display the author name like this:

<html lang="en">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>By {author}</p> <!-- Display the author name -->
    <time>{date}</time>
    <article set:html={content} />
  </body>
</html>

In this example, {author} is used to display the author name.

For more information, you can refer to the Astro documentation on server-side rendering (https://docs.astro.build/en/guides/cms/contentful#server-side-rendering) and static site generation (https://docs.astro.build/en/guides/cms/contentful#static-site-generation).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: