New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to Produce a single file #121

Closed
phillord opened this Issue Jun 6, 2015 · 18 comments

Comments

Projects
None yet
5 participants
@phillord

phillord commented Jun 6, 2015

It would be lovely to have an option to produce a single file -- that is images inline as data-uris (already supported by the org-html export I believe), and the JS pulled in as well.

It's nice to be able to pass around presentations as a single, coherent, file with everything in it.

@yjwen

This comment has been minimized.

Owner

yjwen commented Jun 8, 2015

OK, let me check how org-html is doing and find a way in org-reveal for embedding images and JS.

@phillord

This comment has been minimized.

phillord commented Jun 8, 2015

I think I have given you false information -- it looks like org-html is not doing this as it stands.

The JS and CSS is pretty obvious -- I have this half working (reveal.js has it's own imports which I don't have fixed yet).

Images (and videos and so forth) work throught data-uris -- basically, you base64 everything, put "data:" at the front and use it as a URI. A quick looks suggests that this needs to be patched in org-html (or advised in org-reveal).

I'll push my branch up, so you can see what I've done so far.

@phillord

This comment has been minimized.

phillord commented Jun 8, 2015

So this is progress so far....

https://github.com/phillord/org-reveal/tree/one-file

Not finished yet -- I need to do the rest of the JS and test it out properly.

@snosov1

This comment has been minimized.

snosov1 commented Jul 8, 2015

Hello, there!

I wonder what is the state of this task?

I've tested the branch mentioned by @phillord and it seems half-way there to me. I exported one of my presentations and it looked fine with only the images missing. Are there any plans to actually make it work? I believe this feature would really be a killer.

@phillord

This comment has been minimized.

phillord commented Jul 13, 2015

I have found one significant problem -- the presentation notes use a secondary HTML file, embedded in the reveal-js source. I can't think of a solution to this (without changing reveal-js).

At the moment, I am not actively working on this due to time constraints -- reveal is lacking a key feature for me (or rather it has a key feature the breaks my use case!) -- it autofits text to screen, while I want display longer code fragments and change the font size and move around with scrollbars. This also needs a reveal-js fix.

@snosov1

This comment has been minimized.

snosov1 commented Jul 14, 2015

Ok, I see, thanks. From my side, I don't see the lack of presentation notes to be a major drawback, since I don't really use them. And even if I did, I believe, the main use case for a standalone file is to share it with listener. Giving the speaker notes out might not even be desired.

Anyways, as I said, it seems "almost useful" to me with only the images missing. Can you, please, elaborate a bit more on what's needed to make them work, so I'll look into it when I have a chance?

@phillord

This comment has been minimized.

phillord commented Jul 14, 2015

Images are easy -- when you hit a org-mode link to image, instead of inserting a href hyperlink, you need a data-uri instead, which is a base64 encoding of the image. Unsurprisingly, John Kitchin has been there already! Although this is for source and not for images.

/http://kitchingroup.cheme.cmu.edu/blog/2015/05/09/Another-approach-to-embedding-org-source-in-html/

The speaker notes is unfortunate, though. One of the use cases is for putting the presentation onto a presentation machine in a single go. Probably reveal-js could support this in the same way -- generate the HTML that it uses or use a data URI.

@snosov1

This comment has been minimized.

snosov1 commented Jul 14, 2015

Big thanks for that! Will try to make it work next time I need it.

@titaniumbones

This comment has been minimized.

Contributor

titaniumbones commented Jul 16, 2015

I think to get images to be inserted as data-uris, you need to rewrite org-html-link as org-reveal-link, including a stanza that will, under the appropriate circumstances, replace the "path" variable with (format "data:%s;charset=US-ASCII;base64,%s" (mm-default-file-encoding path) (base64-encode-string (file-string path))), where file-string is a function that reads in the contents of the file as a string.

ANyway, something similar to that, I believe.

@yjwen

This comment has been minimized.

Owner

yjwen commented Jul 20, 2015

