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:
<code>import Island from "../islands/Island.tsx";
export default function Home() {
return (
<Island />
);
}
</code>
<code>import Island from "../islands/Island.tsx";
export default function Home() {
return (
<Island />
);
}
</code>
import Island from "../islands/Island.tsx";
export default function Home() {
return (
<Island />
);
}
And on islands/Island.tsx
I have:
<code>import { IS_BROWSER } from "$fresh/runtime.ts";
import Reveal from 'npm:reveal.js';
import Markdown from 'npm:reveal.js/plugin/markdown/markdown.esm.js';
export default function Island() {
if (IS_BROWSER) {
console.log("???? ~ Island ~ window:", window)
const deck = new Reveal({
plugins: [Markdown],
});
deck.initialize();
return (
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
);
}
}
</code>
<code>import { IS_BROWSER } from "$fresh/runtime.ts";
import Reveal from 'npm:reveal.js';
import Markdown from 'npm:reveal.js/plugin/markdown/markdown.esm.js';
export default function Island() {
if (IS_BROWSER) {
console.log("???? ~ Island ~ window:", window)
const deck = new Reveal({
plugins: [Markdown],
});
deck.initialize();
return (
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
);
}
}
</code>
import { IS_BROWSER } from "$fresh/runtime.ts";
import Reveal from 'npm:reveal.js';
import Markdown from 'npm:reveal.js/plugin/markdown/markdown.esm.js';
export default function Island() {
if (IS_BROWSER) {
console.log("???? ~ Island ~ window:", window)
const deck = new Reveal({
plugins: [Markdown],
});
deck.initialize();
return (
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
);
}
}
It’s runnable, but there is no slides on the browser. Do you know why is that?