adjust home

src/blog/post-2.md

@@ -0,0 +1,26 @@
+---
+title: 'My Second Blog Post'
+pubDate: 2022-07-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+    url: 'https://docs.astro.build/assets/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+tags: ["astro", "blogging", "learning in public", "Hello"]
+---
+
+Published on: 2022-07-01
+
+Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
+
+## What I've accomplished
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

src/components/Posts/PostItem.astro

@@ -1,23 +1,83 @@
 ---
-const data=Astro.props
+const data = Astro.props;
 ---
-<li>
+
-        <a href={data.url} class="post-item">
+<li class="post-card">
-          <span>{data.title}</span>
+  <a href={data.url} class="post-link">
-          <span>{data.date}</span>
+    <div class="post-text">
-        </a>
+      <span class="post-title">{data.title}</span>
+      <span class="post-date">{data.date}</span>
+    </div>
+
+    <img src={data.img} alt={data.title} class="post-image" />
+  </a>
 </li>
 
+<div class="section-divider"></div>
+
 <style>
-  .post-item {
+  .post-card {
+    list-style: none;
+    margin: 0 0 1rem 0;
+    padding-left: 0;
+  }
+
+  .post-link {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    gap: 1rem;
     width: 100%;
     text-decoration: none;
   }
 
-  .post-item span:last-child {
+  .post-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    line-height: 1.6;
+    min-height: calc(1.6em * 4);
+  }
+
+  .post-title {
+    color: inherit;
+    font-weight: 700;
+    font-size: 1.05rem;
+    line-height: 1.6;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .post-date {
+    color: gray;
+    font-size: 0.95rem;
     white-space: nowrap;
+    line-height: 1.6;
+  }
+
+  .post-image {
+    width: calc((1.6em * 4) * 16 / 9);
+    height: calc(1.6em * 4);
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 0.5rem;
+    flex-shrink: 0;
+    display: block;
+  }
+
+  @media (max-width: 640px) {
+    .post-link {
+      gap: 0.75rem;
     }
+
+    .post-image {
+      width: 120px;
+      height: calc(120px * 9 / 16);
+    }
+  }
 </style>

src/components/Posts/PostList.astro

@@ -20,8 +20,16 @@ const allPosts = await getCollection("blog");
           url={`/${lang}/posts/${post.id}/`}
           title={post.data.title}
           date={formattedDate}
+          img={post.data.image.url}
         />
       );
     })
   }
 </ul>
+
+<style>
+  ul {
+    margin: 0;
+    padding-left: 0;
+  }
+</style>

src/i18n/zh.ts

@@ -1,6 +1,6 @@
 export default {
     banner: {
-        title: "Cloverta 的博客",
+        title: "Cloverta的博客",
         subtitle: ""
     },
     nav: {

src/pages/[lang]/index.astro

@@ -10,13 +10,30 @@ export function getStaticPaths() {
 
 const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
+const headerTitle = lang === "zh" ? "Cloverta的博客" : "Cloverta's blog";
 const pageTitle = t.home.title;
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={headerTitle}>
   <h1>{pageTitle}</h1>
   <div class="content">
     {t.home.content.map((line: string) => <p set:html={line} />)}
   </div>
+
+  <div class="section-divider"></div>
+
   <PostList />
 </BaseLayout>
+
+<style>
+  .section-divider {
+    height: 1px;
+    background: #cdd2d8;
+    margin: 1.5rem 0;
+    opacity: 0.8;
+  }
+
+  :global(.dark) .section-divider {
+    background: #7f8b97;
+  }
+</style>