@eclipsefdn/revealjs-solstice/plugin/brand-plugin.js

A flexible Reveal.js template with Eclipse Design System

export const BrandPlugin = {
  id: "brand-plugin",
  init: (deck) => {
    const slides = deck.getSlides();
    const config = deck.getConfig();
    const copyright = config?.brand?.copyright;
    const logoLightSrc = config?.brand?.logo.light;
    const logoDarkSrc = config?.brand?.logo.dark;
    if (!copyright || !logoLightSrc || !logoDarkSrc) return;

    slides.forEach((_, index) => {
      const backgroundElement = deck.getSlideBackground(index);

      if (
        backgroundElement &&
        !backgroundElement.querySelector(".slide-brand-footer")
      ) {
        const brandDiv = document.createElement("div");
        brandDiv.className = "slide-brand-footer";
        brandDiv.innerHTML = `
          <span class="slide-brand-copyright">${copyright}</span>
          <img src="${logoLightSrc}" class="slide-brand-logo-light" alt="Brand Logo" />
          <img src="${logoDarkSrc}" class="slide-brand-logo-dark" alt="Brand Logo" />
        `;
        backgroundElement.appendChild(brandDiv);
      }
    });
  },
};