create-sitecore-jss 22.4.1 → 22.5.0-beta.10

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/graphql/GraphQL-IntegratedDemo.sitecore.graphql

@@ -1,71 +1,71 @@
-# This file contains a GraphQL query that will be executed and the result provided to
-# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
-
-# Note that we're executing _two queries_ (datasource and contextItem)
-# within the context of the IntegratedDemoQuery _operation_. This makes it
-# very efficient at gathering data from multiple sources.
-
-query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
-  # Datasource query
-  # $datasource will always be set to the ID of the rendering's datasource item
-  # (as long as the GraphQLData helper is used)
-  datasource: item(path: $datasource, language: $language) {
-    id
-    name
-    # Strongly-typed querying on known templates is possible!
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
-      # Single-line text field
-      sample1 {
-        # the 'jsonValue' field is a JSON blob that represents the object that
-        # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jsonValue
-        value
-      }
-      # General Link field
-      sample2 {
-        jsonValue
-        # Structured querying of the field's values is possible
-        text
-        target
-        url
-        # Access to the template definition is possible
-        definition {
-          type
-          shared
-        }
-      }
-    }
-  }
-
-  # Context/route item query
-  # $contextItem will always be set to the ID of the current context item (the route item)
-  # (as long as the GraphQLData helper is used)
-  contextItem: item(path: $contextItem, language: $language) {
-    id
-    # Get the page title from the app route template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-      pageTitle {
-        value
-      }
-    }
-
-    # List the children of the current route
-    children(hasLayout: true) {
-      results {
-        id
-        # typing fragments can be used anywhere!
-        # so in this case, we're grabbing the 'pageTitle'
-        # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-          pageTitle {
-            jsonValue
-            value
-          }
-        }
-        url{
-          path
-        }
-      }
-    }
-  }
-}
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the IntegratedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource will always be set to the ID of the rendering's datasource item
+  # (as long as the GraphQLData helper is used)
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
+      # Single-line text field
+      sample1 {
+        # the 'jsonValue' field is a JSON blob that represents the object that
+        # should be passed to JSS field rendering helpers (i.e. text, image, link)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem will always be set to the ID of the current context item (the route item)
+  # (as long as the GraphQLData helper is used)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url{
+          path
+        }
+      }
+    }
+  }
+}

package/dist/templates/nextjs-styleguide/sitecore/gitignore

@@ -1,3 +1,3 @@
-manifest
-package
-update-package
+manifest
+package
+update-package

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.graphql

@@ -1,69 +1,69 @@
-# This file contains a GraphQL query that will be executed and the result provided to
-# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
-
-# Note that we're executing _two queries_ (datasource and contextItem)
-# within the context of the ConnectedDemoQuery _operation_. This makes it
-# very efficient at gathering data from multiple sources.
-
-query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
-  # Datasource query
-  # $datasource should be set to the ID of the rendering's datasource item
-  datasource: item(path: $datasource, language: $language) {
-    id
-    name
-    # Strongly-typed querying on known templates is possible!
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo {
-      # Single-line text field
-      sample1 {
-        # the 'jsonValue' field is a JSON blob that represents the object that
-        # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jsonValue
-        value
-      }
-      # General Link field
-      sample2 {
-        jsonValue
-        # Structured querying of the field's values is possible
-        text
-        target
-        url
-        # Access to the template definition is possible
-        definition {
-          type
-          shared
-        }
-      }
-    }
-  }
-
-  # Context/route item query
-  # $contextItem should be set to the ID of the current context item (the route item)
-  contextItem: item(path: $contextItem, language: $language) {
-    id
-    # Get the page title from the app route template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-      pageTitle {
-        value
-      }
-    }
-
-    # List the children of the current route
-    children(hasLayout: true) {
-      results {
-        id
-        # typing fragments can be used anywhere!
-        # so in this case, we're grabbing the 'pageTitle'
-        # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-          pageTitle {
-            jsonValue
-            value
-          }
-        }
-        url{
-          path
-        }
-      }
-    }
-  }
-}
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the ConnectedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource should be set to the ID of the rendering's datasource item
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo {
+      # Single-line text field
+      sample1 {
+        # the 'jsonValue' field is a JSON blob that represents the object that
+        # should be passed to JSS field rendering helpers (i.e. text, image, link)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem should be set to the ID of the current context item (the route item)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url{
+          path
+        }
+      }
+    }
+  }
+}

