Restructure & refactor codebase

internal/glance/static/icons/codeberg.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467l4.416 16.553a12 12 0 0 0 5.137-4.213z"/></svg>

internal/glance/static/icons/dockerhub.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"/></svg>

internal/glance/static/icons/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

internal/glance/static/icons/gitlab.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z"/></svg>

internal/glance/static/js/main.js

@@ -0,0 +1,653 @@
+import { setupPopovers } from './popover.js';
+import { setupMasonries } from './masonry.js';
+import { throttledDebounce, isElementVisible, openURLInNewTab } from './utils.js';
+
+async function fetchPageContent(pageData) {
+    // TODO: handle non 200 status codes/time outs
+    // TODO: add retries
+    const response = await fetch(`${pageData.baseURL}/api/pages/${pageData.slug}/content/`);
+    const content = await response.text();
+
+    return content;
+}
+
+function setupCarousels() {
+    const carouselElements = document.getElementsByClassName("carousel-container");
+
+    if (carouselElements.length == 0) {
+        return;
+    }
+
+    for (let i = 0; i < carouselElements.length; i++) {
+        const carousel = carouselElements[i];
+        carousel.classList.add("show-right-cutoff");
+        const itemsContainer = carousel.getElementsByClassName("carousel-items-container")[0];
+
+        const determineSideCutoffs = () => {
+            if (itemsContainer.scrollLeft != 0) {
+                carousel.classList.add("show-left-cutoff");
+            } else {
+                carousel.classList.remove("show-left-cutoff");
+            }
+
+            if (Math.ceil(itemsContainer.scrollLeft) + itemsContainer.clientWidth < itemsContainer.scrollWidth) {
+                carousel.classList.add("show-right-cutoff");
+            } else {
+                carousel.classList.remove("show-right-cutoff");
+            }
+        }
+
+        const determineSideCutoffsRateLimited = throttledDebounce(determineSideCutoffs, 20, 100);
+
+        itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited);
+        window.addEventListener("resize", determineSideCutoffsRateLimited);
+
+        afterContentReady(determineSideCutoffs);
+    }
+}
+
+const minuteInSeconds = 60;
+const hourInSeconds = minuteInSeconds * 60;
+const dayInSeconds = hourInSeconds * 24;
+const monthInSeconds = dayInSeconds * 30;
+const yearInSeconds = monthInSeconds * 12;
+
+function relativeTimeSince(timestamp) {
+    const delta = Math.round((Date.now() / 1000) - timestamp);
+
+    if (delta < minuteInSeconds) {
+        return "1m";
+    }
+    if (delta < hourInSeconds) {
+        return Math.floor(delta / minuteInSeconds) + "m";
+    }
+    if (delta < dayInSeconds) {
+        return Math.floor(delta / hourInSeconds) + "h";
+    }
+    if (delta < monthInSeconds) {
+        return Math.floor(delta / dayInSeconds) + "d";
+    }
+    if (delta < yearInSeconds) {
+        return Math.floor(delta / monthInSeconds) + "mo";
+    }
+
+    return Math.floor(delta / yearInSeconds) + "y";
+}
+
+function updateRelativeTimeForElements(elements)
+{
+    for (let i = 0; i < elements.length; i++)
+    {
+        const element = elements[i];
+        const timestamp = element.dataset.dynamicRelativeTime;
+
+        if (timestamp === undefined)
+            continue
+
+        element.textContent = relativeTimeSince(timestamp);
+    }
+}
+
+function setupSearchBoxes() {
+    const searchWidgets = document.getElementsByClassName("search");
+
+    if (searchWidgets.length == 0) {
+        return;
+    }
+
+    for (let i = 0; i < searchWidgets.length; i++) {
+        const widget = searchWidgets[i];
+        const defaultSearchUrl = widget.dataset.defaultSearchUrl;
+        const newTab = widget.dataset.newTab === "true";
+        const inputElement = widget.getElementsByClassName("search-input")[0];
+        const bangElement = widget.getElementsByClassName("search-bang")[0];
+        const bangs = widget.querySelectorAll(".search-bangs > input");
+        const bangsMap = {};
+        const kbdElement = widget.getElementsByTagName("kbd")[0];
+        let currentBang = null;
+        let lastQuery = "";
+
+        for (let j = 0; j < bangs.length; j++) {
+            const bang = bangs[j];
+            bangsMap[bang.dataset.shortcut] = bang;
+        }
+
+        const handleKeyDown = (event) => {
+            if (event.key == "Escape") {
+                inputElement.blur();
+                return;
+            }
+
+            if (event.key == "Enter") {
+                const input = inputElement.value.trim();
+                let query;
+                let searchUrlTemplate;
+
+                if (currentBang != null) {
+                    query = input.slice(currentBang.dataset.shortcut.length + 1);
+                    searchUrlTemplate = currentBang.dataset.url;
+                } else {
+                    query = input;
+                    searchUrlTemplate = defaultSearchUrl;
+                }
+                if (query.length == 0 && currentBang == null) {
+                    return;
+                }
+
+                const url = searchUrlTemplate.replace("!QUERY!", encodeURIComponent(query));
+
+                if (newTab && !event.ctrlKey || !newTab && event.ctrlKey) {
+                    window.open(url, '_blank').focus();
+                } else {
+                    window.location.href = url;
+                }
+
+                lastQuery = query;
+                inputElement.value = "";
+
+                return;
+            }
+
+            if (event.key == "ArrowUp" && lastQuery.length > 0) {
+                inputElement.value = lastQuery;
+                return;
+            }
+        };
+
+        const changeCurrentBang = (bang) => {
+            currentBang = bang;
+            bangElement.textContent = bang != null ? bang.dataset.title : "";
+        }
+
+        const handleInput = (event) => {
+            const value = event.target.value.trim();
+            if (value in bangsMap) {
+                changeCurrentBang(bangsMap[value]);
+                return;
+            }
+
+            const words = value.split(" ");
+            if (words.length >= 2 && words[0] in bangsMap) {
+                changeCurrentBang(bangsMap[words[0]]);
+                return;
+            }
+
+            changeCurrentBang(null);
+        };
+
+        inputElement.addEventListener("focus", () => {
+            document.addEventListener("keydown", handleKeyDown);
+            document.addEventListener("input", handleInput);
+        });
+        inputElement.addEventListener("blur", () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            document.removeEventListener("input", handleInput);
+        });
+
+        document.addEventListener("keydown", (event) => {
+            if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return;
+            if (event.key != "s") return;
+
+            inputElement.focus();
+            event.preventDefault();
+        });
+
+        kbdElement.addEventListener("mousedown", () => {
+            requestAnimationFrame(() => inputElement.focus());
+        });
+    }
+}
+
+function setupDynamicRelativeTime() {
+    const elements = document.querySelectorAll("[data-dynamic-relative-time]");
+    const updateInterval = 60 * 1000;
+    let lastUpdateTime = Date.now();
+
+    updateRelativeTimeForElements(elements);
+
+    const updateElementsAndTimestamp = () => {
+        updateRelativeTimeForElements(elements);
+        lastUpdateTime = Date.now();
+    };
+
+    const scheduleRepeatingUpdate = () => setInterval(updateElementsAndTimestamp, updateInterval);
+
+    if (document.hidden === undefined) {
+        scheduleRepeatingUpdate();
+        return;
+    }
+
+    let timeout = scheduleRepeatingUpdate();
+
+    document.addEventListener("visibilitychange", () => {
+        if (document.hidden) {
+            clearTimeout(timeout);
+            return;
+        }
+
+        const delta = Date.now() - lastUpdateTime;
+
+        if (delta >= updateInterval) {
+            updateElementsAndTimestamp();
+            timeout = scheduleRepeatingUpdate();
+            return;
+        }
+
+        timeout = setTimeout(() => {
+            updateElementsAndTimestamp();
+            timeout = scheduleRepeatingUpdate();
+        }, updateInterval - delta);
+    });
+}
+
+function setupGroups() {
+    const groups = document.getElementsByClassName("widget-type-group");
+
+    if (groups.length == 0) {
+        return;
+    }
+
+    for (let g = 0; g < groups.length; g++) {
+        const group = groups[g];
+        const titles = group.getElementsByClassName("widget-header")[0].children;
+        const tabs = group.getElementsByClassName("widget-group-contents")[0].children;
+        let current = 0;
+
+        for (let t = 0; t < titles.length; t++) {
+            const title = titles[t];
+
+            if (title.dataset.titleUrl !== undefined) {
+                title.addEventListener("mousedown", (event) => {
+                    if (event.button != 1) {
+                        return;
+                    }
+
+                    openURLInNewTab(title.dataset.titleUrl, false);
+                    event.preventDefault();
+                });
+            }
+
+            title.addEventListener("click", () => {
+                if (t == current) {
+                    if (title.dataset.titleUrl !== undefined) {
+                        openURLInNewTab(title.dataset.titleUrl);
+                    }
+
+                    return;
+                }
+
+                for (let i = 0; i < titles.length; i++) {
+                    titles[i].classList.remove("widget-group-title-current");
+                    tabs[i].classList.remove("widget-group-content-current");
+                }
+
+                if (current < t) {
+                    tabs[t].dataset.direction = "right";
+                } else {
+                    tabs[t].dataset.direction = "left";
+                }
+
+                current = t;
+
+                title.classList.add("widget-group-title-current");
+                tabs[t].classList.add("widget-group-content-current");
+            });
+        }
+    }
+}
+
+function setupLazyImages() {
+    const images = document.querySelectorAll("img[loading=lazy]");
+
+    if (images.length == 0) {
+        return;
+    }
+
+    function imageFinishedTransition(image) {
+        image.classList.add("finished-transition");
+    }
+
+    afterContentReady(() => {
+        setTimeout(() => {
+            for (let i = 0; i < images.length; i++) {
+                const image = images[i];
+
+                if (image.complete) {
+                    image.classList.add("cached");
+                    setTimeout(() => imageFinishedTransition(image), 1);
+                } else {
+                    // TODO: also handle error event
+                    image.addEventListener("load", () => {
+                        image.classList.add("loaded");
+                        setTimeout(() => imageFinishedTransition(image), 400);
+                    });
+                }
+            }
+        }, 1);
+    });
+}
+
+function attachExpandToggleButton(collapsibleContainer) {
+    const showMoreText = "Show more";
+    const showLessText = "Show less";
+
+    let expanded = false;
+    const button = document.createElement("button");
+    const icon = document.createElement("span");
+    icon.classList.add("expand-toggle-button-icon");
+    const textNode = document.createTextNode(showMoreText);
+    button.classList.add("expand-toggle-button");
+    button.append(textNode, icon);
+    button.addEventListener("click", () => {
+        expanded = !expanded;
+
+        if (expanded) {
+            collapsibleContainer.classList.add("container-expanded");
+            button.classList.add("container-expanded");
+            textNode.nodeValue = showLessText;
+            return;
+        }
+
+        const topBefore = button.getClientRects()[0].top;
+
+        collapsibleContainer.classList.remove("container-expanded");
+        button.classList.remove("container-expanded");
+        textNode.nodeValue = showMoreText;
+
+        const topAfter = button.getClientRects()[0].top;
+
+        if (topAfter > 0)
+            return;
+
+        window.scrollBy({
+            top: topAfter - topBefore,
+            behavior: "instant"
+        });
+    });
+
+    collapsibleContainer.after(button);
+
+    return button;
+};
+
+
+function setupCollapsibleLists() {
+    const collapsibleLists = document.querySelectorAll(".list.collapsible-container");
+
+    if (collapsibleLists.length == 0) {
+        return;
+    }
+
+    for (let i = 0; i < collapsibleLists.length; i++) {
+        const list = collapsibleLists[i];
+
+        if (list.dataset.collapseAfter === undefined) {
+            continue;
+        }
+
+        const collapseAfter = parseInt(list.dataset.collapseAfter);
+
+        if (collapseAfter == -1) {
+            continue;
+        }
+
+        if (list.children.length <= collapseAfter) {
+            continue;
+        }
+
+        attachExpandToggleButton(list);
+
+        for (let c = collapseAfter; c < list.children.length; c++) {
+            const child = list.children[c];
+            child.classList.add("collapsible-item");
+            child.style.animationDelay = ((c - collapseAfter) * 20).toString() + "ms";
+        }
+    }
+}
+
+function setupCollapsibleGrids() {
+    const collapsibleGridElements = document.querySelectorAll(".cards-grid.collapsible-container");
+
+    if (collapsibleGridElements.length == 0) {
+        return;
+    }
+
+    for (let i = 0; i < collapsibleGridElements.length; i++) {
+        const gridElement = collapsibleGridElements[i];
+
+        if (gridElement.dataset.collapseAfterRows === undefined) {
+            continue;
+        }
+
+        const collapseAfterRows = parseInt(gridElement.dataset.collapseAfterRows);
+
+        if (collapseAfterRows == -1) {
+            continue;
+        }
+
+        const getCardsPerRow = () => {
+            return parseInt(getComputedStyle(gridElement).getPropertyValue('--cards-per-row'));
+        };
+
+        const button = attachExpandToggleButton(gridElement);
+
+        let cardsPerRow;
+
+        const resolveCollapsibleItems = () => {
+            const hideItemsAfterIndex = cardsPerRow * collapseAfterRows;
+
+            if (hideItemsAfterIndex >= gridElement.children.length) {
+                button.style.display = "none";
+            } else {
+                button.style.removeProperty("display");
+            }
+
+            let row = 0;
+
+            for (let i = 0; i < gridElement.children.length; i++) {
+                const child = gridElement.children[i];
+
+                if (i >= hideItemsAfterIndex) {
+                    child.classList.add("collapsible-item");
+                    child.style.animationDelay = (row * 40).toString() + "ms";
+
+                    if (i % cardsPerRow + 1 == cardsPerRow) {
+                        row++;
+                    }
+                } else {
+                    child.classList.remove("collapsible-item");
+                    child.style.removeProperty("animation-delay");
+                }
+            }
+        };
+
+        const observer = new ResizeObserver(() => {
+            if (!isElementVisible(gridElement)) {
+                return;
+            }
+
+            const newCardsPerRow = getCardsPerRow();
+
+            if (cardsPerRow == newCardsPerRow) {
+                return;
+            }
+
+            cardsPerRow = newCardsPerRow;
+            resolveCollapsibleItems();
+        });
+
+        afterContentReady(() => observer.observe(gridElement));
+    }
+}
+
+const contentReadyCallbacks = [];
+
+function afterContentReady(callback) {
+    contentReadyCallbacks.push(callback);
+}
+
+const weekDayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+function makeSettableTimeElement(element, hourFormat) {
+    const fragment = document.createDocumentFragment();
+    const hour = document.createElement('span');
+    const minute = document.createElement('span');
+    const amPm = document.createElement('span');
+    fragment.append(hour, document.createTextNode(':'), minute);
+
+    if (hourFormat == '12h') {
+        fragment.append(document.createTextNode(' '), amPm);
+    }
+
+    element.append(fragment);
+
+    return (date) => {
+        const hours = date.getHours();
+
+        if (hourFormat == '12h') {
+            amPm.textContent = hours < 12 ? 'AM' : 'PM';
+            hour.textContent = hours % 12 || 12;
+        } else {
+            hour.textContent = hours < 10 ? '0' + hours : hours;
+        }
+
+        const minutes = date.getMinutes();
+        minute.textContent = minutes < 10 ? '0' + minutes : minutes;
+    };
+};
+
+function timeInZone(now, zone) {
+    let timeInZone;
+
+    try {
+        timeInZone = new Date(now.toLocaleString('en-US', { timeZone: zone }));
+    } catch (e) {
+        // TODO: indicate to the user that this is an invalid timezone
+        console.error(e);
+        timeInZone = now
+    }
+
+    const diffInMinutes = Math.round((timeInZone.getTime() - now.getTime()) / 1000 / 60);
+
+    return { time: timeInZone, diffInMinutes: diffInMinutes };
+}
+
+function zoneDiffText(diffInMinutes) {
+    if (diffInMinutes == 0) {
+        return "";
+    }
+
+    const sign = diffInMinutes < 0 ? "-" : "+";
+    const signText = diffInMinutes < 0 ? "behind" : "ahead";
+
+    diffInMinutes = Math.abs(diffInMinutes);
+
+    const hours = Math.floor(diffInMinutes / 60);
+    const minutes = diffInMinutes % 60;
+    const hourSuffix = hours == 1 ? "" : "s";
+
+    if (minutes == 0) {
+        return { text: `${sign}${hours}h`, title: `${hours} hour${hourSuffix} ${signText}` };
+    }
+
+    if (hours == 0) {
+        return { text: `${sign}${minutes}m`, title: `${minutes} minutes ${signText}` };
+    }
+
+    return { text: `${sign}${hours}h~`, title: `${hours} hour${hourSuffix} and ${minutes} minutes ${signText}` };
+}
+
+function setupClocks() {
+    const clocks = document.getElementsByClassName('clock');
+
+    if (clocks.length == 0) {
+        return;
+    }
+
+    const updateCallbacks = [];
+
+    for (var i = 0; i < clocks.length; i++) {
+        const clock = clocks[i];
+        const hourFormat = clock.dataset.hourFormat;
+        const localTimeContainer = clock.querySelector('[data-local-time]');
+        const localDateElement = localTimeContainer.querySelector('[data-date]');
+        const localWeekdayElement = localTimeContainer.querySelector('[data-weekday]');
+        const localYearElement = localTimeContainer.querySelector('[data-year]');
+        const timeZoneContainers = clock.querySelectorAll('[data-time-in-zone]');
+
+        const setLocalTime = makeSettableTimeElement(
+            localTimeContainer.querySelector('[data-time]'),
+            hourFormat
+        );
+
+        updateCallbacks.push((now) => {
+            setLocalTime(now);
+            localDateElement.textContent = now.getDate() + ' ' + monthNames[now.getMonth()];
+            localWeekdayElement.textContent = weekDayNames[now.getDay()];
+            localYearElement.textContent = now.getFullYear();
+        });
+
+        for (var z = 0; z < timeZoneContainers.length; z++) {
+            const timeZoneContainer = timeZoneContainers[z];
+            const diffElement = timeZoneContainer.querySelector('[data-time-diff]');
+
+            const setZoneTime = makeSettableTimeElement(
+                timeZoneContainer.querySelector('[data-time]'),
+                hourFormat
+            );
+
+            updateCallbacks.push((now) => {
+                const { time, diffInMinutes } = timeInZone(now, timeZoneContainer.dataset.timeInZone);
+                setZoneTime(time);
+                const { text, title } = zoneDiffText(diffInMinutes);
+                diffElement.textContent = text;
+                diffElement.title = title;
+            });
+        }
+    }
+
+    const updateClocks = () => {
+        const now = new Date();
+
+        for (var i = 0; i < updateCallbacks.length; i++)
+            updateCallbacks[i](now);
+
+        setTimeout(updateClocks, (60 - now.getSeconds()) * 1000);
+    };
+
+    updateClocks();
+}
+
+async function setupPage() {
+    const pageElement = document.getElementById("page");
+    const pageContentElement = document.getElementById("page-content");
+    const pageContent = await fetchPageContent(pageData);
+
+    pageContentElement.innerHTML = pageContent;
+
+    try {
+        setupPopovers();
+        setupClocks()
+        setupCarousels();
+        setupSearchBoxes();
+        setupCollapsibleLists();
+        setupCollapsibleGrids();
+        setupGroups();
+        setupMasonries();
+        setupDynamicRelativeTime();
+        setupLazyImages();
+    } finally {
+        pageElement.classList.add("content-ready");
+
+        for (let i = 0; i < contentReadyCallbacks.length; i++) {
+            contentReadyCallbacks[i]();
+        }
+
+        setTimeout(() => {
+            document.body.classList.add("page-columns-transitioned");
+        }, 300);
+    }
+}
+
+setupPage();

