Staging

.eslintrc.js

@@ -1,32 +1,41 @@
-/* eslint-disable prettier/prettier */
 module.exports = {
-  parser: 'babel-eslint',
+  parser: "babel-eslint",
   parserOptions: {
     ecmaVersion: 6,
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
       modules: true,
       experimentalObjectRestSpread: true,
     },
   },
-  extends: ['plugin:prettier/recommended', 'airbnb'],
-  plugins: ['react', 'jsx-a11y', 'import', 'prettier'],
+  extends: ["plugin:prettier/recommended", "airbnb"],
+  plugins: ["react", "jsx-a11y", "import", "prettier"],
   env: {
     es6: true,
     browser: true,
     node: true,
     jest: true,
   },
   rules: {
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-    "react/prefer-stateless-function":[0, { "ignorePureComponents": true }],
+    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
+    "react/prefer-stateless-function": [0, { ignorePureComponents: true }],
     "react/prop-types": [0],
-    'func-names': ['error', 'never'],
-    quotes: 'off',
-    'prettier/prettier': 'off',
-    'prop-types': 'off',
-    'react/destructuring-assignment': 'off',
-    'eslint-disable-next-line jsx-a11y/anchor-is-valid':'off',
+    "func-names": ["error", "never"],
+    quotes: "off",
+    "prop-types": "off",
+    "no-continue": "off",
+    "guard-for-in": "off",
+    "global-require": "off",
+    "no-param-reassign": "off",
+    "prettier/prettier": "off",
+    "consistent-return": "off",
+    "no-unused-expressions": "off",
+    "no-restricted-syntax": "off",
+    "react/no-array-index-key": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "react/destructuring-assignment": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "eslint-disable-next-line jsx-a11y/anchor-is-valid": "off",
   },
 };

README.md

