From 4d03320dd2bed2b3d4084b76bcd074fcaac1096f Mon Sep 17 00:00:00 2001
From: Ruslan Matkovskyi <100142572+matkovskyi@users.noreply.github.com>
Date: Wed, 13 Apr 2022 00:00:43 +0300
Subject: [PATCH] #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
---
packages/create-sitecore-jss/package.json | 1 +
.../src/templates/nextjs-sxa/src/Layout.tsx | 52 +++++++++++++++
.../nextjs-sxa/src/assets/sxa-styles.css | 63 -------------------
.../templates/nextjs-sxa/src/pages/_app.tsx | 2 +-
yarn.lock | 10 +++
5 files changed, 64 insertions(+), 64 deletions(-)
create mode 100644 packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx
delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sxa-styles.css
diff --git a/packages/create-sitecore-jss/package.json b/packages/create-sitecore-jss/package.json
index 820b9e95c7..2e86c9be7d 100644
--- 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
new file mode 100644
index 0000000000..5ea030ad88
--- /dev/null
+++ 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 (
+ <>
+
+ {route?.fields?.pageTitle?.value || 'Page'}
+