Customizing kanidm with css & images

services:
    kanidm:
        image: docker.io/kanidm/server:latest
        ports:
            8443:8443
        volumes:
            - ./data:/data:rw,Z
            - ./hpkg/img:/hpkg/img:Z
            - ./hpkg/style.css:/hpkg/style.css:Z⏎

body {
  // all assets in the hpkg folder are hosted in the `/pkg` path in Kanidm
  background-image: url(/pkg/img/bg.jpg);
  background-size: cover;
}

// Script generated by chatgpt basically just includes the <image> tags in a svg to base64 to make it so the image loads
const fs = require("fs").promises;
const path = require("path");
const { JSDOM } = require("jsdom"); // Install with: npm install jsdom

async function embedSvgImages(inputSvgPath, outputSvgPath) {
    try {
        // 1. Read the input SVG file
        const svgContent = await fs.readFile(inputSvgPath, "utf8");
71 collapsed lines

        // 2. Parse the SVG content using JSDOM
        const dom = new JSDOM(svgContent, { contentType: "image/svg+xml" });
        const document = dom.window.document;

        // 3. Find all <image> elements
        const imageElements = document.querySelectorAll("image");

        for (const imageElement of imageElements) {
            let href = imageElement.getAttribute("href");

            // Check if href exists and is not already a data URI
            if (href && !href.startsWith("data:")) {
                // Resolve the absolute path of the image
                const imagePath = path.resolve(
                    path.dirname(inputSvgPath),
                    href,
                );

                try {
                    // Read the image file as a buffer
                    const imageData = await fs.readFile(imagePath);

                    // Determine the MIME type
                    const ext = path.extname(imagePath).toLowerCase();
                    let mimeType;
                    switch (ext) {
                        case ".png":
                            mimeType = "image/png";
                            break;
                        case ".jpg":
                        case ".jpeg":
                            mimeType = "image/jpeg";
                            break;
                        case ".gif":
                            mimeType = "image/gif";
                            break;
                        case ".webp":
                            mimeType = "image/webp";
                            break;
                        case ".svg":
                            mimeType = "image/svg+xml";
                            break;
                        default:
                            console.warn(
                                `Warning: Unknown image type for ${href}. Skipping embedding.`,
                            );
                            continue; // Skip this image if type is unknown
                    }

                    // Convert image data to Base64
                    const base64Data = imageData.toString("base64");

                    // Create the data URI
                    const dataUri = `data:${mimeType};base64,${base64Data}`;

                    // Update the href attribute
                    imageElement.setAttribute("href", dataUri);
                    console.log(`Embedded image: ${href}`);
                } catch (readError) {
                    console.error(
                        `Error reading image file ${imagePath}: ${readError.message}`,
                    );
                }
            }
        }

        // 4. Get the modified SVG content
        const modifiedSvgContent = dom.serialize();

        // 5. Write the modified SVG content to the output file
        await fs.writeFile(outputSvgPath, modifiedSvgContent, "utf8");
        console.log(
            `Successfully embedded images and saved to ${outputSvgPath}`,
        );
    } catch (error) {
        console.error(`Error processing SVG: ${error.message}`);
        process.exit(1);
    }
}

// --- Command Line Argument Handling ---
const args = process.argv.slice(2); // Get arguments excluding 'node' and 'script-name'

if (args.length !== 2) {
    console.log(
        "Usage: node embed-svg-images.js <input-svg-file> <output-svg-file>",
    );
    console.log("Example: node embed-svg-images.js input.svg output.svg");
    process.exit(1);
}

const inputSvgFile = args[0];
const outputSvgFile = args[1];

embedSvgImages(inputSvgFile, outputSvgFile);

# or use node or deno whatever you prefer bun is the easiest though you wont need to npm i anything
bun embed-svg-images.js logo_src.svg logo.svg
bun embed-svg-images.js logo-square_src.svg logo-square.svg

<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">
 <image
    href="./confused.png"
    x="0"
    y="0"
    width="64"
    height="64"
    preserveAspectRatio="xMidYMid meet"
    />
</svg>

<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">
 <image href="data:image/png;base64,ggg==" x="0" y="0" width="64" height="64" preserveAspectRatio="xMidYMid meet"/>
</svg>