Add preview mode to every page (#99)

* Add preview mode to every page

* Update cookie SameSite attribute

Author: sjoerdbeentjes

src/components/PreviewMode/PreviewMode.astro

@@ -1,57 +1,68 @@
 ---
 const { datocmsEnvironment, datocmsToken, isPreview } = Astro.locals;
 ---
+
 <preview-mode
-  data-datocms-environment={ datocmsEnvironment }
-  data-datocms-token={ isPreview && datocmsToken }
+  data-datocms-environment={datocmsEnvironment}
+  data-datocms-token={isPreview && datocmsToken}
 >
-  <preview-mode-bar>  
+  <preview-mode-bar>
     Preview mode
-    <span role="presentation" data-status="closed" />
-    <a href={ `/api/preview/exit/?location=${Astro.url}` }>exit preview</a>
+    <span role="presentation" data-status="closed"></span>
+    <a href={`/api/preview/exit/?location=${Astro.url}`}>exit preview</a>
   </preview-mode-bar>
   <slot />
 </preview-mode>
 
 <script src="./PreviewMode.client.ts"></script>
 
 <style>
-preview-mode-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1em;
-  background: black;
-  color: white;
-}
+  preview-mode-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1em;
+    background: black;
+    color: white;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    max-width: 1440px;
+    margin-inline: auto;
+  }
 
-a {
-  color: white;
-}
+  a {
+    color: white;
+  }
 
