feat: add post description on desktop home page

src/components/MainHeader.astro

@@ -18,7 +18,7 @@ const marginBottom = {
   }[titleGap] || 'mb-3.125'
 ---
 
-<header class="mb-10.625 lg:fixed">
+<header class="mb-10.5 lg:fixed">
   <h1 class={`${marginBottom} text-8 c-primary font-bold font-title lg:(text-9 w-full) w-75%`}>
     <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div

src/components/MobileHeader.astro

@@ -18,7 +18,7 @@ const marginBottom = {
   }[titleGap] || 'mb-2.875'
 ---
 
-<header class="mb-10.625 lg:hidden">
+<header class="mb-10.5 lg:hidden">
   <h3 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
     <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div

src/components/Navbar.astro

@@ -34,7 +34,7 @@ const navItems = [
 ---
 
 <nav
-  class="mb-10.625 text-3.6 font-semibold leading-8.75 font-navbar"
+  class="mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar"
   lg="fixed bottom-50 text-4 leading-9.72"
 >
   <ul>

src/components/PostList.astro

@@ -1,16 +1,10 @@
 ---
+import type { CollectionEntry } from 'astro:content'
 import PostDate from '@/components/PostDate.astro'
 import { defaultLocale } from '@/config'
+import { generateDescription } from '@/utils/description'
 
-interface Post {
-  data: {
-    title: string
-    abbrlink?: string
-    published: Date
-  }
-  // URL path automatically generated by Astro based on the filename
-  slug?: string
-  // Optional for robustness in case render() fails or plugin isn't applied
+type Post = CollectionEntry<'posts'> & {
   remarkPluginFrontmatter?: {
     minutes?: number
   }
@@ -32,11 +26,12 @@ function getPostPath(post: Post) {
 ---
 <ul>
   {posts.map(post => (
-    <li class="mt-4.375">
+    <li class="mb-5.5 lg:mb-7.5">
 
       {/* post title */}
       <a
         class="hover:c-primary"
+        lg="font-medium text-4.5"
         href={getPostPath(post)}
         transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
         data-disable-transition-on-theme
@@ -46,7 +41,7 @@ function getPostPath(post: Post) {
 
       {/* mobile post time */}
       <div
-        class="mb-5.625 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
       >
@@ -58,7 +53,7 @@ function getPostPath(post: Post) {
 
       {/* desktop post time */}
       <div
-        class="mb-5.625 hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)"
+        class="hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)"
         transition:name={`time-${post.data.abbrlink || post.slug}`}
         data-disable-transition-on-theme
       >
@@ -68,6 +63,14 @@ function getPostPath(post: Post) {
         />
       </div>
 
+      {/* desktop post description */}
+      <div
+        class="heti hidden"
+        lg="mt-2 block"
+      >
+        <p>{generateDescription(post)}</p>
+      </div>
+
     </li>
   ))}
 </ul>

src/pages/[...about].astro

@@ -40,7 +40,7 @@ const { Content } = aboutEntry ? await aboutEntry.render() : { Content: null }
 
 <Layout>
   <div class="uno-decorative-line"></div>
-  <div class="heti mt-4.375">
+  <div class="heti">
     {Content && <Content />}
   </div>
 </Layout>

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

@@ -40,14 +40,14 @@ const postsByYear = await getPostsByYear(lang)
   <main>
     <!-- Pinned Posts -->
     {pinnedPosts.length > 0 && (
-      <section class="mb-7.5">
+      <section class="mb-7.5 lg:mb-9.5">
         <div class="uno-decorative-line"></div>
         <PostList posts={pinnedPosts} lang={lang} />
       </section>
     )}
     <!-- Regular Posts -->
     {[...postsByYear.entries()].map(([_year, posts]) => (
-      <section class="mb-7.5">
+      <section class="mb-7.5 lg:mb-9.5">
         <div class="uno-decorative-line"></div>
         <PostList posts={posts} lang={lang} />
       </section>

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

@@ -115,6 +115,8 @@ function getTagUrl(tagName: string): string {
   postSlug={post.slug}
   supportedLangs={supportedLangs}
 >
+
+  <!-- Title -->
   <article class="heti mb-12.6">
     <h1 class="post-title">
       <span
@@ -125,12 +127,12 @@ function getTagUrl(tagName: string): string {
       </span>
     </h1>
 
+    <!-- Date -->
     <div
       class="mb-17 block c-primary font-time"
       transition:name={`time-${post.data.abbrlink || post.slug}-${lang}`}
       data-disable-transition-on-theme
     >
-      <!-- published and updated time -->
       <PostDate
         date={post.data.published}
         updatedDate={post.data.updated}

src/pages/[...tags_tag].astro

@@ -77,7 +77,7 @@ function getTagUrl(tagName: string): string {
     ))}
   </div>
 
-  <div class="mt-10.625">
+  <div class="mt-10.5">
     <PostList posts={posts} lang={lang} />
   </div>
 </Layout>

uno.config.ts

@@ -34,8 +34,8 @@ export default defineConfig({
   },
   shortcuts: {
     'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
-    'uno-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25',
-    'uno-tags-wrapper': 'mt-4.375 w-95% flex flex-wrap gap-3',
+    'uno-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25 mb-4.5',
+    'uno-tags-wrapper': 'w-95% flex flex-wrap gap-x-3 gap-y-3.2',
   },
   rules: [
     ['scrollbar-hidden', {