Merge pull request #41 from vivid-planet/add-demo-mailing-frontend

Add demo mailing frontend

.env

@@ -68,6 +68,19 @@ JAEGER_UI_PORT=16686
 JAEGER_OLTP_PORT=4318
 TRACING_ENABLED=1
 
+# Campaign
+CAMPAIGN_PORT=3001
+CAMPAIGN_URL=http://${DEV_DOMAIN:-localhost}${WORKAROUND_DOTENV_ISSUE}:${CAMPAIGN_PORT}
+CAMPAIGN_CONTENT_URL=http://${DEV_DOMAIN:-localhost}${WORKAROUND_DOTENV_ISSUE}:${CAMPAIGN_PORT}
+CAMPAIGN_LANGUAGES=en
+CAMPAIGN_DEFAULT_LANGUAGE=en
+NEXT_PUBLIC_CAMPAIGN_URL=$CAMPAIGN_URL
+NEXT_PUBLIC_CAMPAIGN_DOMAIN=main
+NEXT_PUBLIC_CAMPAIGN_LANGUAGES=en,de
+NEXT_PUBLIC_CAMPAIGN_DEFAULT_LANGUAGE=en
+NEXT_PUBLIC_CAMPAIGN_IS_PREVIEW=false
+
+
 # BREVO
 BREVO_ALLOWED_REDIRECT_URL=http://${DEV_DOMAIN:-localhost}${WORKAROUND_DOTENV_ISSUE}:${SITE_PORT}
 CAMPAIGNS_FRONTEND_URL=http://${DEV_DOMAIN:-localhost}${WORKAROUND_DOTENV_ISSUE}:${SITE_PORT} # doesn't work, TODO: add actual mailing frontend

.prettierignore

