feat: add desktop back home button on posts page

package.json

@@ -2,7 +2,7 @@
   "name": "astro-theme-retypeset",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@10.6.3",
+  "packageManager": "pnpm@10.6.4",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",

src/components/Navbar.astro

@@ -2,8 +2,7 @@
 import { ui } from '@/i18n/ui'
 import { getPageInfo } from '@/utils/page'
 
-const { currentLang, isHome, isPost, isTag, isAbout, getLocalizedPath }
-  = getPageInfo(Astro.url.pathname)
+const { currentLang, isHome, isPost, isTag, isAbout, getLocalizedPath } = getPageInfo(Astro.url.pathname)
 const currentUI = ui[currentLang as keyof typeof ui]
 
 const isPostActive = isHome || isPost

src/components/PostList.astro

@@ -46,7 +46,7 @@ function getPostPath(post: Post) {
 
       {/* mobile post time */}
       <div
-        class="text-3.5 leading-6.875 font-time lg:(hidden)"
+        class="text-3.5 leading-6.875 font-time lg:hidden"
         transition:name={`time-${post.data.abbrlink || post.slug}-${lang}`}
         data-disable-transition-on-theme
       >

src/components/Widgets/BackHome.astro

@@ -0,0 +1,15 @@
+<button
+  id="back-button"
+  class="hidden"
+  lg="block absolute left--8 top-1/2 aspect-square w-4.5 translate-y--1/2 c-secondary active:scale-90 hover:c-primary"
+  aria-label="Back to home"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    fill="currentColor"
+  >
+    <path d="M16.6 1.9 4.3 12l12.3 10.1.3 1.6h.8l-.5-5.5h-.8l.1 2.5L6.6 12l9.9-8.7-.1 2.5h.8l.5-5.5h-.8z"></path>
+  </svg>
+</button>

src/layouts/Layout.astro

@@ -24,7 +24,8 @@ interface Props {
 }
 
 const { postTitle, postDescription, postSlug, supportedLangs = [] } = Astro.props
-const { isHome, isPost } = getPageInfo(Astro.url.pathname)
+const { isHome, isPost, getLocalizedPath } = getPageInfo(Astro.url.pathname)
+const localizedHome = getLocalizedPath('/')
 const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
 const mobileFooterMargin = isPost && themeConfig.comment?.waline?.serverURL
@@ -149,5 +150,22 @@ const mobileFooterMargin = isPost && themeConfig.comment?.waline?.serverURL
     document.addEventListener('astro:after-swap', setupThemeToggle)
     </script>
 
+    <!-- Back home >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+    <script define:vars={{ localizedHome }}>
+    function setupBackButton() {
+      document.getElementById('back-button')?.addEventListener('click', () => {
+        if (document.referrer) {
+          window.history.back()
+        }
+        else {
+          window.location.href = localizedHome
+        }
+      })
+    }
+
+    setupBackButton()
+    document.addEventListener('astro:after-swap', setupBackButton)
+    </script>
+
   </body>
 </html>

src/pages/[...posts_slug].astro

@@ -2,6 +2,7 @@
 import type { CollectionEntry } from 'astro:content'
 import Comments from '@/components/Comments/index.astro'
 import PostDate from '@/components/PostDate.astro'
+import BackHome from '@/components/Widgets/BackHome.astro'
 import { allLocales, defaultLocale, moreLocales } from '@/config'
 import { getTagPath } from '@/i18n/path'
 import Layout from '@/layouts/Layout.astro'
@@ -18,6 +19,7 @@ export async function getStaticPaths() {
     throw new Error(`Duplicate post slugs:\n${duplicates.join('\n')}`)
   }
 
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   // Use a Map to store the relationship between post slugs and their supported languages
   // Set is used to store the supported languages for each post
   const slugToLangsMap = posts.reduce((map, post) => {
@@ -43,7 +45,7 @@ export async function getStaticPaths() {
     ]),
   )
 
-  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   type PathItem = {
     params: { posts_slug: string }
     props: { post: any, lang: string, supportedLangs: string[] }
@@ -104,15 +106,19 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   supportedLangs={supportedLangs}
 >
   <article class="heti mb-12.6">
-    <!-- Title -->
-    <h1 class="post-title">
-      <span
-        transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
-        data-disable-transition-on-theme
-      >
-        {post.data.title}
-      </span>
-    </h1>
+    <div class="relative">
+      <!-- Back home -->
+      <BackHome />
+      <!-- Title -->
+      <h1 class="post-title">
+        <span
+          transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
+          data-disable-transition-on-theme
+        >
+          {post.data.title}
+        </span>
+      </h1>
+    </div>
 
     <!-- Date -->
     <div

src/styles/heti.css

@@ -121,7 +121,7 @@
 	font-weight:600
 }
 .heti .post-title {
-  --at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance leading-12';
+  --at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance lg:mbs-0';
 }
 .heti h1 {
   --at-apply: 'mb-6';