Slides as Code
asciidoc + asciidoctor
# install ruby first
$ gem install asciidoctor
asciidoctor-revealjs
# install node first
$ npm i --save asciidoctor @asciidoctor/reveal.js
/* Load Asciidoctor.js and the reveal.js converter */
var asciidoctor = require('@asciidoctor/core')()
var asciidoctorRevealjs = require('@asciidoctor/reveal.js')
asciidoctorRevealjs.register()
/* Convert the document 'presentation.adoc' using the reveal.js converter */
var options = { safe: 'safe', backend: 'revealjs' }
asciidoctor.convertFile('presentation.adoc', options)
# generate a presentation.html file
$ node convert-slides.js
$ open presentation.html
c’est juste pour moi, mais repo ouvert
$ bun build ./index.ts --compile --outfile slidesk
$ bun build --compile --target=bun-linux-x64 ./path/to/my/app.ts --outfile myapp
$ bun build --compile --target=bun-windows-x64 ./path/to/my/app.ts --outfile myapp
$ bun build --compile --target=bun-darwin-arm64 ./path/to/my/app.ts --outfile myapp
$ bun build --compile --target=bun-darwin-x64 ./path/to/my/app.ts --outfile myapp
$ brew install gouz/tools/slidesk
$ bunx slidesk
$ docker run -it -v "$(pwd)"/:/slidesk/ -p 1337:1337 gouz/slidesk:latest slidesk -tn
Neuf compagnons, qu’il en soit ainsi !
Vous formerez la Communauté de l’Anneau !
~ Elrond
Et aussi :
…, j’ai kiffé et je vais recommencer pour mes prezs de formations, meetups/talks et ainsi que pour ma nouvelle boîte …
Les possibilités de SliDesk sont immenses, tout en conservant un outil assez sobre. Bref, j’ai mis “passer du temps pour mieux découvrir SliDesk” dans ma liste d’envies.
Youtube / Twitch:
🦋 @slidesk.link
/**
* components/bird.mjs
* Early Birds
* usage: !bird(pseudo)
*/
const birdTemplate = (pseudo) => `
<div class="bird">
<img src="assets/communautes/${pseudo}.webp" alt="${pseudo}">
<h3>${pseudo}</h3>
<div class="sd-qrcode" data-url="https://github.com/${pseudo}" style="width: 200px"></div>
</div>
`;
export default (data) => {
let newData = data;
[...newData.matchAll(/!bird\((.*)\)/g)].forEach((match) => {
newData = newData.replace(match[0], birdTemplate(match[1]));
});
return newData;
};
templates/split/split.sdt
<sd-title />
<div class="split">
<div class="left">
<sd-left />
</div>
<div class="right">
<sd-right />
</div>
</div>
<sd-content />
slide.sdf
## Title .[#split]
[[left]]
left content
[[/left]]
[[right]]
right content
[[/right]]
Bottom
Sylvain Gougouzian
Des feedbacks ?
Photos, illustrations : Unsplash
