signal-slides/src/layouts/SlideLayout.astro

53 lines
1.5 KiB
Plaintext

---
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>