1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-07 16:58:50 +00:00

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

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

24
.vscode/astro.code-snippets vendored Normal file
View file

@ -0,0 +1,24 @@
{
// Place your snippets for astro here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Slide Stub": {
"prefix": "slide",
"body": [
"<section>",
" <h2>$1</h2>",
" <p>$2</p>",
"</section>"
]
}
}

View file

@ -1,4 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
"unwantedRecommendations": [],
}

View file

@ -12,9 +12,11 @@
"dependencies": {
"@astrojs/check": "^0.9.2",
"astro": "^4.13.3",
"astro-icon": "^1.1.1"
"astro-icon": "^1.1.1",
"reveal.js": "^5.1.0"
},
"devDependencies": {
"@types/reveal.js": "^5.0.3",
"sass": "^1.77.8",
"typescript": "^5.5.4"
}

17
pnpm-lock.yaml generated
View file

@ -17,7 +17,13 @@ importers:
astro-icon:
specifier: ^1.1.1
version: 1.1.1
reveal.js:
specifier: ^5.1.0
version: 5.1.0
devDependencies:
'@types/reveal.js':
specifier: ^5.0.3
version: 5.0.3
sass:
specifier: ^1.77.8
version: 1.77.8
@ -600,6 +606,9 @@ packages:
'@types/node@22.4.1':
resolution: {integrity: sha512-1tbpb9325+gPnKK0dMm+/LMriX0vKxf6RnB0SZUqfyVkQ4fMgUSySqhxE/y8Jvs4NyF1yHzTfG9KlnkIODxPKg==}
'@types/reveal.js@5.0.3':
resolution: {integrity: sha512-gwnK8TR38IOBIORWFrV5/z9lRX4iLke2FBqNgRhXxehaWJFkrzVY2TVzfdX/SX94eugt+OI5l++zDBBSfdzruQ==}
'@types/tar@6.1.13':
resolution: {integrity: sha512-IznnlmU5f4WcGTh2ltRu/Ijpmk8wiWXfF0VA4s+HPjHZgvFggk1YaIkbo5krX/zUCzWF8N/l4+W/LNxnvAJ8nw==}
@ -1711,6 +1720,10 @@ packages:
resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
reveal.js@5.1.0:
resolution: {integrity: sha512-KDt7m0+xwKV6nAZt4CNPVFBf42sTKRQapg0bGGKB5PKO5XvChnMfwlZkybydHiQJ7p5+6LbHKRGrhXODdoNIaA==}
engines: {node: '>=18.0.0'}
rollup@4.20.0:
resolution: {integrity: sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@ -2690,6 +2703,8 @@ snapshots:
dependencies:
undici-types: 6.19.8
'@types/reveal.js@5.0.3': {}
'@types/tar@6.1.13':
dependencies:
'@types/node': 22.4.1
@ -4160,6 +4175,8 @@ snapshots:
reusify@1.0.4: {}
reveal.js@5.1.0: {}
rollup@4.20.0:
dependencies:
'@types/estree': 1.0.5

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>