feat: add notion articles on home page

src/app/page.tsx

@@ -1,8 +1,16 @@
-import { getNotionPages } from "@/lib/notion/notion";
+import { getArticles } from "@/lib/notion/notion";
 import Link from "next/link";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 export default async function Home() {
-  const posts = await getNotionPages({ pageSize: 10 });
+  const articles = await getArticles({ pageSize: 10 });
 
   return (
     <div className="min-h-screen p-2 pb-20 gap-16 sm:p-10 font-[family-name:var(--font-geist-sans)]">
@@ -11,19 +19,24 @@ export default async function Home() {
           Франция | Гайд по иммиграции и интеграции
         </h1>
 
-        <div className="space-y-4">
-          {posts.map((post) => (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {articles.map((article) => (
             <Link
-              key={post.id}
-              href={`/posts/${post.properties.URL.url}`}
-              className="block p-6 border rounded hover:bg-gray-50"
+              key={article.id}
+              href={`/posts/${article.slug}`}
+              className="block hover:no-underline"
             >
-              <h2 className="text-xl font-semibold">
-                {post.properties.Page.title[0].plain_text}
-              </h2>
-              <p className="text-gray-600 mt-2">
-                {new Date(post.created_time).toLocaleDateString()}
-              </p>
+              <Card className="transition-border hover:shadow-md">
+                <CardHeader>
+                  <CardTitle>{article.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription>{article.description}</CardDescription>
+                </CardContent>
+                <CardFooter>
+                  {new Date(article.publishedAt).toLocaleDateString()}
+                </CardFooter>
+              </Card>
             </Link>
           ))}
         </div>

src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/lib/notion/mapper.ts

@@ -0,0 +1,11 @@
+import { NotionPage } from "./schemas";
+
+export function mapNotionPageToArticle(page: NotionPage): Article {
+  return {
+    id: page.id,
+    title: page.properties.Page.title[0]?.plain_text || "",
+    description: page.properties.Description.rich_text[0]?.plain_text || "",
+    slug: page.properties.URL.url,
+    publishedAt: new Date(page.properties["Publish date"]?.date?.start || ""),
+  };
+}

src/lib/notion/notion.ts

@@ -1,21 +1,22 @@
 import { Client } from "@notionhq/client";
 import { validateEnv } from "../env";
-import { NotionPages, pagesSchema } from "./schemas";
+import { pagesSchema } from "./schemas";
 import { withNotionErrorHandling } from "./errorHandlers";
+import { mapNotionPageToArticle } from "./mapper";
 
 const env = validateEnv();
 const notion = new Client({
   auth: env.NOTION_TOKEN,
 });
 
-export const getNotionPages = async ({
+export const getArticles = async ({
   pageSize,
   startCursor,
 }: {
   pageSize: number;
   startCursor?: string;
 }) => {
-  return withNotionErrorHandling<NotionPages>(async () => {
+  return withNotionErrorHandling<Article[]>(async () => {
     const response = await notion.databases.query({
       database_id: env.NOTION_DATABASE_ID,
       filter: {
@@ -33,7 +34,8 @@ export const getNotionPages = async ({
       page_size: pageSize,
       start_cursor: startCursor,
     });
-    console.log(JSON.stringify(response.results));
-    return pagesSchema.parse(response.results);
+    const parsedNotionPages = pagesSchema.parse(response.results);
+
+    return parsedNotionPages.map(mapNotionPageToArticle);
   }, "Failed to fetch pages");
 };

src/lib/notion/schemas.ts

@@ -16,7 +16,7 @@ const multiSelectOptionSchema = z.object({
   color: z.string(),
 });
 
-const titleTextSchema = z.object({
+const textSchema = z.object({
   type: z.string(),
   text: z
     .object({
@@ -78,7 +78,12 @@ const pagePropertiesSchema = z.object({
   Page: z.object({
     id: z.literal("title"),
     type: z.literal("title"),
-    title: z.array(titleTextSchema),
+    title: z.array(textSchema),
+  }),
+  Description: z.object({
+    id: z.string(),
+    type: z.literal("rich_text"),
+    rich_text: z.array(textSchema),
   }),
   Owner: z.object({
     id: z.string(),

src/lib/notion/types.ts

@@ -0,0 +1,7 @@
+type Article = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  publishedAt: Date;
+};