internal/glance/static/js/masonry.js

@@ -0,0 +1,53 @@
+
+import { clamp } from "./utils.js";
+
+export function setupMasonries() {
+    const masonryContainers = document.getElementsByClassName("masonry");
+
+    for (let i = 0; i < masonryContainers.length; i++) {
+        const container = masonryContainers[i];
+
+        const options = {
+            minColumnWidth: container.dataset.minColumnWidth || 330,
+            maxColumns: container.dataset.maxColumns || 6,
+        };
+
+        const items = Array.from(container.children);
+        let previousColumnsCount = 0;
+
+        const render = function() {
+            const columnsCount = clamp(
+                Math.floor(container.offsetWidth / options.minColumnWidth),
+                1,
+                Math.min(options.maxColumns, items.length)
+            );
+
+            if (columnsCount === previousColumnsCount) {
+                return;
+            } else {
+                container.textContent = "";
+                previousColumnsCount = columnsCount;
+            }
+
+            const columnsFragment = document.createDocumentFragment();
+
+            for (let i = 0; i < columnsCount; i++) {
+                const column = document.createElement("div");
+                column.className = "masonry-column";
+                columnsFragment.append(column);
+            }
+
+            // poor man's masonry
+            // TODO: add an option that allows placing items in the
+            // shortest column instead of iterating the columns in order
+            for (let i = 0; i < items.length; i++) {
+                columnsFragment.children[i % columnsCount].appendChild(items[i]);
+            }
+
+            container.append(columnsFragment);
+        };
+
+        const observer = new ResizeObserver(() => requestAnimationFrame(render));
+        observer.observe(container);
+    }
+}

