mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-10 00:08:49 +00:00
Code Activity

feature(slides): Add RevealJS and have a layout ready for it

Browse source
This commit is contained in:
Denis Ergin 2024-09-17 16:03:07 +02:00
parent f29b97ac06
commit 55422c2ab2
6 changed files with 115 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/env.d.ts vendored
View file

@ -1,2 +1,3 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
/// <reference path="../node_modules/@types/reveal.js" />

69
src/layouts/Reveal.astro Normal file
View file

@ -0,0 +1,69 @@
---
import { getLangFromUrl } from '../i18n/utils'
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>
<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css" />
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/white.css" />
<link rel="stylesheet" href="/node_modules/reveal.js/plugin/highlight/monokai.css" />
</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>