@eclipsefdn/revealjs-solstice

This package provides a complete toolkit for styling your Reveal.js presentations with the Eclipse Solstice theme. It includes the theme itself, custom Asciidoctor templates, and a Reveal.js plugin for branding.

Installation

yarn add @eclipsefdn/revealjs-solstice

Usage

This package is designed to be used with AsciiDoc and @eclipsefdn/vite-plugin-asciidoctor.

1. Configure Theme and Templates

In your vite.config.ts, you need to tell Asciidoctor to use the Solstice theme and templates. You can do this by setting revealjs_customtheme and template_dirs in your Asciidoctor attributes.

// vite.config.ts
import { defineConfig } from "vite";
import { createAsciidoc } from "@eclipsefdn/vite-plugin-asciidoctor";
import { createRequire } from "module";

const require = createRequire(import.meta.url);

export default defineConfig({
  plugins: [
    createAsciidoc([
      {
        // ... your file config
        asciidocOptions: {
          backend: "revealjs",
          // ... other options
          attributes: {
            // ... other attributes
            // Point to the theme's SCSS file
            revealjs_customtheme: require.resolve("@eclipsefdn/revealjs-solstice/theme"),
            // Add the custom templates directory
            'template_dirs': [
              require.resolve("@eclipsefdn/revealjs-solstice/templates")
            ],
            // Enable shared docinfo for the brand plugin
            docinfo: "shared",
          },
        },
      },
    ]),
  ],
});

2. Add Branding with the Brand Plugin

This package includes a Reveal.js plugin to automatically add a footer with your logo and copyright notice to every slide.

To use it, create a docinfo-footer.html file in your slides directory (e.g., slides/docinfo-footer.html). Add the following content to it, customizing the logo paths and copyright text as needed.

<!-- slides/docinfo-footer.html -->
<script type="module">
  import { BrandPlugin } from "@eclipsefdn/revealjs-solstice";

  Reveal.configure({
    brand: {
      logo: {
        light: "/logo_black.png", // Path to your light logo in the public folder
        dark: "/logo_white.png",   // Path to your dark logo in the public folder
      },
      copyright:
        "Your copyright notice here.",
    },
  });

  Reveal.registerPlugin(BrandPlugin);
</script>

The docinfo: shared attribute you set in vite.config.ts will instruct Asciidoctor to load this file for all your slides. The plugin will then read the configuration and add the footer.