update: unified multilingual page styles

src/pages/[lang]/atom.xml.ts

@@ -3,10 +3,10 @@ import themeConfig from '@/config'
 import { generateMultiLangPaths } from '@/i18n/route'
 import { generateRSS } from '@/utils/rss'
 
-const { moreLocale } = themeConfig.global
+const { moreLocales } = themeConfig.global
 
 // Type for supported non-default languages
-type SupportedLanguage = typeof moreLocale[number]
+type SupportedLanguage = typeof moreLocales[number]
 
 // Generate static paths for all supported languages
 export function getStaticPaths() {
@@ -17,7 +17,7 @@ export async function GET({ params }: APIContext) {
   const lang = params.lang as SupportedLanguage
 
   // Return 404 if language is not supported
-  if (!moreLocale.includes(lang)) {
+  if (!moreLocales.includes(lang)) {
     return new Response(null, {
       status: 404,
       statusText: 'Not found',

src/pages/[lang]/posts/[slug].astro

@@ -1,5 +1,6 @@
 ---
-import Waline from '@/components/Comments/Waline.astro'
+import Comments from '@/components/Comments/index.astro'
+import PostTime from '@/components/PostTime.astro'
 import { generateMultiLangPostPaths } from '@/i18n/route'
 import Layout from '@/layouts/Layout.astro'
 import { checkSlugDuplication } from '@/utils/content'
@@ -17,6 +18,7 @@ export async function getStaticPaths() {
   return generateMultiLangPostPaths(posts)
 }
 
+const { lang } = Astro.params
 const { post, supportedLangs = [] } = Astro.props
 const description = generateDescription(post)
 const { Content, remarkPluginFrontmatter } = await post.render()
@@ -28,13 +30,45 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postSlug={post.slug}
   supportedLangs={supportedLangs}
 >
-  <article>
-    <h1>{post.data.title}</h1>
-    <time>
-      {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
-        {remarkPluginFrontmatter.minutes && <span> {remarkPluginFrontmatter.minutes} min</span>}
-    </time>
+  <article class="heti mb-12.6">
+    <h1 class="post-title">
+      <span
+        transition:name={`post-${post.data.abbrlink || post.slug}`}
+        data-disable-transition-on-theme
+      >
+        {post.data.title}
+      </span>
+    </h1>
+
+    <div
+      class="mb-17 block c-primary font-time"
+      transition:name={`time-${post.data.abbrlink || post.slug}`}
+      data-disable-transition-on-theme
+    >
+      <!-- published and updated time -->
+      <PostTime
+        date={post.data.published}
+        updatedDate={post.data.updated}
+        minutes={remarkPluginFrontmatter.minutes}
+      />
+    </div>
     <Content />
   </article>
-  <Waline />
+
+  <!-- Tags -->
+  {post.data.tags && post.data.tags.length > 0 && (
+    <div class="uno-decorative-line"></div>
+    <div class="uno-tags-wrapper">
+      {post.data.tags.map(tag => (
+        <a
+          href={`/${lang}/tags/${tag}/`}
+          class="uno-tags-style"
+        >
+          {tag}
+        </a>
+      ))}
+    </div>
+  )}
+
+  <Comments />
 </Layout>

src/pages/[lang]/rss.xml.ts

@@ -3,10 +3,10 @@ import themeConfig from '@/config'
 import { generateMultiLangPaths } from '@/i18n/route'
 import { generateRSS } from '@/utils/rss'
 
-const { moreLocale } = themeConfig.global
+const { moreLocales } = themeConfig.global
 
 // Type for supported non-default languages
-type SupportedLanguage = typeof moreLocale[number]
+type SupportedLanguage = typeof moreLocales[number]
 
 // Generate static paths for all supported languages
 export function getStaticPaths() {
@@ -17,7 +17,7 @@ export async function GET({ params }: APIContext) {
   const lang = params.lang as SupportedLanguage
 
   // Return 404 if language is not supported
-  if (!moreLocale.includes(lang)) {
+  if (!moreLocales.includes(lang)) {
     return new Response(null, {
       status: 404,
       statusText: 'Not found',

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

@@ -1,4 +1,5 @@
 ---
+import PostList from '@/components/PostList.astro'
 import { generateMultiLangTagPaths } from '@/i18n/route'
 import Layout from '@/layouts/Layout.astro'
 import { getAllTags, getPostsByTag } from '@/utils/content'
@@ -15,21 +16,23 @@ const allTags = await getAllTags()
 ---
 
 <Layout>
-  <div>
+  <div class="uno-decorative-line"></div>
+  <div class="uno-tags-wrapper">
     {allTags.map(tag => (
-      <a href={`/${lang}/tags/${tag}/`}>
+      <a
+        href={`/${lang}/tags/${tag}/`}
+        class={`uno-tags-style ${
+          Astro.props.tag === tag
+            ? 'uno-tag-active'
+            : ''
+        }`}
+      >
         {tag}
       </a>
     ))}
   </div>
 
-  <div>
-    <ul>
-      {posts.map(post => (
-        <li>
-          <a href={`/${lang}/posts/${post.data.abbrlink || post.slug}/`}>{post.data.title}</a>
-        </li>
-      ))}
-    </ul>
+  <div class="mt-10.625">
+    <PostList posts={posts} lang={lang} />
   </div>
 </Layout>

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

@@ -12,9 +12,13 @@ const allTags = await getAllTags()
 ---
 
 <Layout>
-  <div>
+  <div class="uno-decorative-line"></div>
+  <div class="uno-tags-wrapper">
     {allTags.map(tag => (
-      <a href={`/${lang}/tags/${tag}/`}>
+      <a
+        href={`/${lang}/tags/${tag}/`}
+        class="uno-tags-style"
+      >
         {tag}
       </a>
     ))}