Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanj/gist-reveal
Gist-powered reveal.js presentations
https://github.com/ryanj/gist-reveal
css gist javascript presentations revealjs websockets
Last synced: 6 days ago
JSON representation
Gist-powered reveal.js presentations
- Host: GitHub
- URL: https://github.com/ryanj/gist-reveal
- Owner: ryanj
- License: mit
- Created: 2014-06-08T03:25:31.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-01-11T17:47:29.000Z (about 1 month ago)
- Last Synced: 2025-02-08T23:09:18.272Z (13 days ago)
- Topics: css, gist, javascript, presentations, revealjs, websockets
- Language: CSS
- Homepage: http://gist-reveal.it
- Size: 4.26 MB
- Stars: 146
- Watchers: 7
- Forks: 43
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gist-reveal
[Gist-reveal](http://gist-reveal.it/) is a slideshow templating service that makes it possible to view and share [reveal.js](https://github.com/hakimel/reveal.js) presentations using github's [gist](http://gist.github.com) service as a datastore.
Reveal.js CSS and Javascript includes are automatically provided in each page request.
Try it out at: https://gist-reveal.it
## Gist-powered reveal.js presentations
Store revealjs [HTML](https://revealjs.com/markup/) or [Markdown](https://revealjs.com/markdown/) ``s in a [gist](http://gist.github.com), then append your resulting gist id to any `gist-reveal` site url to view your slides:
https://gist-reveal.it/YOUR_GIST_ID
For example, the slide sources at https://gist.github.com/af84d40e58c5c2a908dd can be viewed here:
https://gist-reveal.it/af84d40e58c5c2a908dd
Use [bit.ly](http://bit.ly) or another url shortener to make these long urls easier to share, and to make enagement rates easier to track.
### Broadcast slide transitions
Presenters can visit [`/login`](https://gist-reveal.it/login) to configure their browser as a presentation device:
https://gist-reveal.it/login
*WARNING:* Only the gist owner is allowed to broadcast slide transitions to viewers. If needed, fork the slide deck and present using the new gist ID. See the web console output for additional details.
Visit [`/logout`](https://gist-reveal.it/logout) to exit presentation mode:
https://gist-reveal.it/logout
### Gist-powered themes
Use the "`?theme=`" querystring parameter to access site themes. Available [CSS themes](https://gist-reveal.it/#/themes) include the default list of [revealjs themes](https://revealjs.com/themes/):
* [revealjs black theme](http://gist-reveal.it/?theme=black#/themes)
* [revealjs simple theme](http://gist-reveal.it/?theme=simple#/themes)
* [revealjs league theme](http://gist-reveal.it/?theme=league#/themes)
* [revealjs sky theme](http://gist-reveal.it/?theme=sky#/themes)
It is also possible to load a custom theme using [another gist](https://gist-reveal.it/#/gist-themes). For example:
* [a dark winter theme](http://gist-reveal.it/?theme=60e54843de11a545897e#/gist-themes)
### Nicer presentation paths
Creating a [bit.ly](http://bit.ly) shortname for your longer `gist-reveal/gist_id` deck urls will also make your presentations available at an alternate presentation path:
http://gist-reveal.it/bit.ly/SHORTNAME
Example:
http://gist-reveal.it/bit.ly/k8s-workshops
Much nicer! Make sure to continue sending traffic to the shorter `bit.ly/shortname` url for metrics collection purposes.
### Export to PDF
Add "`print-pdf`" to the querystring to render a printer-friendly version of your slides:
http://gist-reveal.it/YOUR_GIST_ID?print-pdf
Then, [print to file](https://revealjs.com/pdf-export/#instructions) to generate the PDF
## Running gist-reveal
Run your own Gist-powered reveal.js slideshow service with `gist-reveal`
### Application Config
The following environment variables can be used to configure gist-reveal:
Variable Name | Contents | Default Value
---------------|------------|---------------
DEFAULT_GIST | The default gist id content for the site | [af84d40e58c5c2a908dd](https://gist.github.com/ryanj/af84d40e58c5c2a908dd)
REVEAL_THEME | The site's default theme. Can be a locally bundled theme name, or a remote gist_id | [450836bbaebcf4c4ae08b331343a7886](https://gist.github.com/ryanj/450836bbaebcf4c4ae08b331343a7886)
GH_API_TOKEN | GitHub API token | unset
CLIENT_ID | GitHub OAuth Client ID. Required for Websocket connections | unset
CLIENT_SECRET | GitHub OAuth Client Secret. Required for Websocket connections | unset
PRIVATE_KEY | TLS private key provided as Env var or file: `private.key` | unset
PUBLIC_CRT | Public TLS certificate as Env var or as file: `public.crt` | unset
PORT | the server port | 8080
GA_TRACKER | Google Analytics tracker token | unset
GIST_THEMES | Allow reveal.js CSS themes to be installed dynamically via querystring "?theme=gist_id" | "true"
SANITIZE_INPUT | Sanitize gist input. Strip script tags and iframes | "false"
GIST_PATH | Load slides from a local gist repo (Disable API and Websockets) | unset
GIST_FILENAME | Load slides from a local gist repo (Disable API and Websockets) |unset
To enable websocket connections, provide an [OAuth](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) `CLIENT_ID` and `CLIENT_SECRET` with a redirect url configured to: `YOUR_SITE/github/callback`
### Local Development
Install dependencies:
```bash
npm install
```
Start the app:
```bash
npm start
```
Optionally generate a [localhost certificate](https://letsencrypt.org/docs/certificates-for-localhost/) for testing https+wss connections:
```bash
openssl req -x509 -out public.crt -keyout private.key \
-newkey rsa:2048 -nodes -sha256 \
-subj '/CN=localhost' -extensions EXT -config <( \
printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
```
#### Local Dev with Local Slides
Prefer to develop slides using your own editor? Or, plan to make a lot of changes to your presentation sources? Try loading a local clone of your gist repo!
1. Make a local clone of your gist repo in another folder:
```bash
git clone [email protected]:af84d40e58c5c2a908dd ../example-slides
```
2. Use the `GIST_PATH` and `GIST_FILENAME` parameters to load local slides:
```bash
GIST_PATH=../example-slides GIST_FILENAME=gist-reveal.it-slides.html npm start
```
When you are done editing, `add` and `commit` your changes then `git push` to deploy.
### Containers
Run the [container image](https://registry.hub.docker.com/r/ryanj/gist-reveal) locally on port `8080` using `podman` or `docker`:
```bash
docker run --rm -p 8080:8080 ryanj/gist-reveal
```
[Environment variables](#application-config) can be passed into the container to configure the default theme, or to change the default slideshow content:
```bash
docker run --rm -p 8080:8080 -e "DEFAULT_GIST=YOUR_DEFAULT_GIST_ID" ryanj/gist-reveal
```
### Kubernetes
Create a kubernetes `pod` and `service`, both named `gist-reveal`:
```bash
kubectl run gist-reveal --image=ryanj/gist-reveal --expose --port=8080 \
--env="DEFAULT_GIST=YOUR_DEFAULT_GIST_ID" \
--env="GH_API_TOKEN=YOUR_GH_API_TOKEN" \
--env="CLIENT_SECRET=YOUR_GH_CLIENT_SECRET" \
--env="CLIENT_ID=YOUR_CLIENT_ID_VALUE"
```
## License
[gist-reveal](https://gist-reveal.it/) was created at the first [DockerCon Hackathon](https://web.archive.org/web/20140715021725/http://blog.docker.com/2014/07/dockercon-video-dockercon-hackathon-winners/) by [@ryanj](https://github.com/ryanj) and [@fkautz](https://github.com/fkautz).
[Reveal.js](https://github.com/hakimel/reveal.js) is MIT licensed
Copyright (C) 2014 Hakim El Hattab, http://hakim.se