feat: support embed of javascript files

- Big feature: dynamic loading and listing of JS files on every page

As an example, take a look at server-time-to-local.js. It formats the time into a specific format that the user can select on the /account or /update-account routes (settings page).

You can also add any number of JS files to /assets/js/ folder and they will all be loaded on every page (which at the same time is a limitation of this particular method).

Every JS file is embedded into a virtual file system and then served from there to the client in a separate request.

----

- Updated the Dockerfile to use more modern Go.
- Added pre-go-generated files, too.

Author: hugmouse

Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:1.20-alpine AS builder
+FROM golang:1.24.1-alpine3.21 AS builder
 
 WORKDIR /app
 COPY go.mod .

assets/js/embed.go

@@ -0,0 +1,6 @@
+package jsEmbed
+
+import "embed"
+
+//go:embed *.js
+var Scripts embed.FS

assets/js/server-time-to-local.js

@@ -0,0 +1,204 @@
+"use strict";
+
+/**
+ * @file Manages date and time formatting across the forum based on user preferences, stores them in localStorage.
+ * Also adds preference controls to /account and /update-account pages.
+ */
+
+window.addEventListener("DOMContentLoaded", () => {
+    const LOCAL_STORAGE_DATE_KEY = "userPrefDateStyle";
+    const LOCAL_STORAGE_TIME_KEY = "userPrefTimeStyle";
+    const PREVIEW_ELEMENT_ID = "preview-time";
+    const ACCOUNT_PAGE_PATHS = ["/account", "/update-account"];
+    const DATE_TIME_STYLE_OPTIONS = ["short", "medium", "long", "full"];
+    const DEFAULT_STYLE = "medium";
+
+    const timeElements = document.getElementsByTagName("time");
+    let currentPreferences = getSavedPreferences();
+
+    /**
+     * Retrieves date and time style preferences from localStorage.
+     * @returns {{dateStyle: string, timeStyle: string}} The saved preferences or defaults.
+     */
+    function getSavedPreferences() {
+        return {
+            dateStyle: localStorage.getItem(LOCAL_STORAGE_DATE_KEY) || DEFAULT_STYLE,
+            timeStyle: localStorage.getItem(LOCAL_STORAGE_TIME_KEY) || DEFAULT_STYLE
+        };
+    }
+
+    /**
+     * Saves date style preference to localStorage.
+     * @param {string} dateStyle - The selected date style.
+     */
+    function saveDateStylePreference(dateStyle) {
+        localStorage.setItem(LOCAL_STORAGE_DATE_KEY, dateStyle);
+        currentPreferences.dateStyle = dateStyle;
+    }
+
+     /**
+     * Saves time style preference to localStorage.
+     * @param {string} timeStyle - The selected date style.
+     */
+    function saveTimeStylePreference(timeStyle) {
+        localStorage.setItem(LOCAL_STORAGE_TIME_KEY, timeStyle);
+        currentPreferences.timeStyle = timeStyle;
+    }
+
+    /**
+     * Formats all <time> elements on the page with the current preferences.
+     */
+    function formatAllDates() {
+        if (!timeElements || timeElements.length === 0) {
+            console.log("[server-time-to-local.js] No <time> elements found to format.");
+            return;
+        }
+
+        try {
+            const formatter = new Intl.DateTimeFormat(navigator.language, {
+                dateStyle: currentPreferences.dateStyle,
+                timeStyle: currentPreferences.timeStyle
+            });
+
+            for (const timeElement of timeElements) {
+                const dateTimeString = timeElement.getAttribute("datetime");
+                if (dateTimeString) {
+                    try {
+                        const date = new Date(dateTimeString);
+                        timeElement.innerText = formatter.format(date);
+                    } catch (error) {
+                        console.error(`[server-time-to-local.js] Error parsing date string "${dateTimeString}":`, error, timeElement);
+                    }
+                }
+            }
+        } catch (error) {
+            console.error("[server-time-to-local.js] Error creating Intl.DateTimeFormat or formatting dates:", error, currentPreferences);
+        }
+    }
+
+    /**
+     * Updates the preview element with the current date/time formatted using current preferences.
+     */
+    function updatePreview() {
+        const previewElement = document.getElementById(PREVIEW_ELEMENT_ID);
+        if (!previewElement) {
+            return;
+        }
+
+        try {
+            const formatter = new Intl.DateTimeFormat(navigator.language, {
+                dateStyle: currentPreferences.dateStyle,
+                timeStyle: currentPreferences.timeStyle
+            });
+            previewElement.innerText = formatter.format(new Date());
+        } catch (error) {
+            console.error("[server-time-to-local.js] Error updating preview:", error, currentPreferences);
+        }
+    }
+
+    /**
+     * Creates a labeled dropdown select element for date/time style options.
+     * @param {string} id - The ID for the select element.
+     * @param {string} labelText - The text for the associated label.
+     * @param {string} selectedValue - The currently selected value.
+     * @returns {{wrapper: HTMLDivElement, selectElement: HTMLSelectElement}} The container div and the select element.
+     */
+    function createStyleDropdown(id, labelText, selectedValue) {
+        const wrapper = document.createElement("div");
+        const label = document.createElement("label");
+        label.setAttribute("for", id);
+        label.textContent = labelText;
+
+        const selectElement = document.createElement("select");
+        selectElement.setAttribute("id", id);
+        selectElement.setAttribute("name", id);
+
+        DATE_TIME_STYLE_OPTIONS.forEach(optionValue => {
+            const option = document.createElement("option");
+            option.value = optionValue;
+            // Capitalize first letter for display
+            option.textContent = optionValue.charAt(0).toUpperCase() + optionValue.slice(1);
+            if (optionValue === selectedValue) {
+                option.selected = true;
+            }
+            selectElement.appendChild(option);
+        });
+
+        wrapper.appendChild(label);
+        wrapper.appendChild(selectElement);
+        return {
+            wrapper,
+            selectElement
+        };
+    }
+
+    /**
+     * Sets up the date/time preference controls on account pages.
+     */
+    function setupAccountPageControls() {
+        const form = document.querySelector("form");
+        if (!form) {
+            console.error("[server-time-to-local.js] Could not find form on account page to add settings.");
+            return;
+        }
+
+        const submitButton = form.querySelector('input[type="submit"]');
+        if (!submitButton) {
+            console.error("[server-time-to-local.js] Could not find submit button on account page to add settings.");
+            return;
+        }
+
+        const timeSettingsField = document.createElement("div");
+        timeSettingsField.className = "field";
+        Object.assign(timeSettingsField.style, {
+            display: 'flex',
+            gap: '1rem',
+            flexWrap: 'wrap',
+            marginBottom: '1rem'
+        });
+
+        const {
+            wrapper: dateWrapper,
+        } = createStyleDropdown(
+            "date-style-pref",
+            "Preferred Date Format:",
+            currentPreferences.dateStyle
+        );
+        const {
+            wrapper: timeWrapper,
+        } = createStyleDropdown(
+            "time-style-pref",
+            "Preferred Time Format:",
+            currentPreferences.timeStyle
+        );
+
+        timeSettingsField.appendChild(dateWrapper);
+        timeSettingsField.appendChild(timeWrapper);
+        form.insertBefore(timeSettingsField, submitButton);
+
+        updatePreview();
+    }
+
+    if (ACCOUNT_PAGE_PATHS.includes(window.location.pathname)) {
+        setupAccountPageControls();
+
+        document.addEventListener("change", (e) => {
+            const target = e.target;
+            let changed = false;
+            
+            if (target.id === 'date-style-pref') {
+                saveDateStylePreference(target.value);
+                changed = true;
+            } else if (target.id === 'time-style-pref') {
+                saveTimeStylePreference(target.value);
+                changed = true;
+            }
+        
+            if (changed) {
+                updatePreview();
+            }
+        });
+    }
+
+    formatAllDates();
+});

assets/static_javascript.go

@@ -85,4 +85,5 @@ func main() {
 	generateMap(path.Join("web", "handler", "html.go"), "handler", "TplMap", glob("web/handler/html/*.gohtml"))
 	generateMap(path.Join("web", "handler", "common.go"), "handler", "TplCommonMap", glob("web/handler/html/common/*.gohtml"))
 	generateMap(path.Join("assets", "static_stylesheet.go"), "assets", "AssetsMap", glob("assets/*.css"))
+	generateMap(path.Join("assets", "static_javascript.go"), "assets", "JSMap", glob("assets/*.js"))
 }

generate.go

@@ -160,6 +160,7 @@ func New(data *storage.Storage, s *session.Manager) (http.Handler, error) {
 
 	// Static assets
 	router.HandleFunc("/style.css", h.showStylesheet).Methods(http.MethodGet)
+	router.HandleFunc("/js/{filename}", h.showJS).Methods(http.MethodGet)
 	//router.HandleFunc("/favicon.ico", h.showFavicon).Name("favicon").Methods(http.MethodGet)
 
 	// Forum views