Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/leouieda/talk-template

Template for my reveal.js based slides
https://github.com/leouieda/talk-template

css html reveal-js reveal-slide-decks revealjs revealjs-theme slides talk template

Last synced: about 1 month ago
JSON representation

Template for my reveal.js based slides

Awesome Lists containing this project

README

        

# Template for my reveal.js based slides

This is a template I use to make [reveal.js](https://revealjs.com/) slides
for talks and lectures.
It adds some custom styling and CSS classes for making columns, footnotes,
and more.

**Preview:** https://www.leouieda.com/talk-template

> The original inspiration is this template by Matthew Turk:
> https://github.com/matthewturk/mjt-talk-template

## Using

1. Click on the "Use this template" button or go to
https://github.com/leouieda/talk-template/generate to create a
new repository for your slides.
1. Change the HTML title (the one that appears on the browser tab)
in `index.html`.
1. Remove the Plausible Analytics script from the `` in `index.html`.
1. Preview the presentation by
[serving the slides locally](#serving-the-slides-locally).
1. Add your content to `slides.md` and images to `assets`
(remove the images you don't want to use).
1. Commit and push your changes.
1. Make your presentation public by
[enabling GitHub Pages](#serving-on-github-pages).

## What's included

`index.html`: This is the master document that sets up reveal.js and
its plugins and loads the slide content from `slides.md`.
**Change the HTML `` tag here**.

`slides.md`: Markdown file with the actual slide content. The template
includes some slides that demo the custom CSS classes available.
**Add your content here.**

`css/style.less`: Custom styling and CSS classes (using
[Less](http://lesscss.org/)). Edit to tweak colours, sizes, fonts,
spacing, etc.

`assets`: Images used in the presentation. You can probably delete all
of these when making your slides. Replace the `favicon.png` with a
32 x 32 px image to customize the icon (this is set in `index.html`).

`fonts`: Sources for the fonts used:
[FontAwesome](https://fontawesome.com/),
[Atkinson Hyperlegible](https://brailleinstitute.org/freefont),
[Ubuntu Mono](https://design.ubuntu.com/font/).
Included in the repository for offline access. You could remove them and
include fonts from a CDN (like Google Fonts) in `index.html`.

`packages`: "Vendored" versions of reveal.js, Less, and
[KaTeX](https://katex.org/) (for maths) that are used.
Having them in the repository is important for using the slides offline
(on a plane or lecture room without easy internet access).

`serve.py`: Python script that serves the slides and reloads them
whenever the source files change. Very handy for development.
See below for instructions.

## Serving the slides locally

Unfortunately, you can't just open the `index.html` file on browser
to view your slides.
Reveal.js requires an actual local server.
You can set one up however you'd like.
Below, I provide instructions for doing so in Python (which is what
I use most of the time) but it would work with any other local
server.

First, install the [livereload](https://github.com/lepture/python-livereload)
Python package:

```
pip install livereload
```

or

```
conda install livereload -c conda-forge
```

Then, start a server at http://localhost:8008 by running:

```
python serve.py
```

The slides will open on your default browser and will automatically reload
when you update any of the files in the repository.

## Serving on GitHub Pages

Go to your repository "Settings > Pages" and select "Source" as the
`main` branch and `/ (root)`. You probably want to select "Enforce HTTPS"
as well.

Your slides should now be served at https://USERNAME.github.io/REPOSITORY
or equivalent if you're using a custom domain.
It may take a little while for this to happen.

For example, this template is served at
https://www.leouieda.com/talk-template.

## Exporting to PDF

You can save your slides to PDF for a backup or to distribute
(I find students like this because they can annotate the PDF).
To do so, add `?print-pdf` to the end of the URL (either local
server or hosted) and then print the page to PDF.

This **works best on Chrome/Chromium**. The slides tend to be
distorted on Firefox for some reason.

**WARNING:** Videos and gifs don't work on PDFs.

## License

The template (`slides.md`, `index.html`, and `css/style.less`) is licensed under a
Creative Commons
Attribution 4.0 International License
.