---
export interface Props {
  title: string;
  authors: string[];
  description?: string;
}
import Layout from "./BaseLayout.astro";
import "@themes/hnrq.scss";

const { title, authors, description } = Astro.props;
---

<Layout {title}>
  <Fragment slot="head">
    {description && <meta name="description" content={description} />}
    {authors.map((author) => <meta name="author" content={author} />)}
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css"
      integrity="sha512-V5fKCVKOFy36w8zJmLzPH5R6zU6KvuHOvxfMRczx2ZeqTjKRGSBO9yiZjCKEJS3n6EmENwrH/xvSwXqxje+VVA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/highlight/monokai.css"
      integrity="sha512-Ww3X8n7Y0V9xFWft1PYfLEESkLKZYjWHmaZgo6HZu4R0mX5D+sNK5YoLSgE10aS2SDXnppWRXndYiN7n/LxV3A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </Fragment>
  <div class="reveal">
    <div class="slides">
      <section>
        <h2>{title}</h2>
        <span>{authors}</span>
      </section>
      <slot />
    </div>
  </div>
  <script>
    import Reveal from "reveal.js";
    import Highlight from "reveal.js/plugin/highlight/highlight.esm.js";
    import Zoom from "reveal.js/plugin/zoom/zoom.esm.js";
    import Notes from "reveal.js/plugin/notes/notes.esm.js";

    let deck = new Reveal({
      plugins: [Highlight, Zoom, Notes],
    });
    deck.initialize();
  </script>
</Layout>