internal/glance/static/js/popover.js

@@ -0,0 +1,185 @@
+const defaultShowDelayMs = 200;
+const defaultHideDelayMs = 500;
+const defaultMaxWidth = "300px";
+const defaultDistanceFromTarget = "0px"
+const htmlContentSelector = "[data-popover-html]";
+
+let activeTarget = null;
+let pendingTarget = null;
+let cleanupOnHidePopover = null;
+let togglePopoverTimeout = null;
+
+const containerElement = document.createElement("div");
+const containerComputedStyle = getComputedStyle(containerElement);
+containerElement.addEventListener("mouseenter", clearTogglePopoverTimeout);
+containerElement.addEventListener("mouseleave", handleMouseLeave);
+containerElement.classList.add("popover-container");
+
+const frameElement = document.createElement("div");
+frameElement.classList.add("popover-frame");
+
+const contentElement = document.createElement("div");
+contentElement.classList.add("popover-content");
+
+frameElement.append(contentElement);
+containerElement.append(frameElement);
+document.body.append(containerElement);
+
+const observer = new ResizeObserver(repositionContainer);
+
+function handleMouseEnter(event) {
+    clearTogglePopoverTimeout();
+    const target = event.target;
+    pendingTarget = target;
+    const showDelay = target.dataset.popoverShowDelay || defaultShowDelayMs;
+
+    if (activeTarget !== null) {
+        if (activeTarget !== target) {
+            hidePopover();
+            requestAnimationFrame(() => requestAnimationFrame(showPopover));
+        }
+
+        return;
+    }
+
+    togglePopoverTimeout = setTimeout(showPopover, showDelay);
+}
+
+function handleMouseLeave(event) {
+    clearTogglePopoverTimeout();
+    const target = activeTarget || event.target;
+    togglePopoverTimeout = setTimeout(hidePopover, target.dataset.popoverHideDelay || defaultHideDelayMs);
+}
+
+function clearTogglePopoverTimeout() {
+    clearTimeout(togglePopoverTimeout);
+}
+
+function showPopover() {
+    if (pendingTarget === null) return;
+
+    activeTarget = pendingTarget;
+    pendingTarget = null;
+
+    const popoverType = activeTarget.dataset.popoverType;
+
+    if (popoverType === "text") {
+        const text = activeTarget.dataset.popoverText;
+        if (text === undefined || text === "") return;
+        contentElement.textContent = text;
+    } else if (popoverType === "html") {
+        const htmlContent = activeTarget.querySelector(htmlContentSelector);
+        if (htmlContent === null) return;
+        /**
+         * The reason for all of the below shenanigans is that I want to preserve
+         * all attached event listeners of the original HTML content. This is so I don't have to
+         * re-setup events for things like lazy images, they'd just work as expected.
+         */
+        const placeholder = document.createComment("");
+        htmlContent.replaceWith(placeholder);
+        contentElement.replaceChildren(htmlContent);
+        htmlContent.removeAttribute("data-popover-html");
+        cleanupOnHidePopover = () => {
+            htmlContent.setAttribute("data-popover-html", "");
+            placeholder.replaceWith(htmlContent);
+            placeholder.remove();
+        };
+    } else {
+        return;
+    }
+
+    const contentMaxWidth = activeTarget.dataset.popoverMaxWidth || defaultMaxWidth;
+
+    if (activeTarget.dataset.popoverTextAlign !== undefined) {
+        contentElement.style.textAlign = activeTarget.dataset.popoverTextAlign;
+    } else {
+        contentElement.style.removeProperty("text-align");
+    }
+
+    contentElement.style.maxWidth = contentMaxWidth;
+    containerElement.style.display = "block";
+    activeTarget.classList.add("popover-active");
+    document.addEventListener("keydown", handleHidePopoverOnEscape);
+    window.addEventListener("resize", repositionContainer);
+    observer.observe(containerElement);
+}
+
+function repositionContainer() {
+    const targetBounds = activeTarget.dataset.popoverAnchor !== undefined
+        ? activeTarget.querySelector(activeTarget.dataset.popoverAnchor).getBoundingClientRect()
+        : activeTarget.getBoundingClientRect();
+
+    const containerBounds = containerElement.getBoundingClientRect();
+    const containerInlinePadding = parseInt(containerComputedStyle.getPropertyValue("padding-inline"));
+    const targetBoundsWidthOffset = targetBounds.width * (activeTarget.dataset.popoverTargetOffset || 0.5);
+    const position = activeTarget.dataset.popoverPosition || "below";
+    const popoverOffest = activeTarget.dataset.popoverOffset || 0.5;
+    const left = Math.round(targetBounds.left + targetBoundsWidthOffset - (containerBounds.width * popoverOffest));
+
+    if (left < 0) {
+        containerElement.style.left = 0;
+        containerElement.style.removeProperty("right");
+        containerElement.style.setProperty("--triangle-offset", targetBounds.left - containerInlinePadding + targetBoundsWidthOffset + "px");
+    } else if (left + containerBounds.width > window.innerWidth) {
+        containerElement.style.removeProperty("left");
+        containerElement.style.right = 0;
+        containerElement.style.setProperty("--triangle-offset", containerBounds.width - containerInlinePadding - (window.innerWidth - targetBounds.left - targetBoundsWidthOffset) + "px");
+    } else {
+        containerElement.style.removeProperty("right");
+        containerElement.style.left = left + "px";
+        containerElement.style.setProperty("--triangle-offset", ((targetBounds.left + targetBoundsWidthOffset) - left - containerInlinePadding) + "px");
+    }
+
+    const distanceFromTarget = activeTarget.dataset.popoverMargin || defaultDistanceFromTarget;
+    const topWhenAbove = targetBounds.top + window.scrollY - containerBounds.height;
+    const topWhenBelow = targetBounds.top + window.scrollY + targetBounds.height;
+
+    if (
+        position === "above" && topWhenAbove > window.scrollY ||
+        (position === "below" && topWhenBelow + containerBounds.height > window.scrollY + window.innerHeight)
+    ) {
+        containerElement.classList.add("position-above");
+        frameElement.style.removeProperty("margin-top");
+        frameElement.style.marginBottom = distanceFromTarget;
+        containerElement.style.top = topWhenAbove + "px";
+    } else {
+        containerElement.classList.remove("position-above");
+        frameElement.style.removeProperty("margin-bottom");
+        frameElement.style.marginTop = distanceFromTarget;
+        containerElement.style.top = topWhenBelow + "px";
+    }
+}
+
+function hidePopover() {
+    if (activeTarget === null) return;
+
+    activeTarget.classList.remove("popover-active");
+    containerElement.style.display = "none";
+    document.removeEventListener("keydown", handleHidePopoverOnEscape);
+    window.removeEventListener("resize", repositionContainer);
+    observer.unobserve(containerElement);
+
+    if (cleanupOnHidePopover !== null) {
+        cleanupOnHidePopover();
+        cleanupOnHidePopover = null;
+    }
+
+    activeTarget = null;
+}
+
+function handleHidePopoverOnEscape(event) {
+    if (event.key === "Escape") {
+        hidePopover();
+    }
+}
+
+export function setupPopovers() {
+    const targets = document.querySelectorAll("[data-popover-type]");
+
+    for (let i = 0; i < targets.length; i++) {
+        const target = targets[i];
+
+        target.addEventListener("mouseenter", handleMouseEnter);
+        target.addEventListener("mouseleave", handleMouseLeave);
+    }
+}

