feat: Improve tag pages and article tag display

package.json

@@ -2,6 +2,7 @@
   "name": "astro-theme-retypeset",
   "type": "module",
   "version": "0.0.1",
+  "packageManager": "pnpm@10.5.0",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
@@ -16,11 +17,11 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/mdx": "^4.1.0",
-    "@astrojs/partytown": "^2.1.3",
+    "@astrojs/partytown": "^2.1.4",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
     "@rehype-pretty/transformers": "^0.13.2",
-    "astro": "^5.4.1",
+    "astro": "^5.4.2",
     "astro-compress": "^2.3.6",
     "astro-robots-txt": "^1.0.0",
     "hastscript": "^9.0.1",
@@ -44,10 +45,10 @@
     "vite": "^6.2.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.3.0",
+    "@antfu/eslint-config": "^4.4.0",
     "@types/markdown-it": "^14.1.2",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.13.6",
+    "@types/node": "^22.13.9",
     "@types/sanitize-html": "^2.13.0",
     "@unocss/eslint-plugin": "66.1.0-beta.3",
     "@unocss/preset-attributify": "66.1.0-beta.3",

src/content/posts/Markdown 扩展样式.mdx

@@ -1,7 +1,7 @@
 ---
 title: Markdown 扩展样式
 published: 2022-04-01
-tags: ["Markdown"]
+tags: ["Markdown", "博客主题"]
 ---
 
 FROM https://github.com/saicaca/fuwari

src/content/posts/retypeset_en.md

@@ -1,8 +1,8 @@
 ---
 title: Retypeset Theme Introduction
 published: 2024-01-25
-tags: ["Astro", "Blog Theme"]
+tags: ["Astro", "Markdown"]
 lang: en
 ---
 
