search

idyll-lang / idyll

Create explorable explanations and interactive essays.
http://idyll-lang.org/
MIT License
2.01k stars 87 forks source link

Katex in static output #655

Open yourealwaysbe opened 4 years ago

yourealwaysbe commented 4 years ago

The Katex CSS does not properly load in the static output of Idyll Equations leading to duplicated equations. It is linked via a URL that does not work under the file:// protocol.

To Reproduce

  1. idyll create
  2. accept defaults to produce a basic article
  3. replace index.idyll with a file containing only "[Equation]x = x + 1[/Equation]"
  4. run "idyll build"
  5. open with "firefox build/index.html"
  6. the equation displays twice

The equation displays twice because the Katex stylesheet appears to be included with a URL that does not work under the file:// protocol. Could the CSS be included in the stylesheet produced by "idyll build" instead?

    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css"
    />

Expected behavior Equation appears once / css is loadable.

Desktop (please complete the following information):

mathisonian commented 4 years ago

@yourealwaysbe does changing the URL to explicitly be https:// solve this problem? If so that's probably the simplest fix but we could alternatively conditionally include it in the CSS bundle that idyll produces.

If we need to update the CSS building logic that is done here https://github.com/idyll-lang/idyll/blob/master/packages/idyll-cli/src/pipeline/css.js#L16-L26

yourealwaysbe commented 4 years ago

Changing the URL fixes it.

Am i right in thinking that the static page output is otherwise self-contained, except the katex CSS link?

mathisonian commented 4 years ago

Yes that's right @yourealwaysbe