This is the source repository for the slides of the frontend development course 1.
Add new slides inside the src/lessons directory. You can use the template in
src/lessons/00_template. Further documentation about the slide syntax can be
found at revealjs.com.
Configuration of Reveal.js happens in src/slides.js.
For local installation, you need Node.js.
Clone this repository and install the external dependencies:
git clone [email protected]:ReDI-Munich-Frontend/fed-munich-2021-spring.git
cd fed-munich-2021-spring
npm install
For working on slides, I recommend the built-in webserver. You can start it with the command:
npm run start
Then, the slides will be available at
https://localhost:8080/your-directory/your-slides-filename.slides.html.
Alternatively, run npm run start:open to automatically open a browser with a
lesson overview, from which you can easily navigate to the slides you're
working on.
The built-in webserver will automatically reload whenever you make changes to your source files.
When creating slides for a new lesson, check-out a new branch, copy the
src/lessons/00_template directory and change the html file's name so that it
ends with .slides.html. Modify the title and the meta-attributes date and
description - these fields are later used for generating the README file,
which contains an overview of all lessons. If the built-in webserver was
running, you need to restart it, as webpack isn't capable of detecting new html
files during runtime.
For creating code-examples or sharing any other files that shouldn't be changed
by webpack, you may create a directory class-resources next to your slides
file. Any files inside this directory will be copied and can be used e.g. in
iframes.
Example directory structure:
+ src
+ lessons
+ 01_my_lesson
| my-lesson.slides.html Your reveal.js slides file
| image.png An image you may use inside your slides
+ class-resources
| code-example-1.html
| code-example-2.js
+ 02_another_lesson
| another-lesson.slides.html
...
While presenting, press S to show the speaker notes. If your browser blocks the speaker note pop-up, you may have to press S again once it's open.
A workflow exists to automatically build and deploy the slides into the
gh-pages branch of this repository.
When setting up Github-Pages, you must use gh-pages as source-branch and the
/docs directory as source directory.
A separate README file is generated automatically, which contains links to and
meta-information of the slides. It is committed as README.md and
docs/index.md of the gh-pages branch, meaning that it's the home page of
the Github-Pages URL.
A build script exists which allows building previews for pull-requests with Netlify. In order to use it, set up a new site on Netlify and link your repository with default settings apart from the following:
- Build Command:
bin/build-netlify.sh - Publish Directory:
dist/docs - Production Branch:
master - Deploy Previews: Any pull requests against your production branch / branch deploy branches
- Branch Deploys: None