From 0c06498c9472192cac350a59ed3ba569fb7c9670 Mon Sep 17 00:00:00 2001
From: Julian Jark <juliuxu@gmail.com>
Date: Thu, 22 Jun 2023 23:57:32 +0200
Subject: [PATCH] :sparkles: preview mode

---
 .../app/components/preview-mode.tsx           |  3 -
 .../app/is-preview-mode.server.ts             |  9 --
 apps/nye-julianjark.no/app/root.tsx           | 27 +++++-
 .../app/routes/$notionPage/route.tsx          |  7 +-
 .../app/routes/_index/route.tsx               |  4 +-
 .../app/routes/api.preview-mode.tsx           | 90 +++++++++++++++++++
 .../app/routes/i-dag-l\303\246rte-jeg.tsx"    |  4 +-
 .../app/routes/prosjekter.tsx                 |  4 +-
 8 files changed, 123 insertions(+), 25 deletions(-)
 delete mode 100644 apps/nye-julianjark.no/app/components/preview-mode.tsx
 delete mode 100644 apps/nye-julianjark.no/app/is-preview-mode.server.ts
 create mode 100644 apps/nye-julianjark.no/app/routes/api.preview-mode.tsx

diff --git a/apps/nye-julianjark.no/app/components/preview-mode.tsx b/apps/nye-julianjark.no/app/components/preview-mode.tsx
deleted file mode 100644
index 6049b92..0000000
--- a/apps/nye-julianjark.no/app/components/preview-mode.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function PreviewMode() {
-  return null;
-}
diff --git a/apps/nye-julianjark.no/app/is-preview-mode.server.ts b/apps/nye-julianjark.no/app/is-preview-mode.server.ts
deleted file mode 100644
index 3f7c99e..0000000
--- a/apps/nye-julianjark.no/app/is-preview-mode.server.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { config } from "~/config.server";
-
-export function isPreviewMode(fromRequest: Request) {
-  return (
-    config.nodeEnv === "development" ||
-    new URL(fromRequest.url).searchParams.get("preview") ===
-      config.previewSecret
-  );
-}
diff --git a/apps/nye-julianjark.no/app/root.tsx b/apps/nye-julianjark.no/app/root.tsx
index 2d08550..9d25fc6 100644
--- a/apps/nye-julianjark.no/app/root.tsx
+++ b/apps/nye-julianjark.no/app/root.tsx
@@ -1,5 +1,6 @@
 import { cssBundleHref } from "@remix-run/css-bundle";
-import { type LinksFunction } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
+import { json, type LinksFunction } from "@remix-run/node";
 import {
   Link,
   Links,
@@ -19,7 +20,12 @@ import backSvg from "~/assets/back.svg";
 import julianFace from "~/assets/julian-face.svg";
 import { ClearCacheButton } from "./routes/api.clear-cache";
 import { classes } from "~/routes/$notionPage/notion-driven-page";
-import { classNames } from "./misc";
+import { classNames } from "~/misc";
+import {
+  getPreviewMode,
+  PreviewMode,
+  serializePreviewModeToCookie,
+} from "~/routes/api.preview-mode";
 
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
@@ -38,6 +44,22 @@ export const links: LinksFunction = () => [
   },
 ];
 
