Feature Discussion: MathJax prerendering

[wilbowma]

It feels terrible to watch 30MB of JS slowly load my otherwise static site. Thankfully, with a little bit of nodeJS, one can prerender MathJax and regain a static page. I've integrated this into my own website, but I'm thinking it would be a neat feature to add to Frog.

I'm considering the following design.

1. Require mathjax-node-page to be installed in the Frog project directory. (see https://github.com/wilbowma/mathjax-node-page)
2. Add a configuration key to .frogrc that enables MathJax prerendering
3. When raco frog -b is run, for each HTML $FILE that contains MathJax, run TMP=$(mktemp); cp $FILE $TMP; ./node_modules/.bin/mjpage --fontURL="" < $TMP > $FILE

Thoughts and comments welcome.

[greghendershott]

I agree with the goal. Frog is a static generator.

• For syntax highlighting, instead of a run-time JS highlighter, we prefer to use Pygments at build-time. Even though it means people who want syntax-highlighting need to install Pygments.

• For rendering math, it makes sense to have a similar preference. Even though it means people who want that would need to install Node.

• For rendering responsive images at build-time, @tger did a lot of work to prepare a solution requiring ImageMagick to be installed -- PR #166, not yet merged. And just recently proposed a plugin API: #193.

Probably all of these should be handled consistently.

[gerdint]

Right, this feature sounds like another good candidate for a plugin, in particular if it depends on Node.js.

Enhance-body could be used to find the MathJax and do the conversion, pretty much in an identical fashion to the Pygments code I reckon.

[wilbowma]

Oh great! I didn't notice the plugin API. I'll start looking at how I could implement this feature as a plugin.

[gerdint]

It is not merged yet but should be very usable if you want to have a go. Get it from the plugins branch in my Frog repository and let me know how it works for you. There is not much in the way of documentation but there are contracts for exported API bindings. See the frog-hello plugin referenced from #193 on how to get started.

[LeifAndersen]

Any updates on this issue? I would love to see this become a part of frog. (Running mathjax at page view time also makes me cry)

[greghendershott]

The plugin API instead ended up being, users can supply an enhance-body definition in their frog.rkt configuration, to munge the content.

(Frog supplies a few common transformations in the frog/enhance-body module, but that's just ordinary Racket code -- just functions from/to (listof xexpr/c). You can require other Racket code, or even define such functions in frog.rkt.)

Regardless, it should be possible shelling out to node as @wilbowma originally outlined.

I don't know if he still wants to do that, or if you do? (I don't have time now. Also I won't be able to dogfood math symbols in blog posts.)

I'd be happy to take a PR adding this in frog/enhance-body. Or, if someone wanted to do this as a separate Racket package, I'd be happy to update the docs with a link to that.

[wilbowma]

No updates yet, and I likely won't find time for this before Jan, given my schedule. (Unless I become suddenly inspired). My current setup, automating things through make, is working well enough for my 1 blog post using mathjax.

[soegaard]

Have you considered KaTeX instead?

It’s used by Khan Academy.

fre. 21. apr. 2017 kl. 00.33 skrev William J. Bowman < [email protected]>:

It feels terrible to watch 30MB of JS slowly load my otherwise static site. Thankfully, with a little bit of nodeJS, one can prerender MathJax and regaining a static page. I've integrated this into my own website, but I'm thinking it would be a neat feature to add to Frog.

I'm considering the following design.

1. Require mathjax-node-page to be installed in the Frog project directory. (see https://github.com/wilbowma/mathjax-node-page)
2. Add a configuration key to .frogrc that enables MathJax prerendering
3. When raco frog -b is run, for each HTML $FILE that contains MathJax, run TMP=$(mktemp); cp $FILE $TMP; ./node_modules/.bin/mjpage --fontURL="" < $TMP > $FILE

Thoughts and comments welcome.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/greghendershott/frog/issues/191, or mute the thread https://github.com/notifications/unsubscribe-auth/AAcLxeQbB0L6mvxgDeQGh7b3Om53uoDKks5rx90tgaJpZM4NDp_f .

--

Jens Axel Søgaard

[wilbowma]

I have, but my primary concern was static rendering, and I couldn't find any way to get KaTeX to statically render.