Skip to content

Commit 8d3cb2c

Browse files
AmitkanswalAmitkanswal
authored
Merge pull request #23 from contentstack/feat/ECO-808_dynamic-page-rendering
Feat/eco 808 dynamic page rendering
2 parents 272cc5d + f2a8684 commit 8d3cb2c

32 files changed

+8521
-1246
lines changed

‎.env.local.sample‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,18 @@ CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT
88

99
# For live preview
1010
CONTENTSTACK_MANAGEMENT_TOKEN=
11-
CONTENTSTACK_API_HOST=
12-
CONTENTSTACK_APP_HOST=
11+
CONTENTSTACK_API_HOST=api.contentstack.io
12+
CONTENTSTACK_APP_HOST=app.contentstack.com
1313
CONTENTSTACK_LIVE_PREVIEW=true
14+
CONTENTSTACK_LIVE_EDIT_TAGS=false
1415

1516
#site-map
1617
NEXT_PUBLIC_HOSTED_URL=http://localhost:3000
1718
# Requires host url for sitemap. Localhost:3000 is set as default value
1819

19-
# For enabling live editing tags for this project set NEXT_PUBLIC_CONTENTSTACK_LIVE_PREVIEW=true by default it is set to false
20+
# For Live preview default value is to true to disable live preview set CONTENTSTACK_LIVE_PREVIEW=false
21+
# For live edit tags default value is set to false to enable live edit tag set CONTENTSTACK_LIVE_EDIT_TAGS=true
2022
# For NA region add CONTENTSTACK_APP_HOST=app.contentstack.com
2123
# For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com
22-
# For setting region add CONTENTSTACK_REGION=(Optional for US region) Eg- eu
24+
2325
# For setting custom host add CONTENTSTACK_API_HOST=for(NA: api.contentstack.io, EU: eu-api.contentstack.com)

‎components/about-section-bucket.js‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,49 @@
11
import React from 'react';
22
import parse from 'html-react-parser';
33