I am wonders how about the reveal.js scripts. To make org-reveal presentations into one single HTML, there must be a way to embed reveal.js scripts into that HTML. It is sufficient by copying the necessary scripts into HTML?

@titaniumbones

This comment has been minimized.

Contributor

titaniumbones commented Jul 20, 2015

I just tried it -- copying the body of all the js scripts into <script> tags and removing the original links & the json objects at the bottom -- this seems to work fine, though I haven't tested extensively.

Obviously, the new html file will be somewhat more difficult to read, because it will be cluttered with all this extra text. But since most people won't be reading it at all, this seems like a good trade-off.

@yjwen

This comment has been minimized.

Owner

yjwen commented Jul 21, 2015

I also did a try. By embedding the contents of the external reveal.js css and js, a simple HTML showed properly. So css and js should not be a problem.

But there is one more question. I see in the HTML there are embedded JS snippet that are referencing external JS files, like below:

dependencies: [
 { src: 'file:///d:/src/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
 { src: 'file:///d:/src/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///d:/src/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///d:/src/reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
 { src: 'file:///d:/src/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]

Any idea about resolving such dependencies on external js?

@titaniumbones

This comment has been minimized.

Contributor

titaniumbones commented Jul 21, 2015

I put these into <script> tags as well, and everything seemed to work
fine. I think that snippet is generated directly by ox-reveal.js, on
line 542 and following. That part of the "concat" command would have to
become a conditional, which would simply insert new script tags into the
file if the "single-file" flag is non-nil. Is that right?

On 21/07/15 11:59 AM, Yujie Wen wrote:

I also did a try. By embedding the contents of the external reveal.js
css and js, a simple HTML showed properly. So css and js should not be
a problem.

But there is one more question. I see in the HTML there are embedded
JS snippet that are referencing external JS files, like below:

dependencies: [
{ src: 'file:///d:/src/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'file:///d:/src/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'file:///d:/src/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'file:///d:/src/reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'file:///d:/src/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]

Any idea about resolve some dependencies on external js?


Reply to this email directly or view it on GitHub
#121 (comment).

@yjwen

This comment has been minimized.

Owner

yjwen commented Jul 27, 2015

Just updated the master branch.

A new option reveal_single_file to control exporting into single file.

#+OPTIONS: reveal_single_file:t

Support embedding regular image files and SVG.

@titaniumbones

This comment has been minimized.

Contributor

titaniumbones commented Jul 27, 2015

i think export fails if there's a link to a remote (http://) image file.

Debugger entered--Lisp error: (file-error "Opening input file" "No such file or directory" "//www.teacheranthoney.com/uploads/1/1/5/7/11570225/2906271_orig.gif")
  insert-file-contents("//www.teacheranthoney.com/uploads/1/1/5/7/11570225/2906271_orig.gif" nil nil nil nil)
  insert-file-contents-literally("//www.teacheranthoney.com/uploads/1/1/5/7/11570225/2906271_orig.gif")
  (progn (insert-file-contents-literally path) (base64-encode-region 1 (point-max)) (buffer-string))
  (unwind-protect (progn (insert-file-contents-literally path) (base64-encode-region 1 (point-max)) (buffer-string)) (and (buffer-name temp-buffer) (kill-buffer temp-buffer)))
...
...
  org-reveal-export-to-html-and-browse(nil nil nil nil)
  org-export-dispatch(nil)
  funcall-interactively(org-export-dispatch nil)
  call-interactively(org-export-dispatch nil nil)
  command-execute(org-export-dispatch)
@yjwen

This comment has been minimized.

Owner

yjwen commented Jul 29, 2015

Updated. Now org-reveal will check if the image url is a local readable file before open it.

@yjwen

This comment has been minimized.

Owner

yjwen commented Jul 31, 2015

Let me close the issue now. If there is any problem about single-file exporting, please re-open it.

@yjwen yjwen closed this Jul 31, 2015

@gentius

This comment has been minimized.

gentius commented Apr 5, 2016

It seems enabling reveal_single_file doesn't also embed the extra CSS declared in #+REVEAL_EXTRA_CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment