Skip to content

Commit d0720d8

Browse files
AmitkanswalAmitkanswal
authored
Merge pull request #13 from contentstack/feat/ECO-398_std_live_preview
Feat/eco 398 std live preview
2 parents 528a014 + c2418fb commit d0720d8

38 files changed

+2002
-13048
lines changed

‎.env.local.sample‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
#create environment file name as .env.local
3+
#and place following configuration data.
4+
5+
CONTENTSTACK_API_KEY=YOUR_API_KEY
6+
CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN
7+
CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT
8+
9+
# For live preview
10+
CONTENTSTACK_MANAGEMENT_TOKEN=
11+
CONTENTSTACK_API_HOST=
12+
CONTENTSTACK_APP_HOST=
13+
CONTENTSTACK_LIVE_PREVIEW=true
14+
15+
# For enabling live editing tags for this project set NEXT_PUBLIC_CONTENTSTACK_LIVE_PREVIEW=true by default it is set to false
16+
# For NA region add CONTENTSTACK_APP_HOST=app.contentstack.com
17+
# For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com
18+
# For setting region add CONTENTSTACK_REGION=(Optional for US region) Eg- eu
19+
# For setting custom host add CONTENTSTACK_API_HOST=for(NA: api.contentstack.io, EU: eu-api.contentstack.com)

‎.env.sample‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎.eslintrc.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,23 @@ module.exports = {
2424
"func-names": ["error", "never"],
2525
quotes: "off",
2626
"prop-types": "off",
27+
camelcase: "off",
2728
"no-continue": "off",
2829
"guard-for-in": "off",
30+
"no-unused-vars": "off",
2931
"global-require": "off",
3032
"no-param-reassign": "off",
3133
"prettier/prettier": "off",
3234
"consistent-return": "off",
3335
"no-unused-expressions": "off",
3436
"no-restricted-syntax": "off",
3537
"react/no-array-index-key": "off",
38+
"react/react-in-jsx-scope": "off",
3639
"jsx-a11y/anchor-is-valid": "off",
40+
"import/prefer-default-export": "off",
41+
"react/jsx-props-no-spreading": "off",
3742
"react/destructuring-assignment": "off",
43+
"eslint-disable prefer-destructuring": "off",
3844
"jsx-a11y/label-has-associated-control": "off",
39-
"eslint-disable-next-line jsx-a11y/anchor-is-valid": "off",
4045
},
4146
};

‎components/about-section-bucket.js‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
import React from "react";
2-
import parse from "html-react-parser";
1+
import React from 'react';
2+
import parse from 'html-react-parser';
33

