Skip to content

Commit

Permalink
Merge tag '5.0.2'
Browse files Browse the repository at this point in the history
 Conflicts:
	README.md
	gulpfile.js
	index.html
	package-lock.json
	package.json
  • Loading branch information
schnatterer committed May 22, 2024
2 parents 8c72bc9 + 6b8c64f commit ee4b781
Show file tree
Hide file tree
Showing 41 changed files with 624 additions and 199 deletions.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Copyright (C) 2011-2023 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
262 changes: 212 additions & 50 deletions README-reveal-js.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,212 @@
<p align="center">
<a href="https://revealjs.com">
<img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text-sticker.png" alt="reveal.js" width="500">
</a>
<br><br>
<a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
<a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
</p>

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).

The framework comes with a powerful feature set including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX typesetting](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and an [extensive API](https://revealjs.com/api/).

---

Want to create reveal.js presentation in a graphical editor? Try <https://slides.com>. It's made by the same people behind reveal.js.

---

### Sponsors
Hakim's open source work is supported by <a href="https://github.com/sponsors/hakimel">GitHub sponsors</a>. Special thanks to:
<div align="center">
<table>
<td align="center">
<a href="https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
<div>
<img src="https://user-images.githubusercontent.com/629429/151508669-efb4c3b3-8fe3-45eb-8e47-e9510b5f0af1.svg" width="290" alt="WorkOS">
</div>
<b>Your app, enterprise-ready.</b>
<div>
<sub>Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.</sup>
</div>
</a>
</td>
</table>
</div>

---

### Getting started
- 🚀 [Install reveal.js](https://revealjs.com/installation)
- 👀 [View the demo presentation](https://revealjs.com/demo)
- 📖 [Read the documentation](https://revealjs.com/markup/)
- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)

---
<div align="center">
MIT licensed | Copyright © 2011-2023 Hakim El Hattab, https://hakim.se
</div>
![](https://cloudogu.com/assets/blog/2019/revealJS-711db5dd3e495fe26dda7ad44104542b1fceb456c11700a773a2f158bf2c8251.png)

reveal.js-docker
===

[![Build Status](https://oss.cloudogu.com/jenkins/buildStatus/icon?job=cloudogu-github%2Freveal.js-docker%2Fmaster)](https://oss.cloudogu.com/jenkins/job/cloudogu-github/job/reveal.js-docker/job/master/)
[![](https://img.shields.io/docker/image-size/cloudogu/reveal.js)](https://hub.docker.com/r/cloudogu/reveal.js)

Docker images providing easier to use, opinionated reveal.js web apps - web-based slides/presentations.
See [example presentation](https://cloudogu.github.io/reveal.js-docker-example) for a showcase of all features.

Evolution of [cloudogu/continuous-delivery-slides](https://github.com/cloudogu/continuous-delivery-slides).
Allows for
* less cluttered Repos (more slides, less reveal.js)
* faster startup / builds (don't have to build reveal.js over and over again)
* easier updates (new version of docker image; no git merge necessary)

# Table of contents

<!-- Update with `doctoc --notitle README.md`. See https://github.com/thlorenz/doctoc -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [How to use](#how-to-use)
- [Simplest start](#simplest-start)
- [Ship your own slides](#ship-your-own-slides)
- [Further options](#further-options)
- [Running/Building containers](#runningbuilding-containers)
- [Index.html pseudo-template](#indexhtml-pseudo-template)
- [Examples](#examples)
- [Development](#development)
- [Tests](#tests)
- [Docker Image](#docker-image)
- [Script templateIndexHtml](#script-templateindexhtml)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->


# How to use

## Simplest start

Ships a default presentation:

```bash
docker run --rm -p 8080:8080 cloudogu/reveal.js
```

Presentation is served at http://localhost:8080

## Ship your own slides

Have a look at the [reveal.js-docker-example](https://github.com/cloudogu/reveal.js-docker-example).

In a nutshell, just

* mount your markdown slides to `/reveal/docs/slides`, e.g.
`-v $(pwd)/docs/slides:/reveal/docs/slides` and
* start container (see [bellow](#runningbuilding-containers))
\- there is also a variant with live-reloading for
efficient slide creation.

See also [examples](#examples).

### More options

See [index.html pseudo-template](#indexhtml-pseudo-template) to see the effects of the options.

* Mount additional folders to web server, e.g. like so:
`-v $(pwd)/images:/reveal/images`
* Mount folder containing HTML fragment files ([examples](scripts/test/)) to `/resources`
* `slides.html` ➡️ Customize slides from `docs/slides` ([example](scripts/test/slides.html)).
Useful if you want to hide slides from printing.
* `additional.js` - script executed before initializing reveal.js
* `body-end.html` - `html` injected at the end of HTML `<body>`
* `footer.html`, `header-left.html`, `header-right.html` - rendered at the footer (lower left corner) or header (upper left/right corner)
* Optional Env vars: *Note: Make sure to use single quotes*, otherwise parsing in `startPresentation.sh` from [example](https://github.com/cloudogu/reveal.js-docker-example) will fail
* `TITLE='my title'`
* `THEME_CSS`
* `cloudogu.css`
* `cloudogu-black.css`
* [reveal.js themes](https://github.com/hakimel/reveal.js/#theming)
* `WIDTH`, `HEIGHT`, `MARGIN`, `MIN_SCALE`, `MAX_SCALE` - [presentation size](https://revealjs.com/presentation-size/)
* `SHOW_NOTES_FOR_PRINTING` - print speaker notes - defaults to `false`.
* `ADDITIONAL_REVEAL_OPTIONS` - [additional reveal.js options](https://revealjs.com/config/)
* `ADDITIONAL_PLUGINS` - additional reveal.js plugins.
* e.g. `-e ADDITIONAL_PLUGINS="RevealMath" `
* Add the plugin script using `ADDITIONAL_SCRIPT`, e.g. `-e ADDITIONAL_SCRIPT='<script src="plugin/math/math.js"></script>'`
* TODO legacy plugins
* External plugins have to be mounted or copied to the `/reveal` folder, e.g. here
`-v $(pwd)/plugin/tagcloud:/reveal/plugin/tagcloud`
* `SKIP_TEMPLATING` ignores all of the above elements and just launches with the `index.html` present.
Useful when mounting your own `index.html`.

### Running/Building containers

Note that [reveal.js-docker-example](https://github.com/cloudogu/reveal.js-docker-example) also contains a convenient
startup script.

```bash
# Development mode (with live reloading for editing the slides)
docker run --rm \
-v $(pwd)/docs/slides:/reveal/docs/slides \
-v $(pwd)/scripts/test:/resources \
-e TITLE='my Title' -e THEME_CSS='cloudogu-black.css' \
-p 8000:8000 -p 35729:35729 \
cloudogu/reveal.js:dev

# Production Mode (smaller, more secure, just a static HTML site served by NGINX)
docker run --rm \
-v $(pwd)/docs/slides:/reveal/docs/slides \
-v $(pwd)/scripts/test:/resources \
-e TITLE='my Title' -e THEME_CSS='cloudogu-black.css' \
-p 8080:8080 \
cloudogu/reveal.js
```

You can also build your own productive image:

```Dockerfile
FROM cloudogu/reveal.js:4.0.2-r3 as base

FROM base as aggregator
USER root
RUN mkdir -p /dist/reveal
COPY . /dist/reveal
RUN mv /dist/reveal/resources/ /dist

FROM base
ENV TITLE='my Title' \
THEME_CSS='cloudogu-black.css'
COPY --from=aggregator --chown=nginx /dist /
```

Or if you want to run the container with `--read-only` file system, you can do the index.html rendering at build time,
so no files need to be written at runtime:

```Dockerfile
FROM cloudogu/reveal.js:4.0.2-r3 as base

FROM base as aggregator
ENV TITLE='myTitle' \
THEME_CSS='cloudogu-black.css'
USER root
COPY . /reveal
RUN mv /reveal/resources/ /
RUN /scripts/templateIndexHtml

FROM base
ENV SKIP_TEMPLATING='true'
COPY --from=aggregator --chown=nginx /reveal /reveal
```

You can then start your container like so

```bash
docker run --rm -u 1000000:1000000 --read-only -v someTempFileImage:/tmp yourImageName
```

## Index.html pseudo-template

See [index.html](index.html)

## Examples

* [cloudogu/reveal.js-docker-example](https://github.com/cloudogu/reveal.js-docker-example)

Real Life:

* [cloudogu/gitops-talks](https://github.com/cloudogu/gitops-talks)
* [cloudogu/k8s-appops-security-talks](https://github.com/cloudogu/k8s-appops-security-talks)
* [cloudogu/k8s-intro-talk](https://github.com/cloudogu/k8s-intro-talk)

# Development

Build Docker Images, from repo root

```bash
export DOCKER_BUILDKIT=false
docker build -t cloudogu/reveal.js:local .
docker build -t cloudogu/reveal.js:local-dev --build-arg ENV=dev .
```

Note: If only one build is required, buildkit would be more efficient. However, prod is failing with buildkit.
Try it with `export DOCKER_BUILDKIT=0` See [this issue](https://github.com/moby/moby/issues/735)

## Upgrading from upstream reveal.js

```shell
git remote add upstream https://github.com/hakimel/reveal.js
git pull upstream/tags/4.4.0 master
# Fix merge conflicts.
# Build Docker images and test both images variants (e.g. with cloudogu/reveal.js-docker-example)
git tag -s 4.4.0-r1
git push --follow-tags
```

## Tests

## Docker Image

Build (as described [here](#development)) and run container as described [here](#ship-your-own-slides).

## Script templateIndexHtml

Test script locally (manually for now 😬)

```bash
# For now manually
CAT_INDEX_HTML='true' RESOURCE_FOLDER='scripts/test' WEB_FOLDER='.' scripts/src/templateIndexHtml
```
1 change: 1 addition & 0 deletions css/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
// Stack multiple elements on top of each other
.reveal .r-stack {
display: grid;
grid-template-rows: 100%;
}

.reveal .r-stack > * {
Expand Down
16 changes: 13 additions & 3 deletions css/reveal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -631,11 +631,16 @@ $controlsArrowAngleActive: 36deg;
touch-action: pinch-zoom;
}

// Swiping on an embedded deck should not block page scrolling
// Swiping on an embedded deck should not block page scrolling...
.reveal.embedded {
touch-action: pan-y;
}

// ... unless we're on a vertical slide
.reveal.embedded.is-vertical-slide {
touch-action: none;
}

.reveal .slides {
position: absolute;
width: 100%;
Expand Down Expand Up @@ -1445,7 +1450,8 @@ $overlayHeaderPadding: 5px;
width: 100%;
height: 100%;
z-index: 1000;
background: rgba( 0, 0, 0, 0.9 );
background: rgba( 0, 0, 0, 0.95 );
backdrop-filter: blur( 6px );
transition: all 0.3s ease;
}

Expand Down Expand Up @@ -1589,7 +1595,6 @@ $overlayHeaderPadding: 5px;
padding-bottom: 20px;
}


/*********************************************
* PLAYBACK COMPONENT
*********************************************/
Expand Down Expand Up @@ -1901,6 +1906,11 @@ $notesWidthPercent: 25%;
display: none !important;
}

.overlay,
.pause-overlay {
position: fixed;
}

.reveal {
overflow: visible;
touch-action: manipulation;
Expand Down
6 changes: 3 additions & 3 deletions demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -165,9 +165,9 @@ <h2 style="margin-top: 20px;">Auto-Animate</h2>
</section>
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<div class="r-stack">
<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
<div data-id="box1" style="background: cyan; width: 300px; height: 300px;"></div>
<div data-id="box2" style="background: magenta; width: 200px; height: 200px;"></div>
<div data-id="box3" style="background: yellow; width: 100px; height: 100px;"></div>
</div>
<h2 style="margin-top: 20px;">Auto-Animate</h2>
</section>
Expand Down
6 changes: 3 additions & 3 deletions dist/reveal.css

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dist/reveal.esm.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.esm.js.map

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dist/reveal.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.js.map

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions examples/scroll.html
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,13 @@ <h2>Video background</h2>
<script src="../plugin/markdown/markdown.js"></script>
<script src="../plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
view: 'scroll',
hash: true,
Reveal.initialize({
view: 'scroll',
hash: true,

plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</script>

</body>
</html>
2 changes: 1 addition & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const banner = `/*!
* ${pkg.homepage}
* MIT licensed
*
* Copyright (C) 2011-2023 Hakim El Hattab, https://hakim.se
* Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
*/\n`

// Prevents warnings from opening too many test pages
Expand Down
11 changes: 7 additions & 4 deletions js/controllers/autoanimate.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,13 @@ export default class AutoAnimate {
let toSlideIndex = allSlides.indexOf( toSlide );
let fromSlideIndex = allSlides.indexOf( fromSlide );

// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
// (including null if absent on both) and that data-auto-animate-restart isn't set on the
// physically latter slide (independent of slide direction)
if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
// Ensure that;
// 1. Both slides exist.
// 2. Both slides are auto-animate targets with the same
// data-auto-animate-id value (including null if absent on both).
// 3. data-auto-animate-restart isn't set on the physically latter
// slide (independent of slide direction).
if( fromSlide && toSlide && fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' )
&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {

Expand Down
Loading

0 comments on commit ee4b781

Please sign in to comment.