AstralHalo/src/pages/posts/[article].astro

---
import { articleConfig, commentConfig } from '@/config';
import Comment from '@components/Comment.astro';
import License from '@components/misc/License.astro';
import PostInfo from '@components/misc/PostInfo.astro';
import Markdown from '@components/utils/Markdown.astro';
import ProfileCard from '@components/widgets/ProfileCard.astro';
import TOC from '@components/widgets/TOC.astro';
import GridLayout from '@layouts/GridLayout.astro';
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const articles = await getCollection('posts');
  return articles.map((article) => ({
    params: { article: article.data.slug },
    props: { article },
  }));
}

const { article } = Astro.props;
const { Content, headings, remarkPluginFrontmatter } = await render(article);

const description = article.data.description || remarkPluginFrontmatter.excerpt;
---

<GridLayout title={article.data.title} description={description}>
  <Fragment slot="header-content">
    <PostInfo
      title={article.data.title}
      publishedAt={article.data.published}
      category={article.data.category}
      tags={article.data.tags}
      wordsCount={remarkPluginFrontmatter.words}
      readingTime={remarkPluginFrontmatter.minutes}
      class="mx-2 mt-4"
    />
  </Fragment>
  <div class="card card-bordered border-base-300 rounded-xl border-2 px-6 py-4">
    <Markdown>
      <Content />
    </Markdown>
    <License time={article.data.published} />
    {article.data.comment && commentConfig.enable && <Comment />}
  </div>
  <Fragment slot="aside-fixed">
    <ProfileCard />
  </Fragment>
  <Fragment slot="aside-sticky">
    {articleConfig.toc && <TOC headings={headings} />}
  </Fragment>
</GridLayout>