4-
export default function AboutSectionBucket(props) {
5-
const { sectionWithBuckets } = props;
4+
export default function AboutSectionBucket({ sectionWithBuckets }) {
65
function bucketContent(bucket, index) {
76
return (
8-
<div className="mission-content-section" key={index}>
7+
<div className='mission-content-section' key={index}>
98
{bucket.icon && (
109
<img
11-
className="mission-icon"
10+
className='mission-icon'
11+
{...bucket.icon.$?.url}
1212
src={bucket.icon.url}
13-
alt="art work"
13+
alt='art work'
1414
/>
1515
)}
1616

17-
<div className="mission-section-content">
17+
<div className='mission-section-content'>
1818
{bucket.title_h3 && (
19-
<h3>{bucket.title_h3}</h3>
19+
<h3 {...bucket.$?.title_h3}>{bucket.title_h3}</h3>
2020
)}
2121
{typeof bucket.description === 'string' && (
22-
<div>
23-
{' '}
24-
{parse(bucket.description)}
25-
</div>
22+
<div {...bucket.$?.description}> {parse(bucket.description)}</div>
2623
)}
2724
</div>
2825
</div>
2926
);
3027
}
3128

3229
return (
33-
<div className="member-main-section">
34-
<div className="member-head">
30+
<div className='member-main-section'>
31+
<div className='member-head'>
3532
{sectionWithBuckets.title_h2 && (
36-
<h2>
33+
<h2 {...sectionWithBuckets.$?.title_h2}>
3734
{sectionWithBuckets.title_h2}
3835
</h2>
3936
)}
4037
</div>
41-
<div className="mission-section">
42-
<div className="mission-content-top">
38+
<div className='mission-section'>
39+
<div className='mission-content-top'>
4340
{sectionWithBuckets?.buckets.map(
44-
(bucket, index) => index < 2 && bucketContent(bucket, index),
41+
(bucket, index) => index < 2 && bucketContent(bucket, index)
4542
)}
4643
</div>
47-
<div className="mission-content-bottom">
44+
<div className='mission-content-bottom'>
4845
{sectionWithBuckets.buckets.map(
49-
(bucket, index) => index >= 2 && bucketContent(bucket, index),
46+
(bucket, index) => index >= 2 && bucketContent(bucket, index)
5047
)}
5148
</div>
5249
</div>

‎components/archive-relative.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
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

5-
export default function ArchiveRelative(props) {
6-
const { blogs } = props;
5+
export default function ArchiveRelative({ blogs }) {
76
return (
87
<>
98
{blogs?.map((blog, idx) => (
109
<Link href={blog.url} key={idx}>
1110
<a>
1211
<div>
13-
<h4>{blog.title}</h4>
14-
{typeof blog.body === "string" && <div>{parse(blog.body.slice(0, 80))}</div>}
12+
<h4 {...blog.$?.title}>{blog.title}</h4>
13+
{typeof blog.body === 'string' && (
14+
<div {...blog.$?.body}>{parse(blog.body.slice(0, 80))}</div>
15+
)}
1516
</div>
1617
</a>
1718
</Link>

‎components/blog-banner.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
import React from 'react';
22

3-
export default function BlogBanner(props) {
4-
const { blog_banner } = props;
3+
export default function BlogBanner({ blogBanner }) {
54
return (
65
<div
7-
className="blog-page-banner"
6+
className='blog-page-banner'
87
style={{
9-
background: `${blog_banner.bg_color ? blog_banner.bg_color : ''}`,
8+
background: `${blogBanner.bg_color ? blogBanner.bg_color : ''}`,
109
}}
1110
>
12-
<div className="blog-page-content">
13-
{blog_banner.banner_title && (
14-
<h1 className="hero-title">{blog_banner.banner_title}</h1>
11+
<div className='blog-page-content'>
12+
{blogBanner.banner_title && (
13+
<h1 className='hero-title' {...blogBanner.$?.banner_title}>
14+
{blogBanner.banner_title}
15+
</h1>
1516
)}
1617

17-
{blog_banner.banner_description && (
18-
<p className="hero-description">{blog_banner.banner_description}</p>
18+
{blogBanner.banner_description && (
19+
<p className='hero-description' {...blogBanner.$?.banner_description}>
20+
{blogBanner.banner_description}
21+
</p>
1922
)}
2023
</div>
2124
</div>

‎components/blog-list.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import moment from 'moment';
3+
import parse from 'html-react-parser';
4+
import Link from 'next/link';
5+
6+
function BlogList({ bloglist }) {
7+
let body = typeof bloglist.body === 'string' && bloglist.body.substr(0, 300);
8+
const stringLength = body.lastIndexOf(' ');
9+
body = `${body.substr(0, Math.min(body.length, stringLength))}...`;
10+
return (
11+
<div className='blog-list'>
12+
{bloglist.featured_image && (
13+
<Link href={bloglist.url}>
14+
<a>
15+
<img
16+
className='blog-list-img'
17+
src={bloglist.featured_image.url}
18+
alt='blog img'
19+
{...bloglist.featured_image.$?.url}
20+
/>
21+
</a>
22+
</Link>
23+
)}
24+
<div className='blog-content'>
25+
{bloglist.title && (
26+
<Link href={bloglist.url}>
27+
<a>
28+
<h3 {...bloglist.$?.title}>{bloglist.title}</h3>
29+
</a>
30+
</Link>
31+
)}
32+
<p>
33+
<strong {...bloglist.$?.date}>
34+
{moment(bloglist.date).format('ddd, MMM D YYYY')}
35+
</strong>
36+
,{" "}
37+
<strong {...bloglist.author[0].$?.title}>
38+
{bloglist.author[0].title}
39+
</strong>
40+
</p>
41+
<div {...bloglist.$?.body}>{parse(body)}</div>
42+
{bloglist.url ? (
43+
<Link href={bloglist.url}>
44+
<a>
45+
<span>{'Read more -->'}</span>
46+
</a>
47+
</Link>
48+
) : (
49+
''
50+
)}
51+
</div>
52+
</div>
53+
);
54+
}
55+
56+
export default BlogList;

‎components/blog-section.js‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,49 @@ import React from 'react';
22
import Link from 'next/link';
33
import parse from 'html-react-parser';
44

5-
class BlogSection extends React.Component {
6-
render() {
7-
const fromBlog = this.props.blogs;
8-
return (
9-
<div className="community-section">
10-
<div className="community-head">
11-
{fromBlog.title_h2 && <h2>{fromBlog.title_h2}</h2>}
12-
{fromBlog.view_articles && (
13-
<Link href={fromBlog.view_articles.href}>
14-
<a className="btn secondary-btn article-btn">
15-
{fromBlog.view_articles.title}
16-
</a>
17-
</Link>
18-
)}
19-
</div>
20-
<div className="home-featured-blogs">
21-
{fromBlog.featured_blogs.map((blog, index) => (
22-
<div className="featured-blog" key={index}>
23-
{blog.featured_image && (
24-
<img
25-
src={blog.featured_image.url}
26-
alt={blog.featured_image.filename}
27-
className="blog-post-img"
28-
/>
5+
export default function BlogSection({ fromBlog }) {
6+
return (
7+
<div className='community-section'>
8+
<div className='community-head'>
9+
{fromBlog.title_h2 && (
10+
<h2 {...fromBlog.$?.title_h2}>{fromBlog.title_h2}</h2>
11+
)}
12+
{fromBlog.view_articles && (
13+
<Link href={fromBlog.view_articles.href}>
14+
<a
15+
className='btn secondary-btn article-btn'
16+
{...fromBlog.view_articles.$?.title}
17+
>
18+
{fromBlog.view_articles.title}
19+
</a>
20+
</Link>
21+
)}
22+
</div>
23+
<div className='home-featured-blogs'>
24+
{fromBlog.featured_blogs.map((blog, index) => (
25+
<div className='featured-blog' key={index}>
26+
{blog.featured_image && (
27+
<img
28+
{...blog.featured_image.$?.url}
29+
src={blog.featured_image.url}
30+
alt={blog.featured_image.filename}
31+
className='blog-post-img'
32+
/>
33+
)}
34+
<div className='featured-content'>
35+
{blog.title && <h3 {...blog.$?.title}>{blog.title}</h3>}
36+
{typeof blog.body === 'string' && (
37+
<div>{parse(blog.body.slice(0, 300))}</div>
38+
)}
39+
{blog.url && (
40+
<Link href={blog.url} passHref>
41+
<a className='blogpost-readmore'>{'Read More -->'}</a>
42+
</Link>
2943
)}
30-
<div className="featured-content">
31-
{blog.title && <h3>{blog.title}</h3>}
32-
{typeof blog.body === 'string' && (
33-
<div>{parse(blog.body.slice(0, 300))}</div>
34-
)}
35-
{blog.url && (
36-
<Link href={blog.url} passHref>
37-
<a className="blogpost-readmore">{'Read More -->'}</a>
38-
</Link>
39-
)}
40-
</div>
4144
</div>
42-
))}
43-
</div>
45+
</div>
46+
))}
4447
</div>
45-
);
46-
}
48+
</div>
49+
);
4750
}
48-
export default BlogSection;

‎components/card-section.js‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React from 'react';
22
import Link from 'next/link';
33

4-
export default function CardSection(props) {
4+
export default function CardSection({ cards }) {
55
return (
6-
<div className="demo-section">
7-
{props.cards?.map((card, index) => (
8-
<div className="cards" key={index}>
9-
{card.title_h3 && <h3>{card.title_h3}</h3>}
10-
{card.description && (
11-
<p>{card.description}</p>
12-
)}
13-
<div className="card-cta">
6+
<div className='demo-section'>
7+
{cards?.map((card, index) => (
8+
<div className='cards' key={index}>
9+
{card.title_h3 && <h3 {...card.$?.title_h3}>{card.title_h3}</h3>}
10+
{card.description && <p {...card.$?.description}>{card.description}</p>}
11+
<div className='card-cta'>
1412
{card.call_to_action.title && card.call_to_action.href && (
1513
<Link href={card.call_to_action.href}>
16-
<a
17-
className="btn primary-btn"
18-
>
19-
{card.call_to_action.title}
20-
</a>
14+
<a className='btn primary-btn'>{card.call_to_action.title}</a>
2115
</Link>
2216
)}
2317
</div>

‎components/devtools.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ function filterObject(inputObject) {
88
const unWantedProps = [
99
'_version',
1010
'ACL',
11+
'_owner',
1112
'_in_progress',
1213
'created_at',
1314
'created_by',

0 commit comments

Comments
 (0)