Skip to content

Commit

Permalink
Merge pull request #91 from contentstack/MKT-4848-live-preview-support
Browse files Browse the repository at this point in the history
Mkt 4848 live preview support
  • Loading branch information
Contentstack-AnkitaD authored Mar 4, 2024
2 parents a9e9a35 + 271421b commit 48a69bb
Show file tree
Hide file tree
Showing 9 changed files with 52 additions and 55 deletions.
3 changes: 2 additions & 1 deletion .env.sample
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 10 additions & 10 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
"name": "contentstack-gatsby-starter-app",
"private": true,
"description": "A simple starter app build using Gatsby and Contentstack",
"version": "3.1.1",
"version": "3.2.0",
"author": "Contentstack",
"dependencies": {
"@contentstack/live-preview-utils": "^1.4.0",
"@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",
Expand Down
18 changes: 7 additions & 11 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -18,7 +14,7 @@ const queryLayout = () => {
const data = useStaticQuery(graphql`
query {
contentstackFooter {
__typename
cslp__meta
title
uid
logo {
Expand Down Expand Up @@ -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 (
<footer>
Expand Down
12 changes: 6 additions & 6 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const queryHeader = () => {
const query = graphql`
query {
contentstackHeader {
__typename
cslp__meta
title
uid
logo {
Expand Down Expand Up @@ -44,24 +44,24 @@ const queryHeader = () => {

const Header = ({ dispatch }: DispatchData) => {
const { contentstackHeader } = queryHeader();
ContentstackGatsby.addContentTypeUidFromTypename(contentstackHeader)
isLiveEditTagsEnabled && addEditableTags(contentstackHeader, "header")
ContentstackGatsby.addContentTypeUidFromTypename(contentstackHeader);
isLiveEditTagsEnabled && addEditableTags(contentstackHeader, "header");
const [getHeader, setHeader] = useState(contentstackHeader);

async function getHeaderData() {
const headerRes: HeaderModel = await getCSData.get(contentstackHeader);
isLiveEditTagsEnabled && addEditableTags(headerRes, "header")
isLiveEditTagsEnabled && addEditableTags(headerRes, "header");
setHeader(headerRes);
}

useEffect(() => {
const callbackId = ContentstackLivePreview.onLiveEdit(getHeaderData);
return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
}, [])
}, []);

useEffect(() => {
dispatch(actionHeader(getHeader));
}, [getHeader])
}, [getHeader]);

return (
<header className="header">
Expand Down
4 changes: 2 additions & 2 deletions src/live-preview-sdk/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ if (isBrowser) {
region: process.env.CONTENTSTACK_REGION ? process.env.CONTENTSTACK_REGION : "us",
branch: process.env.CONTENTSTACK_BRANCH ? process.env.CONTENTSTACK_BRANCH : "main",
live_preview: {
management_token: process.env.CONTENTSTACK_MANAGEMENT_TOKEN,
enable: process.env.CONTENTSTACK_LIVE_PREVIEW === "true",
host: process.env.CONTENTSTACK_API_HOST,
preview_host: process.env.CONTENTSTACK_PREVIEW_HOST,
preview_token: process.env.CONTENTSTACK_PREVIEW_TOKEN,
},
jsonRteToHtml: true,
});
Expand Down
20 changes: 10 additions & 10 deletions src/templates/blog-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,28 @@ import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index";
import { PageProps } from "../typescript/template";
import BlogList from "../components/BlogList";
import ContentstackLivePreview from "@contentstack/live-preview-utils";
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview"
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";

const Blog = ({
data: { allContentstackBlogPost, contentstackPage },
}: PageProps) => {
ContentstackGatsby.addContentTypeUidFromTypename(contentstackPage)
isLiveEditTagsEnabled && addEditableTags(contentstackPage, "page")
ContentstackGatsby.addContentTypeUidFromTypename(contentstackPage);
isLiveEditTagsEnabled && addEditableTags(contentstackPage, "page");
const [getEntry, setEntry] = useState({
banner: contentstackPage,
blogList: allContentstackBlogPost.nodes,
});

async function fetchData() {
const updatedData = await getCSData.get(contentstackPage);
isLiveEditTagsEnabled && addEditableTags(updatedData, "page")
setEntry((prev) => ({ ...prev, banner: updatedData }))
isLiveEditTagsEnabled && addEditableTags(updatedData, "page");
setEntry(prev => ({ ...prev, banner: updatedData }));
}

useEffect(() => {
const callbackId = ContentstackLivePreview.onLiveEdit(fetchData);
return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
}, [])
}, []);

const newBlogList = [] as any;
const newArchivedList = [] as any;
Expand Down Expand Up @@ -69,7 +69,7 @@ const Blog = ({
export const postQuery = graphql`
query {
contentstackPage(url: { eq: "/blog" }) {
__typename
cslp__meta
title
url
uid
Expand All @@ -89,7 +89,7 @@ export const postQuery = graphql`
from_blog {
title_h2
featured_blogs {
__typename
title
uid
url
Expand Down Expand Up @@ -185,11 +185,11 @@ export const postQuery = graphql`
locale
author {
title
__typename
cslp__meta
uid
}
related_post {
__typename
cslp__meta
uid
title
body
Expand Down
22 changes: 11 additions & 11 deletions src/templates/blog-post.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,28 @@ import RenderComponents from "../components/RenderComponents";
import { addEditableTags, isLiveEditTagsEnabled } from "../helper";
import { PageProps } from "../typescript/template";
import ContentstackLivePreview from "@contentstack/live-preview-utils";
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview"
import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";

const blogPost = ({
data: { contentstackBlogPost, contentstackPage },
}: PageProps) => {
ContentstackGatsby.addContentTypeUidFromTypename(contentstackBlogPost)
isLiveEditTagsEnabled && addEditableTags(contentstackBlogPost, "blog_post")
ContentstackGatsby.addContentTypeUidFromTypename(contentstackBlogPost);
isLiveEditTagsEnabled && addEditableTags(contentstackBlogPost, "blog_post");
const [getEntry, setEntry] = useState({
banner: contentstackPage,
post: contentstackBlogPost,
});

const fetchLivePreviewData = async () => {
const updatedData = await getCSData.get(contentstackBlogPost);
isLiveEditTagsEnabled && addEditableTags(updatedData, "blog_post")
setEntry((prev) => ({...prev, post: updatedData}))
}
isLiveEditTagsEnabled && addEditableTags(updatedData, "blog_post");
setEntry(prev => ({ ...prev, post: updatedData }));
};

useEffect(() => {
const callbackId = ContentstackLivePreview.onLiveEdit(fetchLivePreviewData);
return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
}, [])
}, []);

return (
<Layout blogPost={getEntry.post} banner={getEntry.banner}>
Expand Down Expand Up @@ -78,7 +78,7 @@ const blogPost = ({
export const postQuery = graphql`
query ($title: String!) {
contentstackBlogPost(title: { eq: $title }) {
__typename
cslp__meta
url
title
body
Expand All @@ -93,7 +93,7 @@ export const postQuery = graphql`
}
}
related_post {
__typename
uid
body
url
Expand All @@ -110,7 +110,7 @@ export const postQuery = graphql`
contentstackPage(url: { eq: "/blog" }) {
title
url
__typename
cslp__meta
uid
locale
seo {
Expand All @@ -129,7 +129,7 @@ export const postQuery = graphql`
title_h2
featured_blogs {
title
__typename
uid
url
is_archived
Expand Down
4 changes: 2 additions & 2 deletions src/templates/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const Page = ({ data: { contentstackPage } }: PageProps) => {
export const pageQuery = graphql`
query ($url: String!) {
contentstackPage(url: { eq: $url }) {
__typename
cslp__meta
uid
title
url
Expand All @@ -69,7 +69,7 @@ export const pageQuery = graphql`
featured_blogs {
uid
__typename
title
url
featured_image {
Expand Down

0 comments on commit 48a69bb

Please sign in to comment.