camox 0.46.0 → 0.48.0

package/dist/features/runtime/runtime.js

@@ -5,18 +5,24 @@ import { UNNAMED_DEFAULT_LOCALE, localizedPath, parseLocalePath } from "../../li
 import { draftNamedBy } from "../../lib/draft-scope.js";
 import { RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute } from "./runtimeRoutes.js";
 import { reads } from "../../lib/studio-reads.js";
-import { asCollectionItem, recordMarkdownTemplate, recordPlainText } from "../../core/recordItem.js";
+import { asCollectionItem, recordMarkdownTemplate, recordPageValues } from "../../core/recordItem.js";
+import { buildLayoutContext, curatedLayoutContext } from "../../core/layoutContext.js";
 import { PLATFORM_SCRIPT } from "../../lib/platform.js";
 import { STUDIO_ASSETS_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, matchCollectionContentPath } from "../studio/routes.js";
 import { STUDIO_THEME_SCRIPT } from "../studio/studioTheme.js";
+import { DefaultPageImage, renderPageImage } from "../og/pageImage.js";
 import { discoverLayoutPages, matchDerivedLayout } from "../../core/derivedRoutes.js";
-import { buildCamoxPageHead, buildFaviconUrl, buildPageHead, buildPageMeta, createMarkdownResponse, createServerApiClient, createServerStudioCache, isNotFoundError, loadCamoxPageForRequest, parseMarkdownPath, prefersMarkdown, readDraftOrLive, readScopeLocales, renderedHref, resolveMemberProject, withFrontMatter } from "../routes/pageRuntime.js";
+import { buildCamoxPageHead, buildFaviconUrl, buildPageHead, buildPageMeta, createMarkdownResponse, createServerApiClient, createServerStudioCache, declarePage, isNotFoundError, loadCamoxPageForRequest, parseMarkdownPath, prefersMarkdown, readDraftOrLive, readScopeLocales, renderedHref, resolveMemberProject, withFrontMatter } from "../routes/pageRuntime.js";
 import { alternatesByPage, findAlternates, hreflangLinks } from "./alternates.js";
 import { configuredProviders, renderAnalyticsScripts } from "./analytics.js";
 import { omitArtifactSources } from "./artifactSources.js";
+import { readBreadcrumb } from "./breadcrumbs.js";
 import { RouteDiscoveryError, listLivePages } from "./livePages.js";
 import { formatLlmsTxt } from "./llmsTxt.js";
 import { getPageBlockTypes } from "./pageBlockTypes.js";
+import { withPageUrls } from "./structuredData.js";
+import { curatedPageDescription, pageRecords, placedBlockNodes, withStructuredData } from "./pageGraph.js";
+import { createProjectLogoResponse, projectLogo } from "./projectLogo.js";
 import { DEVELOPMENT_DRAFT, LOCALE_HEADER } from "@camox/api-contract/drafts";
 import { QueryClient, dehydrate } from "@tanstack/react-query";
 import { createHead, renderSSRHead } from "@unhead/react/server";
@@ -151,15 +157,22 @@ function absoluteUrl(request, options) {
 	const { origin } = new URL(request.url);
 	return (path) => `${origin}${withRuntimeBasePath(path, options.runtimeBasePath)}`;
 }
