getCollection

Load all entries from a content or data collection.

Signature

getCollection<T = Record<string, unknown>>(name: string): CollectionEntry<T>[]

Call getCollection from a page module to load every entry in a named collection. The collection must be declared in your zfb.config under collections. The function is synchronous — it returns a plain array, not a Promise. The TypeScript generic T is a type hint only; runtime schema validation happens at build time and via zfb check in the Rust pipeline, not inside the getCollection call itself.

CollectionEntry shape

Each entry has the following fields:

• slug: string — the filename without its .md extension, normalized to forward-slash paths. Nested files produce path-based slugs (e.g. "2024/hello").

• data: T — the parsed frontmatter, typed by the generic parameter.

• body: string — the raw markdown body with frontmatter stripped.

• module_specifier: string — stable bridge key in the form mdx://<collection>/<slug>. Used internally by the renderer; pass to Content lookup if building a custom bridge.

• Content: (props: ContentProps) => ContentElement — renderable component for this entry. Renders via the renderer bridge when available; falls back to a <pre data-zfb-content-fallback> block in test and dev contexts where the bridge is absent.

ContentProps

type ContentProps = {
  components?: Record<string, unknown>;
};

The components prop mirrors the Astro <Content components={...}> convention: a flat map of element name to override component. Use defaultComponents from "@takazudo/zfb" as a base:

import { defaultComponents } from "@takazudo/zfb";

<entry.Content components={{ ...defaultComponents, h2: MyHeading }} />

Example

A typical use case is rendering a list of blog posts on an index page.

import { getCollection } from "zfb/content";

export default function BlogIndex() {
  const posts = getCollection<{ title: string; date: string }>("blog");

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <a href={`/blog/${post.slug}`}>{post.data.title}</a>
        </li>
      ))}
    </ul>
  );
}

Note that getCollection returns synchronously — no await needed. For dynamic per-entry pages, combine getCollection with a paths() export — see paginate for the related pattern.