search

ralfbiedert / cheats.rs

Rust Language Cheat Sheet - https://cheats.rs
https://cheats.rs
4.11k stars 385 forks source link

EPUB version of Rust cheat sheet #142

Open oscaretu opened 3 years ago

oscaretu commented 3 years ago

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 commented 3 years ago

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

oscaretu commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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:

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

oscaretu commented 3 years ago

@ralfbiedert, does this have the expected appearance?

imagen

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

ralfbiedert commented 3 years ago

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).