Re-add support for Pages Router (#2179)

---------

Co-authored-by: Niko Sams <niko.sams@gmail.com>

.changeset/config.json

@@ -7,7 +7,15 @@
     "access": "restricted",
     "baseBranch": "main",
     "updateInternalDependencies": "patch",
-    "ignore": ["comet-storybook", "comet-demo-api", "comet-demo-admin", "comet-demo-admin-server", "comet-demo-site", "comet-docs"],
+    "ignore": [
+        "comet-storybook",
+        "comet-demo-api",
+        "comet-demo-admin",
+        "comet-demo-admin-server",
+        "comet-demo-site",
+        "comet-demo-site-pages",
+        "comet-docs"
+    ],
     "snapshot": {
         "useCalculatedVersion": true
     }

.changeset/popular-shirts-pretend.md

@@ -0,0 +1,7 @@
+---
+"@comet/cms-site": minor
+---
+
+Add `legacyPagesRouterSitePreviewApiHandler` helper
+
+Used to enable the site preview (Preview Mode) for projects which use the Pages Router. This helper is added to ease migrating. New projects should use the App Router instead.

.changeset/pre.json

@@ -6,6 +6,7 @@
     "comet-demo-admin-server": "1.0.0",
     "comet-demo-api": "1.0.0",
     "comet-demo-site": "1.0.0",
+    "comet-demo-site-pages": "1.0.0",
     "comet-docs": "0.0.0",
     "@comet/admin": "6.10.0",
     "@comet/admin-babel-preset": "6.10.0",

.env

@@ -53,7 +53,7 @@ DAM_SECRET=6a9e8a185b513363bc89ec0b96eed8f70c759bc86b97319f60365c4b7f8593dc
 # admin
 ADMIN_PORT=8000
 ADMIN_URL=http://${DEV_DOMAIN:-localhost}:$ADMIN_PORT
-SITES_CONFIG='{"main": {"url": "$SITE_URL", "preloginEnabled": false}, "secondary": {"url": "$SITE_URL", "preloginEnabled": false}}'
+SITES_CONFIG='{"main": {"url": "$SITE_URL", "preloginEnabled": false}, "secondary": {"url": "$SITE_PAGES_URL", "preloginEnabled": false}}'
 
 # site
 SITE_PORT=3000
@@ -63,6 +63,13 @@ SITE_PRELOGIN_PASSWORD=password
 NEXT_PUBLIC_SITE_DOMAIN=main
 NEXT_PUBLIC_API_URL=$API_URL
 
+# site-pages
+SITE_PAGES_PORT=3001
+SITE_PAGES_URL=http://localhost:$SITE_PAGES_PORT
+NEXT_PUBLIC_SITE_LANGUAGES=en,de
+NEXT_PUBLIC_SITE_DEFAULT_LANGUAGE=en
+NEXT_PUBLIC_SITE_PAGES_DOMAIN=secondary
+
 # jaegertracing
 JAEGER_UI_PORT=16686
 JAEGER_OLTP_PORT=4318

.github/workflows/lint.yml

@@ -32,21 +32,26 @@ jobs:
                   token: ${{ secrets.GITHUB_TOKEN }}
                   path: "demo/admin/lang/comet-lang"
 
-            - name: "Demo: Clone translations"
+            - name: "Demo Admin: Clone translations"
               uses: actions/checkout@v3
               with:
                   repository: vivid-planet/comet-demo-lang
                   token: ${{ secrets.GITHUB_TOKEN }}
                   path: "demo/admin/lang/comet-demo-lang"
 
-            - name: Initial lang content (TODO remove this step after all lang files are in the repo)
-              run: |
-                  mkdir -p demo/admin/lang/comet-demo-lang/admin
-                  test -f demo/admin/lang/comet-demo-lang/admin/en.json || echo "{}" > demo/admin/lang/comet-demo-lang/admin/en.json
-                  test -f demo/admin/lang/comet-demo-lang/admin/de.json || echo "{}" > demo/admin/lang/comet-demo-lang/admin/de.json
-                  mkdir -p demo/site/lang/comet-demo-lang/site
-                  test -f demo/site/lang/comet-demo-lang/site/en.json || echo "{}" > demo/site/lang/comet-demo-lang/site/en.json
-                  test -f demo/site/lang/comet-demo-lang/site/de.json || echo "{}" > demo/site/lang/comet-demo-lang/site/de.json
+            - name: "Demo Site: Clone translations"
+              uses: actions/checkout@v3
+              with:
+                  repository: vivid-planet/comet-demo-lang
+                  token: ${{ secrets.GITHUB_TOKEN }}
+                  path: "demo/site/lang/comet-demo-lang"
+
+            - name: "Demo Site Pages: Clone translations"
+              uses: actions/checkout@v3
+              with:
+                  repository: vivid-planet/comet-demo-lang
+                  token: ${{ secrets.GITHUB_TOKEN }}
+                  path: "demo/site-pages/lang/comet-demo-lang"
 
             - uses: pnpm/action-setup@v4
 

copy-schema-files.js

@@ -9,9 +9,12 @@ const fs = require("fs");
 
         fs.promises.copyFile("demo/api/block-meta.json", "demo/admin/block-meta.json"),
         fs.promises.copyFile("demo/api/block-meta.json", "demo/site/block-meta.json"),
+        fs.promises.copyFile("demo/api/block-meta.json", "demo/site-pages/block-meta.json"),
         fs.promises.copyFile("demo/api/schema.gql", "demo/admin/schema.gql"),
         fs.promises.copyFile("demo/api/schema.gql", "demo/site/schema.gql"),
+        fs.promises.copyFile("demo/api/schema.gql", "demo/site-pages/schema.gql"),
         fs.promises.copyFile("demo/api/src/comet-config.json", "demo/site/src/comet-config.json"),
+        fs.promises.copyFile("demo/api/src/comet-config.json", "demo/site-pages/src/comet-config.json"),
         fs.promises.copyFile("demo/api/src/comet-config.json", "demo/admin/src/comet-config.json"),
     ]);
 })();