package/dist/templates/nextjs-styleguide-tracking/data/dictionary/en.yml

@@ -1,5 +1,5 @@
-styleguide-sample: This is a dictionary entry in English as a demonstration
-Documentation: Documentation
-Styleguide: Styleguide
-GraphQL: GraphQL
-Tracking: Tracking
+styleguide-sample: This is a dictionary entry in English as a demonstration
+Documentation: Documentation
+Styleguide: Styleguide
+GraphQL: GraphQL
+Tracking: Tracking

package/dist/templates/nextjs-styleguide-tracking/data/routes/tracking/en.yml

@@ -1,8 +1,8 @@
-fields:
-  pageTitle: Styleguide Tracking | Sitecore JSS
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-    - componentName: Styleguide-Tracking
-      fields:
-        heading: Tracking
-        description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>
+fields:
+  pageTitle: Styleguide Tracking | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: Styleguide-Tracking
+      fields:
+        heading: Tracking
+        description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>

package/dist/templates/nextjs-sxa/package.json

@@ -1,11 +1,11 @@
-{
-  "dependencies": {
-    "bootstrap": "^5.1.3",
-    "font-awesome": "^4.7.0",
-    "sass": "^1.52.3",
-    "sass-alias": "^1.0.5"
-  },
-  "scripts": {
-    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts"
-  }
-}
+{
+  "dependencies": {
+    "bootstrap": "^5.1.3",
+    "font-awesome": "^4.7.0",
+    "sass": "^1.52.3",
+    "sass-alias": "^1.0.5"
+  },
+  "scripts": {
+    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts"
+  }
+}

package/dist/templates/nextjs-sxa/src/Layout.tsx

@@ -3,7 +3,14 @@
  */
 import React from 'react';
 import Head from 'next/head';
-import { Placeholder, LayoutServiceData, Field, HTMLLink } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  Placeholder,
+  LayoutServiceData,
+  Field,
+  DesignLibrary,
+  HTMLLink,
+  RenderingType
+} from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 import Scripts from 'src/Scripts';
 
@@ -40,15 +47,29 @@ const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
 
       {/* root placeholder for the app, which we add components to using route data */}
       <div className={mainClassPageEditing}>
-        <header>
-          <div id="header">{route && <Placeholder name="headless-header" rendering={route} />}</div>
-        </header>
-        <main>
-          <div id="content">{route && <Placeholder name="headless-main" rendering={route} />}</div>
-        </main>
-        <footer>
-          <div id="footer">{route && <Placeholder name="headless-footer" rendering={route} />}</div>
-        </footer>
+        <% if (templates.includes('nextjs-xmcloud') || templates.includes('nextjs-sxa')) { %>
+          {layoutData.sitecore.context.renderingType === RenderingType.Component ? (
+            <DesignLibrary {...layoutData} />
+          ) : (
+            <>
+              <header>
+                <div id="header">
+                  {route && <Placeholder name="headless-header" rendering={route} />}
+                </div>
+              </header>
+              <main>
+                <div id="content">
+                  {route && <Placeholder name="headless-main" rendering={route} />}
+                </div>
+              </main>
+              <footer>
+                <div id="footer">
+                  {route && <Placeholder name="headless-footer" rendering={route} />}
+                </div>
+              </footer>
+            </>
+          )}
+        <% } %>
       </div>
     </>
   );

package/dist/templates/nextjs-sxa/src/assets/basic/_component.scss

