@contentful/create-studio-experiences 1.37.1-dev-20250425T1024-b8bfdfb.0

package/dist/index.js

@@ -0,0 +1,296 @@
+#! /usr/bin/env node
+import { isCancel, cancel, confirm, intro, outro, select, spinner as Spinner, text, password, log, } from '@clack/prompts';
+import yargs from 'yargs';
+import { CtflClient } from './ctflClient.js';
+import { allFrameworks } from './models.js';
+import { FsClient } from './fsClient.js';
+import { generateContentTypeId, isValidPackageName } from './utils.js';
+import { CONSTANTS } from './constants.js';
+const args = await yargs(process.argv.slice(2))
+    .option('host', {
+    alias: 'h',
+    type: 'string',
+    description: 'Contentful host to use (defaults to contentful.com)',
+    default: 'contentful.com',
+})
+    .option('token', {
+    alias: 't',
+    type: 'string',
+    description: 'authToken to use',
+})
+    //allows the option to cleanup at the end
+    .option('dev', {
+    alias: 'd',
+    type: 'boolean',
+    description: 'dev mode',
+    default: false,
+    hidden: true,
+})
+    .strict()
+    .parse();
+const onCancel = (answer) => {
+    if (isCancel(answer)) {
+        cancel('Ok, bye!');
+        process.exit();
+    }
+};
+init().catch((e) => {
+    console.error(e);
+});
+async function init() {
+    const spinner = Spinner();
+    const ctflClient = new CtflClient(args.host);
+    const fsClient = new FsClient(args.host);
+    if (args.token) {
+        const validToken = await ctflClient.setAuthToken(args.token);
+        if (!validToken) {
+            console.error('\nInvalid token\n');
+            process.exit(1);
+        }
+    }
+    try {
+        intro(`👋 Welcome to Contentful Studio Experiences!\nWe will guide you through creating a new project that will be ready-to-go with Studio Experiences!`);
+        const projectType = await select({
+            message: 'Pick a project type.',
+            options: allFrameworks.map((framework) => {
+                return {
+                    label: framework.color(framework.display),
+                    value: framework.name,
+                };
+            }),
+        });
+        onCancel(projectType);
+        const framework = allFrameworks.find((f) => f.name === projectType);
+        const variantType = await select({
+            message: `What type of ${framework?.display} project?`,
+            options: framework.variants.map((variant) => {
+                return {
+                    label: variant.color(variant.display),
+                    value: variant.name,
+                };
+            }),
+        });
+        onCancel(variantType);
+        const variant = framework.variants.find((v) => v.name === variantType);
+        const projectName = (await text({
+            message: 'Where should we install the project?',
+            initialValue: variant.defaultDir,
+            validate(dir) {
+                if (dir.length === 0)
+                    return `Value is required!`;
+                if (fsClient.directoryExists(dir)) {
+                    return `Directory ${dir} already exists`;
+                    //todo enable directory deleting
+                }
+                else if (!isValidPackageName(dir)) {
+                    return `${dir} is not a valid package name`;
+                }
+            },
+        }));
+        onCancel(projectName);
+        let contentTypeId;
+        let contentEntryId;
+        const useExistingSpace = await confirm({
+            message: 'Would you like to connect the project to an existing space with Studio Experiences?',
+        });
+        onCancel(useExistingSpace);
+        if (useExistingSpace) {
+            if (!args.token) {
+                const confirmAnswer = await confirm({
+                    message: "Next, a browser window will open where you will log in (or sign up if you don't have an account) to Contentful, and authorize this CLI tool. Once done, you will see your access token, where you can copy it and paste it back into the command window. \n\nAre you ready to continue?",
+                });
+                onCancel(confirmAnswer);
+                if (!confirmAnswer) {
+                    outro('Ok, bye!');
+                    process.exit();
+                }
+                await ctflClient.getAuthToken();
+                const authToken = await password({
+                    message: 'Enter your Contentful management token from the browser window:',
+                    validate(token) {
+                        if (token.length === 0)
+                            return `Value is required!`;
+                    },
+                });
+                onCancel(authToken);
+                spinner.start('Validating token...');
+                const validToken = await ctflClient.setAuthToken(authToken, true);
+                if (!validToken) {
+                    console.error('\nInvalid token\n');
+                    process.exit(1);
+                }
+                spinner.stop('Token validated!');
+            }
+            const orgs = await ctflClient.getOrgs();
+            const selectedOrgId = (await select({
+                message: 'Select an organization for the space.',
+                options: orgs.map((org) => {
+                    return {
+                        label: org.name,
+                        value: org.id,
+                    };
+                }),
+            }));
+            onCancel(selectedOrgId);
+            const selectedOrg = orgs.find((org) => org.id === selectedOrgId);
+            ctflClient.org = selectedOrg;
+            const spaces = await ctflClient.getSpacesForOrg(selectedOrgId);
+            const spaceEnablements = await ctflClient.getSpaceEnablements(selectedOrgId);
+            const studioExperiencesEnabledSpaceIds = spaceEnablements
+                .filter((val) => val.studioExperiences.enabled)
+                .map((spaceEnablement) => spaceEnablement.sys.space.sys.id);
+            const spacesWithStudioExperienceEnabled = spaces.filter((space) => {
+                return studioExperiencesEnabledSpaceIds.includes(space.id);
+            });
+            const selectedSpaceId = await select({
+                message: 'Select the space to use.',
+                options: spacesWithStudioExperienceEnabled.map((space) => {
+                    return {
+                        label: space.name,
+                        value: space.id,
+                    };
+                }),
+            });
+            onCancel(selectedSpaceId);
+            const selectedSpace = spaces.find((space) => space.id === selectedSpaceId);
+            ctflClient.space = selectedSpace;
+            const environments = await ctflClient.getEnvironments();
+            let env = environments.length === 1 ? environments[0] : undefined;
+            if (environments.length > 1) {
+                const selectedEnv = await select({
+                    message: 'Select the environment to use.',
+                    options: environments.map((env) => {
+                        return {
+                            label: env.name,
+                            value: env.id,
+                        };
+                    }),
+                });
+                onCancel(selectedEnv);
+                env = environments.find((item) => item.id === selectedEnv);
+            }
+            ctflClient.env = env;
+            const apiKeys = await ctflClient.getApiKeys();
+            if (apiKeys.length === 0) {
+                spinner.start('No API keys are currently found, creating one.');
+                const newApiKey = await ctflClient.createApiKeys();
+                await ctflClient.getPreviewAccessToken(newApiKey.previewKeyId);
+                spinner.stop('API key created!');
+            }
+            else if (apiKeys.find((item) => item.name === ctflClient.apiKeysName)) {
+                log.message('Using existing API key for Studio Experiences.');
+                const selectedApiKey = apiKeys.find((apiKey) => apiKey.name === ctflClient.apiKeysName);
+                ctflClient.apiKey = selectedApiKey;
+                await ctflClient.getPreviewAccessToken(selectedApiKey.previewKeyId);
+            }
+            else {
+                const createNewOption = { label: 'Create new API key', value: 'create' };
+                const selectedApiKeyId = await select({
+                    message: 'Select API key to use.',
+                    options: [
+                        ...apiKeys.map((apiKey) => {
+                            return {
+                                label: apiKey.name,
+                                value: apiKey.accessToken,
+                            };
+                        }),
+                        createNewOption,
+                    ],
+                });
+                onCancel(selectedApiKeyId);
+                if (selectedApiKeyId === createNewOption.value) {
+                    spinner.start('Creating new API key.');
+                    const apiKey = await ctflClient.createApiKeys();
+                    await ctflClient.getPreviewAccessToken(apiKey.previewKeyId);
+                    spinner.stop('API key created!');
+                }
+                else {
+                    const selectedApiKey = apiKeys.find((apiKey) => apiKey.accessToken === selectedApiKeyId);
+                    ctflClient.apiKey = selectedApiKey;
+                    await ctflClient.getPreviewAccessToken(selectedApiKey.previewKeyId);
+                }
+            }
+            let contentTypeName;
+            const existingContentType = await ctflClient.getExistingExperienceType();
+            if (existingContentType) {
+                contentTypeName = existingContentType.name;
+                contentTypeId = existingContentType.id;
+                log.message(`Using existing content type for Experiences: ${contentTypeName}`);
+            }
+            else {
+                contentTypeName = (await text({
+                    message: 'Enter a name for the content type for Experiences',
+                    initialValue: CONSTANTS.contentType,
+                    validate(input) {
+                        if (input.length === 0)
+                            return `Value is required!`;
+                        if (input.length > 50)
+                            return 'Value must be 50 characters or less.';
+                    },
+                }));
+                onCancel(contentTypeName);
+                contentTypeId = generateContentTypeId(contentTypeName);
+                await ctflClient.createContentType(contentTypeName, contentTypeId);
+            }
+            contentEntryId = await ctflClient.getContentEntry(CONSTANTS.slug, contentTypeId);
+            if (!contentEntryId) {
+                contentEntryId = await ctflClient.createContentEntry(CONSTANTS.title, CONSTANTS.slug, contentTypeId);
+            }
+            const previewEnvironments = await ctflClient.getPreviewEnvironments();
+            const previewEnv = previewEnvironments.find((item) => item.url === `http://localhost:${variant.devPort}`);
+            if (previewEnvironments.length === 0 || !previewEnv) {
+                spinner.start('No content preview environments for Studio Experiences currently found, creating one.');
+                await ctflClient.createPreviewEnvironment(variant.devPort, contentTypeName, contentTypeId);
+                spinner.stop('Content preview environment created!');
+            }
+            else if (previewEnv) {
+                log.message('Using existing content preview environment for Studio Experiences.');
+                ctflClient.previewEnvironment = previewEnv;
+            }
+        }
+        const projectDir = fsClient.getProjectDir(projectName);
+        spinner.start(`Creating a new project using ${variant.display}, this might take a minute ⏰`);
+        await fsClient.createProject(variant, projectName);
+        spinner.stop('Done creating project and installing dependencies!');
+        const envFileData = useExistingSpace && contentTypeId
+            ? ctflClient.getEnvFileData(contentTypeId)
+            : {
+                environment: ctflClient.env?.id ?? CONSTANTS.environment,
+                spaceId: '*YOUR SPACE ID*',
+                accessToken: '*YOUR ACCESS TOKEN*',
+                previewAccessToken: '*YOUR PREVIEW ACCESS TOKEN*',
+                experienceTypeId: '*YOUR EXPERIENCE CONTENT TYPE ID*',
+            };
+        fsClient.copyEnvFile(projectDir, envFileData);
+        const outroMessages = [
+            '🚀 Your project is ready!\n',
+            useExistingSpace && contentEntryId
+                ? `* Launch Contentful Studio Experiences: https://app.${args.host}/spaces/${ctflClient.space?.id}/experiences/${contentEntryId}`
+                : '* Launch Contentful and navigate to Experiences: https://app.${args.host}/',
+            `* Navigate to your project folder using the terminal: \`cd ${projectName}\``,
+            ...(useExistingSpace
+                ? []
+                : ['* Update your .env.local config file with the necessary environment variables.']),
+            '* Start your project by running `npm run dev` in the terminal.',
+            '* Once your project is running, reload the Studio Experiences canvas.\n',
+            `For additional help, refer to the docs: https://www.contentful.com/developers/docs/experiences/set-up-experiences-sdk/`,
+        ];
+        outro(outroMessages.join('\n'));
+        if (args.dev) {
+            const shouldCleanup = await confirm({
+                message: 'Cleanup?',
+            });
+            onCancel(shouldCleanup);
+            if (shouldCleanup) {
+                fsClient.deleteDirectory(projectDir);
+                if (!args.token) {
+                    await ctflClient.deleteAuthToken();
+                }
+            }
+        }
+    }
+    catch (e) {
+        console.log(e);
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/models.d.ts

@@ -0,0 +1,27 @@
+type ColorFunc = (str: string | number) => string;
+export interface Framework {
+    name: string;
+    display: string;
+    color: ColorFunc;
+    variants: FrameworkVariant[];
+}
+export interface FrameworkVariant {
+    name: string;
+    display: string;
+    color: ColorFunc;
+    installCommand: string;
+    pathsToCopy: string[];
+    defaultDir: string;
+    devPort: string;
+    templateDir: string;
+    additionalDeps?: string[];
+}
+export declare const allFrameworks: Framework[];
+export type EnvFileData = {
+    environment: string;
+    spaceId: string;
+    accessToken: string;
+    previewAccessToken: string;
+    experienceTypeId: string;
+};
+export {};

package/dist/models.js

@@ -0,0 +1,32 @@
+import kleur from 'kleur';
+export const allFrameworks = [
+    {
+        name: 'react',
+        display: 'React',
+        color: kleur.cyan,
+        variants: [
+            {
+                name: 'vite-ts',
+                display: 'React Vite + TypeScript',
+                color: kleur.white,
+                installCommand: 'npm create vite@latest PROJECT_NAME -- --template react-ts',
+                pathsToCopy: ['src', '.env.template'],
+                defaultDir: 'studio-experiences-react-app',
+                devPort: '5173',
+                templateDir: 'react-vite-ts',
+            },
+            {
+                name: 'next-demo-marketing',
+                display: 'NextJS Marketing Demo',
+                color: kleur.white,
+                installCommand: 'npx create-next-app@latest PROJECT_NAME --ts --eslint --app --src-dir --no-import-alias --no-tailwind',
+                pathsToCopy: ['src', '.env.template', 'next.config.mjs'],
+                defaultDir: 'nextjs-marketing-demo',
+                devPort: '3000',
+                templateDir: 'nextjs-marketing-demo',
+                additionalDeps: ['next-i18n-router'],
+            },
+        ],
+    },
+];
+//# sourceMappingURL=models.js.map

package/dist/models.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../src/models.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,MAAM,CAAC,MAAM,aAAa,GAAgB;IACxC;QACE,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,KAAK,CAAC,IAAI;QACjB,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,yBAAyB;gBAClC,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,cAAc,EAAE,4DAA4D;gBAC5E,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC;gBACrC,UAAU,EAAE,8BAA8B;gBAC1C,OAAO,EAAE,MAAM;gBACf,WAAW,EAAE,eAAe;aAC7B;YACD;gBACE,IAAI,EAAE,qBAAqB;gBAC3B,OAAO,EAAE,uBAAuB;gBAChC,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,cAAc,EACZ,uGAAuG;gBACzG,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,iBAAiB,CAAC;gBACxD,UAAU,EAAE,uBAAuB;gBACnC,OAAO,EAAE,MAAM;gBACf,WAAW,EAAE,uBAAuB;gBACpC,cAAc,EAAE,CAAC,kBAAkB,CAAC;aACrC;SACF;KACF;CACF,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Converts a string to a valid Content Type ID format, i.e. only alphanumeric characters
+ * @param {string} input - The input string to be converted.
+ * @returns {string} The converted string.
+ */
+export declare const generateContentTypeId: (input: string) => string;
+export declare const isValidPackageName: (projectName: string) => boolean;

package/dist/utils.js

@@ -0,0 +1,24 @@
+/**
+ * Converts a string to a valid Content Type ID format, i.e. only alphanumeric characters
+ * @param {string} input - The input string to be converted.
+ * @returns {string} The converted string.
+ */
+export const generateContentTypeId = (input) => {
+    // Remove non-alphanumeric characters and split by them
+    const words = input.split(/[\W_]+/);
+    // Convert the first word to lowercase, and the rest to lowercase with the first letter capitalized
+    return words
+        .map((word, index) => {
+        if (index === 0) {
+            return word.toLowerCase();
+        }
+        else {
+            return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        }
+    })
+        .join('');
+};
+export const isValidPackageName = (projectName) => {
+    return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(projectName);
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAU,EAAE;IAC7D,uDAAuD;IACvD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEpC,mGAAmG;IACnG,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;QACnC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QACpE,CAAC;IACH,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,WAAmB,EAAE,EAAE;IACxD,OAAO,4DAA4D,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;AACxF,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@contentful/create-studio-experiences",
+  "version": "1.37.1-dev-20250425T1024-b8bfdfb.0",
+  "description": "A CLI tool to get up and running with Contentful Studio Experiences quickly",
+  "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/create-studio-experiences#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/contentful/experience-builder.git",
+    "directory": "packages/create-studio-experiences"
+  },
+  "bugs": {
+    "url": "https://github.com/contentful/experience-builder/issues"
+  },
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "readme.md",
+    "package.json",
+    "dist/**/*.*",
+    "bin/**/*.*",
+    "templates/**/*.*"
+  ],
+  "scripts": {
+    "precreate": "npm run copy-templates",
+    "create": "node ./dist/index.js -d",
+    "postcreate": "npm run delete-templates",
+    "copy-templates": "node ./dist/copyTemplates.js",
+    "delete-templates": "rimraf ./templates",
+    "dev": "tsc --watch",
+    "_prebuild": "npm uninstall -g && rimraf dist",
+    "prebuild": "rimraf dist",
+    "prepack": "npm run copy-templates",
+    "postpack": "npm run delete-templates",
+    "build": "tsc",
+    "lint": "eslint src --ext '.ts,.tsx,.js,.jsx' --max-warnings 0 --ignore-path ../../.eslintignore",
+    "lint:fix": "eslint src --ext '.ts,.tsx,.js,.jsx' --fix",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "depcruise": "depcruise src",
+    "create-studio-experiences": "node dist/index.js"
+  },
+  "author": "Contentful GmbH",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/yargs": "^17.0.28",
+    "eslint-plugin-prettier": "^5.0.1",
+    "typescript": "^5.2.2"
+  },
+  "bin": {
+    "create-studio-experiences": "./dist/index.js"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "cross-spawn": "^7.0.5",
+    "kleur": "^4.1.5",
+    "open": "^10.1.0",
+    "yargs": "^17.7.2"
+  },
+  "gitHead": "bb4537c49db187bbf8e801750c16ddab649477a1"
+}

