Skip to content

Commit 01e857b

Browse files
Contentstack-AnkitaDContentstack-AnkitaD
authored
Merge pull request #92 from contentstack/staging
Staging-> Main : Live preview 2.0 Support
2 parents 584806d + b43a52a commit 01e857b

File tree

9 files changed

+857
-687
lines changed

9 files changed

+857
-687
lines changed

‎.env.sample‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ CONTENTSTACK_DELIVERY_TOKEN= YOUR_DELIVERY_TOKEN
88
CONTENTSTACK_ENVIRONMENT= YOUR_PUBLISHING_ENVIRONMENT
99

1010
# For live preview
11-
CONTENTSTACK_MANAGEMENT_TOKEN=YOUR_MANAGEMENT_TOKEN
11+
CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN
1212
CONTENTSTACK_API_HOST=api.contentstack.io
1313
CONTENTSTACK_APP_HOST=app.contentstack.com
14+
CONTENTSTACK_PREVIEW_HOST=YOUR_PREVIEW_HOST #rest-preview.contentstack.com
1415

1516
CONTENTSTACK_LIVE_PREVIEW=true
1617
CONTENTSTACK_LIVE_EDIT_TAGS=false

‎package-lock.json‎

Lines changed: 815 additions & 642 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"name": "contentstack-gatsby-starter-app",
33
"private": true,
44
"description": "A simple starter app build using Gatsby and Contentstack",
5-
"version": "3.1.1",
5+
"version": "3.2.0",
66
"author": "Contentstack",
77
"dependencies": {
88
"@contentstack/live-preview-utils": "^1.4.0",
99
"@contentstack/utils": "^1.1.1",
1010
"@popperjs/core": "^2.11.8",
1111
"bootstrap": "^5.1.3",
12-
"contentstack": "^3.17.1",
12+
"contentstack": "^3.19.0",
1313
"dotenv": "^16.3.1",
1414
"gatsby": "^5.12.5",
1515
"gatsby-plugin-env-variables": "^2.3.0",

‎src/components/Footer.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ import { connect } from "react-redux";
55
import { actionFooter } from "../store/actions/state.action";
66
import { getCSData } from "../live-preview-sdk/index";
77
import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index";
8-
import {
9-
DispatchData,
10-
Social,
11-
Menu,
12-
} from "../typescript/layout";
8+
import { DispatchData, Social, Menu } from "../typescript/layout";
139
import { FooterModel } from "../common/types";
1410
import ContentstackLivePreview from "@contentstack/live-preview-utils";
1511
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
@@ -18,7 +14,7 @@ const queryLayout = () => {
1814
const data = useStaticQuery(graphql`
1915
query {
2016
contentstackFooter {
21-
__typename
17+
cslp__meta
2218
title
2319
uid
2420
logo {
@@ -50,24 +46,24 @@ const queryLayout = () => {
5046

5147
const Footer = ({ dispatch }: DispatchData) => {
5248
const { contentstackFooter } = queryLayout();
53-
ContentstackGatsby.addContentTypeUidFromTypename(contentstackFooter)
54-
isLiveEditTagsEnabled && addEditableTags(contentstackFooter, "footer")
49+
ContentstackGatsby.addContentTypeUidFromTypename(contentstackFooter);
50+
isLiveEditTagsEnabled && addEditableTags(contentstackFooter, "footer");
5551
const [getFooter, setFooter] = useState(contentstackFooter);
5652

5753
async function getFooterData() {
5854
const footerRes: FooterModel = await getCSData.get(contentstackFooter);
59-
isLiveEditTagsEnabled && addEditableTags(footerRes, "footer")
55+
isLiveEditTagsEnabled && addEditableTags(footerRes, "footer");
6056
setFooter(footerRes);
6157
}
6258

6359
useEffect(() => {
6460
const callbackId = ContentstackLivePreview.onLiveEdit(getFooterData);
6561
return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
66-
}, [])
62+
}, []);
6763

6864
useEffect(() => {
6965
dispatch(actionFooter(getFooter));
70-
}, [getFooter])
66+
}, [getFooter]);
7167

7268
return (
7369
<footer>

‎src/components/Header.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const queryHeader = () => {
1616
const query = graphql`
1717
query {
1818
contentstackHeader {
19-
__typename
19+
cslp__meta
2020
title
2121
uid
2222
logo {
@@ -44,24 +44,24 @@ const queryHeader = () => {
4444

4545
const Header = ({ dispatch }: DispatchData) => {
4646
const { contentstackHeader } = queryHeader();
47-
ContentstackGatsby.addContentTypeUidFromTypename(contentstackHeader)
48-
isLiveEditTagsEnabled && addEditableTags(contentstackHeader, "header")
47+
ContentstackGatsby.addContentTypeUidFromTypename(contentstackHeader);
48+
isLiveEditTagsEnabled && addEditableTags(contentstackHeader, "header");
4949
const [getHeader, setHeader] = useState(contentstackHeader);
5050

5151
async function getHeaderData() {
5252
const headerRes: HeaderModel = await getCSData.get(contentstackHeader);
53-
isLiveEditTagsEnabled && addEditableTags(headerRes, "header")
53+
isLiveEditTagsEnabled && addEditableTags(headerRes, "header");
5454
setHeader(headerRes);
5555
}
5656

5757
useEffect(() => {
5858
const callbackId = ContentstackLivePreview.onLiveEdit(getHeaderData);
5959
return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
60-
}, [])
60+
}, []);
6161

6262
useEffect(() => {
6363
dispatch(actionHeader(getHeader));
64-
}, [getHeader])
64+
}, [getHeader]);
6565

6666
return (
6767
<header className="header">

‎src/live-preview-sdk/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ if (isBrowser) {
1313
region: process.env.CONTENTSTACK_REGION ? process.env.CONTENTSTACK_REGION : "us",
1414
branch: process.env.CONTENTSTACK_BRANCH ? process.env.CONTENTSTACK_BRANCH : "main",
1515
live_preview: {
16-
management_token: process.env.CONTENTSTACK_MANAGEMENT_TOKEN,
1716
enable: process.env.CONTENTSTACK_LIVE_PREVIEW === "true",
18-
host: process.env.CONTENTSTACK_API_HOST,
17+
preview_host: process.env.CONTENTSTACK_PREVIEW_HOST,
18+
preview_token: process.env.CONTENTSTACK_PREVIEW_TOKEN,
1919
},
2020
jsonRteToHtml: true,
2121
});

‎src/templates/blog-page.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,28 @@ import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index";
99
import { PageProps } from "../typescript/template";
1010
import BlogList from "../components/BlogList";
1111
import ContentstackLivePreview from "@contentstack/live-preview-utils";
12-
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview"
12+
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
1313

1414
const Blog = ({
1515
data: { allContentstackBlogPost, contentstackPage },
1616
}: PageProps) => {
17-
ContentstackGatsby.addContentTypeUidFromTypename(contentstackPage)
18-
isLiveEditTagsEnabled && addEditableTags(contentstackPage, "page")
17+
ContentstackGatsby.addContentTypeUidFromTypename(contentstackPage);
18+
isLiveEditTagsEnabled && addEditableTags(contentstackPage, "page");
1919
const [getEntry, setEntry] = useState({
2020
banner: contentstackPage,
2121
blogList: allContentstackBlogPost.nodes,
2222
});
2323

2424
async function fetchData() {
2525
const updatedData = await getCSData.get(contentstackPage);
26-
isLiveEditTagsEnabled && addEditableTags(updatedData, "page")
27-
setEntry((prev) => ({ ...prev, banner: updatedData }))
26+
isLiveEditTagsEnabled && addEditableTags(updatedData, "page");
27+
setEntry(prev => ({ ...prev, banner: updatedData }));
2828
}
2929

3030
useEffect(() => {
3131
const callbackId = ContentstackLivePreview.onLiveEdit(fetchData);
3232
return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
33-
}, [])
33+
}, []);
3434

3535
const newBlogList = [] as any;
3636
const newArchivedList = [] as any;
@@ -69,7 +69,7 @@ const Blog = ({
6969
export const postQuery = graphql`
7070
query {
7171
contentstackPage(url: { eq: "/blog" }) {
72-
__typename
72+
cslp__meta
7373
title
7474
url
7575
uid
@@ -89,7 +89,7 @@ export const postQuery = graphql`
8989
from_blog {
9090
title_h2
9191
featured_blogs {
92-
__typename
92+
9393
title
9494
uid
9595
url
@@ -185,11 +185,11 @@ export const postQuery = graphql`
185185
locale
186186
author {
187187
title
188-
__typename
188+
cslp__meta
189189
uid
190190
}
191191
related_post {
192-
__typename
192+
cslp__meta
193193
uid
194194
title
195195
body

‎src/templates/blog-post.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,28 @@ import RenderComponents from "../components/RenderComponents";
1010
import { addEditableTags, isLiveEditTagsEnabled } from "../helper";
1111
import { PageProps } from "../typescript/template";
1212
import ContentstackLivePreview from "@contentstack/live-preview-utils";
13-
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview"
13+
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
1414

1515
const blogPost = ({
1616
data: { contentstackBlogPost, contentstackPage },
1717
}: PageProps) => {
18-
ContentstackGatsby.addContentTypeUidFromTypename(contentstackBlogPost)
19-
isLiveEditTagsEnabled && addEditableTags(contentstackBlogPost, "blog_post")
18+
ContentstackGatsby.addContentTypeUidFromTypename(contentstackBlogPost);
19+
isLiveEditTagsEnabled && addEditableTags(contentstackBlogPost, "blog_post");
2020
const [getEntry, setEntry] = useState({
2121
banner: contentstackPage,
2222
post: contentstackBlogPost,
2323
});
2424

2525
const fetchLivePreviewData = async () => {
2626
const updatedData = await getCSData.get(contentstackBlogPost);
27-
isLiveEditTagsEnabled && addEditableTags(updatedData, "blog_post")
28-
setEntry((prev) => ({...prev, post: updatedData}))
29-
}
27+
isLiveEditTagsEnabled && addEditableTags(updatedData, "blog_post");
28+
setEntry(prev => ({ ...prev, post: updatedData }));
29+
};
3030

3131
useEffect(() => {
3232
const callbackId = ContentstackLivePreview.onLiveEdit(fetchLivePreviewData);
3333
return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
34-
}, [])
34+
}, []);
3535

3636
return (
3737
<Layout blogPost={getEntry.post} banner={getEntry.banner}>
@@ -78,7 +78,7 @@ const blogPost = ({
7878
export const postQuery = graphql`
7979
query ($title: String!) {
8080
contentstackBlogPost(title: { eq: $title }) {
81-
__typename
81+
cslp__meta
8282
url
8383
title
8484
body
@@ -93,7 +93,7 @@ export const postQuery = graphql`
9393
}
9494
}
9595
related_post {
96-
__typename
96+
9797
uid
9898
body
9999
url
@@ -110,7 +110,7 @@ export const postQuery = graphql`
110110
contentstackPage(url: { eq: "/blog" }) {
111111
title
112112
url
113-
__typename
113+
cslp__meta
114114
uid
115115
locale
116116
seo {
@@ -129,7 +129,7 @@ export const postQuery = graphql`
129129
title_h2
130130
featured_blogs {
131131
title
132-
__typename
132+
133133
uid
134134
url
135135
is_archived

‎src/templates/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Page = ({ data: { contentstackPage } }: PageProps) => {
4747
export const pageQuery = graphql`
4848
query ($url: String!) {
4949
contentstackPage(url: { eq: $url }) {
50-
__typename
50+
cslp__meta
5151
uid
5252
title
5353
url
@@ -69,7 +69,7 @@ export const pageQuery = graphql`
6969
7070
featured_blogs {
7171
uid
72-
__typename
72+
7373
title
7474
url
7575
featured_image {

0 commit comments

Comments
 (0)