@websline/cms-view-utils 1.0.6 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "type": "module",
   "files": [
     "src",
@@ -16,12 +16,13 @@
     "./dist/*": "./dist/*"
   },
   "dependencies": {
-    "jsonwebtoken": "^9.0.3"
+    "jsonwebtoken": "^9.0.3",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "eslint": "^10.3.0",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.17.1",
     "globals": "^17.6.0",

package/src/components/AddBlockPlaceholder.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { twMerge as tw } from "tailwind-merge";
 	import { EVENTS, notifyCMS } from "../utils/notify.js";
 
 	let {
@@ -52,7 +53,10 @@
 
 <div>
 	<button
-		class={`group relative flex min-h-32 w-full cursor-pointer items-center justify-center rounded-lg transition-all duration-300 ${className}`}
+		class={tw(
+			"group relative flex min-h-32 w-full cursor-pointer items-center justify-center rounded-lg transition-all duration-300",
+			className,
+		)}
 		style={`--block-color: ${color}; --block-hover-color: ${hoverColor}; --block-hover-border-color: ${hoverBorderColor}; --block-text: ${textColor}; --block-icon-background: ${iconBackgroundColor}; --block-icon-color: ${iconColor}; --sublabel-color: ${sublabelColor};`}
 		onclick={handleClick}>
 		<div

package/src/components/BlockWrapper.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { twMerge as tw } from "tailwind-merge";
+
 	let { block, children, spacingValues = {} } = $props();
 
 	const defaultSpacingValues = {
@@ -32,13 +34,6 @@
 	let spacingBottom = $derived(block?.meta?.spacing?.bottom);
 	let spacingTop = $derived(block?.meta?.spacing?.top);
 
-	let spacingClass = $derived(
-		[
-			spacingMap.top[spacingTop] ?? spacingMap.top.none,
-			spacingMap.bottom[spacingBottom] ?? spacingMap.bottom.none,
-		].join(" "),
-	);
-
 	let backgroundColor = $derived(block?.meta?.background);
 
 	let style = $derived(
@@ -46,6 +41,12 @@
 	);
 </script>
 
-<div data-cms-block-wrapper class={`${spacingClass}`} {style}>
+<div
+	data-cms-block-wrapper
+	class={tw(
+		spacingMap.top[spacingTop] ?? spacingMap.top.none,
+		spacingMap.bottom[spacingBottom] ?? spacingMap.bottom.none,
+	)}
+	{style}>
 	{@render children?.()}
 </div>

package/src/components/EditableBlock.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { onMount } from "svelte";
 	import { EVENTS, notifyCMS } from "../utils/notify.js";
 	import { CMS_ACTIONS } from "../utils/cmsActions.js";
 	import Text from "./skeleton/Text.svelte";
@@ -19,6 +18,7 @@
 	} = $props();
 
 	let calcBarPosition = $derived.by(() => {
+		if (isSticky) return "inside";
 		if (typeof barPosition === "string") return barPosition;
 		if (position === 0) return "inside";
 
@@ -84,8 +84,20 @@
 	let isActive = $state(false);
 	let skeleton = $derived(block?.meta?.emptyOptions?.skeleton || "text");
 
+	let ref = $state();
+	let isSticky = $state(false);
 	let toolbarVisible = $derived(isHovered || isActive);
 
+	const handleScroll = () => {
+		if (!toolbarVisible || !ref) {
+			isSticky = false;
+			return;
+		}
+
+		const { top, bottom } = ref.getBoundingClientRect();
+		isSticky = bottom >= 40 && ((top < 0 && "full") || (top < 40 && "pre")); // 40 is the height of the toolbar
+	};
+
 	let activeTooltip = $state(null);
 	let tooltipLeaveTimer;
 
@@ -118,21 +130,14 @@
 		isActive = draftBlockUuid === block.uuid;
 	};
 
-	onMount(() => {
-		window.addEventListener("message", handler);
+	let isOutside = $derived(calcBarPosition === "outside");
 
-		return () => {
-			window.removeEventListener("message", handler);
-		};
+	let containerShape = $derived.by(() => {
+		if (isOutside) return "absolute rounded-t-lg -top-8";
+		return `rounded-b-lg top-1.5 ${isSticky === "full" ? "fixed" : "absolute"}`;
 	});
 
-	const isOutside = $derived(calcBarPosition === "outside");
-
-	const containerShape = $derived(
-		isOutside ? "rounded-t-lg -top-8" : "rounded-b-lg top-1.5",
-	);
-
-	const cornerEdges = $derived(
+	let cornerEdges = $derived(
 		isOutside
 			? "before:bottom-1 before:-left-4 before:shadow-[6px_6px_0_0_var(--block-color)] " +
 					"after:bottom-1 after:-right-4 after:shadow-[-6px_6px_0_0_var(--block-color)]"
@@ -141,7 +146,7 @@
 	);
 
 	let tooltipClasses = $derived(
-		`tooltip absolute ${position === 0 ? "-top-9" : "-top-7.5"} bg-[var(--block-color)] leading-none text-xs p-1.5 rounded-tl rounded-tr left-0 whitespace-nowrap transition-opacity duration-150`,
+		`tooltip absolute ${isOutside ? "-top-8" : "top-8"} bg-[var(--block-color)] leading-none text-xs p-1.5 rounded left-1/2 -translate-x-1/2 whitespace-nowrap transition-opacity duration-150`,
 	);
 
 	const labels = {
@@ -170,7 +175,10 @@
 	let t = $derived(labels[locale] ?? labels.de);
 </script>
 
+<svelte:window onmessage={handler} onscroll={handleScroll} />
+
 <div
+	bind:this={ref}
 	class="relative min-h-13"
 	style={`--block-color: ${color}; --block-text: ${textColor};`}
 	data-cms-block-id={block.uuid}
@@ -187,9 +195,17 @@
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
 	</div>
+	{#if isSticky === "full"}
+		<div
+			class="pointer-events-none fixed inset-x-0 top-0 z-9998 h-1.5 transition-opacity duration-100"
+			style="background-color: var(--block-color)"
+			class:opacity-100={toolbarVisible}
+			class:opacity-0={!toolbarVisible}>
+		</div>
+	{/if}
 
 	<div
-		class="absolute left-1/2 z-9999 flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 px-3 transition-opacity duration-100 before:absolute before:h-4 before:w-4 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:h-4 after:w-4 after:rounded-full after:bg-transparent after:content-[''] {containerShape} {cornerEdges}"
+		class="left-1/2 z-9999 flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 px-3 transition-opacity duration-100 before:absolute before:h-4 before:w-4 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:h-4 after:w-4 after:rounded-full after:bg-transparent after:content-[''] {containerShape} {cornerEdges}"
 		style="background: var(--block-color); color: var(--block-text);"
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>

package/src/components/PageContent.svelte

@@ -1,9 +1,9 @@
 <script>
+	import { twMerge as tw } from "tailwind-merge";
+
 	let { children, class: className } = $props();
 </script>
 
-<section
-	class={`grid grid-cols-1${className ? ` ${className}` : ""}`}
-	data-cms-page-content>
+<section class={tw("grid grid-cols-1", className)} data-cms-page-content>
 	{@render children?.()}
 </section>

package/src/components/Picture.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { twMerge as tw } from "tailwind-merge";
+
 	let {
 		class: className,
 		decoding = "async",
@@ -82,6 +84,6 @@
 			height={data.fallbackFormat.height}
 			{loading}
 			{decoding}
-			class={`h-full w-full object-cover${className ? ` ${className}` : ""}`} />
+			class={tw("h-full w-full object-cover", className)} />
 	</picture>
 {/if}

package/src/middleware/createCmsMiddleware.js

@@ -0,0 +1,59 @@
+import { withRequestFilter } from "./withRequestFilter.js";
+import { withCmsFetch } from "./withCmsFetch.js";
+
+const defaultErrorHandler = (context, error, wrap) => {
+	const status = error?.status ?? 500;
+	const target = [401, 404].includes(status) ? `/errors/${status}` : "/errors/500";
+
+	return wrap(context, () => context.rewrite(target));
+};
+
+/**
+ * Composes the standard CMS middleware pipeline.
+ *
+ * @param {object} [options]
+ * @param {(context: import("astro").APIContext) => boolean} [options.shouldSkip] - filter that decides if request bypasses the pipeline
+ * @param {(context: import("astro").APIContext) => Promise<void>} [options.fetch] - CMS fetch step
+ * @param {(context: import("astro").APIContext, handler: () => any) => Promise<Response>} [options.paraglide] - i18n wrapper (optional)
+ * @param {(context: import("astro").APIContext) => Promise<Response | void>} [options.beforeFetch] - hook before CMS fetch
+ * @param {(context: import("astro").APIContext) => Promise<Response | void>} [options.afterFetch] - hook after CMS fetch
+ * @param {(context: import("astro").APIContext, error: any, wrap: Function) => Promise<Response>} [options.onError] - custom error handler
+ */
+const createCmsMiddleware = (options = {}) => {
+	const {
+		shouldSkip = withRequestFilter(),
+		fetch = withCmsFetch(),
+		paraglide,
+		beforeFetch,
+		afterFetch,
+		onError = defaultErrorHandler,
+	} = options;
+
+	const wrap = paraglide ?? ((context, handler) => handler());
+
+	return async (context, next) => {
+		if (shouldSkip(context)) {
+			return next();
+		}
+
+		try {
+			if (beforeFetch) {
+				const earlyResponse = await beforeFetch(context);
+				if (earlyResponse instanceof Response) return earlyResponse;
+			}
+
+			await fetch(context);
+
+			if (afterFetch) {
+				const earlyResponse = await afterFetch(context);
+				if (earlyResponse instanceof Response) return earlyResponse;
+			}
+
+			return wrap(context, () => next());
+		} catch (error) {
+			return onError(context, error, wrap);
+		}
+	};
+};
+
+export { createCmsMiddleware };

package/src/middleware/withCmsFetch.js

@@ -0,0 +1,11 @@
+import { fetchPage } from "../utils/fetchPage.js";
+
+/**
+ * Returns the CMS page fetch function for use in createCmsMiddleware.
+ * Throws if fetch fails — the wrapping middleware should handle errors.
+ *
+ * @returns {(context: import("astro").APIContext) => Promise<void>}
+ */
+const withCmsFetch = () => fetchPage;
+
+export { withCmsFetch };

package/src/middleware/withParaglide.js

@@ -0,0 +1,65 @@
+/**
+ * Wraps a handler with paraglide locale resolution.
+ *
+ * Locale priority:
+ * 1. CMS-provided locale (configurable via `getCmsLocale`)
+ * 2. First URL segment, if it matches a known locale (for error pages)
+ * 3. Paraglide baseLocale (handled by paraglide's strategy chain)
+ *
+ * The resolved locale is:
+ * - injected as a request header for paraglide's custom strategy
+ * - set as a cookie on the response for client-side hydration consistency
+ *
+ * @param {object} options
+ * @param {Function} options.paraglideMiddleware - paraglide's server middleware
+ * @param {string[]} options.locales - list of supported locale codes
+ * @param {(context: import("astro").APIContext) => string | undefined} [options.getCmsLocale] - extracts the CMS locale from context
+ * @param {string} [options.cookieName="PARAGLIDE_LOCALE"] - name of the locale cookie
+ * @param {string} [options.headerName="x-cms-locale"] - name of the header injected for the custom strategy
+ */
+
+const withParaglide = ({
+	paraglideMiddleware,
+	locales,
+	getCmsLocale = (context) => context?.locals?.seo?.locale,
+	cookieName = "PARAGLIDE_LOCALE",
+	headerName = "x-cms-locale",
+}) => {
+	return async (context, handler) => {
+		const locale = resolveLocale(context, locales, getCmsLocale);
+
+		let request = context.request;
+		if (locale) {
+			const headers = new Headers(request.headers);
+			headers.set(headerName, locale);
+			request = new Request(request, { headers });
+		}
+
+		const response = await paraglideMiddleware(request, () => handler());
+
+		if (locale && response instanceof Response) {
+			response.headers.append(
+				"Set-Cookie",
+				`${cookieName}=${locale}; Path=/; SameSite=Lax`,
+			);
+		}
+
+		return response;
+	};
+};
+
+const resolveLocale = (context, locales, getCmsLocale) => {
+	const cmsLocale = getCmsLocale(context);
+	if (cmsLocale && locales.includes(cmsLocale)) {
+		return cmsLocale;
+	}
+
+	const firstSegment = context.url.pathname.split("/")[1];
+	if (locales.includes(firstSegment)) {
+		return firstSegment;
+	}
+
+	return undefined;
+};
+
+export { withParaglide };

package/src/middleware/withRequestFilter.js

@@ -0,0 +1,37 @@
+/**
+ * Default request filter — skips non-HTML requests, internal Astro routes,
+ * error routes and asset paths.
+ *
+ * @param {object} [options]
+ * @param {string[]} [options.additionalExcludePaths] - extra path prefixes to skip
+ * @param {(context: import("astro").APIContext) => boolean} [options.customFilter] - additional skip predicate
+ */
+
+const withRequestFilter = (options = {}) => {
+	const { additionalExcludePaths = [], customFilter } = options;
+
+	return (context) => {
+		const { request, url } = context;
+		const accept = request.headers.get("accept") || "";
+
+		const isHtmlRequest = accept.includes("text/html");
+		const isAstroInternal = url.pathname.startsWith("/_astro");
+		const isErrorRoute = url.pathname.startsWith("/errors/");
+		const hasFileExtension = /\.[a-zA-Z0-9]+$/.test(url.pathname);
+		const isExcludedPath = additionalExcludePaths.some((p) =>
+			url.pathname.startsWith(p),
+		);
+
+		return (
+			request.method !== "GET" ||
+			!isHtmlRequest ||
+			isAstroInternal ||
+			isErrorRoute ||
+			hasFileExtension ||
+			isExcludedPath ||
+			customFilter?.(context) === true
+		);
+	};
+};
+
+export { withRequestFilter };

package/src/server.js

@@ -1 +1,8 @@
 export { fetchPage } from "./utils/fetchPage.js";
+
+export { createCmsMiddleware } from "./middleware/createCmsMiddleware.js";
+export { withRequestFilter } from "./middleware/withRequestFilter.js";
+export { withCmsFetch } from "./middleware/withCmsFetch.js";
+export { withParaglide } from "./middleware/withParaglide.js";
+export { createSitemapHandler } from "./utils/sitemapHandler.js";
+export { createRobotsHandler } from "./utils/robotsHandler.js";

package/src/utils/fetchSitemap.js

@@ -0,0 +1,20 @@
+import { buildCmsSitemapUrl } from "./urlResolver.js";
+import { buildCmsHeaders } from "./headers.js";
+import { HttpError } from "./errors.js";
+
+const fetchSitemap = async (request) => {
+	const cmsUrl = buildCmsSitemapUrl();
+
+	const response = await fetch(cmsUrl, {
+		method: "GET",
+		headers: buildCmsHeaders(request),
+	});
+
+	if (!response.ok) {
+		throw new HttpError(response.status, "CMS Error");
+	}
+
+	return response.json();
+};
+
+export { fetchSitemap };

package/src/utils/robotsHandler.js

@@ -0,0 +1,40 @@
+const buildRobotsTxt = ({ siteUrl, allowIndexing }) => {
+	if (!allowIndexing) {
+		return `User-agent: *
+Disallow: /
+`;
+	}
+
+	return `User-agent: *
+Allow: /
+
+Sitemap: ${siteUrl}/sitemap.xml
+`;
+};
+
+const resolveSiteUrl = (request) => {
+	const url = new URL(request.url);
+	return `${url.protocol}//${url.host}`;
+};
+
+// TODO: replace with CMS setting once available
+const resolveAllowIndexing = () => true;
+
+const createRobotsHandler =
+	() =>
+	async ({ request }) => {
+		const siteUrl = resolveSiteUrl(request);
+		const allowIndexing = resolveAllowIndexing();
+
+		const body = buildRobotsTxt({ siteUrl, allowIndexing });
+
+		return new Response(body, {
+			status: 200,
+			headers: {
+				"Content-Type": "text/plain; charset=utf-8",
+				"Cache-Control": "public, max-age=3600, s-maxage=3600",
+			},
+		});
+	};
+
+export { createRobotsHandler };

package/src/utils/sitemapHandler.js

@@ -0,0 +1,36 @@
+import { fetchSitemap } from "./fetchSitemap.js";
+import { buildSitemapXml } from "./sitemapXml.js";
+import { HttpError } from "./errors.js";
+
+const resolveSiteUrl = (request) => {
+	const url = new URL(request.url);
+	return `${url.protocol}//${url.host}`;
+};
+
+const createSitemapHandler =
+	() =>
+	async ({ request }) => {
+		const siteUrl = resolveSiteUrl(request);
+
+		try {
+			const entries = await fetchSitemap(request);
+			const xml = buildSitemapXml(entries, siteUrl);
+
+			return new Response(xml, {
+				status: 200,
+				headers: {
+					"Content-Type": "application/xml; charset=utf-8",
+					"Cache-Control": "public, max-age=3600, s-maxage=3600",
+				},
+			});
+		} catch (error) {
+			if (error instanceof HttpError) {
+				return new Response(`Sitemap error: ${error.message}`, {
+					status: error.status,
+				});
+			}
+			throw error;
+		}
+	};
+
+export { createSitemapHandler };

package/src/utils/sitemapXml.js

@@ -0,0 +1,54 @@
+const escapeXml = (value) =>
+	String(value).replace(/[<>&'"]/g, (char) => {
+		switch (char) {
+			case "<":
+				return "&lt;";
+			case ">":
+				return "&gt;";
+			case "&":
+				return "&amp;";
+			case "'":
+				return "&apos;";
+			case '"':
+				return "&quot;";
+			default:
+				return char;
+		}
+	});
+
+const encodeUrl = (url) => escapeXml(encodeURI(url));
+
+const formatLastmod = (timestamp) => {
+	// Strip milliseconds: "2026-05-07T12:19:58.487Z" → "2026-05-07T12:19:58Z"
+	return timestamp.replace(/\.\d+Z$/, "Z");
+};
+
+const buildUrlBlock = (entry, siteUrl) => {
+	const loc = encodeUrl(`${siteUrl}${entry.path}`);
+	const lastmod = entry.updatedAt
+		? `\n    <lastmod>${formatLastmod(entry.updatedAt)}</lastmod>`
+		: "";
+
+	const alternates = (entry.alternates ?? [])
+		.map(
+			(alt) =>
+				`\n    <xhtml:link rel="alternate" hreflang="${escapeXml(alt.locale)}" href="${encodeUrl(`${siteUrl}${alt.path}`)}" />`,
+		)
+		.join("");
+
+	return `  <url>
+    <loc>${loc}</loc>${lastmod}${alternates}
+  </url>`;
+};
+
+const buildSitemapXml = (entries, siteUrl) => {
+	const urls = entries.map((entry) => buildUrlBlock(entry, siteUrl)).join("\n");
+
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:xhtml="http://www.w3.org/1999/xhtml">
+${urls}
+</urlset>`;
+};
+
+export { buildSitemapXml };

package/src/utils/urlResolver.js

@@ -10,4 +10,10 @@ const buildCmsPageUrl = ({ draftUuid, path }) => {
 	return `${base}/api/public/pages${normalizedPath}`;
 };
 
-export { buildCmsPageUrl };
+const buildCmsSitemapUrl = () => {
+	const base = import.meta.env.CMS_URL;
+
+	return `${base}/api/public/sitemap`;
+};
+
+export { buildCmsPageUrl, buildCmsSitemapUrl };