https://github.com/declanbyrd/eleventy-presentation

Generate an interactive presentation from markdown files using 11ty
https://github.com/declanbyrd/eleventy-presentation

Last synced: 1 day ago
JSON representation

Generate an interactive presentation from markdown files using 11ty

• Host: GitHub
• URL: https://github.com/declanbyrd/eleventy-presentation
• Owner: declanbyrd
• Created: 2020-10-22T08:17:30.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-28T17:52:49.000Z (about 4 years ago)
• Last Synced: 2024-11-11T09:46:40.004Z (about 1 month ago)
• Language: CSS
• Size: 1.34 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 11ty Presentations

## Overview

- Each slide is its own markdown file located in [`src/content/slides`](/src/content/slides) and named after its position in the presentation (e.g. the file `0.md` is the first slide).

- Each slide contains one piece of frontmatter that determines the layout of the slide. The `layoutTemplate` property takes an array of strings which are mapped to CSS classes.

- 11ty creates a collection containing all markdown files in `src/content/slides`.

- `src/index.njk` uses nunjucks templating to map each slide in the collection to a HTML ``.

## Summary of `package.json` scripts

- `yarn dev` - Run the development server.

- `yarn build` - Generates the presentation inside the `dist` folder.

## Keyboard navigation in the presentation

- ← - Previous slide.

- → or space - Next Slide

### Disabling space bar navigation

If the slide contains an interactive element that requries the use of the spacebar for functionality, the spacebar navigation can be disabled for that slide by adding `'no-spacebar'` to the layoutTemplate array in the slide's markdown file.

## Adding React components to slides

- All React logic is located in `src/react`.

- Each component has its own folder.

- `app.js` is used to render each component using `ReactDOM.render`.

- Markdown files that use React components will include:

  ```html

  


  ```


  Where the id is the name of the component.

## Slide Layouts

The currently supported layouts are:

- title-slide

- vertical-split

- header-and-content

- no-spacebar