@decocms/apps-website 7.2.0

package/src/loaders/fonts/googleFonts.ts

@@ -0,0 +1,119 @@
+import type { Font } from "../../types";
+
+interface Props {
+	fonts: GoogleFont[];
+}
+
+/**
+ * @title {{weight}} {{#italic}}Italic{{/italic}}{{^italic}}{{/italic}}
+ */
+interface FontVariation {
+	weight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+	italic?: boolean;
+}
+
+/** @titleBy family */
+interface GoogleFont {
+	family: string;
+	variations: FontVariation[];
+}
+
+const getFontVariations = (variations: FontVariation[]) => {
+	if (variations.length === 0) {
+		return "";
+	}
+
+	let hasItalic = false;
+	const sortedVariations = [...variations]
+		.sort((a, b) => {
+			a.italic ??= false;
+			b.italic ??= false;
+
+			if (a.italic !== b.italic) {
+				hasItalic = true;
+				if (a.italic) return 1;
+				if (!a.italic) return -1;
+			}
+
+			return Number.parseInt(a.weight, 10) - Number.parseInt(b.weight, 10);
+		})
+		.filter(
+			(item, index, self) =>
+				index === self.findIndex((t) => t.weight === item.weight && t.italic === item.italic),
+		);
+
+	const variants: string[] = [];
+
+	for (const { weight, italic } of sortedVariations) {
+		if (!hasItalic) {
+			variants.push(weight);
+			continue;
+		}
+		variants.push(`${italic ? "1," : "0,"}${weight}`);
+	}
+
+	return `:${hasItalic ? "ital," : ""}wght@${variants.join(";")}`;
+};
+
+const NEW_BROWSER_KEY = {
+	"User-Agent":
+		"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36",
+};
+
+const OLD_BROWSER_KEY = {
+	"User-Agent": "deco-cx/1.0",
+};
+
+const loader = async (props: Props): Promise<Font> => {
+	const { fonts = [] } = props;
+
+	if (fonts.length === 0) {
+		return { family: "", styleSheet: "" };
+	}
+
+	const url = new URL("https://fonts.googleapis.com/css2?display=swap");
+
+	const reduced = fonts.reduce(
+		(acc, font) => {
+			const { family, variations } = font;
+			acc[family] = acc[family] ?? { family, variations: [] };
+			acc[family].variations = [...acc[family].variations, ...variations];
+			return acc;
+		},
+		{} as Record<string, GoogleFont>,
+	);
+
+	for (const font of Object.values(reduced)) {
+		url.searchParams.append("family", `${font.family}${getFontVariations(font.variations)}`);
+	}
+
+	const logFontError = (label: string, fontUrl: URL, e: unknown) => {
+		const message = e instanceof Error ? e.message : String(e);
+		const short = message.length > 300 ? `${message.slice(0, 300)}…` : message;
+		console.error(`Error fetching font (${label}): ${fontUrl.toString()} - ${short}`);
+	};
+
+	const sheets = await Promise.all([
+		fetch(url, { headers: OLD_BROWSER_KEY })
+			.then((res) => res.text())
+			.catch((e) => {
+				logFontError("OLD_UA", url, e);
+				return "";
+			}),
+		fetch(url, { headers: NEW_BROWSER_KEY })
+			.then((res) => res.text())
+			.catch((e) => {
+				logFontError("NEW_UA", url, e);
+				return "";
+			}),
+	]);
+
+	const styleSheet = sheets.join("\n");
+
+	return {
+		family: Object.keys(reduced).join(", "),
+		styleSheet,
+	};
+};
+
+export default loader;

