export html as self-contained: possible?

[AtomicNess123]

I have browsed through the manual but I couldn't find a way to export the slides to one html. Would be useful for offline presentations.

[stvogel]

I have just saved the presentation as "complete website".
This saves the contained images, ...
There seems to be a few glitches ... e.g. the menu-plugin is a bit strange, but for the rest it works offline right out of the box.

[Turakar]

You can use webpack to bundle all the assets into one .js and one .html file using the HtmlWebpackPlugin. Then, you can just replace the <script src=...></script> tag with <script>contens of the .js</script>. To get you started, I added the main bits below:

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index_bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(svg)|(ttf)|(eot)|(woff)|(png)|(jpg)/i,
        type: "asset/inline",
      },
    ],
  },
  devServer: {
    watchFiles: ["src/**/*"],
    port: 9000,
    open: ["/output.html"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Your Title',
      template: path.resolve('src/index.html'),
      filename: 'output.html',
      inject: true,
      scriptLoading: 'blocking',
    }),
  ],
  performance: {
    hints: false,
  },
};

bundle.py (This script replaces the script tags)

import os
import re


def main():
    with open("dist/output.html", "r") as fd:
        content = fd.read()
    with open("dist/index_bundle.js", "r") as fd:
        script = fd.read()
    
    content = content.replace(r'<script src="index_bundle.js"></script>', "<script>" + script + "</script>")

    with open("dist/presentation.html", "w") as fd:
        fd.write(content)
    print("Created bundle")


if __name__ == "__main__":
    main()

Your SASS stylesheet should contain the following lines:

@import "~reveal.js/dist/reset.css";
@import "~reveal.js/dist/reveal.css";
@import "~reveal.js/dist/theme/white.css";

And your JS code the following lines:

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
import Notes from 'reveal.js/plugin/notes/notes.esm.js';
import Math from 'reveal.js/plugin/math/math.esm.js';

let deck = new Reveal({
   plugins: [ Markdown, Notes, Math ],
});
deck.initialize();

Note: While I would consider the application of Webpack as a best practice, the bundle.py certainly isn't. Also note that this is not beneficial for page loading time. However, the convenience of having a single file similar to an .odp or so is quite nice.

[quilicicf]

Bundlers are indeed probably the way to go.
I've just revived this old issue of mine that was just about bundling all the presentation in a single file too.
Be aware of the Notes plugin's behavior before trying to implement it.