Khan / engblog

KA Engineering blog.
http://engineering.khanacademy.org
Other
29 stars 20 forks source link

Add support for stylesheets, post-article scripts #34

Closed wchargin closed 9 years ago

wchargin commented 9 years ago

Summary: Pull request #33 adds support for asynchronous scripts, which is great! For full KaTeX support, though, we need to pull in CSS and fonts; to auto-render, we need to wait until the DOM is loaded. This patch adds a few more fields to the frontmatter that do just that.

It also adds a simple KaTeX entry point, both for testing that this works and for actual usage.

It doesn't include font support, because I don't think that'd play nice with the CSS inlining we have.

Depends on #33.

Test Plan:

Sample input:

title: Testing math
published_on: August 28, 2015
author: R. J. Drofnats
team: Web Frontend
async_scripts: ["https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.js", "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/contrib/auto-render.min.js"]
stylesheets: ["https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css"]
postcontent_scripts: ["/javascript/katex-entry.js"]
...

Many people know that $A = \pi r^2$.
Leonhard Euler came to fame for showing that $$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6},$$
using novel techniques whose proof would follow much later.

Sample output:

Sample output

wchargin commented 9 years ago
wchargin commented 9 years ago

@xymostech Do you know where I can get a hosted copy of a later version of KaTeX? The cdnjs version is at 0.3.0, which doesn't support array :(

I could grab it from http://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css but I don't know if that's really allowed.

xymostech commented 9 years ago

If your katex-entry.js script runs in a setInterval, is there a reason you need it to go after the content?

wchargin commented 9 years ago

I put it after content because I can't poll on the <article> element existing, so this is to protect against the (rare? impossible?) case where KaTeX is ready before the content.

xymostech commented 9 years ago

I was thinking that something in setInterval would never get run before the page is loaded, but upon further thought that might not be true. This works fine!

xymostech commented 9 years ago

Oh I forgot to respond to

Do you know where I can get a hosted copy of a later version of KaTeX?

The answer is: we should probably make a KaTeX release and then get it put on cdnjs. Until then, you can probably use rawgit's hosting stuff, e.g.:

https://cdn.rawgit.com/Khan/KaTeX/v0.5.0/dist/katex.min.js https://cdn.rawgit.com/Khan/KaTeX/v0.5.0/dist/katex.min.css

(I don't think using the files from khan.github.io/KaTeX is allowed)

wchargin commented 9 years ago

Cool! I'll update this before merging. I'll use 0.5.0 unless you're planning to release \array{cc|c} in the next week or so?

I saw that it had been merged to master but I don't know how your releases work.

xymostech commented 9 years ago

We can probably do that! We can just make a point release to get that and \limits/\nolimits released.

sophiebits commented 9 years ago

(I think we just need to set up the bower autoupdate for cdnjs now…)

itsjohncs commented 9 years ago

Why do we want a hosted version rather than just sticking it in /javascript?

xymostech commented 9 years ago

Easier to update in the future? We don't have to host the fonts?

wchargin commented 9 years ago

Yeah, I was thinking the fonts would be the biggest problem because CSS is minified and I don't know how that'd work. Any ideas?

itsjohncs commented 9 years ago

Oh I see, that makes sense. All well, I guess this blog post will just take longer to load than others, no dire harm in that.