create-sitecore-jss 22.2.0-canary.1 → 22.2.0-canary.10

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-shadow.scss

@@ -0,0 +1,42 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.promo-shadow {
+    max-width: 960px;
+    padding: 0;
+    border-top-width: 3px;
+    border-top-color: $promo-shadow-border;
+    border-style: solid;
+    overflow: visible;
+    position: relative;
+    &.promo {
+        float: left;
+    }
+    >.component-content {
+        @include respond-to(all-mobile) {
+            margin: 0 10px 30px 10px;
+        }
+        padding: 15px;
+        margin: 0 0 30px 0;
+        &:before, &:after {
+            opacity: 0.7;
+            box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
+            position: absolute;
+            z-index: -1;
+            height: 20%;
+            max-height: 100px;
+            max-width: 460px;
+            width: 47%;
+            content: "";
+            bottom: 10px;
+        }
+        &:before {
+            left: 2%;
+            transform: rotate(-3deg);
+        }
+        &:after {
+            right: 2%;
+            transform: rotate(3deg);
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/index.scss

@@ -0,0 +1,3 @@
+@import "absolute-bottom-link";
+@import "promo-hero";
+@import "promo-shadow";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/_rich-text-lists.scss

@@ -0,0 +1,63 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+
+.rich-text-lists,
+.field-featurelist {
+  ul {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    li {
+      @include font-size(1.3);
+      position: relative;
+      line-height: 21px;
+      list-style: none;
+      margin: 0;
+      padding: 5px 0 5px 25px;
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f00c';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.field-featurelist {
+  ul {
+    li {
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f046';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.media-link {
+  &.file-type-icon-media-link {
+    float: left;
+    .field-filetypeicon {
+      text-align: center;
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/index.scss

@@ -0,0 +1 @@
+@import "rich-text-lists";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_background-colors.scss

@@ -0,0 +1,14 @@
+@import 'sass/abstracts/vars';
+
+.container-gray-background {
+  background: $bg-light-gray;
+}
+.container-clean-background {
+  background: $bg-basic-color;
+}
+.container-dark-background {
+  background: $bg-black-active;
+}
+.container-color-background {
+  background: $bg-blue;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_indent.scss

@@ -0,0 +1,13 @@
+@import 'sass/abstracts/vars';
+.indent {
+  margin: 0 $extralarge-margin;
+  &.col-xxl-12, &.col-xl-12, &.col-lg-12, &.col-md-12, &.col-12 {
+    width: calc(100% - ($extralarge-margin * 2));
+  }
+}
+.indent-top {
+  margin-top: $middle-margin;
+}
+.indent-bottom {
+  margin-bottom: $middle-margin;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/index.scss

@@ -0,0 +1,2 @@
+@import "background-colors";
+@import "indent";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/title/_component-title.scss

@@ -0,0 +1,30 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+
+.title {
+  background: $title-bg;
+
+  h1,
+  .field-title {
+    @include border-basic(bottom, $border-basic-color);
+    font-size: $font-extrabig;
+    margin-bottom: $small-margin;
+    color: $title-color;
+    line-height: normal;
+    padding-bottom: 10px;
+    display: block;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $title-color-active;
+    }
+
+    > a,
+    > span {
+      text-decoration: none;
+    }
+  }
+
+  @import 'sass/variants/title';
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/title/index.scss

@@ -0,0 +1 @@
+@import "component-title";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/main.scss

@@ -0,0 +1,4 @@
+@import "base";
+@import "components";
+@import "variants";
+@import "app";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/variants/index.scss

@@ -0,0 +1,6 @@
+@import "link-list";
+@import "navigation";
+@import "page-content";
+@import "promo";
+@import "rich-text";
+@import "title";

package/dist/templates/nextjs-sxa/src/assets/sass/components/_component-image.scss

@@ -9,7 +9,7 @@
         display: inline-block;
         max-width: 100%;
     }
-    .image-caption {
+    span {
         display: block;
         font-style: italic;
         font-size: $font-small;

package/dist/templates/node-xmcloud-proxy/.env

@@ -0,0 +1,8 @@
+# Your proxy port (default: 3001)
+PROXY_PORT=
+
+# Your proxy server bundle path
+PROXY_BUNDLE_PATH=
+
+# Set the DEBUG environment variable to 'sitecore-jss:*,sitecore-jss:proxy,http-proxy-middleware*' to see all logs:
+#DEBUG=sitecore-jss:*,http-proxy-middleware*

package/dist/templates/node-xmcloud-proxy/README.md

@@ -0,0 +1,36 @@
+# Node XM Cloud Proxy
+
+> Sitecore JSS Proxy for XM Cloud is considered experimental.
+
+[Documentation](<TODO>)
+
+This is a sample setup showing one of how you can configure XM Cloud rendering server.
+
+## Pre-requisites
+
+1. SPA sample supports XM Cloud out of the box.
+
+1. Build your SPA app bundle with `jss build`. The build output should be placed in the `dist` folder.
+
+## Setup
+
+Open `config.js` and specify your application settings.
+
+### Environment Variables
+
+The following environment variables can be set to configure the Proxy sample instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
+
+| Parameter                              | Description                                                                                                                                |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `PROXY_BUNDLE_PATH`                        | Path to the JSS SPA app's `server.bundle.js`. Default can be seen in [config.js](./config.js) file.                                                                                                                    |
+| `PROXY_PORT`                              | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js) file.                                                             |
+| `DEBUG`                  | Optional. Debug level for the proxy. Set the DEBUG environment variable to 'sitecore-jss:*,proxy*,http-proxy-middleware*' to see all logs.                                                                                                                  |
+
+## Build & run
+
+1. Run `npm install`
+
+1. Run `npm run start`
+
+You should be able to see the following message:
+`server listening on port 3001!`.

package/dist/templates/node-xmcloud-proxy/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "node-xmcloud-sample",
+  "version": "22.1.0-canary",
+  "description": "Node XM Cloud Proxy sample for running XM Cloud JSS SPA apps",
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "scripts": {
+    "start": "ts-node ./src/index.ts"
+  },
+  "dependencies": {
+    "compression": "^1.7.4",
+    "express": "^4.18.2",
+    "dotenv": "^16.0.3",
+    "http-proxy-middleware": "^3.0.0"
+  },
+  "devDependencies": {
+    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.17.17",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.9.5"
+  }
+}

package/dist/templates/node-xmcloud-proxy/src/config.ts

@@ -0,0 +1,19 @@
+import { Config, ServerBundle } from './types';
+
+/**
+ * The server.bundle.js file from your pre-built SPA app.
+ */
+const bundlePath = process.env.PROXY_BUNDLE_PATH || `../dist/server.bundle`;
+
+const serverBundle: ServerBundle = require(bundlePath);
+
+export const config: Config = {
+  /**
+   * The require'd server.bundle.js file from your pre-built SPA app.
+   */
+  serverBundle,
+  /**
+   * Port which will be used when start the proxy
+   */
+  port: process.env.PROXY_PORT || 3001,
+};

package/dist/templates/node-xmcloud-proxy/src/index.ts

@@ -0,0 +1,161 @@
+import 'dotenv/config';
+import express, { Response } from 'express';
+import compression from 'compression';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import { debug } from '@sitecore-jss/sitecore-jss';
+import { config } from './config';
+
+const server = express();
+
+const {
+  renderView,
+  parseRouteUrl,
+  dictionaryServiceFactory,
+  layoutServiceFactory,
+} = config.serverBundle;
+
+/**
+ * Required server bundle properties
+ */
+const requiredProperties = [
+  'renderView',
+  'parseRouteUrl',
+  'clientFactory',
+  'siteName',
+  'defaultLanguage',
+  'layoutServiceFactory',
+  'dictionaryServiceFactory',
+  'graphQLEndpointPath',
+  'graphQLEndpoint',
+];
+
+const missingProperties = requiredProperties.filter((property) => !config.serverBundle[property]);
+
+if (missingProperties.length > 0) {
+  throw new Error(
+    `ERROR: The serverBundle should export the following properties: ${missingProperties.join(
+      ', '
+    )}. Please check your server bundle.`
+  );
+}
+
+const layoutService = layoutServiceFactory.create();
+
+const dictionaryService = dictionaryServiceFactory.create();
+
+/**
+ * Parse requested url in order to detect current route and language
+ * @param {string} reqRoute requested route
+ */
+const getRouteParams = (reqRoute: string) => {
+  const routeParams = parseRouteUrl(reqRoute);
+  let lang;
+  let route;
+
+  if (routeParams) {
+    route = routeParams.sitecoreRoute || '/';
+
+    if (!route.startsWith('/')) {
+      route = `/${route}`;
+    }
+
+    lang = routeParams.lang || '';
+  }
+
+  return { route, lang };
+};
+
+/**
+ * Handle unexpected error
+ * @param {Response} res server response
+ * @param {Error} err error
+ */
+const handleError = (res: Response, err: unknown) => {
+  debug.proxy('response error %o', err);
+
+  res.status(500).send('Internal Server Error');
+};
+
+// enable gzip compression for appropriate file types
+server.use(compression());
+
+// turn off x-powered-by http header
+server.settings['x-powered-by'] = false;
+
+// Serve static app assets from local /dist folder
+server.use(
+  '/dist',
+  express.static('dist', {
+    fallthrough: false, // force 404 for unknown assets under /dist
+  })
+);
+
+/**
+ * Proxy browser GraphQL requests to the Sitecore GraphQL endpoint
+ */
+server.use(
+  config.serverBundle.graphQLEndpointPath,
+  createProxyMiddleware({
+    target: config.serverBundle.graphQLEndpoint,
+    changeOrigin: true,
+  })
+);
+
+server.use(async (req, res) => {
+  debug.proxy(`performing SSR for ${req.originalUrl}`);
+
+  try {
+    const { route, lang } = getRouteParams(req.originalUrl);
+
+    if (!route) {
+      debug.proxy('no route detected, returning 404');
+
+      res.sendStatus(404);
+
+      return;
+    }
+
+    // Language is required. In case it's not specified in the requested URL, fallback to the default language from the app configuration.
+    const layoutData = await layoutService.fetchLayoutData(
+      route,
+      lang || config.serverBundle.defaultLanguage
+    );
+
+    const viewBag = { dictionary: {} };
+
+    viewBag.dictionary = await dictionaryService.fetchDictionaryData(
+      layoutData.sitecore.context.language || config.serverBundle.defaultLanguage
+    );
+
+    renderView(
+      (err, result) => {
+        if (err) {
+          handleError(res, err);
+          return;
+        }
+
+        if (!result) {
+          debug.proxy('no result returned from renderView, returning 204');
+
+          res.status(204).send();
+          return;
+        }
+
+        const statusCode = layoutData.sitecore.route ? 200 : 404;
+
+        debug.proxy('sending response with status %s', statusCode);
+
+        res.status(statusCode).send(result.html);
+      },
+      route,
+      layoutData,
+      viewBag
+    );
+  } catch (err) {
+    handleError(res, err);
+  }
+});
+
+server.listen(config.port, () => {
+  console.log(`server listening on port ${config.port}!`);
+});

package/dist/templates/node-xmcloud-proxy/src/types.ts

@@ -0,0 +1,59 @@
+import { GraphQLRequestClientFactory } from '@sitecore-jss/sitecore-jss';
+import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
+import { LayoutService, LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
+
+interface ServerResponse {
+  /**
+   * The rendered HTML to return to the client
+   */
+  html: string;
+  /**
+   * Set the HTTP status code. If not set, the status code returned from Layout Service is returned.
+   */
+  status?: number;
+  /**
+   * Sets a redirect URL, causing the reply to send a HTTP redirect instead of the HTML content.
+   * Note: when using this you must set the status code to 301 or 302.
+   */
+  redirect?: string;
+}
+
+declare type AppRenderer = (
+  callback: (error: Error | null, result: ServerResponse | null) => void,
+  path: string,
+  /**
+   * Data returned by Layout Service. If the route does not exist, null.
+   */
+  layoutData: LayoutServiceData,
+  viewBag: {
+    [key: string]: unknown;
+    dictionary: { [key: string]: string };
+  }
+) => void;
+
+declare type RouteUrlParser = (
+  url: string
+) => {
+  sitecoreRoute?: string;
+  lang?: string;
+  qsParams?: string;
+};
+
+export interface ServerBundle {
+  [key: string]: unknown;
+  renderView: AppRenderer;
+  parseRouteUrl: RouteUrlParser;
+  clientFactory: GraphQLRequestClientFactory;
+  siteName: string;
+  defaultLanguage: string;
+  layoutServiceFactory: { create: () => LayoutService };
+  dictionaryServiceFactory: { create: () => DictionaryService };
+  graphQLEndpointPath: string;
+  graphQLEndpoint: string;
+}
+
+export interface Config {
+  [key: string]: unknown;
+  port: string | number;
+  serverBundle: ServerBundle;
+}

package/dist/templates/node-xmcloud-proxy/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "newLine": "LF",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noFallthroughCasesInSwitch": true,
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "strictFunctionTypes": false,
+    "downlevelIteration": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.1",
+  "version": "22.2.0-canary.10",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "7dd64ce5a019e4579596beae31315db262a4700f"
+  "gitHead": "d5b46f1661d99e8936746e964dc3c2ecd61b9e05"
 }