demo/api/src/app.module.ts

@@ -92,6 +92,7 @@ export class AppModule {
                             { domain: "main", language: "de" },
                             { domain: "main", language: "en" },
                             { domain: "secondary", language: "en" },
+                            { domain: "secondary", language: "de" },
                         ],
                         userService,
                         accessControlService,

demo/site-pages/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [["styled-components", { "ssr": true }]]
+}

demo/site-pages/.eslintrc.cli.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: ["./.eslintrc.json"],
+};

demo/site-pages/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+    "extends": "@comet/eslint-config/nextjs",
+    "ignorePatterns": ["**/**/*.generated.ts", "dist/**"],
+    "rules": {
+        "@calm/react-intl/missing-formatted-message": "off"
+    }
+}

demo/site-pages/.gitignore

@@ -0,0 +1,52 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+.env
+schema.gql
+schema.json
+block-meta.json
+src/**/*.generated.ts
+preBuild/**/*.generated.ts
+
+public/sitemap.xml
+public/robots.txt
+
+tsconfig.tsbuildinfo
+
+src/comet-config.json
+
+lang
+lang-extracted
+lang-compiled

demo/site-pages/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "printWidth": 150,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "semi": true
+}

demo/site-pages/README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

demo/site-pages/apollo.config.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+    client: {
+        service: {
+            name: "comet-demo-api",
+            localSchemaFile: "./schema.graphql",
+        },
+    },
+};

demo/site-pages/codegen.ts