package/templates/nextjs-marketing-demo/.env.template

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_CTFL_ENVIRONMENT=master
+NEXT_PUBLIC_CTFL_SPACE=*YOUR SPACE ID*
+NEXT_PUBLIC_CTFL_ACCESS_TOKEN=*YOUR ACCESS TOKEN*
+NEXT_PUBLIC_CTFL_PREVIEW_ACCESS_TOKEN=*YOUR PREVIEW ACCESS TOKEN*
+NEXT_PUBLIC_CTFL_EXPERIENCE_TYPE=*YOUR EXPERIENCE CONTENT TYPE ID*

package/templates/nextjs-marketing-demo/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

package/templates/nextjs-marketing-demo/README.md

@@ -0,0 +1,22 @@
+# Experiences NextJS Marketing Demo
+
+This app is a starter template for Studio Experiences, showcasing an example marketing website.
+
+## How to Start
+
+1. Copy the `.env.template` file to `.env` in this project directory and set the environment variables as described in [Config](#config)
+2. Set the content preview URL of the experience type to `http://localhost:3000/{entry.fields.slug}`
+3. Run `npm run dev`
+
+## Config
+
+The app reads several environment variables to configure its behavior:
+
+```
+NEXT_PUBLIC_CTFL_ENVIRONMENT=<environment>
+NEXT_PUBLIC_CTFL_SPACE=<space>
+NEXT_PUBLIC_CTFL_ACCESS_TOKEN=<access token>
+NEXT_PUBLIC_CTFL_PREVIEW_ACCESS_TOKEN=<preview access token>
+NEXT_PUBLIC_CTFL_EXPERIENCE_TYPE=<experience type>
+NEXT_PUBLIC_CTFL_DOMAIN=<domain> (contentful.com (prod) or flinkly.com (staging))
+```

package/templates/nextjs-marketing-demo/next.config.mjs

@@ -0,0 +1,21 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/home-page',
+        permanent: true,
+      },
+    ];
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+};
+
+export default nextConfig;

