refactor: enhance site navigation and styling

- Add view transitions for site title
- Update Navbar with hover effects and improved typography
- Modify index page layout with decorative lines and date formatting
- Adjust post publication dates
- Update VSCode dictionary with new terms

.vscode/settings.json

@@ -63,6 +63,7 @@
     "astrojs",
     "attributify",
     "bmoji",
+    "Frontmatter",
     "gtag",
     "katex",
     "Lightbox",
@@ -76,6 +77,9 @@
     "radishzz",
     "rehype",
     "Retypeset",
+    "Roundhand",
+    "STIX",
+    "titlebar",
     "Umami",
     "unocss",
     "vite",

src/components/Header.astro

@@ -16,7 +16,10 @@ const marginBottom = {
 
 <header>
   <h1 class={`${marginBottom} mt--5 text-12.8 c-primary font-bold font-title`}>
-    <a href={getLocalizedPath('/')}>
+    <a
+      href={getLocalizedPath('/')}
+      transition:name="site-title"
+    >
       {title}
     </a>
   </h1>

src/components/Navbar.astro

@@ -3,21 +3,24 @@ import { getPagePath } from '@/utils/path'
 import { ui } from '@/utils/ui'
 
 const currentPath = Astro.url.pathname
-const { currentLang, isHome, isPost, isTag, isAbout, getLocalizedPath } = getPagePath(currentPath)
+const { currentLang, isHome, isPost, isTag, isAbout, getLocalizedPath }
+  = getPagePath(currentPath)
 const currentUI = ui[currentLang as keyof typeof ui]
 
 const isPostActive = isHome || isPost
 const isTagActive = isTag
-const isAboutActive = isAbout
+const isAboutActive = isAbout;
 ---
 
-<nav class="mb-16 mt-13 text-5.6 font-semibold leading-13 font-navbar">
+<nav class="mb-17 mt-17 text-5.84 font-semibold leading-14 font-navbar">
   <ul>
     <li>
       <a
         href={getLocalizedPath('/')}
         class:list={[
-          isPostActive ? 'font-bold text-primary' : '',
+          isPostActive
+            ? 'font-bold text-primary'
+            : 'hover:text-primary hover:font-bold',
         ]}
       >
         {currentUI.posts}
@@ -27,7 +30,9 @@ const isAboutActive = isAbout
       <a
         href={getLocalizedPath('/tags')}
         class:list={[
-          isTagActive ? 'font-bold text-primary' : '',
+          isTagActive
+            ? 'font-bold text-primary'
+            : 'hover:text-primary hover:font-bold',
         ]}
       >
         {currentUI.tags}
@@ -37,7 +42,9 @@ const isAboutActive = isAbout
       <a
         href={getLocalizedPath('/about')}
         class:list={[
-          isAboutActive ? 'font-bold text-primary' : '',
+          isAboutActive
+            ? 'font-bold text-primary'
+            : 'hover:text-primary hover:font-bold',
         ]}
       >
         {currentUI.about}

src/components/SiteTitle.astro

@@ -10,6 +10,7 @@ const { getLocalizedPath } = getPagePath(currentPath)
 <a
   class="mt--1.4 text-8.32 c-secondary font-bold font-title"
   href={getLocalizedPath('/')}
+  transition:name="site-title"
 >
   {title}
 </a>

src/content/posts/retypeset_en.md

@@ -6,4 +6,4 @@ lang: en
 slug: theme-introduction
 ---
 
-Retypeset, an Astro-powered blog theme with the Chinese name "Recomposition", draws initial inspiration from typographic artistry. While preserving the quintessential charm of movable-type printing, it revolutionizes all page layouts with meticulous typographic design. This theme crafts a minimalist modern aesthetic that simultaneously resonates with the humanistic elegance inherent in traditional printing craftsmanship.
+Retypeset, an Astro-powered blog theme with the Chinese name "Recomposition", draws initial inspiration from typographic artistry. While preserving the quintessential charm of movable-type printing, it revolutionizes all page layouts with meticulous typographic design. This theme crafts a minimalist modern aesthetic that simultaneously resonates with the humanistic elegance inherent in traditional printing craftsmanship.

src/content/posts/retypeset_zh.md

@@ -2,8 +2,6 @@
 title: Retypeset 主题介绍
 published: 2024-01-25
 tags: ["Astro", "博客主题"]
-lang: zh
-slug: theme-introduction
 ---
 
-Retypeset 是一款基于 Astro 的博客主题，中文名为『重新编排』，最初灵感来源于 Typography。本主题在保留原『活字印刷』风格的基础上，以版式设计为核心，对所有页面都进行了重新编排，营造出简约现代的视觉风格，同时又流淌着传统印刷的人文气韵。
+Retypeset 是一款基于 Astro 的博客主题，中文名为『重新编排』，最初灵感来源于 Typography。本主题在保留原『活字印刷』风格的基础上，以版式设计为核心，对所有页面都进行了重新编排，营造出简约现代的视觉风格，同时又流淌着传统印刷的人文气韵。

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

@@ -1,6 +1,6 @@
 ---
 title: 容忍与自由
-published: 2024-03-16
+published: 2022-06-17
 tags: ["胡适"]
 ---
 

src/content/posts/羅生門.md

@@ -1,6 +1,6 @@
 ---
 title: 羅生門
-published: 2024-03-05
+published: 2022-03-05
 tags: ["芥川龙之介"]
 ---
 

src/pages/index.astro

@@ -26,21 +26,21 @@ const postsByYear = await getPostsByYear()
       </section>
     )}
 
-    {[...postsByYear.entries()].map(([year, posts]) => (
+    {[...postsByYear.entries()].map(([_year, posts]) => (
       // Year Group
-      <section class="mt-8">
-        {/* Year */}
-        <time class="text-8 font-navbar">{year}</time>
+      <section class="mt-12">
+        {/* Decorative Line */}
+        <div class="h-0.2 w-16 bg-secondary opacity-25"></div>
         {/* Posts List */}
         <ul>
           {posts.map(post => (
             // Single Post
-            <li class="mt-6">
+            <li class="mt-7">
               {/* Post Title */}
-              <a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
+              <a class="hover:text-primary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
                 {/* Post Date */}
-                <div class="block text-5.6 leading-7 font-navbar lg:inline lg:before:content-['_']" aria-hidden="true">
-                  {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
+                <div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
+                  {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
                   {post.remarkPluginFrontmatter?.minutes && <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
                 </div>
             </li>