---
import BaseHead from "../components/BaseHead.astro"
import Header from "../components/Header.astro"
import Footer from "../components/Footer.astro"

import { formatDate } from "../utils"
import { SITE_TITLE } from "../consts"
const { frontmatter } = Astro.props
const type = frontmatter.tags?.[0] ?? "默认"
const { pubDate, title, description, featured } = frontmatter
const dateFormatted = formatDate(pubDate)
---

  <html
    lang="zh-CN"
    dir="ltr"
    class="js no-touch progressive-image no-reduced-motion progressive"
  >
    <head>
      <BaseHead
        title={`${title} - ${SITE_TITLE}`}
        description={description}
        image={frontmatter.cover?.square}
      />
    </head>
    <body
      class:list={[
        "page-article",
        { "theme-dark": frontmatter.theme === "dark" },
      ]}
    >
      <Header />
      <main id="main" class="main">
        <section>
          <article class="article">
            <div
              class:list={[
                { "featured-header": featured, "article-header": !featured },
              ]}
            >
              <div class="category component">
                <div class="component-content">
                  <div class="category-eyebrow">
                    <span class="category-eyebrow__category category_original">{type}
                    </span
                  >
                    <span class="category-eyebrow__date">{dateFormatted}</span>
                  </div>
                </div>
              </div>
              <div class="page-title component">
                <div class="component-content">
                  <h1 class="hero-headline">{title}</h1>
                </div>
              </div>
              <div
                class:list={[
                  { "featured-subhead": featured, "article-subhead": !featured },
                  "component",
                ]}
              >
                <div class="component-content">{description}</div>
              </div>

              <div class:list={["tags-sheet component"]}>
                <div class="component-content">
                  {
                  frontmatter.tags?.map((tag) => {
                    return (
                      <a href={`/tags/${tag}`} class="tag">
                        {tag}
                      </a>
                    )
                  })
                }
                </div>
              </div>
            </div>
            <slot />
            <div class="component">
              <div class="component-content">
                <div class="article-copyright">
                  <a
                    class="content"
                    href="https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh"
                    target="_blank"
                  >版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
                  </a
                >
                  <p class="content">
                    作者： {frontmatter.author} 发表日期：{dateFormatted}
                  </p>
                </div>
              </div>
            </div>
          </article>
        </section>
      </main>
      <Footer />
      <script is:inline>
      var script = document.createElement("script")
      script.src = "/static/js/initPost.js"
      document.head.appendChild(script)
      </script>
    </body>
  </html>
