From a406e0c418036f70a3eb2457aac505cfb064a1e6 Mon Sep 17 00:00:00 2001
From: Duyet Le <me@duyet.net>
Date: Fri, 1 Nov 2024 21:45:25 +0700
Subject: [PATCH] chore(blog): update ui, latest post, new flag

---
 .../_posts/2024/11/clickhouse-rust-udf.md     |   5 +-
 apps/blog/app/page.tsx                        |   4 +
 apps/blog/components/latest.tsx               |  60 +++++
 apps/blog/components/year-post.tsx            |  11 +-
 packages/components/Menu.tsx                  |   3 +-
 packages/components/Thumb.tsx                 |   3 +
 packages/interfaces/src/post.ts               |   7 +-
 packages/libs/getPost.ts                      | 221 +++++++++---------
 8 files changed, 198 insertions(+), 116 deletions(-)
 create mode 100644 apps/blog/components/latest.tsx

diff --git a/apps/blog/_posts/2024/11/clickhouse-rust-udf.md b/apps/blog/_posts/2024/11/clickhouse-rust-udf.md
index 0c5df4f7..3b99a597 100644
--- a/apps/blog/_posts/2024/11/clickhouse-rust-udf.md
+++ b/apps/blog/_posts/2024/11/clickhouse-rust-udf.md
@@ -29,7 +29,6 @@ SELECT customTransform(data) FROM raw_events;
   - [More examples](#more-examples)
 - [References](#references)
 
-
 For example, if you are using [dbt](https://www.getdbt.com), it can move and process data from tables to tables without data leaving the cluster.
 
 ![ClickHouse UDF dbt](/media/2024/11/udf/clickhouse-rust-udf-dbt.png)
@@ -260,7 +259,7 @@ SELECT extractUrl("from https://example.org") as extracted
 
 ```sql
 -- Extract from a table
-SELECT 
+SELECT
     id,
     extractUrl(content) as extracted_url
 FROM raw.events;
@@ -269,7 +268,7 @@ FROM raw.events;
 ```sql
 -- Extract and insert to another table
 INSERT INTO dwh.fact_click
-SELECT 
+SELECT
     id,
     extractUrl(content) as extracted_url
 FROM raw.events;
diff --git a/apps/blog/app/page.tsx b/apps/blog/app/page.tsx
index e3b67948..e26a521b 100644
--- a/apps/blog/app/page.tsx
+++ b/apps/blog/app/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import Container from '@duyet/components/Container'
 import Header from '@duyet/components/Header'
 import { getPostsByAllYear } from '@duyet/libs/getPost'
+import { Latest } from '../components/latest'
 import { YearPost } from '../components/year-post'
 
 export default async function Page() {
@@ -19,6 +20,8 @@ export default async function Page() {
     <>
       <Header longText="Data Engineering" />
       <Container>
+        <Latest className="mb-8" />
+
         <div className="text-lg">
           Lists all {postCount} posts of the past {pastYears} years of blogging.
           You can jump straight to the{' '}
@@ -31,6 +34,7 @@ export default async function Page() {
           </Link>
           .
         </div>
+
         <div className="flex flex-col gap-8">
           {Object.keys(postsByYear)
             .sort((a: string, b: string) => parseInt(b) - parseInt(a))
diff --git a/apps/blog/components/latest.tsx b/apps/blog/components/latest.tsx
new file mode 100644
index 00000000..b776fe42
--- /dev/null
+++ b/apps/blog/components/latest.tsx
@@ -0,0 +1,60 @@
+import Link from 'next/link'
+
+import { Thumb } from '@duyet/components/Thumb'
+import type { Post } from '@duyet/interfaces'
+import { getAllPosts } from '@duyet/libs/getPost'
+import { cn } from '@duyet/libs/utils'
+
+export interface LatestProps {
+  className?: string
+}
+
+async function getPosts(limit = 3) {
+  return getAllPosts(
+    [
+      'date',
+      'slug',
+      'title',
+      'excerpt',
+      'thumbnail',
+      'category',
+      'category_slug',
+    ],
+    limit,
+  )
+}
+
+export async function Latest({ className }: LatestProps) {
+  const posts = await getPosts()
+
+  if (!posts.length) {
+    return null
+  }
+
+  return (
+    <div className={cn('flex justify-stretch gap-4', className)}>
+      {posts.map((post: Post) => (
+        <Link
+          as={post.slug}
+          key={post.slug}
+          className="text-md basis-1/3 overflow-hidden truncate"
+          href="/[...slug]"
+        >
+          <article className="flex h-full flex-col items-center gap-2 overflow-hidden">
+            <span className="w-full truncate text-wrap font-bold text-muted-foreground">
+              {post.title}
+            </span>
+            {post.thumbnail ? (
+              <Thumb
+                url={post.thumbnail}
+                alt={post.title}
+                className="h-auto w-auto object-cover transition-all hover:scale-105"
+                unoptimized
+              />
+            ) : null}
+          </article>
+        </Link>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/blog/components/year-post.tsx b/apps/blog/components/year-post.tsx
index 677245c3..7bbafbbd 100644
--- a/apps/blog/components/year-post.tsx
+++ b/apps/blog/components/year-post.tsx
@@ -39,6 +39,7 @@ export function YearPost({ year, className }: YearPostProps) {
           >
             <Link as={post.slug} className="text-md truncate" href="/[...slug]">
               {post.title}
+              <IsNewPost date={post.date} />
             </Link>
             <hr className="shrink grow border-dotted border-slate-200 opacity-50" />
             <time className="flex-0 flex-nowrap overflow-hidden text-nowrap text-gray-400">
@@ -51,4 +52,12 @@ export function YearPost({ year, className }: YearPostProps) {
   )
 }
 
-export default YearPost
+function IsNewPost({ date }: { date: Date | undefined }) {
+  const today = new Date()
+
+  if (!date || dateFormat(date, 'yyyy-MM') !== dateFormat(today, 'yyyy-MM')) {
+    return null
+  }
+
+  return <span className="ml-2 text-sm text-red-500">New</span>
+}
diff --git a/packages/components/Menu.tsx b/packages/components/Menu.tsx
index 677cedfe..2b3d3eed 100644
--- a/packages/components/Menu.tsx
+++ b/packages/components/Menu.tsx
@@ -15,8 +15,9 @@ export type NavigationItem = {
 export const ABOUT = { name: "About", href: `${BLOG_URL}/about` };
 export const INSIGHTS = { name: "Insights", href: INSIGHTS_URL };
 export const ARCHIVES = { name: "Archives", href: `${BLOG_URL}/archives` };
+export const FEED = { name: "Feed", href: `${BLOG_URL}/feed` };
 export const BLOG = { name: "Blog", href: `${BLOG_URL}` };
-const defaultNavigation = [ABOUT, INSIGHTS, ARCHIVES];
+const defaultNavigation = [FEED, INSIGHTS, ABOUT];
 
 type Props = {
   className?: string;
diff --git a/packages/components/Thumb.tsx b/packages/components/Thumb.tsx
index e21282e1..eeddaaaf 100644
--- a/packages/components/Thumb.tsx
+++ b/packages/components/Thumb.tsx
@@ -12,12 +12,14 @@ export function Thumb({
   alt,
   width = 800,
   height = 300,
+  unoptimized,
   className,
 }: {
   url?: string;
   alt?: string;
   width?: number;
   height?: number;
+  unoptimized?: boolean;
   className?: string;
 }) {
   if (!url) return null;
@@ -34,6 +36,7 @@ export function Thumb({
       width={width}
       height={height}
       alt={alt || ""}
+      unoptimized={unoptimized}
     />
   );
 }
diff --git a/packages/interfaces/src/post.ts b/packages/interfaces/src/post.ts
index ace46a57..fb2f1739 100644
--- a/packages/interfaces/src/post.ts
+++ b/packages/interfaces/src/post.ts
@@ -1,14 +1,15 @@
 export type Post = {
   slug: string;
   title: string;
-  author?: string;
   date: Date;
-  content?: string;
-  excerpt?: string;
   category: string;
   category_slug: string;
   tags: string[];
   tags_slug: string[];
+  thumbnail?: string;
+  author?: string;
+  content?: string;
+  excerpt?: string;
   edit_url?: string;
   series?: string;
   [key: string]: any;
diff --git a/packages/libs/getPost.ts b/packages/libs/getPost.ts
index 628c6fca..8e30ca91 100644
--- a/packages/libs/getPost.ts
+++ b/packages/libs/getPost.ts
@@ -1,255 +1,260 @@
-import matter from "gray-matter";
+import matter from 'gray-matter'
 
-import getSlug from "./getSlug";
-import type { TagCount, Post, CategoryCount } from "@duyet/interfaces";
-import { normalizeTag } from "./tags";
+import getSlug from './getSlug'
+import type { TagCount, Post, CategoryCount } from '@duyet/interfaces'
+import { normalizeTag } from './tags'
 
-const nodeFs = () => require("fs");
-const nodeJoin = () => require("path").join;
-const getPostsDirectory = () => nodeJoin()(process.cwd(), "_posts");
+const nodeFs = () => require('fs')
+const nodeJoin = () => require('path').join
+const getPostsDirectory = () => nodeJoin()(process.cwd(), '_posts')
 
-const CACHED: { [key: string]: any } = {};
+const CACHED: { [key: string]: any } = {}
 
 /**
  * Get all slugs from the posts directory recursively
  */
 export function getPostPaths(dir?: string): string[] {
-  const fs = nodeFs();
-  const join = nodeJoin();
+  const fs = nodeFs()
+  const join = nodeJoin()
 
-  const _dir = dir || getPostsDirectory();
-  const slugs = fs.readdirSync(_dir);
+  const _dir = dir || getPostsDirectory()
+  const slugs = fs.readdirSync(_dir)
 
   return slugs.flatMap((file: string) => {
-    const child = join(_dir, file);
+    const child = join(_dir, file)
     // If the file is a directory, recursively get the slugs from that directory
     if (fs.statSync(child).isDirectory()) {
-      return getPostPaths(child);
+      return getPostPaths(child)
     }
 
-    if (!file.endsWith(".md")) {
-      return [];
+    if (!file.endsWith('.md')) {
+      return []
     }
 
-    return [join(_dir, file)];
-  });
+    return [join(_dir, file)]
+  })
 }
 
 export function getPostBySlug(slug: string, fields: string[] = []): Post {
-  const join = nodeJoin();
-  const fileName = slug.replace(/\.(md|htm|html)$/, "");
-  return getPostByPath(join(getPostsDirectory(), `${fileName}.md`), fields);
+  const join = nodeJoin()
+  const fileName = slug.replace(/\.(md|htm|html)$/, '')
+  return getPostByPath(join(getPostsDirectory(), `${fileName}.md`), fields)
 }
 
 export function getPostByPath(fullPath: string, fields: string[] = []): Post {
-  let fileContent;
+  let fileContent
 
   if (CACHED[fullPath]) {
-    fileContent = CACHED[fullPath];
+    fileContent = CACHED[fullPath]
   } else {
-    const fs = nodeFs();
-    fileContent = fs.readFileSync(fullPath, "utf8");
-    CACHED[fullPath] = fileContent;
+    const fs = nodeFs()
+    fileContent = fs.readFileSync(fullPath, 'utf8')
+    CACHED[fullPath] = fileContent
   }
 
-  const { data, content } = matter(fileContent);
+  const { data, content } = matter(fileContent)
 
   const post: Post = {
-    slug: "",
-    title: "",
+    slug: '',
+    title: '',
     date: new Date(),
-    content: "",
-    category: "Unknown",
-    category_slug: "unknown",
+    content: '',
+    category: 'Unknown',
+    category_slug: 'unknown',
     tags: [],
     tags_slug: [],
-  };
+  }
 
   // Ensure only the minimal needed data is exposed
   fields.forEach((field) => {
-    if (field === "slug") {
-      post[field] = data.slug || fullPath;
+    if (field === 'slug') {
+      post[field] = data.slug || fullPath
 
       // Validate slug format /yyyy/mm/slug(.html)
-      const slugRegex = /^\/(\d{4})\/(\d{2})\/(.+)$/;
-      const match = post[field].match(slugRegex);
+      const slugRegex = /^\/(\d{4})\/(\d{2})\/(.+)$/
+      const match = post[field].match(slugRegex)
       if (!match) {
         throw new Error(
-          `Invalid slug format: ${post[field]}. Please use the format /yyyy/mm/slug(.html)`,
-        );
+          `Invalid slug format: ${post[field]}. Please use the format /yyyy/mm/slug(.html)`
+        )
       }
     }
 
-    if (field === "title") {
-      post["title"] = data.title;
+    if (field === 'title') {
+      post['title'] = data.title
+    }
+
+    if (field === 'path') {
+      post['path'] = fullPath
     }
 
-    if (field === "path") {
-      post["path"] = fullPath;
+    if (field === 'date') {
+      post['date'] =
+        typeof post[field] === 'object' ? post[field] : new Date(post[field])
     }
 
-    if (field === "content") {
-      post["content"] = content;
+    if (field === 'content') {
+      post['content'] = content
     }
 
-    if (field === "category") {
+    if (field === 'category') {
       // Some posts have a category of "null" so we need to handle that
-      post["category"] = data.category || post[field];
+      post['category'] = data.category || post[field]
     }
 
-    if (field === "category_slug") {
-      post["category_slug"] = getSlug(data.category || post[field]);
+    if (field === 'category_slug') {
+      post['category_slug'] = getSlug(data.category || post[field])
     }
 
-    if (field === "tags") {
-      post["tags"] = (data.tags || []).map(normalizeTag);
-      post["tags_slug"] = post[field].map((tag: string) => getSlug(tag));
+    if (field === 'tags') {
+      post['tags'] = (data.tags || []).map(normalizeTag)
+      post['tags_slug'] = post[field].map((tag: string) => getSlug(tag))
     }
 
-    if (field === "excerpt") {
+    if (field === 'excerpt') {
       post[field] =
-        data.description || content.split(" ").slice(0, 20).join(" ") + "...";
+        data.description || content.split(' ').slice(0, 20).join(' ') + '...'
     }
 
-    if (typeof data[field] !== "undefined") {
-      post[field] = data[field];
+    if (typeof data[field] !== 'undefined') {
+      post[field] = data[field]
     }
-  });
+  })
 
-  return post;
+  return post
 }
 
 export function getAllPosts(fields: string[] = [], limit = 0): Post[] {
-  const paths = getPostPaths();
+  const paths = getPostPaths()
 
   const posts = paths
     .map((path) => getPostByPath(path, fields))
     // sort posts by date in descending order
-    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
 
   if (limit > 0) {
-    return posts.slice(0, limit);
+    return posts.slice(0, limit)
   }
 
-  return posts;
+  return posts
 }
 
 export function getAllCategories(): CategoryCount {
-  const paths = getPostPaths();
-  const posts = paths.map((path) => getPostByPath(path, ["category"]));
+  const paths = getPostPaths()
+  const posts = paths.map((path) => getPostByPath(path, ['category']))
 
   return posts
     .map((post) => post.category)
     .reduce(
       (acc, cat) => {
         if (acc[cat]) {
-          acc[cat]++;
+          acc[cat]++
         } else {
-          acc[cat] = 1;
+          acc[cat] = 1
         }
 
-        return acc;
+        return acc
       },
-      {} as Record<string, number>,
-    );
+      {} as Record<string, number>
+    )
 }
 
 export function getPostsByCategory(
   category: string,
-  fields: string[] = [],
+  fields: string[] = []
 ): Post[] {
-  const paths = getPostPaths();
+  const paths = getPostPaths()
 
-  const extraFields = [...fields, "category_slug"];
-  const posts = paths.map((path) => getPostByPath(path, extraFields));
+  const extraFields = [...fields, 'category_slug']
+  const posts = paths.map((path) => getPostByPath(path, extraFields))
 
   return posts
     .filter((post) => post.category_slug === category)
-    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
 }
 
 export function getAllTags(): TagCount {
-  const paths = getPostPaths();
-  const posts = paths.map((path) => getPostByPath(path, ["tags"]));
+  const paths = getPostPaths()
+  const posts = paths.map((path) => getPostByPath(path, ['tags']))
 
   return posts
     .flatMap((post) => post.tags || [])
     .reduce(
       (acc, tag) => {
         if (acc[tag]) {
-          acc[tag]++;
+          acc[tag]++
         } else {
-          acc[tag] = 1;
+          acc[tag] = 1
         }
 
-        return acc;
+        return acc
       },
-      {} as Record<string, number>,
-    );
+      {} as Record<string, number>
+    )
 }
 
 export function getPostsByTag(tag: string, fields: string[] = []): Post[] {
-  const paths = getPostPaths();
+  const paths = getPostPaths()
 
-  const extraFields = [...fields, "tags"];
-  const posts = paths.map((path) => getPostByPath(path, extraFields));
+  const extraFields = [...fields, 'tags']
+  const posts = paths.map((path) => getPostByPath(path, extraFields))
 
   return posts
     .filter((post) => post.tags.includes(tag) || post.tags_slug.includes(tag))
-    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
 }
 
 export function getPostsByAllYear(
   fields: string[] = [],
-  yearLimit: number = -1,
+  yearLimit: number = -1
 ): Record<number, Post[]> {
-  const extraFields = [...fields, "date"];
-  const allPosts = getAllPosts(extraFields);
+  const extraFields = [...fields, 'date']
+  const allPosts = getAllPosts(extraFields)
 
   // Post by year
   const postsByYear = allPosts.reduce(
     (acc, post) => {
-      const year = new Date(post.date).getFullYear();
+      const year = new Date(post.date).getFullYear()
 
       if (!acc[year]) {
-        acc[year] = [];
+        acc[year] = []
       }
 
-      acc[year].push(post);
+      acc[year].push(post)
 
-      return acc;
+      return acc
     },
-    {} as Record<number, Post[]>,
-  );
+    {} as Record<number, Post[]>
+  )
 
   // Sort posts by year
   Object.keys(postsByYear).forEach((year: string) => {
     postsByYear[parseInt(year)].sort((post1: Post, post2: Post) =>
-      post1.date > post2.date ? -1 : 1,
-    );
-  });
+      post1.date > post2.date ? -1 : 1
+    )
+  })
 
   // Limit the number of years
   if (yearLimit > 0) {
     const years = Object.keys(postsByYear).sort((year1, year2) =>
-      year1 > year2 ? -1 : 1,
-    );
-    const limitedYears = years.slice(0, yearLimit);
+      year1 > year2 ? -1 : 1
+    )
+    const limitedYears = years.slice(0, yearLimit)
     return limitedYears.reduce(
       (acc, year: string) => {
-        acc[parseInt(year)] = postsByYear[parseInt(year)];
-        return acc;
+        acc[parseInt(year)] = postsByYear[parseInt(year)]
+        return acc
       },
-      {} as Record<number, Post[]>,
-    );
+      {} as Record<number, Post[]>
+    )
   }
 
-  return postsByYear;
+  return postsByYear
 }
 
 export function getPostsByYear(year: number, fields: string[] = []) {
-  const extraFields = [...fields, "date"];
-  const postByYears = getPostsByAllYear(extraFields);
+  const extraFields = [...fields, 'date']
+  const postByYears = getPostsByAllYear(extraFields)
 
-  return postByYears[year] || [];
+  return postByYears[year] || []
 }