log101-dot-dev/src/components/Post.astro

---
import type { CollectionEntry } from "astro:content";

interface Props {
  post: CollectionEntry<"blog">;
  componentType: "short" | "long" | "full";
}

const { post, componentType } = Astro.props;

let showTags, shortSummary, longSummary, fullText;

switch (componentType) {
  case "full":
    fullText = true;
    break;
  case "long":
    longSummary = true;
    showTags = true;
    break;
  case "short":
    shortSummary = true;
    break;
  default:
    break;
}

const postDateFormatted = post.data.date.toLocaleDateString("tr-TR", {
  day: "numeric",
  month: "long",
  year: "numeric",
});
---

<style>
  p {
    margin: 0;
    padding: 0;
  }
  .post {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .post-header {
    display: flex;
    flex-direction: column;
  }

  .post-category {
    color: #2f4f4f;
    letter-spacing: 0.03em;
  }

  .post-title {
    font-size: var(--h4-desktop);
    font-weight: normal;
    margin: 0;
    padding: 0;
  }

  .post-date {
    color: gray;
    font-size: var(--small-desktop);
  }

  .meta {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  .meta-container {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .meta-text {
    font-size: var(--small-desktop);
    color: #6d6d6d;
    padding: 0;
  }

  .meta-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
  }

  .meta-list li {
    padding-top: 0.1rem;
    &:not(:last-child) {
      &:after {
        content: ",\00a0";
      }
    }
  }

  .read-more {
    color: inherit;
    font-size: var(--small-desktop);
  }
</style>

<div class="post">
  <div class="post-header">
    <p class="post-category">{post.data.subcategory}</p>
    <h4 class="post-title">{post.data.title}</h4>
    {shortSummary && <p class="post-summary">{post.data.summary}</p>}
    <div class="meta">
      {
        showTags && (
          <div class="meta-container">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              fill="#6d6d6d"
              viewBox="0 0 256 256"
            >
              <path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
            </svg>
            <ul class="meta-list">
              {post.data.tags.map((tag) => (
                <li class="meta-text">{tag}</li>
              ))}
            </ul>
          </div>
        )
      }

      <div class="meta-container">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          fill="#6d6d6d"
          viewBox="0 0 256 256"
          ><path
            d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
          ></path></svg
        >
        <ul class="meta-list">
          <p class="meta-text">{postDateFormatted}</p>
        </ul>
      </div>
    </div>
  </div>

  {
    longSummary && (
      <>
        <p class="post-long-summary">{post.body.slice(0, 500)}</p>
        {post.body.length > 500 && (
          <a class="read-more" href={`/${post.slug}`}>
            Devamını Oku
          </a>
        )}
      </>
    )
  }
  {fullText && <p class="post-text">{post.body}</p>}
</div>