Merge branch 'release/v0.6.0' into main

2024-08-05 13:26:46 +01:00
parent 23d6d41148 b365a03e71
commit c2cdd0fa08
79 changed files with 2659 additions and 336 deletions
--- a/internal/assets/files.go
+++ b/internal/assets/files.go
@@ -1,8 +1,14 @@
 package assets

 import (
+	"crypto/md5"
 	"embed"
+	"encoding/hex"
+	"io"
 	"io/fs"
+	"log/slog"
+	"strconv"
+	"time"
 )

 //go:embed static
@@ -13,3 +19,38 @@ var _templateFS embed.FS

 var PublicFS, _ = fs.Sub(_publicFS, "static")
 var TemplateFS, _ = fs.Sub(_templateFS, "templates")
+
+func getFSHash(files fs.FS) string {
+	hash := md5.New()
+
+	err := fs.WalkDir(files, ".", func(path string, d fs.DirEntry, err error) error {
+		if err != nil {
+			return err
+		}
+
+		if d.IsDir() {
+			return nil
+		}
+
+		file, err := files.Open(path)
+
+		if err != nil {
+			return err
+		}
+
+		if _, err := io.Copy(hash, file); err != nil {
+			return err
+		}
+
+		return nil
+	})
+
+	if err == nil {
+		return hex.EncodeToString(hash.Sum(nil))[:10]
+	}
+
+	slog.Warn("Could not compute assets cache", "err", err)
+	return strconv.FormatInt(time.Now().Unix(), 10)
+}
+
+var PublicFSHash = getFSHash(PublicFS)
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -37,6 +37,7 @@

    --ths: var(--bgh), calc(var(--bgs) * var(--tsm));
    --color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
+    --color-text-base-muted: hsl(var(--ths), calc(var(--scheme) var(--cm) * 52%));
    --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%));
    --color-text-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%));

@@ -57,6 +58,10 @@
    font-size: var(--font-size-h4);
 }

+.page {
+    height: 100%;
+}
+
 .page-content, .page.content-ready .page-loading-container {
    display: none;
 }
@@ -79,14 +84,16 @@
    white-space: nowrap;
 }

