Merge pull request #11 from ClovertaTheTrilobita/dev

Added tags to postItem

src/components/Navigation.astro

@@ -143,7 +143,7 @@ const t = getTranslations(lang);
         color: white;
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 700px) {
         .site-nav-desktop {
             display: none;
         }

src/components/Posts/PostItem.astro

@@ -1,14 +1,32 @@
 ---
 import "@/styles/global.css";
 import Remark42Count from "@/components/remark42-counter.svelte";
+import { getLangFromUrl } from "@/i18n";
+
+const lang = getLangFromUrl(Astro.url);
 const data = Astro.props;
+const tags = data.tags;
 ---
 
 <li class="post-card">
-  <a href={data.url} class="post-link" data-astro-reload>
+  <div class="post-link">
     <div class="post-text">
-      <span class="post-title">{data.title}</span>
+      <a href={data.url} class="post-title">
-      <span class="post-description">{data.description}</span>
+        {data.title}
+      </a>
+
+      <a href={data.url} class="post-description">
+        {data.description}
+      </a>
+      <div class="tags">
+        {
+          tags.map((tag: string) => (
+            <p class="tag">
+              <a href={`/${lang}/tags/${tag}`}>{tag}</a>
+            </p>
+          ))
+        }
+      </div>
 
       <div class="post-meta-row">
         <span class="post-date">{data.date}</span>
@@ -20,13 +38,73 @@ const data = Astro.props;
       </div>
     </div>
 
+    <a href={data.url} class="post-image-link">
       <img src={data.img} alt={data.title} class="post-image" loading="lazy" />
     </a>
+  </div>
 </li>
 
 <div class="section-divider"></div>
 
 <style>
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .tag {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      "Open Sans",
+      "Helvetica Neue",
+      sans-serif;
+
+    margin: 0;
+    padding: 0.22em 0.65em;
+    font-size: 1rem;
+    line-height: 1.2;
+    border: 1px dashed #8b6b4a;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  .tag a {
+    color: #6f4e37;
+    text-decoration: none;
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+
+  .tag a:hover {
+    text-decoration: underline;
+  }
+
+  :global(.dark) .tag {
+    border-color: #d8c7a1;
+  }
+
+  :global(.dark) .tag a {
+    color: #e6d8b8;
+  }
+
+  :global(.dark) .tag {
+    border-color: #d8c7a1;
+  }
+
+  :global(.dark) .tag a {
+    color: #e6d8b8;
+  }
+
   .post-card {
     list-style: none;
     margin: 0 0 1rem 0;
@@ -47,6 +125,7 @@ const data = Astro.props;
   .post-text {
     flex: 1;
     min-width: 0;
+    max-width: 40rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -55,32 +134,21 @@ const data = Astro.props;
   }
 
   .post-title {
-    font-family:
-      system-ui,
-      sans-serif,
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      Oxygen,
-      Ubuntu,
-      Cantarell,
-      "Open Sans",
-      "Helvetica Neue";
-    color: inherit;
-    font-style: normal;
     font-weight: 500;
     font-size: 1.34rem;
     line-height: 1.6;
     display: -webkit-box;
     -webkit-line-clamp: 3;
+    color:;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
 
   .post-description {
     color: black;
+    text-decoration: none;
     font-weight: 400;
+    font-size: 0.92rem;
     font-style: italic;
   }
 
@@ -115,12 +183,12 @@ const data = Astro.props;
   }
 
   .post-image {
-    width: calc((1.6em * 4) * 16 / 9);
+    width: calc((1.6em * 4) * 16 / 10);
     height: calc(1.6em * 4);
-    aspect-ratio: 16 / 9;
+    aspect-ratio: 16 / 10;
     object-fit: cover;
     object-position: center;
-    border-radius: 0.5rem;
+    border: 2px #94a0ab dashed;
     flex-shrink: 0;
     display: block;
   }
@@ -133,13 +201,14 @@ const data = Astro.props;
     color: #aab7c4;
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: 600px) {
     .post-link {
       display: grid;
-      grid-template-columns: 1fr 120px;
+      grid-template-columns: 1fr 145px;
       grid-template-areas:
         "title title"
         "desc image"
+        "tags image"
         "meta image";
       column-gap: 0.75rem;
       row-gap: 0.2rem;
@@ -166,9 +235,19 @@ const data = Astro.props;
     }
 
     .post-image {
+      border: none;
       grid-area: image;
-      width: 120px;
+      width: 100%;
-      height: calc(120px * 9 / 16);
+      height: calc(145px * 10 / 16);
+      align-self: center;
+    }
+
+    .post-image-link {
+      grid-area: image;
+      align-self: center;
+      display: block;
+      width: 145px;
+      text-decoration: none;
     }
   }
 </style>

src/components/Posts/PostList.astro

@@ -37,6 +37,7 @@ const latestPosts = filteredPosts.slice(0, 5);
           description={post.data.description}
           date={formattedDate}
           img={post.data.image.url}
+          tags={post.data.tags}
         />
       );
     })

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

@@ -53,6 +53,7 @@ const t = getTranslations(lang);
             title={post.data.title}
             date={formattedDate}
             img={post.data.image.url}
+            tags={post.data.tags}
           />
         );
       })

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

@@ -39,6 +39,19 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
     }
 
     .tag {
+        font-family:
+            system-ui,
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            Roboto,
+            Oxygen,
+            Ubuntu,
+            Cantarell,
+            "Open Sans",
+            "Helvetica Neue",
+            sans-serif;
+
         margin: 0;
         padding: 0.22em 0.65em;
         font-size: 1rem;
@@ -51,6 +64,7 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
     .tag a {
         color: #6f4e37;
         text-decoration: none;
+        font-weight: 500;
     }
 
     .tag a:hover {