+ jsDelivr usage instructions

[tomByrer]

Currently versions hosted on jsDelivr are 2.2-2.5.
I don't really have time to also push on cdnjs, so I went with the network with 0 downtime & lower latency.

[hakimel]

Thanks for taking the time to add these but I unfortunately I've decided not to add this to the readme. Serving assets from a CDN is good practice but I don't think it is very important for the typical use case of reveal.js. It also means all those resources would need to be kept up to date as the framework is updated.

If the reveal.js consisted of single concatenated CSS and JS files I would have been for dropping this in, but as the framework is currently structured you'd need to change so many different paths for this to work that I think few people will bother.

[tomByrer]

Thanks for your consideration!

[lsorber]

I would actually be interested in a jsdelivr-hosted reveal.js, it would be much more convenient to me than cloning the repo every time I create a new presentation. It would also allow users to have a folder with presentation htmls without any dependency clutter on the filesystem.

@tomByrer Any chance you could update jsdelivr to match the latest reveal.js release?

[tomByrer]

You or @hakimel can update the files to allow auto-updating. Sorry I'm swamped now.

[patarapolw]

I believe there should be instructions on this for https://github.com/hakimel/reveal.js#client-presentation for Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc.

For example, on the example index.html or demo.html, you can put

<script>
var revealCDN = "";  // Replace with 'https://cdn.jsdelivr.net/npm/reveal.js@VERSION_NUMBER/' if you need a CDN for jsDelivr.
var revealCSS = [
  { href: "css/reset.css" },
  { href: "css/reveal.min.css" },
  { href: "css/theme/white.css", id: "theme" },
  { href: "lib/css/monokai.css", id: "highlightTheme" },
  { href: window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css' }
];

revealCSS.forEach(function (css) {
  css.href = revealCDN + css.href;
  document.getElementsByTagName('head')[0].appendChild(Object.assign(document.createElement('link'), {
    rel: "stylesheet",
    type: "text/css",
    ...css
  }));
});

document.getElementsByTagName('head')[0].appendChild(Object.assign(document.createElement('script'), {
  type: "text/javascript",
  src: revealCDN + "js/reveal.min.js"
}));
</script>

<script>
...
Reveal.initialize({
    ...data,
    dependencies: [
        { src: `${revealCDN}plugin/markdown/marked.js` },
        { src: `${revealCDN}plugin/markdown/markdown.js` },
        { src: `${revealCDN}plugin/notes/notes.js`, async: true },
        { src: `${revealCDN}plugin/highlight/highlight.js`, async: true }
    ]
});
</script>