---
const { id, cover, coverAlt, title, description, publicationDate, headings } = Astro.props;

import { Image } from "astro:assets";
import PageLayout from "./PageLayout.astro";
import TableOfContents from "../components/TableOfContents.svelte";
import PublicationDate from "../components/PublicationDate.astro";
---

<PageLayout {title} {description} ogImage={cover.src} >
  <TableOfContents slot="nav" client:only="svelte" {headings} />
  <Image src={cover} alt={coverAlt} slot="header-before" />  
  <Fragment slot="header">
    <p>
      Published on
      <PublicationDate {publicationDate} />
    </p>
    <a
      href={`https://github.com/thiloho/aurora/edit/main/src/content/blog/${id}`}
      >Edit this page</a
    >
  </Fragment>
  <slot />
</PageLayout>
