Expanded transitions

src/components/Posts/PostItem.astro

@@ -12,14 +12,14 @@ const tags = data.tags;
   <div class="post-link">
     <div class="post-text">
       <a href={data.url} class="post-title-link">
-        <h2 class="post-title" transition:name={`post-title-${data.slug}`}>
+        <h2 class="post-title" transition:name={`post-title-${data.postId}`}>
           {data.title}
         </h2>
       </a>
       <a href={data.url} class="post-description">
         {data.description}
       </a>
-      <div class="tags">
+      <div class="tags" transition:name={`post-tags-${data.postId}`}>
         {
           tags.map((tag: string) => (
             <p class="tag">
@@ -40,7 +40,13 @@ const tags = data.tags;
     </div>
 
     <a href={data.url} class="post-image-link">
-      <img src={data.img} alt={data.title} class="post-image" loading="lazy" />
+      <img
+        src={data.img}
+        alt={data.title}
+        class="post-image"
+        loading="lazy"
+        transition:name={`post-image-${data.postId}`}
+      />
     </a>
   </div>
 </li>
@@ -167,7 +173,7 @@ const tags = data.tags;
     text-decoration: none;
     font-weight: 400;
     font-size: 0.92rem;
-    font-style: italic;
+    /* font-style: italic; */
   }
 
   .post-meta-row {
@@ -206,7 +212,7 @@ const tags = data.tags;
     aspect-ratio: 16 / 10;
     object-fit: cover;
     object-position: center;
-    border: 2px #94a0ab dashed;
+    border: 1.5px #94a0ab dashed;
     flex-shrink: 0;
     display: block;
   }
@@ -256,7 +262,7 @@ const tags = data.tags;
     }
 
     .post-image {
-      border: none;
+      /* border: none; */
       grid-area: image;
       width: 100%;
       height: calc(145px * 10 / 16);

src/components/Posts/PostList.astro

@@ -39,6 +39,7 @@ const latestPosts = filteredPosts.slice(0, 7);
           img={post.data.image.url}
           tags={post.data.tags}
           slug={slug}
+          postId={post.id}
         />
       );
     })

src/components/Posts/PostTimeline.astro

