Commit e3384922 authored by Robert Knight's avatar Robert Knight

Fix KaTeX font loading

When rendering math, the custom KaTex fonts failed to load due to the
relative URL references in `build/styles/katex.min.css` not matching the
actual location of the fonts in `build/fonts`. The KaTeX CSS assumes a
URL structure like:

```
katex.min.css
fonts/
  KaTeX_AMS-Regular.woff2
```

Previously font URLs in katex.min.css were rewritten from
`url('fonts/foo.woff2')` to `url('../fonts/foo.woff2')` by a PostCSS
plugin when building the CSS bundles. However this got lost when
replacing the client's local style-bundling script with the one from the
@hypothesis/frontend-shared package.

By relocating the fonts to a subdirectory of `build/styles` we can make
the asset references work without needing to do any rewriting of URLs in
the KaTeX CSS bundle.

In the process, the list of fonts included in the bundle was simplified
to include just WOFF2 fonts, since all modern browsers support that
format. Additionally an obsolete reference to fonts in src/styles/vendor
was removed.
parent 98d041b4
...@@ -17,8 +17,6 @@ import manifest from './scripts/gulp/manifest.js'; ...@@ -17,8 +17,6 @@ import manifest from './scripts/gulp/manifest.js';
import serveDev from './dev-server/serve-dev.js'; import serveDev from './dev-server/serve-dev.js';
import servePackage from './dev-server/serve-package.js'; import servePackage from './dev-server/serve-package.js';
const FONTS_DIR = 'build/fonts';
gulp.task('build-js', () => buildJS('./rollup.config.mjs')); gulp.task('build-js', () => buildJS('./rollup.config.mjs'));
gulp.task('watch-js', () => watchJS('./rollup.config.mjs')); gulp.task('watch-js', () => watchJS('./rollup.config.mjs'));
...@@ -48,17 +46,13 @@ gulp.task( ...@@ -48,17 +46,13 @@ gulp.task(
}) })
); );
const fontFiles = [ const fontFiles = ['node_modules/katex/dist/fonts/*.woff2'];
'src/styles/vendor/fonts/*.woff',
'node_modules/katex/dist/fonts/*.woff',
'node_modules/katex/dist/fonts/*.woff2',
];
gulp.task('build-fonts', () => { gulp.task('build-fonts', () => {
return gulp // Fonts are located in a subdirectory of `build/styles` so that we can reuse
.src(fontFiles) // KaTeX's CSS bundle directly without any URL rewriting.
.pipe(changed(FONTS_DIR)) const fontsDir = 'build/styles/fonts';
.pipe(gulp.dest(FONTS_DIR)); return gulp.src(fontFiles).pipe(changed(fontsDir)).pipe(gulp.dest(fontsDir));
}); });
gulp.task( gulp.task(
...@@ -68,8 +62,8 @@ gulp.task( ...@@ -68,8 +62,8 @@ gulp.task(
}) })
); );
const MANIFEST_SOURCE_FILES = // Files to reference in `build/manifest.json`, used by `build/boot.js`.
'build/@(fonts|scripts|styles)/*.@(js|css|woff|jpg|png|svg)'; const MANIFEST_SOURCE_FILES = 'build/{styles,scripts}/*.{js,css,map}';
let isFirstBuild = true; let isFirstBuild = true;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment