feat: 优化博客页样式、语义化

apps/backend/src/blog/blog.controller.ts

@@ -61,6 +61,7 @@ export class BlogController {
     return {
       id: blog.id,
       title: blog.title,
+      description: blog.description,
       createdAt: blog.createdAt,
       content: blogContent,
     };

apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx

@@ -14,6 +14,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { BlogComments } from "./components/BlogComments";
 import Image from "next/image";
 import { BlogAPI } from "@/lib/api/client";
+import { useEffect } from "react";
 
 export default function Blog() {
     const params = useParams();
@@ -34,6 +35,16 @@ export default function Blog() {
         () => BlogAPI.getBlog(id, password || undefined),
     )
 
+    useEffect(() => {
+        if (data) {
+            document.title = `${data.title} - 特恩的日志`;
+            const metaDescription = document.querySelector('meta[name="description"]');
+            if (metaDescription) {
+                metaDescription.setAttribute("content", data.description);
+            }
+        }
+    }, [data]);
+
     return (
         <div className="w-full overflow-x-hidden">
             <div className="max-w-200 mx-auto px-5 overflow-x-hidden mb-10">
@@ -48,18 +59,20 @@ export default function Blog() {
                     </div>
                 )}
                 {data && (
-                    <>
-                        <h1 className="text-center text-3xl font-bold mt-10">{data.title}</h1>
-                        <p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p>
+                    <article className="w-full">
+                        <header className="flex flex-col items-center">
+                            <h1 className="text-center text-2xl sm:text-3xl font-bold mt-10 transition-all duration-500">{data.title}</h1>
+                            <time className="text-sm text-zinc-500 text-center my-2 sm:my-5 mb-5 transition-all duration-500">发布于：{new Date(data.createdAt).toLocaleString()}</time>
+                        </header>
                         <ReactMarkdown
                             remarkPlugins={[remarkGfm]}
                             rehypePlugins={[rehypeRaw, rehypeHighlight]}
                             components={{
-                                h1: ({ ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
-                                h2: ({ ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
-                                h3: ({ ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
-                                h4: ({ ...props }) => <h4 className="text-lg font-bold" {...props} />,
-                                h5: ({ ...props }) => <h5 className="text-md font-bold" {...props} />,
+                                h1: ({ ...props }) => <h2 className="text-3xl font-bold py-2" {...props} />,
+                                h2: ({ ...props }) => <h3 className="text-2xl font-bold py-1" {...props} />,
+                                h3: ({ ...props }) => <h4 className="text-xl font-bold py-0.5" {...props} />,
+                                h4: ({ ...props }) => <h5 className="text-lg font-bold" {...props} />,
+                                h5: ({ ...props }) => <h6 className="text-md font-bold" {...props} />,
                                 p: ({ ...props }) => <p className="py-1 text-zinc-700" {...props} />,
                                 img: ({ src }) => (
                                     <PhotoProvider className="w-full">
@@ -78,7 +91,7 @@ export default function Blog() {
                                 a: ({ ...props }) => <a className="hover:underline" {...props} />,
                             }}
                         >{data.content}</ReactMarkdown>
-                    </>
+                    </article>
                 )}
 
                 {data && (

apps/frontend/app/(with-header-footer)/blog/page.tsx

@@ -24,6 +24,12 @@ const getBlogDetailUrl = (id: string): string => {
     return `/blog/${encoded}`;
 };
 
+
+export const metadata = {
+  title: '日志 - 特恩的日志',
+  description: '我随便发点，你也随便看看～',
+};
+
 export default async function Blog() {
     let errorMsg = '';
     const blogs = await BlogAPI.list().catch(e => {

apps/frontend/app/(with-header-footer)/page.tsx

@@ -2,22 +2,36 @@ import Image from 'next/image';
 
 export default function Home() {
   return (
-    <div className="w-full flex-1 flex flex-col items-center justify-center">
-      <Image
-        src="/avatar.png"
-        alt="TONE's avatar"
-        width={180}
-        height={180}
-        className="rounded-full duration-400 size-35 md:size-45 select-none"
-        priority
-        quality={100}
-      />
+    <section className="w-full flex-1 flex flex-col items-center justify-center">
+      <figure className="flex flex-col items-center">
+        <Image
+          src="/avatar.png"
+          alt="TONE 的个人头像"
+          width={180}
+          height={180}
+          className="rounded-full duration-400 size-35 md:size-45 select-none"
+          priority
+          quality={100}
+        />
+      </figure>
       <h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1>
-      <h2 className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</h2>
-      <div className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400'>
-        <a href='https://space.bilibili.com/474156211' target='_black' className='bg-[#488fe9] hover:bg-[#3972ba] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>哔哩哔哩</a>
-        <a href='https://github.com/tonecn' className='bg-[#da843f] hover:bg-[#c87d3e] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>GitHub</a>
-      </div>
-    </div>
+      <p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</p>
+      <nav className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400' aria-label="社交媒体链接">
+        <a href='https://space.bilibili.com/474156211'
+          target='_black'
+          rel="noopener noreferrer"
+          className='bg-[#488fe9] hover:bg-[#3972ba] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'
+        >
+          哔哩哔哩
+        </a>
+        <a href='https://github.com/tonecn'
+          target='_black'
+          rel="noopener noreferrer"
+          className='bg-[#da843f] hover:bg-[#c87d3e] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'
+        >
+          GitHub
+        </a>
+      </nav>
+    </section>
   );
 }

apps/frontend/app/(with-header-footer)/resource/page.tsx

@@ -7,6 +7,11 @@ import {
 import { ResourceAPI } from "@/lib/api/server";
 import { AlertCircle } from "lucide-react";
 
+export const metadata = {
+    title: '资源 - 特恩的日志',
+    description: '一些实用工具和学习资源',
+};
+
 export default async function Resources() {
     let errorMsg = '';
     const data = await ResourceAPI.list().catch(e => { errorMsg = `${e}`; return null; });

apps/frontend/app/layout.tsx

@@ -1,10 +1,10 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "../components/theme-provider";
-import { metadata } from "./config/metadata";
 import { Toaster } from "sonner";
 import { UserAPI } from "@/lib/api/server";
 import { ClientProvider } from "./ClientProvider";
+import { Metadata } from "next";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -16,7 +16,10 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export { metadata };
+export const metadata: Metadata = {
+  title: "控制台 - 特恩的日志",
+  description: "登录或注册以解锁更多妙妙小工具",
+};
 
 export default async function RootLayout({
   children,
@@ -26,7 +29,7 @@ export default async function RootLayout({
   const user = await UserAPI.me().catch(() => null);
 
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="zh-CN" suppressHydrationWarning>
       <link rel="icon" href="/favicon.ico" />
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
@@ -39,10 +42,8 @@ export default async function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <main className="flex-1 flex flex-col bg-zinc-50">
-              {children}
-              <Toaster />
-            </main>
+            {children}
+            <Toaster />
           </ThemeProvider>
         </ClientProvider>
       </body>

apps/frontend/lib/api/endpoints/blog.client.ts

@@ -5,6 +5,7 @@ export async function getBlog(id: string, password?: string) {
     return clientFetch<{
         id: string;
         title: string;
+        description: string;
         createdAt: string;
         content: string;
     }>(`/api/blog/${id}` + (password ? `?p=${password}` : ''));