Add basePath to sitePreviewRoute

admin/src/App.tsx

@@ -78,7 +78,7 @@ export function App() {
                                 DamFile: createDamFileDependency(),
                             }}
                         >
-                            <IntlProvider locale="en" messages={getMessages()}>
+                            <IntlProvider locale="de" messages={getMessages()}>
                                 <LocaleProvider resolveLocaleForScope={(scope: ContentScope) => scope.domain}>
                                     <MuiThemeProvider theme={theme}>
                                         <DndProvider options={HTML5toTouch}>

admin/src/documents/pages/EditPage.tsx

@@ -129,7 +129,7 @@ export const EditPage: React.FC<Props> = ({ id, category }) => {
                             startIcon={<Preview />}
                             disabled={!pageState}
                             onClick={() => {
-                                openSitePreviewWindow(`/${scope.language}${pageState.path}`, contentScopeMatch.url);
+                                openSitePreviewWindow(pageState.path, contentScopeMatch.url);
                             }}
                             color="info"
                         >

site/package.json

@@ -28,6 +28,7 @@
         "@opentelemetry/sdk-node": "^0.46.0",
         "cache-manager": "^5.6.1",
         "graphql": "^15.0.0",
+        "jose": "^5.6.3",
         "next": "^14.0.0",
         "next-runtime-env": "^3.2.2",
         "react": "^18.2.0",

site/src/app/api/site-preview/route.ts

@@ -1,9 +1,20 @@
-import { sitePreviewRoute } from "@comet/cms-site";
+import { sitePreviewRoute } from "@src/temp/site-preview-route";
 import { createGraphQLFetch } from "@src/util/graphQLClient";
 import { type NextRequest } from "next/server";
 
 export const dynamic = "force-dynamic";
 
 export async function GET(request: NextRequest) {
-    return sitePreviewRoute(request, createGraphQLFetch());
+    return sitePreviewRoute(request, createGraphQLFetch(), {
+        basePath: (request) => {
+            const scopeString = request.nextUrl.searchParams.get("scope");
+
+            if (scopeString === null) {
+                throw new Error("Missing scope param");
+            }
+
+            const scope: { language?: string } = JSON.parse(scopeString);
+            return scope.language ?? "";
+        },
+    });
 }

site/src/temp/site-preview-route.ts

@@ -0,0 +1,68 @@
+// Temporary copy from
+
+import { GraphQLFetch } from "@comet/cms-site";
+import { SignJWT } from "jose";
+import { cookies, draftMode } from "next/headers";
+import { redirect } from "next/navigation";
+import { type NextRequest } from "next/server";
+import * as path from "path";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Scope = Record<string, any>;
+
+export type SitePreviewData = {
+    includeInvisible: boolean;
+};
+export type SitePreviewParams = {
+    scope: Scope;
+    previewData?: SitePreviewData;
+};
+
+function getPreviewScopeSigningKey() {
+    if (!process.env.SITE_PREVIEW_SECRET && process.env.NODE_ENV === "production") {
+        throw new Error("SITE_PREVIEW_SECRET environment variable is required in production mode");
+    }
+    return process.env.SITE_PREVIEW_SECRET || "secret";
+}
+
+export async function sitePreviewRoute(request: NextRequest, graphQLFetch: GraphQLFetch, options?: { basePath?: (request: NextRequest) => string }) {
+    const previewScopeSigningKey = getPreviewScopeSigningKey();
+    const params = request.nextUrl.searchParams;
+    const settingsParam = params.get("settings");
+    const scopeParam = params.get("scope");
+    if (!settingsParam || !scopeParam) {
+        throw new Error("Missing settings or scope parameter");
+    }
+
+    const previewData = JSON.parse(settingsParam);
+    const scope = JSON.parse(scopeParam);
+
+    const { currentUser } = await graphQLFetch<{ currentUser: { permissionsForScope: string[] } }, { scope: Scope }>(
+        `
+            query CurrentUserPermissionsForScope($scope: JSONObject!) {
+                currentUser {
+                    permissionsForScope(scope: $scope)
+                }
+            }
+        `,
+        { scope },
+        {
+            headers: {
+                authorization: request.headers.get("authorization") || "",
+            },
+        },
+    );
+    if (!currentUser.permissionsForScope.includes("pageTree")) {
+        return new Response("Preview is not allowed", {
+            status: 403,
+        });
+    }
+
+    const data: SitePreviewParams = { scope, previewData };
+    const token = await new SignJWT(data).setProtectedHeader({ alg: "HS256" }).sign(new TextEncoder().encode(previewScopeSigningKey));
+    cookies().set("__comet_preview", token);
+
+    draftMode().enable();
+
+    return redirect(`/${path.join(options?.basePath?.(request) ?? "", params.get("path") ?? "")}` || "/");
+}