From b75b186955109d7fcba6867ad35a4726b0446ed2 Mon Sep 17 00:00:00 2001
From: Nooc <nooc@nooc.me>
Date: Sat, 19 Oct 2024 14:50:35 +0800
Subject: [PATCH] Display latest posts in home page

---
 app/[lang]/page.tsx       | 60 ++++++++++++++++++++++++++++++---------
 app/[lang]/works/page.tsx |  2 +-
 dictionaries/en.ts        | 13 +++++----
 dictionaries/zh.ts        | 13 +++++----
 4 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
index 707d33f..5474eab 100644
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -4,6 +4,10 @@ import ProfileCard from "../../components/profile-card";
 import Image from "next/image";
 import { twMerge } from "tailwind-merge";
 import { getDictionary } from "@/dictionaries";
+import { posts } from "@/.velite";
+import Link from "next/link";
+import { CalendarDaysIcon } from "@heroicons/react/24/solid";
+import { displayDate } from "@/lib/date";
 
 export const runtime = "edge";
 
@@ -49,6 +53,13 @@ function Label({
   );
 }
 
+function getLatestPosts(lang: string) {
+  return posts
+    .sort((p1, p2) => new Date(p2.date).getTime() - new Date(p1.date).getTime())
+    .filter((post) => !post.draft && post.lang === lang)
+    .slice(0, 2);
+}
+
 export default async function Home({
   params,
 }: {
@@ -57,6 +68,7 @@ export default async function Home({
   };
 }) {
   const dictionary = await getDictionary(params.lang);
+  const latestPosts = getLatestPosts(params.lang);
 
   return (
     <main className="mx-auto flex w-full max-w-screen-lg flex-col gap-4 px-4 py-8">
@@ -77,29 +89,49 @@ export default async function Home({
                 <Card
                   key={work.name}
                   className={twMerge(
-                    "relative flex aspect-square flex-col gap-2 sm:gap-4",
+                    "relative flex aspect-square flex-col",
                     `bg-${work.color}-300/10 dark:bg-${work.color}-400/10`,
                   )}
                   link={work.link}
                 >
-                  <div className="flex items-center gap-2 sm:gap-4">
-                    <Image
-                      className="h-10 w-10 sm:h-16 sm:w-16 rounded-2xl"
-                      src={work.image!}
-                      alt={dictionary.labels.icon(work.name)}
-                    />
-                    <div className="flex flex-col">
-                      <Title className="text-md">{work.name}</Title>
-                      <div className="opacity-50 text-xs sm:text-sm">
-                        {new URL(work.link).host}
-                      </div>
-                    </div>
+                  <Title className="text-md">{work.name}</Title>
+                  <div className="opacity-50 text-xs sm:text-sm">
+                    {new URL(work.link).host}
                   </div>
-                  <Subtitle className="">{work.summary}</Subtitle>
+                  <Subtitle className="mb-2">{work.summary}</Subtitle>
+                  <Image
+                    className="h-10 w-10 sm:h-16 sm:w-16 rounded-2xl border mt-auto"
+                    src={work.image!}
+                    alt={dictionary.labels.icon(work.name)}
+                  />
                 </Card>
               ))}
           </div>
         </div>
+
+        <div className="sm:col-span-2">
+          <Label className="m-4 sm:mt-0">{dictionary.labels.latestPosts}</Label>
+          <ul className="flex flex-col gap-4">
+            {latestPosts.map((post) => (
+              <li
+                key={post.slug}
+                className="rounded-3xl p-4 sm:px-8 border bg-white/50 dark:bg-indigo-100/5 flex flex-col gap-2"
+              >
+                <Link className="underline" href={post.permalink}>
+                  <h1 className="text-xl font-serif">{post.title}</h1>
+                </Link>
+                <p className="opacity-70">{post.description}</p>
+                <div className="opacity-50 flex items-center gap-4">
+                  <div className="flex items-center gap-1">
+                    <CalendarDaysIcon className="w-4 h-4" />
+                    {displayDate(post.date, params.lang)}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
         <div className="sm:col-span-2">
           <Label className="m-4 sm:mt-0">{dictionary.labels.contactMe}</Label>
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-8">
diff --git a/app/[lang]/works/page.tsx b/app/[lang]/works/page.tsx
index c5d3c9b..74bd255 100644
--- a/app/[lang]/works/page.tsx
+++ b/app/[lang]/works/page.tsx
@@ -52,7 +52,7 @@ export default async function WorksPage({
           >
             {work.image ? (
               <Image
-                className="h-14 w-14 rounded-xl"
+                className="h-14 w-14 rounded-xl border aspect-square"
                 src={work.image}
                 alt={dictionary.labels.icon(work.name)}
               />
diff --git a/dictionaries/en.ts b/dictionaries/en.ts
index 8cbfe34..e1146b7 100644
--- a/dictionaries/en.ts
+++ b/dictionaries/en.ts
@@ -13,8 +13,8 @@ import AssisChat from "../public/static/assischat.webp";
 import lofyee from "../public/static/lofyee.webp";
 import subnooc from "../public/static/subnooc.webp";
 import youminco from "../public/static/youminco.webp";
-import SparkMemosLogo from '../public/static/sparkmemos.webp';
-import CassetteOneLogo from '../public/static/cassette-one.webp';
+import SparkMemosLogo from "../public/static/sparkmemos.webp";
+import CassetteOneLogo from "../public/static/cassette-one.webp";
 
 const dictionary = {
   meta: {
@@ -71,6 +71,7 @@ A fan of Serverless.
     home: "Home",
     works: "Works",
     posts: "Blog",
+    latestPosts: "Latest Posts",
     noocWorks: "Nooc's Works",
     doing: "Doing",
     playing: "Playing",
@@ -217,16 +218,18 @@ A fan of Serverless.
       icon: EnvelopeIcon,
     },
   ],
-  postAdvertisements:[
+  postAdvertisements: [
     {
       title: "Support me",
-      description: "Spark Memos is a concise note-taking app for capturing ideas, inspirations, or for later reading and book notes.",
+      description:
+        "Spark Memos is a concise note-taking app for capturing ideas, inspirations, or for later reading and book notes.",
       icon: SparkMemosLogo,
       link: "https://sparkmemos.com",
     },
     {
       title: "Support me",
-      description: "CassetteOne is a retro design cassette white noise and music player for iOS.",
+      description:
+        "CassetteOne is a retro design cassette white noise and music player for iOS.",
       icon: CassetteOneLogo,
       link: "https://cassette.one",
     },
diff --git a/dictionaries/zh.ts b/dictionaries/zh.ts
index 5424c8e..5b1ee46 100644
--- a/dictionaries/zh.ts
+++ b/dictionaries/zh.ts
@@ -13,8 +13,8 @@ import AssisChat from "../public/static/assischat.webp";
 import lofyee from "../public/static/lofyee.webp";
 import subnooc from "../public/static/subnooc.webp";
 import youminco from "../public/static/youminco.webp";
-import SparkMemosLogo from '../public/static/sparkmemos.webp';
-import CassetteOneLogo from '../public/static/cassette-one.webp';
+import SparkMemosLogo from "../public/static/sparkmemos.webp";
+import CassetteOneLogo from "../public/static/cassette-one.webp";
 
 const dictionary = {
   meta: {
@@ -70,6 +70,7 @@ Serverless 爱好者。
     home: "主页",
     works: "作品",
     posts: "博客",
+    latestPosts: "最新博客",
     noocWorks: "Nooc的作品",
     doing: "在做什么",
     playing: "在玩什么",
@@ -215,16 +216,18 @@ Serverless 爱好者。
   postAdvertisements: [
     {
       title: "支持我",
-      description: "「星火记」是一个简洁的短笔记应用，可以用来记录灵感、想法，或者是用于稍后阅读、读书笔记等。",
+      description:
+        "「星火记」是一个简洁的短笔记应用，可以用来记录灵感、想法，或者是用于稍后阅读、读书笔记等。",
       icon: SparkMemosLogo,
       link: "https://sparkmemos.com",
     },
     {
       title: "支持我",
-      description: "「CassetteOne」是一个模拟磁带机设计的复古风格白噪音和音乐播放器。",
+      description:
+        "「CassetteOne」是一个模拟磁带机设计的复古风格白噪音和音乐播放器。",
       icon: CassetteOneLogo,
       link: "https://cassette.one",
-    }
+    },
   ],
 };