package/src/loaders/fonts/local.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import localFonts from "./local";
+
+describe("localFonts", () => {
+	it("returns empty family and stylesheet for no fonts", () => {
+		const result = localFonts({ fonts: [] });
+		expect(result.family).toBe("");
+		expect(result.styleSheet).toBe("");
+	});
+
+	it("generates @font-face for a single font", () => {
+		const result = localFonts({
+			fonts: [
+				{
+					family: "CustomFont",
+					variations: [{ weight: "400", italic: false, src: "https://cdn.example.com/font.woff2" }],
+				},
+			],
+		});
+
+		expect(result.family).toBe("CustomFont");
+		expect(result.styleSheet).toContain("@font-face");
+		expect(result.styleSheet).toContain("font-family: 'CustomFont'");
+		expect(result.styleSheet).toContain("font-weight: 400");
+		expect(result.styleSheet).toContain("font-style: normal");
+		expect(result.styleSheet).toContain("format('woff2')");
+	});
+
+	it("generates italic font-face", () => {
+		const result = localFonts({
+			fonts: [
+				{
+					family: "CustomFont",
+					variations: [
+						{ weight: "700", italic: true, src: "https://cdn.example.com/font-bold-italic.woff2" },
+					],
+				},
+			],
+		});
+
+		expect(result.styleSheet).toContain("font-style: italic");
+		expect(result.styleSheet).toContain("font-weight: 700");
+	});
+
+	it("merges duplicate font families", () => {
+		const result = localFonts({
+			fonts: [
+				{
+					family: "Inter",
+					variations: [{ weight: "400", src: "https://cdn.example.com/inter-400.woff2" }],
+				},
+				{
+					family: "Inter",
+					variations: [{ weight: "700", src: "https://cdn.example.com/inter-700.woff2" }],
+				},
+			],
+		});
+
+		expect(result.family).toBe("Inter");
+		expect(result.styleSheet).toContain("font-weight: 400");
+		expect(result.styleSheet).toContain("font-weight: 700");
+	});
+
+	it("detects font format from extension", () => {
+		const ttfResult = localFonts({
+			fonts: [{ family: "F", variations: [{ weight: "400", src: "https://x.com/f.ttf" }] }],
+		});
+		expect(ttfResult.styleSheet).toContain("format('truetype')");
+
+		const woffResult = localFonts({
+			fonts: [{ family: "F", variations: [{ weight: "400", src: "https://x.com/f.woff" }] }],
+		});
+		expect(woffResult.styleSheet).toContain("format('woff')");
+	});
+});

package/src/loaders/fonts/local.ts

