feat(preview): implement preview mode for content management

- Added support for a preview mode in the CMS, allowing draft content to be viewed without being indexed.
- Updated hooks and server logic to handle preview parameters, adjusting cache control and robots tags accordingly.
- Enhanced layout to display a preview notification when in preview mode, improving user experience for content editors.

src/routes/+layout.svelte

@@ -21,6 +21,7 @@
     socialImage?: string;
     robots?: string;
     keywords?: string;
+    preview?: boolean;
     jsonLd?: Record<string, unknown> | Record<string, unknown>[];
     breadcrumbItems?: { href?: string; label: string }[];
     topBanner?: {
@@ -248,6 +249,26 @@
     class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:bg-white focus:px-3 focus:py-2 focus:shadow focus:outline focus:outline-2 focus:outline-wald-600 focus:rounded-sm"
   >Zum Inhalt springen</a>
   <div class="flex min-h-screen flex-col text-zinc-900">
+    {#if pageData?.preview}
+      <div
+        class="sticky top-0 z-[90] w-full bg-amber-500 text-black shadow-sm"
+        role="status"
+        aria-live="polite"
+      >
+        <div class="container-custom flex items-center justify-between gap-3 py-1.5 text-sm">
+          <span class="font-semibold">
+            Preview-Modus — Draft sichtbar (nicht indexiert)
+          </span>
+          <a
+            href={$page.url.pathname}
+            class="underline hover:no-underline"
+            rel="nofollow"
+          >
+            Preview verlassen
+          </a>
+        </div>
+      </div>
+    {/if}
     <Header
       links={data.headerLinks}
       socialLinks={data.socialLinks}

src/routes/[...slug]/+page.server.ts

@@ -23,13 +23,22 @@ function focalToCss(focal: { x: number; y: number } | undefined): string | null
   return `${(focal.x * 100).toFixed(2)}% ${(focal.y * 100).toFixed(2)}%`;
 }
 
-export const load: PageServerLoad = async ({ params, locals, fetch }) => {
+export const load: PageServerLoad = async ({ params, locals, fetch, url, setHeaders }) => {
   const { slug } = params;
   const translations = locals.translations ?? {};
+  const preview = url.searchParams.get('preview') ?? undefined;
+
+  if (preview) {
+    setHeaders({
+      'cache-control': 'private, no-store, max-age=0',
+      'x-robots-tag': 'noindex, nofollow',
+    });
+  }
 
   const page = await getPageBySlug(slug, {
     locale: 'de',
     resolve: PAGE_RESOLVE,
+    preview,
   });
 
   if (!page) {
@@ -78,6 +87,7 @@ export const load: PageServerLoad = async ({ params, locals, fetch }) => {
   return {
     page,
     translations,
+    preview: !!preview,
     seoTitle: page.seoTitle ?? page.headline ?? page.linkName ?? slug,
     seoDescription: page.seoDescription ?? page.subheadline ?? '',
     robots: (page as { seoMetaRobots?: string }).seoMetaRobots ?? undefined,

src/routes/post/[slug]/+page.server.ts

@@ -20,13 +20,22 @@ import { marked } from 'marked';
 
 marked.setOptions({ gfm: true });
 
-export const load: PageServerLoad = async ({ params, locals, url }) => {
+export const load: PageServerLoad = async ({ params, locals, url, setHeaders }) => {
   const { slug } = params;
   const translations = locals.translations ?? {};
+  const preview = url.searchParams.get('preview') ?? undefined;
+
+  if (preview) {
+    setHeaders({
+      'cache-control': 'private, no-store, max-age=0',
+      'x-robots-tag': 'noindex, nofollow',
+    });
+  }
 
   const post = await getPostBySlug(slug, {
     locale: 'de',
     resolve: POST_RESOLVE,
+    preview,
   });
 
   if (!post) {
@@ -202,6 +211,7 @@ export const load: PageServerLoad = async ({ params, locals, url }) => {
 
   return {
     post,
+    preview: !!preview,
     postImageUrl,
     rawPostImageUrl: postImageField?.url ?? null,
     postImageFocal: postImageField?.focal ?? null,