Embed revealjs.com slides

[ghost]

Hello

Summary

I would like to "inline show" reveal.js presentations (or at least link locally to them).

Intended use

I wonder if anyone has a smart idea how revealjs.com could be forged together with docusaurus.

I imagine writing something in this direction (pseudo):

'''
# Markdown
Here is the presentation on this topic:
![presentation](presentation.html)
'''

I mean even cooler would be:

'''
<section>
Prezi!
</section>
'''

I fear that the second option would only work with a remark-integration. But the first approach could work with some local reference.

I mean what I could also imagine is this structure:

.
├── docs
├── docusaurus.config.js
└── slides

where as slides would contain all complete html files for reveal. But how then could I link to these slides?

Thanks for some pointers, I am a bit swamped with what would be the correct architectural approach for this.

[slorber]

I think Reveal.js has. its own tooling and build process, so you cannot really integrate all that in the Docusaurus SPA easily.

As part of your build process, you can build Reveal.js apps to /dist, and just link to them with a regular markdown link (or embed into MDX with an iframe?)

We allow linking to any HTML page found in /build, and there's an escape hatch so that docusaurus does not try to navigate to that URL in a SPA-way (using history API).

For example, if you put a file in static/slides/myPresentation.html, it will appear in build/slides/myPresentation.html, and you can link to it. with [My Presentation](pathname:///slides/myPresentation)

Somehow it's similar to this Litho site where the API links to the Javadoc, but in your case you would link to the RevealJS slideshow.

[ben-xD]

Nice ideas @slorber and interesting interesting question @mambax, I'm getting somewhere with Remark in Docusaurus.

I've tried using getPathsToWatch, but unfortunately even though the build happens again, the page/browser doesn't refresh.

For future reference, here's my plugin, and it does work to rebuild the page:

const path = require('path')

module.exports = function watchStaticFilesPlugin(context, options) {
  return {
    name: 'watch-static-files-plugin',
    getPathsToWatch() {
      let watched_paths = []
      const staticFilesPath = path.resolve(context.siteDir, "static")
      const staticFiles = `${staticFilesPath}/**/*.{css,js,md}`
      watched_paths.push(staticFiles)
      return watched_paths;
    },
  }
}

The problem is the browser doesn't refresh this page. In fact, the page doesn't need to rebuild at all, so this plugin works but is not useful?

The page only needs to refresh on save, not rebuild. Not sure how I can achieve that though.

[slorber]

@ben-xD getPathsToWatch tells Docusaurus to reload the site. If you implement lifecycles like loadContent/contentLoaded it generally change files on the disk

In your case it may not trigger Webpack to rebuild and hot-reload the site if you don't emit new files that Webpack is watching

Maybe this webpack devserver option will work better in your case? You can also configure this with configureWebpack lifecycle.

https://webpack.js.org/configuration/dev-server/#devserverwatchfiles

[SteffenLm]

Hey there,
I wanted to integrate revealjs in a developer friendly way.
Here is my solution: PR.

The differences compared to the existing solution of @mambax TL;DR:

• no git submodules used package.json instead
• no separate build process with gulp needed, used docusaurus.config.js instead
• no heavy lifting with iframe and dedicated .html, used pages and custom component instead

So what is the better user experience?
Here we go 🔥 :

<Slides initSlides={defaultInitSlides}>
  <section>Slide 1</section>
  <section>
    <section>Vertical Slide 1</section>
    <section>Vertical Slide 2</section>
  </section>
  <section>Slide 3</section>
</Slides>

What do you think?

[dreadylocks]

This solution worked for me, but only if I directly navigate to http://<docusaurus-site>/slides, if I add an entry to try and go to that page in the navbar like this

{
          to: '/slides',
          label: 'Slides',
          position: 'left',
        },

it appears to be "trapped" in the router. All the docusaurus navigaion remains and it gives me a 404. I can even just press reload at that point at it works.

Is there some kind of escape I can do in the navbar to make it not use the router and go to <same url>/slides? I've also tried

to: 'http://localhost:3000/slides', and
to: 'pathname:///slides',

Possibly related, but I also had to switch onBrokenLinks to warn in the config, or else my site would no longer even build.

[slorber]

to: 'pathname:///slides' should work, or using an absoute url with a domain

If it doesn't work, please provide a repro.

[rmarting]

Wondering about how should be the right way to integrate both frameworks. Who did in a good way? Asking as some of the links shared here are not working anymore.
Thanks

[slorber]

Which links are not working anymore?

I would just use an iframe within JSX or MDX, and put revealjs assets in website/static. This solution should work today, and also in 10 years, because it's standard web/html and not tightly coupled to Docusaurus.

[rmarting]

Reading the long discussion some of the links added are not longer valid, for example:

• https://nds-swe.github.io/swdt/blog
• https://github.com/appenmaier/programming/pull/40/files

Maybe as they are a bit old. Anyway, I found the way to work it on my docusarus site, following this example from exacilburjs:

In short, my implementation is:

import React from 'react'

const DEFAULT_FRAME_STYLE = {
  width: '100%',
  height: '420px',
  border: 0,
  overflow: 'hidden',
}

const FRAME_STYLE = {
  border: '1px solid #aaa',
}

/**
 * Embeds a slide deck
 *
 * @prop title Title of the iframe
 * @prop deck The story ID in the URL to navigate to
 */
export default ({ title = '', deck = '' }) => (
  <iframe
    title={`${title}`}
    src={`/slides/${deck}`}
    frameBorder={0}
    width="100%"
    height="800"
    style={DEFAULT_FRAME_STYLE}
  ></iframe>
)

A doc page similar to:

import IFrameEmbed from '@site/src/components/IFrameEmbed';

# Title

<IFrameEmbed title="iframe title" deck="deck.html" />

And copied the reveal.js slides in the static/slides folder. This solution is working for me, in an standard way as you are saying.

Thanks

[SteffenLm]

I have issues to reply in the right thread.
But if anyone wants to have a look at the integration I mentioned earlier:
https://github.com/jappuccini/java-docs
This repo should stay ;)