@@ -1,4 +1,4 @@
-[![Contentstack](https://camo.githubusercontent.com/d24f513afa94a4a762533d54a0f590300dbd0413/68747470733a2f2f7777772e636f6e74656e74737461636b2e636f6d2f646f63732f7374617469632f696d616765732f636f6e74656e74737461636b2e706e67)](https://www.contentstack.com/)
+[![Contentstack Logo](/public/contentstack-readme-logo.png)](https://www.contentstack.com/)
 
 
 # Build a Starter Website with Next.js and Contentstack

components/about-section-bucket.js

@@ -1,6 +1,5 @@
-/* eslint-disable no-undef */
 import React from "react";
-import ReactHtmlParser from "react-html-parser";
+import parse from "html-react-parser";
 
 export default function AboutSectionBucket(props) {
   const { sectionWithBuckets } = props;
@@ -13,7 +12,7 @@ export default function AboutSectionBucket(props) {
 
         <div className="mission-section-content">
           {bucket.title_h3 && <h3>{bucket.title_h3}</h3>}
-          {bucket.description && ReactHtmlParser(bucket.description)}
+          {bucket.description && parse(bucket.description)}
         </div>
       </div>
     );

components/archive-relative.js

@@ -1,7 +1,6 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
 import Link from "next/link";
-import ReactHtmlParser from "react-html-parser";
+import parse from "html-react-parser";
 
 export default function ArchiveRelative(props) {
   const { blogs } = props;
@@ -12,7 +11,7 @@ export default function ArchiveRelative(props) {
           <a>
             <div>
               <h4>{blog.title}</h4>
-              {ReactHtmlParser(blog.body.slice(0, 80))}
+              {parse(blog.body.slice(0, 80))}
             </div>
           </a>
         </Link>

components/blog-banner.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from "react";
 
 export default function BlogBanner(props) {

components/blog-section.js

@@ -1,11 +1,6 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable react/prop-types */
-/* eslint-disable react/prefer-stateless-function */
-/* eslint-disable no-undef */
-/* eslint-disable react/no-array-index-key */
 import React from "react";
 import Link from "next/link";
-import ReactHtmlParser from "react-html-parser";
+import parse from "html-react-parser";
 
 class BlogSection extends React.Component {
   render() {
@@ -34,7 +29,7 @@ class BlogSection extends React.Component {
               )}
               <div className="featured-content">
                 {blog.title && <h3>{blog.title}</h3>}
-                {blog.body && ReactHtmlParser(blog.body.slice(0, 300))}
+                {blog.body && parse(blog.body.slice(0, 300))}
                 {blog.url && (
                   <Link href={blog.url} passHref>
                     <a className="blogpost-readmore">{"Read More -->"}</a>

components/card-section.js

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
 import Link from "next/link";
 

components/devtools.js

@@ -0,0 +1,74 @@
+import React from "react";
+import dynamic from "next/dynamic";
+
+const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
+
+function filterObject(inputObject) {
+  const unWantedProps = [
+    "uid",
+    "_version",
+    "ACL",
+    "_in_progress",
+    "created_at",
+    "created_by",
+    "updated_at",
+    "updated_by",
+    "publish_details",
+  ];
+  for (const key in inputObject) {
+    unWantedProps.includes(key) && delete inputObject[key];
+    if (typeof inputObject[key] !== "object") {
+      continue;
+    }
+    inputObject[key] = filterObject(inputObject[key]);
+  }
+  return inputObject;
+}
+
+const DevTools = ({ response }) => {
+  const filteredJson = filterObject(response);
+  return (
+    <div
+      className="modal fade"
+      id="staticBackdrop"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabIndex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div className="modal-dialog modal-lg">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h2 className="modal-title" id="staticBackdropLabel">
+              Json Response
+            </h2>
+            <button
+              type="button"
+              className="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            />
+          </div>
+          <div className="modal-body">
+            {response ? (
+              <pre id="jsonViewer">
+                {response && (
+                  <DynamicReactJson
+                    src={filteredJson}
+                    collapsed={1}
+                    name="response"
+                    enableClipboard={false}
+                  />
+                )}
+              </pre>
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default DevTools;

components/footer.js

@@ -1,7 +1,6 @@
-/* eslint-disable jsx-a11y/alt-text */
 import React from "react";
 import Link from "next/link";
-import ReactHtmlParser from "react-html-parser";
+import parse from "html-react-parser";
 
 export default function Footer(props) {
   const { footer } = props;
@@ -21,7 +20,7 @@ export default function Footer(props) {
         <div className="col-half">
           <nav>
             <ul className="nav-ul">
-              {footer.navigation.link?.map(menu => (
+              {footer.navigation.link?.map((menu) => (
                 <li className="footer-nav-li" key={menu.title}>
                   <Link href={menu.href}>{menu.title}</Link>
                 </li>
@@ -31,7 +30,7 @@ export default function Footer(props) {
         </div>
         <div className="col-quarter social-link">
           <div className="social-nav">
-            {footer.social.social_share?.map(social => (
+            {footer.social.social_share?.map((social) => (
               <a
                 href={social.link.href}
                 title={social.link.title}
@@ -44,7 +43,7 @@ export default function Footer(props) {
         </div>
       </div>
       <div className="copyright">
-        {footer.copyright && ReactHtmlParser(footer.copyright)}
+        {footer.copyright && parse(footer.copyright)}
       </div>
     </footer>
   );

components/header.js

@@ -1,23 +1,27 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
 import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import ReactHtmlParser from "react-html-parser";
+import parse from "html-react-parser";
 
 export default function Header(props) {
   const { header } = props;
   const router = useRouter();
   return (
     <header className="header">
-      {header.notification_bar.show_announcement ? (
-        <div className="note-div">
-          {ReactHtmlParser(header.notification_bar.announcement_text)}
-        </div>
-      ) : (
-        ""
-      )}
+      <div className="note-div">
+        {header.notification_bar.show_announcement ? (
+          parse(header.notification_bar.announcement_text)
+        ) : (
+          <div style={{ visibility: "hidden" }}>Devtools section</div>
+        )}
+        <span
+          className="devtools"
+          data-bs-toggle="modal"
+          data-bs-target="#staticBackdrop"
+        >
+          <img src="/devtools.gif" alt="dev tools icon" title="json preview" />
+        </span>
+      </div>
       <div className="max-width header-div">
         <div className="wrapper-logo">
           <Link href="/" className="logo-tag" title="Contentstack">
@@ -35,10 +39,18 @@ export default function Header(props) {
         </label>
         <nav className="menu">
           <ul className="nav-ul header-ul">
-            {header.navigation_menu?.map(list => (
+            {header.navigation_menu?.map((list) => (
               <li key={list.label} className="nav-li">
                 <Link href={list.page_reference[0].url}>
-                  <a className={router.pathname === list.page_reference[0].url ? "active" : ""}>{list.label}</a>
+                  <a
+                    className={
+                      router.pathname === list.page_reference[0].url
+                        ? "active"
+                        : ""
+                    }
+                  >
+                    {list.label}
+                  </a>
                 </Link>
               </li>
             ))}

components/hero-banner.js

@@ -1,5 +1,3 @@
-/* eslint-disable eqeqeq */
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
 import Link from "next/link";
 
@@ -12,13 +10,13 @@ export default function HeroBanner(props) {
         background: banner.bg_color ? banner.bg_color : "",
       }}
     >
-      <div className={`${props.title == "about" ? "about" : "home"}-content`}>
+      <div className={`${props.title === "about" ? "about" : "home"}-content`}>
         {banner.banner_title && (
           <h1 className="hero-title">{banner.banner_title}</h1>
         )}
         {banner.banner_description ? (
           <p
-            className={`hero-description ${props.title == "about"
+            className={`hero-description ${props.title === "about"
               && "about-desc"}`}
           >
             {banner.banner_description}

components/layout.js

@@ -1,11 +1,20 @@
-/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-unused-expressions */
 import React from "react";
 import Head from "next/head";
 import Header from "./header";
 import Footer from "./footer";
+import DevTools from "./devtools";
 
 class Layout extends React.Component {
   render() {
+    const {
+      header, footer, page, blogpost, children,
+    } = this.props;
+
+    const jsonObj = { header, footer };
+    page && (jsonObj.page = page);
+    blogpost && (jsonObj.blog_post = blogpost);
+
     function metaData(seo) {
       const metaArr = [];
       for (const key in seo) {
@@ -29,6 +38,24 @@ class Layout extends React.Component {
             href="https://fonts.googleapis.com/css?family=Inter&display=swap"
             rel="stylesheet"
           />
+          <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
+            integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
+            crossOrigin="anonymous"
+            referrerPolicy="no-referrer"
+          />
+          <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+            crossOrigin="anonymous"
+          />
+          <script
+            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+            crossOrigin="anonymous"
+          />
           <meta
             name="application-name"
             content="Contentstack-Nextjs-Starter-App"
@@ -44,13 +71,16 @@ class Layout extends React.Component {
           <link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png" />
           <meta name="theme-color" content="#317EFB" />
           <title>Contentstack-Nextjs-Starter-App</title>
-          {this.props.seo && this.props.seo.enable_search_indexing
-            ? metaData(this.props.seo)
+          {page.seo && page.seo.enable_search_indexing
+            ? metaData(page.seo)
             : null}
         </Head>
-        {this.props.header ? <Header header={this.props.header} /> : ""}
-        <main className="mainClass">{this.props.children}</main>
-        {this.props.footer ? <Footer footer={this.props.footer} /> : ""}
+        {header ? <Header header={header} /> : ""}
+        <main className="mainClass">
+          {children}
+          {Object.keys(jsonObj).length && <DevTools response={jsonObj} />}
+        </main>
+        {footer ? <Footer footer={footer} /> : ""}
       </>
     );
   }

components/render-components.js

@@ -1,5 +1,3 @@
-/* eslint-disable consistent-return */
-/* eslint-disable react/no-array-index-key */
 import React from "react";
 
 import Section from "./section";