chore(blog): reorder the default navigation items, introduce a 'Lates…

…t' component to display the most recent blog posts, 'New' flag to indicate recent posts (#545)

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;

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))

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>
+  )
+}

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>
+}

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;

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}
     />
   );
 }

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;