save

src/components/header/HeaderNavigation.tsx

@@ -9,7 +9,7 @@ export default function App() {
   const menuItems = [
     {
       link: "/archive",
-      name: "目录",
+      name: "博客",
     },
     {
       link: "/calendar",

src/pages/archive.astro

@@ -1,43 +1,89 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro"
-import ArchivePostList from "../layouts/ArchivePostList.astro"
-const allPosts = await Astro.glob("./posts/*.md")
-const Blogs = await Astro.glob("../pages/posts/blogs/**/*.md")
-const tags = ["寝室", "技术", "学习", "活动", "其他"]
-const posts = []
+import type { MarkdownInstance } from "astro"
+import dayjs from "dayjs"
 
-tags.forEach((tag) => {
-  const filteredPosts = allPosts.filter(post =>
-    post.frontmatter.tags.includes(tag),
-  )
-  const filteredBlogs = Blogs.filter(
-    post => post.frontmatter.tags?.includes(tag) ?? tag === "其他",
-  )
-  posts.push([...filteredPosts, ...filteredBlogs])
+type Cover = {
+  url: string
+  square: string
+  alt: string
+} | string
+
+type Post = {
+  layout: string
+  title: string
+  pubDate: string // ISO 字符串，可选改为 `Date` 类型
+  description: string
+  author: string
+  cover?: Cover
+  tags: string[]
+  theme: string
+  featured: boolean
+}
+
+const posts: MarkdownInstance<Post>[] = await Astro.glob("./posts/*.md")
+const blogs: MarkdownInstance<Post>[] = await Astro.glob("../pages/posts/blogs/**/*.md")
+
+const allPosts = [...posts, ...blogs].sort((a, b) => {
+  return new Date(b.frontmatter.pubDate).getTime() - new Date(a.frontmatter.pubDate).getTime()
 })
+
+const getCover = (post: MarkdownInstance<Post>) => {
+  if (typeof post.frontmatter.cover === "string") {
+    return { url: post.frontmatter.cover, square: post.frontmatter.cover, alt: "" }
+  }
+  return post.frontmatter.cover || { url: "", square: "", alt: "" }
+}
+
+  // const tags = allPosts.reduce((acc, post) => {
+  //   post.frontmatter.tags.forEach(tag => {
+  //     if (!acc.includes(tag)) {
+  //       acc.push(tag)
+  //     }
+  //   })
+  //   return acc
+  // }, [] as string[]).sort((a, b) => a.localeCompare(b))
+
 ---
 
-  <BaseLayout primaryTitle="归档">
-    <section class="archive">
-      <div class="section-content section-tag">
+<BaseLayout primaryTitle="归档">
+  <div class="box-border border-b sticky top-0 bg-white/80 backdrop-blur z-20 h-12">
+    <div class="h-full flex items-center justify-between text-lg max-w-[1024px] mx-auto px-[22px]">
+      <span id="repair-header" class="font-semibold select-none cursor-default">博客</span>
+      <div class="flex items-center">
+      </div>
+    </div>
+  </div>
+  <section class="mb-12">
+    <div class="section-content">
+      <div class="flex flex-col gap-2 group">
         {
-        tags.map((tag, index) => {
+          allPosts.map((v) => {
             return (
-            <div class="archive-tag">
-              <h2 class="tag-header">{tag}</h2>
-              <div class="tag-post-list">
-                {posts[index].length !== 0
-                  ? (
-                    <ArchivePostList posts={posts[index]} />
-                    )
-                  : (
-                    <div class="no-posts">暂无文章</div>
-                    )}
+              <a class="flex items-start sm:items-center gap-4 sm:gap-6 py-8 no-underline appearance-none text-gray-900 cursor-pointer" style="text-decoration:none" href={v.url}>
+                <div class="">
+                  <img
+                    class="rounded-xl sm:rounded-[20px] w-[105px] sm:w-[264px] xl:w-[295px] aspect-video overflow-hidden bg-gray-100 object-cover object-center"
+                    src={getCover(v).url}
+                    alt={getCover(v).url}
+                    class="archive-cover"
+                  />
                 </div>
+                <div class="flex flex-col gap-2">
+                  <div class="flex items-center gap-2">
+                    {v.frontmatter.tags.map((tag) => {
+                      return <span class="text-xs text-gray-700">{tag}</span>
+                    })}
                   </div>
+                  <div class="sm:text-xl font-bold">{v.frontmatter.title}</div>
+                  <div class="text-sm font-semibold text-gray-600 sm:mt-1">{dayjs(v.frontmatter.pubDate).format("YYYY-MM-DD")}</div>
+                </div>
+              </a>
+              <div class="w-full h-[0.5px] bg-gray-600 my-1 flex-shrink-0 last:hidden"></div>
             )
           })
         }
       </div>
+    </div>
   </section>
-  </BaseLayout>
+</BaseLayout>