feat: updte new look

components/MyIntroduce.tsx

@@ -0,0 +1,16 @@
+function MyIntroduce() {
+  return (
+    <div class="flex flex-col py-4">
+      <div class="w-40 h-40 bg-neutral-content flex justify-center items-center rounded-xl shadow-sm">
+        <img class="w-24 h-24" alt="dino" src="/my-dino.png" />
+      </div>
+      <p class="text-3xl font-medium mt-4 font-grenze">Hi, I'm Maxwell Wang.</p>
+      <p class="text-2xl font-alegreya">
+        I'm a software engineer and I love to build things. I'm currently
+        working for a fintech company as a front-end engineer.
+      </p>
+    </div>
+  );
+}
+
+export default MyIntroduce;

components/PostCard.tsx

@@ -3,20 +3,22 @@ import { Post } from "@/utils/posts.ts";
 export default function PostCard(props: { post: Post }) {
   const { post } = props;
   return (
-    <div class="border(t gray-200) flex flex-col mb-5 rounded-2xl hover:bg-slate-100 px-4 py-3">
+    <div class="border(t gray-200) flex flex-col rounded-2xl py-3 mb-2">
       <a class="sm:col-span-2" href={`/${post.slug}`}>
-        <h3 class="text-xl gray-900 font-bold">
-          {post.title}
-        </h3>
-        <time class="text-gray-500">
-          {new Date(post.publishedAt).toLocaleDateString("en-us", {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          })}
-        </time>
+        <div class="flex flex-row justify-between items-center mb-1">
+          <h3 class="text-xl text-accent font-medium font-alegreya hover:cursor-pointer underline hover:no-underline underline-offset-2">
+            {post.title}
+          </h3>
+          <time class="text-accent-content">
+            {new Date(post.publishedAt).toLocaleDateString("en-us", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          </time>
+        </div>
       </a>
-      <div class="text-gray-900">
+      <div class="text-base-content">
         {post.snippet}
       </div>
     </div>

components/PostsList.tsx

@@ -0,0 +1,18 @@
+import { Post } from "@/utils/posts.ts";
+import PostCard from "@/components/PostCard.tsx";
+
+function PostList({
+  posts,
+}: { posts: Post[] }) {
+  return (
+    <section class="my-8 flex flex-col">
+      <div class="text-2xl font-semibold font-alegreya text-base-content">
+        Posts
+      </div>
+      <div class="">
+        {posts.map((post) => <PostCard post={post} />)}
+      </div>
+    </section>
+  );
+}
+export default PostList;

components/Topbar.tsx

@@ -19,7 +19,7 @@ export default function Topbar() {
   ];
 
   return (
-    <div class="top-0 z-50 fixed w-full bg-primary text-primary-content">
+    <div class="top-0 z-50 fixed w-full bg-neutral text-primary-content">
       <div class="container mx-auto flex items-center justify-between text-white p-4">
         <a class="text-3xl font-bold font-grenze" href="/">Arcane Tome</a>
         <div class="flex items-center space-x-4">

posts/relearn_react_02.md

@@ -1,7 +1,7 @@
 ---
 title: Relearn React 02
 published_at: 2024-11-14T15:00:00.000Z
-snippet: Relearning React from react.dev
+snippet: Relearning React from react.dev, from "Writing Markup with JSX"
 ---
 
 ## From "Writing Markup with JSX"

posts/relearn_react_03.md

@@ -1,7 +1,7 @@
 ---
 title: Relearn React 03
 published_at: 2024-11-15T15:00:00.000Z
-snippet: Relearning React from react.dev
+snippet: Relearning React from react.dev, rendering lists.
 ---
 
 ## From "Conditional Rendering"

posts/relearn_react_07.md

@@ -1,7 +1,7 @@
 ---
 title: Relearn React 07
 published_at: 2024-11-20T15:00:00.000Z
-snippet: Relearning React from react.dev
+snippet: Relearning React from react.dev, is state a snapshot?
 ---
 
 ## From "State as a Snapshot"

posts/relearn_react_08.md

@@ -1,7 +1,7 @@
 ---
-title: Relearn React 07
+title: Relearn React 08
 published_at: 2024-11-20T15:00:00.000Z
-snippet: Relearning React from react.dev
+snippet: Relearning React from react.dev, batching state updates.
 ---
 
 ## From "Queueing a Series of State Updates"

posts/relearn_react_09.md

@@ -1,7 +1,7 @@
 ---
 title: Relearn React 09
 published_at: 2024-11-22T15:00:00.000Z
-snippet: Relearning React from react.dev
+snippet: Relearning React from react.dev, why does the author explain how to update objects in the whole chapter?
 ---
 
 ## From "Updating Objects in State"

posts/relearn_react_10.md

@@ -1,7 +1,7 @@
 ---
 title: Relearn React 10
 published_at: 2024-11-25T15:00:00.000Z
-snippet: Relearning React from react.dev
+snippet: Relearning React from react.dev, yes, arrays.
 ---
 
 ## From "Updating Arrays in State"

routes/_app.tsx

@@ -12,6 +12,11 @@ export default function App({ Component }: PageProps) {
           rel="stylesheet"
         >
         </link>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap"
+          rel="stylesheet"
+        >
+        </link>
       </head>
       <body>
         <Component />

routes/_layout.tsx

@@ -8,7 +8,7 @@ export default function Layout({ Component, state }: PageProps) {
       <div class="py-[70px] box-border">
         <Component />
       </div>
-      <footer class="fixed bottom-0 left-0 right-0 flex items-center justify-center text-base-content bg-white py-3">
+      <footer class="fixed bottom-0 left-0 right-0 flex items-center justify-center text-base-content bg-neutral py-3 box-border">
         <a href="https://fresh.deno.dev">
           <img
             width="197"

routes/index.tsx

@@ -1,7 +1,8 @@
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { getPosts, Post } from "@/utils/posts.ts";
-import PostCard from "@/components/PostCard.tsx";
+import PostListView from "@/components/PostsList.tsx";
+import MyIntroduce from "@/components/MyIntroduce.tsx";
 
 export const handler: Handlers<Post[]> = {
   async GET(_req, ctx) {
@@ -17,11 +18,9 @@ export default function BlogIndexPage(props: PageProps<Post[]>) {
   const posts = props.data;
   return (
     <main class="max-w-screen-md px-4 mx-auto">
-      <div class="flex md:flex-row flex-col items-center md:items-start justify-start md:justify-between">
-        <img class="w-56 h-56" alt="dino" src="/my-dino.png" />
-        <div class="my-8">
-          {posts.map((post) => <PostCard post={post} />)}
-        </div>
+      <div class="flex flex-col items-center md:items-start justify-start md:justify-between">
+        <MyIntroduce />
+        <PostListView posts={posts} />
       </div>
     </main>
   );

tailwind.config.ts

@@ -13,6 +13,7 @@ export default {
     extend: {
       fontFamily: {
         grenze: ["Grenze", "sans-serif"],
+        alegreya: ["Alegreya", "serif"],
       },
     },
   },