✨ preview mode

apps/nye-julianjark.no/app/clients.server.ts

@@ -26,19 +26,19 @@ export async function warmUpCache() {
     notionClient.getBlocksWithChildren(config.landingPageId),
   ]);
   await getFeaturedProject();
-  await getLatestTodayILearnedEntries();
+  await getLatestTodayILearnedEntries(false);
   console.log("◈ warmed up cache for landing page");
 
   // The notion driven pages
-  const notionDrivenPages = await getNotionDrivenPages();
+  const notionDrivenPages = await getNotionDrivenPages(false);
   for (const page of notionDrivenPages) {
     await notionClient.getBlocksWithChildren(page.id);
   }
   console.log("◈ warmed up cache for notion driven pages");
 
   // The project pages
-  await getAllTodayILearnedEntriesAndMetainfo();
-  await getAllProjectsAndMetainfo();
+  await getAllTodayILearnedEntriesAndMetainfo(false);
+  await getAllProjectsAndMetainfo(false);
   console.log("◈ warmed up cache for project pages");
 
   // Hit the most important pages to rebuild the cdn/nginx cache

apps/nye-julianjark.no/app/config.server.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 
 // ENV
 const envVariables = z.object({
+  NODE_ENV: z.enum(["development", "production"]).default("production"),
   NOTION_TOKEN: z.string().nonempty(),
   PREVIEW_SECRET: z.string().nonempty(),
 });
