Manage Slideshows Like a Web Dev

Slidev is a wonderful piece of technology that allows you to build beautiful slideshows from markdown files. You get the simplicity of markdown text and the complexity of web technology with its dazzling colors and animations. I am not here to advocate for this project - it can speak for itself - but one thing that I recently felt the need for was to manage several slideshow projects in one repository. This is kind of possible by default but slidev only allows you to build and deploy one project at a time, which means that every slideshow is supposed to be a separate git repository, deployed as a separate website/app. As you probably guessed, I am proposing a solution.

TL;DR: Take this starter template and configure it to your heart’s content. You can build and deploy all the slidev projects as a single website.

Introducing Pluraslides

The title above sounds like and advertisement, but hey, it’s free and open source (with better name pending). It’s a starter template with a workspace and a build script. The idea is simple (but admittedly took more effort then I expected): Take all the project folders, build them one by one and output them in one dist directory, from which it can be deployed. This should work for any deployment system that you use, but it works best with netlify.

Suppose we have a root directory with a slides subdirectory:

slides
├── presentation-2
│   ├── public
│   └── slides.md
└── presentation-1
    ├── public
    └── slides.md

Each slideshow is a directory with slides.md file. The assets folder (like public with images in it) can also be stored there.

We simply need to build these files like we would normally with @slidev/cli and output them in the same directory but as different subdirectories:

dist
├── index.html
├── presentation-2
│   ├── bundled-stuff.js
│   ├── some-asset.jpg
│   └── index.html
└── presentation-1
    ├── bundled-stuff.js
    ├── some-asset.jpg
    └── index.html

Note that we also want some index page where we will list all the slideshow projects.

That’s basically the gist of it. Check the GitHub template to see how the implementation works. In the repository we have the build.config.js with some minor configuration options and build.js that builds the website. The build steps are as follows:

• Read configuration variables
• Read entries in slides directory
• In dist folder, generate an index.html where the entries are listed as anchor tags
• Loop over entry names and run slidev build script for each of them
• Take dist files for each project (generated by slidev in the same entry directory) and move them to the root dist
• Generate a single _redirects file in the root of dist to let the separate slideshow apps do the routing
• And Bob’s your uncle.

You can now visit the index.html to see all your slideshow links listed out. Clicking the link will take you to the slideshow app. The template for the index file is configurable, in case you don’t like its bland looks.

Deployment

Literally just link your repository to netlify and that’s it. All the configuration is written in the included netlify.toml file. The _redirects file generated in the dist folder also delegates all the routing tasks to the slideshow apps.

Some Caveats

It isn’t to say that I am not satisfied with this solution, but I still have some concerns that I would love to address. Most of it is probably better to be addressed to the slidev project itself.

We might have united the source code and build artifacts in a single repository, but all the slideshows are still built as separate apps. This means that the build script has to start and exit (mobilize and dispose of resources) for each entry. This makes the build process slow.

The built files are separate Vue apps with separate assets and bundles, even though most of it is the same between slideshows. This means that the bundle size is unnecessarily large.

Concluding Notes

All in all it’s quite good for now. Let’s see if I get around to improving this template.