chore(website): add basic setup for Storyblok

Add initialization and providers to start using Storyblok in the website
socialincome-san · Mar 11, 2024 · b9fe701 · b9fe701
1 parent f53927b
commit b9fe701
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -1,16 +1,30 @@
 import { ContextProviders } from '@/app/context-providers';
+import StoryblokProvider from '@/components/storyblok/storyblok-provider';
 import { getMetadata } from '@/metadata';
+import { apiPlugin, storyblokInit } from '@storyblok/react';
 import { PropsWithChildren } from 'react';
 import './globals.css';
 
+// Import without component definition. This is for server-side rendering.
+// The client-side initailization is done in `components/storyblok-provider.tsx`
+storyblokInit({
+	accessToken: process.env.NEXT_PUBLIC_STORYBLOK_PREVIEW_TOKEN,
+	use: [apiPlugin],
+	apiOptions: {
+		region: process.env.NEXT_PUBLIC_STORYBLOK_REGION,
+	},
+});
+
 export const generateMetadata = () => getMetadata('en', 'website-common');
 
 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
-		<html suppressHydrationWarning={true}>
-			<ContextProviders>
-				<body>{children}</body>
-			</ContextProviders>
-		</html>
+		<StoryblokProvider>
+			<html suppressHydrationWarning={true}>
+				<ContextProviders>
+					<body>{children}</body>
+				</ContextProviders>
+			</html>
+		</StoryblokProvider>
 	);
 }
diff --git a/website/src/components/storyblok/storyblok-provider.tsx b/website/src/components/storyblok/storyblok-provider.tsx
@@ -0,0 +1,26 @@
+'use client';
+import { SIStoryblokComponentsMap } from '@/types/storyblok/storyblok-util';
+import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';
+
+const components: SIStoryblokComponentsMap = {};
+
+// Import with component mapping.
+// it's necessary to re-initialize here as well,
+// as to enable the live editing experience inside
+// the Visual Editor you need to initialize the
+// lib universally (client + server).
+storyblokInit({
+	accessToken: process.env.NEXT_PUBLIC_STORYBLOK_PREVIEW_TOKEN,
+	use: [apiPlugin],
+	apiOptions: {
+		region: process.env.NEXT_PUBLIC_STORYBLOK_REGION,
+	},
+	components,
+});
+
+/**
+ * Wrapper to ensure client-side loading for hybrid rendering.
+ */
+export default function StoryblokProvider({ children }: { children: JSX.Element }) {
+	return children;
+}