Javascript module import problem

[yuxi-liu-wired]

In https://web.archive.org/web/20240102002420/https://yuxi-liu-wired.github.io/blog/posts/wigner-rotation/, there are several imports of javascript files for interactive content, all using p5.js.

The following kind of import works:

<div class="flex-container">
    <div id="velocity-canvas"></div>
    <div id="spacetime-canvas"></div>
</div>
<style>
.flex-container {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically (if they have different heights) */
}
</style>
<script type="text/javascript" src="/web/20240102002420js_/https://yuxi-liu-wired.github.io/blog/posts/wigner-rotation/figure/3d/3d_wigner_sketch.js"></script>

but the following does not:

<div class="flex-container">
    <div class="upper-canvases">
        <div id="square-x-canvas"></div>
        <div id="square-y-canvas"></div>
    </div>
    <div id="square-main-canvas"></div>
</div>
<script charset="UTF-8" type="module">
    import { squareSketch } from './figure/3d/3d_square_sketch.js';
    squareSketch('square-x-canvas', 'square-y-canvas', 'square-main-canvas');
</script>

Tested on both Firefox and Chrome in incognito.

[yuxi-liu-wired]

I think the problem happens at the point of archival. Specifically, in the original page, we have

<div class="flex-container">
    <div id="velocity-canvas"></div>
    <div id="spacetime-canvas"></div>
</div>
<style>
.flex-container {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically (if they have different heights) */
}
</style>
<script type="text/javascript" src="./figure/3d/3d_wigner_sketch.js"></script>

archived into

<div class="flex-container">
    <div id="velocity-canvas"></div>
    <div id="spacetime-canvas"></div>
</div>
<style>
.flex-container {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically (if they have different heights) */
}
</style>
<script type="text/javascript" src="/web/20240102002420js_/https://yuxi-liu-wired.github.io/blog/posts/wigner-rotation/figure/3d/3d_wigner_sketch.js"></script>

But when the import becomes encapsulated in a module, the url does not get automatically converted. The following source code

<div class="flex-container">
    <div class="upper-canvases">
        <div id="square-x-canvas"></div>
        <div id="square-y-canvas"></div>
    </div>
    <div id="square-main-canvas"></div>
</div>
<script charset="UTF-8" type="module">
    import { squareSketch } from './figure/3d/3d_square_sketch.js';
    squareSketch('square-x-canvas', 'square-y-canvas', 'square-main-canvas');
</script>

is archived verbatim, which for some reason fails to work, even though ./figure/3d/3d_square_sketch.js is archived correctly to https://web.archive.org/web/20240102002422/https://yuxi-liu-wired.github.io/blog/posts/wigner-rotation/figure/3d/3d_square_sketch.js

[jjjake]

Hello, this is the repository for the Internet Archive Python library and command-line tool. For any other questions, please email info@archive.org. Thanks!