@@ -2,6 +2,7 @@ chart/*/templates/*
 admin/
 api/
 site/
+campaign/
 schema.graphql
 lang/
 create-app/

README.md

@@ -32,9 +32,8 @@ The following variables must be set manually
 -   `BREVO_SENDER_NAME`
 -   `BREVO_SENDER_EMAIL`
 -   `ECG_RTR_LIST_API_KEY`
--   `CAMPAIGNS_FRONTEND_URL`
--   `CAMPAIGNS_FRONTEND_BASIC_AUTH_USERNAME`
--   `CAMPAIGNS_FRONTEND_BASIC_AUTH_PASSWORD`
+-   `CAMPAIGN_BASIC_AUTH_USERNAME`
+-   `CAMPAIGN_BASIC_AUTH_PASSWORD`
 
 ### Start development processes
 

copy-schema-files.js

@@ -6,9 +6,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/campaign/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/campaign/schema.gql"),
         fs.promises.copyFile("demo/api/src/comet-config.json", "demo/site/comet-config.json"),
         fs.promises.copyFile("demo/api/src/comet-config.json", "demo/admin/comet-config.json"),
+        fs.promises.copyFile("demo/api/src/comet-config.json", "demo/campaign/comet-config.json"),
     ]);
 })();

demo/.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "eslint.workingDirectories": ["admin", "api", "site", "create-app"]
+    "eslint.workingDirectories": ["admin", "api", "site", "create-app", "campaign"]
 }

demo/admin/src/Routes.tsx

@@ -43,7 +43,7 @@ export const Routes: React.FC = () => {
     const EmailCampaignsPage = createEmailCampaignsPage({
         scopeParts: ["domain", "language"],
         EmailCampaignContentBlock: EmailCampaignContentBlock,
-        previewUrl: `${config.campaignsFrontendUrl}/preview`,
+        previewUrl: `${config.campaignUrl}/preview`,
     });
 
     return (

demo/admin/src/common/blocks/RichTextBlock.tsx

@@ -2,4 +2,7 @@ import { createRichTextBlock } from "@comet/cms-admin";
 
 import { LinkBlock } from "./LinkBlock";
 
-export const RichTextBlock = createRichTextBlock({ link: LinkBlock });
+export const RichTextBlock = createRichTextBlock({
+    link: LinkBlock,
+    rte: { supports: ["bold", "italic", "header-one", "header-two", "header-three", "header-four", "header-five", "header-six"] },
+});

demo/admin/src/config.ts

@@ -24,7 +24,7 @@ export function createConfig() {
         buildDate: environmentVariables.BUILD_DATE,
         buildNumber: environmentVariables.BUILD_NUMBER,
         commitSha: environmentVariables.COMMIT_SHA,
-        campaignsFrontendUrl: environmentVariables.CAMPAIGNS_FRONTEND_URL,
+        campaignUrl: environmentVariables.CAMPAIGN_URL,
     };
 }
 

demo/admin/src/environment.ts

@@ -1 +1 @@
-export const environment = ["API_URL", "ADMIN_URL", "SITES_CONFIG", "BUILD_DATE", "BUILD_NUMBER", "COMMIT_SHA", "CAMPAIGNS_FRONTEND_URL"];
+export const environment = ["API_URL", "ADMIN_URL", "SITES_CONFIG", "BUILD_DATE", "BUILD_NUMBER", "COMMIT_SHA", "CAMPAIGN_URL"];

demo/api/src/app.module.ts

@@ -155,10 +155,10 @@ export class AppModule {
                         EmailCampaignContentBlock,
                         Scope: EmailCampaignContentScope,
                         frontend: {
-                            url: config.campaignsFrontend.url,
+                            url: config.campaign.url,
                             basicAuth: {
-                                username: config.campaignsFrontend.basicAuth.username,
-                                password: config.campaignsFrontend.basicAuth.password,
+                                username: config.campaign.basicAuth.username,
+                                password: config.campaign.basicAuth.password,
                             },
                         },
                     },

demo/api/src/config/config.ts

@@ -64,11 +64,11 @@ export function createConfig(processEnv: NodeJS.ProcessEnv) {
                 email: envVars.BREVO_SENDER_EMAIL,
             },
         },
-        campaignsFrontend: {
-            url: envVars.CAMPAIGNS_FRONTEND_URL,
+        campaign: {
+            url: envVars.CAMPAIGN_URL,
             basicAuth: {
-                username: envVars.CAMPAIGNS_FRONTEND_BASIC_AUTH_USERNAME,
-                password: envVars.CAMPAIGNS_FRONTEND_BASIC_AUTH_PASSWORD,
+                username: envVars.CAMPAIGN_BASIC_AUTH_USERNAME,
+                password: envVars.CAMPAIGN_BASIC_AUTH_PASSWORD,
             },
         },
         ecgRtrList: {

demo/api/src/config/environment-variables.ts

@@ -132,11 +132,11 @@ export class EnvironmentVariables {
     ECG_RTR_LIST_API_KEY: string;
 
     @IsString()
-    CAMPAIGNS_FRONTEND_URL: string;
+    CAMPAIGN_URL: string;
 
     @IsString()
-    CAMPAIGNS_FRONTEND_BASIC_AUTH_USERNAME: string;
+    CAMPAIGN_BASIC_AUTH_USERNAME: string;
 
     @IsString()
-    CAMPAIGNS_FRONTEND_BASIC_AUTH_PASSWORD: string;
+    CAMPAIGN_BASIC_AUTH_PASSWORD: string;
 }

demo/campaign/.eslintrc.cli.js

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

demo/campaign/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+    "extends": "@comet/eslint-config/nextjs",
+    "ignorePatterns": ["**/**/*.generated.ts"]
+}

demo/campaign/.gitignore

@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+/lang-compiled/
+/lang-extracted/
+
+# 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.secrets
+.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
+comet-config.json
+
+public/sitemap.xml
+public/robots.txt
+
+tsconfig.tsbuildinfo

demo/campaign/.prettierrc.json

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

demo/campaign/apollo.config.js

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

demo/campaign/codegen.ts

@@ -0,0 +1,43 @@
+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 pluginConfig = {
+    avoidOptionals: {
+        field: true,
+    },
+    enumsAsTypes: true,
+    namingConvention: "keep",
+    scalars: rootBlocks.reduce((scalars, rootBlock) => ({ ...scalars, [rootBlock]: rootBlock }), { DateTime: "string" }),
+    typesPrefix: "GQL",
+};
+
+const config: CodegenConfig = {
+    schema: "schema.gql",
+    generates: {
+        "./src/graphql.generated.ts": {
+            plugins: [{ add: { content: `import { ${rootBlocks.sort().join(", ")} } from "./blocks.generated";` } }, "typescript"],
+            config: pluginConfig,
+        },
+        "./src/": {
+            documents: ["./src/**/!(*.generated).{ts,tsx}", "./preBuild/src/**/!(*.generated).{ts,tsx}"],
+            preset: "near-operation-file",
+            presetConfig: {
+                extension: ".generated.ts",
+                baseTypesPath: "graphql.generated.ts",
+            },
+            plugins: [
+                { add: { content: `import { ${rootBlocks.sort().join(", ")} } from "@src/blocks.generated";` } },
+                "named-operations-object",
+                "typescript-operations",
+            ],
+            config: pluginConfig,
+        },
+    },
+};
+
+export default config;

