BlogContent.astro

---
import {
  getEntries,
  type CollectionEntry,
  getEntry,
  render,
} from 'astro:content'
import TagSmallList from './tag/TagSmallList.astro'
import AuthorIcon from './icon/AuthorIcon.astro'
import { formatDate } from '@/utils/format-date'
import '@/styles/remark-link-card.css'
interface Props {
  blog: CollectionEntry<'blogs'>
}

const { blog } = Astro.props
const { data: blogMeta } = (await getEntry({
  collection: 'blog-metas',
  id: blog.id,
})) ?? { data: { postDate: new Date(), updateDate: undefined } }
const tags = await getEntries(blog.data.tags)
const author = await getEntry(blog.data.author)
const { Content } = await render(blog)
---

<div class="flex flex-col items-center py-4">
  <h1
    class="p-3 text-center text-3xl font-bold md:text-4xl"
    data-pagefind-meta="title"
    data-pagefind-body
  >
    {blog.data.title}
  </h1>
  <article
    class="my-10 w-full max-w-padded-container bg-white p-8 md:rounded-2xl"
  >
    <div class="mb-1 pb-1 text-lg">
      <a
        class="flex items-center gap-2 hover:underline"
        href={`/blog/authors/${author.id}/`}
        ><AuthorIcon {...author.data} size={28} />{author.data.name}</a
      >
    </div>
    <TagSmallList blogCategory={blog.data.category} tags={tags} />
    <div class="flex gap-3 py-2 text-sm text-gray-700">
      {
        blogMeta.updateDate && (
          <div>
            最終更新日：
            <time datetime={blogMeta.updateDate.toISOString()}>
              {formatDate(blogMeta.updateDate)}
            </time>
          </div>
        )
      }
      <div>
        投稿日：<time datetime={blogMeta.postDate.toISOString()}
          >{formatDate(blogMeta.postDate)}</time
        >
      </div>
    </div>
    <div class="prose w-full max-w-none break-words pt-6" data-pagefind-body>
      <Content />
    </div>
  </article>
</div>

<style is:global>
  @tailwind components;
  @tailwind utilities;

  @layer components {
    .prose code:not(pre > *) {
      @apply rounded bg-gray-200 px-1 font-normal;
    }
    .prose code:not(pre > *)::after {
      @apply content-none;
    }
    .prose code:not(pre > *)::before {
      @apply content-none;
    }

    .prose > *:where(h1, h2) {
      @apply border-b-2;
    }

    .prose > table {
      @apply block w-full overflow-x-auto whitespace-nowrap;
    }
  }
</style>