@eclipsefdn/revealjs-solstice/README.md

A flexible Reveal.js template with Eclipse Design System

# @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

```bash
yarn add @eclipsefdn/revealjs-solstice
```

## Usage

This package is designed to be used with AsciiDoc and [`@eclipsefdn/vite-plugin-asciidoctor`](https://www.npmjs.com/package/@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.

```javascript
// 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.

```html
<!-- 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.