Fix Blog (#724)

api/_lib/_dates.ts

@@ -1,7 +1,7 @@
 import { format, parse, parseISO } from "date-fns";
 
-export function niceDate(d: string) {
-  return format(parse(d, "yyyy-MM-dd", new Date()), "LLLL d, yyyy");
+export function niceDate(d: Date) {
+  return format(d, "LLLL d, yyyy");
 }
 
 export function dateString(d: string) {

api/blog/post.ts

@@ -28,7 +28,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
   if (!("properties" in post)) throw new Error("No properties");
   const { properties = {}, id } = post;
   const { date, ...props } = getNestedProperties(properties);
-  const publishDate = niceDate(date);
+  const publishDate = niceDate(new Date(date));
 
   const htmlContent = await getPostHtmlFromId(id);
 

api/blog/posts.ts

@@ -1,31 +1,59 @@
 import { VercelRequest, VercelResponse } from "@vercel/node";
-import { dateAsNumber, dateString, niceDate } from "../_lib/_dates";
-import { notion, getNestedProperties } from "../_lib/_notion";
+import { niceDate } from "../_lib/_dates";
+import { notion } from "../_lib/_notion";
+import { z } from "zod";
+import { BlogPost, NotionPost } from "shared";
 
 export default async function handler(req: VercelRequest, res: VercelResponse) {
   const response = await notion.databases.query({
     database_id: "b7a09b10aa83485b94092269239a8b38",
   });
-  const posts = response.results.map((page) => {
-    if (!("properties" in page)) throw new Error("No properties");
-    const { properties = {}, id } = page;
-    const { date, ...props } = getNestedProperties(properties);
-    if (!("title" in props)) throw new Error("No title");
-    if (!("status" in props)) throw new Error("No status");
-    if (!("slug" in props)) throw new Error("No slug");
-    if (!("description" in props)) throw new Error("No description");
-
-    if (!date) throw new Error("No date");
-
-    const sanitizedDate = dateString(date);
-    const publishDate = niceDate(date);
-    const rawDate = dateAsNumber(date);
-
-    return { id, rawDate, date: sanitizedDate, publishDate, ...props };
-  });
+
+  const notionPosts = response.results.filter(
+    isValidNotionPost
+  ) as unknown as NotionPost[];
+
+  const posts = notionPosts.map(notionPostToBlogPost);
 
   // Cache for 1 week, stale-while-revalidate
   res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");
 
   res.json(posts);
 }
+
+const postSchema: z.ZodType<NotionPost> = z.object({
+  id: z.string(),
+  created_time: z.string(),
+  properties: z.object({
+    title: z.object({
+      title: z.array(z.object({ plain_text: z.string() })).min(1),
+    }),
+    description: z.object({
+      rich_text: z.array(z.object({ plain_text: z.string() })).min(1),
+    }),
+    status: z.object({
+      status: z.object({ name: z.string() }),
+    }),
+    slug: z.object({
+      rich_text: z.array(z.object({ plain_text: z.string() })).min(1),
+    }),
+  }),
+});
+
+function isValidNotionPost(post: unknown): post is NotionPost {
+  const parsed = postSchema.safeParse(post);
+  if (parsed.success) return true;
+  return false;
+}
+
+function notionPostToBlogPost(post: NotionPost): BlogPost {
+  return {
+    id: post.id,
+    publishDate: new Date(post.created_time).getTime(),
+    niceDate: niceDate(new Date(post.created_time)),
+    description: post.properties.description.rich_text[0].plain_text,
+    slug: post.properties.slug.rich_text[0].plain_text,
+    status: post.properties.status.status.name,
+    title: post.properties.title.title[0].plain_text,
+  };
+}

app/src/pages/Blog.tsx

@@ -8,11 +8,13 @@ import { InfoHeader } from "../components/InfoHeader";
 import { Box } from "../slang";
 import { Page } from "../ui/Shared";
 import { SectionTitle } from "../ui/Typography";
+import type { BlogPost } from "shared";
 export default function Blog() {
   const posts = useQuery("posts", getAndPreparePosts, {
     staleTime: Infinity,
     suspense: true,
   });
+
   return (
     <>
       <Helmet>
@@ -41,7 +43,7 @@ export default function Blog() {
   );
 }
 
-function Post({ post }: { post: PostType }) {
+function Post({ post }: { post: BlogPost }) {
   return (
     <Link
       className={`grid gap-4 p-2 md:p-5 rounded transition-all
@@ -52,7 +54,7 @@ function Post({ post }: { post: PostType }) {
     >
       <header className="grid gap-2">
         <span className="text-xs text-neutral-500 dark:text-neutral-400">
-          {post.publishDate}
+          {post.niceDate}
         </span>
         <SectionTitle>{post.title}</SectionTitle>
       </header>
@@ -65,20 +67,8 @@ function Post({ post }: { post: PostType }) {
 
 async function getAndPreparePosts() {
   const response = await axios.get("/api/blog/posts");
-  const posts = (response.data as PostType[])
-    .sort((a, b) => b.rawDate - a.rawDate)
-    // only show posts with status "Done"
+  const posts = (response.data as BlogPost[])
+    .sort((a, b) => b.publishDate - a.publishDate)
     .filter((post) => post.status === "Done");
   return posts;
 }
-
-export type PostType = {
-  id: string;
-  rawDate: number;
-  date: string;
-  publishDate: string;
-  description: string;
-  status: string;
-  slug: string;
-  title: string;
-};

app/src/pages/post/Post.tsx

@@ -6,7 +6,7 @@ import { useParams } from "react-router-dom";
 
 import { Page } from "../../ui/Shared";
 import { PageTitle } from "../../ui/Typography";
-import { PostType } from "../Blog";
+
 import { Helmet } from "react-helmet";
 
 export default function Post() {
@@ -78,3 +78,14 @@ async function getPost(
   const post = response.data;
   return post;
 }
+
+export type PostType = {
+  id: string;
+  rawDate: number;
+  date: string;
+  publishDate: string;
+  description: string;
+  status: string;
+  slug: string;
+  title: string;
+};

shared/src/blog.ts

@@ -0,0 +1,38 @@
+export type NotionPost = {
+  id: string;
+  created_time: string;
+  properties: NotionPostProperties;
+};
+
+export type NotionPostProperties = {
+  title: {
+    title: {
+      plain_text: string;
+    }[];
+  };
+  description: {
+    rich_text: {
+      plain_text: string;
+    }[];
+  };
+  status: {
+    status: {
+      name: string;
+    };
+  };
+  slug: {
+    rich_text: {
+      plain_text: string;
+    }[];
+  };
+};
+
+export type BlogPost = {
+  id: string;
+  publishDate: number;
+  niceDate: string;
+  description: string;
+  slug: string;
+  status: string;
+  title: string;
+};

shared/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./ImportDataFormType";
 export * from "./templates";
+export * from "./blog";