-A blog theme based on [Astro](https://astro.build/) framework, initially inspired by [Typography](https://astro-theme-typography.vercel.app/). This theme builds upon its original style by establishing unified color schemes, layouts, font standards while recomposing all pages aiming at recreating reading experiences from movable type printing era without losing modern designs elegance & simplicity; every detail matters here where elegance is revealed within inches.
+A blog theme based on <a href="https://astro.build/">Astro</a> framework, initially inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme reorganizes all pages of its original counterpart by establishing a unified visual standard to faithfully recreate traditional print reading experience while maintaining modern designs minimalist feel. Every detail is meticulously crafted; elegance is found within every inch.

src/content/posts/retypeset_zh.md

@@ -1,7 +1,7 @@
 ---
 title: 主题介绍
 published: 2024-01-25
-tags: ["Astro", "博客主题"]
+tags: ["天体", "Markdown"]
 ---
 
-一款基于 [Astro](https://astro.build/) 框架的博客主题，中文名为重新编排，最初灵感来自 [Typography](https://astro-theme-typography.vercel.app/)。本主题以原主题风格为基础，通过建立统一的色彩、版式、字体规范，并对所有页面都进行重新编排，来还原活字印刷时代的阅读体验，同时不失现代设计的优雅与简约。处处皆为细节，方寸尽显优雅。
+一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范，对原主题的所有页面进行重新编排，尽力还原传统印刷的阅读体验，同时不失现代设计的简约感受。所见皆为细节，方寸尽显优雅。

src/content/posts/容忍与自由.mdx

@@ -1,7 +1,7 @@
 ---
 title: 容忍与自由
 published: 2022-06-17
-tags: ["胡适"]
+tags: ["胡适","Markdown"]
 ---
 import { Image } from 'astro:assets';
 

src/content/posts/故乡.mdx

@@ -1,7 +1,7 @@
 ---
 title: 故鄉
 published: 2024-01-10
-tags: ["鲁迅"]
+tags: ["鲁迅", "Markdown"]
 ---
 import { Image } from 'astro:assets';
 

src/content/posts/羅生門.mdx

@@ -1,7 +1,7 @@
 ---
 title: 羅生門
 published: 2022-03-05
-tags: ["芥川龙之介"]
+tags: ["芥川龙之介", "Markdown"]
 ---
 import { Image } from 'astro:assets';
 

src/layouts/Layout.astro

@@ -37,7 +37,7 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
     <!--  -->
     <div
       class="mx-auto max-w-205.848 min-w-80 min-h-dvh"
-      p="x-[min(7.25vw,3.731rem)] y-7 lg:(x-22.5 y-20)"
+      p="x-[min(7.25vw,3.731rem)] y-8 lg:(x-22.5 y-20)"
       lg="max-w-320 grid cols-[1fr_13.875rem] gap-[min(calc(16.35vw-3.46rem),11.25rem)]"
     >
       <div class={!isHome && isPost ? 'hidden lg:block' : ''}>

src/pages/[lang]/tags/[tag].astro

@@ -9,8 +9,8 @@ export async function getStaticPaths() {
 }
 
 const { lang } = Astro.params
-const { tags } = Astro.props
-const posts = await getPostsByTag(tags)
+const { tag } = Astro.props
+const posts = await getPostsByTag(tag)
 const allTags = await getAllTags()
 ---
 

src/pages/about.astro

@@ -3,5 +3,8 @@ import Layout from '@/layouts/Layout.astro'
 ---
 
 <Layout>
-  about me
+  <div class="h-0.125 w-10 bg-secondary opacity-25"></div>
+  <div class="heti mt-4.375">
+    <p>一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范，对原主题的所有页面进行重新编排，尽力还原传统印刷的阅读体验，同时不失现代设计的简约感受。所见皆为细节，方寸尽显优雅。</p>
+  </div>
 </Layout>

src/pages/posts/[slug].astro

@@ -25,6 +25,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postImage={post.data.image}
 >
   <article class="heti">
+    <!-- after:(absolute h-0.25 w-3 origin-left rotate-30 bg-secondary content-empty) before:(absolute h-0.25 w-3 origin-left rotate-330 bg-secondary content-empty) -->
+    <div class="relative h-0.25 w-10 bg-secondary opacity-25"></div>
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}
@@ -35,7 +37,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     </h1>
 
     <div
-      class="mb-14.625 block c-primary font-time"
+      class="mb-16.375 block c-primary font-time"
       transition:name={`time-${post.data.slug || post.slug}`}
       data-disable-transition-on-theme
     >
@@ -47,5 +49,32 @@ const { Content, remarkPluginFrontmatter } = await post.render()
       </span>
     </div>
     <Content />
+
+    {post.data.tags && post.data.tags.length > 0 && (
+      <div class="mt-12">
+        <div class="h-0.125 w-10 bg-secondary opacity-25"></div>
+        <div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6 font-medium font-serif">
+          {post.data.tags.map(tag => (
+            <a
+              href={`/tags/${tag}/`}
+              class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
+            >
+              {tag}
+            </a>
+          ))}
+        </div>
+      </div>
+    )}
   </article>
 </Layout>
+
+<!-- <script is:inline>
+function _handleBack(e) {
+  if (window.history.length > 2) {
+    e.preventDefault()
+    window.history.back()
+    return false
+  }
+  return true
+}
+</script> -->

src/pages/tags/[tag].astro

@@ -0,0 +1,73 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import { getAllTags, getPostsByTag } from '@/utils/content'
+
+export async function getStaticPaths() {
+  const tags = await getAllTags()
+  return tags.map(tag => ({
+    params: { tag },
+    props: { tag },
+  }))
+}
+
+const { tag } = Astro.props
+const posts = await getPostsByTag(tag)
+const allTags = await getAllTags()
+---
+
+<Layout>
+  <div class="h-0.125 w-10 bg-secondary opacity-0"></div>
+  <div class="mt-3.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6 font-medium font-serif">
+    {allTags.map(tag => (
+      <a
+        href={`/tags/${tag}/`}
+        class={`inline-block whitespace-nowrap border rounded-full px-3.2 py-0.7 transition-colors ${
+          Astro.props.tag === tag
+            ? "border-secondary text-primary"
+            : "border-secondary/25 c-secondary hover:(border-secondary text-primary)"
+        }`}
+      >
+        {tag}
+      </a>
+    ))}
+  </div>
+
+  <div class="mt-10.625">
+    <ul>
+      {posts.map(post => (
+        <li class="mt-4.375">
+          <a
+            class="hover:c-primary"
+            href={`/posts/${post.data.slug || post.slug}`}
+            transition:name={`post-${post.data.slug || post.slug}`}
+            data-disable-transition-on-theme
+          >
+            {post.data.title}
+          </a>
+
+          <div
+            class="mb-5.625 text-3.5 leading-6.875 font-time lg:(hidden)"
+            transition:name={`time-${post.data.slug || post.slug}`}
+            data-disable-transition-on-theme
+          >
+            <time>
+              {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+            </time>
+            <span class="ml-1.25">
+              {post.remarkPluginFrontmatter?.minutes} min
+            </span>
+          </div>
+
+          <div class="mb-5.625 hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)">
+            <time>
+              {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+            </time>
+            <span class="ml-1.25">
+              {post.remarkPluginFrontmatter?.minutes} min
+            </span>
+          </div>
+        </li>
+      ))}
+    </ul>
+  </div>
+</Layout>

src/pages/tags/[tags].astro

@@ -1,36 +0,0 @@
----
-import Layout from '@/layouts/Layout.astro'
-import { getAllTags, getPostsByTag } from '@/utils/content'
-
-export async function getStaticPaths() {
-  const tags = await getAllTags()
-  return tags.map(tag => ({
-    params: { tags: tag },
-    props: { tags: tag },
-  }))
-}
-
-const { tags } = Astro.props
-const posts = await getPostsByTag(tags)
-const allTags = await getAllTags()
----
-
-<Layout>
-  <div>
-    {allTags.map(tag => (
-      <a href={`/tags/${tag}/`}>
-        {tag}
-      </a>
-    ))}
-  </div>
-
-  <div>
-    <ul>
-      {posts.map(post => (
-        <li>
-          <a href={`/posts/${post.data.slug || post.slug}/`}>{post.data.title}</a>
-        </li>
-      ))}
-    </ul>
-  </div>
-</Layout>

src/pages/tags/index.astro

@@ -6,10 +6,15 @@ const allTags = await getAllTags()
 ---
 
 <Layout>
-  <div>
+  <div class="h-0.125 w-10 bg-secondary opacity-0"></div>
+  <div class="mt-3.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6 font-medium font-serif">
     {allTags.map(tag => (
-      <a href={`/tags/${tag}/`}>
+      <a
+        href={`/tags/${tag}/`}
+        class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
+      >
         {tag}
       </a>
     ))}
   </div>
+</Layout>

src/styles/heti.css

@@ -115,7 +115,7 @@
 	font-weight:600
 }
 .heti .post-title {
-  --at-apply: 'c-primary mb-4.4375 font-bold text-9 relative leading-12 before:(absolute left-0 top--4.375 h-0.125 w-10 bg-secondary opacity-25 content-[''])';
+  --at-apply: 'mt-4.375 c-primary mb-2.375 font-bold text-9 leading-12';
 	line-height:48px
 }
 .heti h1 {

src/utils/i18n.ts

@@ -31,8 +31,8 @@ export function generateMultiLangPostPaths(posts: CollectionEntry<'posts'>[]) {
 export function generateMultiLangTagPaths(tags: string[]) {
   return themeConfig.global.moreLocale.flatMap(lang =>
     tags.map(tag => ({
-      params: { lang, tags: tag },
-      props: { tags: tag },
+      params: { lang, tag },
+      props: { tag },
     })),
   )
 }

uno.config.ts

@@ -2,18 +2,18 @@ import type { Theme } from 'unocss/preset-uno'
 import {
   defineConfig,
   presetAttributify,
-  presetUno,
+  presetWind3,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
 import presetTheme from 'unocss-preset-theme'
-import { themeConfig } from './src/config'
+import { themeConfig } from './src/config.ts'
 
 const { light, dark } = themeConfig.color
 
 export default defineConfig({
   presets: [
-    presetUno(),
+    presetWind3(),
     presetAttributify(),
     presetTheme<Theme>({
       theme: {