Feat/eco 398 std live preview

.env.sample

@@ -1,10 +1,17 @@
 
-#create environment file name as .env.development.local,.env.production.local
+#create environment file name as .env.local
 #and place following configuration data.
 
 CONTENTSTACK_API_KEY=YOUR_API_KEY
 CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN
 CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT
 
 # For setting region add  CONTENTSTACK_REGION=(Optional for US region) Eg- eu
-# For setting custom host add CONTENTSTACK_CUSTOM_HOST=(Optional)
+
+# For live preview 
+CONTENTSTACK_MANAGEMENT_TOKEN=YOUR_MANAGEMENT_TOKEN 
+CONTENTSTACK_API_HOST=API_HOST_URL #eg- api.contentstack.io
+CONTENTSTACK_APP_HOST=STACK_HOST_URL #eg- app.contentstack.com
+NEXT_PUBLIC_CONTENTSTACK_LIVE_PREVIEW=BOOLEAN_VALUE
+NEXT_PUBLIC_CONTENTSTACK_LIVE_EDIT_TAGS=BOOLEAN_VALUE
+

.eslintrc.js

@@ -24,18 +24,23 @@ module.exports = {
     "func-names": ["error", "never"],
     quotes: "off",
     "prop-types": "off",
+    camelcase: "off",
     "no-continue": "off",
     "guard-for-in": "off",
+    "no-unused-vars": "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",
+    "react/react-in-jsx-scope": "off",
     "jsx-a11y/anchor-is-valid": "off",
+    "import/prefer-default-export": "off",
+    "react/jsx-props-no-spreading": "off",
     "react/destructuring-assignment": "off",
+    "eslint-disable prefer-destructuring": "off",
     "jsx-a11y/label-has-associated-control": "off",
-    "eslint-disable-next-line jsx-a11y/anchor-is-valid": "off",
   },
 };

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Contentstack
+Copyright (c) 2022 Contentstack
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

components/about-section-bucket.js