+export const loader = async ({ request }: LoaderArgs) => {
+  const previewMode = await getPreviewMode(request);
+  const headers = previewMode
+    ? { "Set-Cookie": await serializePreviewModeToCookie(previewMode) }
+    : { "Set-Cookie": "" };
+
+  return json(
+    {
+      previewMode,
+    },
+    {
+      headers,
+    }
+  );
+};
+
 // TODO: This might belong in the tailwind config
 export const sharedClasses /*tw*/ = {
   container: "pl-[7.5vw] pr-[7.5vw]",
@@ -102,6 +124,7 @@ function Footer() {
        * Had this been a bigger site, with more people involved I could put the content in CMS/Notion instead
        * */}
       <footer className="flex flex-row gap-6">
+        <PreviewMode />
         <ClearCacheButton>
           <img src={julianFace} alt="Illustrajon av fjeset til Julian" />
         </ClearCacheButton>
diff --git a/apps/nye-julianjark.no/app/routes/$notionPage/route.tsx b/apps/nye-julianjark.no/app/routes/$notionPage/route.tsx
index e6f45b9..0848ad4 100644
--- a/apps/nye-julianjark.no/app/routes/$notionPage/route.tsx
+++ b/apps/nye-julianjark.no/app/routes/$notionPage/route.tsx
@@ -5,11 +5,8 @@ import { NotionPage } from "~/routes/$notionPage/notion-driven-page";
 import { getNotionDrivenPageWithBlocks } from "./client";
 import { config } from "~/config.server";
 import { getCustomBlocksData } from "./custom-blocks.server";
-import { useHydrated } from "~/components/use-hydrated";
-import { slugify } from "@julianjark/notion-utils";
-import { useMemo } from "react";
 import { TableOfConents } from "~/components/table-of-contents";
-import { isPreviewMode } from "~/is-preview-mode.server";
+import { isPreviewMode } from "~/routes/api.preview-mode";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -26,7 +23,7 @@ export const loader = async ({
 
   const page = await getNotionDrivenPageWithBlocks(
     notionPage,
-    isPreviewMode(request)
+    await isPreviewMode(request)
   );
   if (!page) throw new Response(null, { status: 404 });
 
diff --git a/apps/nye-julianjark.no/app/routes/_index/route.tsx b/apps/nye-julianjark.no/app/routes/_index/route.tsx
index 3d7704f..a74f3a8 100644
--- a/apps/nye-julianjark.no/app/routes/_index/route.tsx
+++ b/apps/nye-julianjark.no/app/routes/_index/route.tsx
@@ -6,7 +6,7 @@ import { getLatestTodayILearnedEntries } from "~/service/notion-today-i-learned/
 import { NotionPage } from "~/routes/$notionPage/notion-driven-page";
 import { getNotionDrivenLandingPage } from "../$notionPage/client";
 import { getFeaturedProject } from "~/service/notion-projects/client";
-import { isPreviewMode } from "~/is-preview-mode.server";
+import { isPreviewMode } from "~/routes/api.preview-mode";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -20,7 +20,7 @@ export const loader = async ({ request }: LoaderArgs) => {
     [
       getNotionDrivenLandingPage(),
       getFeaturedProject(),
-      getLatestTodayILearnedEntries(isPreviewMode(request)),
+      getLatestTodayILearnedEntries(await isPreviewMode(request)),
     ]
   );
 
diff --git a/apps/nye-julianjark.no/app/routes/api.preview-mode.tsx b/apps/nye-julianjark.no/app/routes/api.preview-mode.tsx
new file mode 100644
index 0000000..df588bd
--- /dev/null
+++ b/apps/nye-julianjark.no/app/routes/api.preview-mode.tsx
@@ -0,0 +1,90 @@
+import { ActionArgs, SerializeFrom, createCookie } from "@remix-run/node";
+import { useRouteLoaderData } from "@remix-run/react";
+import { z } from "zod";
+import { useShortcut } from "~/components/use-shortcut";
+import { config } from "~/config.server";
+import { loader } from "~/root";
+
+// Schema
+const preivewModeSchema = z.object({
+  enabled: z.boolean(),
+  secret: z.string(),
+});
+export type PreviewMode = z.infer<typeof preivewModeSchema>;
+
+// Cookie
+const cookie = createCookie("preview-mode");
+export async function serializePreviewModeToCookie(previewMode: PreviewMode) {
+  return await cookie.serialize(previewMode);
+}
+async function safeParsePreviewModeCookie(cookieHeader: string | null) {
+  const value = await cookie.parse(cookieHeader);
+  const parsed = preivewModeSchema.safeParse(value);
+  if (parsed.success) return parsed.data;
+  else return undefined;
+}
+
+// Getter
+export async function isPreviewMode(fromRequest: Request) {
+  return (await getPreviewMode(fromRequest))?.enabled ?? false;
+}
+export async function getPreviewMode(
+  fromRequest: Request
+): Promise<PreviewMode | undefined> {
+  // First. always use the url
+  const previewSecretFromUrl = new URL(fromRequest.url).searchParams.get(
+    "preview"
+  );
+  const previewModeEnabledFromUrl =
+    previewSecretFromUrl === config.previewSecret;
+  if (previewModeEnabledFromUrl) {
+    return {
+      enabled: true,
+      secret: previewSecretFromUrl,
+    };
+  }
+
+  // Second. use the cookie, if the secret is correct of course
+  const previewMode = await safeParsePreviewModeCookie(
+    fromRequest.headers.get("cookie")
+  );
+  if (previewMode?.secret === config.previewSecret) {
+    return previewMode;
+  }
+
+  return undefined;
+}
+
+export const action = async ({ request }: ActionArgs) => {
+  const body = preivewModeSchema.parse(await request.json());
+  if (body.secret !== config.previewSecret) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const headers = { "Set-Cookie": await serializePreviewModeToCookie(body) };
+  return new Response("OK", { status: 200, headers });
+};
+
+export function PreviewMode() {
+  const { previewMode } = useRouteLoaderData("root") as SerializeFrom<
+    typeof loader
+  >;
+  async function togglePreviewMode() {
+    const secret =
+      previewMode?.secret ?? window.prompt("Fyll inn preview secret") ?? "";
+    const previewModeToSend: PreviewMode = {
+      enabled: !previewMode?.enabled,
+      secret,
+    };
+    const response = await fetch(`/api/preview-mode`, {
+      method: "POST",
+      body: JSON.stringify(previewModeToSend),
+      headers: { "Content-Type": "application/json" },
+    });
+    if (response.ok) {
+      window.location.reload();
+    }
+  }
+  useShortcut("pp", togglePreviewMode);
+  return null;
+}
diff --git "a/apps/nye-julianjark.no/app/routes/i-dag-l\303\246rte-jeg.tsx" "b/apps/nye-julianjark.no/app/routes/i-dag-l\303\246rte-jeg.tsx"
index c932392..c91bc32 100644
--- "a/apps/nye-julianjark.no/app/routes/i-dag-l\303\246rte-jeg.tsx"
+++ "b/apps/nye-julianjark.no/app/routes/i-dag-l\303\246rte-jeg.tsx"
@@ -20,7 +20,7 @@ import type { TodayILearnedEntry } from "~/service/notion-today-i-learned/schema
 import { slugify } from "@julianjark/notion-utils";
 import { getTextFromRichText } from "@julianjark/notion-utils";
 import { classNames } from "~/misc";
-import { isPreviewMode } from "~/is-preview-mode.server";
+import { isPreviewMode } from "~/routes/api.preview-mode";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -34,7 +34,7 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
 
 export const loader = async ({ request }: LoaderArgs) => {
   const { metainfo, entries } = await getAllTodayILearnedEntriesAndMetainfo(
-    isPreviewMode(request)
+    await isPreviewMode(request)
   );
   return json(
     { metainfo, entries },
diff --git a/apps/nye-julianjark.no/app/routes/prosjekter.tsx b/apps/nye-julianjark.no/app/routes/prosjekter.tsx
index 6b0d2bc..6e5bdb5 100644
--- a/apps/nye-julianjark.no/app/routes/prosjekter.tsx
+++ b/apps/nye-julianjark.no/app/routes/prosjekter.tsx
@@ -14,7 +14,7 @@ import { Image } from "@unpic/react";
 import { classNames } from "~/misc";
 import { getTextFromRichText } from "@julianjark/notion-utils";
 import githubIcon from "~/assets/github-mark.svg";
-import { isPreviewMode } from "~/is-preview-mode.server";
+import { isPreviewMode } from "~/routes/api.preview-mode";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -28,7 +28,7 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
 
 export const loader = async ({ request }: LoaderArgs) => {
   const { metainfo, projects } = await getAllProjectsAndMetainfo(
-    isPreviewMode(request)
+    await isPreviewMode(request)
   );
   return json(
     { metainfo, projects },