Content page

Delivery gives every published record a page at a stable URL, such as /news/welcome-to-the-newsroom. The Content Engine resolves the URL, answers 404 for drafts and unknown slugs, and builds the page's metadata; your plugin owns the page component.

This continues the article from Content list, whose rows already link to /news/{slug}.

  publicApi: {
    path: "news",
    fields: ["id", "title", "slug", "body", "publishedAt"],
  },

  delivery: true, 

import { articleContentType } from "@/content/article";

export const contentTypes = [articleContentType];

export const routes = definePluginRoutes([
  page("/news", {
    component: lazy(() => import("./pages/articles-page")),
    messages: ["newsroom.articles"],
    search: articleList.parseSearch,
  }),

  page("/news/:slug", {
    component: lazy(() => import("./pages/article-page")),
    messages: ["newsroom.articles"],
  }),
]);

import { DateFormat } from "@vitnode/core/components/date-format";
import { RichTextContent } from "@vitnode/core/components/rich-text";
import { zodRichTextDocument } from "@vitnode/core/content";
import {
  definePluginRoute,
  type PluginRoutePageProps,
} from "@vitnode/core/routing";
import {
  contentDeliveryPage,
  contentDeliveryPageHead,
} from "@vitnode/core/tanstack/content";
import { fetcher } from "@vitnode/core/tanstack/fetcher";
import { z } from "zod";

import { manifest } from "@/manifest.gen";

const zodArticle = z.object({
  body: zodRichTextDocument,
  id: z.number(),
  publishedAt: z.string().nullable(),
  slug: z.string(),
  title: z.string(),
});

const loadArticle = async (slug: string) => {
  const [resolution, detail] = await Promise.all([
    fetcher({
      plugin: manifest.id,
      method: "get",
      module: "content/news",
      path: "/delivery/resolve/{slug}",
      args: { params: { slug: encodeURIComponent(slug) } },
    }),
    fetcher({
      plugin: manifest.id,
      method: "get",
      module: "content/news",
      path: "/{slug}",
      args: { params: { slug: encodeURIComponent(slug) } },
    }),
  ]);

  if (resolution.status !== 200) {
    throw new Error(
      `Resolving the article "${slug}" answered ${resolution.status}.`,
    );
  }

  return contentDeliveryPage({
    item: detail.status === 200 ? zodArticle.parse(await detail.json()) : null,
    resolution: await resolution.json(),
  });
};

type ArticlePageData = Awaited<ReturnType<typeof loadArticle>>;

export const route = definePluginRoute({
  load: async ({ params }) => await loadArticle(params.slug),

  head: ({ loaderData }) =>
    contentDeliveryPageHead(loaderData?.metadata, {
      title: loaderData?.item.title,
    }),
});

const ArticlePage = ({
  loaderData: { item },
}: PluginRoutePageProps<ArticlePageData>) => (
  <article className="container mx-auto flex max-w-3xl flex-col gap-6 px-4 py-8">
    <header className="flex flex-col gap-2">
      <h1 className="text-3xl font-semibold tracking-tight text-balance">
        {item.title}
      </h1>
      {item.publishedAt ? (
        <span className="text-muted-foreground text-sm">
          <DateFormat date={item.publishedAt} />
        </span>
      ) : null}
    </header>

    <RichTextContent
      className="leading-relaxed text-pretty"
      content={item.body}
    />
  </article>
);

export default ArticlePage;

Check the resultCopy Anchor Link

Open http://localhost:3000/news/welcome-to-the-newsroom:

• The page title is Welcome to the newsroom - VitNode.
• /news/release-notes-for-october, the draft, shows the not-found page with status 404. Publish it in the AdminCP and the same URL works.
• /news/no-such-article answers 404 too.

The loader's first request shows what delivery decided:

curl http://localhost:3000/api/newsroom/content/news/delivery/resolve/welcome-to-the-newsroom

{
  "type": "content",
  "canonicalPath": "/news/welcome-to-the-newsroom",
  "canonicalInternalPath": "/news/welcome-to-the-newsroom",
  "itemId": 1,
  "seo": { "description": null, "title": null },
  "openGraph": null,
  "robots": null,
  "alternates": [],
  "hreflang": { "languages": {} },
  "isFallback": false,
  "hidden": false,
  "locale": null,
  "requestedLocale": null
}

seo is empty because no SEO fields are configured yet.

Optional next stepsCopy Anchor Link

• Titles, descriptions and the sitemap. Set delivery.seo and delivery.sitemap, as SEO shows.
• Redirects after a slug change. Add editorial: true and delivery: { redirects: true }. The old slug is kept in core_content_slug_history, and contentDeliveryPage turns a visit to it into a 308 redirect to the new URL. While a record is hidden, its page and old slugs answer 404.
• Edit and Report buttons. Permissions and Reports add them next to the title.
• A custom URL. Set delivery.path, such as "/articles/:slug". It needs exactly one :slug and cannot start with /admin or /api.

Render other fieldsCopy Anchor Link

The detail route returns each field in publicApi.fields in a shape made for rendering. The blog's plugins/blog/src/pages/post-page.tsx uses all of them:

<p className="text-muted-foreground flex flex-wrap items-center gap-2 text-sm leading-relaxed">
  {t("posted_by")}
  {item.author ? (
    <UserFormat format link user={item.author} />
  ) : (
    <span>{t("deleted_user")}</span>
  )}
</p>

<RichTextContent
  className="text-foreground leading-relaxed text-pretty"
  content={item.body}
/>

RichTextContent renders the document as React elements on the server and in the browser, without dangerouslySetInnerHTML. Validate an author with zodContentPublicPerson from @vitnode/core/content when your page parses the response with Zod.

Pages without deliveryCopy Anchor Link

Delivery is optional. A content type without it still has GET /{slug}, and your page reads it directly. The newsroom plugin's letters do this, in plugins/newsroom/src/pages/letter-page.tsx. contentPageItem from @vitnode/core/tanstack/content throws the router's not-found for a null record, like contentDeliveryPage does:

const detail = await fetcher({
  plugin: manifest.id,
  method: "get",
  module: "content/letters",
  path: "/{slug}",
  args: { params: { slug: encodeURIComponent(slug) } },
});

const item = contentPageItem(
  detail.status === 200 ? zodLetter.parse(await detail.json()) : null,
);

Without delivery there are no slug redirects, no canonical metadata and no sitemap entries, so write head yourself. The SEO guide covers the head helpers.

Localized URLsCopy Anchor Link

Every URL delivery builds follows the app's localized URL rules: language prefixes, per-language domains and translated route segments. The blog plugin's posts are a working example. They are localized and live at /blog/article/:slug, and the web app translates that route for Polish:

i18n: {
  routePaths: {
    pl: {
      '/blog/article/:slug': '/wpisy/:slug',
    },
  },
},

The blog's sitemap then lists /blog/article/english-title for English and /pl/wpisy/polish-title for Polish, and only published translations become hreflang alternates. Every delivery option is in the content type reference.

Next, show the newest articles under each one with an Embedded list.