1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-06 13:18:49 +00:00
denis.ergin/src/layouts/Reveal.astro

69 lines
No EOL
1.5 KiB
Text

---
import { getLangFromUrl } from '../i18n/utils'
import 'reveal.js/dist/reveal.css'
import 'reveal.js/dist/theme/white.css'
import 'reveal.js/plugin/highlight/monokai.css'
interface Props {
title: string;
}
const lang = getLangFromUrl(Astro.url);
const { title } = Astro.props;
---
<!doctype html>
<html lang={lang}>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Slides?" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<main>
<div class="loading">
Waiting for slides to warm up...
</div>
<div class="reveal">
<slot />
</div>
</main>
</body>
<script>
import RevealJS from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm'
import Highlight from 'reveal.js/plugin/highlight/highlight.esm'
import Notes from 'reveal.js/plugin/notes/notes.esm'
let deck = new RevealJS({
plugins: [Markdown, Highlight, Notes],
slideNumber: true,
hash: true
});
deck.initialize()
.then(() => {
document.querySelector('.loading')?.remove();
});
</script>
</html>
<style>
main {
height: 100vh;
}
.loading {
width: 100%;
height: 100%;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
</style>