create-shapio 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-shapio",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Scaffold a new Shapio project (npx create-shapio my-cms) or a site starter (--site astro|next|sveltekit)",
   "license": "Apache-2.0",
   "homepage": "https://shapio.dev",

package/templates/astro/.env.example

@@ -8,3 +8,5 @@ SHAPIO_DELIVERY_TOKEN=
 # SHAPIO_SITE=marketing
 # Optional: the origin the browser calls for draft previews (defaults to SHAPIO_URL).
 # PUBLIC_SHAPIO_URL=https://cms.example.com
+# Optional: this site's public origin; pages then carry a canonical URL and og:url.
+# SITE_URL=https://www.example.com

package/templates/astro/package.json

@@ -19,8 +19,8 @@
     "typecheck": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@shapio/client": "^0.3.1",
-    "@shapio/visual": "^0.3.1",
+    "@shapio/client": "^0.4.1",
+    "@shapio/visual": "^0.4.1",
     "astro": "7.3.5"
   },
   "devDependencies": {

package/templates/astro/scripts/lib/content.ts

@@ -448,15 +448,56 @@ export type EntrySpec = {
   publish: boolean;
 };
 
+/**
+ * The SEO fields of one locale (the built-in `seo` component, per locale): a page describes itself with its
+ * description, an article with its excerpt and its cover (a shared field, so it comes from the English data).
+ * The title stays empty: `?seo=resolved` falls back to the entry's own title, through the site's template.
+ */
+const seoOf = (data: Record<string, unknown>, shared: Record<string, unknown>) => ({
+  description: data.excerpt ?? data.description ?? null,
+  image: shared.cover ?? null,
+});
+
+const withSeo = (content: Localized<Record<string, unknown>>): Localized<Record<string, unknown>> => ({
+  en: { ...content.en, seo: seoOf(content.en, content.en) },
+  fr: { ...content.fr, seo: seoOf(content.fr, content.en) },
+});
+
 export const entries = (media: MediaIds, authorId: string): EntrySpec[] => [
-  { model: 'page', slug: 'home', content: home(media), publish: true },
-  { model: 'page', slug: 'about', content: about(), publish: true },
+  { model: 'page', slug: 'home', content: withSeo(home(media)), publish: true },
+  { model: 'page', slug: 'about', content: withSeo(about()), publish: true },
   {
     model: 'article',
     slug: 'modelling-without-a-deploy',
-    content: modelling(media, authorId),
+    content: withSeo(modelling(media, authorId)),
+    publish: true,
+  },
+  {
+    model: 'article',
+    slug: 'why-builds-pin-a-snapshot',
+    content: withSeo(snapshots(media, authorId)),
     publish: true,
   },
-  { model: 'article', slug: 'why-builds-pin-a-snapshot', content: snapshots(media, authorId), publish: true },
-  { model: 'article', slug: 'winter-projects', content: draft(media, authorId), publish: false },
+  { model: 'article', slug: 'winter-projects', content: withSeo(draft(media, authorId)), publish: false },
 ];
+
+/**
+ * The site's SEO defaults (Settings → SEO; `PUT /api/admin/site/seo`): the name and template match the
+ * siteSettings singleton's site name, the description its tagline; the hero image is the default social image.
+ */
+export const seoDefaults = (media: MediaIds) => ({
+  locales: {
+    en: {
+      siteName: String(SITE_SETTINGS.en.siteName),
+      titleTemplate: `%s · ${String(SITE_SETTINGS.en.siteName)}`,
+      description: String(SITE_SETTINGS.en.tagline),
+    },
+    fr: {
+      siteName: String(SITE_SETTINGS.fr.siteName),
+      titleTemplate: `%s · ${String(SITE_SETTINGS.fr.siteName)}`,
+      description: String(SITE_SETTINGS.fr.tagline),
+    },
+  },
+  imageId: media.hero,
+  twitterHandle: '@northwindstudio',
+});

package/templates/astro/scripts/seed.ts

@@ -4,6 +4,7 @@ import { setTimeout as delay } from 'node:timers/promises';
 import { parseArgs } from 'node:util';
 import {
   buildUploadForm,
+  SEO_COMPONENT_ID,
   ShapioApiError,
   type MediaAsset,
   type SchemaApplyInput,
@@ -15,6 +16,7 @@ import {
   AUTHOR,
   entries,
   IMAGES,
+  seoDefaults,
   SITE_SETTINGS,
   type EntrySpec,
   type ImageSpec,
@@ -29,8 +31,9 @@ import { createPng } from './lib/png.js';
  * 2. the models and components in shapio/ through the schema apply API (live, no restart; the same planner
  *    as `shapio schema apply` and the admin), as the site's own (SHAPIO_SITE, else the token's site, else the
  *    primary): a starter's schema belongs to the first site it is seeded on;
+ *    The built-in SEO component (components/seo.json) is the exception: it is always shared with every site;
  * 3. placeholder images, an author, the site settings, pages and articles in English and French, published
- *    per locale;
+ *    per locale, and the site's SEO defaults (Settings → SEO);
  * 4. a deployment connection named "Preview" whose preview URL opens this starter's /preview/ page (the
  *    entry document's Preview pane and visual editing; it triggers no builds). The site's URL is SITE_URL, else
  *    the starter's `--site-url` (its local dev server);
@@ -50,6 +53,8 @@ const PREVIEW_PATH = '/preview/?model={modelKey}&id={entryId}&locale={locale}#to
 /** A placeholder build hook: the connection has no triggers, so nothing is ever sent to it. */
 const PREVIEW_BUILD_HOOK = 'https://build.invalid/shapio-starter';
 const REVALIDATE_WEBHOOK_NAME = 'Site revalidation';
+/** The request's site's SEO defaults (`site.settings`). */
+const SEO_DEFAULTS_PATH = '/api/admin/site/seo';
 /** The events that change what a published site shows (the starter's route ignores any others). */
 const REVALIDATE_EVENTS = [
   'entry.published',
@@ -58,6 +63,8 @@ const REVALIDATE_EVENTS = [
   'change_set.shipped',
   'schema.activated',
   'schema.deleted',
+  // The site's SEO defaults changed: every page's head shows them.
+  'site.updated',
 ];
 /** A local site needs Shapio's OUTBOUND_PRIVATE_NETWORK_ALLOWLIST too; the webhook opts in for loopback only. */
 const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]']);
@@ -129,8 +136,11 @@ const applySchema = async (client: ShapioClient) => {
   try {
     response = await client.admin.schema.apply({
       definitions,
-      // Every definition is the site's own (sites/<key>/ in a pulled tree), never shared by default.
-      scopes: definitions.map(() => 'site' as const),
+      // Every definition is the site's own (sites/<key>/ in a pulled tree), never shared by default, except
+      // the built-in SEO component: Shapio knows it by its fixed ID, so one shared copy serves every site.
+      scopes: definitions.map((definition) =>
+        (definition as { id?: unknown }).id === SEO_COMPONENT_ID ? ('network' as const) : ('site' as const),
+      ),
       base: FIRST_APPLY_BASE,
       prune: false,
       dryRun: false,
@@ -143,7 +153,8 @@ const applySchema = async (client: ShapioClient) => {
         "This starter's schema already belongs to another site of this instance: a starter's schema belongs " +
           'to the first site it is seeded on. To reuse it on this site, share it with all sites ' +
           'with a network admin token (`shapio schema scope <apiKey> --shared --site <that site>` for each ' +
-          'component, then author, page, article and siteSettings) and seed again, or seed a separate instance.',
+          'component, then author, page, article and siteSettings) and seed again, or seed a separate instance. ' +
+          'The SEO component is always shared; a site that keeps its own copy of it blocks the others.',
         { cause: error },
       );
     }
@@ -259,6 +270,16 @@ const ensureSiteSettings = async (client: ShapioClient) => {
   log('Published siteSettings (en, fr)');
 };
 
+/** The site's SEO defaults: the texts per locale, the default social image and the Twitter handle. */
+const ensureSeoDefaults = async (client: ShapioClient, media: MediaIds) => {
+  const current = await client.request<{ version: number }>(SEO_DEFAULTS_PATH);
+  await client.request(SEO_DEFAULTS_PATH, {
+    method: 'PUT',
+    body: { expectedVersion: current.version, seo: seoDefaults(media) },
+  });
+  log('Set the SEO defaults (en, fr)');
+};
+
 const upsertEntry = async (client: ShapioClient, spec: EntrySpec) => {
   const found = await client.admin.content.list(spec.model, {
     filters: { slug: { $eq: spec.slug } },
@@ -413,6 +434,7 @@ const main = async () => {
     await applySchema(admin.client);
     const media = await ensureMedia(admin.client);
     await ensureSiteSettings(admin.client);
+    await ensureSeoDefaults(admin.client, media);
     const authorId = await ensureAuthor(admin.client, media.avatar);
     for (const spec of entries(media, authorId)) {
       await upsertEntry(admin.client, spec);

package/templates/astro/scripts/smoke.ts

@@ -62,6 +62,19 @@ const checkBuild = async () => {
   check(articleEn.includes('<table>') && articleEn.includes('With Shapio'), 'EN article: rich-text table');
   check(articleEn.includes('Ada Moreau'), 'EN article: populated author');
   check(articleFr.includes('Modéliser du contenu sans déploiement'), 'FR article: title');
+  check(
+    articleEn.includes('<title>Modelling content without a deploy · Northwind Studio</title>'),
+    'EN article: SEO title through the site template',
+  );
+  check(
+    articleEn.includes('property="og:image"') &&
+      articleEn.includes('name="twitter:site" content="@northwindstudio"'),
+    'EN article: Open Graph image and Twitter handle from the SEO fields and defaults',
+  );
+  check(
+    articleFr.includes('<title>Modéliser du contenu sans déploiement · Studio Northwind</title>'),
+    'FR article: SEO title through the French template',
+  );
   check((await html('fr/about/index.html')).includes('À propos du studio'), 'FR about page');
   check(
     (await html('en/colophon/index.html')).includes('pinned to one publication snapshot per build'),

package/templates/astro/scripts/smokeHttp.ts

@@ -5,7 +5,8 @@ import { parseArgs } from 'node:util';
  * `npm run smoke`, after `npm run seed`, `npm run build` and starting the built site (`npm run start` or
  * `npm run preview`): fetches the site's pages over HTTP and checks the seeded content in English and French,
  * the site settings singleton, rich text, media variants and the author, that the draft article is not
- * served, that content carries the visual-editing attributes (@shapio/visual's `shapioAttr`), and that the
+ * served, that content carries the visual-editing attributes (@shapio/visual's `shapioAttr`), that pages carry
+ * their SEO tags (the entry's SEO fields with the site's defaults: title template, Open Graph, Twitter), and that the
  * preview page is served with a `frame-ancestors` policy. The same checks run against every starter, so all
  * three render the same blog.
  *
@@ -28,6 +29,9 @@ const PAGES: readonly PageCheck[] = [
       ['.webp', 'responsive image variants'],
       ['Northwind Studio', 'site name from the siteSettings singleton'],
       ['Built with Shapio', 'footer from the siteSettings singleton'],
+      ['<title>Home · Northwind Studio</title>', 'title through the SEO title template'],
+      ['property="og:image"', 'og:image (the default social image)'],
+      ['name="twitter:site" content="@northwindstudio"', 'twitter:site from the SEO defaults'],
     ],
   },
   {
@@ -36,6 +40,7 @@ const PAGES: readonly PageCheck[] = [
       ['Un contenu qui évolue aussi vite que votre produit', 'hero heading'],
       ['lang="fr"', 'lang="fr"'],
       ['Studio Northwind', 'site name from the siteSettings singleton'],
+      ['<title>Accueil · Studio Northwind</title>', 'title through the French SEO title template'],
     ],
   },
   {
@@ -43,6 +48,7 @@ const PAGES: readonly PageCheck[] = [
     expect: [
       ['Modelling content without a deploy', 'article list'],
       ['Why our builds pin a snapshot', 'second article'],
+      ['<title>Journal · Northwind Studio</title>', 'a page without an entry: title through the template'],
     ],
   },
   {
@@ -55,6 +61,10 @@ const PAGES: readonly PageCheck[] = [
       ['data-shapio-entry="', 'visual-editing entry attribute'],
       ['data-shapio-path="title"', 'visual-editing attribute on the title'],
       ['data-shapio-path="body"', 'visual-editing attribute on the body'],
+      ['<title>Modelling content without a deploy · Northwind Studio</title>', 'SEO title (resolved)'],
+      ['property="og:type" content="article"', 'og:type article'],
+      ['Nothing restarted.', 'SEO description from the entry'],
+      ['name="twitter:card" content="summary_large_image"', 'twitter:card with the cover image'],
     ],
   },
   { path: `/fr/articles/${ARTICLE}/`, expect: [['Modéliser du contenu sans déploiement', 'title']] },

package/templates/astro/shapio/components/seo.json

@@ -0,0 +1,114 @@
+{
+  "apiKey": "seo",
+  "category": "Built-in",
+  "description": "Search and social metadata: title, description, image, canonical URL and indexing.",
+  "display": {
+    "titleFieldId": "3fe294a9-6af9-4019-8b32-43010822e45a"
+  },
+  "fields": [
+    {
+      "apiKey": "title",
+      "deprecated": false,
+      "editor": {
+        "id": "textInput",
+        "options": {}
+      },
+      "filterable": false,
+      "id": "3fe294a9-6af9-4019-8b32-43010822e45a",
+      "label": "Title",
+      "localized": false,
+      "public": true,
+      "required": false,
+      "settings": {},
+      "sortable": false,
+      "type": "string",
+      "unique": false
+    },
+    {
+      "apiKey": "description",
+      "deprecated": false,
+      "editor": {
+        "id": "textarea",
+        "options": {}
+      },
+      "filterable": false,
+      "id": "6d1917f3-94a2-4391-ba1f-a98d14577b93",
+      "label": "Description",
+      "localized": false,
+      "public": true,
+      "required": false,
+      "settings": {},
+      "sortable": false,
+      "type": "text",
+      "unique": false
+    },
+    {
+      "apiKey": "image",
+      "deprecated": false,
+      "editor": {
+        "id": "mediaPicker",
+        "options": {}
+      },
+      "filterable": false,
+      "id": "d27c9354-4afc-4583-93b4-367214a7714a",
+      "label": "Social image",
+      "localized": false,
+      "public": true,
+      "required": false,
+      "settings": {
+        "allowedKinds": [
+          "image"
+        ],
+        "multiple": false
+      },
+      "sortable": false,
+      "type": "media",
+      "unique": false
+    },
+    {
+      "apiKey": "canonical",
+      "deprecated": false,
+      "editor": {
+        "id": "textInput",
+        "options": {}
+      },
+      "filterable": false,
+      "id": "17b374b6-cd85-444e-8403-20c7458ed29e",
+      "label": "Canonical URL",
+      "localized": false,
+      "public": true,
+      "required": false,
+      "settings": {
+        "protocols": [
+          "https",
+          "http"
+        ]
+      },
+      "sortable": false,
+      "type": "url",
+      "unique": false
+    },
+    {
+      "apiKey": "noindex",
+      "deprecated": false,
+      "editor": {
+        "id": "toggle",
+        "options": {}
+      },
+      "filterable": false,
+      "id": "e8346f99-dc3c-4b5c-906f-4854e03c9a57",
+      "label": "Hide from search engines",
+      "localized": false,
+      "public": true,
+      "required": false,
+      "settings": {},
+      "sortable": false,
+      "type": "boolean",
+      "unique": false
+    }
+  ],
+  "icon": "search",
+  "id": "f3905a00-d2a3-4c62-899a-c894bfd6cb9b",
+  "kind": "component",
+  "label": "SEO"
+}

package/templates/astro/shapio/models/article.json

@@ -140,6 +140,27 @@
       "sortable": true,
       "type": "date",
       "unique": false
+    },
+    {
+      "apiKey": "seo",
+      "deprecated": false,
+      "editor": {
+        "id": "seoEditor",
+        "options": {}
+      },
+      "filterable": false,
+      "id": "a3f1c0de-7b52-4e0a-9d1e-5c2b8e4f6a01",
+      "label": "SEO",
+      "localized": true,
+      "public": true,
+      "required": false,
+      "settings": {
+        "component": "f3905a00-d2a3-4c62-899a-c894bfd6cb9b",
+        "repeatable": false
+      },
+      "sortable": false,
+      "type": "component",
+      "unique": false
     }
   ],
   "id": "1679d89c-747f-4dfc-955f-7d47bd5e4f6b",

package/templates/astro/shapio/models/page.json

@@ -83,6 +83,27 @@
       "sortable": false,
       "type": "dynamiczone",
       "unique": false
+    },
+    {
+      "apiKey": "seo",
+      "deprecated": false,
+      "editor": {
+        "id": "seoEditor",
+        "options": {}
+      },
+      "filterable": false,
+      "id": "b7e2d1af-3c64-4f1b-8e2a-6d3c9f5a7b02",
+      "label": "SEO",
+      "localized": true,
+      "public": true,
+      "required": false,
+      "settings": {
+        "component": "f3905a00-d2a3-4c62-899a-c894bfd6cb9b",
+        "repeatable": false
+      },
+      "sortable": false,
+      "type": "component",
+      "unique": false
     }
   ],
   "id": "4c09af05-f302-4d8f-ba03-bb838d3afbd2",

package/templates/astro/src/layouts/Base.astro

@@ -1,23 +1,49 @@
 ---
 import '../styles/site.css';
-import { getSiteSettings } from '../lib/shapio.js';
-import { articlesPath, colophonPath, HOME_SLUG, otherLocale, pagePath, stringsFor, type Locale } from '../lib/site.js';
+import type { SeoResolved } from '@shapio/client';
+import { seoHead, type SeoHead } from '../lib/seo.js';
+import { getSite, getSiteSettings } from '../lib/shapio.js';
+import {
+  articlesPath,
+  colophonPath,
+  DEFAULT_LOCALE,
+  HOME_SLUG,
+  otherLocale,
+  pagePath,
+  stringsFor,
+  type Locale,
+} from '../lib/site.js';
 
 type Props = {
+  /** The page's own title; entry pages pass their SEO fields too, which win. */
   title: string;
-  description?: string | null;
+  /** The entry's SEO fields, read with `seo=resolved`. */
+  seo?: SeoResolved | null;
+  type?: SeoHead['type'];
   locale: Locale;
   /** This page in the other locale. */
   alternatePath?: string;
   noindex?: boolean;
 };
 
-const { title, description, locale, alternatePath, noindex = false } = Astro.props;
+const { title, seo, type, locale, alternatePath, noindex = false } = Astro.props;
 const strings = stringsFor(locale);
 const other = otherLocale(locale);
 // The name, tagline and footer come from the siteSettings singleton (the built-in strings until it is published).
 const settings = await getSiteSettings(locale);
 const siteName = settings?.siteName ?? strings.siteName;
+// Title, description, social tags and canonical: the entry's SEO fields over the site's SEO defaults.
+const head = seoHead({
+  seo: seo ?? null,
+  site: await getSite(),
+  locale,
+  localeChain: [locale, DEFAULT_LOCALE],
+  title,
+  path: Astro.url.pathname,
+  siteUrl: Astro.site?.href,
+  ...(type ? { type } : {}),
+});
+const robotsNoindex = noindex || head.noindex;
 ---
 
 <!doctype html>
@@ -25,9 +51,25 @@ const siteName = settings?.siteName ?? strings.siteName;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title} · {siteName}</title>
-    {description ? <meta name="description" content={description} /> : null}
-    {noindex ? <meta name="robots" content="noindex" /> : null}
+    <title>{head.title}</title>
+    {head.description ? <meta name="description" content={head.description} /> : null}
+    {robotsNoindex ? <meta name="robots" content="noindex" /> : null}
+    {head.canonical ? <link rel="canonical" href={head.canonical} /> : null}
+    <meta property="og:type" content={head.type} />
+    <meta property="og:title" content={head.title} />
+    <meta property="og:locale" content={head.locale} />
+    {head.siteName ? <meta property="og:site_name" content={head.siteName} /> : null}
+    {head.description ? <meta property="og:description" content={head.description} /> : null}
+    {head.canonical ? <meta property="og:url" content={head.canonical} /> : null}
+    {head.image ? <meta property="og:image" content={head.image.url} /> : null}
+    {head.image?.width ? <meta property="og:image:width" content={String(head.image.width)} /> : null}
+    {head.image?.height ? <meta property="og:image:height" content={String(head.image.height)} /> : null}
+    {head.image?.alt ? <meta property="og:image:alt" content={head.image.alt} /> : null}
+    <meta name="twitter:card" content={head.image ? 'summary_large_image' : 'summary'} />
+    {head.twitterHandle ? <meta name="twitter:site" content={head.twitterHandle} /> : null}
+    <meta name="twitter:title" content={head.title} />
+    {head.description ? <meta name="twitter:description" content={head.description} /> : null}
+    {head.image ? <meta name="twitter:image" content={head.image.url} /> : null}
     {alternatePath ? <link rel="alternate" hreflang={other} href={alternatePath} /> : null}
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
   </head>

package/templates/astro/src/lib/preview.ts

@@ -44,6 +44,7 @@ export const loadPreview = async (
   const client = createClient({ baseUrl: shapioUrl, token: request.token });
   const params = new URLSearchParams({
     locale: request.locale,
+    richText: 'html',
     ...(request.modelKey === 'articles' ? { populate: 'author' } : {}),
   });
   const { data } = await client.request<DeliveryItem<Page | Article>>(

package/templates/astro/src/lib/seo.ts

@@ -0,0 +1,69 @@
+import {
+  applyTitleTemplate,
+  seoDefaultsForLocale,
+  type DeliveryAsset,
+  type DeliverySite,
+  type SeoResolved,
+} from '@shapio/client';
+
+/**
+ * What a page puts in its <head> (title, description, Open Graph, Twitter card, canonical, robots), from an
+ * entry's SEO fields read with `?seo=resolved` and the site's SEO defaults (`GET /api/site`). Pages without an
+ * entry (listings, the colophon) pass their own title: it goes through the site's title template here.
+ */
+export type SeoHead = {
+  title: string;
+  description: string | null;
+  image: { url: string; width: number | null; height: number | null; alt: string | null } | null;
+  /** The entry's canonical URL, else this page's URL on SITE_URL; null when neither is known. */
+  canonical: string | null;
+  noindex: boolean;
+  siteName: string | null;
+  twitterHandle: string | null;
+  /** `article` for articles, `website` for everything else (`og:type`). */
+  type: 'website' | 'article';
+  /** `og:locale`, e.g. `en` or `fr`. */
+  locale: string;
+};
+
+export type SeoHeadInput = {
+  /** The entry's resolved SEO fields; absent on pages without an entry. */
+  seo?: SeoResolved | null;
+  /** The site and its defaults; null when it could not be read (the page still renders a title). */
+  site: DeliverySite | null;
+  locale: string;
+  /** The locales whose defaults apply, in order (the page's locale, then the default one). */
+  localeChain: readonly string[];
+  /** The page's own title (entry pages: used only when the entry has no SEO fields). */
+  title: string;
+  /** This page's path, e.g. `/en/articles/x/`; with `siteUrl` it makes the canonical URL. */
+  path: string;
+  siteUrl?: string | undefined;
+  type?: SeoHead['type'];
+};
+
+const imageOf = (asset: DeliveryAsset | null | undefined): SeoHead['image'] =>
+  asset ? { url: asset.url, width: asset.width, height: asset.height, alt: asset.alt } : null;
+
+const canonicalOf = (own: string | null | undefined, path: string, siteUrl: string | undefined) => {
+  if (own) {
+    return own;
+  }
+  return siteUrl ? new URL(path, siteUrl).href : null;
+};
+
+export const seoHead = (input: SeoHeadInput): SeoHead => {
+  const defaults = seoDefaultsForLocale(input.site?.seo ?? { locales: {} }, input.localeChain);
+  const { seo } = input;
+  return {
+    title: seo?.title ?? applyTitleTemplate(input.title, defaults.titleTemplate),
+    description: seo?.description ?? defaults.description ?? null,
+    image: imageOf(seo?.image ?? input.site?.seo.image),
+    canonical: canonicalOf(seo?.canonical, input.path, input.siteUrl),
+    noindex: seo?.noindex ?? false,
+    siteName: defaults.siteName ?? null,
+    twitterHandle: input.site?.seo.twitterHandle ?? null,
+    type: input.type ?? 'website',
+    locale: input.locale,
+  };
+};

package/templates/astro/src/lib/shapio.ts

@@ -1,4 +1,4 @@
-import { createClient, ShapioApiError } from '@shapio/client';
+import { createClient, ShapioApiError, type DeliverySite } from '@shapio/client';
 import { configuredSnapshot, deliveryToken, shapioUrl, siteKey } from './config.js';
 import type { Locale } from './site.js';
 import type { Article, DeliveryList, Page, SiteSettings } from './types.js';
@@ -19,8 +19,8 @@ const ARTICLES = 'articles';
  * The fields each listing renders, sent as `fields=`: the response carries only these, and Shapio's field
  * usage shows exactly what the site reads (a whole-model read would count every field as used).
  */
-const PAGE_FIELDS = 'title,slug,description,sections';
-const ARTICLE_FIELDS = 'title,slug,excerpt,body,cover,author,publishedOn';
+const PAGE_FIELDS = 'title,slug,description,sections,seo';
+const ARTICLE_FIELDS = 'title,slug,excerpt,body,cover,author,publishedOn,seo';
 
 /** The `siteSettings` singleton is read by its API ID (singletons have no plural). */
 const SITE_SETTINGS = 'siteSettings';
@@ -58,7 +58,9 @@ const listAll = async <T>(
   const entries: T[] = [];
   for (let page = 1; ; page += 1) {
     const result = await shapio().request<DeliveryList<T>>(
-      `/api/content/${routeKey}?${query({ locale, snapshot, page, pageSize: PAGE_SIZE, ...extra })}`,
+      // The site renders the server's sanitized HTML, so it asks for that instead of the JSON document, and
+      // its SEO fields with the site's defaults filled in (`seo=resolved`).
+      `/api/content/${routeKey}?${query({ locale, snapshot, page, pageSize: PAGE_SIZE, richText: 'html', seo: 'resolved', ...extra })}`,
     );
     entries.push(...result.data);
     if (page >= result.meta.pagination.pageCount) {
@@ -89,6 +91,7 @@ export const getSiteSettings = (locale: Locale): Promise<SiteSettings | null> =>
           locale,
           snapshot,
           fields: SITE_SETTINGS_FIELDS,
+          richText: 'html',
         });
         return data;
       } catch (error) {
@@ -102,3 +105,19 @@ export const getSiteSettings = (locale: Locale): Promise<SiteSettings | null> =>
   }
   return settings;
 };
+
+let site: Promise<DeliverySite | null> | undefined;
+
+/**
+ * The site and its SEO defaults (name and title template per locale, default image, Twitter handle), once per
+ * build. Null when the Shapio predates them: the pages still render, with plain titles.
+ */
+export const getSite = (): Promise<DeliverySite | null> =>
+  (site ??= shapio()
+    .site.get()
+    .catch((error: unknown) => {
+      if (error instanceof ShapioApiError && error.status === 404) {
+        return null;
+      }
+      throw error;
+    }));