idyll-lang/idyll

Katex in static output

Open

#655 geöffnet am 1. Juli 2020

Auf GitHub ansehen
 (3 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (1.977 Stars) (97 Forks)batch import
CLIGood First PRbughelp wanted

Beschreibung

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

  • OS: Arch Linux
  • Browser: Firefox
  • Version: 77.0.1

Contributor Guide

Tech Stack
javascriptcss
Domain
frontend
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
under 1 hour
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
mostly clear
Voraussetzungen
basic HTML/CSSunderstanding of static build process
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
80
Research-Richtung
The fix is to include the Katex CSS in the generated stylesheet instead of using a protocol relative URL. Examine the build process in Idyll, particularly in the builder module where the <link> tag is inserted. Ensure the CSS is either bundled locally or the URL is changed to absolute https. Also check for similar external resources that may break under file:// protocol.