chore: format tw by biome

Author: json-q

app/about/page.tsx

@@ -8,14 +8,14 @@ export const metadata: Metadata = {
 };
 
 const headingIntroduce = [
-  '你好，我是 Jsonq（焦松奇），一名<span class="line-through">（API 调用）</span>前端开发人员，主要使用 React、Vue、TypeScript、antd 相关技术进行日常开发和工作。',
-  '三年工作经验，工作中常用技术栈为 React + antd + <a class="text-link" target="_blank" rel="noopener noreferrer" href="https://learn.microsoft.com/en-us/sharepoint/dev/schema/query-schema">SharePoint CamlQuery</a> + pnpjs（SharePoint Orm）',
+  '你好，我是 Jsonq（焦松奇），一名<span class="line-through">（API 调用）</span>前端开发人员，主要使用 React、Vue、TypeScript 相关技术进行日常开发和工作。',
+  '三年工作经验，工作常用技术栈为 React、antd、<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://learn.microsoft.com/en-us/sharepoint/dev/schema/query-schema">SharePoint CamlQuery</a>、pnpjs（SharePoint ORM）',
 ];
 
 const workIntroduceContent = [
-  "需求分析、功能设计、技术选型、业务数据表结构设计（团队内部讨论）",
+  "需求分析、功能设计、业务表结构设计",
   "基于 SharePoint 进行需求功能开发",
-  "负责前端项目技术选型及搭建，基础建设功能开发和维护（本人负责）",
+  "负责前端项目技术选型及搭建，基础建设功能开发和维护",
   "参与后端 Java 技术栈开发的部分工作",
 ];
 
@@ -27,10 +27,8 @@ export default function AboutPage() {
           <p className="py-2 first:pt-0" key={index.toString()} dangerouslySetInnerHTML={{ __html: item }} />
         ))}
 