@@ -1,48 +1,48 @@
-.component-content {
-  @include respond-to(mobile-large) {
-    .row {
-      padding: 0;
-      margin: 0;
-    }
-  }
-}
-@include respond-to(mobile-large) {
-  .row {
-    margin: 0;
-    padding: 0;
-    > * {
-      padding: 0;
-      margin: 0;
-    }
-  }
-}
-
-.hero-banner {
-  .component-content {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 800px;
-
-    @include respond-to(mobile-large) {
-      height: 300px;
-    }
-  }
-  .sc-image-wrapper {
-    opacity: 0;
-  }
-  &.scEnabledChrome {
-    &.hero-banner-empty {
-      .sc-image-wrapper {
-        display: block;
-        width: 100%;
-  
-        .scEmptyImage {
-          max-height: 800px;
-          max-width: 100%;
-          width: 100%;
-        }
-      }
-    }
-  }
-}
+.component-content {
+  @include respond-to(mobile-large) {
+    .row {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+@include respond-to(mobile-large) {
+  .row {
+    margin: 0;
+    padding: 0;
+    > * {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+
+.hero-banner {
+  .component-content {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 800px;
+
+    @include respond-to(mobile-large) {
+      height: 300px;
+    }
+  }
+  .sc-image-wrapper {
+    opacity: 0;
+  }
+  &.scEnabledChrome {
+    &.hero-banner-empty {
+      .sc-image-wrapper {
+        display: block;
+        width: 100%;
+  
+        .scEmptyImage {
+          max-height: 800px;
+          max-width: 100%;
+          width: 100%;
+        }
+      }
+    }
+  }
+}

package/dist/templates/nextjs-sxa/src/assets/basic/_container.scss

@@ -1,64 +1,64 @@
-@import "@sass/abstracts/mixins";
-@import "variables";
-
-body {
-  font-family: Roboto;
-  color: $main-color;
-}
-
-
-@media (min-width: 1400px) {
-  .container {
-    max-width: 1250px;
-  }
-}
-
-main {
-  .main-header {
-    margin-top: 55px;
-    margin-bottom: 30px;
-
-    @include respond-to(mobile-large) {
-      margin-bottom: 0;
-    }
-
-    h4 {
-      font-size: $text-size-50;
-      font-weight: 500;
-      line-height: 70px;
-    }
-  }
-
-  .main-news-header {
-    margin-top: 60px;
-
-    h2 {
-      font-size: $text-size-36;
-      line-height: 43px;
-    }
-  }
-
-  @include respond-to(mobile-large) {
-    padding-top: 0;
-    margin-bottom: 0;
-
-    .main-header {
-      margin-top: 10px;
-
-      h4 {
-        font-size: $text-size-24;
-        line-height: 32px;
-      }
-    }
-    
-    .main-news-header {
-      padding-bottom: 35px;
-
-      h2 {
-        margin-top: 0;
-        font-size: $text-size-18;
-        line-height: 22px;
-      }
-    }
-  }
-}
+@import "@sass/abstracts/mixins";
+@import "variables";
+
+body {
+  font-family: Roboto;
+  color: $main-color;
+}
+
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1250px;
+  }
+}
+
+main {
+  .main-header {
+    margin-top: 55px;
+    margin-bottom: 30px;
+
+    @include respond-to(mobile-large) {
+      margin-bottom: 0;
+    }
+
+    h4 {
+      font-size: $text-size-50;
+      font-weight: 500;
+      line-height: 70px;
+    }
+  }
+
+  .main-news-header {
+    margin-top: 60px;
+
+    h2 {
+      font-size: $text-size-36;
+      line-height: 43px;
+    }
+  }
+
+  @include respond-to(mobile-large) {
+    padding-top: 0;
+    margin-bottom: 0;
+
+    .main-header {
+      margin-top: 10px;
+
+      h4 {
+        font-size: $text-size-24;
+        line-height: 32px;
+      }
+    }
+    
+    .main-news-header {
+      padding-bottom: 35px;
+
+      h2 {
+        margin-top: 0;
+        font-size: $text-size-18;
+        line-height: 22px;
+      }
+    }
+  }
+}

package/dist/templates/nextjs-sxa/src/assets/basic/_fonts.scss

@@ -1,3 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-/* FontAwesome */
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+/* FontAwesome */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');