-.text-truncate-3-lines {
+.text-truncate-2-lines, .text-truncate-3-lines {
    overflow: hidden;
    text-overflow: ellipsis;
-    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
 }

+.text-truncate-3-lines { -webkit-line-clamp: 3; }
+.text-truncate-2-lines { -webkit-line-clamp: 2; }
+
 .visited-indicator:not(.text-truncate)::after,
 .visited-indicator.text-truncate::before,
 .bookmarks-link:not(.bookmarks-link-no-arrow)::after {
@@ -114,6 +121,7 @@
 .list-gap-14 { --list-half-gap: 0.7rem; }
 .list-gap-20 { --list-half-gap: 1rem; }
 .list-gap-24 { --list-half-gap: 1.2rem; }
+.list-gap-34 { --list-half-gap: 1.7rem; }

 .list > *:not(:first-child) {
    margin-top: calc(var(--list-half-gap) * 2);
@@ -180,6 +188,57 @@
    transform: rotate(-90deg);
 }

+.widget-group-header {
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.widget-group-title {
+    background: none;
+    font: inherit;
+    border: none;
+    color: inherit;
+    text-transform: uppercase;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    flex-shrink: 0;
+    padding-bottom: 0.1rem;
+    transition: color .3s, border-color .3s;
+}
+
+.widget-group-title:hover:not(.widget-group-title-current) {
+    border-bottom-color: var(--color-text-subdue);
+    color: var(--color-text-highlight);
+}
+
+.widget-group-title-current {
+    border-bottom-color: var(--color-primary);
+    color: var(--color-text-highlight);
+}
+
+.widget-group-content {
+    animation: widgetGroupContentEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
+}
+
+.widget-group-content[data-direction="right"] {
+    --direction: 5px;
+}
+
+.widget-group-content[data-direction="left"] {
+    --direction: -5px;
+}
+
+@keyframes widgetGroupContentEntrance {
+    from {
+        opacity: 0;
+        transform: translateX(var(--direction));
+    }
+}
+
+.widget-group-content:not(.widget-group-content-current) {
+    display: none;
+}
+
 .widget-content:has(.expand-toggle-button:last-child) {
    padding-bottom: 0;
 }
@@ -190,9 +249,17 @@
    background-color: var(--color-background);
 }

-/* required to prevent collapsed lazy images from being loaded while the container is being setup */
-.collapsible-container:not(.ready) img[loading=lazy] {
-    display: none;
+.attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.attachments > * {
+    border-radius: var(--border-radius);
+    padding: 0.1rem 0.5rem;
+    font-size: var(--font-size-h6);
+    background-color: var(--color-separator);
 }

 ::selection {
@@ -248,9 +315,14 @@ html {
    scroll-behavior: smooth;
 }

+html, body {
+    height: 100%;
+}
+
 a {
    text-decoration: none;
    color: inherit;
+    overflow-wrap: break-word;
 }

 ul {
@@ -280,9 +352,8 @@ body {
 .page-columns {
    display: flex;
    gap: var(--widget-gap);
-    margin: var(--widget-gap) 0;
+    margin-top: var(--widget-gap);
    animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
-    animation-delay: 3ms;
 }

@keyframes pageColumnsEntrance {
@@ -293,8 +364,11 @@ body {
 }

 .page-loading-container {
-    margin: 50px auto;
-    width: fit-content;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-5rem);
    animation: loadingContainerEntrance 200ms backwards;
    animation-delay: 150ms;
    font-size: 2rem;
@@ -342,12 +416,38 @@ body {
    border: 1px solid var(--color-negative);
 }

+kbd {
+    font: inherit;
+    padding: 0.1rem 0.8rem;
+    border-radius: var(--border-radius);
+    border: 2px solid var(--color-widget-background-highlight);
+    box-shadow: 0 2px 0 var(--color-widget-background-highlight);
+    user-select: none;
+    transition: transform .1s, box-shadow .1s;
+    font-size: var(--font-size-h5);
+    cursor: pointer;
+}
+
+kbd:active {
+    transform: translateY(2px);
+    box-shadow: 0 0 0 0 var(--color-widget-background-highlight);
+}
+
 .content-bounds {
    max-width: 1600px;
+    width: 100%;
    margin-inline: auto;
    padding: 0 var(--content-bounds-padding);
 }

+.page-width-wide .content-bounds {
+    max-width: 1920px;
+}
+
+.page-width-slim .content-bounds {
+    max-width: 1100px;
+}
+
 .dynamic-columns {
    gap: calc(var(--widget-content-vertical-padding) / 2);
    display: grid;
@@ -566,7 +666,7 @@ body {
 }

 .footer {
-    margin-block: calc(var(--widget-gap) * 1.5);
+    padding-block: calc(var(--widget-gap) * 1.5);
    animation: loadingContainerEntrance 200ms backwards;
    animation-delay: 150ms;
 }
@@ -593,16 +693,16 @@ body {
    color: var(--color-text-highlight);
 }

-.stock-chart {
+.market-chart {
    margin-left: auto;
    width: 6.5rem;
 }

-.stock-chart svg {
+.market-chart svg {
    width: 100%;
 }

-.stock-values {
+.market-values {
    min-width: 8rem;
 }

@@ -653,6 +753,86 @@ body {
    -webkit-box-orient: vertical;
 }

+.search-icon {
+    width: 2.3rem;
+}
+
+.search-icon-container {
+    position: relative;
+    flex-shrink: 0;
+}
+
+/* gives a wider hit area for the 3 people that will notice the animation : ) */
+.search-icon-container::before {
+    content: '';
+    position: absolute;
+    inset: -1rem;
+}
+
+.search-icon-container:hover > .search-icon {
+    animation: searchIconHover 2.9s forwards;
+}
+
+@keyframes searchIconHover {
+    0%, 39% { translate: 0 0; }
+    20% { scale: 1.3; }
+    40% { scale: 1; }
+    50% { translate: -30% 30%; }
+    70% { translate: 30% -30%; }
+    90% { translate: -30% -30%; }
+    100% { translate: 0 0; }
+}
+
+.search {
+    transition: border-color .2s;
+    position: relative;
+}
+
+.search:hover {
+    border-color: var(--color-text-subdue);
+}
+
+.search:focus-within {
+    border-color: var(--color-primary);
+}
+
+.search-input {
+    border: 0;
+    background: none;
+    width: 100%;
+    height: 6rem;
+    font: inherit;
+    outline: none;
+    color: var(--color-text-highlight);
+}
+
+.search-input::placeholder {
+    color: var(--color-text-base-muted);
+    opacity: 1;
+}
+
+.search-bangs { display: none; }
+
+.search-bang {
+    border-radius: calc(var(--border-radius) * 2);
+    background: var(--color-widget-background-highlight);
+    padding: 0.3rem 1rem;
+    flex-shrink: 0;
+    font-size: var(--font-size-h5);
+    animation: searchBangsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
+}
+
+@keyframes searchBangsEntrance {
+    0% {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+}
+
+.search-bang:empty {
+    display: none;
+}
+
 .forum-post-list-item {
    display: flex;
    gap: 1.2rem;
@@ -668,6 +848,10 @@ body {
    margin-top: 0.1rem;
 }

+.forum-post-tags-container {
+    transform: translateY(-0.15rem);
+}
+
 .bookmarks-group {
    --bookmarks-group-color: var(--color-primary);
 }
@@ -721,7 +905,7 @@ body {
    flex-direction: column;
    width: calc(100% / 12);
    padding-top: 3px;
-    max-width: 3rem;
+    max-width: 30px;
 }

 .weather-column-value, .weather-columns:hover .weather-column-value {
@@ -855,6 +1039,10 @@ body {
    transform: translate(-50%, -50%);
 }

+.clock-time span {
+    color: var(--color-text-highlight);
+}
+
 .monitor-site-icon {
    display: block;
    opacity: 0.8;
@@ -885,7 +1073,18 @@ body {
    transition: filter 0.2s, opacity .2s;
 }

-.thumbnail-container:hover .thumbnail {
+.thumbnail-container {
+    flex-shrink: 0;
+    border: 1px solid var(--color-separator);
+    border-radius: var(--border-radius);
+}
+
+.thumbnail-container > * {
+    border-radius: var(--border-radius);
+    object-fit: cover;
+}
+
+.thumbnail-parent:hover .thumbnail {
    opacity: 1;
    filter: none;
 }
@@ -933,8 +1132,23 @@ body {
    z-index: 3;
 }

+.rss-detailed-description {
+    max-width: 55rem;
+    color: var(--color-text-base-muted);
+}
+
+.rss-detailed-thumbnail {
+    margin-top: 0.3rem;
+}
+
+.rss-detailed-thumbnail > * {
+    aspect-ratio: 3 / 2;
+    height: 8.7rem;
+}
+
 .twitch-category-thumbnail {
    width: 5rem;
+    aspect-ratio: 3 / 4;
    border-radius: var(--border-radius);
 }

@@ -1011,10 +1225,10 @@ body {

    .page-column {
        display: none;
-        animation: columnEntrance 0s cubic-bezier(0.25, 1, 0.5, 1) backwards;
+        animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards;
    }

-    .animate-element-transition .page-column {
+    .page-columns-transitioned .page-column {
        animation-duration: .3s;
    }

@@ -1025,8 +1239,14 @@ body {
        }
    }

-    body {
-        padding-bottom: calc(var(--mobile-navigation-height) + var(--content-bounds-padding));
+    .mobile-navigation-offset {
+        height: var(--mobile-navigation-height);
+        margin-top: var(--widget-gap);
+        flex-shrink: 0;
+    }
+
+    .footer + .mobile-navigation-offset {
+        margin-top: 0;
    }

    .mobile-navigation {
@@ -1059,7 +1279,7 @@ body {
        padding: 15px var(--content-bounds-padding);
        display: flex;
        align-items: center;
-        overflow-x: scroll;
+        overflow-x: auto;
        gap: 2.5rem;
    }

@@ -1130,6 +1350,10 @@ body {
        /* hides content that peeks through the rounded borders of the mobile navigation */
        box-shadow: 0 var(--border-radius) 0 0 var(--color-background);
    }
+
+    .weather-column-rain::before {
+        background-size: 7px 7px;
+    }
 }

@media (max-width: 1190px) and (display-mode: standalone) {
@@ -1173,11 +1397,11 @@ body {

    .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }

-    .forum-post-list-item {
-        flex-flow: row-reverse;
+    .row-reverse-on-mobile {
+        flex-direction: row-reverse;
    }

-    .hide-on-mobile {
+    .hide-on-mobile, .thumbnail-container:has(> .hide-on-mobile) {
        display: none
    }

@@ -1189,6 +1413,14 @@ body {
        color: var(--color-text-highlight);
        animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
    }
+
+    .rss-detailed-thumbnail > * {
+        height: 6rem;
+    }
+
+    .rss-detailed-description {
+        -webkit-line-clamp: 3;
+    }
 }

 .size-h1   { font-size: var(--font-size-h1); }
@@ -1216,7 +1448,10 @@ body {
 .shrink             { flex-shrink: 1; }
 .shrink-0           { flex-shrink: 0; }
 .min-width-0        { min-width: 0; }
+.max-width-100      { max-width: 100%; }
+.height-100         { height: 100%; }
 .block              { display: block; }
+.inline-block       { display: inline-block; }
 .overflow-hidden    { overflow: hidden; }
 .relative           { position: relative; }
 .flex               { display: flex; }
@@ -1224,6 +1459,7 @@ body {
 .flex-nowrap        { flex-wrap: nowrap; }
 .justify-between    { justify-content: space-between; }
 .justify-stretch    { justify-content: stretch; }
+.justify-evenly     { justify-content: space-evenly; }
 .justify-center     { justify-content: center; }
 .justify-end        { justify-content: end; }
 .uppercase          { text-transform: uppercase; }
@@ -1235,11 +1471,17 @@ body {
 .gap-7              { gap: 0.7rem; }
 .gap-10             { gap: 1rem; }
 .gap-15             { gap: 1.5rem; }
+.gap-20             { gap: 2rem; }
+.gap-25             { gap: 2.5rem; }
+.gap-35             { gap: 3.5rem; }
+.gap-45             { gap: 4.5rem; }
+.gap-55             { gap: 5.5rem; }
 .margin-top-3       { margin-top: 0.3rem; }
 .margin-top-5       { margin-top: 0.5rem; }
 .margin-top-7       { margin-top: 0.7rem; }
 .margin-top-10      { margin-top: 1rem; }
 .margin-top-15      { margin-top: 1.5rem; }
+.margin-top-auto    { margin-top: auto; }
 .margin-block-3     { margin-block: 0.3rem; }
 .margin-block-5     { margin-block: 0.5rem; }
 .margin-block-7     { margin-block: 0.7rem; }
@@ -1251,3 +1493,4 @@ body {
 .margin-bottom-10   { margin-bottom: 1rem; }
 .margin-bottom-15   { margin-bottom: 1.5rem; }
 .margin-bottom-auto { margin-bottom: auto; }
+.scale-half         { transform: scale(0.5); }
--- a/internal/assets/static/main.js
+++ b/internal/assets/static/main.js
@@ -59,9 +59,9 @@ function setupCarousels() {
        const determineSideCutoffsRateLimited = throttledDebounce(determineSideCutoffs, 20, 100);

        itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited);
-        document.addEventListener("resize", determineSideCutoffsRateLimited);
+        window.addEventListener("resize", determineSideCutoffsRateLimited);

-        setTimeout(determineSideCutoffs, 1);
+        afterContentReady(determineSideCutoffs);
    }
 }

@@ -103,7 +103,108 @@ function updateRelativeTimeForElements(elements)
        if (timestamp === undefined)
            continue

-        element.innerText = relativeTimeSince(timestamp);
+        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;
+
+        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;
+                }
+
+                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());
+        });
    }
 }

@@ -149,6 +250,46 @@ function setupDynamicRelativeTime() {
    });
 }

+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];
+            title.addEventListener("click", () => {
+                if (t == current) {
+                    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]");

@@ -160,22 +301,24 @@ function setupLazyImages() {
        image.classList.add("finished-transition");
    }

-    setTimeout(() => {
-        for (let i = 0; i < images.length; i++) {
-            const image = images[i];
+    afterContentReady(() => {
+        setTimeout(() => {
+            for (let i = 0; i < images.length; i++) {
+                const image = images[i];

-            if (image.complete) {
-                image.classList.add("cached");
-                setTimeout(() => imageFinishedTransition(image), 5);
-            } else {
-                // TODO: also handle error event
-                image.addEventListener("load", () => {
-                    image.classList.add("loaded");
-                    setTimeout(() => imageFinishedTransition(image), 500);
-                });
+                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);
+                    });
+                }
            }
-        }
-    }, 5);
+        }, 1);
+    });
 }

 function attachExpandToggleButton(collapsibleContainer) {
@@ -253,8 +396,6 @@ function setupCollapsibleLists() {
            child.classList.add("collapsible-item");
            child.style.animationDelay = ((c - collapseAfter) * 20).toString() + "ms";
        }
-
-        list.classList.add("ready");
    }
 }

@@ -314,11 +455,10 @@ function setupCollapsibleGrids() {
            }
        };

-        setTimeout(() => {
+        afterContentReady(() => {
            cardsPerRow = getCardsPerRow();
            resolveCollapsibleItems();
-            gridElement.classList.add("ready");
-        }, 1);
+        });

        window.addEventListener("resize", () => {
            const newCardsPerRow = getCardsPerRow();
@@ -333,6 +473,118 @@ function setupCollapsibleGrids() {
    }
 }

+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 diffInHours = Math.round((timeInZone.getTime() - now.getTime()) / 1000 / 60 / 60);
+
+    return { time: timeInZone, diffInHours: diffInHours };
+}
+
+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, diffInHours } = timeInZone(now, timeZoneContainer.dataset.timeInZone);
+                setZoneTime(time);
+                diffElement.textContent = (diffInHours <= 0 ? diffInHours : '+' + diffInHours) + 'h';
+            });
+        }
+    }
+
+    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");
@@ -340,23 +592,26 @@ async function setupPage() {

    pageContentElement.innerHTML = pageContent;

-    setTimeout(() => {
-        document.body.classList.add("animate-element-transition");
-    }, 200);
-
    try {
-        setupLazyImages();
+        setupClocks()
        setupCarousels();
+        setupSearchBoxes();
        setupCollapsibleLists();
        setupCollapsibleGrids();
+        setupGroups();
        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);
    }
 }

-if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", setupPage);
-} else {
-    setupPage();
-}
+setupPage();
--- a/internal/assets/static/manifest.json
+++ b/internal/assets/static/manifest.json
@@ -1,13 +1,14 @@
 {
    "name": "Glance",
    "display": "standalone",
+    "background_color": "#151519",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
-            "src": "/static/app-icon.png",
+            "src": "app-icon.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ]
-}
+}
--- a/internal/assets/templates.go
+++ b/internal/assets/templates.go
@@ -15,6 +15,7 @@ var (
 	PageTemplate                  = compileTemplate("page.html", "document.html", "page-style-overrides.gotmpl")
 	PageContentTemplate           = compileTemplate("content.html")
 	CalendarTemplate              = compileTemplate("calendar.html", "widget-base.html")
+	ClockTemplate                 = compileTemplate("clock.html", "widget-base.html")
 	BookmarksTemplate             = compileTemplate("bookmarks.html", "widget-base.html")
 	IFrameTemplate                = compileTemplate("iframe.html", "widget-base.html")
 	WeatherTemplate               = compileTemplate("weather.html", "widget-base.html")
@@ -22,16 +23,21 @@ var (
 	RedditCardsHorizontalTemplate = compileTemplate("reddit-horizontal-cards.html", "widget-base.html")
 	RedditCardsVerticalTemplate   = compileTemplate("reddit-vertical-cards.html", "widget-base.html")
 	ReleasesTemplate              = compileTemplate("releases.html", "widget-base.html")
+	ChangeDetectionTemplate       = compileTemplate("change-detection.html", "widget-base.html")
 	VideosTemplate                = compileTemplate("videos.html", "widget-base.html", "video-card-contents.html")
 	VideosGridTemplate            = compileTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html")
-	StocksTemplate                = compileTemplate("stocks.html", "widget-base.html")
+	MarketsTemplate               = compileTemplate("markets.html", "widget-base.html")
 	RSSListTemplate               = compileTemplate("rss-list.html", "widget-base.html")
+	RSSDetailedListTemplate       = compileTemplate("rss-detailed-list.html", "widget-base.html")
 	RSSHorizontalCardsTemplate    = compileTemplate("rss-horizontal-cards.html", "widget-base.html")
 	RSSHorizontalCards2Template   = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html")
 	MonitorTemplate               = compileTemplate("monitor.html", "widget-base.html")
 	TwitchGamesListTemplate       = compileTemplate("twitch-games-list.html", "widget-base.html")
 	TwitchChannelsTemplate        = compileTemplate("twitch-channels.html", "widget-base.html")
 	RepositoryTemplate            = compileTemplate("repository.html", "widget-base.html")
+	SearchTemplate                = compileTemplate("search.html", "widget-base.html")
+	ExtensionTemplate             = compileTemplate("extension.html", "widget-base.html")
+	GroupTemplate                 = compileTemplate("group.html", "widget-base.html")
 )

 var globalTemplateFunctions = template.FuncMap{
--- a/internal/assets/templates/change-detection.html
+++ b/internal/assets/templates/change-detection.html
@@ -0,0 +1,17 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+<ul class="list list-gap-14 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
+    {{ range .ChangeDetections }}
+    <li>
+        <a class="size-h4 block text-truncate color-highlight" href="{{ .URL }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
+        <ul class="list-horizontal-text">
+            <li {{ dynamicRelativeTimeAttrs .LastChanged }}></li>
+            <li class="shrink min-width-0"><a class="visited-indicator" href="{{ .DiffURL }}" target="_blank" rel="noreferrer">diff:{{ .PreviousHash }}</a></li>
+        </ul>
+    </li>
+    {{ else }}
+    <li>No watches configured</li>
+    {{ end}}
+</ul>
+{{ end }}
--- a/internal/assets/templates/clock.html
+++ b/internal/assets/templates/clock.html
@@ -0,0 +1,30 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+<div class="clock" data-hour-format="{{ .HourFormat }}">
+    <div class="flex justify-between items-center" data-local-time>
+        <div>
+            <div class="color-highlight size-h1" data-date></div>
+            <div data-year></div>
+        </div>
+        <div class="text-right">
+            <div class="clock-time size-h1" data-time></div>
+            <div data-weekday></div>
+        </div>
+    </div>
+    {{ if gt (len .Timezones) 0 }}
+    <hr class="margin-block-10">
+    <ul class="list list-gap-4">
+        {{ range .Timezones }}
+        <li class="flex items-center gap-15" data-time-in-zone="{{ .Timezone }}">
+            <div class="grow min-width-0">
+                <div class="text-truncate">{{ if ne .Label "" }}{{ .Label }}{{ else }}{{ .Timezone }}{{ end }}</div>
+            </div>
+            <div class="color-subdue" data-time-diff></div>
+            <div class="size-h4 clock-time shrink-0 text-right" data-time></div>
+        </li>
+        {{ end }}
+    </ul>
+    {{ end }}
+</div>
+{{ end }}
--- a/internal/assets/templates/document.html
+++ b/internal/assets/templates/document.html
@@ -11,12 +11,12 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Glance">
    <meta name="theme-color" content="{{ if ne nil .App.Config.Theme.BackgroundColor }}{{ .App.Config.Theme.BackgroundColor }}{{ else }}hsl(240, 8%, 9%){{ end }}">
-    <link rel="apple-touch-icon" sizes="512x512" href="{{ .App.Config.Server.BaseUrl }}/static/app-icon.png">
-    <link rel="icon" type="image/png" sizes="50x50" href="{{ .App.Config.Server.BaseUrl }}/static/favicon.png">
-    <link rel="manifest" href="{{ .App.Config.Server.BaseUrl }}/static/manifest.json">
-    <link rel="icon" type="image/png" href="{{ .App.Config.Server.BaseUrl }}/static/favicon.png" />
-    <link rel="stylesheet" href="{{ .App.Config.Server.BaseUrl }}/static/main.css?v={{ .App.Config.Server.StartedAt.Unix }}">
-    <script async src="{{ .App.Config.Server.BaseUrl }}/static/main.js?v={{ .App.Config.Server.StartedAt.Unix }}"></script>
+    <link rel="apple-touch-icon" sizes="512x512" href="{{ .App.AssetPath "app-icon.png" }}">
+    <link rel="icon" type="image/png" sizes="50x50" href="{{ .App.AssetPath "favicon.png" }}">
+    <link rel="manifest" href="{{ .App.AssetPath "manifest.json" }}">
+    <link rel="icon" type="image/png" href="{{ .App.AssetPath "favicon.png" }}" />
+    <link rel="stylesheet" href="{{ .App.AssetPath "main.css" }}">
+    <script type="module" src="{{ .App.AssetPath "main.js" }}"></script>
    {{ block "document-head-after" . }}{{ end }}
 </head>
 <body>
--- a/internal/assets/templates/extension.html
+++ b/internal/assets/templates/extension.html
@@ -0,0 +1,5 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+{{ .Extension.Content }}
+{{ end }}
--- a/internal/assets/templates/forum-posts.html
+++ b/internal/assets/templates/forum-posts.html
@@ -4,7 +4,7 @@
 <ul class="list list-gap-14 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
    {{ range .Posts }}
    <li>
-        <div class="forum-post-list-item thumbnail-container">
+        <div class="flex gap-10 row-reverse-on-mobile thumbnail-parent">
            {{ if $.ShowThumbnails }}
                {{ if ne .ThumbnailUrl "" }}
                <img class="forum-post-list-thumbnail thumbnail" src="{{ .ThumbnailUrl }}" alt="" loading="lazy">
@@ -18,14 +18,23 @@
                </svg>
                {{ end }}
            {{ end }}
-            <div class="grow">
+            <div class="grow min-width-0">
                <a href="{{ .DiscussionUrl }}" class="size-h3 color-primary-if-not-visited" target="_blank" rel="noreferrer">{{ .Title }}</a>
+                {{ if gt (len .Tags) 0 }}
+                <div class="inline-block forum-post-tags-container">
+                    <ul class="attachments">
+                    {{ range .Tags }}
+                        <li>{{ . }}</li>
+                    {{ end }}
+                    </ul>
+                </div>
+                {{ end }}
                <ul class="list-horizontal-text">
                    <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
                    <li>{{ .Score | formatNumber }} points</li>
                    <li>{{ .CommentCount | formatNumber }} comments</li>
                    {{ if .HasTargetUrl }}
-                    <li class="shrink min-width-0"><a class="visited-indicator text-truncate block" href="{{ .TargetUrl }}" target="_blank" rel="noreferrer">{{ .TargetUrlDomain }}</a></li>
+                    <li class="min-width-0"><a class="visited-indicator text-truncate block" href="{{ .TargetUrl }}" target="_blank" rel="noreferrer">{{ .TargetUrlDomain }}</a></li>
                    {{ end }}
                </ul>
            </div>
--- a/internal/assets/templates/group.html
+++ b/internal/assets/templates/group.html
@@ -0,0 +1,20 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content-classes" }}widget-content-frameless{{ end }}
+
+{{ define "widget-content" }}
+<div class="widget-group-header">
+    <div class="widget-header gap-20">
+        {{ range $i, $widget := .Widgets }}
+            <button class="widget-group-title{{ if eq $i 0 }} widget-group-title-current{{ end }}">{{ $widget.Title }}</button>
+        {{ end }}
+    </div>
+</div>
+
+<div class="widget-group-contents">
+{{ range $i, $widget := .Widgets }}
+    <div class="widget-group-content{{ if eq $i 0 }} widget-group-content-current{{ end }}">{{ .Render }}</div>
+{{ end }}
+</div>
+
+{{ end }}
--- a/internal/assets/templates/markets.html
+++ b/internal/assets/templates/markets.html
@@ -3,36 +3,36 @@
 {{ define "widget-content" }}
 {{ if ne .Style "dynamic-columns-experimental" }}
 <ul class="list list-gap-20 list-with-separator">
-    {{ range .Stocks }}
+    {{ range .Markets }}
    <li class="flex items-center gap-15">
-        {{ template "stock" . }}
+        {{ template "market" . }}
    </li>
    {{ end }}
 </ul>
 {{ else }}
 <div class="dynamic-columns">
-    {{ range .Stocks }}
+    {{ range .Markets }}
    <div class="flex items-center gap-15">
-        {{ template "stock" . }}
+        {{ template "market" . }}
    </div>
    {{ end }}
 </div>
 {{ end }}
 {{ end }}

-{{ define "stock" }}
-<div class="shrink min-width-0">
+{{ define "market" }}
+<div class="min-width-0">
    <a{{ if ne "" .SymbolLink }} href="{{ .SymbolLink }}" target="_blank" rel="noreferrer"{{ end }} class="color-highlight size-h3 block text-truncate">{{ .Symbol }}</a>
    <div class="text-truncate">{{ .Name }}</div>
 </div>

-<a class="stock-chart" {{ if ne "" .ChartLink }} href="{{ .ChartLink }}" target="_blank" rel="noreferrer"{{ end }}>
-    <svg class="stock-chart shrink-0" viewBox="0 0 100 50">
+<a class="market-chart" {{ if ne "" .ChartLink }} href="{{ .ChartLink }}" target="_blank" rel="noreferrer"{{ end }}>
+    <svg class="market-chart shrink-0" viewBox="0 0 100 50">
        <polyline fill="none" stroke="var(--color-text-subdue)" stroke-width="1.5px" points="{{ .SvgChartPoints }}" vector-effect="non-scaling-stroke"></polyline>
    </svg>
 </a>

-<div class="stock-values shrink-0">
+<div class="market-values shrink-0">
    <div class="size-h3 text-right {{ if eq .PercentChange 0.0 }}{{ else if gt .PercentChange 0.0 }}color-positive{{ else }}color-negative{{ end }}">{{ printf "%+.2f" .PercentChange }}%</div>
    <div class="text-right">{{ .Currency }}{{ .Price | formatPrice }}</div>
 </div>
--- a/internal/assets/templates/monitor.html
+++ b/internal/assets/templates/monitor.html
@@ -22,13 +22,13 @@

 {{ define "site" }}
 {{ if .IconUrl }}
-<img class="monitor-site-icon" src="{{ .IconUrl }}" alt="" loading="lazy">
+<img class="monitor-site-icon{{ if .IsSimpleIcon }} simple-icon{{ end }}" src="{{ .IconUrl }}" alt="" loading="lazy">
 {{ end }}
 <div>
-    <a class="size-h3 color-highlight" href="{{ .Url }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
+    <a class="size-h3 color-highlight" href="{{ .URL }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
    <ul class="list-horizontal-text">
        {{ if not .Status.Error }}
-        <li>{{ .StatusText }}</li>
+        <li title="{{ .Status.Code }}">{{ .StatusText }}</li>
        <li>{{ .Status.ResponseTime.Milliseconds | formatNumber }}ms</li>
        {{ else if .Status.TimedOut }}
        <li class="color-negative">Timed Out</li>
@@ -37,7 +37,7 @@
        {{ end }}
    </ul>
 </div>
-{{ if eq .StatusStyle "good" }}
+{{ if eq .StatusStyle "ok" }}
 <div class="monitor-site-status-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
--- a/internal/assets/templates/page.html
+++ b/internal/assets/templates/page.html
@@ -11,7 +11,7 @@
 </script>
 {{ end }}

-{{ define "document-root-attrs" }}{{ if .App.Config.Theme.Light }}class="light-scheme"{{ end }}{{ end }}
+{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if ne "" .Page.Width }}page-width-{{ .Page.Width }}{{ end }}"{{ end }}
 {{ define "document-head-after" }}
 {{ template "page-style-overrides.gotmpl" . }}
 {{ if ne "" .App.Config.Theme.CustomCSSFile }}
@@ -26,43 +26,48 @@
 {{ end }}

 {{ define "document-body" }}
-<div class="header-container content-bounds">
-    <div class="header flex padding-inline-widget widget-content-frame">
-        <!-- TODO: Replace G with actual logo, first need an actual logo -->
-        <div class="logo">G</div>
-        <div class="nav flex grow">
+<div class="flex flex-column height-100">
+    {{ if not .Page.HideDesktopNavigation }}
+    <div class="header-container content-bounds">
+        <div class="header flex padding-inline-widget widget-content-frame">
+            <!-- TODO: Replace G with actual logo, first need an actual logo -->
+            <div class="logo">G</div>
+            <div class="nav flex grow">
+                {{ template "navigation-links" . }}
+            </div>
+        </div>
+    </div>
+    {{ end }}
+
+    <div class="mobile-navigation">
+        <div class="mobile-navigation-icons">
+            <a class="mobile-navigation-label" href="#top">↑</a>
+            {{ range $i, $column := .Page.Columns }}
+            <label class="mobile-navigation-label"><input type="radio" class="mobile-navigation-input" name="column" value="{{ $i }}" autocomplete="off"{{ if eq "full" $column.Size }} checked{{ end }}><div class="mobile-navigation-pill"></div></label>
+            {{ end }}
+            <label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"><div class="hamburger-icon"></div></label>
+        </div>
+        <div class="mobile-navigation-page-links">
            {{ template "navigation-links" . }}
        </div>
    </div>
-</div>

-<div class="mobile-navigation">
-    <div class="mobile-navigation-icons">
-        <a class="mobile-navigation-label" href="#top">↑</a>
-        {{ range $i, $column := .Page.Columns }}
-        <label class="mobile-navigation-label"><input type="radio" class="mobile-navigation-input" name="column" value="{{ $i }}" autocomplete="off"{{ if eq "full" $column.Size }} checked{{ end }}><div class="mobile-navigation-pill"></div></label>
-        {{ end }}
-        <label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"><div class="hamburger-icon"></div></label>
-    </div>
-    <div class="mobile-navigation-page-links">
-        {{ template "navigation-links" . }}
-    </div>
-</div>
-
-<div class="content-bounds">
-    <div class="page" id="page">
-        <div class="page-content" id="page-content"></div>
-        <div class="page-loading-container">
-            <!-- TODO: add a bigger/better loading indicator -->
-            <div class="loading-icon"></div>
+    <div class="content-bounds grow">
+        <div class="page" id="page">
+            <div class="page-content" id="page-content"></div>
+            <div class="page-loading-container">
+                <!-- TODO: add a bigger/better loading indicator -->
+                <div class="loading-icon"></div>
+            </div>
        </div>
    </div>
-</div>

-<div class="footer flex items-center flex-column">
-    <div>
-        <a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
+    <div class="footer flex items-center flex-column">
+        <div>
+            <a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
+        </div>
    </div>
-    <a class="color-primary block margin-top-5 size-h5" href="https://github.com/glanceapp/glance/issues" target="_blank" rel="noreferrer">Report issue</a>
+
+    <div class="mobile-navigation-offset"></div>
 </div>
 {{ end }}
--- a/internal/assets/templates/rss-detailed-list.html
+++ b/internal/assets/templates/rss-detailed-list.html
@@ -0,0 +1,38 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+<ul class="list list-gap-24 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
+    {{ range .Items }}
+    <li class="flex gap-15 items-start row-reverse-on-mobile thumbnail-parent">
+        <div class="thumbnail-container rss-detailed-thumbnail">
+            {{ if ne "" .ImageURL }}
+            <img class="thumbnail" loading="lazy" src="{{ .ImageURL }}" alt="">
+            {{ else }}
+            <svg class="scale-half hide-on-mobile" stroke="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+            </svg>
+            {{ end }}
+        </div>
+        <div class="grow min-width-0">
+            <a class="size-h3 color-primary-if-not-visited" href="{{ .Link }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
+            <ul class="list-horizontal-text flex-nowrap">
+                <li {{ dynamicRelativeTimeAttrs .PublishedAt }}></li>
+                <li class="min-width-0">
+                    <a class="block text-truncate" href="{{ .ChannelURL }}" target="_blank" rel="noreferrer">{{ .ChannelName }}</a>
+                </li>
+            </ul>
+            {{ if ne "" .Description }}
+            <p class="rss-detailed-description text-truncate-2-lines margin-top-10">{{ .Description }}</p>
+            {{ end }}
+            {{ if gt (len .Categories) 0 }}
+            <ul class="attachments margin-top-10">
+            {{ range .Categories }}
+                <li>{{ . }}</li>
+            {{ end }}
+            </ul>
+            {{ end }}
+        </div>
+    </li>
+    {{ end }}
+</ul>
+{{ end }}
--- a/internal/assets/templates/rss-horizontal-cards-2.html
+++ b/internal/assets/templates/rss-horizontal-cards-2.html
@@ -6,7 +6,7 @@
 <div class="carousel-container">
    <div class="cards-horizontal carousel-items-container"{{ if ne 0.0 .CardHeight }} style="--rss-card-height: {{ .CardHeight }}rem;"{{ end }}>
        {{ range .Items }}
-        <div class="card rss-card-2 widget-content-frame thumbnail-container">
+        <div class="card rss-card-2 widget-content-frame thumbnail-parent">
            {{ if ne "" .ImageURL }}
            <img class="rss-card-2-image thumbnail" loading="lazy" src="{{ .ImageURL }}" alt="">
            {{ else }}
@@ -18,7 +18,7 @@
                <a href="{{ .Link }}" title="{{ .Title }}" class="block text-truncate color-primary-if-not-visited" target="_blank" rel="noreferrer">{{ .Title }}</a>
                <ul class="list-horizontal-text flex-nowrap margin-top-5">
                    <li class="shrink-0" {{ dynamicRelativeTimeAttrs .PublishedAt }}></li>
-                    <li class="shrink min-width-0 text-truncate">{{ .ChannelName }}</li>
+                    <li class="min-width-0 text-truncate">{{ .ChannelName }}</li>
                </ul>
            </div>
        </div>
--- a/internal/assets/templates/rss-horizontal-cards.html
+++ b/internal/assets/templates/rss-horizontal-cards.html
@@ -6,7 +6,7 @@
 <div class="carousel-container">
    <div class="cards-horizontal carousel-items-container"{{ if ne 0.0 .ThumbnailHeight }} style="--rss-thumbnail-height: {{ .ThumbnailHeight }}rem;"{{ end }}>
        {{ range .Items }}
-        <div class="card widget-content-frame thumbnail-container">
+        <div class="card widget-content-frame thumbnail-parent">
            {{ if ne "" .ImageURL }}
            <img class="rss-card-image thumbnail" loading="lazy" src="{{ .ImageURL }}" alt="">
            {{ else }}
@@ -18,7 +18,7 @@
                <a href="{{ .Link }}" title="{{ .Title }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-10 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a>
                <ul class="list-horizontal-text flex-nowrap margin-top-7">
                    <li class="shrink-0" {{ dynamicRelativeTimeAttrs .PublishedAt }}></li>
-                    <li class="shrink min-width-0 text-truncate">{{ .ChannelName }}</li>
+                    <li class="min-width-0 text-truncate">{{ .ChannelName }}</li>
                </ul>
            </div>
        </div>
--- a/internal/assets/templates/rss-list.html
+++ b/internal/assets/templates/rss-list.html
@@ -5,11 +5,11 @@
    {{ range .Items }}
    <li>
        <a class="size-title-dynamic color-primary-if-not-visited" href="{{ .Link }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
-        <ul class="list-horizontal-text">
+        <ul class="list-horizontal-text flex-nowrap">
            <li {{ dynamicRelativeTimeAttrs .PublishedAt }}></li>
-            {{ if gt (len $.FeedRequests) 1 }}
-                <li><a href="{{ .ChannelURL }}" target="_blank" rel="noreferrer">{{ .ChannelName }}</a></li>
-            {{ end }}
+            <li class="min-width-0">
+                <a class="block text-truncate" href="{{ .ChannelURL }}" target="_blank" rel="noreferrer">{{ .ChannelName }}</a>
+            </li>
        </ul>
    </li>
    {{ end }}
--- a/internal/assets/templates/search.html
+++ b/internal/assets/templates/search.html
@@ -0,0 +1,24 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content-classes" }}widget-content-frameless{{ end }}
+
+{{ define "widget-content" }}
+<div class="search widget-content-frame padding-inline-widget flex gap-15 items-center" data-default-search-url="{{ .SearchEngine }}" data-new-tab="{{ .NewTab }}">
+    <div class="search-bangs">
+        {{ range .Bangs }}
+        <input type="hidden" data-shortcut="{{ .Shortcut }}" data-title="{{ .Title }}" data-url="{{ .URL }}">
+        {{ end }}
+    </div>
+
+    <div class="search-icon-container">
+        <svg class="search-icon" stroke="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+    </div>
+
+    <input class="search-input" type="text" placeholder="Type here to search…" autocomplete="off"{{ if .Autofocus }} autofocus{{ end }}>
+
+    <div class="search-bang"></div>
+    <kbd class="hide-on-mobile" title="Press [S] to focus the search input">S</kbd>
+</div>
+{{ end }}
--- a/internal/assets/templates/twitch-channels.html
+++ b/internal/assets/templates/twitch-channels.html
@@ -4,21 +4,25 @@
 <ul class="list list-gap-14 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
    {{ range .Channels }}
    <li>
-        <div class="{{ if .IsLive }}twitch-channel-live {{ end }}flex gap-10 items-start thumbnail-container">
+        <div class="{{ if .IsLive }}twitch-channel-live {{ end }}flex gap-10 items-start thumbnail-parent">
            <div class="twitch-channel-avatar-container">
                {{ if .Exists }}
-                <img class="twitch-channel-avatar thumbnail" src="{{ .AvatarUrl }}" alt="" loading="lazy">
+                <a href="https://twitch.tv/{{ .Login }}" class="twitch-channel-avatar-link" target="_blank" rel="noreferrer">
+                    <img class="twitch-channel-avatar thumbnail" src="{{ .AvatarUrl }}" alt="" loading="lazy">
+                </a>
                {{ else }}
                <svg class="twitch-channel-avatar thumbnail" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                </svg>
                {{ end }}
            </div>
-            <div class="shrink min-width-0">
+            <div class="min-width-0">
                <a href="https://twitch.tv/{{ .Login }}" class="size-h3{{ if .IsLive }} color-highlight{{ end }} block text-truncate" target="_blank" rel="noreferrer">{{ .Name }}</a>
                {{ if .Exists }}
                    {{ if .IsLive }}
-                    <a class="text-truncate block" href="https://www.twitch.tv/directory/category/{{ .CategorySlug }}" target="_blank" rel="noreferrer">{{ .Category }}</a>
+                        {{ if .Category }}
+                            <a class="text-truncate block" href="https://www.twitch.tv/directory/category/{{ .CategorySlug }}" target="_blank" rel="noreferrer">{{ .Category }}</a>
+                        {{ end }}
                    <ul class="list-horizontal-text">
                        <li {{ dynamicRelativeTimeAttrs .LiveSince }}></li>
                        <li>{{ .ViewersCount | formatViewerCount }} viewers</li>
--- a/internal/assets/templates/twitch-games-list.html
+++ b/internal/assets/templates/twitch-games-list.html
@@ -3,10 +3,10 @@
 {{ define "widget-content" }}
 <ul class="list list-gap-14 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
    {{ range .Categories }}
-    <li class="twitch-category thumbnail-container">
-        <div class="flex gap-10 items-center">
+    <li class="twitch-category thumbnail-parent">
+        <div class="flex gap-10 items-start">
            <img class="twitch-category-thumbnail thumbnail" loading="lazy" src="{{ .AvatarUrl }}" alt="">
-            <div class="shrink min-width-0">
+            <div class="min-width-0">
                <a class="size-h3 color-highlight text-truncate block" href="https://www.twitch.tv/directory/category/{{ .Slug }}" target="_blank" rel="noreferrer">{{ .Name }}</a>
                <ul class="list-horizontal-text">
                    <li>{{ .ViewersCount | formatViewerCount }} viewers</li>
@@ -19,7 +19,7 @@
                        {{ if eq $i 0 }}
                        <li class="shrink-0">{{ $tag.Name }}</li>
                        {{ else }}
-                        <li class="text-truncate shrink min-width-0">{{ $tag.Name }}</li>
+                        <li class="text-truncate min-width-0">{{ $tag.Name }}</li>
                        {{ end }}
                    {{ end }}
                </ul>
--- a/internal/assets/templates/video-card-contents.html
+++ b/internal/assets/templates/video-card-contents.html
@@ -4,7 +4,7 @@
    <a class="video-title color-primary-if-not-visited" href="{{ .Url }}" target="_blank" rel="noreferrer" title="{{ .Title }}">{{ .Title }}</a>
    <ul class="list-horizontal-text flex-nowrap margin-top-7">
        <li class="shrink-0" {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
-        <li class="shrink min-width-0">
+        <li class="min-width-0">
            <a class="block text-truncate" href="{{ .AuthorUrl }}" target="_blank" rel="noreferrer">{{ .Author }}</a>
        </li>
    </ul>
--- a/internal/assets/templates/videos-grid.html
+++ b/internal/assets/templates/videos-grid.html
@@ -5,7 +5,7 @@
 {{ define "widget-content" }}
 <div class="cards-grid collapsible-container" data-collapse-after-rows="{{ .CollapseAfterRows }}">
    {{ range .Videos }}
-    <div class="card widget-content-frame thumbnail-container">
+    <div class="card widget-content-frame thumbnail-parent">
        {{ template "video-card-contents" . }}
    </div>
    {{ end }}
--- a/internal/assets/templates/videos.html
+++ b/internal/assets/templates/videos.html
@@ -6,7 +6,7 @@
 <div class="carousel-container">
    <div class="cards-horizontal carousel-items-container">
        {{ range .Videos }}
-        <div class="card widget-content-frame thumbnail-container">
+        <div class="card widget-content-frame thumbnail-parent">
            {{ template "video-card-contents" . }}
        </div>
        {{ end }}
--- a/internal/assets/templates/widget-base.html
+++ b/internal/assets/templates/widget-base.html
@@ -1,13 +1,15 @@
-<div class="widget widget-type-{{ .GetType }}">
+<div class="widget widget-type-{{ .GetType }}{{ if ne "" .CSSClass }} {{ .CSSClass }}{{ end }}">
+    {{ if not .HideHeader}}
    <div class="widget-header">
-        <div class="uppercase">{{ .Title }}</div>
+        {{ if ne "" .TitleURL}}<a href="{{ .TitleURL }}" target="_blank" rel="noreferrer" class="uppercase">{{ .Title }}</a>{{ else }}<div class="uppercase">{{ .Title }}</div>{{ end }}
        {{ if and .Error .ContentAvailable }}
        <div class="notice-icon notice-icon-major" title="{{ .Error }}"></div>
        {{ else if .Notice }}
        <div class="notice-icon notice-icon-minor" title="{{ .Notice }}"></div>
        {{ end }}
    </div>
-    <div class="widget-content {{ if .ContentAvailable }}{{ block "widget-content-classes" . }}{{ end }}{{ end }}">
+    {{ end }}
+    <div class="widget-content{{ if .ContentAvailable }} {{ block "widget-content-classes" . }}{{ end }}{{ end }}">
        {{ if .ContentAvailable }}
            {{ block "widget-content" . }}{{ end }}
        {{ else }}