A starter for using React + TypeScript + Node to create a Reveal.js presentation -- without runtime dependencies on React!
This is based on react-typescript-jsless-static-site-generator-starter.
- Node.js in a current version (tested with v14, but should work with some prior versions too)
- Yarn or NPM
-
Download the sources: either clone this repository or download as a ZIP or TAR archive.
-
Install the NPM dependencies: in the root directory of this project, run:
yarn install(recommended) ornpm install
-
Get Reveal.js:
- Download the ZIP file (or follow the Reveal.js installation instructions).
- Unpack the Reveal.js files to the
revealdirectory.
-
Start the development server: in the root directory of this project, run:
yarn start(recommended) ornpm start- This builds the site and opens it in your browser. It also watches the sources for any changes, and automatically refreshes the site when changes are detected.
-
If you just want to build the presentation once (e.g. to put it onto a static hosting service), run:
yarn build(recommended) ornpm build
-
Edit the content of your presentation:
- The slides are specified in
src/Slides.tsx(which must export a component namedSlides). You can split the content to other files, of course, using regular React components and TypeScript exports/imports. - The page content (i.e. the
<body>element and its content) is specified insrc/Body.tsx, which must export a component namedBodythat takes no props. If you want to add any more content outside of the slides, you can do this here. - The contents of the
<head>element are specified insrc/HeadContent.tsx, which must export a component namedHeadContentthat takes no props. UnlikeBody, this renders only the contents of<head>, not the entire element itself (because the build script must inject some additional elements, like styles). - If you want to change any Reveal.js settings / options, customize the file
src/InitializeRevealJs.tsx. - If you want to change the Reveal.js theme or the code highlighting theme, customize the CSS paths in
src/HeadContent.tsx.
- The slides are specified in
-
Style your presentation with
styled-components. -
Put any static files (e.g. images, robots.txt) in the
staticdirectory, and they'll be copied to the output directory. This happens recursively, i.e. directory structures insidestaticare copied over. -
Customize your Reveal.js theme:
- If you want to make any changes to the Reveal.js stylings, we recommend modifying the theme SCSS sources in
reveal/css/theme/source/, or creating a new theme here by copying one of the existing ones. - To apply any changes there, you need to compile the SCSS sources to CSS files by running (in the project root directory):
yarn build:reveal-scss(recommended) ornpm build:reveal-scss.
If you have a development server running, it should pick up any changes and refresh automatically. Otherwise, just run another build of the presentation as described further above.
- If you want to make any changes to the Reveal.js stylings, we recommend modifying the theme SCSS sources in
- You can't currently include any JavaScript interactivity in your React components. For example, you can't react to an element being clicked using an
onClickhandler.