@@ -54,7 +54,7 @@ const groupedPosts = filteredPosts.reduce((acc: any[], post: any) => {
                                 >
                                     <h2
                                         class="post-title"
-                                        transition:name={`post-title-${slug}`}
+                                        transition:name={`post-title-${post.id}`}
                                     >
                                         {post.data.title}
                                     </h2>
@@ -147,7 +147,8 @@ const groupedPosts = filteredPosts.reduce((acc: any[], post: any) => {
         margin: 0;
         font-size: 0.88rem;
         color: #555;
-        font-style: italic;
+        font-weight: 400;
+        /* font-style: italic; */
         line-height: 1.5;
         overflow-wrap: anywhere;
         word-break: break-word;

src/components/ThemeIcon.astro

@@ -70,15 +70,15 @@ const switchHref = "/" + segments.join("/");
     }
 
     .lang-switch {
-        color: black; !important
-        font-weight: 700; !important
-        font-size: 0.95rem; !important
-        text-decoration: none; !important
-        line-height: 1; !important
+        color: black;
+        font-weight: 700;
+        font-size: 0.95rem;
+        text-decoration: none;
+        line-height: 1;
     }
 
     .lang-switch:hover {
-        text-decoration: underline; !important
+        text-decoration: underline;
     }
 
     .sun {

src/layouts/MarkdownPostLayout.astro

@@ -1,10 +1,11 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
 import Remark42Embed from "@/components/Remark42Embed.astro";
+import { fade } from "astro:transitions";
 import { getLangFromUrl, getTranslations } from "@/i18n";
 import "@/styles/global.css";
 
-const { frontmatter, lang, postId } = Astro.props;
+const { frontmatter, lang, slug, postId } = Astro.props;
 const comments = lang === "zh" ? "评论区" : "comments";
 const t = getTranslations(lang);
 ---
@@ -39,14 +40,18 @@ const t = getTranslations(lang);
   <article class="post-article">
     <div class="post-header">
       <div class="post-meta">
-        <h1 class="post-title" transition:name={`post-title-${postId}`} >{frontmatter.title}</h1>
-        <p class="description"><em>{frontmatter.description}</em></p>
+        <h1 class="post-title" transition:name={`post-title-${postId}`}>
+          {frontmatter.title}
+        </h1>
+        <p class="description">
+          <em>{frontmatter.description}</em>
+        </p>
         <p class="meta-line">
           {t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()}
         </p>
         <p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
 
-        <div class="tags">
+        <div class="tags" transition:name={`post-tags-${postId}`}>
           {
             frontmatter.tags.map((tag: string) => (
               <p class="tag">
@@ -61,17 +66,18 @@ const t = getTranslations(lang);
         src={frontmatter.image.url}
         alt={frontmatter.image.alt}
         class="post-cover"
+        transition:name={`post-image-${postId}`}
       />
     </div>
 
     <div class="post-divider"></div>
 
-    <div class="post-content">
+    <div class="post-content" transition:animate={fade({ duration: "0.2s" })}>
       <slot />
     </div>
 
     <h2>{comments}</h2>
-    <Remark42Embed slug={postId} />
+    <Remark42Embed slug={slug} />
   </article>
 </BaseLayout>
 
@@ -187,7 +193,7 @@ const t = getTranslations(lang);
     transition:
       opacity 0.2s ease,
       transform 0.27s ease,
-			visibility 0.2s ease;
+      visibility 0.2s ease,
       box-shadow 0.2s ease,
       background 0.2s ease,
       color 0.2s ease;
@@ -284,10 +290,11 @@ const t = getTranslations(lang);
   .post-cover {
     width: 300px;
     height: auto;
-    aspect-ratio: 16 / 9;
+    aspect-ratio: 16 / 10;
     object-fit: cover;
     object-position: center;
-    border-radius: 0.4rem;
+    /* border-radius: 0.4rem; */
+    border: 1.5px #94a0ab dashed;
     display: block;
   }
 
@@ -346,6 +353,7 @@ const t = getTranslations(lang);
     .post-cover {
       width: 100%;
       max-width: 100%;
+      aspect-ratio: 16 / 9;
     }
   }
 </style>

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

@@ -28,6 +28,11 @@ const [postLang, ...slugParts] = post.id.split("/");
 const slug = slugParts.join("/");
 ---
 
-<MarkdownPostLayout frontmatter={post.data} lang={lang} postId={slug}>
+<MarkdownPostLayout
+    frontmatter={post.data}
+    lang={lang}
+    slug={slug}
+    postId={post.id}
+>
     <Content />
 </MarkdownPostLayout>

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

@@ -34,7 +34,7 @@ const t = getTranslations(lang);
 <BaseLayout pageTitle={String(tag)}>
   <p class="tag-heading">
     {lang === "zh" ? "带有标签" : "Posts tagged with"}{" "}
-    <span class="tag-chip">{tag}</span>
+    <span class="tag-chip" transition:name={`post-tags-${tag}`}>{tag}</span>
     {lang === "zh" ? "的文章" : ""}
   </p>
   <ul>
@@ -54,6 +54,7 @@ const t = getTranslations(lang);
             date={formattedDate}
             img={post.data.image.url}
             tags={post.data.tags}
+            postId={post.id}
           />
         );
       })

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

@@ -15,14 +15,14 @@ const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())];
 const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
 ---
 
-<BaseLayout pageTitle=`${pageTitle} - ${t.banner.title}` `>
+<BaseLayout pageTitle=`${pageTitle} - ${t.banner.title}`>
     <h1>{t.tags.title}</h1>
     <p>{t.tags.description}</p>
 
     <div class="tags">
         {
             tags.map((tag) => (
-                <p class="tag">
+                <p class="tag" transition:name={`post-tags-${tag}`}>
                     <a href={`/${lang}/tags/${tag}`}>{tag}</a>
                 </p>
             ))