+/** An ETag derived from `text`. */
+async function etagOf(text) {
+	const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(text));
+	return `"${[...new Uint8Array(digest)].slice(0, 16).map((byte) => byte.toString(16).padStart(2, "0")).join("")}"`;
+}
+/** Whether the request's `If-None-Match` names `etag`, so a 304 answers it. */
+function namesEtag(request, etag) {
+	return (request.headers.get("If-None-Match") ?? "").split(",").map((tag) => tag.trim().replace(/^W\//, "")).some((tag) => tag === etag || tag === "*");
+}
 /** `body` with an ETag derived from it, or a 304 when the request's `If-None-Match` names it. */
 async function withEtag(request, body, headers) {
-	const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(body));
-	const etag = `"${[...new Uint8Array(digest)].slice(0, 16).map((byte) => byte.toString(16).padStart(2, "0")).join("")}"`;
 	const taggedHeaders = {
 		...headers,
-		ETag: etag
+		ETag: await etagOf(body)
 	};
-	if ((request.headers.get("If-None-Match") ?? "").split(",").map((tag) => tag.trim().replace(/^W\//, "")).some((tag) => tag === etag || tag === "*")) return new Response(null, {
+	if (namesEtag(request, taggedHeaders.ETag)) return new Response(null, {
 		status: 304,
 		headers: taggedHeaders
 	});
@@ -250,21 +263,94 @@ async function createRoutesResponse(request, options) {
 		});
 	}
 }
+/**
+* The image of the page `/og?path=` names, by its path with its locale's prefix: its layout's
+* `toImage`, or Camox's default image, rendered with the page's context. Only real pages have
+* one, read as the page itself would be, in the draft the URL names for a member.
+*/
 async function createOgResponse(request, options) {
 	const camoxApp = await options.getCamoxApp?.();
 	if (!camoxApp) return Response.json({ message: "Camox app registry is not available." }, { status: 500 });
-	const url = new URL(request.url);
-	const layoutId = url.searchParams.get("layoutId") || "";
-	const title = url.searchParams.get("title") || "";
-	const description = url.searchParams.get("description") || "";
-	const projectName = url.searchParams.get("projectName") || "";
-	const layout = camoxApp.getLayoutById(layoutId);
-	if (!layout?._internal.buildOgImage) return new Response("Not found", { status: 404 });
-	return layout._internal.buildOgImage({
-		title,
-		description,
-		projectName
+	const source = await readPageImageSource(request, options, camoxApp);
+	if (!source) return new Response("Not found", { status: 404 });
+	const headers = {
+		ETag: await etagOf(JSON.stringify([source.layout?.id ?? null, source.context])),
+		"Cache-Control": isPrivateRender(request, options) ? "private, no-store" : "public, no-cache"
+	};
+	if (namesEtag(request, headers.ETag)) return new Response(null, {
+		status: 304,
+		headers
+	});
+	const toImage = source.layout?.toImage ?? DefaultPageImage;
+	const image = await renderPageImage(toImage(source.context));
+	for (const [name, value] of Object.entries(headers)) image.headers.set(name, value);
+	return image;
+}
+/** The layout and context of the page `/og` names, or null when it names no page. */
+async function readPageImageSource(request, options, app) {
+	const { apiUrl, projectUuid } = options;
+	const path = new URL(request.url).searchParams.get("path");
+	if (!apiUrl || !projectUuid || !path?.startsWith("/")) return null;
+	const located = await locateRequest(request, options, path);
+	if (matchLocalizedRoute(located.path)?.kind !== "page") return null;
+	const { project } = await resolveRequestMember(request, options);
+	const member = project !== void 0;
+	const authCookieHeader = member ? getServerAuthCookieHeader(request.headers) : void 0;
+	const requestedDraft = getRequestDraftId(request, options);
+	const api = (draftId) => createServerApiClient(apiUrl, {
+		authCookieHeader,
+		draftId,
+		locale: located.locale
 	});
+	const match = matchDerivedLayout(app.getLayouts(), located.path);
+	/** A code-owned page: its loader runs in the draft the layout read settled on. */
+	const codeOwned = async (match) => {
+		const layout = match.layout._internal;
+		const { value: shared, draftId } = await readDraftOrLive(requestedDraft, member, (draftId) => api(draftId).layouts.get({
+			projectUuid,
+			layoutId: layout.id
+		}));
+		const result = await loadLayoutResult(app, match, createLayoutRequestContext(options, member ? "draft" : "live", {
+			authCookieHeader,
+			draftId,
+			locale: located.locale
+		}), located.locale);
+		const record = asCollectionItem(result);
+		const collection = record && app.getCollectionById(record.collectionId);
+		return {
+			layout,
+			context: buildLayoutContext(layout, {
+				path,
+				locale: located.locale.tag,
+				projectName: shared.projectName,
+				data: result?.data,
+				params: match.params,
+				record: record && collection ? recordPageValues(collection, record) : void 0
+			})
+		};
+	};
+	/** A curated page, or else a derived layout's page, as the page's HTML falls back. */
+	const curated = async () => {
+		try {
+			const { value: page } = await readDraftOrLive(requestedDraft, member, (draftId) => api(draftId).pages.getByPath({
+				path: located.path,
+				projectUuid
+			}));
+			return {
+				layout: page.layout ? app.getLayoutById(page.layout.layoutId)?._internal : void 0,
+				context: curatedLayoutContext(page, located.locale)
+			};
+		} catch (error) {
+			if (isNotFoundError(error) && match) return codeOwned(match);
+			throw error;
+		}
+	};
+	try {
+		return match?.layout._internal.kind === "singleton" ? await codeOwned(match) : await curated();
+	} catch (error) {
+		if (isNotFoundError(error)) return null;
+		throw error;
+	}
 }
 function createDefaultHeadInput(stylesheetUrl) {
 	return {
@@ -303,9 +389,9 @@ function createPageHeadInput(head) {
 	const pageLinks = [];
 	for (const entry of links) {
 		if (!entry.href) continue;
-		if (entry.rel === "icon") {
+		if (entry.rel === "icon" || entry.rel === "canonical") {
 			pageLinks.push({
-				rel: "icon",
+				rel: entry.rel,
 				href: entry.href,
 				"data-camox-page-head": "true"
 			});
@@ -319,10 +405,16 @@ function createPageHeadInput(head) {
 			"data-camox-page-head": "true"
 		});
 	}
+	const pageScripts = (head.scripts ?? []).filter((entry) => entry.type === "application/ld+json").map((entry) => ({
+		type: "application/ld+json",
+		innerHTML: entry.text,
+		"data-camox-page-head": "true"
+	}));
 	return {
 		...title && { title },
 		meta: pageMeta,
-		link: pageLinks
+		link: pageLinks,
+		script: pageScripts
 	};
 }
 function renderHead(document, pageHead, stylesheetUrl, studioStylesheetUrl, locale) {
@@ -400,16 +492,109 @@ function isPreviewHandoff(request, options) {
 * The alternates of the page a request renders, where it exists in each of the scope's locales,
 * and its head with their `hreflang` links. Without a head, there is none to add them to.
 */
-async function readAlternates(request, options, { located, identity, head, ...reading }) {
-	const alternates = await findRequestAlternates(options, located, identity, reading);
-	const links = hreflangLinks(alternates, located.locales, absoluteUrl(request, options));
+async function readAlternates(request, options, { located, identity, head, described, ...reading }) {
+	const localeReads = requestLocaleReads(options, reading);
+	const [alternates, crumbs] = await Promise.all([findRequestAlternates(options, located, identity, localeReads), head ? readRequestBreadcrumb(options, located, described.title, localeReads) : []]);
+	const url = absoluteUrl(request, options);
+	const links = hreflangLinks(alternates, located.locales, url);
+	const place = {
+		url: url(localizedPath(located.path, located.locale)),
+		locale: located.locale.tag,
+		alternates
+	};
+	const site = {
+		url: url("/"),
+		name: described.project.name,
+		logo: projectLogo(url, described.project),
+		socialProfiles: described.project.socialProfiles ?? []
+	};
+	const breadcrumb = crumbs.map((crumb) => ({
+		name: crumb.name,
+		url: url(localizedPath(crumb.path, located.locale))
+	}));
+	const defaultLocale = located.locales.find((locale) => locale.isDefault) ?? located.locale;
+	const pageUrl = (marker) => {
+		const locale = located.locales.find((candidate) => candidate.tag === marker.locale);
+		return url(localizedPath(marker.path, locale ?? defaultLocale));
+	};
+	const blocks = withPageUrls(described.blocks ?? [], pageUrl);
+	const localeHome = url(localizedPath("/", located.locale));
+	const records = described.records && {
+		...described.records,
+		nodes: withPageUrls(described.records.nodes, pageUrl),
+		id: (recordId) => `${localeHome}#record-${recordId}`
+	};
 	return {
 		alternates,
-		head: head && withHreflangs(head, links)
+		head: head && withStructuredData(withLocatedTags(withHreflangs(head, links), place), place, site, {
+			...described,
+			breadcrumb,
+			blocks,
+			records
+		})
+	};
+}
+/** An Open Graph locale: a locale tag with an underscore, as in `de_CH`. */
+const ogLocale = (tag) => tag.replaceAll("-", "_");
+/**
+* A page's head with where it is: its canonical URL, which never names a draft, and its locale
+* among the locales it exists in.
+*/
+function withLocatedTags(head, { url, locale, alternates }) {
+	const others = alternates.filter((alternate) => alternate.locale !== locale);
+	return {
+		...head,
+		meta: [
+			...head.meta ?? [],
+			{
+				property: "og:url",
+				content: url
+			},
+			{
+				property: "og:locale",
+				content: ogLocale(locale)
+			},
+			...others.map((other) => ({
+				property: "og:locale:alternate",
+				content: ogLocale(other.locale)
+			}))
+		],
+		links: [...head.links ?? [], {
+			rel: "canonical",
+			href: url
+		}]
+	};
+}
+function requestLocaleReads(options, { authCookieHeader, draftId }) {
+	const { apiUrl, projectUuid } = options;
+	const reading = {
+		authCookieHeader: draftId ? authCookieHeader : void 0,
+		draftId
+	};
+	const source = draftId ? "draft" : "live";
+	const pagesByLocale = /* @__PURE__ */ new Map();
+	return {
+		pages: (locale) => {
+			if (!apiUrl || !projectUuid) return Promise.resolve([]);
+			const read = pagesByLocale.get(locale.tag) ?? createServerApiClient(apiUrl, {
+				...reading,
+				locale
+			}).pages.listBySlug({ projectUuid }).then(({ pages }) => pages);
+			pagesByLocale.set(locale.tag, read);
+			return read;
+		},
+		context: (locale) => createLayoutRequestContext(options, source, {
+			...reading,
+			locale
+		}),
+		records: (locale) => createRecordLookup(options, source, {
+			...reading,
+			locale
+		})
 	};
 }
 /** Where the page a request renders exists in each of the scope's locales: itself alone in one. */
-async function findRequestAlternates(options, located, identity, { authCookieHeader, draftId }) {
+async function findRequestAlternates(options, located, identity, reads) {
 	const { apiUrl, projectUuid } = options;
 	const here = [{
 		locale: located.locale.tag,
@@ -417,26 +602,33 @@ async function findRequestAlternates(options, located, identity, { authCookieHea
 	}];
 	if (!apiUrl || !projectUuid || located.locales.length < 2) return here;
 	const app = await options.getCamoxApp?.();
-	const reading = {
-		authCookieHeader: draftId ? authCookieHeader : void 0,
-		draftId
-	};
 	return findAlternates({
 		identity,
 		located,
 		layouts: app?.getLayouts() ?? [],
-		reads: {
-			pages: async (locale) => (await createServerApiClient(apiUrl, {
-				...reading,
-				locale
-			}).pages.listBySlug({ projectUuid })).pages,
-			context: (locale) => createLayoutRequestContext(options, draftId ? "draft" : "live", {
-				...reading,
-				locale
-			})
-		}
+		reads
 	});
 }
+/**
+* The crumbs of the page a request renders, in its locale. Without them, the page still renders:
+* a breadcrumb that can't be read is left out.
+*/
+async function readRequestBreadcrumb(options, located, title, reads) {
+	try {
+		return await readBreadcrumb({
+			path: located.path,
+			title,
+			app: await options.getCamoxApp?.(),
+			reads: {
+				pages: () => reads.pages(located.locale),
+				records: reads.records(located.locale)
+			}
+		});
+	} catch (error) {
+		console.error("[camox] Couldn't read the page's breadcrumb.", error);
+		return [];
+	}
+}
 /** A page's head with its alternates' `hreflang` links. */
 function withHreflangs(head, hreflangs) {
 	if (!hreflangs.length) return head;
@@ -515,6 +707,7 @@ async function createPageHtmlResponse({ options, pathname, located, request }) {
 				pageId: result.data.page.page.id
 			},
 			head: camoxApp ? buildCamoxPageHead(camoxApp, result.data, located.locale) : {},
+			described: curatedPageDescription(camoxApp, result.data.page, located.locale),
 			authCookieHeader: getServerAuthCookieHeader(request.headers),
 			draftId: result.draftId
 		});
@@ -662,7 +855,7 @@ async function createLayoutMarkdownResponse(options, match, locale, page) {
 				toMarkdown: template
 			})],
 			data,
-			item: recordPlainText(collection, data.content)
+			record: recordPageValues(collection, record)
 		};
 	};
 	let rendered;
@@ -685,13 +878,14 @@ async function createLayoutMarkdownResponse(options, match, locale, page) {
 	});
 	const meta = buildPageMeta({
 		layout: match.layout._internal,
-		pageMetaTitle: match.layout._internal.title,
-		pageMetaDescription: void 0,
-		data: rendered.data,
-		item: rendered.item,
-		params: match.params,
-		projectName: slots.projectName,
-		pageFullPath: page.pathname
+		context: buildLayoutContext(match.layout._internal, {
+			path: page.pathname,
+			locale: locale.tag,
+			projectName: slots.projectName,
+			data: rendered.data,
+			params: match.params,
+			record: "record" in rendered ? rendered.record : void 0
+		})
 	});
 	const markdown = [
 		slots.before,
@@ -746,6 +940,15 @@ async function createDerivedResponse(options, pathname, located, request, { data
 		}), serializedResult ?? null, shownIn);
 		const record = asCollectionItem(serializedResult);
 		const recordCollection = record && app.getCollectionById(record.collectionId);
+		const recordValues = record && recordCollection ? recordPageValues(recordCollection, record) : void 0;
+		const context = buildLayoutContext(match.layout._internal, {
+			path: pathname,
+			locale: located.locale.tag,
+			projectName: shared.projectName,
+			data: serializedResult?.data,
+			params: match.params,
+			record: recordValues
+		});
 		const { alternates, head: pageHead } = await readAlternates(request, options, {
 			located,
 			identity: record && match.layout._internal.kind === "derived" ? {
@@ -755,17 +958,30 @@ async function createDerivedResponse(options, pathname, located, request, { data
 			} : { kind: "code-owned" },
 			head: buildPageHead({
 				layout: match.layout._internal,
-				pageMetaTitle: match.layout._internal.title,
-				pageMetaDescription: void 0,
-				data: serializedResult?.data,
-				item: record && recordCollection ? recordPlainText(recordCollection, record.data.content) : void 0,
-				params: match.params,
-				projectName: shared.projectName,
-				pageFullPath: pathname,
+				context,
 				origin: new URL(request.url).origin,
 				faviconUrl: buildFaviconUrl(options.apiUrl, shared.project),
-				hasMarkdown: match.layout._internal.toMarkdown !== void 0
+				hasMarkdown: match.layout._internal.toMarkdown !== void 0,
+				recordType: record?.structuredData?.node?.["@type"]
 			}),
+			described: {
+				project: {
+					...shared.project,
+					name: shared.projectName
+				},
+				title: context.page.title,
+				declared: declarePage({
+					layout: match.layout._internal,
+					context
+				}),
+				blocks: placedBlockNodes(shared.layout, [], shared.structuredData),
+				...record?.published && { published: record.published },
+				records: pageRecords(shared.recordStructuredData, record && {
+					id: record.data.id,
+					structuredData: record.structuredData,
+					titles: recordValues?.titles
+				})
+			},
 			authCookieHeader,
 			draftId: read.draftId
 		});
@@ -794,6 +1010,11 @@ async function createDerivedResponse(options, pathname, located, request, { data
 			locales: located.locales,
 			derived: {
 				layoutId: match.layout._internal.id,
+				page: {
+					params: match.params,
+					path: pathname,
+					projectName: shared.projectName
+				},
 				result: serializedResult,
 				layout: shared.layout
 			}
@@ -948,6 +1169,7 @@ async function createPageDataResponse({ options, pathname, located, request }) {
 				pageId: result.data.page.page.id
 			},
 			head: camoxApp ? buildCamoxPageHead(camoxApp, result.data, located.locale) : null,
+			described: curatedPageDescription(camoxApp, result.data.page, located.locale),
 			authCookieHeader: getServerAuthCookieHeader(request.headers),
 			draftId: result.draftId
 		});
@@ -1000,6 +1222,7 @@ async function handleCamoxRequest(request, options = {}) {
 		});
 	}
 	if (match.kind === "og") return createOgResponse(request, options);
+	if (match.kind === "logo") return createProjectLogoResponse(request, options);
 	if (match.kind === "sitemap") return createSitemapResponse(request, options);
 	if (match.kind === "llms-txt") return createLlmsTxtResponse(request, options);
 	if (match.kind === "routes") return createRoutesResponse(request, options);

package/dist/features/runtime/runtimeRoutes.d.ts

@@ -11,6 +11,7 @@ export declare const RUNTIME_ROUTE_PATHS: {
   readonly health: "/_camox/health";
   readonly registry: "/_camox/registry";
   readonly routes: "/_camox/routes";
+  readonly logo: "/_camox/logo.png";
   readonly og: "/og";
   readonly sitemap: "/sitemap.xml";
   readonly "llms-txt": "/llms.txt";

package/dist/features/runtime/runtimeRoutes.js

@@ -11,6 +11,7 @@ const RUNTIME_ROUTE_PATHS = {
 	health: "/_camox/health",
 	registry: "/_camox/registry",
 	routes: "/_camox/routes",
+	logo: "/_camox/logo.png",
 	og: "/og",
 	sitemap: "/sitemap.xml",
 	"llms-txt": "/llms.txt"