fix: try preview mode forcing CSR

aleph-im · Mar 4, 2024 · b7808da · b7808da
1 parent 426f6b3
commit b7808da
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 49 deletions.
diff --git a/pages/[[...slug]].js b/pages/[[...slug]].js
@@ -6,29 +6,32 @@ import {
   StoryblokComponent
 } from "@storyblok/react"
 
-export default function SlugPage({ slug, version, story }) {
-  const staticStory = useStoryblokState(story)
-  const dynamicStory = useStoryblok(slug, { version })
+export default function SlugPage({ slug, version, preview, story }) {
+  const staticStory = useStoryblokState(story, undefined, preview)
+  const dynamicStory = useStoryblok(slug, { version }, preview)
 
-  const story2 = dynamicStory?.name ? dynamicStory : staticStory
+  const renderStory = preview
+    ? dynamicStory
+    : dynamicStory?.name
+      ? dynamicStory
+      : staticStory
 
   return (
     <div >
       <Head>
-        <title>{story2 ? story2.name : "My Site"}</title>
+        <title>{renderStory?.name || "My Site"}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <StoryblokComponent blok={story2.content} />
+      {renderStory?.name ? <StoryblokComponent blok={renderStory.content} /> : null}
     </div>
   );
 }
 
 export async function getStaticProps({ params }) {
   let slug = params.slug && params.slug.length ? params.slug.join("/") : "home";
 
-  console.log('slug', slug)
-
-  const version = process.env.VERSION
+  const version = process.env.VERSION || preview ? "draft" : "published"
+  const preview = version === 'draft' ? {} : undefined
 
   const storyblokApi = getStoryblokApi();
   let { data } = await storyblokApi.get(`cdn/stories/${slug}`, { version });
@@ -38,19 +41,21 @@ export async function getStaticProps({ params }) {
       story: data ? data.story : false,
       key: data ? data.story.id : false,
       slug,
-      version
+      version,
+      preview
     },
     revalidate: 3600,
   };
 }
 
 export async function getStaticPaths() {
+  const version = process.env.VERSION
+
   const storyblokApi = getStoryblokApi();
-  let { data } = await storyblokApi.get("cdn/links/", {
-    version: process.env.VERSION
-  });
 
+  let { data } = await storyblokApi.get("cdn/links/", { version });
   let paths = [];
+
   Object.keys(data.links).forEach((linkKey) => {
     if (data.links[linkKey].is_folder) {
       return;

diff --git a/pages/_app.js b/pages/_app.js
@@ -5,42 +5,6 @@ import Grid from "../components/Grid";
 import Page from "../components/Page";
 import Teaser from "../components/Teaser";
 
-
-function loadBridge(callback) {
-  const existingScript = document.getElementById("storyblokBridge");
-  if (!existingScript) {
-    const script = document.createElement("script");
-    script.src = "//app.storyblok.com/f/storyblok-v2-latest.js";
-    script.id = "storyblokBridge";
-    document.body.appendChild(script);
-    script.onload = () => {
-      callback();
-    };
-  } else {
-    callback();
-  }
-}
-
-function initBridge() {
-  const { StoryblokBridge, location } = window
-  const storyblokInstance = new StoryblokBridge()
-
-  storyblokInstance.on(['published', 'change'], () => {
-    // reload page if save or publish is clicked
-    location.reload(true)
-  })
-
-  storyblokInstance.on('input', (event) => {
-    // Access currently changed but not yet saved content via: 
-    console.log(event.story.content)
-  })
-}
-
-if (typeof window === 'object' && window.location.search.includes('_storyblok')) {
-  // load the bridge only inside of Storyblok
-  loadBridge(initBridge)
-}
-
 const components = {
   feature: Feature,
   grid: Grid,