@@ -0,0 +1,85 @@
+import type { Font } from "../../types";
+
+interface Props {
+	fonts: LocalFont[];
+}
+
+/**
+ * @title {{weight}} {{#italic}}Italic{{/italic}}{{^italic}}{{/italic}}
+ */
+interface FontVariation {
+	weight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+	italic?: boolean;
+	/** @format file */
+	src: string;
+}
+
+const getFontFormat = (src: string): string => {
+	const clean = src.toLowerCase().split(/[?#]/, 1)[0];
+	const extension = clean.slice(clean.lastIndexOf(".") + 1);
+	switch (extension) {
+		case "woff2":
+			return "woff2";
+		case "woff":
+			return "woff";
+		case "ttf":
+			return "truetype";
+		case "otf":
+			return "opentype";
+		case "eot":
+			return "embedded-opentype";
+		case "svg":
+			return "svg";
+		default:
+			return "truetype";
+	}
+};
+
+/** @titleBy family */
+interface LocalFont {
+	family: string;
+	variations: FontVariation[];
+}
+
+const loader = (props: Props): Font => {
+	const { fonts = [] } = props;
+
+	const reduced = fonts.reduce(
+		(acc, font) => {
+			const { family, variations } = font;
+			acc[family] = acc[family] ?? { family, variations: [] };
+			acc[family].variations = [...acc[family].variations, ...variations];
+			return acc;
+		},
+		{} as Record<string, LocalFont>,
+	);
+
+	const fontFaces: string[] = [];
+
+	for (const font of Object.values(reduced)) {
+		for (const variation of font.variations) {
+			const { weight, italic = false, src } = variation;
+			const fontStyle = italic ? "italic" : "normal";
+			const format = getFontFormat(src);
+
+			const fontFace = `@font-face {
+  font-family: '${font.family}';
+  font-style: ${fontStyle};
+  font-weight: ${weight};
+  font-display: swap;
+  src: url(${encodeURI(src)}) format('${format}');
+}`;
+
+			fontFaces.push(fontFace);
+		}
+	}
+
+	const styleSheet = fontFaces.join("\n");
+
+	return {
+		family: Object.keys(reduced).join(", "),
+		styleSheet,
+	};
+};
+
+export default loader;

package/src/loaders/secret.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import SecretLoader from "./secret";
+
+describe("SecretLoader", () => {
+	it("reads from process.env when name is set", () => {
+		process.env.MY_SECRET = "super-secret";
+		const result = SecretLoader({ encrypted: "xxx", name: "MY_SECRET" });
+		expect(result.get()).toBe("super-secret");
+		delete process.env.MY_SECRET;
+	});
+
+	it("returns null when encrypted is empty", () => {
+		const result = SecretLoader({ encrypted: "" });
+		expect(result.get()).toBeNull();
+	});
+
+	it("returns encrypted value as fallback in dev", () => {
+		const original = process.env.NODE_ENV;
+		process.env.NODE_ENV = "test";
+		const result = SecretLoader({ encrypted: "encrypted-value", name: "NONEXISTENT" });
+		expect(result.get()).toBe("encrypted-value");
+		process.env.NODE_ENV = original;
+	});
+
+	it("reads empty-string env var correctly", () => {
+		process.env.EMPTY_SECRET = "";
+		const result = SecretLoader({ encrypted: "fallback", name: "EMPTY_SECRET" });
+		expect(result.get()).toBe("");
+		delete process.env.EMPTY_SECRET;
+	});
+});

package/src/loaders/secret.ts

@@ -0,0 +1,60 @@
+/**
+ * @title Secret
+ * @hideOption true
+ */
+export interface Secret {
+	/** @ignore */
+	get: () => string | null;
+}
+
+export interface Props {
+	/**
+	 * @title Secret Value
+	 * @format secret
+	 */
+	encrypted: string;
+	/**
+	 * @title Secret Name
+	 * @description Used in dev mode as a environment variable (should not contain spaces or special characters)
+	 * @pattern ^[a-zA-Z_][a-zA-Z0-9_]*$
+	 */
+	name?: string;
+}
+
+/**
+ * Resolve a secret value.
+ * In local dev, reads from process.env using the `name` field.
+ * In production, the framework's ResolveSecretFn handles decryption
+ * before the value reaches this loader.
+ */
+const getSecret = (props: Props): string | null => {
+	const name = props?.name;
+	if (name && process.env[name] !== undefined) {
+		return process.env[name]!;
+	}
+	const encrypted = props?.encrypted;
+	if (!encrypted) {
+		return null;
+	}
+	// In production, the encrypted value should already be resolved
+	// by the framework's ResolveSecretFn before reaching this loader.
+	// If we get here with an encrypted value in dev, warn.
+	if (process.env.NODE_ENV !== "production") {
+		console.warn(
+			`Secret "${name ?? "anonymous"}" has encrypted value but no env var set. Set ${name} in .env.`,
+		);
+	}
+	return encrypted;
+};
+
+/**
+ * @title Secret
+ */
+export default function SecretLoader(props: Props): Secret {
+	const secretValue = getSecret(props);
+	return {
+		get: (): string | null => {
+			return secretValue;
+		},
+	};
+}

package/src/loaders/secretString.ts

@@ -0,0 +1,18 @@
+import type { Secret } from "./secret";
+
+export interface Props {
+	secret: Secret;
+}
+
+/**
+ * @title Secret String (use Secret instead)
+ */
+export type SecretString = string | null;
+
+/**
+ * @title Secret String
+ * @deprecated true
+ */
+export default function ({ secret }: Props): SecretString {
+	return secret.get();
+}

package/src/mod.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { getWebsiteConfig } from "./client";
+import { configure } from "./mod";
+
+describe("configure", () => {
+	const mockResolveSecret = async () => null;
+
+	it("returns an AppDefinition with name website", async () => {
+		const result = await configure({}, mockResolveSecret);
+
+		expect(result).not.toBeNull();
+		expect(result.name).toBe("website");
+		expect(result.manifest).toBeDefined();
+		expect(result.state.config).toBeDefined();
+	});
+
+	it("passes SEO config from block data", async () => {
+		const seo = { title: "My Site", description: "A great site" };
+		const result = await configure({ seo }, mockResolveSecret);
+
+		expect(result.state.config.seo).toEqual(seo);
+	});
+
+	it("configures the global singleton", async () => {
+		const seo = { title: "Singleton Test" };
+		await configure({ seo }, mockResolveSecret);
+
+		const config = getWebsiteConfig();
+		expect(config.seo).toEqual(seo);
+	});
+
+	it("works with null/undefined block", async () => {
+		const result = await configure(null, mockResolveSecret);
+
+		expect(result.name).toBe("website");
+		expect(result.state.config.seo).toBeUndefined();
+	});
+
+	it("manifest has loaders and sections", async () => {
+		const result = await configure({}, mockResolveSecret);
+
+		expect(Object.keys(result.manifest.loaders).length).toBeGreaterThan(0);
+		expect(Object.keys(result.manifest.sections ?? {}).length).toBeGreaterThan(0);
+	});
+});

package/src/mod.ts

@@ -0,0 +1,154 @@
+/**
+ * Website app module — standard autoconfig contract.
+ *
+ * Exports `configure` following the AppModContract pattern.
+ * Provides SEO defaults, theme, matchers, and flags for the site.
+ */
+
+import type { AppDefinition, ResolveSecretFn } from "@decocms/apps-commerce/app-types";
+import { configureWebsite } from "./client";
+import type { Props as SecretProps } from "./loaders/secret";
+import manifest from "./manifest.gen";
+import type { WebsiteConfig } from "./types";
+
+// -------------------------------------------------------------------------
+// CMS Props (mirrors deco-cx/apps/website/mod.ts)
+// -------------------------------------------------------------------------
+
+export type Script = { src: string };
+
+export interface CacheDirectiveBase {
+	name: string;
+	value: number;
+}
+
+export interface StaleWhileRevalidate extends CacheDirectiveBase {
+	name: "stale-while-revalidate";
+}
+
+export interface MaxAge extends CacheDirectiveBase {
+	name: "max-age";
+}
+
+export type CacheDirective = StaleWhileRevalidate | MaxAge;
+
+export interface Caching {
+	enabled?: boolean;
+	directives?: CacheDirective[];
+}
+
+export interface AbTesting {
+	enabled?: boolean;
+	/** @description The name of the A/B test — appears in cookies */
+	name?: string;
+	matcher?: unknown;
+	/** @description URL to run the A/B test against */
+	urlToRunAgainst?: string;
+	replaces?: unknown[];
+	includeScriptsToHead?: { includes?: Script[] };
+	includeScriptsToBody?: { includes?: Script[] };
+}
+
+/** @titleBy framework */
+export interface FreshFlavor {
+	/** @default fresh */
+	framework: "fresh";
+}
+
+/** @titleBy framework */
+export interface HtmxFlavor {
+	/** @default htmx */
+	framework: "htmx";
+}
+
+/** @title Website */
+export interface Props {
+	/** @title Routes Map */
+	routes?: unknown[];
+
+	/** @title Global Sections */
+	global?: unknown[];
+
+	/** @title Error Page */
+	errorPage?: unknown;
+
+	/** @title Caching configuration of pages */
+	caching?: Caching;
+
+	/**
+	 * @title Global Async Rendering (Deprecated)
+	 * @deprecated true
+	 * @default false
+	 */
+	firstByteThresholdMS?: boolean;
+
+	/** @title Avoid redirecting to editor */
+	avoidRedirectingToEditor?: boolean;
+
+	/** @title AB Testing */
+	abTesting?: AbTesting;
+
+	/** @title Flavor */
+	flavor?: FreshFlavor | HtmxFlavor;
+
+	/** @title Seo */
+	seo?: Record<string, unknown>;
+
+	/** @title Theme */
+	theme?: unknown;
+
+	/** @hide true */
+	sendToClickHouse?: boolean;
+
+	/** @title Default Image Quality */
+	defaultImageQuality?: string;
+
+	/** @title Disable image/asset proxy for this site */
+	disableProxy?: boolean;
+
+	/** @title Whilelist URL Patterns */
+	whilelistURLs?: string[];
+}
+
+/** Alias for site app bridges that extend website Props. */
+export type WebsiteProps = Props;
+
+/** Secret block shape in decofile (website/loaders/secret.ts). */
+export type Secret = SecretProps;
+
+// -------------------------------------------------------------------------
+// State
+// -------------------------------------------------------------------------
+
+export interface WebsiteState {
+	config: WebsiteConfig;
+}
+
+// -------------------------------------------------------------------------
+// Configure
+// -------------------------------------------------------------------------
+
+/**
+ * Configure the Website app from CMS block data.
+ * Always returns an AppDefinition (no required fields).
+ */
+export async function configure(
+	// biome-ignore lint/suspicious/noExplicitAny: block data comes from CMS with no fixed schema
+	block: any,
+	_resolveSecret: ResolveSecretFn,
+): Promise<AppDefinition<WebsiteState>> {
+	const config: WebsiteConfig = {
+		seo: block?.seo,
+	};
+
+	configureWebsite(config);
+
+	return {
+		name: "website",
+		manifest,
+		state: { config },
+	};
+}
+
+/** Placeholder preview for CMS editor. */
+export const preview = undefined;

package/src/sections/Analytics/Analytics.tsx

@@ -0,0 +1,7 @@
+import AnalyticsComponent, { type Props } from "../../components/Analytics";
+
+function Section(props: Props) {
+	return <AnalyticsComponent {...props} />;
+}
+
+export default Section;

package/src/sections/Seo/Seo.tsx

@@ -0,0 +1,14 @@
+import SeoComponent, { type Props as SeoProps } from "../../components/Seo";
+
+type Props = Omit<SeoProps, "jsonLDs">;
+
+/**
+ * @deprecated true
+ * @migrate website/sections/Seo/SeoV2.tsx
+ * @title SEO deprecated
+ */
+function Section(props: Props) {
+	return <SeoComponent {...props} />;
+}
+
+export default Section;

package/src/sections/Seo/SeoV2.tsx

@@ -0,0 +1,58 @@
+import { getWebsiteConfig } from "../../client";
+import SeoComponent, {
+	renderTemplateString,
+	type SEOSection,
+	type Props as SeoProps,
+} from "../../components/Seo";
+import type { WebsiteConfig } from "../../types";
+
+type Props = Pick<
+	SeoProps,
+	"title" | "description" | "type" | "favicon" | "image" | "themeColor" | "noIndexing"
+>;
+
+/**
+ * Loader that merges page-level SEO props with app-level defaults.
+ * When called by the framework, `seo` comes from the app state.
+ * When called standalone (e.g. asJson handler), falls back to the
+ * globalThis-backed singleton set by `configureWebsite()`.
+ */
+export function loader(props: Props, seo?: WebsiteConfig["seo"]) {
+	const resolvedSeo =
+		seo ??
+		(() => {
+			try {
+				return getWebsiteConfig().seo;
+			} catch {
+				return undefined;
+			}
+		})();
+
+	const {
+		titleTemplate = "",
+		descriptionTemplate = "",
+		title: appTitle = "",
+		description: appDescription = "",
+		...seoSiteProps
+	} = resolvedSeo ?? {};
+
+	const { title: _title, description: _description, ...seoProps } = props;
+
+	const title = renderTemplateString(
+		(titleTemplate ?? "").trim().length === 0 ? "%s" : titleTemplate,
+		_title ?? appTitle,
+	);
+
+	const description = renderTemplateString(
+		(descriptionTemplate ?? "").trim().length === 0 ? "%s" : descriptionTemplate,
+		_description ?? appDescription,
+	);
+
+	return { ...seoSiteProps, ...seoProps, title, description };
+}
+
+function Section(props: Props): SEOSection {
+	return <SeoComponent {...props} />;
+}
+
+export default Section;