44
export default function AboutSectionBucket(props) {
55
const { sectionWithBuckets } = props;
66
function bucketContent(bucket, index) {
77
return (
88
<div className="mission-content-section" key={index}>
99
{bucket.icon && (
10-
<img className="mission-icon" src={bucket.icon.url} alt="art work" />
10+
<img
11+
className="mission-icon"
12+
src={bucket.icon.url}
13+
alt="art work"
14+
/>
1115
)}
1216

1317
<div className="mission-section-content">
14-
{bucket.title_h3 && <h3>{bucket.title_h3}</h3>}
15-
{typeof bucket.description === "string" && parse(bucket.description)}
18+
{bucket.title_h3 && (
19+
<h3>{bucket.title_h3}</h3>
20+
)}
21+
{typeof bucket.description === 'string' && (
22+
<div>
23+
{' '}
24+
{parse(bucket.description)}
25+
</div>
26+
)}
1627
</div>
1728
</div>
1829
);
@@ -21,11 +32,15 @@ export default function AboutSectionBucket(props) {
2132
return (
2233
<div className="member-main-section">
2334
<div className="member-head">
24-
{sectionWithBuckets.title_h2 && <h2>{sectionWithBuckets.title_h2}</h2>}
35+
{sectionWithBuckets.title_h2 && (
36+
<h2>
37+
{sectionWithBuckets.title_h2}
38+
</h2>
39+
)}
2540
</div>
2641
<div className="mission-section">
2742
<div className="mission-content-top">
28-
{sectionWithBuckets.buckets.map(
43+
{sectionWithBuckets?.buckets.map(
2944
(bucket, index) => index < 2 && bucketContent(bucket, index),
3045
)}
3146
</div>

‎components/archive-relative.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function ArchiveRelative(props) {
1111
<a>
1212
<div>
1313
<h4>{blog.title}</h4>
14-
{typeof blog.body === "string" && parse(blog.body.slice(0, 80))}
14+
{typeof blog.body === "string" && <div>{parse(blog.body.slice(0, 80))}</div>}
1515
</div>
1616
</a>
1717
</Link>

‎components/blog-banner.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import React from "react";
1+
import React from 'react';
22

33
export default function BlogBanner(props) {
44
const { blog_banner } = props;
55
return (
6-
<div className="blog-page-banner">
6+
<div
7+
className="blog-page-banner"
8+
style={{
9+
background: `${blog_banner.bg_color ? blog_banner.bg_color : ''}`,
10+
}}
11+
>
712
<div className="blog-page-content">
813
{blog_banner.banner_title && (
914
<h1 className="hero-title">{blog_banner.banner_title}</h1>

‎components/blog-section.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
2-
import Link from "next/link";
3-
import parse from "html-react-parser";
1+
import React from 'react';
2+
import Link from 'next/link';
3+
import parse from 'html-react-parser';
44

55
class BlogSection extends React.Component {
66
render() {
@@ -29,10 +29,12 @@ class BlogSection extends React.Component {
2929
)}
3030
<div className="featured-content">
3131
{blog.title && <h3>{blog.title}</h3>}
32-
{typeof blog.body === "string" && parse(blog.body.slice(0, 300))}
32+
{typeof blog.body === 'string' && (
33+
<div>{parse(blog.body.slice(0, 300))}</div>
34+
)}
3335
{blog.url && (
3436
<Link href={blog.url} passHref>
35-
<a className="blogpost-readmore">{"Read More -->"}</a>
37+
<a className="blogpost-readmore">{'Read More -->'}</a>
3638
</Link>
3739
)}
3840
</div>

‎components/card-section.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
1-
import React from "react";
2-
import Link from "next/link";
1+
import React from 'react';
2+
import Link from 'next/link';
33

44
export default function CardSection(props) {
55
return (
66
<div className="demo-section">
77
{props.cards?.map((card, index) => (
88
<div className="cards" key={index}>
99
{card.title_h3 && <h3>{card.title_h3}</h3>}
10-
{card.description && <p>{card.description}</p>}
10+
{card.description && (
11+
<p>{card.description}</p>
12+
)}
1113
<div className="card-cta">
1214
{card.call_to_action.title && card.call_to_action.href && (
13-
<Link href={card.call_to_action.href}>
14-
<a className="btn primary-btn">{card.call_to_action.title}</a>
15-
</Link>
15+
<Link href={card.call_to_action.href}>
16+
<a
17+
className="btn primary-btn"
18+
>
19+
{card.call_to_action.title}
20+
</a>
21+
</Link>
1622
)}
1723
</div>
1824
</div>

‎components/devtools.js‎

Lines changed: 60 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import React from "react";
2-
import dynamic from "next/dynamic";
1+
import React, { useState, useEffect } from 'react';
2+
import dynamic from 'next/dynamic';
3+
import Tooltip from './tool-tip';
34

4-
const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
5+
const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false });
56

67
function filterObject(inputObject) {
78
const unWantedProps = [
8-
"uid",
9-
"_version",
10-
"ACL",
11-
"_in_progress",
12-
"created_at",
13-
"created_by",
14-
"updated_at",
15-
"updated_by",
16-
"publish_details",
9+
'_version',
10+
'ACL',
11+
'_in_progress',
12+
'created_at',
13+
'created_by',
14+
'updated_at',
15+
'updated_by',
16+
'publish_details',
1717
];
1818
for (const key in inputObject) {
1919
unWantedProps.includes(key) && delete inputObject[key];
20-
if (typeof inputObject[key] !== "object") {
20+
if (typeof inputObject[key] !== 'object') {
2121
continue;
2222
}
2323
inputObject[key] = filterObject(inputObject[key]);
@@ -27,6 +27,19 @@ function filterObject(inputObject) {
2727

2828
const DevTools = ({ response }) => {
2929
const filteredJson = filterObject(response);
30+
const [forceUpdate, setForceUpdate] = useState(0);
31+
32+
function copyObject(object) {
33+
navigator.clipboard.writeText(object);
34+
setForceUpdate(1);
35+
}
36+
37+
useEffect(() => {
38+
if (forceUpdate !== 0) {
39+
setTimeout(() => setForceUpdate(0), 300);
40+
}
41+
}, [forceUpdate]);
42+
3043
return (
3144
<div
3245
className="modal fade"
@@ -36,13 +49,32 @@ const DevTools = ({ response }) => {
3649
tabIndex="-1"
3750
aria-labelledby="staticBackdropLabel"
3851
aria-hidden="true"
52+
role="dialog"
3953
>
40-
<div className="modal-dialog modal-lg">
54+
<div
55+
className="modal-dialog .modal-lg modal-dialog-centered modal-dialog-scrollable"
56+
role="document"
57+
>
4158
<div className="modal-content">
4259
<div className="modal-header">
43-
<h2 className="modal-title" id="staticBackdropLabel">
44-
Json Response
60+
<h2 className="devtools-modal-title" id="staticBackdropLabel">
61+
JSON Preview
4562
</h2>
63+
<span
64+
className="json-copy"
65+
onClick={(e) => copyObject(JSON.stringify(filteredJson))}
66+
aria-hidden="true"
67+
>
68+
<Tooltip
69+
content={forceUpdate === 0 ? 'Copy' : 'Copied'}
70+
direction="top"
71+
dynamic
72+
delay={200}
73+
status={forceUpdate}
74+
>
75+
<img src="/copy.svg" alt="copy icon" />
76+
</Tooltip>
77+
</span>
4678
<button
4779
type="button"
4880
className="btn-close"
@@ -58,14 +90,25 @@ const DevTools = ({ response }) => {
5890
src={filteredJson}
5991
collapsed={1}
6092
name="response"
93+
displayDataTypes={false}
6194
enableClipboard={false}
95+
style={{ color: '#C8501E' }}
6296
/>
6397
)}
6498
</pre>
6599
) : (
66-
""
100+
''
67101
)}
68102
</div>
103+
<div className="modal-footer">
104+
<button
105+
type="button"
106+
className="btn tertiary-btn modal-btn"
107+
data-bs-dismiss="modal"
108+
>
109+
Close
110+
</button>
111+
</div>
69112
</div>
70113
</div>
71114
</div>

‎components/footer.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
2-
import Link from "next/link";
3-
import parse from "html-react-parser";
1+
import React from 'react';
2+
import Link from 'next/link';
3+
import parse from 'html-react-parser';
44

55
export default function Footer(props) {
66
const { footer } = props;
@@ -22,7 +22,9 @@ export default function Footer(props) {
2222
<ul className="nav-ul">
2323
{footer.navigation.link?.map((menu) => (
2424
<li className="footer-nav-li" key={menu.title}>
25-
<Link href={menu.href}>{menu.title}</Link>
25+
<Link href={menu.href}>
26+
{menu.title}
27+
</Link>
2628
</li>
2729
))}
2830
</ul>
@@ -36,14 +38,19 @@ export default function Footer(props) {
3638
title={social.link.title}
3739
key={social.link.title}
3840
>
39-
{social.icon && <img src={social.icon.url} alt={social.link.title} />}
41+
{social.icon && (
42+
<img
43+
src={social.icon.url}
44+
alt={social.link.title}
45+
/>
46+
)}
4047
</a>
4148
))}
4249
</div>
4350
</div>
4451
</div>
4552
<div className="copyright">
46-
{typeof footer.copyright === "string" && parse(footer.copyright)}
53+
{typeof footer.copyright === 'string' && parse(footer.copyright)}
4754
</div>
4855
</footer>
4956
);

0 commit comments

Comments
 (0)