TanStack Start

Use the Inkies Start adapter for server functions, head metadata, JSON-LD, and sitemaps.

@inkies/sdk and @inkies/start are not published to npm yet. The install command is the intended future command. Until publishing is complete, use the workspace packages from the repository.

Install in the future

pnpm add @inkies/sdk @inkies/start

The Start adapter exports InkiesArticle, articleHead, jsonLdScript, articleJsonLd, articleUrls, and articleSitemapXml. It also re-exports the SDK types and createInkies.

Server functions

Create the SDK client in a server-only module. TanStack Start server functions can call the SDK without exposing the API key to the browser.

import { createServerFn } from "@tanstack/react-start";

import { createInkies } from "@inkies/start";

const inkies = createInkies({
  apiKey: process.env.INKIES_API_KEY!,
  baseUrl: process.env.INKIES_API_URL!,
});

export const getArticle = createServerFn({ method: "GET" })
  .inputValidator((slug: string) => slug)
  .handler(({ data }) => inkies.getArticle(data));

The function returns an Article or null for a missing slug. Keep the API key and URL in server environment variables.

Article head metadata

articleHead() returns the title, description, Open Graph metadata, and canonical link in the shape expected by TanStack Router route head():

import { createFileRoute } from "@tanstack/react-router";

import { articleHead } from "@inkies/start";

import { getArticle } from "@/server/articles";

export const Route = createFileRoute("/blog/$slug")({
  loader: ({ params }) => getArticle({ data: params.slug }),
  head: ({ loaderData, params }) => {
    if (!loaderData) return {};

    return articleHead(loaderData, {
      siteUrl: "https://example.com",
      path: `/blog/${params.slug}`,
    });
  },
});

Render the article

import { InkiesArticle } from "@inkies/start";

export function BlogArticle({ article }: { article: Article }) {
  return <InkiesArticle article={article} cover />;
}

The adapter uses the cover URL from Inkies and renders a plain <img>. The article body is the HTML returned by the API.

JSON-LD

Use the shared JSON-LD helper and the Start adapter's safe script helper:

import { articleJsonLd, jsonLdScript } from "@inkies/start";

const jsonLd = articleJsonLd(article, {
  siteUrl: "https://example.com",
  path: `/blog/${article.slug}`,
  publisherName: "Example",
});

const script = jsonLdScript(jsonLd);

Render script.type and script.children in your route head or document implementation.

Sitemap route

articleUrls() returns canonical article URLs. articleSitemapXml() turns the article summaries into a sitemap document.

import { articleSitemapXml, articleUrls } from "@inkies/start";

export async function GET() {
  const articles = await inkies.allArticles();
  const options = {
    siteUrl: "https://example.com",
    basePath: "/blog",
  };
  const urls = articleUrls(articles, options);

  return new Response(articleSitemapXml(articles, options), {
    headers: { "Content-Type": "application/xml" },
  });
}