demo/campaign/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-starter-lang.git lang/comet-brevo-module-demo-lang

demo/campaign/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/campaign/next.config.js

@@ -0,0 +1,118 @@
+/* eslint-disable */
+
+// @ts-check
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+    enabled: process.env.ANALYZE === "true",
+});
+
+const cometConfig = require("./comet-config.json");
+
+/**
+ * @type {import('next').NextConfig['i18n'] | undefined}
+ **/
+let i18n = undefined;
+
+if (process.env.NEXT_PUBLIC_CAMPAIGN_IS_PREVIEW !== "true") {
+    if (!process.env.NEXT_PUBLIC_CAMPAIGN_LANGUAGES) {
+        throw new Error("Missing environment variable NEXT_PUBLIC_CAMPAIGN_LANGUAGES");
+    }
+
+    if (!process.env.NEXT_PUBLIC_CAMPAIGN_DEFAULT_LANGUAGE) {
+        throw new Error("Missing environment variable NEXT_PUBLIC_CAMPAIGN_DEFAULT_LANGUAGE");
+    }
+
+    i18n = {
+        locales: process.env.NEXT_PUBLIC_CAMPAIGN_LANGUAGES.split(","),
+        defaultLocale: process.env.NEXT_PUBLIC_CAMPAIGN_DEFAULT_LANGUAGE,
+        localeDetection: process.env.NODE_ENV === "development" ? false : undefined,
+    };
+}
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+    pageExtensions: ["page.ts", "page.tsx"],
+    basePath: process.env.NEXT_PUBLIC_CAMPAIGN_IS_PREVIEW === "true" ? "/campaign" : "",
+    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",
+    },
+    compiler: {
+        styledComponents: true,
+    },
+    async rewrites() {
+        return [
+            {
+                source: "/",
+                destination: "/api",
+            },
+        ];
+    },
+    // https://nextjs.org/docs/advanced-features/security-headers
+    headers: async () => [
+        {
+            source: "/:path*",
+            headers: [
+                {
+                    key: "X-DNS-Prefetch-Control",
+                    value: "on",
+                },
+                {
+                    key: "Strict-Transport-Security",
+                    value: "max-age=63072000; includeSubDomains; preload",
+                },
+                {
+                    key: "X-XSS-Protection",
+                    value: "1; mode=block",
+                },
+                {
+                    key: "X-Frame-Options",
+                    value: "SAMEORIGIN",
+                },
+                {
+                    key: "Permissions-Policy",
+                    value: "",
+                },
+                {
+                    key: "X-Content-Type-Options",
+                    value: "nosniff",
+                },
+                {
+                    key: "Referrer-Policy",
+                    value: "strict-origin-when-cross-origin",
+                },
+                {
+                    key: "Content-Security-Policy",
+                    value: `
+                                default-src 'self' https:;
+                                img-src 'self' https: data:${process.env.NODE_ENV === "development" ? " http:" : ""};
+                                media-src 'self' https: data:${process.env.NODE_ENV === "development" ? " http:" : ""};
+                                style-src 'self' 'unsafe-inline'; 
+                                font-src 'self' https: data:;
+                                script-src 'self' 'unsafe-inline' https:${process.env.NODE_ENV === "development" ? " 'unsafe-eval'" : ""};
+                                connect-src 'self' https:${process.env.NODE_ENV === "development" ? " http:" : ""};
+                                frame-ancestors ${process.env.ADMIN_URL};
+                            `
+                        .replace(/\s{2,}/g, " ")
+                        .trim(),
+                },
+            ],
+        },
+    ],
+};
+
+module.exports = withBundleAnalyzer(nextConfig);