joakimgunst · joakimgunst · Sep 13, 2023 · Sep 13, 2023
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "generate-contentful-types": "pnpm cf-content-types-generator --token $CONTENTFUL_MANAGEMENT_ACCESS_TOKEN --spaceId 5v042gad04cj --environment master --v10 --out src/contentful/types"
   },
   "dependencies": {
+    "@contentful/live-preview": "2.9.6",
     "@contentful/rich-text-react-renderer": "15.17.2",
     "@vercel/analytics": "1.0.2",
     "clsx": "2.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
@@ -17,7 +17,7 @@ async function getData(slug: string[]) {
 
 export async function generateMetadata({ params: { slug } }: Props) {
   const [page] = await getData(slug);
-  return getMetadata(page);
+  return getMetadata(page?.fields);
 }
 
 export default async function Page({ params: { slug } }: Props) {
@@ -30,12 +30,12 @@ export default async function Page({ params: { slug } }: Props) {
   return (
     <MainContent>
       <div>
-        <h1>{page.title}</h1>
-        {page.image && <HeroImage image={page.image} />}
-        {page.content && <ContentBlock content={page.content} />}
+        <h1>{page.fields.title}</h1>
+        {page.fields.image && <HeroImage image={page.fields.image} />}
+        {page.fields.content && <ContentBlock content={page.fields.content} />}
       </div>
 
-      {sidebar && <Sidebar>{renderDocument(sidebar.content)}</Sidebar>}
+      {sidebar && <Sidebar>{renderDocument(sidebar.fields.content)}</Sidebar>}
     </MainContent>
   );
 }

diff --git a/src/app/kontakt/page.tsx b/src/app/kontakt/page.tsx
@@ -26,7 +26,7 @@ export default async function Page() {
         </div>
       </div>
 
-      {sidebar && <Sidebar>{renderDocument(sidebar.content)}</Sidebar>}
+      {sidebar && <Sidebar>{renderDocument(sidebar.fields.content)}</Sidebar>}
     </MainContent>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { draftMode } from 'next/headers';
 import GoogleAnalytics from '@/components/GoogleAnalytics';
 import './global.css';
+import { LivePreviewProvider } from '@/components/LivePreviewProvider';
 
 export const metadata = {
   title: {
@@ -50,13 +51,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="sv" className={clsx(alegreya.variable, alegreyaSans.variable)}>
       <body>
-        <Layout>
-          <Header />
-          {isEnabled && <PreviewIndicator />}
-          {children}
-          <Analytics />
-          <GoogleAnalytics />
-        </Layout>
+        <LivePreviewProvider>
+          <Layout>
+            <Header />
+            {isEnabled && <PreviewIndicator />}
+            {children}
+            <Analytics />
+            <GoogleAnalytics />
+          </Layout>
+        </LivePreviewProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,7 +7,7 @@ import HeroImage from '@/components/HeroImage';
 import { siteName } from '@/config';
 import Link from 'next/link';
 import styles from './page.module.css';
-import { getMetadata } from '@/contentful/utils';
+import { getFieldAttrs, getMetadata } from '@/contentful/utils';
 import { draftMode } from 'next/headers';
 
 async function getData() {
@@ -22,7 +22,7 @@ async function getData() {
 
 export async function generateMetadata() {
   const [post] = await getData();
-  return getMetadata(post);
+  return getMetadata(post?.fields);
 }
 
 export default async function Page() {
@@ -32,8 +32,8 @@ export default async function Page() {
     <MainContent>
       <div>
         <h1>{siteName}</h1>
-        {page?.image && <HeroImage image={page.image} />}
-        {page?.content && <div>{renderDocument(page.content)}</div>}
+        {page?.fields.image && <HeroImage image={page.fields.image} />}
+        {page?.fields.content && <div {...getFieldAttrs(page, 'content')}>{renderDocument(page.fields.content)}</div>}
 
         <h2>Aktuellt</h2>
         {posts.map((post) => (
@@ -45,7 +45,7 @@ export default async function Page() {
         </div>
       </div>
 
-      {sidebar && <Sidebar>{renderDocument(sidebar.content)}</Sidebar>}
+      {sidebar && <Sidebar>{renderDocument(sidebar?.fields.content)}</Sidebar>}
     </MainContent>
   );
 }
diff --git a/src/app/post/[slug]/page.tsx b/src/app/post/[slug]/page.tsx
@@ -20,7 +20,7 @@ async function getData(slug: string) {
 
 export async function generateMetadata({ params: { slug } }: Props) {
   const [post] = await getData(slug);
-  return getMetadata(post);
+  return getMetadata(post?.fields);
 }
 
 export default async function Page({ params: { slug } }: Props) {
@@ -33,11 +33,11 @@ export default async function Page({ params: { slug } }: Props) {
   return (
     <MainContent>
       <article>
-        <h1>{post.title}</h1>
-        {post.image && <HeroImage image={post.image} />}
-        <p className={styles.date}>{formatDate(post.date)}</p>
-        {renderDocument(post.lead)}
-        {post.content && <ContentBlock content={post.content} />}
+        <h1>{post.fields.title}</h1>
+        {post.fields.image && <HeroImage image={post.fields.image} />}
+        <p className={styles.date}>{formatDate(post.fields.date)}</p>
+        {renderDocument(post.fields.lead)}
+        {post.fields.content && <ContentBlock content={post.fields.content} />}
       </article>
 
       {posts && (

diff --git a/src/app/referensnummer/page.tsx b/src/app/referensnummer/page.tsx
@@ -12,7 +12,7 @@ async function getData() {
 
 export async function generateMetadata() {
   const page = await getData();
-  return getMetadata(page);
+  return getMetadata(page?.fields);
 }
 
 export default async function Page() {
@@ -21,8 +21,8 @@ export default async function Page() {
   return (
     <MainContent>
       <div>
-        <h1>{page?.title}</h1>
-        {page?.content && <div>{renderDocument(page.content)}</div>}
+        <h1>{page?.fields.title}</h1>
+        {page?.fields.content && <div>{renderDocument(page.fields.content)}</div>}
         <ReferenceNumberForm />
       </div>
     </MainContent>

diff --git a/src/components/LivePreviewProvider.tsx b/src/components/LivePreviewProvider.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+import React from 'react';
+import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
+import { locale } from '@/config';
+
+export function LivePreviewProvider({ children }: { children: React.ReactNode }) {
+  return <ContentfulLivePreviewProvider locale={locale}>{children}</ContentfulLivePreviewProvider>;
+}
diff --git a/src/config.ts b/src/config.ts
@@ -2,3 +2,4 @@ export const siteName = 'Scoutkåren Munksnäs Spejarna';
 export const siteDescription =
   'Munksnäs Spejarna är en finlandssvensk landscoutkår verksam i Munksnäs i västra Helsingfors.';
 export const baseUrl = 'https://www.munksnasspejarna.fi';
+export const locale = 'sv-FI';
diff --git a/src/contentful/client.ts b/src/contentful/client.ts
@@ -40,5 +40,5 @@ export async function getContentfulEntry<T extends EntrySkeletonType>(
   preview?: boolean,
 ) {
   const entries = await getClient(preview).getEntries<T>(query);
-  return entries.items.at(0)?.fields ?? null;
+  return entries.items.at(0);
 }
diff --git a/src/contentful/utils.ts b/src/contentful/utils.ts
@@ -1,5 +1,7 @@
 import { Metadata } from 'next';
 import { ContentfulAsset, ContentfulPage, ContentfulPost } from './data';
+import { Entry, EntrySkeletonType } from 'contentful';
+import { ContentfulLivePreview } from '@contentful/live-preview';
 
 export function getAssetUrl(asset: ContentfulAsset | undefined) {
   return asset?.fields?.file?.url;
@@ -25,3 +27,10 @@ export function getMetadata(fields: ContentfulPage | ContentfulPost | null | und
     }),
   } satisfies Metadata;
 }
+
+export function getFieldAttrs<T extends EntrySkeletonType>(
+  entry: Entry<T>,
+  fieldId: Extract<keyof T['fields'], string>,
+) {
+  return ContentfulLivePreview.getProps({ entryId: entry.sys.id, fieldId });
+}