@merkle-open/magnolia-headless-frontend-nextjs 0.0.1

package/README.md

@@ -0,0 +1,76 @@
+# Magnolia NextJs Headless Frontend
+- [Templates](./src/templates/_README.md)
+- [Proxy/Middleware](./src/middleware/_README.md)
+- [Config](./src/config/_README.md)
+- [API](./src/api/_README.md)
+- [Dynamic-Page](./README_dynamic-page.md)
+
+## setup
+- Add the following dependencies to your package.json
+  - `@merkle-open/magnolia-headless-frontend-nextjs`
+  - [`tsyringe`](https://github.com/Microsoft/tsyringe)
+  - `reflect-metadata`
+  - `next`
+  - `react`
+  - `react-dom`
+- Configure tsconfig.json to include the following settings (`./tsconfig.json`)
+  ```json
+  {
+    "compilerOptions": {
+      "experimentalDecorators": true,
+      "emitDecoratorMetadata": true
+    },
+    "include": [
+      "node_modules/@merkle-open/magnolia-headless-frontend-nextjs"
+    ]
+  }
+  ```
+- Configure the [middleware composer](./src/middleware/_README.md#configure-middleware-composer)
+- Implement and bind the interfaces specified [here](./src/config/_README.md) 
+- Implement API endpoints specified [here](./src/api/_README.md)
+- Configure [instrumentation.ts](https://nextjs.org/docs/app/guides/instrumentation#importing-files-with-side-effects) (`./instrumentation.ts`)
+  ```typescript
+  export async function register() {
+      await import('reflect-metadata');
+  }
+  ```
+- Setup [dynamic page](./README_dynamic-page.md)
+- Setup Dependencies (`./Dependencies.ts`)
+  ```typescript
+  import 'reflect-metadata';
+  import { container } from 'tsyringe';
+  import { register as registerOss } from '@merkle-open/magnolia-headless-frontend-nextjs';
+  import registerConfigs from './config/_Dependencies.ts';
+  
+  registerConfigs(container);
+  registerOss(container);
+  
+  export { container };
+  ```
+- Setup next.config.ts (`./next.config.ts`)
+  ```typescript
+  import type { NextConfig } from 'next';
+  import type { Rewrite } from 'next/dist/lib/load-custom-routes';
+  
+  const nextConfig: NextConfig = {
+      transpilePackages: ['@merkle-open/magnolia-headless-frontend-nextjs'],
+      async rewrites(): Promise<Rewrite[]> {
+          return [
+              {
+                  source: '/robots.txt',
+                  destination: '/api/robots.txt',
+              },
+              {
+                  source: '/:language([a-z]{2})/sitemap/:type',
+                  destination: '/api/:language/sitemap/:type',
+              },
+              {
+                  source: '/:language([a-z]{2})/:path*',
+                  destination: '/dynamic/:language/:path*',
+              },
+          ];
+      },
+      ...
+  };
+  export default nextConfig;
+  ```

package/index.ts

@@ -0,0 +1 @@
+export * from './src/Index.ts';

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@merkle-open/magnolia-headless-frontend-nextjs",
+  "version": "0.0.1",
+  "description": "Magnolia headless frontend nextJs",
+  "license": "MIT",
+  "author": "Merkle Inc.",
+  "private": false,
+  "main": "index.ts",
+  "module": "index.ts",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "files": [
+    "README.md",
+    "index.ts",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/merkle-open/magnolia-headless.git"
+  },
+  "scripts": {
+    "generate-oss-magnoliaConfig": "npx tsx src/scripts/generate-magnolia-config.ts src/templates src/templates",
+    "build": "tsc --build",
+    "clean": "tsc --build --clean",
+    "format": "prettier --write src/**",
+    "lint": "eslint src/**",
+    "prepare": "cd .. && husky magnolia-headless-frontend-nextjs/.husky"
+  },
+  "dependencies": {
+    "@magnolia/react-editor": "2.1.1"
+  },
+  "peerDependencies": {
+    "next": "^16.1",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "reflect-metadata": "^0.2",
+    "tsyringe": "^4.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.3",
+    "@types/node": "^25.0.10",
+    "@types/react": "19.2.10",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "eslint": "^9.39.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
+    "tsx": "^4.21.0",
+    "typescript-eslint": "^8.56.1",
+    "jiti": "^2.6.1"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,md,mdx,html,css}": "npm run format"
+  }
+}

package/src/Constants.ts

@@ -0,0 +1 @@
+export const TOKEN_PREFIX = 'com.merkle.oss.magnolia.headless.';

package/src/Dependencies.ts

@@ -0,0 +1,14 @@
+import { DependencyContainer } from 'tsyringe';
+import registerApis from './api/_Dependencies.ts';
+import registerDynamicPages from './dynamic-page/_Dependencies.ts';
+import registerHelpers from './helper/_Dependencies.ts';
+import registerMiddlewares from './middleware/_Dependencies.ts';
+import registerTemplates from './templates/_Dependencies.ts';
+
+export function register(container: DependencyContainer) {
+	registerApis(container);
+	registerDynamicPages(container);
+	registerHelpers(container);
+	registerMiddlewares(container);
+	registerTemplates(container);
+}

package/src/Index.ts

@@ -0,0 +1,8 @@
+export * from './api/_Index.ts';
+export * from './dynamic-page/_Index.ts';
+export * from './config/_Index.ts';
+export * from './helper/_Index.ts';
+export * from './middleware/_Index.ts';
+export * from './templates/_Index.ts';
+export * from './Constants.ts';
+export * from './Dependencies.ts';

package/src/api/ErrorPageApi.ts

@@ -0,0 +1,30 @@
+import { NextRequest } from 'next/server';
+import { inject, injectable } from 'tsyringe';
+import { ErrorType, MagnoliaPageRestClient } from '../helper/MagnoliaPageRestClient.ts';
+
+import { TOKEN_PREFIX } from '../Constants.ts';
+
+@injectable()
+export class ErrorPageApi {
+	constructor(@inject(TOKEN_PREFIX + 'MagnoliaPageRestClient') private magnoliaPageRestClient: MagnoliaPageRestClient) {}
+
+	public async get(req: NextRequest, language: string): Promise<Response> {
+		const queryParams = req.nextUrl.searchParams;
+		const url = new URL(`https://${req.headers.get('host')}/${language}`);
+		const errorType = this.getErrorTypeFromString(queryParams.get('errorType'));
+		const headers = new Headers();
+		headers.set('Content-Type', 'application/json');
+		return this.magnoliaPageRestClient
+			.getErrorPageContent(url, errorType)
+			.then((content) => JSON.stringify(content))
+			.then((body) => new Response(body, { headers: headers }));
+	}
+
+	private getErrorTypeFromString(value: string): ErrorType | undefined {
+		const directions = Object.values(ErrorType);
+		if (directions.includes(value as ErrorType)) {
+			return value as ErrorType;
+		}
+		return undefined;
+	}
+}

package/src/api/RobotsTxtApi.ts

@@ -0,0 +1,33 @@
+import { RestClient } from '../helper/RestClient.ts';
+import { NextRequest } from 'next/server';
+import { inject, injectable } from 'tsyringe';
+import type { HeadlessConfigProviderI, MagnoliaApiEndpointsProvider } from '../config/ConfigProvider.ts';
+
+import { TOKEN_PREFIX } from '../Constants.ts';
+
+@injectable()
+export class RobotsTxtApi {
+	private readonly apisProvider: MagnoliaApiEndpointsProvider;
+
+	constructor(
+		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
+		@inject(TOKEN_PREFIX + 'RestClient') private restClient: RestClient,
+	) {
+		this.apisProvider = configProvider.get().magnoliaApisProvider;
+	}
+
+	public async get(req: NextRequest, sitemapUrlTemplate: string): Promise<Response> {
+		const domain: string = new URL('https://' + req.headers.get('host')).hostname; //strip port
+		const headers = new Headers();
+		headers.set('Content-Type', 'text/plain');
+		return this.getRobots(domain, sitemapUrlTemplate).then((robots) => new Response(robots, { headers: headers }));
+	}
+
+	private async getRobots(domain: string, sitemapUrlTemplate: string): Promise<string> {
+		const queryParams = new URLSearchParams();
+		queryParams.set('domain', domain);
+		queryParams.set('sitemapUrlTemplate', sitemapUrlTemplate);
+		const url = this.apisProvider.robots() + '?' + queryParams.toString();
+		return this.restClient.fetchMagnoliaBasicAuth(url).then((response) => this.restClient.getText(url, response));
+	}
+}

package/src/api/SitemapApi.ts

@@ -0,0 +1,33 @@
+import { RestClient } from '../helper/RestClient.ts';
+import { NextRequest } from 'next/server';
+import { inject, injectable } from 'tsyringe';
+import type { HeadlessConfigProviderI, MagnoliaApiEndpointsProvider } from '../config/ConfigProvider.ts';
+
+import { TOKEN_PREFIX } from '../Constants.ts';
+
+@injectable()
+export class SitemapApi {
+	private readonly apisProvider: MagnoliaApiEndpointsProvider;
+
+	constructor(
+		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
+		@inject(TOKEN_PREFIX + 'RestClient') private restClient: RestClient,
+	) {
+		this.apisProvider = configProvider.get().magnoliaApisProvider;
+	}
+
+	public async get(req: NextRequest, language: string, type: string): Promise<Response> {
+		const domain: string = new URL('https://' + req.headers.get('host')).hostname; //strip port
+		const headers = new Headers();
+		headers.set('Content-Type', 'application/xml');
+		return this.getSitemap(domain, language, type).then((sitemap) => new Response(sitemap, { headers: headers }));
+	}
+
+	private async getSitemap(domain: string, language: string, type: string): Promise<string> {
+		const queryParams = new URLSearchParams();
+		queryParams.set('domain', domain);
+		queryParams.set('type', type);
+		const url = this.apisProvider.sitemap(language) + '?' + queryParams.toString();
+		return this.restClient.fetchMagnoliaBasicAuth(url).then((response) => this.restClient.getText(url, response, 'application/xml'));
+	}
+}

package/src/api/_Dependencies.ts

@@ -0,0 +1,12 @@
+import { DependencyContainer } from 'tsyringe';
+import { ErrorPageApi } from './ErrorPageApi.ts';
+import { RobotsTxtApi } from './RobotsTxtApi.ts';
+import { SitemapApi } from './SitemapApi.ts';
+
+import { TOKEN_PREFIX } from '../Constants.ts';
+
+export default function register(container: DependencyContainer) {
+	container.register(TOKEN_PREFIX + 'ErrorPageApi', { useClass: ErrorPageApi });
+	container.register(TOKEN_PREFIX + 'RobotsTxtApi', { useClass: RobotsTxtApi });
+	container.register(TOKEN_PREFIX + 'SitemapApi', { useClass: SitemapApi });
+}

package/src/api/_Index.ts

@@ -0,0 +1,3 @@
+export * from './ErrorPageApi.ts';
+export * from './RobotsTxtApi.ts';
+export * from './SitemapApi.ts';

package/src/api/_README.md

@@ -0,0 +1,73 @@
+# API
+
+## [Robots.txt](./RobotsTxtApi.ts)
+
+Consumes content provided by the [Magnolia Robots Endpoint](../../../magnolia-headless-spring/src/main/java/com/merkle/oss/magnolia/headless/api/robots/README.md).
+
+`/app/api/robots.txt/route.ts`
+
+```typescript
+import { NextRequest } from 'next/server';
+import { container } from '../../Dependencies.ts';
+import { RobotsTxtApi } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { TOKEN_PREFIX } from '@merkle-open/magnolia-headless-frontend-nextjs';
+
+const robotsApi = container.resolve<RobotsTxtApi>(TOKEN_PREFIX + 'RobotsTxtApi');
+
+export async function GET(req: NextRequest): Promise<Response> {
+    return robotsApi.get(req, '/{language}/sitemap/{type}.xml');
+}
+```
+
+## [Sitemap](./SitemapApi.ts)
+
+Consumes content provided by the [Magnolia Sitemap Endpoint](../../../magnolia-headless-spring/src/main/java/com/merkle/oss/magnolia/headless/api/sitemap/README.md).
+
+`/app/api/[language]/sitemap/[type]/route.ts`
+
+```typescript
+import { NextRequest } from 'next/server';
+import { container } from '../../../../Dependencies.ts';
+import { SitemapApi } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { TOKEN_PREFIX } from '@merkle-open/magnolia-headless-frontend-nextjs';
+
+const sitemapApi = container.resolve<SitemapApi>(TOKEN_PREFIX + 'SitemapApi');
+
+export async function GET(req: NextRequest): Promise<Response> {
+    const language: string = getLanguage(req.url);
+    const type: string = getType(req.url);
+    return sitemapApi.get(req, language, type);
+}
+
+function getLanguage(req: NextRequest): String {
+    //TODO implement
+}
+function getType(req: NextRequest): String {
+    //TODO implement
+}
+```
+
+## [ErrorPage](./ErrorPageApi.ts)
+
+Consumes content provided by the [Magnolia Page Endpoint](../../../magnolia-headless-spring/src/main/java/com/merkle/oss/magnolia/headless/api/page/README.md).
+Frontend API path must be provided in the [HeadlessConfigProviderI](../config/_README.md#headlessconfigprovideri)!
+
+`/app/api/[language]/error/route.ts`
+
+```typescript
+import { NextRequest } from 'next/server';
+import { container } from '../../../Dependencies.ts';
+import { ErrorPageApi } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { TOKEN_PREFIX } from '@merkle-open/magnolia-headless-frontend-nextjs';
+
+const errorPageApi = container.resolve<ErrorPageApi>(TOKEN_PREFIX + 'ErrorPageApi');
+
+export async function GET(req: NextRequest): Promise<Response> {
+    const language: string = getLanguage(req.url);
+    return errorPageApi.get(req, language);
+}
+
+function getLanguage(req: NextRequest): String {
+    //TODO implement
+}
+```

package/src/config/ComponentMappingsProvider.ts

@@ -0,0 +1,5 @@
+import { ComponentMappings } from '@magnolia/react-editor';
+
+export interface ComponentMappingsProviderI {
+	getComponentMappings(): ComponentMappings;
+}

package/src/config/ConfigProvider.ts

@@ -0,0 +1,35 @@
+export interface MagnoliaApiEndpointsProvider {
+	annotationTemplates(): string;
+	pageContent(language: string): string;
+	errorPageContent(language: string): string;
+	dynamicResponseHeader(): string;
+	vanity(language: string): string;
+	robots(): string;
+	sitemap(language: string): string;
+}
+
+export interface FrontendApiEndpointsProvider {
+	errorPage(language: string): string;
+}
+
+export interface ThemesProvider {
+	getFallback(): string;
+	getAll(): string[];
+}
+
+export type Credentials = {
+	username: string;
+	password: string;
+};
+
+export type Config = {
+	magnoliaCredentials: Credentials;
+	multiTree: boolean;
+	magnoliaApisProvider: MagnoliaApiEndpointsProvider;
+	frontendApisProvider: FrontendApiEndpointsProvider;
+	themesProvider: ThemesProvider;
+};
+
+export interface HeadlessConfigProviderI {
+	get(): Config;
+}

package/src/config/Logger.ts

@@ -0,0 +1,10 @@
+export enum Level {
+	DEBUG = 'DEBUG',
+	INFO = 'INFO',
+	WARN = 'WARN',
+	ERROR = 'ERROR',
+}
+
+export interface LoggerI {
+	log(level: Level, message: string): void;
+}

package/src/config/StylesheetProvider.ts

@@ -0,0 +1,3 @@
+export interface StylesheetProviderI {
+	get(theme: string): string;
+}

package/src/config/_Index.ts

@@ -0,0 +1,4 @@
+export * from './Logger.ts';
+export * from './ConfigProvider.ts';
+export * from './ComponentMappingsProvider.ts';
+export { type StylesheetProviderI } from './StylesheetProvider.ts';

package/src/config/_README.md

@@ -0,0 +1,115 @@
+# Config
+
+## Interfaces
+
+### [HeadlessConfigProviderI](./ConfigProvider.ts)
+
+`/app/config/SampleHeadlessConfigProvider.ts`
+
+```typescript
+import { Config, HeadlessConfigProviderI } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { injectable } from 'tsyringe';
+
+export enum Themes {
+	Default = 'default',
+	Theme1 = 'theme1',
+}
+
+@injectable()
+export class SampleHeadlessConfigProvider implements HeadlessConfigProviderI {
+    private readonly config: Config = {
+        magnoliaApisProvider: {
+            pageContent: (language: string) => process.env.MGNL_API_PAGES.replace('{language}', language),
+            ...
+        },
+        frontendApisProvider: {
+            errorPage: (language: string) => `/api/${language}/error`,
+        },
+        themesProvider: {
+            getFallback: () => Themes.Default,
+            getAll: () => Object.values(Themes),
+        },
+        ...
+    };
+
+    public get(): Config {
+        return this.config;
+    }
+}
+```
+
+### [LoggerI](./Logger.ts)
+
+`/app/config/SampleLogger.ts`
+
+```typescript
+import { Level, LoggerI } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { injectable } from 'tsyringe';
+
+@injectable()
+export class SampleLogger implements LoggerI {
+    public log(level: Level, message: string): void {
+        //TODO implement
+    }
+}
+```
+
+### [ComponentMappingsProviderI](./ComponentMappingsProvider.ts)
+
+`/app/config/SampleComponentMappingsProvider.ts`
+
+```typescript
+import { injectable } from 'tsyringe';
+import { ComponentMappingsProviderI } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { ComponentMappings } from '@magnolia/react-editor';
+import someComponent from './components/someComponent/SomeComponent.tsx';
+
+@injectable()
+export class SampleComponentMappingsProvider implements ComponentMappingsProviderI {
+    getComponentMappings(): ComponentMappings {
+        return {
+            "<MAGNOLIA_TEMPLATE_ID_SOME_COMPONENT>": someComponent,
+           ...
+        }
+    }
+}
+```
+
+### [StylesheetProviderI](./StylesheetProvider.ts)
+
+`/app/config/SampleStylesheetProvider.ts`
+
+```typescript
+import { injectable } from 'tsyringe';
+import { StylesheetProviderI } from '@merkle-open/magnolia-headless-frontend-nextjs';
+
+@injectable()
+export class SampleStylesheetProvider implements StylesheetProviderI {
+	public get(theme: string): string {
+		return `/css/theme/${theme}.min.css`;
+	}
+}
+```
+
+## Binding
+
+`/app/config/_Dependencies.ts`
+
+```typescript
+import { DependencyContainer } from 'tsyringe';
+import { TOKEN_PREFIX } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { Logger } from '@merkle-open/magnolia-headless-frontend-nextjs';
+
+export default function register(container: DependencyContainer) {
+    container.register(TOKEN_PREFIX + 'HeadlessConfigProviderI', {
+        useClass: SampleHeadlessConfigProvider,
+    });
+    container.register(TOKEN_PREFIX + 'ComponentMappingsProviderI', {
+        useClass: SampleComponentMappingsProvider,
+    });
+    container.register(TOKEN_PREFIX + 'StylesheetProviderI', {
+        useClass: SampleStylesheetProvider,
+    });
+    container.register(TOKEN_PREFIX + 'LoggerI', { useClass: SampleLogger });
+}
+```

package/src/dynamic-page/AbstractDynamicErrorPage.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { ErrorType } from '../helper/MagnoliaPageRestClient.ts';
+import { ErrorStatic } from '../templates/pages/_error-static/ErrorStatic.tsx';
+import { AbstractDynamicPage } from './AbstractDynamicPage.tsx';
+import { Logger } from '../helper/Logger.ts';
+import { RestClient } from '../helper/RestClient.ts';
+import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
+import type { FrontendApiEndpointsProvider, HeadlessConfigProviderI } from '../config/ConfigProvider.ts';
+import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
+import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
+
+export abstract class AbstractDynamicErrorPage extends AbstractDynamicPage {
+	private readonly frontendApisProvider: FrontendApiEndpointsProvider;
+
+	protected constructor(
+		componentMappingsProvider: ComponentMappingsProviderI,
+		configProvider: HeadlessConfigProviderI,
+		StylesheetProviderI: StylesheetProviderI,
+		logger: Logger,
+		private readonly restClient: RestClient,
+		protected readonly magnoliaContextProvider: MagnoliaContextProvider,
+	) {
+		super(componentMappingsProvider, configProvider, StylesheetProviderI, logger);
+		this.frontendApisProvider = configProvider.get().frontendApisProvider;
+	}
+
+	protected async renderDynamic(currentUrl: URL, errorType: ErrorType): Promise<ReactNode> {
+		const magnoliaContext = this.magnoliaContextProvider.getMagnoliaContext(currentUrl);
+		const content = await this.fetchErrorPageContent(magnoliaContext.currentLanguage, errorType);
+		return super.renderBase(magnoliaContext, content, {});
+	}
+
+	protected renderStatic(language: string, errorType: ErrorType): ReactNode {
+		return ErrorStatic({ language: language, errorType: errorType });
+	}
+
+	private async fetchErrorPageContent(language: string, errorType: ErrorType) {
+		const queryParams = new URLSearchParams();
+		queryParams.append('errorType', errorType);
+		const errorPageUrl = this.frontendApisProvider.errorPage(language) + '?' + queryParams.toString();
+		return fetch(errorPageUrl).then((response) => this.restClient.getJson(errorPageUrl, response));
+	}
+}

package/src/dynamic-page/AbstractDynamicPage.tsx

@@ -0,0 +1,53 @@
+import { ExtendedMagnoliaContext } from '../helper/MagnoliaContextProvider.ts';
+import { Content } from '../helper/MagnoliaPageRestClient.ts';
+import { MgnlTemplateAnnotations } from '@magnolia/frontend-helpers-base';
+import React, { ReactNode } from 'react';
+import { MagnoliaConfig, RefService } from '@magnolia/react-editor';
+import { EditablePage } from '../templates/pages/__magnolia-editable-page/EditablePage.tsx';
+import { Logger } from '../helper/Logger.ts';
+import type { HeadlessConfigProviderI, ThemesProvider } from '../config/ConfigProvider.ts';
+import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
+import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
+
+export abstract class AbstractDynamicPage {
+	private themesProvider: ThemesProvider;
+
+	protected constructor(
+		private readonly componentMappingsProvider: ComponentMappingsProviderI,
+		readonly configProvider: HeadlessConfigProviderI,
+		private readonly StylesheetProviderI: StylesheetProviderI,
+		private readonly logger: Logger,
+	) {
+		this.themesProvider = configProvider.get().themesProvider;
+	}
+
+	protected renderBase(magnoliaContext: ExtendedMagnoliaContext, content: Content, templateAnnotations: MgnlTemplateAnnotations): ReactNode {
+		const config: MagnoliaConfig = {
+			componentMappings: this.componentMappingsProvider.getComponentMappings(),
+		};
+
+		RefService.setMagnoliaContextRef(magnoliaContext);
+		global.mgnlInPageEditor = magnoliaContext.isMagnoliaEdit;
+
+		return (
+			<div>
+				{/* is moved to <head> see https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets */}
+				<link rel="stylesheet" href={this.getStylesheet(content)} precedence="high" />
+				<EditablePage content={content} config={config} templateAnnotations={templateAnnotations} magnoliaContext={magnoliaContext} />
+			</div>
+		);
+	}
+
+	private getStylesheet(content: Content) {
+		return this.StylesheetProviderI.get(this.getValidatedTheme(content.theme));
+	}
+	private getValidatedTheme(theme?: string): string {
+		if (!theme || !this.themesProvider.getAll().includes(theme)) {
+			if (theme) {
+				this.logger.error(`Got invalid theme '${theme}' from magnolia! falling back to ${this.themesProvider.getFallback()}`);
+			}
+			return this.themesProvider.getFallback();
+		}
+		return theme;
+	}
+}