@@ -0,0 +1,49 @@
+import { CodegenConfig } from "@graphql-codegen/cli";
+import { readFileSync } from "fs";
+import { buildSchema } from "graphql";
+
+const schema = buildSchema(readFileSync("./schema.gql").toString());
+
+const rootBlocks = Object.keys(schema.getTypeMap()).filter((type) => type.endsWith("BlockData"));
+
+const config: CodegenConfig = {
+    schema: "schema.gql",
+    generates: {
+        "./src/graphql.generated.ts": {
+            plugins: [{ add: { content: `import { ${rootBlocks.sort().join(", ")} } from "./blocks.generated";` } }, "typescript"],
+            config: {
+                avoidOptionals: {
+                    field: true,
+                },
+                enumsAsTypes: true,
+                namingConvention: "keep",
+                scalars: rootBlocks.reduce((scalars, rootBlock) => ({ ...scalars, [rootBlock]: rootBlock }), { DateTime: "string" }),
+                typesPrefix: "GQL",
+            },
+        },
+        "./src/": {
+            documents: ["./src/**/!(*.generated).{tsx,ts}", "preBuild/src/**/!(*.generated).{ts,tsx}"],
+            preset: "near-operation-file",
+            presetConfig: {
+                extension: ".generated.ts",
+                baseTypesPath: "graphql.generated.ts",
+            },
+            config: {
+                avoidOptionals: {
+                    field: true,
+                },
+                enumsAsTypes: true,
+                namingConvention: "keep",
+                scalars: rootBlocks.reduce((scalars, rootBlock) => ({ ...scalars, [rootBlock]: rootBlock }), {}),
+                typesPrefix: "GQL",
+            },
+            plugins: [
+                { add: { content: `import { ${rootBlocks.sort().join(", ")} } from "@src/blocks.generated";` } },
+                "named-operations-object",
+                "typescript-operations",
+            ],
+        },
+    },
+};
+
+export default config;

demo/site-pages/ecosystem.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    apps: [
+        {
+            name: "next-server",
+            script: "pnpm start",
+        },
+        {
+            name: "next-server-internal-api",
+            script: "node next-server-internal-api.js",
+        },
+    ],
+};

demo/site-pages/intl-update.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+
+cd "$(dirname "$0")" || exit
+
+rm -rf ./lang/
+mkdir -p ./lang
+
+git clone https://github.com/vivid-planet/comet-demo-lang lang/comet-demo-lang

demo/site-pages/lint-staged.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    "*.{ts,tsx,js,jsx,json,css,scss,md}": () => "pnpm lint:eslint",
+    "*.{ts,tsx}": () => "pnpm lint:tsc",
+};

demo/site-pages/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

demo/site-pages/next.config.js

@@ -0,0 +1,61 @@
+/* eslint-disable */
+
+// @ts-check
+
+const cometConfig = require("./src/comet-config.json");
+
+/**
+ * @type {import('next').NextConfig['i18n'] | undefined}
+ **/
+let i18n = undefined;
+
+if (process.env.SITE_IS_PREVIEW !== "true") {
+    if (!process.env.NEXT_PUBLIC_SITE_LANGUAGES) {
+        throw new Error("Missing environment variable NEXT_PUBLIC_SITE_LANGUAGES");
+    }
+
+    if (!process.env.NEXT_PUBLIC_SITE_DEFAULT_LANGUAGE) {
+        throw new Error("Missing environment variable NEXT_PUBLIC_SITE_DEFAULT_LANGUAGE");
+    }
+
+    i18n = {
+        locales: process.env.NEXT_PUBLIC_SITE_LANGUAGES.split(","),
+        defaultLocale: process.env.NEXT_PUBLIC_SITE_DEFAULT_LANGUAGE,
+        localeDetection: process.env.NODE_ENV === "development" ? false : undefined,
+    };
+}
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+    rewrites: async () => {
+        if (process.env.NEXT_PUBLIC_SITE_IS_PREVIEW === "true") return [];
+        var rewrites = await require("./preBuild/build/preBuild/src/createRewrites").createRewrites();
+        return rewrites;
+    },
+    redirects: async () => {
+        if (process.env.NEXT_PUBLIC_SITE_IS_PREVIEW === "true") return [];
+        var redirects = await require("./preBuild/build/preBuild/src/createRedirects").createRedirects();
+        return redirects;
+    },
+    images: {
+        deviceSizes: cometConfig.dam.allowedImageSizes,
+    },
+    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+        var path = require("path");
+
+        config.resolve.alias["@src"] = path.resolve(__dirname, "src/");
+
+        return config;
+    },
+    i18n,
+    typescript: {
+        ignoreBuildErrors: process.env.NODE_ENV === "production",
+    },
+    eslint: {
+        ignoreDuringBuilds: process.env.NODE_ENV === "production",
+    },
+};
+
+module.exports = nextConfig;