-[data-status]:before {
-  display: inline-block;
-  margin-left: .5em;
-  margin-right: .5em;
-}
-[data-status="closed"]:before {
-  content: "⚪";
-}
-[data-status="connecting"]:before {
-  content: "🟠";
-  animation: pulseAnimation 1s infinite;
-}
-[data-status="connected"]:before {
-  content: "🟢";
-  animation: pulseAnimation 2s infinite;
-}
-[data-status="error"]:before {
-  content: "🔴";
-}
+  [data-status]:before {
+    display: inline-block;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+  [data-status='closed']:before {
+    content: '⚪';
+  }
+  [data-status='connecting']:before {
+    content: '🟠';
+    animation: pulseAnimation 1s infinite;
+  }
+  [data-status='connected']:before {
+    content: '🟢';
+    animation: pulseAnimation 2s infinite;
+  }
+  [data-status='error']:before {
+    content: '🔴';
+  }
 
-@keyframes pulseAnimation {
-  0%   { opacity: 1; }
-  50%  { opacity: 0.2; }
-  100% { opacity: 1; }
-}
+  @keyframes pulseAnimation {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.2;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 </style>

src/pages/404.astro

@@ -8,7 +8,7 @@ import Blocks from '@blocks/Blocks.astro';
 import PageHeader from '@blocks/PageHeader/PageHeader.astro';
 import type { AnyBlock } from '@blocks/Blocks';
 import query from './_404.query.graphql';
-
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 export const prerender = false;
 
 Astro.response.status = 404;
@@ -21,6 +21,8 @@ const { page } = (await datocmsRequest<NotFoundPageQuery>({
 ---
 
 <Layout pageUrls={[]} seoMetaTags={[noIndexTag, titleTag(page.title)]}>
+  <PreviewModeSubscription query={query} variables={{ locale }} />
+
   <PageHeader title={page.header.title} subtitle={page.header.subtitle} />
 
   <div class="container-padding-x">

src/pages/api/preview/enter.ts

@@ -7,9 +7,11 @@ export const prerender = false;
 export const cookiePath = '/';
 
 export const GET: APIRoute = async ({ cookies, locals, request }) => {
-
   if (!locals.previewSecret) {
-    return new Response('Configure HEAD_START_PREVIEW_SECRET to enable preview mode', { status: 500 });
+    return new Response(
+      'Configure HEAD_START_PREVIEW_SECRET to enable preview mode',
+      { status: 500 },
+    );
   }
 
   const userSecret = new URL(request.url).searchParams.get('secret');
@@ -18,15 +20,15 @@ export const GET: APIRoute = async ({ cookies, locals, request }) => {
       httpOnly: true,
       secure: PUBLIC_IS_PRODUCTION,
       path: cookiePath,
-      sameSite: 'strict',
+      sameSite: 'lax',
       maxAge: 60 * 60 * 24 * 7, // 1 week
     });
   }
 
   // We don't redirect to location as that might lead to open redirect vulnerabilities
   const location = new URL(request.url).searchParams.get('location') || '/';
-  return new Response('',{
+  return new Response('', {
     status: 307,
-    headers: { 'Location': location },
+    headers: { Location: location },
   });
 };

src/pages/events/index.astro

@@ -18,6 +18,7 @@ import PageHeader from '@blocks/PageHeader/PageHeader.astro';
 import PartnerBanner from '@blocks/PartnerBanner/PartnerBanner.astro';
 import { Button } from '@components/Button';
 import { Heading } from '@components/Heading';
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 
 setCacheControl(Astro.response, 0, 10);
 
@@ -36,6 +37,10 @@ if (!page) {
 ---
 
 <Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
+  <PreviewModeSubscription
+    query={query}
+    variables={{ locale: locale as SiteLocale }}
+  />
   <PageHeader title={page.header.title} subtitle={page.header.subtitle}>
     <Fragment slot="header">
       <Button

src/pages/leden/[slug]/index.astro

@@ -17,6 +17,7 @@ import { ContactBlock } from '@blocks/ContactBlock/ContactBlock';
 import PartnerBanner from '@blocks/PartnerBanner/PartnerBanner.astro';
 import TextBlock from '@blocks/TextBlock/TextBlock.astro';
 import { VacancyDataList } from '@components/VacancyDataList';
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 
 import { Button } from '@components/Button';
 import { Column, Grid, type SpanOptions } from '@components/Grid';
@@ -39,6 +40,10 @@ if (!page) {
 ---
 
 <Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
+  <PreviewModeSubscription
+    query={memberPageQuery}
+    variables={{ locale, slug }}
+  />
   <PageTitle>
     <PageTitleHeader>
       <Button

src/pages/leden/index.astro

@@ -10,7 +10,7 @@ import { Button } from '@components/Button';
 import { MemberList } from '@blocks/MemberList';
 import PageHeader from '@blocks/PageHeader/PageHeader.astro';
 import PartnerBanner from '@blocks/PartnerBanner/PartnerBanner.astro';
-
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 import membersPageQuery from './_membersPage.query.graphql';
 
 setCacheControl(Astro.response, 0, 10);
@@ -28,6 +28,8 @@ if (!page) {
 ---
 
 <Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
+  <PreviewModeSubscription query={membersPageQuery} variables={{ locale }} />
+
   <PageHeader title={page.header.title} subtitle={page.header.subtitle}>
     <Fragment slot="header">
       <Button

src/pages/over-ons/index.astro

@@ -21,6 +21,7 @@ import { TeamMemberCard } from '@blocks/TeamMemberCard';
 import PageHeader from '@blocks/PageHeader/PageHeader.astro';
 import MemberParade from '@blocks/MemberParade/MemberParade.astro';
 import TextBlock from '@blocks/TextBlock/TextBlock.astro';
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 
 setCacheControl(Astro.response);
 
@@ -39,6 +40,10 @@ if (!page) {
 ---
 
 <Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
+  <PreviewModeSubscription
+    query={query}
+    variables={{ locale: locale as SiteLocale }}
+  />
   <PageHeader
     title={page.header.title}
     subtitle={page.header.subtitle}

src/pages/publicaties/[slug]/index.astro

@@ -15,13 +15,13 @@ import {
   PageTitleContent,
   PageTitleHeader,
 } from '@components/PageTitle';
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 
 import TextBlock from '@blocks/TextBlock/TextBlock.astro';
 import { PublicationCard } from '@blocks/PublicationCard';
 import PartnerBanner from '@blocks/PartnerBanner/PartnerBanner.astro';
 
 import publicationPageQuery from './_publicationPage.query.graphql';
-
 setCacheControl(Astro.response);
 
 const { locale, slug } = Astro.params as { locale: SiteLocale; slug: string };
@@ -39,6 +39,10 @@ if (!page) {
 ---
 
 <Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
+  <PreviewModeSubscription
+    query={publicationPageQuery}
+    variables={{ locale, slug }}
+  />
   <PageTitle>
     <PageTitleHeader>
       <Button

src/pages/publicaties/index.astro

@@ -4,6 +4,7 @@ import { PublicationCard } from '@blocks/PublicationCard';
 import PublicationList from '@blocks/PublicationList/PublicationList.astro';
 import { Button } from '@components/Button';
 import { Column, Grid } from '@components/Grid';
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 import Layout from '@layouts/Default.astro';
 import { setCacheControl } from '@lib/cache-control';
 import { datocmsRequest } from '@lib/datocms';
@@ -27,6 +28,7 @@ if (!page) {
 ---
 
 <Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
+  <PreviewModeSubscription query={query} variables={{ locale }} />
   <PageHeader title={page.header.title} subtitle={page.header.subtitle}>
     <Fragment slot="header">
       <Button
@@ -42,7 +44,7 @@ if (!page) {
     </Fragment>
   </PageHeader>
   <Grid as="section" border>
-    <h2 class="a11y-sr-only">{ page.highlightedPublicationsTitle }</h2>
+    <h2 class="a11y-sr-only">{page.highlightedPublicationsTitle}</h2>
     {
       highlightedPublications.map((publication) => (
         <Column

src/pages/vacatures/index.astro

@@ -7,6 +7,7 @@ import type { VacanciesPageQuery } from '@lib/types/datocms';
 import PageHeader from '@blocks/PageHeader/PageHeader.astro';
 import VacancyList from '@blocks/VacancyList/VacancyList.astro';
 import { Button } from '@components/Button';
+import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 import query from './_index.query.graphql';
 
 setCacheControl(Astro.response, 0, 10);
@@ -24,6 +25,8 @@ if (!page) {
 ---
 
 <Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
+  <PreviewModeSubscription query={query} variables={{ locale }} />
+
   <PageHeader title={page.header.title} subtitle={page.header.subtitle}>
     <Fragment slot="header">
       <Button