internal/glance/static/js/utils.js

@@ -0,0 +1,38 @@
+export function throttledDebounce(callback, maxDebounceTimes, debounceDelay) {
+    let debounceTimeout;
+    let timesDebounced = 0;
+
+    return function () {
+        if (timesDebounced == maxDebounceTimes) {
+            clearTimeout(debounceTimeout);
+            timesDebounced = 0;
+            callback();
+            return;
+        }
+
+        clearTimeout(debounceTimeout);
+        timesDebounced++;
+
+        debounceTimeout = setTimeout(() => {
+            timesDebounced = 0;
+            callback();
+        }, debounceDelay);
+    };
+};
+
+export function isElementVisible(element) {
+    return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+}
+
+export function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+
+// NOTE: inconsistent behavior between browsers when it comes to
+// whether the newly opened tab gets focused or not, potentially
+// depending on the event that this function is called from
+export function openURLInNewTab(url, focus = true) {
+    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+
+    if (focus && newWindow != null) newWindow.focus();
+}

internal/glance/static/manifest.json

@@ -0,0 +1,14 @@
+{
+    "name": "Glance",
+    "display": "standalone",
+    "background_color": "#151519",
+    "scope": "/",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "app-icon.png",
+            "type": "image/png",
+            "sizes": "512x512"
+        }
+    ]
+}