Merge pull request #29 from contentstack/staging

Staging
contentstack · Apr 12, 2022 · 165433c · 165433c
2 parents 137a1d6 + 0ddf211
commit 165433c
Show file tree

Hide file tree

Showing 34 changed files with 8,763 additions and 1,466 deletions.
diff --git a/.env.local.sample b/.env.local.sample
@@ -8,16 +8,18 @@ CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT
 
 # For live preview 
 CONTENTSTACK_MANAGEMENT_TOKEN= 
-CONTENTSTACK_API_HOST=
-CONTENTSTACK_APP_HOST=
+CONTENTSTACK_API_HOST=api.contentstack.io
+CONTENTSTACK_APP_HOST=app.contentstack.com
 CONTENTSTACK_LIVE_PREVIEW=true
+CONTENTSTACK_LIVE_EDIT_TAGS=false
 
 #site-map
 NEXT_PUBLIC_HOSTED_URL=http://localhost:3000
 # Requires host url for sitemap. Localhost:3000 is set as default value
 
-# For enabling live editing tags for this project set NEXT_PUBLIC_CONTENTSTACK_LIVE_PREVIEW=true by default it is set to false
+# For Live preview default value is to true to disable live preview set CONTENTSTACK_LIVE_PREVIEW=false
+# For live edit tags default value is set to false to enable live edit tag set CONTENTSTACK_LIVE_EDIT_TAGS=true
 # For NA region add CONTENTSTACK_APP_HOST=app.contentstack.com
 # For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com
-# For setting region add  CONTENTSTACK_REGION=(Optional for US region) Eg- eu
+
 # For setting custom host add CONTENTSTACK_API_HOST=for(NA: api.contentstack.io, EU: eu-api.contentstack.com)
diff --git a/components/about-section-bucket.js b/components/about-section-bucket.js
@@ -1,52 +1,49 @@
 import React from 'react';
 import parse from 'html-react-parser';
 