-        <h2 className="my-4 text-3xl font-semibold tracking-tight">Functions</h2>
-        <p className="text-foreground/60 mb-2 text-sm">
-          主要基于 SharePoint 内网平台的定制化功能开发，工作内容较杂，不局限于前端
-        </p>
+        <h2 className="my-4 font-semibold text-3xl tracking-tight">Functions</h2>
+        <p className="mb-2 text-foreground/60 text-sm">主要基于 SharePoint 进行内网办公平台的定制化开发</p>
         <ul className="list-disc">
           {workIntroduceContent.map((content, index) => (
             <li key={index.toString()} className="py-1">
@@ -39,7 +37,7 @@ export default function AboutPage() {
           ))}
         </ul>
 
-        <h2 className="my-4 text-3xl font-semibold tracking-tight">Tech Stack</h2>
+        <h2 className="my-4 font-semibold text-3xl tracking-tight">Tech Stack</h2>
         <ul className="flex flex-wrap gap-6 py-4">
           {commonTechStack.map((tech, index) => (
             <li key={index.toString()}>
@@ -50,7 +48,7 @@ export default function AboutPage() {
           ))}
         </ul>
 
-        <h2 className="my-4 text-3xl font-semibold tracking-tight">Learning</h2>
+        <h2 className="my-4 font-semibold text-3xl tracking-tight">Learning</h2>
         <ul className="flex flex-wrap gap-6 py-4">
           {otherTechStack.map((tech, index) => (
             <li key={index.toString()}>
@@ -59,12 +57,13 @@ export default function AboutPage() {
               </Link>
             </li>
           ))}
+          <li className="inline-flex items-end text-muted-foreground text-sm">and more...</li>
         </ul>
 
-        <h2 className="my-4 text-3xl font-semibold tracking-tight">Contact</h2>
+        <h2 className="my-4 font-semibold text-3xl tracking-tight">Contact</h2>
         <p className="flex items-center">
           <Mail />
-          <a className="text-link ml-2" href="mailto:j996730508@163.com" rel="noopener noreferrer">
+          <a className="ml-2 text-link" href="mailto:j996730508@163.com" rel="noopener noreferrer">
             j996730508@163.com
           </a>
         </p>

app/about/techStack.tsx renamed to app/about/techStack.ts

@@ -1,4 +1,5 @@
 import {
+  TechCentos,
   TechDocker,
   TechJava,
   TechJavaScript,
@@ -19,16 +20,16 @@ export const commonTechStack = [
     color: "#F7DF1E",
     href: "https://developer.mozilla.org/zh-CN/docs/Web/JavaScript",
   },
-  {
-    icon: TechReact,
-    color: "#61dafb",
-    href: "https://react.dev",
-  },
   {
     icon: TechTypeScript,
     color: "#3178C6",
     href: "https://www.typescriptlang.org",
   },
+  {
+    icon: TechReact,
+    color: "#61dafb",
+    href: "https://react.dev",
+  },
   {
     icon: TechPnpjs,
     href: "https://pnp.github.io/pnpjs",
@@ -71,11 +72,11 @@ export const otherTechStack = [
     color: "#E0234E",
     href: "https://nestjs.com",
   },
-  // {
-  //   icon: TechCentos,
-  //   color: '#262577',
-  //   href: 'https://www.centos.org',
-  // },
+  {
+    icon: TechCentos,
+    color: "#262577",
+    href: "https://www.centos.org",
+  },
   // {
   //   icon: TechNginx,
   //   color: '#009639',

app/error.tsx

@@ -9,7 +9,7 @@ export default function ErrorPage({ error, reset }: { error: Error; reset: () =>
   }, [error]);
 
   return (
-    <div className="flex flex-col items-center justify-center space-y-8 pt-24 text-lg text-black dark:text-white">
+    <div className="flex flex-col items-center justify-center space-y-8 pt-24 text-black text-lg dark:text-white">
       <h1 className="text-xl">Oh no, something went wrong... maybe refresh?</h1>
       <Button onClick={reset}>Try again</Button>
     </div>

app/page.tsx

@@ -1,25 +1,25 @@
 import type { Metadata } from "next";
+import { getPostList } from "~/utils/postData";
 
 const desc = [
+  {
+    heading: "Platform",
+    content: [
+      '<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://github.com/json-q">Github</a>',
+      '<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://gitee.com/jsonqi">Gitee</a>',
+      '<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://www.cnblogs.com/jsonq">博客园</a>（有意义的内容会同步）',
+    ],
+  },
   {
     heading: "Feature",
     content: [
       "Nextjs + shadcn",
-      "markdown 编写，使用 rehype remark 等相关插件渲染优化展示",
-      "简单实现 markdown 内容更改后的页面 hmr",
-      "Github Action 的 CI/CD 部署",
+      "markdown 编写，rehype remark 等相关插件优化展示",
+      "简单实现 markdown 编写保存时的页面 hmr",
+      "Github Action 自动化部署",
       '<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://jsonq.netlify.app">镜像站点</a> 托管 netlify',
       "pagefind 本地检索（pagefind 仅支持静态页面，因此 RSC 无法使用）",
       "优秀的性能和可访问性，Lighthouse 评分 95+（文章内容大小会影响 Perfermance）",
-      '更多历史功能（目前移除）可移步 <a class="text-link" target="_blank" rel="noopener noreferrer" href="https://github.com/json-q/jsonq">Github</a>',
-    ],
-  },
-  {
-    heading: "Platform",
-    content: [
-      '<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://github.com/json-q">Github</a>',
-      '<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://gitee.com/jsonqi">Gitee</a>',
-      '<a class="text-link" target="_blank" rel="noopener noreferrer" href="https://www.cnblogs.com/jsonq">博客园</a>（有意义的内容会同步）',
     ],
   },
 ];
@@ -29,16 +29,28 @@ export const metadata: Metadata = {
   description: "基于 Nextjs 的博客, 简约, 专注于内容",
 };
 
-export default function Home() {
+export default async function Home() {
+  const postList = await getPostList();
+
+  const mergedDesc = [
+    {
+      heading: "Recently Updated",
+      content: postList
+        .slice(0, 5)
+        .map((item) => `<a class="underline hover:text-link transition-colors" href=${item.url}>${item.title}</a>`),
+    },
+    ...desc,
+  ];
+
   return (
     <div className="py-8">
-      <h1 className="mb-4 text-center text-4xl font-extrabold tracking-tight will-change-auto lg:text-5xl">
+      <h1 className="mb-4 text-center font-extrabold text-4xl tracking-tight will-change-auto lg:text-5xl">
         Jsonq&apos;s Blog
       </h1>
-      {desc.map((item) => (
+      {mergedDesc.map((item) => (
         <div key={item.heading} className="px-4 md:px-12">
-          <h2 className="my-4 text-3xl font-semibold tracking-tight">{item.heading}</h2>
-          <ul className="list-disc">
+          <h2 className="my-4 font-semibold text-3xl tracking-tight">{item.heading}</h2>
+          <ul className="list-disc [&>li]:ml-4">
             {item.content.map((content) => (
               <li className="py-1" key={content} dangerouslySetInnerHTML={{ __html: content }} />
             ))}

app/post/page.tsx

@@ -16,11 +16,11 @@ export default async function PostList() {
       {postList.map((post) => (
         <li
           key={post.url}
-          className="dark:hover:bg-accent mb-2 flex w-full flex-col rounded border p-0 hover:bg-slate-50 dark:border-slate-600"
+          className="mb-2 flex w-full flex-col rounded border p-0 hover:bg-slate-50 dark:border-slate-600 dark:hover:bg-accent"
         >
-          <Link href={post.url} className="p-4 !text-inherit no-underline hover:text-inherit dark:hover:text-inherit">
+          <Link href={post.url} className="!text-inherit p-4 no-underline hover:text-inherit dark:hover:text-inherit">
             <h5 className="font-bold">{post.title}</h5>
-            <div className="mt-2 flex justify-between text-sm text-slate-600 dark:text-slate-400">
+            <div className="mt-2 flex justify-between text-slate-600 text-sm dark:text-slate-400">
               <time>{dayjs(post.publishedAt).format("YYYY-MM-DD")}</time>
               <time>{post.readingTime}</time>
             </div>

biome.json

@@ -46,6 +46,12 @@
       },
       "a11y": {
         "noSvgWithoutTitle": "off"
+      },
+      "nursery": {
+        "useSortedClasses": {
+          "level": "warn",
+          "fix": "safe"
+        }
       }
     }
   },

components/layouts/error-result.tsx

@@ -27,14 +27,14 @@ export default function ErrorResult(props: ErrorResultProps) {
     <div className="flex h-full flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
       <div className="mx-auto max-w-md text-center">
         <div className="p-4">
-          <div className="text-6xl font-bold">{props.status}</div>
+          <div className="font-bold text-6xl">{props.status}</div>
         </div>
 
-        <h1 className="text-foreground mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
+        <h1 className="mt-4 font-bold text-3xl text-foreground tracking-tight sm:text-4xl">
           {TipEnum[props.status].title}
         </h1>
 
-        <p className="text-muted-foreground mt-4 mb-6 text-sm">{TipEnum[props.status].tip}</p>
+        <p className="mt-4 mb-6 text-muted-foreground text-sm">{TipEnum[props.status].tip}</p>
 
         {props.back === "prev" ? (
           <Button variant="secondary" onClick={router.back}>

components/layouts/page-footer/index.tsx

@@ -12,7 +12,7 @@ export default function PageFooter() {
             href="https://beian.miit.gov.cn"
             target="_blank"
             rel="noopener"
-            className="hover:text-link transition-colors"
+            className="transition-colors hover:text-link"
           >
             豫ICP备2022024874号-2
           </Link>
@@ -25,7 +25,7 @@ export default function PageFooter() {
               href={item.href}
               target="_blank"
               rel="noopener"
-              className="hover:text-link transition-colors"
+              className="transition-colors hover:text-link"
             >
               <span className="inline-flex items-center gap-x-2">
                 <item.icon className="size-5" /> {item.title}

components/layouts/page-header/doc-search.tsx

@@ -123,11 +123,11 @@ export default function DocSearch() {
         {isMobile === false && (
           <Button
             variant="outline"
-            className="bg-muted/50 text-muted-foreground relative h-8 w-full cursor-pointer justify-start rounded-[0.5rem] text-sm font-normal shadow-none sm:pr-12 md:w-32 lg:w-48 xl:w-56"
+            className="relative h-8 w-full cursor-pointer justify-start rounded-[0.5rem] bg-muted/50 font-normal text-muted-foreground text-sm shadow-none sm:pr-12 md:w-32 lg:w-48 xl:w-56"
           >
             <Search className="h-16 w-16 shrink-0 opacity-50" />
             <span className="inline-flex">Search...</span>
-            <kbd className="bg-muted pointer-events-none absolute top-[0.3rem] right-[0.3rem] hidden h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none sm:flex">
+            <kbd className="pointer-events-none absolute top-[0.3rem] right-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] opacity-100 sm:flex">
               <span className="text-xs">⌘</span>K
             </kbd>
           </Button>
@@ -156,7 +156,7 @@ export default function DocSearch() {
         ) : results.length === 0 ? (
           <EmptyStatus tip="暂无结果" icon={<Search className="h-16 w-16 shrink-0 opacity-50" />} />
         ) : (
-          <ScrollArea className="text-foreground min-h-[300px] overflow-x-hidden overflow-y-auto px-2 py-1 md:max-h-[calc(100vh-300px)]">
+          <ScrollArea className="min-h-[300px] overflow-y-auto overflow-x-hidden px-2 py-1 text-foreground md:max-h-[calc(100vh-300px)]">
             <ul className="w-full">
               {results.map((item) => (
                 <ResultList key={item.url} data={item} closeModal={closeModal} />
@@ -176,15 +176,15 @@ function ResultList({ data, closeModal }: { data: PagefindResult; closeModal: ()
         onClick={closeModal}
         onKeyUp={closeModal}
         key={item.url}
-        className="cursor-pointer gap-2 border-b text-sm text-inherit select-none"
+        className="cursor-pointer select-none gap-2 border-b text-inherit text-sm"
       >
         <Link
           onKeyDown={(e) => e.key === "Enter" && closeModal()}
           href={item.url}
-          className="hover:bg-accent hover:text-accent-foreground inline-flex w-full flex-col rounded-sm px-3 py-2"
+          className="inline-flex w-full flex-col rounded-sm px-3 py-2 hover:bg-accent hover:text-accent-foreground"
         >
           <div className="line-clamp-2 w-full" dangerouslySetInnerHTML={{ __html: item.excerpt }} />
-          <div className="mt-1 overflow-hidden text-xs font-bold">{item.title}</div>
+          <div className="mt-1 overflow-hidden font-bold text-xs">{item.title}</div>
         </Link>
       </li>
     );

components/layouts/page-header/index.tsx

@@ -8,7 +8,7 @@ import ThemeSwitcher from "./theme-switcher";
 
 export default function PageHeader() {
   return (
-    <header className="border-grid bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur">
+    <header className="sticky top-0 z-50 w-full border-grid border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="m-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-14 items-center">
           <PCNav />