Skip to content
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

EPUB version of Rust cheat sheet #142

Open
oscaretu opened this issue Aug 8, 2021 · 8 comments
Open

EPUB version of Rust cheat sheet #142

oscaretu opened this issue Aug 8, 2021 · 8 comments
Labels
help-wanted Help especially wanted. type: infrastructure Issues related to building / maintaining this sheet.

Comments

@oscaretu
Copy link
Contributor

oscaretu commented Aug 8, 2021

I think it would be useful to create a ePUB version of the Rust cheat sheet? That would be more readable in small screens, as in a smartphone, or tablets.

@ralfbiedert ralfbiedert added help-wanted Help especially wanted. type: infrastructure Issues related to building / maintaining this sheet. labels Aug 8, 2021
@ralfbiedert
Copy link
Owner

I haven't worked with ePUB before, but I'd accept PRs adding support similar to how the PDFs are generated.

@oscaretu
Copy link
Contributor Author

oscaretu commented Aug 8, 2021

Ralf, two things:

  1. One of the labels has a typo: it says type: inFAstructure instead of type: inFRAstructure ".
  2. I don't know how you have created the PDF file (is it just printing if from the browser?). If you have a Markdown file or an HTML one (among others), using pandoc you can convert it to multiple formats, including EPUB.

@oscaretu
Copy link
Contributor Author

oscaretu commented Aug 8, 2021

I`ve made a first test, executing this two command lines:

curl -L -o cheats-rs.html https://cheats.rs/
pandoc -f html -o cheats-rs.epub cheats-rs.html

I've watched it using Calibre, and some parts aren't shown properly, because I suppose they are drawn in HTML using "artificial tags" without content:

<lifetime-section>
<lifetime-example>
    <section-header>Application Memory</section-header>
    <memory-row>
        <memory-backdrop>
            <byte></byte>
            <byte></byte>
.... [deleted several <byte> tags ] ....
            <byte></byte>
            <byte></byte>
            <byte></byte>
        </memory-backdrop>
        <values>
            <value class="t byte2 hide" style="left: 57px;">S(1)</value>
        </values>
        <labels>
            <label class="" style="right: 10px;">&nbsp;</label>
        </labels>
        <subtext>Application Memory</subtext>
    </memory-row>
</lifetime-example>
<explanation>

@ralfbiedert
Copy link
Owner

ralfbiedert commented Aug 10, 2021

Interesting, ePUB might be stricter about tags. IIRC our tag use is out-of-spec, but still happens to work with all major browsers. I don't mind if a PR changes these a little bit (e.g., adding something inside <byte></byte>), but I prefer if the overall structure stays the same (e.g., I don't want to replace custom tags with <div>'s ).

One of the labels has a typo: it says type: inFAstructure instead of type: inFRAstructure ".

Hm, I can't find that, would you have a file+line, or screenshot?

Oh that tag, fixed, thanks :)

don't know how you have created the PDF file (is it just printing if from the browser?).

Yes :)

@johannst created a Github workflow in .github/workflows/ and docker/ if you need a reference.

The site itself already has a few lines of CSS / JS logic to enter "print mode", which unfolds all tabs and hides irrelevant sections. On each Git push the Docker files will serve the site from a web server, with a sandboxed Chrome rendering it like a regular browser (incl. evaluating some JavaScript for syntax highlighting); and then PDF-printing it.

Without knowing anything about ePUB, maybe it's easier to extract a version from the final DOM with the help of some JS? After all, to get proper syntax highlighting some JS will have to run anyway, as all of that is handled by Prism.js.

@oscaretu
Copy link
Contributor Author

@ralfbiedert, I don't know whether it is possible to extract a final DOM...

I was thinking in the possibility of processing the input file (with added marks using HTML comments) to create images from those blocks of "non-native HTML tags and removing those blocks and putting HTML image tags that point to the generated images.

Or, perhaps, it could be simpler preprocess the input file with regular expressions to create a temporal file that where it been changed <byte></byte> for <div class="byte"></div> (it would require additional styles).

@ralfbiedert
Copy link
Owner

I was thinking in the possibility of processing the input file (with added marks using HTML comments) to create images from those blocks of "non-native HTML tags and removing those blocks and putting HTML image tags that point to the generated images.

Or, perhaps, it could be simpler preprocess the input file with regular expressions to create a temporal file that where it been changed for

(it would require additional styles).

The whole approach might need some exploration, but I think for a nice book the DOM has to come out of a browser (otherwise syntax highlighting won't work).

I don't know if APIs exist to do that, but naively I'd try:

  • Load page in Chrome via one of these remote browser navigation API
  • Find all custom tags that render an image (there should only be a handful top-level tags to search for)
  • Render each to a canvas (is that possible?) or take screenshot inside Chrome and replace custom tag with canvas / img
  • Extract DOM as string, and canvas data as pngs
  • Invoke ePUB generator

That logic would go into a .js script inside the Docker folder, and be invoked along with the PDF code.

@oscaretu
Copy link
Contributor Author

@ralfbiedert, does this have the expected appearance?

imagen

Or should it be in bigger and bold font? Or a missing caption?

@ralfbiedert
Copy link
Owner

does this have the expected appearance?

This is technically correct, that header is only <header><code>?Sized</code></header> , which renders it either in Fira Code, or whatever your fallback monospace font is.

Or should it be in bigger and bold font? Or a missing caption?

I'm no font expert, but there might be size / weight mismatches because some fonts, in their design, interpret sizes / weights differently, and it would be hard to control for these (given the browser might fallback to a different font).

Repository owner deleted a comment Jan 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help-wanted Help especially wanted. type: infrastructure Issues related to building / maintaining this sheet.
Projects
None yet
Development

No branches or pull requests

2 participants