Refactor JavaScript module for QMD file

[d2phap]

1. Create the folder structure:

| src/
|-- shared/                // contains files that will be included in qmd file
|   |-- header.html        // contains all HTML code included in the `<header>` tag of a qmd file
|-- js/                    // contains JavaScript files corresponding to each qmd file
|   |-- api-embeddings.js
|   |-- api-authentication-and-jobs.js
|
|-- api-embeddings.qmd
|-- api-authentication-and-jobs.qmd

2. Use include-in-header

Quarto supports inserting file content into <header> tag. All CSS/JS files should be included here.

Create a header.html file, put the common content inside:

<!-- in header.html file -->
<script src="https://unpkg.com/swagger-ui-dist@5.1/swagger-ui-bundle.js"></script>

We can add it in the _quarto.yml or in each .qmd file:

format:
  html:
    include-in-header:
      - header.html

This will make sure the swagger-ui-bundle.js is loaded in the <header> tag,
so we can get rid of using setTimeout(..., 1000) in addSwaggerEndpointsToTOC.js

3. Create separate JS file for each .qmd file

Since we can use <script type="module"> in .qmd file, we should move all the JavaScript code inside the .qmd into separate files. The folder structure can by like this:

In .qmd file, we can import the js file at the end of QMD file:

<script type="module" src="./js/api-embeddings.js">

4. For future:

Manage JavaScript files by a module bundler (webpack, or vite, ...) so that we can use TypeScript.