From ecbad7ce6ca757f9d1f7750c2295fe4af0b6a5ed Mon Sep 17 00:00:00 2001 From: Carlos Medina Date: Wed, 8 May 2024 16:51:04 -0600 Subject: [PATCH 01/47] Add mobile web app support --- internal/assets/static/app-icon.png | Bin 0 -> 7946 bytes internal/assets/static/main.css | 8 ++++++++ internal/assets/static/manifest.json | 13 +++++++++++++ internal/assets/templates/document.html | 8 ++++++++ 4 files changed, 29 insertions(+) create mode 100644 internal/assets/static/app-icon.png create mode 100644 internal/assets/static/manifest.json diff --git a/internal/assets/static/app-icon.png b/internal/assets/static/app-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..54fc4131137d09784f3057b58cc18afdaab13ba4 GIT binary patch literal 7946 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 + + + + + + + + From 461c984317c86d6e32cd289853a892f634a7d978 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Thu, 9 May 2024 04:05:25 +0100 Subject: [PATCH 02/47] Check if background color is nil before setting --- internal/assets/templates/document.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/templates/document.html b/internal/assets/templates/document.html index 8929579..dbc19e3 100644 --- a/internal/assets/templates/document.html +++ b/internal/assets/templates/document.html @@ -10,7 +10,7 @@ - + From 91c75518dadcca02a1490d9df60b216f6b76c48c Mon Sep 17 00:00:00 2001 From: Carlos Medina Date: Fri, 10 May 2024 19:54:43 -0600 Subject: [PATCH 03/47] Change mobile nav styles --- internal/assets/static/main.css | 71 +++++++++++++++++++------ internal/assets/templates/document.html | 2 +- 2 files changed, 55 insertions(+), 18 deletions(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 36700b9..49b0d67 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -909,15 +909,11 @@ body { .mobile-navigation { display: block; position: fixed; + height: var(--mobile-navigation-height); bottom: 0; - transform: translateY(calc(100% - var(--mobile-navigation-height))); left: var(--content-bounds-padding); right: var(--content-bounds-padding); z-index: 10; - background-color: var(--color-widget-background); - border: 1px solid var(--color-widget-content-border); - border-bottom: 0; - border-radius: var(--border-radius) var(--border-radius) 0 0; transition: transform .3s; } @@ -927,23 +923,50 @@ body { height: 2px; } - .mobile-navigation:has(.mobile-navigation-page-links-input:checked) { - transform: translateY(0); - } - .mobile-navigation-page-links { - border-top: 1px solid var(--color-widget-content-border); - padding: 15px var(--content-bounds-padding); display: flex; align-items: center; + position: relative; + height: 100%; + background-color: var(--color-widget-background); + border: 1px solid transparent; + border-top: 0; + border-bottom: 0; + padding: 0 var(--content-bounds-padding); overflow-x: scroll; gap: 2.5rem; + transition: border-color 0s .2s, transform .3s; + z-index: 1; + } + + .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-page-links { + border-color: var(--color-widget-content-border); + transition: transform .3s; + } + + .mobile-navigation-page-links .nav-item { + line-height: var(--mobile-navigation-height); } .mobile-navigation-icons { display: flex; justify-content: space-around; align-items: center; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--color-widget-background); + border: 1px solid var(--color-widget-content-border); + border-bottom-color: transparent; + border-radius: var(--border-radius) var(--border-radius) 0 0; + transition: border .3s, border-radius .3s, transform .3s; + z-index: 2; + } + + .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-icons { + border-bottom-color: var(--color-widget-content-border); + border-radius: var(--border-radius) var(--border-radius) 0 0; + transform: translateY(-100%); } body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1), @@ -955,13 +978,12 @@ body { .mobile-navigation-label { display: flex; flex: 1; + align-self: stretch; max-width: 50px; - height: var(--mobile-navigation-height); justify-content: center; align-items: center; cursor: pointer; font-size: 15px; - line-height: var(--mobile-navigation-height); } .mobile-navigation-pill { @@ -1023,11 +1045,26 @@ body { } @media (display-mode: standalone) { - @supports (-webkit-touch-callout: none) { - .mobile-navigation { - bottom: 15px; + body { + padding-top: env(safe-area-inset-top, 0); + } + + .mobile-navigation { + bottom: env(safe-area-inset-bottom, 0); + } + + .mobile-navigation::after { + content: ''; + position: absolute; + background: var(--color-widget-background); + height: calc(var(--mobile-navigation-height) + env(safe-area-inset-bottom, 0)); + top: 0; + left: 0; + right: 0; + border: 1px solid var(--color-widget-content-border); + border-bottom: 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; } - } } .size-h1 { font-size: var(--font-size-h1); } diff --git a/internal/assets/templates/document.html b/internal/assets/templates/document.html index dbc19e3..aa3aac2 100644 --- a/internal/assets/templates/document.html +++ b/internal/assets/templates/document.html @@ -5,7 +5,7 @@ {{ block "document-title" . }}{{ end }} - + From bc06578e53a0c54f71d63d9868d0ca7ceaf0765d Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 12 May 2024 14:20:10 +0100 Subject: [PATCH 04/47] Change implementation for the safe area --- internal/assets/static/main.css | 97 +++++++++++++-------------------- 1 file changed, 39 insertions(+), 58 deletions(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 49b0d67..4348d57 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -909,11 +909,15 @@ body { .mobile-navigation { display: block; position: fixed; - height: var(--mobile-navigation-height); bottom: 0; + transform: translateY(calc(100% - var(--mobile-navigation-height))); left: var(--content-bounds-padding); right: var(--content-bounds-padding); z-index: 10; + background-color: var(--color-widget-background); + border: 1px solid var(--color-widget-content-border); + border-bottom: 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; transition: transform .3s; } @@ -923,50 +927,23 @@ body { height: 2px; } + .mobile-navigation:has(.mobile-navigation-page-links-input:checked) { + transform: translateY(0); + } + .mobile-navigation-page-links { + border-top: 1px solid var(--color-widget-content-border); + padding: 15px var(--content-bounds-padding); display: flex; align-items: center; - position: relative; - height: 100%; - background-color: var(--color-widget-background); - border: 1px solid transparent; - border-top: 0; - border-bottom: 0; - padding: 0 var(--content-bounds-padding); overflow-x: scroll; gap: 2.5rem; - transition: border-color 0s .2s, transform .3s; - z-index: 1; - } - - .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-page-links { - border-color: var(--color-widget-content-border); - transition: transform .3s; - } - - .mobile-navigation-page-links .nav-item { - line-height: var(--mobile-navigation-height); } .mobile-navigation-icons { display: flex; justify-content: space-around; align-items: center; - position: absolute; - width: 100%; - height: 100%; - background-color: var(--color-widget-background); - border: 1px solid var(--color-widget-content-border); - border-bottom-color: transparent; - border-radius: var(--border-radius) var(--border-radius) 0 0; - transition: border .3s, border-radius .3s, transform .3s; - z-index: 2; - } - - .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-icons { - border-bottom-color: var(--color-widget-content-border); - border-radius: var(--border-radius) var(--border-radius) 0 0; - transform: translateY(-100%); } body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1), @@ -978,12 +955,13 @@ body { .mobile-navigation-label { display: flex; flex: 1; - align-self: stretch; max-width: 50px; + height: var(--mobile-navigation-height); justify-content: center; align-items: center; cursor: pointer; font-size: 15px; + line-height: var(--mobile-navigation-height); } .mobile-navigation-pill { @@ -1026,6 +1004,32 @@ body { } } +@media (max-width: 1190px) and (display-mode: standalone) { + :root { + --safe-area-inset-bottom: env(safe-area-inset-bottom, 0); + } + + .mobile-navigation { + transform: translateY(calc(100% - var(--mobile-navigation-height) - var(--safe-area-inset-bottom))); + padding-bottom: var(--safe-area-inset-bottom); + } + + .mobile-navigation-icons { + padding-bottom: var(--safe-area-inset-bottom); + transition: padding-bottom .3s; + } + + .mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) { + padding-bottom: 0; + } +} + +@media (display-mode: standalone) { + body { + padding-top: env(safe-area-inset-top, 0); + } +} + @media (max-width: 550px) { :root { font-size: 9px; @@ -1044,29 +1048,6 @@ body { } } -@media (display-mode: standalone) { - body { - padding-top: env(safe-area-inset-top, 0); - } - - .mobile-navigation { - bottom: env(safe-area-inset-bottom, 0); - } - - .mobile-navigation::after { - content: ''; - position: absolute; - background: var(--color-widget-background); - height: calc(var(--mobile-navigation-height) + env(safe-area-inset-bottom, 0)); - top: 0; - left: 0; - right: 0; - border: 1px solid var(--color-widget-content-border); - border-bottom: 0; - border-radius: var(--border-radius) var(--border-radius) 0 0; - } -} - .size-h1 { font-size: var(--font-size-h1); } .size-h2 { font-size: var(--font-size-h2); } .size-h3 { font-size: var(--font-size-h3); } From 09b7d7110385fa6bf2ff2e5f51942cef7e08d507 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 12 May 2024 14:27:25 +0100 Subject: [PATCH 05/47] Revert to using the small icon for the favicon Bit too much whitespace in the app icon to be able to use it as a favicon, makes the G look quite small --- internal/assets/templates/document.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/templates/document.html b/internal/assets/templates/document.html index aa3aac2..d126d8b 100644 --- a/internal/assets/templates/document.html +++ b/internal/assets/templates/document.html @@ -12,7 +12,7 @@ - + From f9ca93e0b072293d719e847cb6a2b2529a82a162 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 12 May 2024 14:45:13 +0100 Subject: [PATCH 06/47] Account for safe area in label offset --- internal/assets/static/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 4348d57..44df545 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -1009,6 +1009,10 @@ body { --safe-area-inset-bottom: env(safe-area-inset-bottom, 0); } + .list-collapsible-label:has(.list-collapsible-input:checked) { + bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); + } + .mobile-navigation { transform: translateY(calc(100% - var(--mobile-navigation-height) - var(--safe-area-inset-bottom))); padding-bottom: var(--safe-area-inset-bottom); From 6a7b50b35fefe10e3731c2b3afacb9cb60c920e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tar=C4=B1k=20Co=C5=9Fkun?= Date: Mon, 13 May 2024 15:08:58 +0300 Subject: [PATCH 07/47] Add 24-hour time format support for weather --- docs/configuration.md | 7 ++++++- internal/widget/weather.go | 13 +++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index e698fdd..e54ebb0 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -647,6 +647,7 @@ Example: ```yaml - type: weather units: metric + hour-format: 12h location: London, United Kingdom ``` @@ -671,6 +672,7 @@ Each bar represents a 2 hour interval. The yellow background represents sunrise | ---- | ---- | -------- | ------- | | location | string | yes | | | units | string | no | metric | +| hour-format | string | no | 12h | | hide-location | boolean | no | false | | show-area-name | boolean | no | false | @@ -680,6 +682,9 @@ The name of the city and country to fetch weather information for. Attempting to ##### `units` Whether to show the temperature in celsius or fahrenheit, possible values are `metric` or `imperial`. +#### `hour-format` +Whether to show the hours of the day in 12-hour format or 24-hour format + ##### `hide-location` Optionally don't display the location name on the widget. @@ -1131,4 +1136,4 @@ Example: The source of the iframe. ##### `height` -The height of the iframe. The minimum allowed height is 50. +The height of the iframe. The minimum allowed height is 50. \ No newline at end of file diff --git a/internal/widget/weather.go b/internal/widget/weather.go index 9d90e03..723d1db 100644 --- a/internal/widget/weather.go +++ b/internal/widget/weather.go @@ -14,17 +14,26 @@ type Weather struct { Location string `yaml:"location"` ShowAreaName bool `yaml:"show-area-name"` HideLocation bool `yaml:"hide-location"` + HourFormat string `yaml:"hour-format"` Units string `yaml:"units"` Place *feed.PlaceJson `yaml:"-"` Weather *feed.Weather `yaml:"-"` TimeLabels [12]string `yaml:"-"` } -var timeLabels = [12]string{"2am", "4am", "6am", "8am", "10am", "12pm", "2pm", "4pm", "6pm", "8pm", "10pm", "12am"} +var timeLabels12h = [12]string{"2am", "4am", "6am", "8am", "10am", "12pm", "2pm", "4pm", "6pm", "8pm", "10pm", "12am"} +var timeLabels24h = [12]string{"02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "24:00"} func (widget *Weather) Initialize() error { widget.withTitle("Weather").withCacheOnTheHour() - widget.TimeLabels = timeLabels + + if widget.HourFormat == "" || widget.HourFormat == "12h" { + widget.TimeLabels = timeLabels12h + } else if widget.HourFormat == "24h" { + widget.TimeLabels = timeLabels24h + } else if widget.Units != "12h" && widget.Units != "24h" { + return fmt.Errorf("invalid hour format '%s' for weather, must be either 12h or 24h", widget.HourFormat) + } if widget.Units == "" { widget.Units = "metric" From 48d4d4e9669ef1bd6752cd6d11bd7ed137d3f2c4 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Tue, 14 May 2024 06:28:42 +0100 Subject: [PATCH 08/47] Revert back to vh dvh causes micro jumps when scrolling near the top of the page which looks glitchy --- internal/assets/static/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 1e64def..48e6eb7 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -1134,7 +1134,7 @@ body { .mobile-reachability-header { display: block; font-size: 3rem; - padding: 10dvh 1rem; + padding: 10vh 1rem; text-align: center; color: var(--color-text-highlight); animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; From 7e05f8a5ebc78fe1b6e6a64977cee8f6bca05582 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Tue, 14 May 2024 14:32:51 +0100 Subject: [PATCH 09/47] Add carousel right cutoff by default Prevents it from fading in when the page loads --- internal/assets/static/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index 05dbc45..d0df1d8 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -35,6 +35,7 @@ function setupCarousels() { 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 = () => { From 514d5f92d18bfe8b53fdb942692ed5c1895bcdd0 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Tue, 14 May 2024 14:33:24 +0100 Subject: [PATCH 10/47] Add link to release notes --- internal/assets/templates/page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/templates/page.html b/internal/assets/templates/page.html index 61fad9e..ee1eea8 100644 --- a/internal/assets/templates/page.html +++ b/internal/assets/templates/page.html @@ -59,7 +59,7 @@
- Glance ({{ .App.Version }}) + Glance {{ if ne "dev" .App.Version }}{{ .App.Version }}{{ else }}({{ .App.Version }}){{ end }}
  • Report issue
    • From f0ca2edb252c5faa210651c221f84baad7befff6 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Tue, 14 May 2024 16:36:04 +0100 Subject: [PATCH 11/47] Reduce max width of weather columns --- internal/assets/static/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 48e6eb7..983fd1a 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -706,7 +706,7 @@ body { flex-direction: column; width: calc(100% / 12); padding-top: 3px; - max-width: 3.5rem; + max-width: 3rem; } .weather-column-value, .weather-columns:hover .weather-column-value { From de965dace868db502c17115af1fdfa829004451f Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Tue, 14 May 2024 16:38:54 +0100 Subject: [PATCH 12/47] Increase delay before adding class --- internal/assets/static/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index d0df1d8..7045c51 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -178,7 +178,7 @@ async function setupPage() { setTimeout(() => { document.body.classList.add("animate-element-transition"); - }, 150); + }, 200); setTimeout(setupLazyImages, 5); setupCarousels(); From 36f8eac3e49523206c72df3c387be9ec66de6bdc Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Thu, 16 May 2024 20:41:50 +0100 Subject: [PATCH 13/47] Refactor Delay showing page content until JS has finished setting up page elements That then allows the following: Leave relative time to be rendered on the client Leave collapsible lists to be rendered on the client Which massively simplfies the backend templates which were error prone --- internal/assets/static/main.css | 68 +++++------ internal/assets/static/main.js | 108 +++++++++++++++--- internal/assets/templates/forum-posts.html | 27 ++--- internal/assets/templates/page.html | 1 + .../templates/reddit-horizontal-cards.html | 2 +- .../templates/reddit-vertical-cards.html | 2 +- internal/assets/templates/releases.html | 2 +- internal/assets/templates/repository.html | 4 +- .../templates/rss-horizontal-cards-2.html | 2 +- .../templates/rss-horizontal-cards.html | 2 +- internal/assets/templates/rss-list.html | 11 +- .../assets/templates/twitch-channels.html | 27 ++--- .../assets/templates/twitch-games-list.html | 20 ++-- .../assets/templates/video-card-contents.html | 2 +- 14 files changed, 170 insertions(+), 108 deletions(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 983fd1a..05108e0 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -57,6 +57,14 @@ font-size: var(--font-size-h4); } +.page-content, .page.content-ready .page-loading-container { + display: none; +} + +.page.content-ready > .page-content { + display: block; +} + .page-column-full .size-title-dynamic { font-size: var(--font-size-h3); } @@ -117,6 +125,14 @@ padding-top: var(--list-half-gap); } +.list-collapsible:not(.list-collapsible-expanded) > .list-collapsible-item { + display: none; +} + +.list-collapsible-item { + animation: listItemReveal 0.3s backwards; +} + @keyframes listItemReveal { from { opacity: 0; @@ -124,56 +140,42 @@ } } -.list-collapsible-item { - display: none; - animation: listItemReveal 0.3s backwards; - animation-delay: var(--animation-delay); -} - .list-collapsible-label { - display: flex; - align-items: center; - gap: 1rem; + font: inherit; + border: 0; + cursor: pointer; + display: block; + width: 100%; + text-align: left; + color: var(--color-text-base); + text-transform: uppercase; + font-size: var(--font-size-h4); padding: var(--widget-content-vertical-padding) 0; background: var(--color-widget-background); } -.list-collapsible-label:has(.list-collapsible-input:checked) { +.list-collapsible-label-expanded { position: sticky; bottom: 0; } -.list-collapsible:has(+ .list-collapsible-label > .list-collapsible-input:checked) .list-collapsible-item { - display: block; +.list-collapsible-label-icon { + display: inline-block; + margin-left: 1rem; + position: relative; + top: -.2rem; } -.list-collapsible-input { - display: none; -} - -.list-collapsible-label::before, .list-collapsible-label::after { - cursor: pointer; - display: block; -} - -.list-collapsible-label::before { - content: 'SHOW MORE'; - font-size: var(--font-size-h4); -} - -.list-collapsible-label:has(.list-collapsible-input:checked)::before { - content: 'SHOW LESS'; -} - -.list-collapsible-label::after { +.list-collapsible-label-icon::before { content: ''; font-size: 0.8rem; transform: rotate(90deg); line-height: 1; + display: inline-block; transition: transform 0.3s; } -.list-collapsible-label:has(.list-collapsible-input:checked)::after { +.list-collapsible-label-expanded .list-collapsible-label-icon::before { transform: rotate(-90deg); } @@ -1107,7 +1109,7 @@ body { box-shadow: 0 calc(var(--spacing) * -1) 0 0 currentColor, 0 var(--spacing) 0 0 currentColor; } - .list-collapsible-label:has(.list-collapsible-input:checked) { + .list-collapsible-label-expanded { bottom: var(--mobile-navigation-height); } } diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index 7045c51..5f6827b 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -21,7 +21,7 @@ function throttledDebounce(callback, maxDebounceTimes, debounceDelay) { }; -async function fetchPageContents (pageSlug) { +async function fetchPageContent(pageSlug) { // TODO: handle non 200 status codes/time outs // TODO: add retries const response = await fetch(`/api/pages/${pageSlug}/content/`); @@ -33,6 +33,10 @@ async function fetchPageContents (pageSlug) { 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"); @@ -57,7 +61,7 @@ function setupCarousels() { itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited); document.addEventListener("resize", determineSideCutoffsRateLimited); - determineSideCutoffs(); + setTimeout(determineSideCutoffs, 1); } } @@ -108,6 +112,8 @@ function setupDynamicRelativeTime() { const updateInterval = 60 * 1000; let lastUpdateTime = Date.now(); + updateRelativeTimeForElements(elements); + const updateElementsAndTimestamp = () => { updateRelativeTimeForElements(elements); lastUpdateTime = Date.now(); @@ -154,35 +160,101 @@ function setupLazyImages() { image.classList.add("finished-transition"); } - for (let i = 0; i < images.length; i++) { - const image = images[i]; + 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), 5); + } else { + // TODO: also handle error event + image.addEventListener("load", () => { + image.classList.add("loaded"); + setTimeout(() => imageFinishedTransition(image), 500); + }); + } + } + }, 5); +} + +function setupCollapsibleLists() { + const collapsibleListElements = document.getElementsByClassName("list-collapsible"); + + if (collapsibleListElements.length == 0) { + return; + } + + const showMoreText = "Show more"; + const showLessText = "Show less"; + + const attachExpandToggleButton = (listElement) => { + let expanded = false; + const button = document.createElement("button"); + const arrowElement = document.createElement("span"); + arrowElement.classList.add("list-collapsible-label-icon"); + const textNode = document.createTextNode(showMoreText); + button.classList.add("list-collapsible-label"); + button.append(textNode, arrowElement); + button.addEventListener("click", () => { + if (expanded) { + listElement.classList.remove("list-collapsible-expanded"); + button.classList.remove("list-collapsible-label-expanded"); + textNode.nodeValue = showMoreText; + } else { + listElement.classList.add("list-collapsible-expanded"); + button.classList.add("list-collapsible-label-expanded"); + textNode.nodeValue = showLessText; + } + + expanded = !expanded; + }); + + listElement.after(button); + }; + + for (let i = 0; i < collapsibleListElements.length; i++) { + const listElement = collapsibleListElements[i]; + + if (listElement.dataset.collapseAfter === undefined) { + continue; + } + + const collapseAfter = parseInt(listElement.dataset.collapseAfter); + + if (listElement.children.length <= collapseAfter) { + continue; + } + + attachExpandToggleButton(listElement); + + for (let c = collapseAfter; c < listElement.children.length; c++) { + const child = listElement.children[c]; + child.classList.add("list-collapsible-item"); + child.style.animationDelay = ((c - collapseAfter) * 20).toString() + "ms"; } } } async function setupPage() { const pageElement = document.getElementById("page"); - const pageContents = await fetchPageContents(pageData.slug); + const pageContentElement = document.getElementById("page-content"); + const pageContent = await fetchPageContent(pageData.slug); - pageElement.innerHTML = pageContents; + pageContentElement.innerHTML = pageContent; setTimeout(() => { document.body.classList.add("animate-element-transition"); }, 200); - setTimeout(setupLazyImages, 5); - setupCarousels(); - setupDynamicRelativeTime(); + try { + setupLazyImages(); + setupCarousels(); + setupCollapsibleLists(); + setupDynamicRelativeTime(); + } finally { + pageElement.classList.add("content-ready"); + } } if (document.readyState === "loading") { diff --git a/internal/assets/templates/forum-posts.html b/internal/assets/templates/forum-posts.html index 32f7076..fb1fed5 100644 --- a/internal/assets/templates/forum-posts.html +++ b/internal/assets/templates/forum-posts.html @@ -1,14 +1,14 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
      - {{ range $i, $post := .Posts }} -
    • +
        + {{ range .Posts }} +
      • {{ if $.ShowThumbnails }} - {{ if ne $post.ThumbnailUrl "" }} - - {{ else if $post.HasTargetUrl }} + {{ if ne .ThumbnailUrl "" }} + + {{ else if .HasTargetUrl }} @@ -19,13 +19,13 @@ {{ end }} {{ end }}
        - {{ .Title }} + {{ .Title }}
          -
        • {{ $post.TimePosted | relativeTime }}
          • -
        • {{ $post.Score | formatNumber }} points
          • -
        • {{ $post.CommentCount | formatNumber }} comments
          • - {{ if $post.HasTargetUrl }} -
        • {{ $post.TargetUrlDomain }}
          • +
        • +
        • {{ .Score | formatNumber }} points
          • +
        • {{ .CommentCount | formatNumber }} comments
          • + {{ if .HasTargetUrl }} +
        • {{ .TargetUrlDomain }}
          • {{ end }}
        @@ -33,7 +33,4 @@
        • {{ end }}
      -{{ if gt (len .Posts) $.CollapseAfter }} - -{{ end }} {{ end }} diff --git a/internal/assets/templates/page.html b/internal/assets/templates/page.html index ee1eea8..269d0cf 100644 --- a/internal/assets/templates/page.html +++ b/internal/assets/templates/page.html @@ -50,6 +50,7 @@
      +
      diff --git a/internal/assets/templates/reddit-horizontal-cards.html b/internal/assets/templates/reddit-horizontal-cards.html index 4159bcc..2012435 100644 --- a/internal/assets/templates/reddit-horizontal-cards.html +++ b/internal/assets/templates/reddit-horizontal-cards.html @@ -20,7 +20,7 @@ {{ end }} {{ .Title }}
        -
      • {{ .TimePosted | relativeTime }}
        • +
      • {{ .Score | formatNumber }} points
      diff --git a/internal/assets/templates/reddit-vertical-cards.html b/internal/assets/templates/reddit-vertical-cards.html index 1ca0996..38ec9e8 100644 --- a/internal/assets/templates/reddit-vertical-cards.html +++ b/internal/assets/templates/reddit-vertical-cards.html @@ -19,7 +19,7 @@ {{ end }} {{ .Title }}
        -
      • {{ .TimePosted | relativeTime }}
        • +
      • {{ .Score | formatNumber }} points
      diff --git a/internal/assets/templates/releases.html b/internal/assets/templates/releases.html index 19f3c87..c458a7c 100644 --- a/internal/assets/templates/releases.html +++ b/internal/assets/templates/releases.html @@ -6,7 +6,7 @@
    • {{ .Name }}
        -
      • {{ $release.TimeReleased | relativeTime }}
        • +
      • {{ $release.Version }}
        • {{ if gt $release.Downvotes 3 }}
      • {{ $release.Downvotes | formatNumber }} ⚠
        • diff --git a/internal/assets/templates/repository.html b/internal/assets/templates/repository.html index 9122a8e..26048dc 100644 --- a/internal/assets/templates/repository.html +++ b/internal/assets/templates/repository.html @@ -13,7 +13,7 @@
          {{ range .RepositoryDetails.PullRequests }} -
        • {{ .CreatedAt | relativeTime }}
          • +
        • {{ end }}
          @@ -30,7 +30,7 @@
            {{ range .RepositoryDetails.Issues }} -
          • {{ .CreatedAt | relativeTime }}
            • +
          • {{ end }}
            diff --git a/internal/assets/templates/rss-horizontal-cards-2.html b/internal/assets/templates/rss-horizontal-cards-2.html index 564c2f8..2ae75fa 100644 --- a/internal/assets/templates/rss-horizontal-cards-2.html +++ b/internal/assets/templates/rss-horizontal-cards-2.html @@ -17,7 +17,7 @@
            {{ .Title }}
              -
            • {{ .PublishedAt | relativeTime }}
              • +
            • {{ .ChannelName }}
            diff --git a/internal/assets/templates/rss-horizontal-cards.html b/internal/assets/templates/rss-horizontal-cards.html index 8a9c9b8..0c82d60 100644 --- a/internal/assets/templates/rss-horizontal-cards.html +++ b/internal/assets/templates/rss-horizontal-cards.html @@ -17,7 +17,7 @@
            {{ .Title }}
              -
            • {{ .PublishedAt | relativeTime }}
              • +
            • {{ .ChannelName }}
            diff --git a/internal/assets/templates/rss-list.html b/internal/assets/templates/rss-list.html index 69bab75..1b5f4a0 100644 --- a/internal/assets/templates/rss-list.html +++ b/internal/assets/templates/rss-list.html @@ -1,12 +1,12 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
              - {{ range $i, $item := .Items }} -
            • +
                + {{ range .Items }} +
              • {{ .Title }}
                  -
                • {{ .PublishedAt | relativeTime }}
                  • +
                • {{ if gt (len $.FeedRequests) 1 }}
                • {{ .ChannelName }}
                  • {{ end }} @@ -14,7 +14,4 @@ {{ end }}
                - {{ if gt (len .Items) $.CollapseAfter }} - - {{ end }} {{ end }} diff --git a/internal/assets/templates/twitch-channels.html b/internal/assets/templates/twitch-channels.html index 32175f7..328554c 100644 --- a/internal/assets/templates/twitch-channels.html +++ b/internal/assets/templates/twitch-channels.html @@ -1,13 +1,13 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                  - {{ range $i, $channel := .Channels }} -
                • -
                  +
                    + {{ range .Channels }} +
                  • +
                    - {{ if $channel.Exists }} - + {{ if .Exists }} + {{ else }} @@ -15,13 +15,13 @@ {{ end }}
                    - {{ $channel.Name }} - {{ if $channel.Exists }} - {{ if $channel.IsLive }} - {{ $channel.Category }} + {{ .Name }} + {{ if .Exists }} + {{ if .IsLive }} + {{ .Category }}
                      -
                    • {{ $channel.LiveSince | relativeTime }}
                      • -
                    • {{ $channel.ViewersCount | formatViewerCount }} viewers
                      • +
                    • +
                    • {{ .ViewersCount | formatViewerCount }} viewers
                    {{ else }}
                    Offline
                    @@ -34,7 +34,4 @@
                    • {{ end }}
                  -{{ if gt (len .Channels) $.CollapseAfter }} - -{{ end }} {{ end }} diff --git a/internal/assets/templates/twitch-games-list.html b/internal/assets/templates/twitch-games-list.html index c0f904b..2bbdaa8 100644 --- a/internal/assets/templates/twitch-games-list.html +++ b/internal/assets/templates/twitch-games-list.html @@ -1,22 +1,21 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                    - {{ range $i, $category := .Categories }} - {{ $shouldCollapseItem := shouldCollapse $i $.CollapseAfter }} -
                  • +
                      + {{ range .Categories }} +
                    • - +
                      - {{ $category.Name }} + {{ .Name }}
                        -
                      • {{ $category.ViewersCount | formatViewerCount }} viewers
                        • - {{ if $category.IsNew }} +
                      • {{ .ViewersCount | formatViewerCount }} viewers
                        • + {{ if .IsNew }}
                      • NEW
                        • {{ end }}
                        - {{ range $i, $tag := $category.Tags }} + {{ range $i, $tag := .Tags }} {{ if eq $i 0 }}
                      • {{ $tag.Name }}
                        • {{ else }} @@ -29,7 +28,4 @@ {{ end }}
                      -{{ if gt (len .Categories) $.CollapseAfter }} - -{{ end }} {{ end }} diff --git a/internal/assets/templates/video-card-contents.html b/internal/assets/templates/video-card-contents.html index 3bfd234..098e9f9 100644 --- a/internal/assets/templates/video-card-contents.html +++ b/internal/assets/templates/video-card-contents.html @@ -3,7 +3,7 @@
                      {{ .Title }}
                        -
                      • {{ .TimePosted | relativeTime }}
                        • +
                      • {{ .Author }}
                        • From 8977114806a44acf32049ac3f7c739cfde83ad71 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Thu, 16 May 2024 21:17:10 +0100 Subject: [PATCH 14/47] Fix viewport offset after collapsing --- internal/assets/static/main.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index 5f6827b..31f1838 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -197,17 +197,30 @@ function setupCollapsibleLists() { button.classList.add("list-collapsible-label"); button.append(textNode, arrowElement); button.addEventListener("click", () => { + expanded = !expanded; + if (expanded) { - listElement.classList.remove("list-collapsible-expanded"); - button.classList.remove("list-collapsible-label-expanded"); - textNode.nodeValue = showMoreText; - } else { listElement.classList.add("list-collapsible-expanded"); button.classList.add("list-collapsible-label-expanded"); textNode.nodeValue = showLessText; + return; } - expanded = !expanded; + const topBefore = button.getClientRects()[0].top; + + listElement.classList.remove("list-collapsible-expanded"); + button.classList.remove("list-collapsible-label-expanded"); + textNode.nodeValue = showMoreText; + + const topAfter = button.getClientRects()[0].top; + + if (topAfter > 0) + return; + + window.scrollBy({ + top: topAfter - topBefore, + behavior: "instant" + }); }); listElement.after(button); From b0018c3f065c129cfc36eaa148478c2f25d2c7e5 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 12:15:44 +0100 Subject: [PATCH 15/47] Refactor, again Make collapsible components reusable Add ability to collapse video rows in videos-grid style Lose sanity while dealing with all the intricacies --- internal/assets/static/main.css | 39 +++- internal/assets/static/main.js | 205 +++++++++++++----- internal/assets/templates/forum-posts.html | 2 +- internal/assets/templates/releases.html | 7 +- internal/assets/templates/rss-list.html | 2 +- .../assets/templates/twitch-channels.html | 2 +- .../assets/templates/twitch-games-list.html | 2 +- internal/assets/templates/videos-grid.html | 2 +- internal/widget/videos.go | 17 +- 9 files changed, 190 insertions(+), 88 deletions(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 05108e0..6253439 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -125,22 +125,22 @@ padding-top: var(--list-half-gap); } -.list-collapsible:not(.list-collapsible-expanded) > .list-collapsible-item { +.collapsible-container:not(.container-expanded) > .collapsible-item { display: none; } -.list-collapsible-item { - animation: listItemReveal 0.3s backwards; +.collapsible-item { + animation: collapsibleItemReveal .25s backwards; } -@keyframes listItemReveal { +@keyframes collapsibleItemReveal { from { opacity: 0; transform: translateY(10px); } } -.list-collapsible-label { +.expand-toggle-button { font: inherit; border: 0; cursor: pointer; @@ -154,19 +154,20 @@ background: var(--color-widget-background); } -.list-collapsible-label-expanded { +.expand-toggle-button.container-expanded { position: sticky; - bottom: 0; + /* -1px to hide 1px gap on chrome */ + bottom: -1px; } -.list-collapsible-label-icon { +.expand-toggle-button-icon { display: inline-block; margin-left: 1rem; position: relative; top: -.2rem; } -.list-collapsible-label-icon::before { +.expand-toggle-button-icon::before { content: ''; font-size: 0.8rem; transform: rotate(90deg); @@ -175,14 +176,25 @@ transition: transform 0.3s; } -.list-collapsible-label-expanded .list-collapsible-label-icon::before { +.expand-toggle-button.container-expanded .expand-toggle-button-icon::before { transform: rotate(-90deg); } -.widget-content:has(.list-collapsible-label:last-child) { +.widget-content:has(.expand-toggle-button:last-child) { padding-bottom: 0; } +.cards-grid.collapsible-container + .expand-toggle-button { + text-align: center; + margin-top: 0.5rem; + 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; +} + ::selection { background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); color: var(--color-text-highlight); @@ -270,6 +282,7 @@ body { gap: var(--widget-gap); margin: var(--widget-gap) 0; animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; + animation-delay: 3ms; } @keyframes pageColumnsEntrance { @@ -1109,8 +1122,10 @@ body { box-shadow: 0 calc(var(--spacing) * -1) 0 0 currentColor, 0 var(--spacing) 0 0 currentColor; } - .list-collapsible-label-expanded { + .expand-toggle-button.container-expanded { bottom: var(--mobile-navigation-height); + /* hides content that peeks through the rounded borders of the mobile navigation */ + box-shadow: 0 var(--border-radius) 0 0 var(--color-background); } } diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index 31f1838..9818ecf 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -178,74 +178,158 @@ function setupLazyImages() { }, 5); } -function setupCollapsibleLists() { - const collapsibleListElements = document.getElementsByClassName("list-collapsible"); - - if (collapsibleListElements.length == 0) { - return; - } - +function attachExpandToggleButton(collapsibleContainer) { const showMoreText = "Show more"; const showLessText = "Show less"; - const attachExpandToggleButton = (listElement) => { - let expanded = false; - const button = document.createElement("button"); - const arrowElement = document.createElement("span"); - arrowElement.classList.add("list-collapsible-label-icon"); - const textNode = document.createTextNode(showMoreText); - button.classList.add("list-collapsible-label"); - button.append(textNode, arrowElement); - button.addEventListener("click", () => { - expanded = !expanded; + 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) { - listElement.classList.add("list-collapsible-expanded"); - button.classList.add("list-collapsible-label-expanded"); - textNode.nodeValue = showLessText; + 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"; + } + + list.classList.add("ready"); + } +} + +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 = 2; + + 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"); + } + } + }; + + setTimeout(() => { + cardsPerRow = getCardsPerRow(); + resolveCollapsibleItems(); + gridElement.classList.add("ready"); + }, 1); + + window.addEventListener("resize", () => { + const newCardsPerRow = getCardsPerRow(); + + if (cardsPerRow == newCardsPerRow) { return; } - const topBefore = button.getClientRects()[0].top; - - listElement.classList.remove("list-collapsible-expanded"); - button.classList.remove("list-collapsible-label-expanded"); - textNode.nodeValue = showMoreText; - - const topAfter = button.getClientRects()[0].top; - - if (topAfter > 0) - return; - - window.scrollBy({ - top: topAfter - topBefore, - behavior: "instant" - }); + cardsPerRow = newCardsPerRow; + resolveCollapsibleItems(); }); - - listElement.after(button); - }; - - for (let i = 0; i < collapsibleListElements.length; i++) { - const listElement = collapsibleListElements[i]; - - if (listElement.dataset.collapseAfter === undefined) { - continue; - } - - const collapseAfter = parseInt(listElement.dataset.collapseAfter); - - if (listElement.children.length <= collapseAfter) { - continue; - } - - attachExpandToggleButton(listElement); - - for (let c = collapseAfter; c < listElement.children.length; c++) { - const child = listElement.children[c]; - child.classList.add("list-collapsible-item"); - child.style.animationDelay = ((c - collapseAfter) * 20).toString() + "ms"; - } } } @@ -264,6 +348,7 @@ async function setupPage() { setupLazyImages(); setupCarousels(); setupCollapsibleLists(); + setupCollapsibleGrids(); setupDynamicRelativeTime(); } finally { pageElement.classList.add("content-ready"); diff --git a/internal/assets/templates/forum-posts.html b/internal/assets/templates/forum-posts.html index fb1fed5..b8fea41 100644 --- a/internal/assets/templates/forum-posts.html +++ b/internal/assets/templates/forum-posts.html @@ -1,7 +1,7 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                          +
                            {{ range .Posts }}
                          • diff --git a/internal/assets/templates/releases.html b/internal/assets/templates/releases.html index c458a7c..d6a8974 100644 --- a/internal/assets/templates/releases.html +++ b/internal/assets/templates/releases.html @@ -1,9 +1,9 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                              +
                                {{ range $i, $release := .Releases }} -
                              • +
                              • {{ .Name }}
                                • @@ -15,7 +15,4 @@ {{ end }}
                                -{{ if gt (len .Releases) $.CollapseAfter }} - -{{ end }} {{ end }} diff --git a/internal/assets/templates/rss-list.html b/internal/assets/templates/rss-list.html index 1b5f4a0..78f1828 100644 --- a/internal/assets/templates/rss-list.html +++ b/internal/assets/templates/rss-list.html @@ -1,7 +1,7 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                                  +
                                    {{ range .Items }}
                                  • {{ .Title }} diff --git a/internal/assets/templates/twitch-channels.html b/internal/assets/templates/twitch-channels.html index 328554c..6782381 100644 --- a/internal/assets/templates/twitch-channels.html +++ b/internal/assets/templates/twitch-channels.html @@ -1,7 +1,7 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                                      +
                                        {{ range .Channels }}
                                      • diff --git a/internal/assets/templates/twitch-games-list.html b/internal/assets/templates/twitch-games-list.html index 2bbdaa8..f766885 100644 --- a/internal/assets/templates/twitch-games-list.html +++ b/internal/assets/templates/twitch-games-list.html @@ -1,7 +1,7 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                                          +
                                            {{ range .Categories }}
                                          • diff --git a/internal/assets/templates/videos-grid.html b/internal/assets/templates/videos-grid.html index d723d0e..d4bdf09 100644 --- a/internal/assets/templates/videos-grid.html +++ b/internal/assets/templates/videos-grid.html @@ -3,7 +3,7 @@ {{ define "widget-content-classes" }}widget-content-frameless{{ end }} {{ define "widget-content" }} -
                                            +
                                            {{ range .Videos }}
                                            {{ template "video-card-contents" . }} diff --git a/internal/widget/videos.go b/internal/widget/videos.go index 252c8ff..717f302 100644 --- a/internal/widget/videos.go +++ b/internal/widget/videos.go @@ -10,12 +10,13 @@ import ( ) type Videos struct { - widgetBase `yaml:",inline"` - Videos feed.Videos `yaml:"-"` - VideoUrlTemplate string `yaml:"video-url-template"` - Style string `yaml:"style"` - Channels []string `yaml:"channels"` - Limit int `yaml:"limit"` + widgetBase `yaml:",inline"` + Videos feed.Videos `yaml:"-"` + VideoUrlTemplate string `yaml:"video-url-template"` + Style string `yaml:"style"` + CollapseAfterRows int `yaml:"collapse-after-rows"` + Channels []string `yaml:"channels"` + Limit int `yaml:"limit"` } func (widget *Videos) Initialize() error { @@ -25,6 +26,10 @@ func (widget *Videos) Initialize() error { widget.Limit = 25 } + if widget.CollapseAfterRows == 0 || widget.CollapseAfterRows < -1 { + widget.CollapseAfterRows = 4 + } + return nil } From 94cf82c3d9bacea21b9dd9a1a3b20ac20f3bcc46 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 12:21:44 +0100 Subject: [PATCH 16/47] Remove link to discussions --- internal/assets/templates/page.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/internal/assets/templates/page.html b/internal/assets/templates/page.html index 269d0cf..98bb111 100644 --- a/internal/assets/templates/page.html +++ b/internal/assets/templates/page.html @@ -62,9 +62,6 @@
                                            Glance {{ if ne "dev" .App.Version }}{{ .App.Version }}{{ else }}({{ .App.Version }}){{ end }}
                                            - + Report issue
                                            {{ end }} From 6134f1c812cca51635e35169d888e4082172567c Mon Sep 17 00:00:00 2001 From: Brian Petersen Date: Fri, 17 May 2024 10:11:00 -0600 Subject: [PATCH 17/47] Adds reporting serve errors --- internal/glance/main.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/glance/main.go b/internal/glance/main.go index 5eee962..426c41f 100644 --- a/internal/glance/main.go +++ b/internal/glance/main.go @@ -36,7 +36,7 @@ func Main() int { return 1 } - if app.Serve() != nil { + if err := app.Serve(); err != nil { fmt.Printf("http server error: %v\n", err) return 1 } From d43c0749c104631adfc523d2af94885777ed03d1 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 13:14:48 +0100 Subject: [PATCH 18/47] Only apply box shadow on collapsible grids --- internal/assets/static/main.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 6253439..ac122bd 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -1124,6 +1124,9 @@ body { .expand-toggle-button.container-expanded { bottom: var(--mobile-navigation-height); + } + + .cards-grid + .expand-toggle-button.container-expanded { /* hides content that peeks through the rounded borders of the mobile navigation */ box-shadow: 0 var(--border-radius) 0 0 var(--color-background); } From 27b9af6067c761870fe9042f16a05845b52cb2e2 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 13:19:14 +0100 Subject: [PATCH 19/47] Don't transition all Otherwise animates image dimensions when resizing from mobile to desktop --- internal/assets/static/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index ac122bd..c221607 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -881,8 +881,8 @@ body { .thumbnail { filter: grayscale(0.2) contrast(0.9); - transition: all 0.2s; opacity: 0.8; + transition: filter 0.2s, opacity .2s; } .thumbnail-container:hover .thumbnail { From a2bb1b88eac23c91cfb43c4b118eefc20395d93e Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 18:37:11 +0100 Subject: [PATCH 20/47] Remove unrelated units check --- internal/widget/weather.go | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/internal/widget/weather.go b/internal/widget/weather.go index 723d1db..dd03319 100644 --- a/internal/widget/weather.go +++ b/internal/widget/weather.go @@ -31,8 +31,8 @@ func (widget *Weather) Initialize() error { widget.TimeLabels = timeLabels12h } else if widget.HourFormat == "24h" { widget.TimeLabels = timeLabels24h - } else if widget.Units != "12h" && widget.Units != "24h" { - return fmt.Errorf("invalid hour format '%s' for weather, must be either 12h or 24h", widget.HourFormat) + } else { + return fmt.Errorf("invalid hour format '%s' for weather widget, must be either 12h or 24h", widget.HourFormat) } if widget.Units == "" { From 06e891f9a9846486a7d088907de8b29cf58da692 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 18:37:35 +0100 Subject: [PATCH 21/47] Update doc --- docs/configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index e54ebb0..8bb6091 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -683,7 +683,7 @@ The name of the city and country to fetch weather information for. Attempting to Whether to show the temperature in celsius or fahrenheit, possible values are `metric` or `imperial`. #### `hour-format` -Whether to show the hours of the day in 12-hour format or 24-hour format +Whether to show the hours of the day in 12-hour format or 24-hour format. Possible values are `12h` and `24h`. ##### `hide-location` Optionally don't display the location name on the widget. @@ -1136,4 +1136,4 @@ Example: The source of the iframe. ##### `height` -The height of the iframe. The minimum allowed height is 50. \ No newline at end of file +The height of the iframe. The minimum allowed height is 50. From e03231cbd7868732eff77867450728b7aeeac0e1 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 19:28:15 +0100 Subject: [PATCH 22/47] Update time label --- internal/widget/weather.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/widget/weather.go b/internal/widget/weather.go index dd03319..618237d 100644 --- a/internal/widget/weather.go +++ b/internal/widget/weather.go @@ -22,7 +22,7 @@ type Weather struct { } var timeLabels12h = [12]string{"2am", "4am", "6am", "8am", "10am", "12pm", "2pm", "4pm", "6pm", "8pm", "10pm", "12am"} -var timeLabels24h = [12]string{"02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "24:00"} +var timeLabels24h = [12]string{"02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "00:00"} func (widget *Weather) Initialize() error { widget.withTitle("Weather").withCacheOnTheHour() From fca504901f14ca0b4b0bd9431aa1618b1393ad2d Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 19:31:03 +0100 Subject: [PATCH 23/47] Create CODE_OF_CONDUCT.md --- CODE_OF_CONDUCT.md | 128 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 CODE_OF_CONDUCT.md diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..d1b4aaa --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,128 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone, regardless of age, body +size, visible or invisible disability, ethnicity, sex characteristics, gender +identity and expression, level of experience, education, socio-economic status, +nationality, personal appearance, race, religion, or sexual identity +and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, +diverse, inclusive, and healthy community. + +## Our Standards + +Examples of behavior that contributes to a positive environment for our +community include: + +* Demonstrating empathy and kindness toward other people +* Being respectful of differing opinions, viewpoints, and experiences +* Giving and gracefully accepting constructive feedback +* Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +* Focusing on what is best not just for us as individuals, but for the + overall community + +Examples of unacceptable behavior include: + +* The use of sexualized language or imagery, and sexual attention or + advances of any kind +* Trolling, insulting or derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or email + address, without their explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Enforcement Responsibilities + +Community leaders are responsible for clarifying and enforcing our standards of +acceptable behavior and will take appropriate and fair corrective action in +response to any behavior that they deem inappropriate, threatening, offensive, +or harmful. + +Community leaders have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, and will communicate reasons for moderation +decisions when appropriate. + +## Scope + +This Code of Conduct applies within all community spaces, and also applies when +an individual is officially representing the community in public spaces. +Examples of representing our community include using an official e-mail address, +posting via an official social media account, or acting as an appointed +representative at an online or offline event. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported to the community leaders responsible for enforcement at +glanceapp@duck.com. +All complaints will be reviewed and investigated promptly and fairly. + +All community leaders are obligated to respect the privacy and security of the +reporter of any incident. + +## Enforcement Guidelines + +Community leaders will follow these Community Impact Guidelines in determining +the consequences for any action they deem in violation of this Code of Conduct: + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed +unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing +clarity around the nature of the violation and an explanation of why the +behavior was inappropriate. A public apology may be requested. + +### 2. Warning + +**Community Impact**: A violation through a single incident or series +of actions. + +**Consequence**: A warning with consequences for continued behavior. No +interaction with the people involved, including unsolicited interaction with +those enforcing the Code of Conduct, for a specified period of time. This +includes avoiding interactions in community spaces as well as external channels +like social media. Violating these terms may lead to a temporary or +permanent ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including +sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public +communication with the community for a specified period of time. No public or +private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. +Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community +standards, including sustained inappropriate behavior, harassment of an +individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within +the community. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 2.0, available at +https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. + +Community Impact Guidelines were inspired by [Mozilla's code of conduct +enforcement ladder](https://github.com/mozilla/diversity). + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see the FAQ at +https://www.contributor-covenant.org/faq. Translations are available at +https://www.contributor-covenant.org/translations. From 566ac99a53b726f5d6a322cf702d6dd4d9710498 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 19:55:34 +0100 Subject: [PATCH 24/47] Move code of conduct --- CODE_OF_CONDUCT.md => .github/CODE_OF_CONDUCT.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename CODE_OF_CONDUCT.md => .github/CODE_OF_CONDUCT.md (100%) diff --git a/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md similarity index 100% rename from CODE_OF_CONDUCT.md rename to .github/CODE_OF_CONDUCT.md From 21d491843febfcececd02f84a713e25d5cd8e5d1 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 17 May 2024 19:56:18 +0100 Subject: [PATCH 25/47] Create SECURITY.md --- .github/SECURITY.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .github/SECURITY.md diff --git a/.github/SECURITY.md b/.github/SECURITY.md new file mode 100644 index 0000000..b06a6e3 --- /dev/null +++ b/.github/SECURITY.md @@ -0,0 +1,9 @@ +# Security Policy + +## Supported Versions + +Security updates will be applied to the latest as well as previous minor version release depending on severity and if applicable. + +## Reporting a Vulnerability + +Please report any suspected security vulnerabilities to [glanceapp@duck.com](mailto:glanceapp@duck.com) and do not disclose them publicly. You should receive a response within a few days and if confirmed the issue will be resolved as soon as possible. From 0681a04607ab9502135b6535975af8a4488f07f6 Mon Sep 17 00:00:00 2001 From: fawn Date: Sat, 18 May 2024 03:07:34 +0300 Subject: [PATCH 26/47] Add custom sorting to the twitch channels widget this allows the channels to be sorted as defined in the config while still keeping the live channels on the top. the wording could probably be improved, "custom" is too broad but i'm not sure what else to call it. --- docs/configuration.md | 4 ++++ internal/feed/twitch.go | 6 ++++++ internal/widget/twitch-channels.go | 12 +++++++++++- 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/configuration.md b/docs/configuration.md index e698fdd..92dab52 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -1063,6 +1063,7 @@ Preview: | ---- | ---- | -------- | ------- | | channels | array | yes | | | collapse-after | integer | no | 5 | +| sort-by | string | no | viewers | ##### `channels` A list of channels to display. @@ -1070,6 +1071,9 @@ A list of channels to display. ##### `collapse-after` How many channels are visible before the "SHOW MORE" button appears. Set to `-1` to never collapse. +##### `sort-by` +Can be used to specify the order in which the channels are displayed. Possible values are `viewers` and `custom`. + ### Twitch top games Display a list of games with the most viewers on Twitch. diff --git a/internal/feed/twitch.go b/internal/feed/twitch.go index 1ff82ee..1ce9354 100644 --- a/internal/feed/twitch.go +++ b/internal/feed/twitch.go @@ -44,6 +44,12 @@ func (channels TwitchChannels) SortByViewers() { }) } +func (channels TwitchChannels) SortByLive() { + sort.SliceStable(channels, func(i, j int) bool { + return channels[i].IsLive && !channels[j].IsLive + }) +} + type twitchOperationResponse struct { Data json.RawMessage Extensions struct { diff --git a/internal/widget/twitch-channels.go b/internal/widget/twitch-channels.go index 3f36669..3107081 100644 --- a/internal/widget/twitch-channels.go +++ b/internal/widget/twitch-channels.go @@ -14,6 +14,7 @@ type TwitchChannels struct { ChannelsRequest []string `yaml:"channels"` Channels []feed.TwitchChannel `yaml:"-"` CollapseAfter int `yaml:"collapse-after"` + SortBy string `yaml:"sort-by"` } func (widget *TwitchChannels) Initialize() error { @@ -23,6 +24,10 @@ func (widget *TwitchChannels) Initialize() error { widget.CollapseAfter = 5 } + if widget.SortBy != "viewers" && widget.SortBy != "custom" { + widget.SortBy = "viewers" + } + return nil } @@ -33,7 +38,12 @@ func (widget *TwitchChannels) Update(ctx context.Context) { return } - channels.SortByViewers() + if widget.SortBy == "viewers" { + channels.SortByViewers() + } else if widget.SortBy == "custom" { + channels.SortByLive() + } + widget.Channels = channels } From 20740f33afaa4366230aec8a0444756d1c775069 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sat, 18 May 2024 10:37:14 +0100 Subject: [PATCH 27/47] Update build script --- scripts/build-and-ship/main.go | 75 ++++++++++++++++++++++++++++++---- 1 file changed, 68 insertions(+), 7 deletions(-) diff --git a/scripts/build-and-ship/main.go b/scripts/build-and-ship/main.go index b371a80..79a6d4a 100644 --- a/scripts/build-and-ship/main.go +++ b/scripts/build-and-ship/main.go @@ -1,6 +1,7 @@ package main import ( + "flag" "fmt" "os" "os/exec" @@ -77,7 +78,43 @@ var buildTargets = []buildTarget{ }, } +func hasUncommitedChanges() (bool, error) { + output, err := exec.Command("git", "status", "--porcelain").CombinedOutput() + + if err != nil { + return false, err + } + + return len(output) > 0, nil +} + func main() { + flags := flag.NewFlagSet("", flag.ExitOnError) + + specificTag := flags.String("tag", "", "Which tagged version to build") + + err := flags.Parse(os.Args[1:]) + + if err != nil { + fmt.Println(err) + os.Exit(1) + } + + uncommitedChanges, err := hasUncommitedChanges() + + if err != nil { + fmt.Println(err) + os.Exit(1) + } + + if uncommitedChanges { + fmt.Println("There are uncommited changes - commit, stash or discard them first") + os.Exit(1) + } + + fmt.Println(*specificTag) + os.Exit(1) + cwd, err := os.Getwd() if err != nil { @@ -95,10 +132,24 @@ func main() { os.Mkdir(buildPath, 0755) os.Mkdir(archivesPath, 0755) - version, err := getVersionFromGit() + var version string + + if *specificTag == "" { + version, err := getVersionFromGit() + + if err != nil { + fmt.Println(version, err) + os.Exit(1) + } + } else { + version = *specificTag + } + + output, err := exec.Command("git", "checkout", "tags/"+version).CombinedOutput() if err != nil { - fmt.Println(version, err) + fmt.Println(string(output)) + fmt.Println(err) os.Exit(1) } @@ -119,13 +170,19 @@ func main() { fmt.Println("Building docker image") - output, err := exec.Command( - "sudo", "docker", "build", + var dockerBuildOptions = []string{ + "docker", "build", "--platform=linux/amd64,linux/arm64,linux/arm/v7", "-t", versionTag, - "-t", latestTag, - ".", - ).CombinedOutput() + } + + if !strings.Contains(version, "beta") { + dockerBuildOptions = append(dockerBuildOptions, "-t", latestTag) + } + + dockerBuildOptions = append(dockerBuildOptions, ".") + + output, err = exec.Command("sudo", dockerBuildOptions...).CombinedOutput() if err != nil { fmt.Println(string(output)) @@ -152,6 +209,10 @@ func main() { os.Exit(1) } + if strings.Contains(version, "beta") { + return + } + output, err = exec.Command( "sudo", "docker", "push", latestTag, ).CombinedOutput() From 6627a635d55d06a3156b392eb604687eeff238c1 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sat, 18 May 2024 10:44:52 +0100 Subject: [PATCH 28/47] =?UTF-8?q?Update=20build=20script=20=F0=9F=A4=A6?= =?UTF-8?q?=E2=80=8D=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/build-and-ship/main.go | 3 --- 1 file changed, 3 deletions(-) diff --git a/scripts/build-and-ship/main.go b/scripts/build-and-ship/main.go index 79a6d4a..e6b539d 100644 --- a/scripts/build-and-ship/main.go +++ b/scripts/build-and-ship/main.go @@ -112,9 +112,6 @@ func main() { os.Exit(1) } - fmt.Println(*specificTag) - os.Exit(1) - cwd, err := os.Getwd() if err != nil { From 5e9635a76feea2ac684e2e3966bb6b43bd6e5ec2 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sat, 18 May 2024 11:01:34 +0100 Subject: [PATCH 29/47] Change custom order to live --- docs/configuration.md | 2 +- internal/widget/twitch-channels.go | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 92dab52..681d3d3 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -1072,7 +1072,7 @@ A list of channels to display. How many channels are visible before the "SHOW MORE" button appears. Set to `-1` to never collapse. ##### `sort-by` -Can be used to specify the order in which the channels are displayed. Possible values are `viewers` and `custom`. +Can be used to specify the order in which the channels are displayed. Possible values are `viewers` and `live`. ### Twitch top games Display a list of games with the most viewers on Twitch. diff --git a/internal/widget/twitch-channels.go b/internal/widget/twitch-channels.go index 3107081..3b728b8 100644 --- a/internal/widget/twitch-channels.go +++ b/internal/widget/twitch-channels.go @@ -24,7 +24,7 @@ func (widget *TwitchChannels) Initialize() error { widget.CollapseAfter = 5 } - if widget.SortBy != "viewers" && widget.SortBy != "custom" { + if widget.SortBy != "viewers" && widget.SortBy != "live" { widget.SortBy = "viewers" } @@ -40,7 +40,7 @@ func (widget *TwitchChannels) Update(ctx context.Context) { if widget.SortBy == "viewers" { channels.SortByViewers() - } else if widget.SortBy == "custom" { + } else if widget.SortBy == "live" { channels.SortByLive() } From 59c55b96beeb4154575ddbf26b064d218544dda2 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sat, 18 May 2024 18:02:12 +0300 Subject: [PATCH 30/47] Specify the correct method in the Monitor widget documentation After 189b8895b03ec2ee407c8d951c07230bae3a9a07 we use `GET` instead of `HEAD` Signed-off-by: Yarden Shoham --- docs/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configuration.md b/docs/configuration.md index e698fdd..7c04d04 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -697,7 +697,7 @@ Greenville, United States ``` ### Monitor -Display a list of sites and whether they are reachable (online) or not. This is determined by sending a HEAD request to the specified URL, if the response is 200 then the site is OK. The time it took to receive a response is also shown in milliseconds. +Display a list of sites and whether they are reachable (online) or not. This is determined by sending a GET request to the specified URL, if the response is 200 then the site is OK. The time it took to receive a response is also shown in milliseconds. Example: From eeda28a2878f529706928c0331f2d507efad3265 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sat, 18 May 2024 18:42:23 +0100 Subject: [PATCH 31/47] Reduce reliance on setTimeout shenanigans --- internal/assets/static/main.css | 10 ++-------- internal/assets/static/main.js | 32 +++++++++++++++++++++----------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 6ed4c12..75f2f41 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -190,11 +190,6 @@ 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; -} - ::selection { background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); color: var(--color-text-highlight); @@ -282,7 +277,6 @@ body { gap: var(--widget-gap); margin: var(--widget-gap) 0; animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; - animation-delay: 3ms; } @keyframes pageColumnsEntrance { @@ -1011,10 +1005,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; } diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index 9818ecf..a5c9987 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -61,7 +61,7 @@ function setupCarousels() { itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited); document.addEventListener("resize", determineSideCutoffsRateLimited); - setTimeout(determineSideCutoffs, 1); + afterContentReady(determineSideCutoffs); } } @@ -160,22 +160,22 @@ function setupLazyImages() { image.classList.add("finished-transition"); } - setTimeout(() => { + afterContentReady(() => { for (let i = 0; i < images.length; i++) { const image = images[i]; if (image.complete) { image.classList.add("cached"); - setTimeout(() => imageFinishedTransition(image), 5); + setTimeout(() => imageFinishedTransition(image), 1); } else { // TODO: also handle error event image.addEventListener("load", () => { image.classList.add("loaded"); - setTimeout(() => imageFinishedTransition(image), 500); + setTimeout(() => imageFinishedTransition(image), 400); }); } } - }, 5); + }); } function attachExpandToggleButton(collapsibleContainer) { @@ -314,11 +314,11 @@ function setupCollapsibleGrids() { } }; - setTimeout(() => { + afterContentReady(() => { cardsPerRow = getCardsPerRow(); resolveCollapsibleItems(); gridElement.classList.add("ready"); - }, 1); + }); window.addEventListener("resize", () => { const newCardsPerRow = getCardsPerRow(); @@ -333,6 +333,12 @@ function setupCollapsibleGrids() { } } +const contentReadyCallbacks = []; + +function afterContentReady(callback) { + contentReadyCallbacks.push(callback); +} + async function setupPage() { const pageElement = document.getElementById("page"); const pageContentElement = document.getElementById("page-content"); @@ -340,10 +346,6 @@ async function setupPage() { pageContentElement.innerHTML = pageContent; - setTimeout(() => { - document.body.classList.add("animate-element-transition"); - }, 200); - try { setupLazyImages(); setupCarousels(); @@ -352,6 +354,14 @@ async function setupPage() { setupDynamicRelativeTime(); } 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); } } From 0bbb4573b2381bb98c9b27b52fe3f01a6884c6c5 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sat, 18 May 2024 18:52:54 +0100 Subject: [PATCH 32/47] Revert setTimeout for images Reduces instances of cached images fading in by giving the browser a bit more time to load them --- internal/assets/static/main.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index a5c9987..fcc2043 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -161,20 +161,22 @@ function setupLazyImages() { } afterContentReady(() => { - for (let i = 0; i < images.length; i++) { - const image = images[i]; + 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); - }); + 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); }); } @@ -347,11 +349,11 @@ async function setupPage() { pageContentElement.innerHTML = pageContent; try { - setupLazyImages(); setupCarousels(); setupCollapsibleLists(); setupCollapsibleGrids(); setupDynamicRelativeTime(); + setupLazyImages(); } finally { pageElement.classList.add("content-ready"); From 926de71274c815f8fc726f18a1a021c51328f7d9 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sat, 18 May 2024 19:49:15 +0100 Subject: [PATCH 33/47] Add PR template --- .github/PULL_REQUEST_TEMPLATE.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..22b3d05 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,7 @@ + From 4a27ec3271f19dc51f34769cf42a39e540f8b0c9 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sat, 18 May 2024 22:40:33 +0300 Subject: [PATCH 34/47] Add a clock widget It's a simple clock that shows the current time Signed-off-by: Yarden Shoham --- README.md | 1 + docs/configuration.md | 15 +++++++++++++++ docs/images/clock-widget-preview.png | Bin 0 -> 2812 bytes internal/assets/static/main.js | 15 +++++++++++++++ internal/assets/templates.go | 1 + internal/assets/templates/clock.html | 5 +++++ internal/widget/clock.go | 23 +++++++++++++++++++++++ internal/widget/widget.go | 2 ++ 8 files changed, 62 insertions(+) create mode 100644 docs/images/clock-widget-preview.png create mode 100644 internal/assets/templates/clock.html create mode 100644 internal/widget/clock.go diff --git a/README.md b/README.md index 715c8e5..44e5bc0 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ * Weather * Bookmarks * Latest YouTube videos from specific channels +* Clock * Calendar * Stocks * iframe diff --git a/docs/configuration.md b/docs/configuration.md index a88f811..5e317a8 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -17,6 +17,7 @@ - [Repository](#repository) - [Bookmarks](#bookmarks) - [Calendar](#calendar) + - [Clock](#clock) - [Stocks](#stocks) - [Twitch Channels](#twitch-channels) - [Twitch Top Games](#twitch-top-games) @@ -34,6 +35,7 @@ pages: columns: - size: small widgets: + - type: clock - type: calendar - type: rss @@ -963,6 +965,19 @@ Whether to open the link in the same tab or a new one. Whether to hide the colored arrow on each link. +### Clock +Display a clock showing the current time. + +Example: + +```yaml +- type: clock +``` + +Preview: + +![](images/clock-widget-preview.png) + ### Calendar Display a calendar. diff --git a/docs/images/clock-widget-preview.png b/docs/images/clock-widget-preview.png new file mode 100644 index 0000000000000000000000000000000000000000..346a6ed5c948979311d7b95d0f09c94ec113d3e7 GIT binary patch literal 2812 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 {updateClocks(elements, clockFormatter)}, 1000); +} + async function setupPage() { const pageElement = document.getElementById("page"); const pageContentElement = document.getElementById("page-content"); @@ -349,6 +363,7 @@ async function setupPage() { pageContentElement.innerHTML = pageContent; try { + setupClocks() setupCarousels(); setupCollapsibleLists(); setupCollapsibleGrids(); diff --git a/internal/assets/templates.go b/internal/assets/templates.go index b8aa6ae..8dff7c0 100644 --- 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") diff --git a/internal/assets/templates/clock.html b/internal/assets/templates/clock.html new file mode 100644 index 0000000..5116782 --- /dev/null +++ b/internal/assets/templates/clock.html @@ -0,0 +1,5 @@ +{{ template "widget-base.html" . }} + +{{ define "widget-content" }} +
                                            +{{ end }} diff --git a/internal/widget/clock.go b/internal/widget/clock.go new file mode 100644 index 0000000..efb2c8e --- /dev/null +++ b/internal/widget/clock.go @@ -0,0 +1,23 @@ +package widget + +import ( + "context" + "html/template" + + "github.com/glanceapp/glance/internal/assets" +) + +type Clock struct { + widgetBase `yaml:",inline"` +} + +func (widget *Clock) Initialize() error { + widget.withTitle("Clock").withError(nil) + return nil +} + +func (widget *Clock) Update(ctx context.Context) {} + +func (widget *Clock) Render() template.HTML { + return widget.render(widget, assets.ClockTemplate) +} diff --git a/internal/widget/widget.go b/internal/widget/widget.go index 3707b7e..934a92e 100644 --- a/internal/widget/widget.go +++ b/internal/widget/widget.go @@ -19,6 +19,8 @@ func New(widgetType string) (Widget, error) { switch widgetType { case "calendar": return &Calendar{}, nil + case "clock": + return &Clock{}, nil case "weather": return &Weather{}, nil case "bookmarks": From 859a6d2f277ac896cd545191df9e8081f116a606 Mon Sep 17 00:00:00 2001 From: hex-developer <77530549+hex-developer@users.noreply.github.com> Date: Sun, 19 May 2024 15:52:13 +0000 Subject: [PATCH 35/47] Fix column overflow --- internal/assets/static/main.css | 3 ++- internal/assets/templates/forum-posts.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 1e64def..1df960e 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -1166,6 +1166,7 @@ body { .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .min-width-0 { min-width: 0; } +.max-width-100 { max-width: 100%; } .block { display: block; } .overflow-hidden { overflow: hidden; } .relative { position: relative; } @@ -1200,4 +1201,4 @@ body { .margin-bottom-7 { margin-bottom: 0.7rem; } .margin-bottom-10 { margin-bottom: 1rem; } .margin-bottom-15 { margin-bottom: 1.5rem; } -.margin-bottom-auto { margin-bottom: auto; } +.margin-bottom-auto { margin-bottom: auto; } \ No newline at end of file diff --git a/internal/assets/templates/forum-posts.html b/internal/assets/templates/forum-posts.html index 32f7076..5efec4d 100644 --- a/internal/assets/templates/forum-posts.html +++ b/internal/assets/templates/forum-posts.html @@ -18,7 +18,7 @@ {{ end }} {{ end }} -
                                            +
                                            {{ .Title }}
                                            • {{ $post.TimePosted | relativeTime }}
                                              • From 9060887694ba24e4facb77fc8ad74d2b6ddf26fb Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 19 May 2024 17:51:40 +0100 Subject: [PATCH 36/47] Remove unnecessary shrink --- internal/assets/templates/forum-posts.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/templates/forum-posts.html b/internal/assets/templates/forum-posts.html index d8d995a..882c4e3 100644 --- a/internal/assets/templates/forum-posts.html +++ b/internal/assets/templates/forum-posts.html @@ -26,7 +26,7 @@
                                            • {{ .Score | formatNumber }} points
                                            • {{ .CommentCount | formatNumber }} comments
                                              • {{ if .HasTargetUrl }} -
                                            • {{ .TargetUrlDomain }}
                                              • +
                                            • {{ .TargetUrlDomain }}
                                              • {{ end }}
                                            From 9e9f001fdf5f3d05b46c6d7852ed32cc6576fb6b Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 19 May 2024 17:51:59 +0100 Subject: [PATCH 37/47] Add newline at end of file --- internal/assets/static/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index c59ce9e..3c98ba3 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -1245,4 +1245,4 @@ body { .margin-bottom-7 { margin-bottom: 0.7rem; } .margin-bottom-10 { margin-bottom: 1rem; } .margin-bottom-15 { margin-bottom: 1.5rem; } -.margin-bottom-auto { margin-bottom: auto; } \ No newline at end of file +.margin-bottom-auto { margin-bottom: auto; } From c941c78ebf69cc39a69b6c3744a88c5e28bed83c Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 19 May 2024 17:52:17 +0100 Subject: [PATCH 38/47] Truncate RSS channel name --- internal/assets/templates/rss-list.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/internal/assets/templates/rss-list.html b/internal/assets/templates/rss-list.html index 78f1828..8116232 100644 --- a/internal/assets/templates/rss-list.html +++ b/internal/assets/templates/rss-list.html @@ -5,11 +5,11 @@ {{ range .Items }}
                                          • {{ .Title }} -
                                              + {{ end }} From a44056dc436067b255784b6c66ca41585d95f40e Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 19 May 2024 18:00:08 +0100 Subject: [PATCH 39/47] Remove other unnecessary shrinks --- internal/assets/templates/rss-horizontal-cards-2.html | 2 +- internal/assets/templates/rss-horizontal-cards.html | 2 +- internal/assets/templates/stocks.html | 2 +- internal/assets/templates/twitch-channels.html | 2 +- internal/assets/templates/twitch-games-list.html | 4 ++-- internal/assets/templates/video-card-contents.html | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/internal/assets/templates/rss-horizontal-cards-2.html b/internal/assets/templates/rss-horizontal-cards-2.html index 2ae75fa..287774b 100644 --- a/internal/assets/templates/rss-horizontal-cards-2.html +++ b/internal/assets/templates/rss-horizontal-cards-2.html @@ -18,7 +18,7 @@ {{ .Title }}
                                              • -
                                              • {{ .ChannelName }}
                                                • +
                                              • {{ .ChannelName }}
                            diff --git a/internal/assets/templates/rss-horizontal-cards.html b/internal/assets/templates/rss-horizontal-cards.html index 0c82d60..aefdd8d 100644 --- a/internal/assets/templates/rss-horizontal-cards.html +++ b/internal/assets/templates/rss-horizontal-cards.html @@ -18,7 +18,7 @@ {{ .Title }}
                            • -
                            • {{ .ChannelName }}
                              • +
                            • {{ .ChannelName }}
                      diff --git a/internal/assets/templates/stocks.html b/internal/assets/templates/stocks.html index 24c67a0..eb348c0 100644 --- a/internal/assets/templates/stocks.html +++ b/internal/assets/templates/stocks.html @@ -21,7 +21,7 @@ {{ end }} {{ define "stock" }} -
                      +
                      {{ .Symbol }}
                      {{ .Name }}
                      diff --git a/internal/assets/templates/twitch-channels.html b/internal/assets/templates/twitch-channels.html index 6782381..c0ec165 100644 --- a/internal/assets/templates/twitch-channels.html +++ b/internal/assets/templates/twitch-channels.html @@ -14,7 +14,7 @@ {{ end }}
                      -
                      +
                      {{ .Name }} {{ if .Exists }} {{ if .IsLive }} diff --git a/internal/assets/templates/twitch-games-list.html b/internal/assets/templates/twitch-games-list.html index f766885..36c457b 100644 --- a/internal/assets/templates/twitch-games-list.html +++ b/internal/assets/templates/twitch-games-list.html @@ -6,7 +6,7 @@
                    • -
                      +
                      {{ .Name }}
                      • {{ .ViewersCount | formatViewerCount }} viewers
                        • @@ -19,7 +19,7 @@ {{ if eq $i 0 }}
                      • {{ $tag.Name }}
                        • {{ else }} -
                      • {{ $tag.Name }}
                        • +
                      • {{ $tag.Name }}
                        • {{ end }} {{ end }}
                      diff --git a/internal/assets/templates/video-card-contents.html b/internal/assets/templates/video-card-contents.html index 098e9f9..375fd08 100644 --- a/internal/assets/templates/video-card-contents.html +++ b/internal/assets/templates/video-card-contents.html @@ -4,7 +4,7 @@ {{ .Title }} From 8148f09b9c4ad386d9a78b704d15707c38d0a305 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sat, 25 May 2024 02:28:45 +0100 Subject: [PATCH 40/47] Add more features to clock --- docs/configuration.md | 34 ++++++++- docs/images/clock-widget-preview.png | Bin 2812 -> 11130 bytes internal/assets/static/main.css | 4 + internal/assets/static/main.js | 110 ++++++++++++++++++++++++--- internal/assets/templates/clock.html | 27 ++++++- internal/widget/clock.go | 35 ++++++++- 6 files changed, 195 insertions(+), 15 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 5e317a8..44e803f 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -966,18 +966,50 @@ Whether to open the link in the same tab or a new one. Whether to hide the colored arrow on each link. ### Clock -Display a clock showing the current time. +Display a clock showing the current time and date. Optionally, also display the the time in other timezones. Example: ```yaml - type: clock + hour-format: 24h + timezones: + - timezone: Europe/Paris + label: Paris + - timezone: America/New_York + label: New York + - timezone: Asia/Tokyo + label: Tokyo ``` Preview: ![](images/clock-widget-preview.png) +#### Properties + +| Name | Type | Required | Default | +| ---- | ---- | -------- | ------- | +| hour-format | string | no | 24h | +| timezones | array | no | | + +##### `hour-format` +Whether to show the time in 12 or 24 hour format. Possible values are `12h` and `24h`. + +#### Properties for each timezone + +| Name | Type | Required | Default | +| ---- | ---- | -------- | ------- | +| timezone | string | yes | | +| label | string | no | | + +##### `timezone` +A timezone identifier such as `Europe/London`, `America/New_York`, etc. The full list of available identifiers can be found [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). + +##### `label` +Optionally, override the display value for the timezone to something more meaningful such as "Home", "Work" or anything else. + + ### Calendar Display a calendar. diff --git a/docs/images/clock-widget-preview.png b/docs/images/clock-widget-preview.png index 346a6ed5c948979311d7b95d0f09c94ec113d3e7..bf809c5ad187f4fc44065fcbe8a0bd94424fce42 100644 GIT binary patch literal 11130 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 literal 2812 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 { + 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 clockFormatter = new Intl.DateTimeFormat(undefined, {minute: "numeric", hour: "numeric"}); - const elements = document.getElementsByClassName("glance-clock"); - updateClocks(elements, clockFormatter) - setInterval(() => {updateClocks(elements, clockFormatter)}, 1000); + 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() { diff --git a/internal/assets/templates/clock.html b/internal/assets/templates/clock.html index 5116782..2be2d1c 100644 --- a/internal/assets/templates/clock.html +++ b/internal/assets/templates/clock.html @@ -1,5 +1,30 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      + {{ if gt (len .Timezones) 0 }} +
                      +
                        + {{ range .Timezones }} +
                      • +
                        +
                        {{ if ne .Label "" }}{{ .Label }}{{ else }}{{ .Timezone }}{{ end }}
                        +
                        +
                        +
                        +
                        • + {{ end }} +
                      + {{ end }} +
                      {{ end }} diff --git a/internal/widget/clock.go b/internal/widget/clock.go index efb2c8e..efe8ccd 100644 --- a/internal/widget/clock.go +++ b/internal/widget/clock.go @@ -1,23 +1,50 @@ package widget import ( - "context" + "errors" + "fmt" "html/template" + "time" "github.com/glanceapp/glance/internal/assets" ) type Clock struct { widgetBase `yaml:",inline"` + cachedHTML template.HTML `yaml:"-"` + HourFormat string `yaml:"hour-format"` + Timezones []struct { + Timezone string `yaml:"timezone"` + Label string `yaml:"label"` + } `yaml:"timezones"` } func (widget *Clock) Initialize() error { widget.withTitle("Clock").withError(nil) + + if widget.HourFormat == "" { + widget.HourFormat = "24h" + } else if widget.HourFormat != "12h" && widget.HourFormat != "24h" { + return errors.New("invalid hour format for clock widget, must be either 12h or 24h") + } + + for t := range widget.Timezones { + if widget.Timezones[t].Timezone == "" { + return errors.New("missing timezone value for clock widget") + } + + _, err := time.LoadLocation(widget.Timezones[t].Timezone) + + if err != nil { + return fmt.Errorf("invalid timezone '%s' for clock widget: %v", widget.Timezones[t].Timezone, err) + } + } + + widget.cachedHTML = widget.render(widget, assets.ClockTemplate) + return nil } -func (widget *Clock) Update(ctx context.Context) {} - func (widget *Clock) Render() template.HTML { - return widget.render(widget, assets.ClockTemplate) + return widget.cachedHTML } From 37471fcdc1d7451ff3c0ac78008214ef25edc297 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 19 May 2024 21:35:54 +0100 Subject: [PATCH 41/47] Remove extra new line --- internal/assets/templates/forum-posts.html | 1 - 1 file changed, 1 deletion(-) diff --git a/internal/assets/templates/forum-posts.html b/internal/assets/templates/forum-posts.html index 882c4e3..afaf07f 100644 --- a/internal/assets/templates/forum-posts.html +++ b/internal/assets/templates/forum-posts.html @@ -18,7 +18,6 @@ {{ end }} {{ end }} -
                      {{ .Title }}
                        From c2d24ee4d9327f740ef741fc628e6eebeacdf190 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Mon, 20 May 2024 20:39:39 +0100 Subject: [PATCH 42/47] Set background color in manifest --- internal/assets/static/manifest.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/internal/assets/static/manifest.json b/internal/assets/static/manifest.json index 8ce7aa8..668b289 100644 --- a/internal/assets/static/manifest.json +++ b/internal/assets/static/manifest.json @@ -1,6 +1,7 @@ { "name": "Glance", "display": "standalone", + "background_color": "#151519", "scope": "/", "start_url": "/", "icons": [ @@ -10,4 +11,4 @@ "sizes": "512x512" } ] -} \ No newline at end of file +} From 6663360caab60c13bc11c8d3cae555cb75b252a3 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Mon, 20 May 2024 21:16:11 +0100 Subject: [PATCH 43/47] Don't add classes that are no longer needed --- internal/assets/static/main.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index ccb2ab3..38f1a37 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -255,8 +255,6 @@ function setupCollapsibleLists() { child.classList.add("collapsible-item"); child.style.animationDelay = ((c - collapseAfter) * 20).toString() + "ms"; } - - list.classList.add("ready"); } } @@ -319,7 +317,6 @@ function setupCollapsibleGrids() { afterContentReady(() => { cardsPerRow = getCardsPerRow(); resolveCollapsibleItems(); - gridElement.classList.add("ready"); }); window.addEventListener("resize", () => { From d18f645c18cc56f8e5a39ff42b3f6a3239ab414a Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Tue, 21 May 2024 17:28:30 +0100 Subject: [PATCH 44/47] Add detailed-list style for RSS --- internal/assets/static/main.css | 64 +++++++++++++++++-- internal/assets/templates.go | 1 + internal/assets/templates/forum-posts.html | 2 +- .../assets/templates/rss-detailed-list.html | 38 +++++++++++ .../templates/rss-horizontal-cards-2.html | 2 +- .../templates/rss-horizontal-cards.html | 2 +- .../assets/templates/twitch-channels.html | 2 +- .../assets/templates/twitch-games-list.html | 2 +- internal/assets/templates/videos-grid.html | 2 +- internal/assets/templates/videos.html | 2 +- internal/feed/rss.go | 59 ++++++++++++++++- internal/feed/utils.go | 10 +++ internal/widget/rss.go | 11 ++++ 13 files changed, 182 insertions(+), 15 deletions(-) create mode 100644 internal/assets/templates/rss-detailed-list.html diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 982d337..0806a8c 100644 --- 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%)); @@ -79,14 +80,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 +117,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); @@ -190,6 +194,20 @@ background-color: var(--color-background); } +.attachments { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: -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 { background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); color: var(--color-text-highlight); @@ -883,7 +901,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; } @@ -931,6 +960,20 @@ 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; border-radius: var(--border-radius); @@ -1171,11 +1214,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 } @@ -1187,6 +1230,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); } @@ -1250,3 +1301,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); } diff --git a/internal/assets/templates.go b/internal/assets/templates.go index 8dff7c0..548a4f0 100644 --- a/internal/assets/templates.go +++ b/internal/assets/templates.go @@ -27,6 +27,7 @@ var ( VideosGridTemplate = compileTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html") StocksTemplate = compileTemplate("stocks.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") diff --git a/internal/assets/templates/forum-posts.html b/internal/assets/templates/forum-posts.html index afaf07f..529cc25 100644 --- a/internal/assets/templates/forum-posts.html +++ b/internal/assets/templates/forum-posts.html @@ -4,7 +4,7 @@
                          {{ range .Posts }}
                        • -
                          +
                          {{ if $.ShowThumbnails }} {{ if ne .ThumbnailUrl "" }} diff --git a/internal/assets/templates/rss-detailed-list.html b/internal/assets/templates/rss-detailed-list.html new file mode 100644 index 0000000..a926002 --- /dev/null +++ b/internal/assets/templates/rss-detailed-list.html @@ -0,0 +1,38 @@ +{{ template "widget-base.html" . }} + +{{ define "widget-content" }} +
                            + {{ range .Items }} +
                          • +
                            + {{ if ne "" .ImageURL }} + + {{ else }} + + + + {{ end }} +
                            +
                            + {{ .Title }} + + {{ if ne "" .Description }} +

                            {{ .Description }}

                            + {{ end }} + {{ if gt (len .Categories) 0 }} +
                              + {{ range .Categories }} +
                            • {{ . }}
                              • + {{ end }} +
                            + {{ end }} +
                            +
                            • + {{ end }} +
                          +{{ end }} diff --git a/internal/assets/templates/rss-horizontal-cards-2.html b/internal/assets/templates/rss-horizontal-cards-2.html index 287774b..ffacc2f 100644 --- a/internal/assets/templates/rss-horizontal-cards-2.html +++ b/internal/assets/templates/rss-horizontal-cards-2.html @@ -6,7 +6,7 @@
                          {{ range .Items }} -
                          +
                          {{ if ne "" .ImageURL }} {{ else }} diff --git a/internal/assets/templates/rss-horizontal-cards.html b/internal/assets/templates/rss-horizontal-cards.html index aefdd8d..b9eabf7 100644 --- a/internal/assets/templates/rss-horizontal-cards.html +++ b/internal/assets/templates/rss-horizontal-cards.html @@ -6,7 +6,7 @@
                          {{ range .Items }} -
                          +
                          {{ if ne "" .ImageURL }} {{ else }} diff --git a/internal/assets/templates/twitch-channels.html b/internal/assets/templates/twitch-channels.html index c0ec165..f053122 100644 --- a/internal/assets/templates/twitch-channels.html +++ b/internal/assets/templates/twitch-channels.html @@ -4,7 +4,7 @@
                            {{ range .Channels }}
                          • -
                            +
                            {{ if .Exists }} diff --git a/internal/assets/templates/twitch-games-list.html b/internal/assets/templates/twitch-games-list.html index 36c457b..9b4cf42 100644 --- a/internal/assets/templates/twitch-games-list.html +++ b/internal/assets/templates/twitch-games-list.html @@ -3,7 +3,7 @@ {{ define "widget-content" }}
                              {{ range .Categories }} -
                            • +
                            • diff --git a/internal/assets/templates/videos-grid.html b/internal/assets/templates/videos-grid.html index d4bdf09..2819fe8 100644 --- a/internal/assets/templates/videos-grid.html +++ b/internal/assets/templates/videos-grid.html @@ -5,7 +5,7 @@ {{ define "widget-content" }}
                              {{ range .Videos }} -
                              +
                              {{ template "video-card-contents" . }}
                              {{ end }} diff --git a/internal/assets/templates/videos.html b/internal/assets/templates/videos.html index 2bf162f..16e7261 100644 --- a/internal/assets/templates/videos.html +++ b/internal/assets/templates/videos.html @@ -6,7 +6,7 @@
                              {{ range .Videos }} -
                              +
                              {{ template "video-card-contents" . }}
                              {{ end }} diff --git a/internal/feed/rss.go b/internal/feed/rss.go index 533bb11..6cadc31 100644 --- a/internal/feed/rss.go +++ b/internal/feed/rss.go @@ -3,8 +3,11 @@ package feed import ( "context" "fmt" + "html" "log/slog" + "regexp" "sort" + "strings" "time" "github.com/mmcdole/gofeed" @@ -16,12 +19,34 @@ type RSSFeedItem struct { Title string Link string ImageURL string + Categories []string + Description string PublishedAt time.Time } +// doesn't cover all cases but works the vast majority of the time +var htmlTagsWithAttributesPattern = regexp.MustCompile(`<\/?[a-zA-Z0-9-]+ *(?:[a-zA-Z-]+=(?:"|').*?(?:"|') ?)* *\/?>`) +var sequentialWhitespacePattern = regexp.MustCompile(`\s+`) + +func sanitizeFeedDescription(description string) string { + if description == "" { + return "" + } + + description = strings.ReplaceAll(description, "\n", " ") + description = htmlTagsWithAttributesPattern.ReplaceAllString(description, "") + description = sequentialWhitespacePattern.ReplaceAllString(description, " ") + description = strings.TrimSpace(description) + description = html.UnescapeString(description) + + return description +} + type RSSFeedRequest struct { - Url string `yaml:"url"` - Title string `yaml:"title"` + Url string `yaml:"url"` + Title string `yaml:"title"` + HideCategories bool `yaml:"hide-categories"` + HideDescription bool `yaml:"hide-description"` } type RSSFeedItems []RSSFeedItem @@ -57,6 +82,36 @@ func getItemsFromRSSFeedTask(request RSSFeedRequest) ([]RSSFeedItem, error) { Link: item.Link, } + if !request.HideDescription && item.Description != "" { + description, _ := limitStringLength(item.Description, 1000) + description = sanitizeFeedDescription(description) + description, limited := limitStringLength(description, 200) + + if limited { + description += "…" + } + + rssItem.Description = description + } + + if !request.HideCategories { + var categories = make([]string, 0, 6) + + for _, category := range item.Categories { + if len(categories) == 6 { + break + } + + if len(category) == 0 || len(category) > 30 { + continue + } + + categories = append(categories, category) + } + + rssItem.Categories = categories + } + if request.Title != "" { rssItem.ChannelName = request.Title } else { diff --git a/internal/feed/utils.go b/internal/feed/utils.go index dcf044a..6ea475f 100644 --- a/internal/feed/utils.go +++ b/internal/feed/utils.go @@ -77,3 +77,13 @@ func maybeCopySliceWithoutZeroValues[T int | float64](values []T) []T { return values } + +func limitStringLength(s string, max int) (string, bool) { + asRunes := []rune(s) + + if len(asRunes) > max { + return string(asRunes[:max]), true + } + + return s, false +} diff --git a/internal/widget/rss.go b/internal/widget/rss.go index 26d43dc..1d8ce9e 100644 --- a/internal/widget/rss.go +++ b/internal/widget/rss.go @@ -39,6 +39,13 @@ func (widget *RSS) Initialize() error { widget.CardHeight = 0 } + if widget.Style != "detailed-list" { + for i := range widget.FeedRequests { + widget.FeedRequests[i].HideCategories = true + widget.FeedRequests[i].HideDescription = true + } + } + return nil } @@ -65,5 +72,9 @@ func (widget *RSS) Render() template.HTML { return widget.render(widget, assets.RSSHorizontalCards2Template) } + if widget.Style == "detailed-list" { + return widget.render(widget, assets.RSSDetailedListTemplate) + } + return widget.render(widget, assets.RSSListTemplate) } From d1be4637adc0f772b8c9dc7cf467b823ec56d68b Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Thu, 23 May 2024 00:05:21 +0100 Subject: [PATCH 45/47] Fix registering resize event on wrong object --- internal/assets/static/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index 38f1a37..146f781 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -59,7 +59,7 @@ function setupCarousels() { const determineSideCutoffsRateLimited = throttledDebounce(determineSideCutoffs, 20, 100); itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited); - document.addEventListener("resize", determineSideCutoffsRateLimited); + window.addEventListener("resize", determineSideCutoffsRateLimited); afterContentReady(determineSideCutoffs); } From f044fdf5dcddf0e542383f71b6e46e75ba5dd9ab Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 24 May 2024 05:23:00 +0100 Subject: [PATCH 46/47] Add utility classes --- internal/assets/static/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 0806a8c..832ea09 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -1285,6 +1285,10 @@ body { .gap-7 { gap: 0.7rem; } .gap-10 { gap: 1rem; } .gap-15 { gap: 1.5rem; } +.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; } From 4bb5b2641b6b20e6df5084f5f5609c41b7b29ac8 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Fri, 24 May 2024 05:23:44 +0100 Subject: [PATCH 47/47] Further attempts at making the rain look less scuffed --- internal/assets/static/main.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 832ea09..b179b68 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -733,7 +733,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 { @@ -1171,6 +1171,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) {