From 62c932571b27f86334a616ba0ea4d62364d84a22 Mon Sep 17 00:00:00 2001 From: Ankita Dodamani Date: Fri, 1 Mar 2024 18:00:46 +0530 Subject: [PATCH 1/4] feat: added changes for live preview 2.0 support --- .env.sample | 3 ++- package-lock.json | 16 ++++++++-------- package.json | 2 +- src/components/Footer.tsx | 18 +++++++----------- src/components/Header.tsx | 12 ++++++------ src/live-preview-sdk/index.ts | 4 ++-- src/templates/blog-page.tsx | 20 ++++++++++---------- src/templates/blog-post.tsx | 22 +++++++++++----------- src/templates/page.tsx | 4 ++-- 9 files changed, 49 insertions(+), 52 deletions(-) diff --git a/.env.sample b/.env.sample index 5450c6c..d26d483 100644 --- a/.env.sample +++ b/.env.sample @@ -8,9 +8,10 @@ CONTENTSTACK_DELIVERY_TOKEN= YOUR_DELIVERY_TOKEN CONTENTSTACK_ENVIRONMENT= YOUR_PUBLISHING_ENVIRONMENT # For live preview -CONTENTSTACK_MANAGEMENT_TOKEN=YOUR_MANAGEMENT_TOKEN +CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN CONTENTSTACK_API_HOST=api.contentstack.io CONTENTSTACK_APP_HOST=app.contentstack.com +CONTENTSTACK_PREVIEW_HOST=YOUR_PREVIEW_HOST #rest-preview.contentstack.com CONTENTSTACK_LIVE_PREVIEW=true CONTENTSTACK_LIVE_EDIT_TAGS=false diff --git a/package-lock.json b/package-lock.json index 136780b..955d860 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@contentstack/utils": "^1.1.1", "@popperjs/core": "^2.11.8", "bootstrap": "^5.1.3", - "contentstack": "^3.17.1", + "contentstack": "^3.19.0", "dotenv": "^16.3.1", "gatsby": "^5.12.5", "gatsby-plugin-env-variables": "^2.3.0", @@ -6293,15 +6293,15 @@ } }, "node_modules/contentstack": { - "version": "3.17.1", - "resolved": "https://registry.npmjs.org/contentstack/-/contentstack-3.17.1.tgz", - "integrity": "sha512-27puCZXH0GoOJ7wx5qPZhUQZSYHfk506+er47INfoNDiB0FHbkmelo311us8LgqrN57jy+oouI4gyPO2k0ZRLA==", + "version": "3.19.0", + "resolved": "https://registry.npmjs.org/contentstack/-/contentstack-3.19.0.tgz", + "integrity": "sha512-LxBY53g/QDWq7K3xP6o9nwj5meV/RtOpr5lgbCOD27sr4wcz/UMHOSVK1grPFlIvV/ostaWt6IECmvbcs+pxwg==", "dependencies": { "@contentstack/utils": "^1.2.0", "es6-promise": "^4.1.1", "isomorphic-fetch": "^3.0.0", "localStorage": "1.0.4", - "qs": "^6.11.1" + "qs": "^6.11.2" }, "engines": { "node": ">= 10.14.2" @@ -13723,9 +13723,9 @@ "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==" }, "node_modules/qs": { - "version": "6.11.1", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz", - "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==", + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz", + "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==", "dependencies": { "side-channel": "^1.0.4" }, diff --git a/package.json b/package.json index 1aee2b4..44a615f 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "@contentstack/utils": "^1.1.1", "@popperjs/core": "^2.11.8", "bootstrap": "^5.1.3", - "contentstack": "^3.17.1", + "contentstack": "^3.19.0", "dotenv": "^16.3.1", "gatsby": "^5.12.5", "gatsby-plugin-env-variables": "^2.3.0", diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 99742c2..db3ae38 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -5,11 +5,7 @@ import { connect } from "react-redux"; import { actionFooter } from "../store/actions/state.action"; import { getCSData } from "../live-preview-sdk/index"; import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index"; -import { - DispatchData, - Social, - Menu, -} from "../typescript/layout"; +import { DispatchData, Social, Menu } from "../typescript/layout"; import { FooterModel } from "../common/types"; import ContentstackLivePreview from "@contentstack/live-preview-utils"; import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview"; @@ -18,7 +14,7 @@ const queryLayout = () => { const data = useStaticQuery(graphql` query { contentstackFooter { - __typename + cslp__meta title uid logo { @@ -50,24 +46,24 @@ const queryLayout = () => { const Footer = ({ dispatch }: DispatchData) => { const { contentstackFooter } = queryLayout(); - ContentstackGatsby.addContentTypeUidFromTypename(contentstackFooter) - isLiveEditTagsEnabled && addEditableTags(contentstackFooter, "footer") + ContentstackGatsby.addContentTypeUidFromTypename(contentstackFooter); + isLiveEditTagsEnabled && addEditableTags(contentstackFooter, "footer"); const [getFooter, setFooter] = useState(contentstackFooter); async function getFooterData() { const footerRes: FooterModel = await getCSData.get(contentstackFooter); - isLiveEditTagsEnabled && addEditableTags(footerRes, "footer") + isLiveEditTagsEnabled && addEditableTags(footerRes, "footer"); setFooter(footerRes); } useEffect(() => { const callbackId = ContentstackLivePreview.onLiveEdit(getFooterData); return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId); - }, []) + }, []); useEffect(() => { dispatch(actionFooter(getFooter)); - }, [getFooter]) + }, [getFooter]); return (