Merge pull request #20 from khaykingleb/link-title

Link title

Author: khaykingleb

app/components/organisms/Carousel.tsx

@@ -4,6 +4,7 @@ interface CarouselItem {
   id: number;
   title: string;
   content: string;
+  slug: string;
   tags: string[];
   notionPageId: string;
 }
@@ -13,10 +14,9 @@ export const Carousel = ({ items }: { items: CarouselItem[] }) => {
     <div className="mb-2 mt-2 w-full max-w-2xl">
       {items.length > 0 ? (
         <div className="carousel carousel-vertical h-full w-full">
-          {items.map((item, index) => (
+          {items.map((item) => (
             <Link
               to={`/blog/${item.slug}`}
-              id={`item${index}`}
               key={item.id}
               className="carousel-item block w-full cursor-pointer transition-all duration-300 hover:bg-gray-100"
             >

app/routes/blog.$slug.tsx

@@ -1,5 +1,5 @@
 import { defer, LoaderFunction, LoaderFunctionArgs } from "@remix-run/node";
-import { Await, useLoaderData } from "@remix-run/react";
+import { Await, useLoaderData, useParams } from "@remix-run/react";
 import { NotionAPI } from "notion-client";
 import React, { lazy, Suspense } from "react";
 import { ClientOnly } from "remix-utils/client-only";
@@ -103,6 +103,8 @@ export const loader: LoaderFunction = async ({
 
 export default function NotionRoute() {
   const { recordMap } = useLoaderData<typeof loader>();
+  const { slug } = useParams();
+  const post = posts.find((p) => p.slug === slug);
 
   return (
     <div className="flex min-h-screen flex-col">
@@ -117,9 +119,12 @@ export default function NotionRoute() {
             }
           >
             <Await resolve={recordMap}>
-              {(resolvedRecordMap: ExtendedRecordMap) => (
-                <NotionPage recordMap={resolvedRecordMap} />
-              )}
+              {(resolvedRecordMap: ExtendedRecordMap) => {
+                if (post) {
+                  document.title = post.title;
+                }
+                return <NotionPage recordMap={resolvedRecordMap} />;
+              }}
             </Await>
           </Suspense>
         </div>