Use site configs in site

admin/src/App.tsx

@@ -21,6 +21,7 @@ import {
 } from "@comet/cms-admin";
 import { css, Global } from "@emotion/react";
 import { getMessages } from "@src/lang";
+import { ContentScope } from "@src/site-configs";
 import { theme } from "@src/theme";
 import { HTML5toTouch } from "rdndmb-html5-to-touch";
 import { DndProvider } from "react-dnd-multi-backend";
@@ -31,7 +32,7 @@ import { createApolloClient } from "./common/apollo/createApolloClient";
 import { ContentScopeProvider } from "./common/ContentScopeProvider";
 import { MasterHeader } from "./common/MasterHeader";
 import { masterMenuData, pageTreeCategories, pageTreeDocumentTypes } from "./common/masterMenuData";
-import { ConfigProvider, ContentScope, createConfig } from "./config";
+import { ConfigProvider, createConfig } from "./config";
 import { Link } from "./documents/links/Link";
 import { Page } from "./documents/pages/Page";
 
@@ -57,13 +58,21 @@ export function App() {
                         value={{
                             configs: config.sitesConfig,
                             resolveSiteConfigForScope: (configs, scope: ContentScope) => {
-                                const siteConfig = configs.find((config) => config.contentScope.domain === scope.domain);
+                                const siteConfig = configs.find((config) => {
+                                    return config.domain === scope.domain;
+                                });
+
                                 if (!siteConfig) throw new Error(`siteConfig not found for domain ${scope.domain}`);
+
+                                // In a deployed setting, we use one preview URL for all scopes.
+                                // Locally, we use the site URL for each scope because setting the necessary cookies for the preview doesn't work on localhost.
+                                // see https://github.com/vivid-planet/comet-starter/pull/283/files#r1696858091 for more infos
+                                const previewUrl = process.env.NODE_ENV === "development" ? siteConfig.url : config.previewUrl;
                                 return {
                                     url: siteConfig.url,
                                     preloginEnabled: siteConfig.preloginEnabled || false,
-                                    blockPreviewBaseUrl: `${config.previewUrl}/block-preview`,
-                                    sitePreviewApiUrl: `${config.previewUrl}/api/site-preview`,
+                                    blockPreviewBaseUrl: `${previewUrl}/block-preview`,
+                                    sitePreviewApiUrl: `${previewUrl}/api/site-preview`,
                                 };
                             },
                         }}
@@ -100,7 +109,14 @@ export function App() {
                                                                     <Switch>
                                                                         <Route
                                                                             path={`${match.path}/preview`}
-                                                                            render={(props) => <SitePreview {...props} />}
+                                                                            render={(props) => (
+                                                                                <SitePreview
+                                                                                    resolvePath={(path: string, scope: ContentScope) => {
+                                                                                        return `/${scope.language}${path}`;
+                                                                                    }}
+                                                                                    {...props}
+                                                                                />
+                                                                            )}
                                                                         />
                                                                         <Route
                                                                             render={() => (

admin/src/common/ContentScopeProvider.tsx

@@ -8,7 +8,7 @@ import {
     useContentScopeConfig as useContentScopeConfigLibrary,
     useCurrentUser,
 } from "@comet/cms-admin";
-import { ContentScope } from "@src/config";
+import { ContentScope } from "@src/site-configs";
 
 // convenince wrapper for app (Bind Generic)
 export function useContentScope(): UseContentScopeApi<ContentScope> {

admin/src/config.tsx

@@ -29,8 +29,6 @@ export function createConfig() {
     };
 }
 
-export type ContentScope = PublicSiteConfig["contentScope"];
-
 export type Config = ReturnType<typeof createConfig>;
 
 const ConfigContext = createContext<Config | undefined>(undefined);

api/src/app.module.ts

@@ -80,7 +80,12 @@ export class AppModule {
                 AuthModule,
                 UserPermissionsModule.forRootAsync({
                     useFactory: (userService: UserService, accessControlService: AccessControlService) => ({
-                        availableContentScopes: config.siteConfigs.map((siteConfig) => siteConfig.contentScope),
+                        availableContentScopes: config.siteConfigs.flatMap((siteConfig) =>
+                            siteConfig.languages.map((language) => ({
+                                domain: siteConfig.domain,
+                                language,
+                            })),
+                        ),
                         userService,
                         accessControlService,
                         systemUsers: ["system"],

site-configs.d.ts

@@ -8,9 +8,10 @@ export type ContentScope = {
 export interface SiteConfig extends BaseSiteConfig {
     preloginPassword?: string;
     public: {
-        contentScope: ContentScope;
+        domain: string;
+        languages: string[];
     };
 }
 
-export type PrivateSiteConfig = ExtractPrivateSiteConfig<SiteConfig> & { contentScope: ContentScope };
-export type PublicSiteConfig = ExtractPublicSiteConfig<SiteConfig> & { contentScope: ContentScope };
+export type PrivateSiteConfig = ExtractPrivateSiteConfig<SiteConfig>;
+export type PublicSiteConfig = ExtractPublicSiteConfig<SiteConfig>;

site-configs.ts

@@ -3,7 +3,7 @@ import { SiteConfig } from "./site-configs.d";
 
 // Types for files in site-configs/
 type Environment = "local" | "dev" | "test" | "staging" | "prod";
-export type Config = Omit<SiteConfig, "domains" | "public"> & SiteConfig["public"] & {
+export type Config = Omit<SiteConfig, "domains" | "public"> & Pick<SiteConfig["public"], "domain" | "languages"> & {
     domains: {
         preliminary?: string;
     } & {
@@ -18,21 +18,20 @@ const getSiteConfigs = async (env: Environment): Promise<SiteConfig[]> => {
     const files = (await fs.readdir(path)).filter((file) => !file.startsWith("_"));
     const imports = (await Promise.all(files.map((file) => import(`${path}/${file}`)))) as { default: Config }[];
     return imports.map((imprt, index) => {
-        const { domains, contentScope, ...site } = imprt.default;
+        const { domains, ...site } = imprt.default;
 
-        const ret: SiteConfig = {
+        return {
             ...site,
             domains: {
                 main: domains[env] ?? "",
                 preliminary: env === "prod" ? domains["preliminary"] : undefined,
             },
             preloginEnabled: env === "prod" ? site.preloginEnabled : true,
             public: {
-                contentScope,
+                domain: site.domain,
+                languages: site.languages,
             }
-        };
-
-        return ret;
+        }
     });
 };
 export default getSiteConfigs;

site-configs/main-de.ts → site-configs/main.ts

@@ -1,11 +1,9 @@
 import { Config } from "../site-configs";
 
 export default {
-    name: "Starter Main DE",
-    contentScope: {
-        domain: "main",
-        language: "de",
-    },
+    name: "Starter Main",
+    domain: "main",
+    languages: ["en", "de"],
     domains: {
         local: "localhost:3000",
     },

site-configs/secondary-de.ts → site-configs/secondary.ts

@@ -1,11 +1,9 @@
 import { Config } from "../site-configs";
 
 export default {
-    name: "Starter Secondary DE",
-    contentScope: {
-        domain: "secondary",
-        language: "de",
-    },
+    name: "Starter Secondary",
+    domain: "secondary",
+    languages: ["en", "de"],
     domains: {
         local: "secondary.localhost:3000",
     },

site/package.json

@@ -29,6 +29,7 @@
         "cache-manager": "^5.6.1",
         "graphql": "^15.0.0",
         "next": "^14.2.0",
+        "next-runtime-env": "^3.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-intl": "^6.0.0",

site/src/app/[lang]/[[...path]]/layout.tsx → site/src/app/[domain]/[language]/[[...path]]/layout.tsx

@@ -1,5 +1,4 @@
 import { gql, previewParams } from "@comet/cms-site";
-import { domain } from "@src/config";
 import { Header } from "@src/layout/header/Header";
 import { headerFragment } from "@src/layout/header/Header.fragment";
 import { createGraphQLFetch } from "@src/util/graphQLClient";
@@ -12,12 +11,14 @@ export const metadata: Metadata = {
     title: "Comet Starter",
 };
 
-export default async function Layout({ children, params }: PropsWithChildren<{ params: { lang: string } }>) {
-    // TODO support multiple domains, get domain by Host header
-    const { scope, previewData } = (await previewParams()) || { scope: { domain, language: params.lang }, previewData: undefined };
-    const graphQLFetch = createGraphQLFetch(previewData);
+export default async function Layout({
+    children,
+    params: { domain, language },
+}: PropsWithChildren<{ params: { domain: string; language: string } }>) {
+    const { previewData } = (await previewParams()) || { previewData: undefined };
+    const graphqlFetch = createGraphQLFetch(previewData);
 
-    const { header } = await graphQLFetch<GQLLayoutQuery, GQLLayoutQueryVariables>(
+    const { header } = await graphqlFetch<GQLLayoutQuery, GQLLayoutQueryVariables>(
         gql`
             query Layout($domain: String!, $language: String!) {
                 header: mainMenu(scope: { domain: $domain, language: $language }) {
@@ -27,7 +28,7 @@ export default async function Layout({ children, params }: PropsWithChildren<{ p
 
             ${headerFragment}
         `,
-        { domain: scope.domain, language: scope.language },
+        { domain, language },
     );
 
     return (

site/src/app/[lang]/[[...path]]/page.tsx → site/src/app/[domain]/[language]/[[...path]]/page.tsx

@@ -1,5 +1,4 @@
 import { gql, previewParams } from "@comet/cms-site";
-import { domain, languages } from "@src/config";
 import { documentTypes } from "@src/documents";
 import { GQLPageTreeNodeScopeInput } from "@src/graphql.generated";
 import { createGraphQLFetch } from "@src/util/graphQLClient";
@@ -16,18 +15,15 @@ const documentTypeQuery = gql`
     }
 `;
 
-export default async function Page({ params }: { params: { path: string[]; lang: string } }) {
-    // TODO support multiple domains, get domain by Host header
-    const { scope, previewData } = (await previewParams()) || { scope: { domain, language: params.lang }, previewData: undefined };
-    const graphqlFetch = createGraphQLFetch(previewData);
+export default async function Page({ params: { path, domain, language } }: { params: { path: string[]; domain: string; language: string } }) {
+    const scope = { domain, language };
 
-    if (!languages.includes(params.lang)) {
-        notFound();
-    }
+    const { previewData } = (await previewParams()) || { previewData: undefined };
+    const graphqlFetch = createGraphQLFetch(previewData);
 
     //fetch documentType
     const data = await graphqlFetch<GQLDocumentTypeQuery, GQLDocumentTypeQueryVariables>(documentTypeQuery, {
-        path: `/${(params.path ?? []).join("/")}`,
+        path: `/${(path ?? []).join("/")}`,
         scope: scope as GQLPageTreeNodeScopeInput, //TODO fix type, the scope from previewParams() is not compatible with GQLPageTreeNodeScopeInput
     });
 
@@ -39,8 +35,9 @@ export default async function Page({ params }: { params: { path: string[]; lang:
 
     const props = {
         pageTreeNodeId,
-        scope: scope as GQLPageTreeNodeScopeInput, //TODO fix type, the scope from previewParams() is not compatible with GQLPageTreeNodeScopeInput,
+        scope,
     };
+
     const { component: Component } = documentTypes[data.pageTreeNodeByPath.documentType];
 
     return <Component {...props} />;

site/src/app/[domain]/[language]/layout.tsx

@@ -0,0 +1,20 @@
+import { IntlProvider } from "@src/app/[domain]/[language]/IntlProvider";
+import { readFile } from "fs/promises";
+
+const messagesCache: Record<string, unknown> = {};
+async function loadMessages(language: string) {
+    if (messagesCache[language]) return messagesCache[language];
+    const path = `./lang-compiled/${language}.json`;
+    const messages = JSON.parse(await readFile(path, "utf8"));
+    messagesCache[language] = messages;
+    return messages;
+}
+
+export default async function Page({ children, params: { language } }: { children: React.ReactNode; params: { language: string } }) {
+    const messages = await loadMessages(language);
+    return (
+        <IntlProvider locale={language} messages={messages}>
+            {children}
+        </IntlProvider>
+    );
+}