@decocms/apps 1.1.2 → 1.3.0

package/website/flags/multivariate/page.ts

@@ -0,0 +1,16 @@
+import type { MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+/**
+ * Section type placeholder — the actual Section type is defined by the framework.
+ */
+type Section = unknown;
+
+/**
+ * @title Page Variants
+ */
+export default function PageVariants(
+	props: MultivariateProps<Section[]>,
+): MultivariateFlag<Section[]> {
+	return multivariate(props);
+}

package/website/flags/multivariate/section.ts

@@ -0,0 +1,16 @@
+import type { MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+/**
+ * Section type placeholder — the actual Section type is defined by the framework.
+ */
+type Section = unknown;
+
+/**
+ * @title Section Variants
+ */
+export default function SectionVariants(
+	props: MultivariateProps<Section>,
+): MultivariateFlag<Section> {
+	return multivariate(props);
+}

package/website/flags/multivariate.ts

@@ -0,0 +1 @@
+export { default } from "./multivariate/page";

package/website/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Public API for the website app.
+ */
+
+export { configureWebsite, getWebsiteConfig } from "./client";
+// App
+export { configure } from "./mod";
+
+// Types
+export type {
+	FlagObj,
+	Font,
+	ImageWidget,
+	MatchContext,
+	Matcher,
+	MultivariateFlag,
+	OGType,
+	SeoConfig,
+	Variable,
+	Variant,
+	WebsiteConfig,
+} from "./types";

package/website/loaders/environment.ts

@@ -0,0 +1,45 @@
+/**
+ * @title Environment
+ * @hideOption true
+ */
+export interface Environment {
+	/** @ignore */
+	get: () => string | null;
+}
+
+export interface Props {
+	/**
+	 * @title Environment Value
+	 */
+	value: string;
+	/**
+	 * @title Environment 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;
+}
+
+const getEnvironment = (props: Props): string | null => {
+	const name = props?.name;
+	if (name && process.env[name] !== undefined) {
+		return process.env[name]!;
+	}
+	const value = props?.value;
+	if (!value) {
+		return null;
+	}
+	return value;
+};
+
+/**
+ * @title Environment
+ */
+export default function EnvironmentLoader(props: Props): Environment {
+	const environmentValue = getEnvironment(props);
+	return {
+		get: (): string | null => {
+			return environmentValue;
+		},
+	};
+}

package/website/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/website/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/website/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/website/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/website/manifest.gen.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED by scripts/generate-manifests.ts — DO NOT EDIT
+// This file is checked into source control and updated via: npm run generate:manifests
+import * as loaders_environment from "./loaders/environment";
+import * as loaders_fonts_googleFonts from "./loaders/fonts/googleFonts";
+import * as loaders_fonts_local from "./loaders/fonts/local";
+import * as loaders_secret from "./loaders/secret";
+import * as loaders_secretString from "./loaders/secretString";
+
+const sections_Analytics_Analytics = () => import("./sections/Analytics/Analytics");
+const sections_Seo_Seo = () => import("./sections/Seo/Seo");
+const sections_Seo_SeoV2 = () => import("./sections/Seo/SeoV2");
+
+const manifest = {
+	name: "website",
+	loaders: {
+		"website/loaders/environment": loaders_environment,
+		"website/loaders/fonts/googleFonts": loaders_fonts_googleFonts,
+		"website/loaders/fonts/local": loaders_fonts_local,
+		"website/loaders/secret": loaders_secret,
+		"website/loaders/secretString": loaders_secretString,
+	},
+	actions: {},
+	sections: {
+		"website/sections/Analytics/Analytics": sections_Analytics_Analytics,
+		"website/sections/Seo/Seo": sections_Seo_Seo,
+		"website/sections/Seo/SeoV2": sections_Seo_SeoV2,
+	},
+} as const;
+
+export type Manifest = typeof manifest;
+export default manifest;

package/website/matchers/always.ts

@@ -0,0 +1,12 @@
+/**
+ * @title Always
+ * @description Target all users
+ * @icon eye
+ */
+const MatchAlways = () => {
+	return true;
+};
+
+export default MatchAlways;
+
+export const cacheable = true;

package/website/matchers/cookie.ts

@@ -0,0 +1,33 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title Cookie
+ */
+export interface Props {
+	name: string;
+	value: string;
+}
+
+function parseCookies(headers: Headers): Record<string, string> {
+	const cookieHeader = headers.get("cookie") || "";
+	const cookies: Record<string, string> = {};
+	for (const pair of cookieHeader.split(";")) {
+		const [key, ...rest] = pair.split("=");
+		if (key) {
+			cookies[key.trim()] = rest.join("=").trim();
+		}
+	}
+	return cookies;
+}
+
+/**
+ * @title Cookie
+ * @description Target users that have a specific cookie
+ * @icon cookie
+ */
+const MatchCookie = ({ name, value }: Props, { request }: MatchContext) => {
+	const cookies = parseCookies(request.headers);
+	return cookies[name] === value;
+};
+
+export default MatchCookie;

package/website/matchers/cron.ts

@@ -0,0 +1,109 @@
+/**
+ * @titleBy cron
+ */
+export interface CronProps {
+	/**
+	 * @format cron
+	 * @example * 0-23 * * WED (At every minute past every hour from 0 through 23 on Wednesday.)
+	 * @pattern ^(?:(?:(?:\*|(?:\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*)|[A-Z]+)(?:\/\d+)?)(?:\s+|$)){5}$
+	 */
+	cron: string;
+}
+
+function nowWithMinutePrecision() {
+	const date = new Date();
+	date.setSeconds(0);
+	date.setMilliseconds(0);
+	date.setTime(Math.floor(date.getTime() / 1000) * 1000);
+	return date;
+}
+
+/**
+ * Minimal 5-field cron matcher (minute, hour, day-of-month, month, day-of-week).
+ * Supports: wildcards (*), ranges (1-5), lists (1,3,5), steps (star/2), and
+ * abbreviated weekday names (MON-SUN).
+ */
+function matchesCron(cronExpr: string, date: Date): boolean {
+	const DAY_NAMES: Record<string, number> = {
+		SUN: 0,
+		MON: 1,
+		TUE: 2,
+		WED: 3,
+		THU: 4,
+		FRI: 5,
+		SAT: 6,
+	};
+
+	const fields = cronExpr.trim().split(/\s+/);
+	if (fields.length < 5) return false;
+
+	const values = [
+		date.getMinutes(),
+		date.getHours(),
+		date.getDate(),
+		date.getMonth() + 1,
+		date.getDay(),
+	];
+
+	for (let i = 0; i < 5; i++) {
+		const field = fields[i];
+		const value = values[i];
+
+		if (!matchField(field, value, i === 4)) return false;
+	}
+	return true;
+
+	function matchField(field: string, value: number, isDow: boolean): boolean {
+		return field.split(",").some((part) => matchPart(part, value, isDow));
+	}
+
+	function matchPart(part: string, value: number, isDow: boolean): boolean {
+		const [rangeStr, stepStr] = part.split("/");
+		const step = stepStr ? Number.parseInt(stepStr, 10) : 1;
+
+		if (rangeStr === "*") {
+			return step === 1 || value % step === 0;
+		}
+
+		if (rangeStr.includes("-")) {
+			const [startStr, endStr] = rangeStr.split("-");
+			const start = parseVal(startStr, isDow);
+			const end = parseVal(endStr, isDow);
+			if (start <= end) {
+				if (value < start || value > end) return false;
+			} else {
+				// wrap-around (e.g. FRI-MON)
+				if (value < start && value > end) return false;
+			}
+			return step === 1 || (value - start + 100) % step === 0;
+		}
+
+		return parseVal(rangeStr, isDow) === value;
+	}
+
+	function parseVal(s: string, isDow: boolean): number {
+		if (isDow) {
+			const upper = s.toUpperCase();
+			if (upper in DAY_NAMES) return DAY_NAMES[upper];
+			// Cron allows 7 as alias for Sunday (0)
+			const n = Number.parseInt(s, 10);
+			return n === 7 ? 0 : n;
+		}
+		return Number.parseInt(s, 10);
+	}
+}
+
+/**
+ * @title Cron
+ * @description Target users with precision using recurring schedules
+ * @icon refresh
+ */
+const MatchCron = (props: CronProps) => {
+	if (!props?.cron) {
+		return false;
+	}
+	const minutePrecision = nowWithMinutePrecision();
+	return matchesCron(props.cron, minutePrecision);
+};
+
+export default MatchCron;

package/website/matchers/date.ts

@@ -0,0 +1,29 @@
+/**
+ * @titleBy start
+ */
+export interface Props {
+	/**
+	 * @format date-time
+	 */
+	start?: string;
+	/**
+	 * @format date-time
+	 */
+	end?: string;
+}
+
+/**
+ * @title Date and Time
+ * @description Target users based on specific dates or date ranges, including specific times
+ * @icon calendar-event
+ */
+const MatchDate = (props: Props) => {
+	const now = new Date();
+	const start = props.start ? now > new Date(props.start) : true;
+	const end = props.end ? now < new Date(props.end) : true;
+	return start && end;
+};
+
+export default MatchDate;
+
+export const cacheable = true;

package/website/matchers/device.ts

@@ -0,0 +1,40 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title {{{.}}}
+ */
+export type Device = "mobile" | "tablet" | "desktop";
+
+/**
+ * @title {{#mobile}}Mobile{{/mobile}} {{#tablet}}Tablet{{/tablet}} {{#desktop}}Desktop{{/desktop}}
+ */
+export interface Props {
+	/** @title Mobile */
+	mobile?: boolean;
+	/** @title Tablet */
+	tablet?: boolean;
+	/** @title Desktop */
+	desktop?: boolean;
+}
+
+// backwards compatibility
+interface OldProps {
+	devices: Device[];
+}
+
+/**
+ * @title Device
+ * @description Target users based on their device type, such as desktop, tablet, or mobile
+ * @icon device-mobile
+ */
+const MatchDevice = ({ mobile, tablet, desktop, ...rest }: Props, { device }: MatchContext) => {
+	const devices = (rest as unknown as OldProps)?.devices ?? [];
+	if (mobile) devices.push("mobile");
+	if (tablet) devices.push("tablet");
+	if (desktop) devices.push("desktop");
+	return devices.includes(device);
+};
+
+export default MatchDevice;
+
+export const cacheable = true;

package/website/matchers/environment.ts

@@ -0,0 +1,21 @@
+/**
+ * @title {{{environment}}}
+ */
+export interface Props {
+	environment: "production" | "development";
+}
+
+/**
+ * @title Environment
+ * @description Target users based from where they are accessing your site (development, testing, or production)
+ * @icon code
+ */
+const MatchEnvironment = ({ environment }: Props) => {
+	const isProduction = process.env.NODE_ENV === "production";
+
+	return environment === "production" ? isProduction : !isProduction;
+};
+
+export default MatchEnvironment;
+
+export const cacheable = true;

package/website/matchers/host.ts

@@ -0,0 +1,25 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title {{{includes}}} {{{match}}}
+ */
+export interface Props {
+	includes?: string;
+	match?: string;
+}
+
+/**
+ * @title Host
+ * @description Target users based on the domain or subdomain they are accessing your site from
+ * @icon world-www
+ */
+const MatchHost = ({ includes, match }: Props, { request }: MatchContext) => {
+	const host = request.headers.get("host") || request.headers.get("origin") || "";
+	const regexMatch = match ? new RegExp(match).test(host) : true;
+	const includesFound = includes ? host.includes(includes) : true;
+	return regexMatch && includesFound;
+};
+
+export default MatchHost;
+
+export const cacheable = true;