diff --git a/README.md b/README.md index 281bacc..715c8e5 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ * iframe * Twitch channels & top games * GitHub releases +* Repository overview * Site monitor #### Themeable @@ -48,7 +49,7 @@ Checkout the [releases page](https://github.com/glanceapp/glance/releases) for a #### Docker > [!IMPORTANT] > -> Make sure you have a valid `glance.yml` file before running the container. +> Make sure you have a valid `glance.yml` file in the same directory before running the container. ```bash docker run -d -p 8080:8080 \ diff --git a/docs/configuration.md b/docs/configuration.md index 1dc92b3..e698fdd 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -14,6 +14,7 @@ - [Weather](#weather) - [Monitor](#monitor) - [Releases](#releases) + - [Repository](#repository) - [Bookmarks](#bookmarks) - [Calendar](#calendar) - [Stocks](#stocks) @@ -250,11 +251,12 @@ pages: ``` ### Properties -| Name | Type | Required | -| ---- | ---- | -------- | -| title | string | yes | -| slug | string | no | -| columns | array | yes | +| Name | Type | Required | Default | +| ---- | ---- | -------- | ------- | +| title | string | yes | | +| slug | string | no | | +| show-mobile-header | boolean | no | false | +| columns | array | yes | | #### `title` The name of the page which gets shown in the navigation bar. @@ -262,6 +264,13 @@ The name of the page which gets shown in the navigation bar. #### `slug` The URL friendly version of the title which is used to access the page. For example if the title of the page is "RSS Feeds" you can make the page accessible via `localhost:8080/feeds` by setting the slug to `feeds`. If not defined, it will automatically be generated from the title. +#### `show-mobile-header` +Whether to show a header displaying the name of the page on mobile. The header purposefully has a lot of vertical whitespace in order to push the content down and make it easier to reach on tall devices. + +Preview: + +![](images/mobile-header-preview.png) + ### Columns Columns are defined for each page using a `columns` property. There are two types of columns - `full` and `small`, which refers to their width. A small column takes up a fixed amount of width (300px) and a full column takes up the all of the remaining width. You can have up to 3 columns per page and you must have either 1 or 2 full columns. Example: @@ -384,6 +393,8 @@ Example: | ---- | ---- | -------- | ------- | | style | string | no | vertical-list | | feeds | array | yes | +| thumbnail-height | float | no | 10 | +| card-height | float | no | 27 | | limit | integer | no | 25 | | collapse-after | integer | no | 5 | @@ -398,6 +409,16 @@ Used to change the appearance of the widget. Possible values are `vertical-list` ![preview of horizontal-cards style for RSS widget](images/rss-feed-horizontal-cards-preview.png) +`horizontal-cards-2` + +![preview of horizontal-cards-2 style for RSS widget](images/rss-widget-horizontal-cards-2-preview.png) + +##### `thumbnail-height` +Used to modify the height of the thumbnails. Works only when the style is set to `horizontal-cards`. The default value is `10` and the units are `rem`, if you want to for example double the height of the thumbnails you can set it to `20`. + +##### `card-height` +Used to modify the height of cards when using the `horizontal-cards-2` style. The default value is `27` and the units are `rem`. + ##### `feeds` An array of RSS/atom feeds. The title can optionally be changed. @@ -434,6 +455,7 @@ Preview: | ---- | ---- | -------- | ------- | | channels | array | yes | | | limit | integer | no | 25 | +| style | string | no | horizontal-cards | | video-url-template | string | no | https://www.youtube.com/watch?v={VIDEO-ID} | ##### `channels` @@ -448,6 +470,13 @@ Then scroll down and click on "Share channel", then "Copy channel ID": ##### `limit` The maximum number of videos to show. +##### `style` +Used to change the appearance of the widget. Possible values are `horizontal-cards` and `grid-cards`. + +Preview of `grid-cards`: + +![](images/videos-widget-grid-cards-preview.png) + ##### `video-url-template` Used to replace the default link for videos. Useful when you're running your own YouTube front-end. Example: @@ -479,6 +508,8 @@ Preview: | limit | integer | no | 15 | | collapse-after | integer | no | 5 | | comments-url-template | string | no | https://news.ycombinator.com/item?id={POST-ID} | +| sort-by | string | no | top | +| extra-sort-by | string | no | | ##### `comments-url-template` Used to replace the default link for post comments. Useful if you want to use an alternative front-end. Example: @@ -491,12 +522,20 @@ Placeholders: `{POST-ID}` - the ID of the post +##### `sort-by` +Used to specify the order in which the posts should get returned. Possible values are `top`, `new`, and `best`. + +##### `extra-sort-by` +Can be used to specify an additional sort which will be applied on top of the already sorted posts. By default does not apply any extra sorting and the only available option is `engagement`. + +The `engagement` sort tries to place the posts with the most points and comments on top, also prioritizing recent over old posts. + ### Reddit Display a list of posts from a specific subreddit. > [!WARNING] > -> Reddit does not allow unauthorized API access from VPS IPs, if you're hosting Glance on a VPS you will get a 403 response. As a workaround you can route the traffic from Glance through a VPN. +> Reddit does not allow unauthorized API access from VPS IPs, if you're hosting Glance on a VPS you will get a 403 response. As a workaround you can route the traffic from Glance through a VPN or your own HTTP proxy using the `request-url-template` property. Example: @@ -515,6 +554,10 @@ Example: | collapse-after | integer | no | 5 | | comments-url-template | string | no | https://www.reddit.com/{POST-PATH} | | request-url-template | string | no | | +| sort-by | string | no | hot | +| top-period | string | no | day | +| search | string | no | | +| extra-sort-by | string | no | | ##### `subreddit` The subreddit for which to fetch the posts from. @@ -580,6 +623,22 @@ https://proxy/{REQUEST-URL} https://your.proxy/?url={REQUEST-URL} ``` +##### `sort-by` +Can be used to specify the order in which the posts should get returned. Possible values are `hot`, `new`, `top` and `rising`. + +##### `top-perid` +Available only when `sort-by` is set to `top`. Possible values are `hour`, `day`, `week`, `month`, `year` and `all`. + +##### `search` +Keywords to search for. Searching within specific fields is also possible, **though keep in mind that Reddit may remove the ability to use any of these at any time**: + +![](images/reddit-field-search.png) + +##### `extra-sort-by` +Can be used to specify an additional sort which will be applied on top of the already sorted posts. By default does not apply any extra sorting and the only available option is `engagement`. + +The `engagement` sort tries to place the posts with the most points and comments on top, also prioritizing recent over old posts. + ### Weather Display weather information for a specific location. The data is provided by https://open-meteo.com/. @@ -593,7 +652,7 @@ Example: > [!NOTE] > -> US cities which have common names can have their state specified as the second parameter like such: +> US cities which have common names can have their state specified as the second parameter as such: > > * Greenville, North Carolina, United States > * Greenville, South Carolina, United States @@ -675,7 +734,11 @@ You can hover over the "ERROR" text to view more information. | Name | Type | Required | | ---- | ---- | -------- | -| sites | array | yes | | +| sites | array | yes | +| style | string | no | + +##### `style` +To make the widget scale appropriately in a `full` size column, set the style to the experimental `dynamic-columns-experimental` option. ##### `sites` @@ -694,7 +757,7 @@ The title used to indicate the site. `url` -The URL which will be requested and its response will determine the status of the site. +The URL which will be requested and its response will determine the status of the site. Optionally, you can specify this using an environment variable with the syntax `${VARIABLE_NAME}`. `icon` @@ -763,6 +826,43 @@ The maximum number of releases to show. #### `collapse-after` How many releases are visible before the "SHOW MORE" button appears. Set to `-1` to never collapse. +### Repository +Display general information about a repository as well as a list of the latest open pull requests and issues. + +Example: + +```yaml +- type: repository + repository: glanceapp/glance + pull-requests-limit: 5 + issues-limit: 3 +``` + +Preview: + +![](images/repository-preview.png) + +#### Properties + +| Name | Type | Required | Default | +| ---- | ---- | -------- | ------- | +| repository | string | yes | | +| token | string | no | | +| pull-requests-limit | integer | no | 3 | +| issues-limit | integer | no | 3 | + +##### `repository` +The owner and repository name that will have their information displayed. + +##### `token` +Without authentication Github allows for up to 60 requests per hour. You can easily exceed this limit and start seeing errors if your cache time is low or you have many instances of this widget. To circumvent this you can [create a read only token from your Github account](https://github.com/settings/personal-access-tokens/new) and provide it here. + +##### `pull-requests-limit` +The maximum number of latest open pull requests to show. Set to `-1` to not show any. + +##### `issues-limit` +The maximum number of latest open issues to show. Set to `-1` to not show any. + ### Bookmarks Display a list of links which can be grouped. @@ -812,10 +912,14 @@ Preview: | Name | Type | Required | | ---- | ---- | -------- | | groups | array | yes | +| style | string | no | ##### `groups` An array of groups which can optionally have a title and a custom color. +##### `style` +To make the widget scale appropriately in a `full` size column, set the style to the experimental `dynamic-columns-experimental` option. + ###### Properties for each group | Name | Type | Required | Default | | ---- | ---- | -------- | ------- | @@ -883,18 +987,12 @@ Example: name: S&P 500 - symbol: BTC-USD name: Bitcoin + chart-link: https://www.tradingview.com/chart/?symbol=INDEX:BTCUSD - symbol: NVDA name: NVIDIA - symbol: AAPL + symbol-link: https://www.google.com/search?tbm=nws&q=apple name: Apple - - symbol: MSFT - name: Microsoft - - symbol: GOOGL - name: Google - - symbol: AMD - name: AMD - - symbol: RDDT - name: Reddit ``` Preview: @@ -907,15 +1005,24 @@ Preview: | ---- | ---- | -------- | | stocks | array | yes | | sort-by | string | no | +| style | string | no | ##### `stocks` An array of stocks for which to display information about. +##### `sort-by` +By default the stocks are displayed in the order they were defined. You can customize their ordering by setting the `sort-by` property to `absolute-change` for descending order based on the stock's absolute price change. + +##### `style` +To make the widget scale appropriately in a `full` size column, set the style to the experimental `dynamic-columns-experimental` option. + ###### Properties for each stock | Name | Type | Required | | ---- | ---- | -------- | | symbol | string | yes | | name | string | no | +| symbol-link | string | no | +| chart-link | string | no | `symbol` @@ -925,8 +1032,11 @@ The symbol, as seen in Yahoo Finance. The name that will be displayed under the symbol. -##### `sort-by` -By default the stocks are displayed in the order they were defined. You can customize their ordering by setting the `sort-by` property to `absolute-change` for descending order based on the stock's absolute price change. +`symbol-link` +The link to go to when clicking on the symbol. + +`chart-link` +The link to go to when clicking on the chart. ### Twitch Channels Display a list of channels from Twitch. diff --git a/docs/images/mobile-header-preview.png b/docs/images/mobile-header-preview.png new file mode 100644 index 0000000..f829eda Binary files /dev/null and b/docs/images/mobile-header-preview.png differ diff --git a/docs/images/reddit-field-search.png b/docs/images/reddit-field-search.png new file mode 100644 index 0000000..97ba04a Binary files /dev/null and b/docs/images/reddit-field-search.png differ diff --git a/docs/images/repository-preview.png b/docs/images/repository-preview.png new file mode 100644 index 0000000..5c43db5 Binary files /dev/null and b/docs/images/repository-preview.png differ diff --git a/docs/images/rss-widget-horizontal-cards-2-preview.png b/docs/images/rss-widget-horizontal-cards-2-preview.png new file mode 100644 index 0000000..5f029dd Binary files /dev/null and b/docs/images/rss-widget-horizontal-cards-2-preview.png differ diff --git a/docs/images/videos-widget-grid-cards-preview.png b/docs/images/videos-widget-grid-cards-preview.png new file mode 100644 index 0000000..5c4f109 Binary files /dev/null and b/docs/images/videos-widget-grid-cards-preview.png differ diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index b77a60f..1e64def 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -102,12 +102,13 @@ .list { --list-half-gap: 0rem; } .list-gap-2 { --list-half-gap: 0.1rem; } .list-gap-4 { --list-half-gap: 0.2rem; } +.list-gap-10 { --list-half-gap: 0.5rem; } .list-gap-14 { --list-half-gap: 0.7rem; } .list-gap-20 { --list-half-gap: 1rem; } .list-gap-24 { --list-half-gap: 1.2rem; } .list > *:not(:first-child) { - margin-top: calc(var(--list-half-gap) * 2 + 1px); + margin-top: calc(var(--list-half-gap) * 2); } .list-with-separator > *:not(:first-child) { @@ -205,11 +206,29 @@ margin: 0; } +hr { + border: 0; + height: 1px; + background-color: var(--color-separator); +} + img, svg { display: block; max-width: 100%; } +img[loading=lazy].loaded:not(.finished-transition) { + transition: opacity .4s; +} + +img[loading=lazy].cached:not(.finished-transition) { + transition: none; +} + +img[loading=lazy]:not(.loaded, .cached) { + opacity: 0; +} + html { scrollbar-color: var(--color-text-subdue) transparent; scroll-behavior: smooth; @@ -314,6 +333,44 @@ body { padding: 0 var(--content-bounds-padding); } +.dynamic-columns { + gap: calc(var(--widget-content-vertical-padding) / 2); + display: grid; + grid-template-columns: repeat(var(--columns-per-row), 1fr); + margin: calc(0px - var(--widget-content-vertical-padding) / 2) calc(0px - var(--widget-content-horizontal-padding) / 2); +} + +.dynamic-columns > * { + padding: calc(var(--widget-content-vertical-padding) / 2) calc(var(--widget-content-horizontal-padding) / 1.5); + background-color: var(--color-background); + border-radius: var(--border-radius); +} + +.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } +.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } +.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } +.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } +.dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } + +@container widget (max-width: 1500px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } + .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } + .dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } +} +@container widget (max-width: 1250px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } + .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } +} +@container widget (max-width: 850px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } +} +@container widget (max-width: 550px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } +} + .cards-vertical { flex-direction: column; } @@ -322,30 +379,44 @@ body { --cards-per-row: 6.5; } -.cards-grid { - --cards-per-row: 6; -} - -.cards-horizontal, .cards-vertical, .cards-grid { +.cards-horizontal, .cards-vertical { --cards-gap: calc(var(--widget-content-vertical-padding) * 0.7); display: flex; gap: var(--cards-gap); } +.card { + display: flex; + flex-direction: column; +} + +.cards-horizontal .card { + flex-shrink: 0; + width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row)); +} + +.cards-grid .card { + min-width: 0; +} + .cards-horizontal { overflow-x: auto; padding-bottom: 1rem; } .cards-grid { - flex-wrap: wrap; + --cards-per-row: 6; + display: grid; + grid-template-columns: repeat(var(--cards-per-row), 1fr); + gap: calc(var(--widget-content-vertical-padding) * 0.7); } @container widget (max-width: 1300px) { .cards-horizontal { --cards-per-row: 5.5; } } @container widget (max-width: 1100px) { .cards-horizontal { --cards-per-row: 4.5; } } @container widget (max-width: 850px) { .cards-horizontal { --cards-per-row: 3.5; } } @container widget (max-width: 750px) { .cards-horizontal { --cards-per-row: 3.5; } } -@container widget (max-width: 650px) { .cards-horizontal { --cards-per-row: 2.2; } } +@container widget (max-width: 650px) { .cards-horizontal { --cards-per-row: 2.5; } } +@container widget (max-width: 450px) { .cards-horizontal { --cards-per-row: 2.3; } } @container widget (max-width: 1300px) { .cards-grid { --cards-per-row: 5; } } @container widget (max-width: 1100px) { .cards-grid { --cards-per-row: 4; } } @@ -353,12 +424,7 @@ body { @container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } } @container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } } -.card { - flex-shrink: 0; - width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row)); - display: flex; - flex-direction: column; -} + .widget-error-header { display: flex; @@ -490,7 +556,7 @@ body { animation-delay: 150ms; } -.mobile-navigation { +.mobile-navigation, .mobile-reachability-header { display: none; } @@ -517,6 +583,10 @@ body { width: 6.5rem; } +.stock-chart svg { + width: 100%; +} + .stock-values { min-width: 8rem; } @@ -553,7 +623,7 @@ body { .video-thumbnail { width: 100%; - aspect-ratio: 16 / 9; + aspect-ratio: 16 / 8.9; object-fit: cover; border-radius: var(--border-radius) var(--border-radius) 0 0; } @@ -788,6 +858,7 @@ body { } .monitor-site-status-icon { + flex-shrink: 0; margin-left: auto; width: 2rem; height: 2rem; @@ -805,11 +876,48 @@ body { } .rss-card-image { - height: 10rem; + height: var(--rss-thumbnail-height, 10rem); object-fit: cover; border-radius: var(--border-radius) var(--border-radius) 0 0; } +.rss-card-2 { + position: relative; + height: var(--rss-card-height, 27rem); + overflow: hidden; +} + +.rss-card-2::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + background-image: linear-gradient( + 0deg, + var(--color-widget-background), + hsla(var(--color-widget-background-hsl-values), 0.8) 6rem, transparent 14rem + ); + z-index: 2; +} + +.rss-card-2-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + /* +1px is required to fix some weird graphical bug where the image overflows on the bottom in firefox */ + border-radius: calc(var(--border-radius) + 1px); + opacity: 0.9; + z-index: 1; +} + +.rss-card-2-content { + position: absolute; + inset-inline: 0; + bottom: var(--widget-content-vertical-padding); + z-index: 3; +} + .twitch-category-thumbnail { width: 5rem; border-radius: var(--border-radius); @@ -1013,6 +1121,8 @@ body { --content-bounds-padding: 10px; } + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .forum-post-list-item { flex-flow: row-reverse; } @@ -1020,6 +1130,15 @@ body { .hide-on-mobile { display: none } + + .mobile-reachability-header { + display: block; + font-size: 3rem; + padding: 10dvh 1rem; + text-align: center; + color: var(--color-text-highlight); + animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; + } } .size-h1 { font-size: var(--font-size-h1); } @@ -1041,6 +1160,8 @@ body { .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } +.text-elevate { margin-top: -0.2em; } +.text-compact { word-spacing: -0.18em; } .rtl { direction: rtl; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } @@ -1069,6 +1190,11 @@ body { .margin-top-7 { margin-top: 0.7rem; } .margin-top-10 { margin-top: 1rem; } .margin-top-15 { margin-top: 1.5rem; } +.margin-block-3 { margin-block: 0.3rem; } +.margin-block-5 { margin-block: 0.5rem; } +.margin-block-7 { margin-block: 0.7rem; } +.margin-block-10 { margin-block: 1rem; } +.margin-block-15 { margin-block: 1.5rem; } .margin-bottom-3 { margin-bottom: 0.3rem; } .margin-bottom-5 { margin-bottom: 0.5rem; } .margin-bottom-7 { margin-bottom: 0.7rem; } diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index 3a6ec0b..05dbc45 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -142,6 +142,33 @@ function setupDynamicRelativeTime() { }); } +function setupLazyImages() { + const images = document.querySelectorAll("img[loading=lazy]"); + + if (images.length == 0) { + return; + } + + function imageFinishedTransition(image) { + image.classList.add("finished-transition"); + } + + 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); + }); + } + } +} + async function setupPage() { const pageElement = document.getElementById("page"); const pageContents = await fetchPageContents(pageData.slug); @@ -152,6 +179,7 @@ async function setupPage() { document.body.classList.add("animate-element-transition"); }, 150); + setTimeout(setupLazyImages, 5); setupCarousels(); setupDynamicRelativeTime(); } diff --git a/internal/assets/templates.go b/internal/assets/templates.go index fe82ed5..b8aa6ae 100644 --- a/internal/assets/templates.go +++ b/internal/assets/templates.go @@ -22,13 +22,16 @@ var ( RedditCardsHorizontalTemplate = compileTemplate("reddit-horizontal-cards.html", "widget-base.html") RedditCardsVerticalTemplate = compileTemplate("reddit-vertical-cards.html", "widget-base.html") ReleasesTemplate = compileTemplate("releases.html", "widget-base.html") - VideosTemplate = compileTemplate("videos.html", "widget-base.html") + VideosTemplate = compileTemplate("videos.html", "widget-base.html", "video-card-contents.html") + VideosGridTemplate = compileTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html") StocksTemplate = compileTemplate("stocks.html", "widget-base.html") RSSListTemplate = compileTemplate("rss-list.html", "widget-base.html") - RSSCardsTemplate = compileTemplate("rss-cards.html", "widget-base.html") + RSSHorizontalCardsTemplate = compileTemplate("rss-horizontal-cards.html", "widget-base.html") + RSSHorizontalCards2Template = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html") MonitorTemplate = compileTemplate("monitor.html", "widget-base.html") TwitchGamesListTemplate = compileTemplate("twitch-games-list.html", "widget-base.html") TwitchChannelsTemplate = compileTemplate("twitch-channels.html", "widget-base.html") + RepositoryTemplate = compileTemplate("repository.html", "widget-base.html") ) var globalTemplateFunctions = template.FuncMap{ diff --git a/internal/assets/templates/bookmarks.html b/internal/assets/templates/bookmarks.html index 068ab4d..a422009 100644 --- a/internal/assets/templates/bookmarks.html +++ b/internal/assets/templates/bookmarks.html @@ -1,23 +1,37 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} +{{ if ne .Style "dynamic-columns-experimental" }} +{{ else }} +
+ {{ range .Groups }} +
+ {{ template "group" . }} +
+ {{ end }} +
+{{ end }} +{{ end }} + +{{ define "group" }} +{{ if ne .Title "" }}
{{ .Title }}
{{ end }} + {{ end }} diff --git a/internal/assets/templates/content.html b/internal/assets/templates/content.html index 845507f..c59d6e1 100644 --- a/internal/assets/templates/content.html +++ b/internal/assets/templates/content.html @@ -1,3 +1,7 @@ +{{ if .Page.ShowMobileHeader }} +
{{ .Page.Title }}
+{{ end }} +
{{ range .Page.Columns }}
diff --git a/internal/assets/templates/monitor.html b/internal/assets/templates/monitor.html index fa97302..e618f8b 100644 --- a/internal/assets/templates/monitor.html +++ b/internal/assets/templates/monitor.html @@ -1,39 +1,53 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} +{{ if ne .Style "dynamic-columns-experimental" }} +{{ else }} + +{{ end }} +{{ end }} + +{{ define "site" }} +{{ if .IconUrl }} + +{{ end }} +
+ {{ .Title }} +
    + {{ if not .Status.Error }} +
  • {{ .StatusText }}
  • +
  • {{ .Status.ResponseTime.Milliseconds | formatNumber }}ms
  • + {{ else if .Status.TimedOut }} +
  • Timed Out
  • + {{ else }} +
  • ERROR
  • + {{ end }} +
+
+{{ if eq .StatusStyle "good" }} +
+ + + +
+{{ else }} +
+ + + +
+{{ end }} {{ end }} diff --git a/internal/assets/templates/releases.html b/internal/assets/templates/releases.html index 2600dc2..19f3c87 100644 --- a/internal/assets/templates/releases.html +++ b/internal/assets/templates/releases.html @@ -1,7 +1,7 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -