Search code examples
javascriptdenoreveal.jsfreshjs

How to use reveal.js with Deno Fresh?

In my understanding, reveal.js is just vanilla JS, so there should be no problem when using it with Deno.

On routes/index.tsx I have:

import Island from "../islands/Island.tsx";

export default function Home() {
  return (
    <Island />
  );
}

And on islands/Island.tsx I have:

import {useEffect} from 'preact/hooks'
import Reveal from '../reveal/js/index.js';

export default function Island() {
  useEffect(()=> {
    const deck = new Reveal()
    deck.initialize();
  }, [] ) 
  return (
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
  ) 
}

I expect this to return a basic slide on the browser, but it shows the text Resume presentation at the bottom left corner. Why is that?

Solution

  • Don't forget to add the styles to routes/_app.tsx:

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/reveal.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/reset.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/theme/simple.css" />