refactor: 🔨

app/components/organisms/Carousel.tsx

@@ -1,15 +1,8 @@
 import { Link } from "@remix-run/react";
 
-interface CarouselItem {
-  id: number;
-  title: string;
-  content: string;
-  slug: string;
-  tags: string[];
-  notionPageId: string;
-}
+import { Post } from "~/data/posts";
 
-export const Carousel = ({ items }: { items: CarouselItem[] }) => {
+export const Carousel = ({ items }: { items: Post[] }) => {
   return (
     <div className="mb-2 mt-2 w-full max-w-2xl">
       {items.length > 0 ? (
@@ -25,7 +18,7 @@ export const Carousel = ({ items }: { items: CarouselItem[] }) => {
                   {item.title}
                 </h2>
                 <p className="font-eb-garamond-light mb-2 text-sm">
-                  {item.content}
+                  Created at {item.publishDate.replace(/-/g, "/")}
                 </p>
                 <div className="font-eb-garamond-light">
                   {item.tags.map((tag) => (

app/data/posts.tsx

@@ -2,20 +2,21 @@ export interface Post {
   id: number;
   imageUrl?: string;
   title: string;
-  content: string;
   tags: string[];
   notionPageId: string;
   slug: string;
+  publishDate: string;
+  updatedDate?: string;
 }
 
 export const posts: Post[] = [
   {
     id: 1,
     imageUrl: "/img/posts/introduction-to-digital-signal-processing.webp",
     title: "Introduction to Digital Signal Processing",
-    content: "Created: 2024/09/22",
     tags: ["notes", "speech", "dsp"],
     notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
     slug: "introduction-to-digital-signal-processing",
+    publishDate: "2024-09-22",
   },
 ];

app/routes/_index.tsx

@@ -7,9 +7,9 @@ import { Header } from "~/components/organisms/Header";
 export const meta: MetaFunction = () => {
   return [
     { title: "About | Gleb Khaykin" },
+    { author: "Gleb Khaykin" },
     { property: "og:title", content: "About | Gleb Khaykin" },
     { property: "og:description", content: "Gleb Khaykin's personal website" },
-    { property: "og:author", content: "Gleb Khaykin" },
     { property: "og:type", content: "website" },
     { property: "og:url", content: "https://khaykingleb.com" },
     {

app/routes/blog.$slug.tsx

@@ -109,18 +109,23 @@ export const loader: LoaderFunction = async ({
 
 export const meta: MetaFunction = ({ data }: { data: { post: Post } }) => {
   const { post } = data;
+  const description = `Created at ${post.publishDate.replace(/-/g, "/")}`;
 
   return [
     { title: post.title },
-    { name: "og:title", content: post.title },
-    { name: "og:description", content: post.content },
-    { name: "og:author", content: "Gleb Khaykin" },
-    { name: "og:type", content: "article" },
-    { name: "og:url", content: `https://khaykingleb.com/blog/${post.slug}` },
+    { author: "Gleb Khaykin" },
     {
-      name: "og:image",
+      property: "og:image",
       content: post.imageUrl || "/img/van_gogh_wheatfield_with_cypresses.jpg",
     },
+    { property: "og:title", content: post.title },
+    { property: "og:description", content: description },
+    { property: "og:type", content: "article" },
+    {
+      property: "og:url",
+      content: `https://khaykingleb.com/blog/${post.slug}`,
+    },
+    { property: "og:publish_date", content: post.publishDate },
   ];
 };
 

app/routes/blog._index.tsx

@@ -11,9 +11,9 @@ import { posts } from "~/data/posts";
 export const meta: MetaFunction = () => {
   return [
     { title: "Posts | Gleb Khaykin" },
+    { author: "Gleb Khaykin" },
     { property: "og:title", content: "Posts | Gleb Khaykin" },
     { property: "og:description", content: "Gleb Khaykin's personal website" },
-    { property: "og:author", content: "Gleb Khaykin" },
     { property: "og:type", content: "website" },
     { property: "og:url", content: "https://khaykingleb.com/blog" },
     {