@goodfellow-cms/next 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,200 @@
+import { CurrentMenuLinks, NextImage, NextLink } from "./components.js";
+import { absoluteUrl, allPages, demoContent, getPageHead, googleFontsUrl, loadSiteContent, normalizePagePath, themeToCss, withBase } from "@goodfellow-cms/core";
+import { fileSystemSource, readMediaSizes } from "@goodfellow-cms/core/node";
+import { BodyCode, HeadCode, PageBody, PageContent, PageFooter, PageHeader, applyPageEntry, createPuckConfigs, prepareLayout, preparePage } from "@goodfellow-cms/react";
+import { notFound } from "next/navigation";
+import { cache } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/index.tsx
+/** Next.js's own link and image components, for blocks' `<SiteLink>` and `<SiteImage>`. */
+const components = {
+	Link: NextLink,
+	Image: NextImage
+};
+/** Set by `withGoodfellow()` from Next.js's `basePath`. */
+function configuredBasePath() {
+	return process.env.GOODFELLOW_BASE_PATH ?? "";
+}
+/**
+* Reads the site's content from disk. Cached for the length of one request, so
+* a page and its metadata read it once, and content edits show on reload in development.
+*/
+const loadSite = cache((root = process.cwd()) => loadSiteContent(fileSystemSource(root)));
+function pathOf(segments) {
+	try {
+		return normalizePagePath(`/${(segments ?? []).map((segment) => decodeURIComponent(segment)).join("/")}`);
+	} catch {
+		return "";
+	}
+}
+function findPage(content, path) {
+	return allPages(content).find((page) => page.path === path);
+}
+function toAbsolute(siteUrl, url) {
+	if (!url || !siteUrl || !url.startsWith("/") || url.startsWith("//")) return url;
+	return absoluteUrl(siteUrl, url);
+}
+/** A page's title, description and link previews, as Next.js metadata. */
+function pageMetadata(content, page, basePath = configuredBasePath()) {
+	const head = getPageHead(content.settings, page);
+	const socialImage = toAbsolute(content.settings.url, head.socialImage);
+	return {
+		...content.settings.url && { metadataBase: new URL(content.settings.url) },
+		title: { absolute: head.title },
+		...head.description && { description: head.description },
+		...head.noIndex && { robots: { index: false } },
+		...head.canonicalUrl && { alternates: { canonical: head.canonicalUrl } },
+		...head.favicon && { icons: { icon: withBase(head.favicon, basePath) } },
+		openGraph: {
+			type: "website",
+			title: head.title,
+			...head.description && { description: head.description },
+			...head.canonicalUrl && { url: head.canonicalUrl },
+			...socialImage && /^https?:\/\//.test(socialImage) && { images: [socialImage] }
+		}
+	};
+}
+/**
+* Renders the site's pages in a Next.js App Router site, as Server Components.
+* Blocks' links to the site's pages use `next/link`, and their images
+* `next/image`, through `<SiteLink>` and `<SiteImage>`; Client Components in
+* blocks run in the browser. Use the results in `app/(site)/layout.tsx`,
+* which shows the header and footer once for every page, in
+* `app/(site)/[[...path]]/page.tsx`, and in `app/not-found.tsx`.
+*/
+function goodfellowPages(config, options = {}) {
+	const configs = createPuckConfigs(config);
+	const root = options.root ?? process.cwd();
+	const site = () => loadSite(options.root);
+	const basePath = () => options.basePath ?? configuredBasePath();
+	const renderOptions = async () => ({
+		base: basePath(),
+		components,
+		media: await readMediaSizes(root)
+	});
+	/** The site's theme and fonts, which React moves into the document's head. themeToCss escapes its output. */
+	function Theme({ content }) {
+		const fontsUrl = googleFontsUrl(content.settings.theme);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+			href: "goodfellow-theme",
+			precedence: "default",
+			children: themeToCss(content.settings.theme)
+		}), fontsUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("link", {
+				rel: "preconnect",
+				href: "https://fonts.googleapis.com"
+			}),
+			/* @__PURE__ */ jsx("link", {
+				rel: "preconnect",
+				href: "https://fonts.gstatic.com",
+				crossOrigin: ""
+			}),
+			/* @__PURE__ */ jsx("link", {
+				rel: "stylesheet",
+				href: fontsUrl,
+				precedence: "default"
+			})
+		] })] });
+	}
+	return {
+		/** Every page's address, so Next.js builds them all. Any other address is "not found". */
+		async generateStaticParams() {
+			return allPages(await site()).filter((page) => page.path !== "/404").map((page) => ({ path: page.path === "/" ? [] : page.path.slice(1).split("/") }));
+		},
+		async generateMetadata({ params }) {
+			const content = await site();
+			const page = findPage(content, pathOf((await params).path));
+			return page ? pageMetadata(content, applyPageEntry(configs, content, page), basePath()) : {};
+		},
+		/**
+		* For `app/(site)/layout.tsx`: the site's header and footer around every page, kept as
+		* they are when moving between pages. Menus mark the current page in the browser.
+		*/
+		async Layout({ children }) {
+			const content = await site();
+			const layout = await prepareLayout(configs, content, await renderOptions());
+			return /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Theme, { content }),
+				/* @__PURE__ */ jsx(HeadCode, { code: content.code?.head }),
+				/* @__PURE__ */ jsx(PageHeader, {
+					site: layout.site,
+					layoutConfig: layout.layoutConfig,
+					data: layout.header
+				}),
+				children,
+				/* @__PURE__ */ jsx(PageFooter, {
+					site: layout.site,
+					layoutConfig: layout.layoutConfig,
+					data: layout.footer
+				}),
+				/* @__PURE__ */ jsx(CurrentMenuLinks, { basePath: basePath() }),
+				/* @__PURE__ */ jsx(BodyCode, { code: content.code?.body })
+			] });
+		},
+		/** The page at the route's address, inside `Layout`'s header and footer. */
+		async Page({ params }) {
+			const content = await site();
+			const page = findPage(content, pathOf((await params).path));
+			if (!page || page.path === "/404") notFound();
+			const prepared = await preparePage(configs, content, page, await renderOptions());
+			return /* @__PURE__ */ jsx(PageContent, {
+				site: prepared.site,
+				pageConfig: prepared.pageConfig,
+				page: prepared.data
+			});
+		},
+		/**
+		* The site's "Page not found" page (`content/pages/404.json`), for `app/not-found.tsx`,
+		* with the header and footer, since Next.js shows it outside the `(site)` layout.
+		*/
+		async NotFound() {
+			const content = await site();
+			const page = findPage(content, "/404");
+			if (!page) return /* @__PURE__ */ jsx("h1", { children: "Page not found" });
+			const prepared = await preparePage(configs, content, page, await renderOptions());
+			return /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("title", { children: getPageHead(content.settings, page).title }),
+				/* @__PURE__ */ jsx(Theme, { content }),
+				/* @__PURE__ */ jsx(HeadCode, { code: content.code?.head }),
+				/* @__PURE__ */ jsx(PageBody, {
+					site: prepared.site,
+					pageConfig: prepared.pageConfig,
+					layoutConfig: prepared.layoutConfig,
+					page: prepared.data,
+					header: prepared.header,
+					footer: prepared.footer
+				}),
+				/* @__PURE__ */ jsx(BodyCode, { code: content.code?.body })
+			] });
+		},
+		/** For `app/sitemap.ts`: every page but "Page not found", once the site's address is set. */
+		async sitemap() {
+			const content = await site();
+			const url = content.settings.url;
+			if (!url) return [];
+			return allPages(content).filter((page) => page.path !== "/404").map((page) => ({ url: absoluteUrl(url, page.path) }));
+		},
+		/**
+		* For `app/admin/demo-content.json/route.ts`: in a demo (the config's `demo`), the copy of
+		* the site's content its admin panel starts from. A static export can't leave a route out,
+		* so other sites get an empty file.
+		*/
+		async demoContent() {
+			if (!config.demo) return new Response(null, { status: 404 });
+			return new Response(await demoContent(fileSystemSource(root)), { headers: { "content-type": "application/json" } });
+		},
+		/** For `app/robots.ts`: lets search engines in, and points them at the sitemap once the site's address is set. */
+		async robots() {
+			const url = (await site()).settings.url;
+			return {
+				rules: {
+					userAgent: "*",
+					allow: "/"
+				},
+				...url && { sitemap: absoluteUrl(url, "/sitemap.xml") }
+			};
+		}
+	};
+}
+//#endregion
+export { goodfellowPages, loadSite, pageMetadata };