Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve asset path for KaTeX fonts

Browse Source 
This adjusts our asset path handling to group KaTeX fonts in a more sensible way
alongside the other fonts we have. It also resolves production build issues on
Windows.

Fixes https://github.com/vector-im/element-web/issues/15911
This commit is contained in:
J. Ryan Stinnett 2020-12-09 17:01:40 +00:00
parent c41f164c75
commit c667473258
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
webpack.config.js
View File

@ -269,12 +269,12 @@ module.exports = (env, argv) => {
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
// CSS image usages end up in the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up
// twice.
const outputPath = getImgOutputPath(url, resourcePath);
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(path.join("../..", outputPath));
},
},
@ -285,9 +285,9 @@ module.exports = (env, argv) => {
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
const outputPath = getImgOutputPath(url, resourcePath);
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
},
@ -392,15 +392,25 @@ module.exports = (env, argv) => {
/**
* Merge assets found via CSS and imports into a single tree, while also preserving
* directories under `res`.
* directories under e.g. `res` or similar.
*
* @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
* @param {string} resourcePath The absolute path to the source file with unmodified name.
* @return {string} The returned paths will look like `img/warning.1234567.svg`.
*/
function getImgOutputPath(url, resourcePath) {
const prefix = /^.*[/\\]res[/\\]/;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
function getAssetOutputPath(url, resourcePath) {
// `res` is the parent dir for our own assets in various layers
// `dist` is the parent dir for KaTeX assets
const prefix = /^.*[/\\](dist|res)[/\\]/;
if (!resourcePath.match(prefix)) {
throw new Error(`Unexpected asset path: ${resourcePath}`);
}
let outputDir = path.dirname(resourcePath).replace(prefix, "");
if (resourcePath.includes("KaTeX")) {
// Add a clearly named directory segment, rather than leaving the KaTeX
// assets loose in each asset type directory.
outputDir = path.join(outputDir, "KaTeX");
}
return path.join(outputDir, path.basename(url));
}