An ePub viewer for Grav, or a separate node.js site?

I published an open access book last November in PDF, and then this past February as ePub. (The ePub version has a few more corrections in it, but academics like to cite page numbers!)

The pdf-js plugin has been useful for me in showing some Libreoffice slide decks that I've exported to PDF. That works great.

I'm thinking (slowly) about how I might better put my ePub (which on PDF is 670 pages) on the web. Yes, I know that ePub is fundamentally HTML. However, the ePub also includes a style sheet that enables links to footnotes and references (and back). My ePub has a lot of SVG diagrams embedded in it.

If there were a plugin for Grav as easy as the one for pdf-js, the footnotes and references would be easy to test. It could be that a Grav plugin could be an easy solution ... or perhaps I should be create a node.js site as a subdomain, and work with that instead.

So far, in my searches, I've turned up:

• Readium.js Viewer at https://github.com/readium/readium-js-viewer
• Futurepress epubjs-reader at https://github.com/futurepress/epubjs-reader

Since many cPanel hosting providers now seem to offer node.js as an option, I've been exploring that. (I'm not quite done with testing and documenting of installing federated wiki on cPanel, but the thread that I started at https://github.com/fedwiki/wiki/issues/114 has a working web site).

Insights, speculation and general discussion would be welcomed!

P.S. In case you're wondering about the book, it's at http://openinnovationlearning.com/online/ . That's a Grav site!

I'd be interested in this too @daviding, and while I am not familiar with this area I've shared this question to my Twitter followers - if I get any useful info I'll share it here.

UPDATE: Futurepress epubjs-reader has been suggested, and it looks like a CDN is available of the js: http://futurepress.org/ Have you had any luck with that approach?

@paulhibbitts:
UPDATE: Futurepress epubjs-reader has been suggested, and it looks like a CDN is available of the js: http://futurepress.org/ Have you had any luck with that approach?

I haven't tried epubjs-reader. Would the suggestion be to try a simple HTML page to the CDN? Or is there an easy way to include this onto a Grav page?

(After a trip last week, I'm about 2 weeks behind, so it may take me time to get back to this. This isn't a lack of interest, just priorities in life catching up).

As I first step I'd try that sample code on the futurepress.org page in a Grav page (as Markdown supports HTML) and include the needed Div:

<div id="area">
</div>

<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script>
var book = ePub("url/to/book/");
var rendition = book.renderTo("area");
rendition.display();
</script>

I actually tried the above but got an error in the Browser Console about access to the ePub I was trying to use - maybe you will have more luck?

Really interesting! Try downloading this: https://github.com/futurepress/epubjs-reader.
There is a working example in the Reader folder.
It would be a very useful plugin, we will have to do a little thought.

@paulhibbitts:
try that sample code on the futurepress.org page in a Grav page (as Markdown supports HTML) and include the needed Div

I've created a page at http://openinnovationlearning.com/online/readepub (that temporarily is hidden from the menu).

Nothing shows up on the page, but you can see the inserted code with "View Source".

Using the pdf-js plugin, the ePub has to be in the /user/data directory. Is this a restriction that Grav puts on?

I really don't know why this is not working... anyone else?

I have not used the pdf-js plugin (I ended up using the Google Docs PDF viewer after looking at lots of options), but it is possible that it requires the PDF to be on the Grav site in question.

Here is an example embedded PDF using the Google viewer:

<div class="embed-responsive embed-responsive-4by3">
<iframe src="https://docs.google.com/gview?url=https://demo.hibbittsdesign.org/cmpt-363-182/pdfs/cmpt-363-182-course-overview.pdf&embedded=true" width="640" height="480"></iframe>
</div>

Live demo at:
https://demo.hibbittsdesign.org/cmpt-363-182/home/week-01