-export default function AboutSectionBucket(props) {
-  const { sectionWithBuckets } = props;
+export default function AboutSectionBucket({ sectionWithBuckets }) {
   function bucketContent(bucket, index) {
     return (
-      <div className="mission-content-section" key={index}>
+      <div className='mission-content-section' key={index}>
         {bucket.icon && (
           <img
-            className="mission-icon"
+            className='mission-icon'
+            {...bucket.icon.$?.url}
             src={bucket.icon.url}
-            alt="art work"
+            alt='art work'
           />
         )}
 
-        <div className="mission-section-content">
+        <div className='mission-section-content'>
           {bucket.title_h3 && (
-            <h3>{bucket.title_h3}</h3>
+            <h3 {...bucket.$?.title_h3}>{bucket.title_h3}</h3>
           )}
           {typeof bucket.description === 'string' && (
-            <div>
-              {' '}
-              {parse(bucket.description)}
-            </div>
+            <div {...bucket.$?.description}> {parse(bucket.description)}</div>
           )}
         </div>
       </div>
     );
   }
 
   return (
-    <div className="member-main-section">
-      <div className="member-head">
+    <div className='member-main-section'>
+      <div className='member-head'>
         {sectionWithBuckets.title_h2 && (
-          <h2>
+          <h2 {...sectionWithBuckets.$?.title_h2}>
             {sectionWithBuckets.title_h2}
           </h2>
         )}
       </div>
-      <div className="mission-section">
-        <div className="mission-content-top">
+      <div className='mission-section'>
+        <div className='mission-content-top'>
           {sectionWithBuckets?.buckets.map(
-            (bucket, index) => index < 2 && bucketContent(bucket, index),
+            (bucket, index) => index < 2 && bucketContent(bucket, index)
           )}
         </div>
-        <div className="mission-content-bottom">
+        <div className='mission-content-bottom'>
           {sectionWithBuckets.buckets.map(
-            (bucket, index) => index >= 2 && bucketContent(bucket, index),
+            (bucket, index) => index >= 2 && bucketContent(bucket, index)
           )}
         </div>
       </div>

diff --git a/components/archive-relative.js b/components/archive-relative.js
@@ -1,17 +1,18 @@
-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 ArchiveRelative(props) {
-  const { blogs } = props;
+export default function ArchiveRelative({ blogs }) {
   return (
     <>
       {blogs?.map((blog, idx) => (
         <Link href={blog.url} key={idx}>
           <a>
             <div>
-              <h4>{blog.title}</h4>
-              {typeof blog.body === "string" && <div>{parse(blog.body.slice(0, 80))}</div>}
+              <h4 {...blog.$?.title}>{blog.title}</h4>
+              {typeof blog.body === 'string' && (
+                <div {...blog.$?.body}>{parse(blog.body.slice(0, 80))}</div>
+              )}
             </div>
           </a>
         </Link>

diff --git a/components/blog-banner.js b/components/blog-banner.js
@@ -1,21 +1,24 @@
 import React from 'react';
 
-export default function BlogBanner(props) {
-  const { blog_banner } = props;
+export default function BlogBanner({ blogBanner }) {
   return (
     <div
-      className="blog-page-banner"
+      className='blog-page-banner'
       style={{
-        background: `${blog_banner.bg_color ? blog_banner.bg_color : ''}`,
+        background: `${blogBanner.bg_color ? blogBanner.bg_color : ''}`,
       }}
     >
-      <div className="blog-page-content">
-        {blog_banner.banner_title && (
-          <h1 className="hero-title">{blog_banner.banner_title}</h1>
+      <div className='blog-page-content'>
+        {blogBanner.banner_title && (
+          <h1 className='hero-title' {...blogBanner.$?.banner_title}>
+            {blogBanner.banner_title}
+          </h1>
         )}
 
-        {blog_banner.banner_description && (
-          <p className="hero-description">{blog_banner.banner_description}</p>
+        {blogBanner.banner_description && (
+          <p className='hero-description' {...blogBanner.$?.banner_description}>
+            {blogBanner.banner_description}
+          </p>
         )}
       </div>
     </div>

diff --git a/components/blog-list.js b/components/blog-list.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import moment from 'moment';
+import parse from 'html-react-parser';
+import Link from 'next/link';
+
+function BlogList({ bloglist }) {
+  let body = typeof bloglist.body === 'string' && bloglist.body.substr(0, 300);
+  const stringLength = body.lastIndexOf(' ');
+  body = `${body.substr(0, Math.min(body.length, stringLength))}...`;
+  return (
+    <div className='blog-list'>
+      {bloglist.featured_image && (
+        <Link href={bloglist.url}>
+          <a>
+            <img
+              className='blog-list-img'
+              src={bloglist.featured_image.url}
+              alt='blog img'
+              {...bloglist.featured_image.$?.url}
+            />
+          </a>
+        </Link>
+      )}
+      <div className='blog-content'>
+        {bloglist.title && (
+          <Link href={bloglist.url}>
+            <a>
+              <h3 {...bloglist.$?.title}>{bloglist.title}</h3>
+            </a>
+          </Link>
+        )}
+        <p>
+          <strong {...bloglist.$?.date}>
+            {moment(bloglist.date).format('ddd, MMM D YYYY')}
+          </strong>
+          ,{" "}
+          <strong {...bloglist.author[0].$?.title}>
+            {bloglist.author[0].title}
+          </strong>
+        </p>
+        <div {...bloglist.$?.body}>{parse(body)}</div>
+        {bloglist.url ? (
+          <Link href={bloglist.url}>
+            <a>
+              <span>{'Read more -->'}</span>
+            </a>
+          </Link>
+        ) : (
+          ''
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default BlogList;
diff --git a/components/blog-section.js b/components/blog-section.js
@@ -2,47 +2,49 @@ import React from 'react';
 import Link from 'next/link';
 import parse from 'html-react-parser';
 
-class BlogSection extends React.Component {
-  render() {
-    const fromBlog = this.props.blogs;
-    return (
-      <div className="community-section">
-        <div className="community-head">
-          {fromBlog.title_h2 && <h2>{fromBlog.title_h2}</h2>}
-          {fromBlog.view_articles && (
-            <Link href={fromBlog.view_articles.href}>
-              <a className="btn secondary-btn article-btn">
-                {fromBlog.view_articles.title}
-              </a>
-            </Link>
-          )}
-        </div>
-        <div className="home-featured-blogs">
-          {fromBlog.featured_blogs.map((blog, index) => (
-            <div className="featured-blog" key={index}>
-              {blog.featured_image && (
-                <img
-                  src={blog.featured_image.url}
-                  alt={blog.featured_image.filename}
-                  className="blog-post-img"
-                />
+export default function BlogSection({ fromBlog }) {
+  return (
+    <div className='community-section'>
+      <div className='community-head'>
+        {fromBlog.title_h2 && (
+          <h2 {...fromBlog.$?.title_h2}>{fromBlog.title_h2}</h2>
+        )}
+        {fromBlog.view_articles && (
+          <Link href={fromBlog.view_articles.href}>
+            <a
+              className='btn secondary-btn article-btn'
+              {...fromBlog.view_articles.$?.title}
+            >
+              {fromBlog.view_articles.title}
+            </a>
+          </Link>
+        )}
+      </div>
+      <div className='home-featured-blogs'>
+        {fromBlog.featured_blogs.map((blog, index) => (
+          <div className='featured-blog' key={index}>
+            {blog.featured_image && (
+              <img
+                {...blog.featured_image.$?.url}
+                src={blog.featured_image.url}
+                alt={blog.featured_image.filename}
+                className='blog-post-img'
+              />
+            )}
+            <div className='featured-content'>
+              {blog.title && <h3 {...blog.$?.title}>{blog.title}</h3>}
+              {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>
+                </Link>
               )}
-              <div className="featured-content">
-                {blog.title && <h3>{blog.title}</h3>}
-                {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>
-                  </Link>
-                )}
-              </div>
             </div>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
-    );
-  }
+    </div>
+  );
 }
-export default BlogSection;
diff --git a/components/card-section.js b/components/card-section.js
@@ -1,23 +1,17 @@
 import React from 'react';
 import Link from 'next/link';
 
-export default function CardSection(props) {
+export default function CardSection({ cards }) {
   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>
-          )}
-          <div className="card-cta">
+    <div className='demo-section'>
+      {cards?.map((card, index) => (
+        <div className='cards' key={index}>
+          {card.title_h3 && <h3 {...card.$?.title_h3}>{card.title_h3}</h3>}
+          {card.description && <p {...card.$?.description}>{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>
+                <a className='btn primary-btn'>{card.call_to_action.title}</a>
               </Link>
             )}
           </div>

diff --git a/components/devtools.js b/components/devtools.js
@@ -8,6 +8,7 @@ function filterObject(inputObject) {
   const unWantedProps = [
     '_version',
     'ACL',
+    '_owner',
     '_in_progress',
     'created_at',
     'created_by',