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/reveal.js@4.3.1/dist/reveal.css" />
<link rel="stylesheet" href="https://unpkg.com/reveal.js@4.3.1/dist/reset.css" />
<link rel="stylesheet" href="https://unpkg.com/reveal.js@4.3.1/dist/theme/simple.css" />