blog/src/pages/posts/[slug].astro

---
import Comments from '@/components/Comments/index.astro'
import PostTime from '@/components/PostTime.astro'
import Layout from '@/layouts/Layout.astro'
import { checkSlugDuplication } from '@/utils/content'
import { generateDescription } from '@/utils/description'
import { generatePostPaths } from '@/utils/i18n/route'
import { getCollection } from 'astro:content'

export async function getStaticPaths() {
  const posts = await getCollection('posts')

  const duplicates = await checkSlugDuplication(posts)
  if (duplicates.length > 0) {
    throw new Error(`Slug conflicts found:\n${duplicates.join('\n')}`)
  }

  return generatePostPaths(posts)
}

const { post } = Astro.props
const description = generateDescription(post)
const { Content, remarkPluginFrontmatter } = await post.render()
---

<Layout
  postTitle={post.data.title}
  postDescription={description}
>
  <article class="heti mb-12.6">
    <h1 class="post-title">
      <span
        transition:name={`post-${post.data.abbrlink || post.slug}`}
        data-disable-transition-on-theme
      >
        {post.data.title}
      </span>
    </h1>

    <div
      class="mb-17 block c-primary font-time"
      transition:name={`time-${post.data.abbrlink || post.slug}`}
      data-disable-transition-on-theme
    >
      <!-- published and updated time -->
      <PostTime
        date={post.data.published}
        updatedDate={post.data.updated}
        minutes={remarkPluginFrontmatter.minutes}
      />
    </div>
    <Content />
  </article>

  <!-- Tags -->
  {post.data.tags && post.data.tags.length > 0 && (
    <div class="uno-decorative-line"></div>
    <div class="uno-tags-wrapper">
      {post.data.tags.map(tag => (
        <a
          href={`/tags/${tag}/`}
          class="uno-tags-style"
        >
          {tag}
        </a>
      ))}
    </div>
  )}

  <Comments />
</Layout>