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

---
import PageLayout from "../../layouts/PageLayout.astro";
// @ts-ignore
import Media from "../../components/posts/Media";

import { POST_TYPES } from "../../scripts/consts";
import { graphQuery } from "../../scripts/requests";
import { DocumentRenderer } from "@keystone-6/document-renderer";

export const prerender = false;

const { slug } = Astro.params;

const { post } = (
  await graphQuery(
    `query Query($where: PostWhereUniqueInput!) {
  post(where: $where) {
    slug
    type
    title
    description
    assets {
      caption
      url
      type
    }
    cover {
      image {
        url
      }
    }
    content {
      document
    }
    categories {
      slug
      name
    }
    tags {
      slug
      name
    }
    createdAt
  }
}`,
    {
      where: { slug },
    }
  )
).data;
---

<PageLayout title={post.title}>
  <div class="wrapper">
    <div class="card w-full shadow-xl">
      {
        post.cover && (
          <figure>
            <img src={post.cover.image.url} alt={post.title} />
          </figure>
        )
      }
      <div class="card-body">
        <h2 class="card-title">{post.title}</h2>
        <p class="description">{post.description ?? "No description"}</p>
        <div class="divider"></div>

        {
          post.assets?.length > 0 && (
            <div class="mb-5">
              <Media sources={post.assets} />
            </div>
          )
        }

        <div class="prose max-w-none">
          <DocumentRenderer document={post.content.document} />
        </div>
      </div>
    </div>

    <div class="h-fit sticky top-header">
      <div class="card shadow-xl">
        <div class="card-body">
          <div class="gap-2 text-sm metadata description">
            <div>
              <div>作者</div>
              <div>{post.author?.name ?? "佚名"}</div>
            </div>
            <div>
              <div>类型</div>
              <div class="text-accent">
                {POST_TYPES[post.type as unknown as string]}
              </div>
            </div>
            <div>
              <div>分类</div>
              <div class="flex gap-1">
                {
                  post.categories?.map((category: any) => (
                    <a
                      href={`/categories/${category.slug}`}
                      class="link link-primary"
                    >
                      {category.name}
                    </a>
                  ))
                }
              </div>
            </div>
            <div>
              <div>标签</div>
              <div class="flex gap-1">
                {
                  post.tags?.map((tag: any) => (
                    <a href={`/tags/${tag.slug}`} class="link link-secondary">
                      {tag.name}
                    </a>
                  ))
                }
              </div>
            </div>
            <div>
              <div>发布于</div>
              <div>{new Date(post.createdAt).toLocaleString()}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</PageLayout>

<style>
  .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .description {
    color: oklch(var(--bc) / 0.8);
  }

  .metadata {
    display: flex;
    flex-direction: column;

    transition: color 0.3s;
  }

  @media (min-width: 768px) {
    .wrapper {
      grid-template-columns: 2fr 1fr;
    }
  }
</style>