package/templates/nextjs-marketing-demo/src/app/[locale]/[slug]/page.tsx

@@ -0,0 +1,50 @@
+import Experience from '@/components/Experience';
+import Header from '@/components/Header/Header';
+import Footer from '@/components/Footer/Footer';
+import { getExperience } from '@/getExperience';
+import { detachExperienceStyles } from '@contentful/experiences-sdk-react';
+import { Layout } from 'antd';
+import {
+  Footer as LayoutFooter,
+  Header as LayoutHeader,
+  Content as LayoutContent,
+} from 'antd/es/layout/layout';
+import styles from '@/app/page.module.css';
+import '../../../studio-config';
+
+type Page = {
+  params: { locale?: string; slug?: string; preview?: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export default async function ExperiencePage({ params, searchParams }: Page) {
+  const { locale = 'en-US', slug = 'home-page' } = params || {};
+  const { isPreview, expEditorMode } = searchParams;
+  const preview = isPreview === 'true';
+  const editorMode = expEditorMode === 'true';
+  const { experience, error } = await getExperience(slug, locale, preview, editorMode);
+
+  if (error) {
+    return <>{error.message}</>;
+  }
+
+  // extract the styles from the experience
+  const stylesheet = experience ? detachExperienceStyles(experience) : null;
+
+  // experience currently needs to be stringified manually to be passed to the component
+  const experienceJSON = experience ? JSON.stringify(experience) : null;
+  return (
+    <Layout className={styles.layout}>
+      {stylesheet && <style>{stylesheet}</style>}
+      <LayoutHeader className={styles.header}>
+        <Header />
+      </LayoutHeader>
+      <LayoutContent className={styles.content}>
+        <Experience experienceJSON={experienceJSON} locale={locale} />
+      </LayoutContent>
+      <LayoutFooter className={styles.footer}>
+        <Footer />
+      </LayoutFooter>
+    </Layout>
+  );
+}

package/templates/nextjs-marketing-demo/src/app/globals.css

@@ -0,0 +1,37 @@
+:root {
+  /**
+   * Colors
+   * https://ant.design/docs/spec/colors
+   */
+  --gray-1: #fff;
+  --gray-5: #d9d9d9;
+  --gray-7: #8c8c8c;
+  --gray-9: #434343;
+  --gray-12: #141414;
+  --orange-2: #ffe7ba;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--gray-12);
+  background: var(--gray-1);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}