SanYeCao-blog/src/components/Posts/PostItem.astro

---
import "@/styles/global.css";
import Remark42Counter from "@/components/Remark42Counter.astro";
import { getLangFromUrl } from "@/i18n";

const lang = getLangFromUrl(Astro.url);
const data = Astro.props;
const tags = data.tags;
---

<li class="post-card">
  <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.postId}`}>
          {data.title}
        </h2>
      </a>
      <a href={data.url} class="post-description">
        {data.description}
      </a>
      <div class="tags" transition:name={`post-tags-${data.postId}`}>
        {
          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>
        <span class="post-stats">
          <span class="post-stat">
            💬 <Remark42Counter url={data.postPath} />
          </span>
        </span>
      </div>
    </div>

    <a href={data.url} class="post-image-link">
      <img
        src={data.img}
        alt={data.title}
        class="post-image"
        loading="lazy"
        transition:name={`post-image-${data.postId}`}
      />
    </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;
    padding-left: 0;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
  }

  .post-link {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    text-decoration: none;
  }

  .post-text {
    flex: 1;
    min-width: 0;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1.6;
    min-height: calc(1.6em * 4);
  }

  .post-title-link {
    text-decoration: none;
    display: block;
  }

  .post-title {
    margin: 0;
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      "Open Sans",
      "Helvetica Neue",
      sans-serif;
    font-weight: 500;
    font-size: 1.34rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .post-description {
    color: black;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.92rem;
    /* font-style: italic; */
  }

  .post-meta-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
  }

  .post-date {
    color: gray;
    font-size: 0.95rem;
    white-space: nowrap;
    line-height: 1.6;
  }

  .post-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #6f8090;
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: nowrap;
  }

  .post-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }

  .post-image {
    width: calc((1.6em * 4) * 16 / 10);
    height: calc(1.6em * 4);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    border: 1.5px #94a0ab dashed;
    flex-shrink: 0;
    display: block;
  }

  :global(.dark) .post-description {
    color: #e6e6e6;
  }

  :global(.dark) .post-stats {
    color: #aab7c4;
  }

  @media (max-width: 600px) {
    .post-link {
      display: grid;
      grid-template-columns: 1fr 145px;
      grid-template-areas:
        "title title"
        "desc image"
        "tags image"
        "meta image";
      column-gap: 0.75rem;
      row-gap: 0.2rem;
      align-items: start;
    }

    .post-text {
      display: contents;
      min-height: auto;
    }

    .post-title-link {
      grid-area: title;
    }

    .post-title {
      -webkit-line-clamp: 2;
    }

    .post-description {
      grid-area: desc;
    }

    .post-meta-row {
      grid-area: meta;
      gap: 0.7rem;
    }

    .post-image {
      /* border: none; */
      grid-area: image;
      width: 100%;
      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>