Fiddling With Docusaurus

September 28, 2023

depends on how you view it, but I don't feel like reinventing a wheel just to make a static blog site. haha
On the positive side, I can throw JPEG-XL images here too and get it rendered on supported browsers, yay!

![Spectral Zephyr](./zeph-spectral.jxl)

Spectral Zephyr

zooming

May break on JXL-unsupported browsers if you try to zoom a broken/unrendered image and may freeze the page! For example I use react-medium-image-zoom plugin for image zooming in this page.

Although Docusaurus always complains a lot during compile time:

[WARNING] The image at "{path_to_image.jxl}" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: {path_to_image.jxl})

And nope, using JSX didn't work either...

ERROR in {path_to_image.jxl} 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

So yeah, sadly <picture> tag didn't work with JXL here either!

EDIT: Found some workaround yay!

The first one is to insert file-loader! before the URL, for example image below:
```
<picture>
    <source srcSet={require("file-loader!./dv-nebia-nevia-sub.jxl").default} type="image/jxl"/>
    <img src={require("./dv-nebia-nevia-sub.jpg").default} width="100%" />
</picture>
```
However, this method requires a manual insertion for each <picture> tag and will strip any filenames (which is sad!). If the image is still broken, use !!file-loader! instead. Or maybe Docusaurus already fixed the module on the next method!
The second method requires to fiddle with Docusaurus' webpackUtils source which will use the internal parsing and keeping the filename intact:

On node_modules, find webpackUtils.js and/or webpackUtils.ts. In my case it's on node_modules/@docusaurus/utils/lib/. Open the file and find getFileLoaderUtils() function, on const rules variable find image field and add jxl to the list:
```
images: () => ({
    use: [loaders.url({ folder: 'images' })],
    test: /\.(?:ico|jpe?g|png|gif|webp|avif|jxl)(?:\?.*)?$/i,
}),
```
This way we don't need to add file-loader! and just add an URL like usual!
```
<picture>
    <source srcSet={require("./dv-nebia-nevia-sub.jxl").default} type="image/jxl"/>
    <img src={require("./dv-nebia-nevia-sub.jpg").default} width="100%" />
</picture>
```

Example result:

And there you have it! JPEG XL-enabled Docusaurus with fallback image!

Spare me, I'm still a total noob in node.js development... I'm not even sure if those methods are safe, please ping me if you found something!

EDIT: Found some workaround yay!​

EDIT: Found some workaround yay!