Add Drupal headless stack with Next.js frontend

- Add Next.js frontend service (nextjs) with Dockerfile and source
- Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service
- Add docker-compose.override.yml.disabled for dev hot-reload
- Add install-headless-modules.sh for OAuth/JSON:API module setup
- Add README.md with full setup and configuration guide
- Update nginx/Dockerfile and nginx.conf.template for cms. subdomain
- Update drupal/Dockerfile PHP-FPM build args
- Gitignore **/.vscode/ to prevent IDE workspace files from being tracked

drupal/nextjs/app/imprint/page.tsx

@@ -0,0 +1,106 @@
+import type { Metadata } from "next"
+import { ObfuscatedAddress } from "@/components/obfuscated-address"
+import { ObfuscatedEmail } from "@/components/obfuscated-email"
+import { drupal } from "@/lib/drupal"
+
+const drupalBaseUrl = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL ?? ""
+ 
+
+export const dynamic = "force-dynamic"
+
+export const metadata: Metadata = {
+  title: "Imprint",
+  description: "Legal notice and imprint for nasarek.dev",
+}
+
+const FALLBACK_TITLE = "Imprint"
+
+const BODY_STYLES = "[&_h2]:mb-4 [&_h2]:mt-8 [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-slate-900 [&_p]:mb-4 [&_p]:text-slate-700 [&_a]:text-emerald-600 [&_a]:underline hover:[&_a]:text-emerald-500"
+
+/**
+ * Splits the CMS body HTML at {address} and {email} placeholders and renders
+ * the obfuscated components in their place so bots cannot harvest the data.
+ */
+function ImprintBody({ html }: { html: string }) {
+  const parts = html.split(/(<p>\{(?:address|email)\}<\/p>)/g)
+
+  return (
+    <div className={BODY_STYLES}>
+      {parts.map((part, i) => {
+        if (part === "<p>{address}</p>") return <ObfuscatedAddress key={i} />
+        if (part === "<p>{email}</p>") return <p key={i}><ObfuscatedEmail /></p>
+        if (!part) return null
+        return <div key={i} dangerouslySetInnerHTML={{ __html: part }} />
+      })}
+    </div>
+  )
+}
+
+async function getImprintPageContent(): Promise<{
+  title: string
+  body: string | null
+}> {
+  if (!drupalBaseUrl) {
+    return {
+      title: FALLBACK_TITLE,
+      body: null,
+    }
+  }
+
+  try {
+    const translatedPath = await drupal.translatePath("/imprint", {
+      withAuth: true,
+      next: { revalidate: 60 },
+    })
+    if (!translatedPath?.jsonapi?.resourceName || !translatedPath?.entity?.uuid) {
+      return { title: FALLBACK_TITLE, body: null }
+    }
+
+    const resourceType = translatedPath.jsonapi.resourceName
+    const raw = await drupal.getResource(
+      resourceType,
+      translatedPath.entity.uuid,
+      { withAuth: true, next: { revalidate: 60 }, deserialize: false }
+    )
+    const rawData = (raw as { data?: Record<string, unknown> })?.data
+    if (!rawData) {
+      return { title: FALLBACK_TITLE, body: null }
+    }
+
+    const title = (rawData.title as string) ?? FALLBACK_TITLE
+    const bodyObj = rawData.body
+    const bodyText =
+      typeof bodyObj === "string"
+        ? bodyObj
+        : (bodyObj as { processed?: string; value?: string })?.processed ??
+          (bodyObj as { processed?: string; value?: string })?.value ??
+          ""
+
+    return {
+      title,
+      body: bodyText || null,
+    }
+  } catch (error) {
+    if ((error as Error).name !== "AbortError") {
+      console.warn("[Imprint] CMS unreachable:", (error as Error).message)
+    }
+    return { title: FALLBACK_TITLE, body: null }
+  }
+}
+
+export default async function ImprintPage() {
+  const { title, body } = await getImprintPageContent()
+  return (
+    <section className="imprint animate-fade-in-on-load pb-10" aria-labelledby="imprint-heading">
+      <div className="imprint-header mb-8 text-center">
+        <h1 className="imprint-title mb-3 font-bold tracking-tight text-slate-900"
+          style={{ fontSize: "var(--fluid-section-title)" }}>
+          {title}
+        </h1>
+      </div>  
+      <div className="imprint-content mx-auto max-w-4xl">
+        {body && <ImprintBody html={body} />}
+      </div>
+    </section>
+  )
+}