#520166 added bootstrap css and Layout component for SXA side (#972)

* #520166 added bootstrap css and Layout component for SXA side * #520166 update yarn.lock * #520166 removed wrong css
Sitecore · Apr 12, 2022 · 4d03320 · 4d03320
1 parent a919354
commit 4d03320
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 64 deletions.
diff --git a/packages/create-sitecore-jss/package.json b/packages/create-sitecore-jss/package.json
@@ -30,6 +30,7 @@
     "dist"
   ],
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "chalk": "^4.1.2",
     "cross-spawn": "^7.0.0",
     "diff": "^5.0.0",

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx
@@ -0,0 +1,52 @@
+/**
+ * This Layout needs for SXA example.
+ */
+import React from 'react';
+import Head from 'next/head';
+import {
+  Placeholder,
+  VisitorIdentification,
+  getPublicUrl,
+  LayoutServiceData,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import Navigation from 'src/Navigation';
+
+// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
+// If you're not supporting the Experience Editor, you can remove this.
+const publicUrl = getPublicUrl();
+
+interface LayoutProps {
+  layoutData: LayoutServiceData;
+}
+
+const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
+  const { route } = layoutData.sitecore;
+
+  return (
+    <>
+      <Head>
+        <title>{route?.fields?.pageTitle?.value || 'Page'}</title>
+        <link rel="icon" href={`${publicUrl}/favicon.ico`} />
+      </Head>
+
+      {/*
+        VisitorIdentification is necessary for Sitecore Analytics to determine if the visitor is a robot.
+        If Sitecore XP (with xConnect/xDB) is used, this is required or else analytics will not be collected for the JSS app.
+        For XM (CMS-only) apps, this should be removed.
+
+        VI detection only runs once for a given analytics ID, so this is not a recurring operation once cookies are established.
+      */}
+      <VisitorIdentification />
+
+      <Navigation />
+      {/* root placeholder for the app, which we add components to using route data */}
+      <div className="container">
+        <div className="row">
+          {route && <Placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main" rendering={route} />}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sxa-styles.css b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sxa-styles.css
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/_app.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/_app.tsx
@@ -1,7 +1,7 @@
 import type { AppProps } from 'next/app';
 import { I18nProvider } from 'next-localization';
 
-import 'assets/sxa-styles.css';
+import 'bootstrap/dist/css/bootstrap.css';
 import 'assets/app.css';
 
 function App({ Component, pageProps }: AppProps): JSX.Element {

diff --git a/yarn.lock b/yarn.lock
@@ -7921,6 +7921,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bootstrap@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "bootstrap@npm:5.1.3"
+  peerDependencies:
+    "@popperjs/core": ^2.10.2
+  checksum: 301b5ed872efba061104cf22ac93568e3837867fb5527ab9326a51510fb752bd4883e1d488225c8be72f86d9d3a55ef5b166aa7fa62c2fdd077c3f05b65752f8
+  languageName: node
+  linkType: hard
+
 "boxen@npm:^1.2.1":
   version: 1.3.0
   resolution: "boxen@npm:1.3.0"
@@ -9639,6 +9648,7 @@ __metadata:
     "@types/node": ^16.11.7
     "@types/sinon": ^10.0.6
     "@types/sinon-chai": ^3.2.8
+    bootstrap: ^5.1.3
     chai: ^4.3.4
     chalk: ^4.1.2
     chokidar: ^3.5.2