@@ -17,6 +18,7 @@ declare global {
 const WEEK_IN_SECONDS = 60 * 60 * 24 * 7;
 const YEAR_IN_SECONDS = 60 * 60 * 24 * 365;
 export const config = {
+  nodeEnv: process.env.NODE_ENV ?? "production",
   notionToken: process.env.NOTION_TOKEN ?? "",
   previewSecret: process.env.PREVIEW_SECRET ?? "",
 

apps/nye-julianjark.no/app/is-preview-mode.server.ts

@@ -0,0 +1,9 @@
+import { config } from "~/config.server";
+
+export function isPreviewMode(fromRequest: Request) {
+  return (
+    config.nodeEnv === "development" ||
+    new URL(fromRequest.url).searchParams.get("preview") ===
+      config.previewSecret
+  );
+}

apps/nye-julianjark.no/app/misc.ts

@@ -19,17 +19,6 @@ export function chunked<T>(l: T[], chunkSize: number) {
   return result;
 }
 
-export function filterPublishedPredicate({
-  published,
-}: {
-  published: "PUBLISHED" | "UNPUBLISHED" | "DRAFT";
-}) {
-  if (process.env.NODE_ENV === "development") {
-    return ["PUBLISHED", "DRAFT"].includes(published);
-  }
-  return published === "PUBLISHED";
-}
-
 type ClassName =
   | false
   | undefined

apps/nye-julianjark.no/app/routes/$notionPage/client.ts

@@ -1,23 +1,26 @@
 import { config } from "~/config.server";
-import { filterPublishedPredicate } from "~/misc";
 import { getBodyFromHead, getPage, getPages } from "./schema-and-mapper";
 import { notionClient } from "~/clients.server";
+import { filterPublishedPredicate } from "@julianjark/notion-cms";
 
 export async function getNotionDrivenLandingPage() {
   const page = await getPage(notionClient)(config.landingPageId);
   return await getBodyFromHead(notionClient)(page);
 }
 
-export async function getNotionDrivenPages() {
+export async function getNotionDrivenPages(isPreview: boolean) {
   const pages = await getPages(notionClient)(
     config.notionDrivenPagesDatabaseId,
     {}
   );
-  return pages.success.filter(filterPublishedPredicate);
+  return pages.success.filter(filterPublishedPredicate(isPreview));
 }
 
-export async function getNotionDrivenPageWithBlocks(fromSlug: string) {
-  const pages = await getNotionDrivenPages();
+export async function getNotionDrivenPageWithBlocks(
+  fromSlug: string,
+  isPreview: boolean
+) {
+  const pages = await getNotionDrivenPages(isPreview);
   const page = pages.find(
     (page) => page.slug.toLowerCase() === fromSlug.toLowerCase()
   );

apps/nye-julianjark.no/app/routes/$notionPage/demoted-headings.tsx

@@ -7,6 +7,7 @@ export const demotedHeadings: Partial<Components> = {
     <H1
       {...props}
       as="h2"
+      // @ts-ignore
       id={
         props.block.type === "heading_1"
           ? slugify(getTextFromRichText(props.block.heading_1.rich_text))
@@ -18,6 +19,7 @@ export const demotedHeadings: Partial<Components> = {
     <H2
       {...props}
       as="h3"
+      // @ts-ignore
       id={
         props.block.type === "heading_2"
           ? slugify(getTextFromRichText(props.block.heading_2.rich_text))
@@ -29,6 +31,7 @@ export const demotedHeadings: Partial<Components> = {
     <H3
       {...props}
       as="h4"
+      // @ts-ignore
       id={
         props.block.type === "heading_3"
           ? slugify(getTextFromRichText(props.block.heading_3.rich_text))

apps/nye-julianjark.no/app/routes/$notionPage/route.tsx

@@ -9,6 +9,7 @@ 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";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -17,10 +18,16 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   ];
 };
 
-export const loader = async ({ params: { notionPage } }: LoaderArgs) => {
+export const loader = async ({
+  params: { notionPage },
+  request,
+}: LoaderArgs) => {
   if (!notionPage) throw new Response("param not given", { status: 500 });
 
-  const page = await getNotionDrivenPageWithBlocks(notionPage);
+  const page = await getNotionDrivenPageWithBlocks(
+    notionPage,
+    isPreviewMode(request)
+  );
   if (!page) throw new Response(null, { status: 404 });
 
   const customBlocksData = await getCustomBlocksData(page.blocks);

apps/nye-julianjark.no/app/routes/_index/route.tsx

@@ -1,11 +1,12 @@
-import type { HeadersFunction } from "@remix-run/node";
+import type { HeadersFunction, LoaderArgs } from "@remix-run/node";
 import { json, type V2_MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { config } from "~/config.server";
 import { getLatestTodayILearnedEntries } from "~/service/notion-today-i-learned/client";
 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";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -14,12 +15,12 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   ];
 };
 
-export const loader = async () => {
+export const loader = async ({ request }: LoaderArgs) => {
   const [page, featuredProject, latestTodayILearnedEntries] = await Promise.all(
     [
       getNotionDrivenLandingPage(),
       getFeaturedProject(),
-      getLatestTodayILearnedEntries(),
+      getLatestTodayILearnedEntries(isPreviewMode(request)),
     ]
   );
 

apps/nye-julianjark.no/app/routes/i-dag-lærte-jeg.tsx

@@ -1,6 +1,10 @@
 import type { Classes } from "@julianjark/notion-render";
 import { NotionRender } from "@julianjark/notion-render";
-import type { HeadersFunction, V2_MetaFunction } from "@remix-run/node";
+import type {
+  HeadersFunction,
+  LoaderArgs,
+  V2_MetaFunction,
+} from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { config } from "~/config.server";
@@ -16,6 +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";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -26,8 +31,11 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
     },
   ];
 };
-export const loader = async () => {
-  const { metainfo, entries } = await getAllTodayILearnedEntriesAndMetainfo();
+
+export const loader = async ({ request }: LoaderArgs) => {
+  const { metainfo, entries } = await getAllTodayILearnedEntriesAndMetainfo(
+    isPreviewMode(request)
+  );
   return json(
     { metainfo, entries },
     { headers: config.loaderCacheControlHeaders }

apps/nye-julianjark.no/app/routes/prosjekter.tsx

@@ -1,4 +1,8 @@
-import type { HeadersFunction, V2_MetaFunction } from "@remix-run/node";
+import type {
+  HeadersFunction,
+  LoaderArgs,
+  V2_MetaFunction,
+} from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { config } from "~/config.server";
@@ -10,6 +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";
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -21,8 +26,10 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   ];
 };
 
-export const loader = async () => {
-  const { metainfo, projects } = await getAllProjectsAndMetainfo();
+export const loader = async ({ request }: LoaderArgs) => {
+  const { metainfo, projects } = await getAllProjectsAndMetainfo(
+    isPreviewMode(request)
+  );
   return json(
     { metainfo, projects },
     { headers: config.loaderCacheControlHeaders }

apps/nye-julianjark.no/app/service/notion-projects/client.ts

@@ -3,7 +3,7 @@ import { config } from "~/config.server";
 import { getMetainfo, getPage, getPages } from "./schema-and-mapper";
 import { filterPublishedPredicate } from "@julianjark/notion-cms";
 
-async function getAllProjects() {
+async function getAllProjects(isPreview: boolean) {
   const pages = await getPages(notionClient)(config.projectsDatabaseId, {
     sorts: [
       {
@@ -19,13 +19,13 @@ async function getAllProjects() {
     },
   });
 
-  return pages.success.filter(filterPublishedPredicate);
+  return pages.success.filter(filterPublishedPredicate(isPreview));
 }
 
-export async function getAllProjectsAndMetainfo() {
+export async function getAllProjectsAndMetainfo(isPreview: boolean) {
   const [metainfo, projects] = await Promise.all([
     getMetainfo(notionClient)(config.projectsDatabaseId),
-    getAllProjects(),
+    getAllProjects(isPreview),
   ]);
   return { metainfo, projects };
 }

apps/nye-julianjark.no/app/service/notion-today-i-learned/client.ts

@@ -1,34 +1,36 @@
 import { config } from "~/config.server";
 
-import { filterPublishedPredicate } from "~/misc";
 import {
   getHeadAndBodyListFromHeads,
   getMetainfo,
   getPages,
 } from "./schema-and-mapper";
 import { notionClient } from "~/clients.server";
+import { filterPublishedPredicate } from "@julianjark/notion-cms";
 
-export async function getTodayILearnedEntryHeads() {
+export async function getTodayILearnedEntryHeads(isPreview: boolean) {
   const entryHeads = await getPages(notionClient)(
     config.todayILearnedDatabaseId,
     {
       sorts: [{ timestamp: "created_time", direction: "descending" }],
     }
   );
-  return entryHeads.success.filter(filterPublishedPredicate);
+  return entryHeads.success.filter(filterPublishedPredicate(isPreview));
 }
 
-export async function getLatestTodayILearnedEntries() {
-  const entryHeads = await getTodayILearnedEntryHeads();
+export async function getLatestTodayILearnedEntries(isPreview: boolean) {
+  const entryHeads = await getTodayILearnedEntryHeads(isPreview);
   return (
     await getHeadAndBodyListFromHeads(notionClient)(entryHeads.slice(0, 3))
   ).success;
 }
 
-export async function getAllTodayILearnedEntriesAndMetainfo() {
+export async function getAllTodayILearnedEntriesAndMetainfo(
+  isPreview: boolean
+) {
   const [metainfo, entryHeads] = await Promise.all([
     getMetainfo(notionClient)(config.todayILearnedDatabaseId),
-    getTodayILearnedEntryHeads(),
+    getTodayILearnedEntryHeads(isPreview),
   ]);
   const entries = (await getHeadAndBodyListFromHeads(notionClient)(entryHeads))
     .success;

packages/notion-cms/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @julianjark/notion-cms
 
+## 0.11.0
+
+### Minor Changes
+
+- update filterPublishedPredicate
+
 ## 0.10.0
 
 ### Minor Changes

packages/notion-cms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@julianjark/notion-cms",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "CMS abstraction for Notion",
   "author": "Julian Jark",
   "license": "ISC",

packages/notion-cms/src/helpers.ts

@@ -50,13 +50,11 @@ export const publishedStateSchema = (
 ) => z.preprocess((val) => val || defaultValue, z.enum(publishedStateValues));
 export type PublishedState = z.infer<ReturnType<typeof publishedStateSchema>>;
 
-export function filterPublishedPredicate({
-  published,
-}: {
-  published: PublishedState;
-}) {
-  if (process.env.NODE_ENV === "development") {
-    return ["PUBLISHED", "DRAFT"].includes(published);
-  }
-  return published === "PUBLISHED";
-}
+export const filterPublishedPredicate =
+  (isPreviewMode: boolean) =>
+  ({ published }: { published: PublishedState }) => {
+    if (isPreviewMode) {
+      return ["PUBLISHED", "DRAFT"].includes(published);
+    }
+    return published === "PUBLISHED";
+  };