@@ -1,18 +1,29 @@
-import React from "react";
-import parse from "html-react-parser";
+import React from 'react';
+import parse from 'html-react-parser';
 
 export default function AboutSectionBucket(props) {
   const { sectionWithBuckets } = props;
   function bucketContent(bucket, index) {
     return (
       <div className="mission-content-section" key={index}>
         {bucket.icon && (
-          <img className="mission-icon" src={bucket.icon.url} alt="art work" />
+          <img
+            className="mission-icon"
+            src={bucket.icon.url}
+            alt="art work"
+          />
         )}
 
         <div className="mission-section-content">
-          {bucket.title_h3 && <h3>{bucket.title_h3}</h3>}
-          {typeof bucket.description === "string" && parse(bucket.description)}
+          {bucket.title_h3 && (
+            <h3>{bucket.title_h3}</h3>
+          )}
+          {typeof bucket.description === 'string' && (
+            <div>
+              {' '}
+              {parse(bucket.description)}
+            </div>
+          )}
         </div>
       </div>
     );
@@ -21,11 +32,15 @@ export default function AboutSectionBucket(props) {
   return (
     <div className="member-main-section">
       <div className="member-head">
-        {sectionWithBuckets.title_h2 && <h2>{sectionWithBuckets.title_h2}</h2>}
+        {sectionWithBuckets.title_h2 && (
+          <h2>
+            {sectionWithBuckets.title_h2}
+          </h2>
+        )}
       </div>
       <div className="mission-section">
         <div className="mission-content-top">
-          {sectionWithBuckets.buckets.map(
+          {sectionWithBuckets?.buckets.map(
             (bucket, index) => index < 2 && bucketContent(bucket, index),
           )}
         </div>

components/archive-relative.js

@@ -11,7 +11,7 @@ export default function ArchiveRelative(props) {
           <a>
             <div>
               <h4>{blog.title}</h4>
-              {typeof blog.body === "string" && parse(blog.body.slice(0, 80))}
+              {typeof blog.body === "string" && <div>{parse(blog.body.slice(0, 80))}</div>}
             </div>
           </a>
         </Link>

components/blog-banner.js

@@ -1,9 +1,14 @@
-import React from "react";
+import React from 'react';
 
 export default function BlogBanner(props) {
   const { blog_banner } = props;
   return (
-    <div className="blog-page-banner">
+    <div
+      className="blog-page-banner"
+      style={{
+        background: `${blog_banner.bg_color ? blog_banner.bg_color : ''}`,
+      }}
+    >
       <div className="blog-page-content">
         {blog_banner.banner_title && (
           <h1 className="hero-title">{blog_banner.banner_title}</h1>

components/blog-section.js

@@ -1,6 +1,6 @@
-import React from "react";
-import Link from "next/link";
-import parse from "html-react-parser";
+import React from 'react';
+import Link from 'next/link';
+import parse from 'html-react-parser';
 
 class BlogSection extends React.Component {
   render() {
@@ -29,10 +29,12 @@ class BlogSection extends React.Component {
               )}
               <div className="featured-content">
                 {blog.title && <h3>{blog.title}</h3>}
-                {typeof blog.body === "string" && parse(blog.body.slice(0, 300))}
+                {typeof blog.body === 'string' && (
+                  <div>{parse(blog.body.slice(0, 300))}</div>
+                )}
                 {blog.url && (
                   <Link href={blog.url} passHref>
-                    <a className="blogpost-readmore">{"Read More -->"}</a>
+                    <a className="blogpost-readmore">{'Read More -->'}</a>
                   </Link>
                 )}
               </div>

components/card-section.js

@@ -1,18 +1,24 @@
-import React from "react";
-import Link from "next/link";
+import React from 'react';
+import Link from 'next/link';
 
 export default function CardSection(props) {
   return (
     <div className="demo-section">
       {props.cards?.map((card, index) => (
         <div className="cards" key={index}>
           {card.title_h3 && <h3>{card.title_h3}</h3>}
-          {card.description && <p>{card.description}</p>}
+          {card.description && (
+            <p>{card.description}</p>
+          )}
           <div className="card-cta">
             {card.call_to_action.title && card.call_to_action.href && (
-            <Link href={card.call_to_action.href}>
-              <a className="btn primary-btn">{card.call_to_action.title}</a>
-            </Link>
+              <Link href={card.call_to_action.href}>
+                <a
+                  className="btn primary-btn"
+                >
+                  {card.call_to_action.title}
+                </a>
+              </Link>
             )}
           </div>
         </div>

components/devtools.js

@@ -1,23 +1,23 @@
-import React from "react";
-import dynamic from "next/dynamic";
+import React, { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import Tooltip from './tool-tip';
 
-const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
+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",
+    '_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") {
+    if (typeof inputObject[key] !== 'object') {
       continue;
     }
     inputObject[key] = filterObject(inputObject[key]);
@@ -27,6 +27,19 @@ function filterObject(inputObject) {
 
 const DevTools = ({ response }) => {
   const filteredJson = filterObject(response);
+  const [forceUpdate, setForceUpdate] = useState(0);
+
+  function copyObject(object) {
+    navigator.clipboard.writeText(object);
+    setForceUpdate(1);
+  }
+
+  useEffect(() => {
+    if (forceUpdate !== 0) {
+      setTimeout(() => setForceUpdate(0), 300);
+    }
+  }, [forceUpdate]);
+
   return (
     <div
       className="modal fade"
@@ -36,13 +49,32 @@ const DevTools = ({ response }) => {
       tabIndex="-1"
       aria-labelledby="staticBackdropLabel"
       aria-hidden="true"
+      role="dialog"
     >
-      <div className="modal-dialog modal-lg">
+      <div
+        className="modal-dialog .modal-lg modal-dialog-centered modal-dialog-scrollable"
+        role="document"
+      >
         <div className="modal-content">
           <div className="modal-header">
-            <h2 className="modal-title" id="staticBackdropLabel">
-              Json Response
+            <h2 className="devtools-modal-title" id="staticBackdropLabel">
+              JSON Preview
             </h2>
+            <span
+              className="json-copy"
+              onClick={(e) => copyObject(JSON.stringify(filteredJson))}
+              aria-hidden="true"
+            >
+              <Tooltip
+                content={forceUpdate === 0 ? 'Copy' : 'Copied'}
+                direction="top"
+                dynamic
+                delay={200}
+                status={forceUpdate}
+              >
+                <img src="/copy.svg" alt="copy icon" />
+              </Tooltip>
+            </span>
             <button
               type="button"
               className="btn-close"
@@ -58,14 +90,25 @@ const DevTools = ({ response }) => {
                     src={filteredJson}
                     collapsed={1}
                     name="response"
+                    displayDataTypes={false}
                     enableClipboard={false}
+                    style={{ color: '#C8501E' }}
                   />
                 )}
               </pre>
             ) : (
-              ""
+              ''
             )}
           </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn tertiary-btn modal-btn"
+              data-bs-dismiss="modal"
+            >
+              Close
+            </button>
+          </div>
         </div>
       </div>
     </div>

components/footer.js

@@ -1,6 +1,6 @@
-import React from "react";
-import Link from "next/link";
-import parse from "html-react-parser";
+import React from 'react';
+import Link from 'next/link';
+import parse from 'html-react-parser';
 
 export default function Footer(props) {
   const { footer } = props;
@@ -22,7 +22,9 @@ export default function Footer(props) {
             <ul className="nav-ul">
               {footer.navigation.link?.map((menu) => (
                 <li className="footer-nav-li" key={menu.title}>
-                  <Link href={menu.href}>{menu.title}</Link>
+                  <Link href={menu.href}>
+                    {menu.title}
+                  </Link>
                 </li>
               ))}
             </ul>
@@ -36,14 +38,19 @@ export default function Footer(props) {
                 title={social.link.title}
                 key={social.link.title}
               >
-                {social.icon && <img src={social.icon.url} alt={social.link.title} />}
+                {social.icon && (
+                  <img
+                    src={social.icon.url}
+                    alt={social.link.title}
+                  />
+                )}
               </a>
             ))}
           </div>
         </div>
       </div>
       <div className="copyright">
-        {typeof footer.copyright === "string" && parse(footer.copyright)}
+        {typeof footer.copyright === 'string' && parse(footer.copyright)}
       </div>
     </footer>
   );