Content Lists

Content lists hold your repeating content — blog posts, team members, FAQs. In the SvelteKit starter the blog is the worked example: a Posts list, a listing component, and a dynamic detail page per post.

Linked content arrives with the page

The starter fetches pages with contentLinkDepth: 4 (see Routing & Sitemaps), so a component whose model has a linked content field gets the list resolved inline — no second request:

<!-- src/modules/agility-components/PostsListing.svelte (trimmed) -->
<script lang="ts">
  export let item: any;
  const { posts } = item.fields;   // linked content, already resolved
</script>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
  {#each posts as post}
    {@const { fields: { slug, image, title, date, category } } = post}
    <a href={`/blog/${slug}`}>
      <img src={image.url} alt={image.label} />
      <div>{category.fields.title}</div>
      <h2>{title}</h2>
    </a>
  {/each}
</div>

Notice the nesting: each post's category is itself linked content, also resolved because of the link depth. Deeper values cost more on each request — keep the depth as low as your components actually need.

Dynamic detail pages

Each post also gets its own page: the Posts list is bound to a dynamic page in the sitemap (/blog/my-first-post, …), so every item shows up as a sitemap node and routes through the same catch-all. When the API resolves one of those paths it includes the post as contentItem, and ContentZone injects it into the PostDetails component:

<!-- src/modules/agility-components/PostDetails.svelte (trimmed) -->
<script lang="ts">
  export let item: any;
  const { fields: { title, image, content, category, date } } = item;
</script>

<img src={image.url} alt={image.label} />
<h1>{title}</h1>
<div class="prose">{@html content}</div>

So: list component for the roll-up, details component for the item page, both driven by the same content list.

Fetching a list directly

When a list isn't attached to the page (search, footers, cross-promos), fetch it in a load function with the Content Fetch SDK:

// e.g. inside a +page.server.ts load
import agility from "@agility/content-fetch";

const api = agility.getApi({ guid: AGILITY_GUID, apiKey: AGILITY_API_FETCH_KEY });

const list = await api.getContentList({
  referenceName: "posts",
  languageCode: "en-us",
  take: 20,          // always pass take explicitly (max 250)
  skip: 0,           // paginate with skip
  sort: "fields.date",
  direction: "desc",
});
// list.items[n].fields → your model's fields

Return it from load and render it in the page component like any other data.

Publishing behaviour

Because the starter prerenders at build time, new or updated list items appear after the next build — wire Agility's publish webhook to your host's build hook (see the deployment guides).