SanYeCao-blog/src/layouts/MarkdownPostLayout.astro

---
import BaseLayout from "./BaseLayout.astro";
import Giscus from "@/components/Giscus.astro";
import { getLangFromUrl, getTranslations } from "@/i18n";
import "@/styles/global.css";

const { frontmatter } = Astro.props;
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
---

<BaseLayout pageTitle={frontmatter.title}>
  <div class="post-header">
    <div class="post-meta">
      <h1 class="post-title">{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">
        {
          frontmatter.tags.map((tag: string) => (
            <p class="tag">
              <a href={`/${lang}/tags/${tag}`}>{tag}</a>
            </p>
          ))
        }
      </div>
    </div>

    <img
      src={frontmatter.image.url}
      alt={frontmatter.image.alt}
      class="post-cover"
    />
  </div>

  <slot />

  <Giscus />
</BaseLayout>

<style>
  a {
    color: var(--post-link-color);
  }

  .post-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .post-meta {
    min-width: 0;
  }

  .post-title {
    margin: 0 0 0.5rem 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .description {
    margin: 0 0 0.7rem 0;
    opacity: 0.9;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .meta-line {
    margin: 0.3rem 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .post-cover {
    width: 300px;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 0.4rem;
    display: block;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
    min-width: 0;
  }

  .tag {
    margin: 0;
    padding: 0.22em 0.65em;
    font-size: 0.88rem;
    line-height: 1.2;
    border: 1px dashed #8b6b4a;
    border-radius: 0;
    background-color: transparent;
    max-width: 100%;
  }

  .tag a {
    color: #6f4e37;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .tag a:hover {
    text-decoration: underline;
  }

  :global(.dark) .tag {
    border-color: #d8c7a1;
  }

  :global(.dark) .tag a {
    color: #e6d8b8;
  }

  @media (max-width: 560px) {
    .post-header {
      grid-template-columns: 1fr;
    }

    .post-cover {
      width: 100%;
      max-width: 100%;
    }
  }
</style>