---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Tag from "@components/Tag.astro";
import Datetime from "@components/Datetime.astro";
import type { CollectionEntry } from "astro:content";
import { slugifyStr } from "@utils/slugify";
import ShareLinks from "@components/ShareLinks.astro";
import { SITE } from "@config";
import { Icon } from 'astro-icon/components'
import { Level, Button } from "react-bulma-components"

export interface Props {
  post: CollectionEntry<"blog">;
}

const { post } = Astro.props;

const {
  title,
  author,
  description,
  ogImage,
  canonicalURL,
  pubDatetime,
  modDatetime,
  tags,
} = post.data;

const { Content } = await post.render();

const ogImageUrl = typeof ogImage === "string" ? ogImage : ogImage?.src;
const ogUrl = new URL(
  ogImageUrl ?? `/assets/og.webp`,
  Astro.url.origin
).href;

const layoutProps = {
  title: `${title} | ${SITE.title}`,
  author,
  description,
  pubDatetime,
  modDatetime,
  canonicalURL,
  ogImage: ogUrl,
  scrollSmooth: true,
};
---

<Layout {...layoutProps}>
  <Header />

  <main id="main-content">

    <h1 transition:name={slugifyStr(title)} class="title">{title}</h1>


        <Datetime
          pubDatetime={pubDatetime}
          modDatetime={modDatetime}
          className="my-1"
        />

    {
      ogImage && <img src={ogImageUrl} alt="Cover image">
    }

    <ul class="mb-4">
      {
        tags.map(tag => <Tag tag={slugifyStr(tag)} />)
      }
    </ul>

    <article id="article" role="article">
      <div class="content">
        <Content />
      </div>
    </article>

    <Level className="my-4" breakpoint="mobile">
      <Level.Side>
        <Button id="back-to-top">
          <Icon name="fa6-solid:arrow-up" />
          <span class="ml-2">Back to Top</span>
        </Button>
      </Level.Side>
      <Level.Side align="right">
        <ShareLinks />
      </Level.Side>
    </Level>

    {
      SITE.issoLocation != "" && (
        <p><span class="is-size-3"><b>Comments</b></span> (<a target="_blank" rel="noopener noreferrer" href="/pages/blog-legal#comments-rules">rules</a>, <a target="_blank" rel="noopener noreferrer" href="/pages/blog-legal#comments-privacy">privacy</a>)</p>
        <script is:inline data-isso={ SITE.issoLocation } src={ SITE.issoLocation + "/js/embed.min.js" } async></script>
        <div id="isso-thread"><noscript>You need to enable JavaScript to see and post comments.</noscript></div>
      )
    }

  </main>
  <Footer />
</Layout>

<script is:inline>

  function addHeadingLinks() {
    let headings = Array.from(document.querySelectorAll("h2, h3, h4, h5, h6"));
    for (let heading of headings) {
      heading.classList.add("group");
      let link = document.createElement("a");
      link.innerText = "#";
      link.className = "ml-2";
      link.href = "#" + heading.id;
      link.ariaHidden = "true";
      heading.appendChild(link);
    }
  }
  addHeadingLinks();

  function backToTop() {
    document.querySelector("#back-to-top")?.addEventListener("click", () => {
      document.body.scrollTop = 0; // For Safari
      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    });
  }
  backToTop();

</script>
