contentstack / live-preview-sdk Goto Github PK
View Code? Open in Web Editor NEWThis SDK is responsible to establish a communication channel between the Contentstack SDK and your website, and transfer live changes to the site.
License: MIT License
This SDK is responsible to establish a communication channel between the Contentstack SDK and your website, and transfer live changes to the site.
License: MIT License
Hi,
I managed to set this up for our project as a poc, but would like to request an enhancement on this feature.
It would be great if the uid and content type is passed to the call back, so we only re-render specific components, instead of everything.
live-preview-sdk/src/live-preview.ts
Line 123 in d0456e1
The SSR listeners that change how links/clicks work are breaking our site links. It's changing links from relative to absolute, which we don't want. It would be nice to be able to turn this off, and/or give us a way to disable live preview unless we are inside the Contentstack iFrame. I currently have the following code so that live preview only breaks our links in preview and not our deployed site.
We are using Next.js with SSR queries.
if (typeof window !== 'undefined'
&& window.location !== window.parent.location
&& window.location.ancestorOrigins[0] === 'https://app.contentstack.com'
&& (ContentstackLivePreview.hash == null || ContentstackLivePreview.hash === '')) {
console.log('Initializing Contentstack Live Preview')
void ContentstackLivePreview.init({
ssr: true,
runScriptsOnUpdate: false,
cleanCslpOnProduction: false,
editButton: {
enable: false
}
})
}
Another solution I think that could help is if we could default the live preview in Contentstack to SSR with a setting so we can expect the URL params on first load.
Hello team,
could you please help me figure out why this is happening? Seems to be a problem with post-robot and its sayHello
function. Perhaps it's just a matter of bumping the post-robot
version (you're using 8 whereas the latest one is 10).
FYI: In the reproduction steps, I am using a dynamic import because
import ContentstackLivePreview from '@contentstack/live-preview-utils';
yields the following error, even if I don't reference the ContentstackLivePreview
anywhere
Generate new Nuxt 3 project
npx nuxi@latest init --git-init false --package-manager yarn --dir test-project
Enter new project's directory
cd nuxt-app
Install Live Preview utils
yarn add @contentstack/live-preview-utils
Run your app
yarn run dev
(and open the Live Preview window in Contentstack)
Dynamically import Live Preview in the app.vue component
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>
<script setup>
const isClient = typeof window !== 'undefined';
if (isClient) {
const ContentstackLivePreview = await import('@contentstack/live-preview-utils');
ContentstackLivePreview.init({ ssr: false });
}
</script>
see the following error:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.