diff --git a/Dockerfile b/Dockerfile index 4d8cd87..0c4cc63 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM golang:1.23.6-alpine3.21 AS builder +FROM golang:1.24.2-alpine3.21 AS builder WORKDIR /app COPY . /app diff --git a/README.md b/README.md index cf64d2f..ca16c49 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@

What if you could see everything at a...

Glance

-

Install • Configuration • Preconfigured pages • Themes • Discord

+

Install • Configuration • Discord • Sponsor

+

Community widgets • Preconfigured pages • Themes

![](docs/images/readme-main-image.png) @@ -194,6 +195,7 @@ services: glance: container_name: glance image: glanceapp/glance + restart: unless-stopped volumes: - ./config:/app/config ports: @@ -264,59 +266,31 @@ Glance can also be installed through the following 3rd party channels:
-## Building from source - -Choose one of the following methods: - +## Common issues
-Build binary with Go -
+Requests timing out -Requirements: [Go](https://go.dev/dl/) >= v1.23 +The most common cause of this is when using Pi-Hole, AdGuard Home or other ad-blocking DNS services, which by default have a fairly low rate limit. Depending on the number of widgets you have in a single page, this limit can very easily be exceeded. To fix this, increase the rate limit in the settings of your DNS service. -To build the project for your current OS and architecture, run: - -```bash -go build -o build/glance . +If using Podman, in some rare cases the timeout can be caused by an unknown issue, in which case it may be resolved by adding the following to the bottom of your `docker-compose.yml` file: +```yaml +networks: + podman: + external: true ``` - -To build for a specific OS and architecture, run: - -```bash -GOOS=linux GOARCH=amd64 go build -o build/glance . -``` - -[*click here for a full list of GOOS and GOARCH combinations*](https://go.dev/doc/install/source#:~:text=$GOOS%20and%20$GOARCH) - -Alternatively, if you just want to run the app without creating a binary, like when you're testing out changes, you can run: - -```bash -go run . -``` -
-Build project and Docker image with Docker -
+Broken layout for markets, bookmarks or other widgets -Requirements: [Docker](https://docs.docker.com/engine/install/) +This is almost always caused by the browser extension Dark Reader. To fix this, disable dark mode for the domain where Glance is hosted. +
-To build the project and image using just Docker, run: +
+cannot unmarshal !!map into []glance.page -*(replace `owner` with your name or organization)* +The most common cause of this is having a `pages` key in your `glance.yml` and then also having a `pages` key inside one of your included pages. To fix this, remove the `pages` key from the top of your included pages. -```bash -docker build -t owner/glance:latest . -``` - -If you wish to push the image to a registry (by default Docker Hub), run: - -```bash -docker push owner/glance:latest -``` - -

@@ -375,6 +349,63 @@ Feature requests are tagged with one of the following:
+## Building from source + +Choose one of the following methods: + +
+Build binary with Go +
+ +Requirements: [Go](https://go.dev/dl/) >= v1.23 + +To build the project for your current OS and architecture, run: + +```bash +go build -o build/glance . +``` + +To build for a specific OS and architecture, run: + +```bash +GOOS=linux GOARCH=amd64 go build -o build/glance . +``` + +[*click here for a full list of GOOS and GOARCH combinations*](https://go.dev/doc/install/source#:~:text=$GOOS%20and%20$GOARCH) + +Alternatively, if you just want to run the app without creating a binary, like when you're testing out changes, you can run: + +```bash +go run . +``` +
+
+ +
+Build project and Docker image with Docker +
+ +Requirements: [Docker](https://docs.docker.com/engine/install/) + +To build the project and image using just Docker, run: + +*(replace `owner` with your name or organization)* + +```bash +docker build -t owner/glance:latest . +``` + +If you wish to push the image to a registry (by default Docker Hub), run: + +```bash +docker push owner/glance:latest +``` + +
+
+ +
+ ## Contributing guidelines * Before working on a new feature it's preferable to submit a feature request first and state that you'd like to implement it yourself diff --git a/docs/configuration.md b/docs/configuration.md index 1f2ad89..cb7b835 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -4,12 +4,13 @@ - [The config file](#the-config-file) - [Auto reload](#auto-reload) - [Environment variables](#environment-variables) + - [Other ways of providing tokens/passwords/secrets](#other-ways-of-providing-tokenspasswordssecrets) - [Including other config files](#including-other-config-files) - [Server](#server) - [Document](#document) - [Branding](#branding) - [Theme](#theme) - - [Themes](#themes) + - [Available themes](#available-themes) - [Pages & Columns](#pages--columns) - [Widgets](#widgets) - [RSS](#rss) @@ -92,6 +93,38 @@ If you need to use the syntax `${NAME}` in your config without it being interpre something: \${NOT_AN_ENV_VAR} ``` +#### Other ways of providing tokens/passwords/secrets + +You can use [Docker secrets](https://docs.docker.com/compose/how-tos/use-secrets/) with the following syntax: + +```yaml +# This will be replaced with the contents of the file /run/secrets/github_token +# so long as the secret `github_token` is provided to the container +token: ${secret:github_token} +``` + +Alternatively, you can load the contents of a file who's path is provided by an environment variable: + +`docker-compose.yml` +```yaml +services: + glance: + image: glanceapp/glance + environment: + - TOKEN_FILE=/home/user/token + volumes: + - /home/user/token:/home/user/token +``` + +`glance.yml` +```yaml +token: ${readFileFromEnv:TOKEN_FILE} +``` + +> [!NOTE] +> +> The contents of the file will be stripped of any leading/trailing whitespace before being used. + ### Including other config files Including config files from within your main config file is supported. This is done via the `$include` directive along with a relative or absolute path to the file you want to include. If the path is relative, it will be relative to the main config file. Additionally, environment variables can be used within included files, and changes to the included files will trigger an automatic reload. Example: @@ -235,6 +268,9 @@ branding:

Powered by Glance

logo-url: /assets/logo.png favicon-url: /assets/logo.png + app-name: "My Dashboard" + app-icon-url: "/assets/app-icon.png" + app-background-color: "#151519" ``` ### Properties @@ -246,6 +282,9 @@ branding: | logo-text | string | no | G | | logo-url | string | no | | | favicon-url | string | no | | +| app-name | string | no | Glance | +| app-icon-url | string | no | Glance's default icon | +| app-background-color | string | no | Glance's default background color | #### `hide-footer` Hides the footer when set to `true`. @@ -262,6 +301,15 @@ Specify a URL to a custom image to use instead of the "G" found in the navigatio #### `favicon-url` Specify a URL to a custom image to use for the favicon. +#### `app-name` +Specify the name of the web app shown in browser tab and PWA. + +#### `app-icon-url` +Specify URL for PWA and browser tab icon (512x512 PNG). + +#### `app-background-color` +Specify background color for PWA. Must be a valid CSS color. + ## Theme Theming is done through a top level `theme` property. Values for the colors are in [HSL](https://giggster.com/guide/basics/hue-saturation-lightness/) (hue, saturation, lightness) format. You can use a color picker [like this one](https://hslpicker.com/) to convert colors from other formats to HSL. The values are separated by a space and `%` is not required for any of the numbers. @@ -274,7 +322,7 @@ theme: contrast-multiplier: 1.1 ``` -### Themes +### Available themes If you don't want to spend time configuring your own theme, there are [several available themes](themes.md) which you can simply copy the values for. ### Properties @@ -359,22 +407,28 @@ pages: | name | string | yes | | | slug | string | no | | | width | string | no | | +| desktop-navigation-width | string | no | | | center-vertically | boolean | no | false | | hide-desktop-navigation | boolean | no | false | | expand-mobile-page-navigation | boolean | no | false | | show-mobile-header | boolean | no | false | | columns | array | yes | | -#### `title` +#### `name` 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. #### `width` -The maximum width of the page on desktop. Possible values are `slim` and `wide`. +The maximum width of the page on desktop. Possible values are `default`, `slim` and `wide`. -* default: `1600px` (when no value is specified) +#### `desktop-navigation-width` +The maximum width of the desktop navigation. Useful if you have a few pages that use a different width than the rest and don't want the navigation to jump abruptly when going to and away from those pages. Possible values are `default`, `slim` and `wide`. + +Here are the pixel equivalents for each value: + +* default: `1600px` * slim: `1100px` * wide: `1920px` @@ -958,6 +1012,7 @@ Preview: | search-engine | string | no | duckduckgo | | new-tab | boolean | no | false | | autofocus | boolean | no | false | +| target | string | no | _blank | | placeholder | string | no | Type here to search… | | bangs | array | no | | @@ -968,6 +1023,10 @@ Either a value from the table below or a URL to a custom search engine. Use `{QU | ---- | --- | | duckduckgo | `https://duckduckgo.com/?q={QUERY}` | | google | `https://www.google.com/search?q={QUERY}` | +| bing | `https://www.bing.com/search?q={QUERY}` | +| perplexity | `https://www.perplexity.ai/search?q={QUERY}` | +| kagi | `https://kagi.com/search?q={QUERY}` | +| startpage | `https://www.startpage.com/search?q={QUERY}` | ##### `new-tab` When set to `true`, swaps the shortcuts for showing results in the same or new tab, defaulting to showing results in a new tab. @@ -975,6 +1034,9 @@ When set to `true`, swaps the shortcuts for showing results in the same or new t ##### `autofocus` When set to `true`, automatically focuses the search input on page load. +##### `target` +The target to use when opening the search results in a new tab. Possible values are `_blank`, `_self`, `_parent` and `_top`. + ##### `placeholder` When set, modifies the text displayed in the input field before typing. @@ -1292,7 +1354,12 @@ Examples: | ---- | ---- | -------- | ------- | | url | string | yes | | | headers | key (string) & value (string) | no | | +| method | string | no | GET | +| body-type | string | no | json | +| body | any | no | | | frameless | boolean | no | false | +| allow-insecure | boolean | no | false | +| skip-json-validation | boolean | no | false | | template | string | yes | | | parameters | key (string) & value (string|array) | no | | | subrequests | map of requests | no | | @@ -1309,9 +1376,40 @@ headers: Accept: application/json ``` +##### `method` +The HTTP method to use when making the request. Possible values are `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `OPTIONS` and `HEAD`. + +##### `body-type` +The type of the body that will be sent with the request. Possible values are `json`, and `string`. + +##### `body` +The body that will be sent with the request. It can be a string or a map. Example: + +```yaml +body-type: json +body: + key1: value1 + key2: value2 + multiple-items: + - item1 + - item2 +``` + +```yaml +body-type: string +body: | + key1=value1&key2=value2 +``` + ##### `frameless` When set to `true`, removes the border and padding around the widget. +##### `allow-insecure` +Whether to ignore invalid/self-signed certificates. + +##### `skip-json-validation` +When set to `true`, skips the JSON validation step. This is useful when the API returns JSON Lines/newline-delimited JSON, which is a format that consists of several JSON objects separated by newlines. + ##### `template` The template that will be used to display the data. It relies on Go's `html/template` package so it's recommended to go through [its documentation](https://pkg.go.dev/text/template) to understand how to do basic things such as conditionals, loops, etc. In addition, it also uses [tidwall's gjson](https://github.com/tidwall/gjson) package to parse the JSON data so it's worth going through its documentation if you want to use more advanced JSON selectors. You can view additional examples with explanations and function definitions [here](custom-api.md). @@ -1381,6 +1479,7 @@ Display a widget provided by an external source (3rd party). If you want to lear | url | string | yes | | | fallback-content-type | string | no | | | allow-potentially-dangerous-html | boolean | no | false | +| headers | key & value | no | | | parameters | key & value | no | | ##### `url` @@ -1389,6 +1488,14 @@ The URL of the extension. **Note that the query gets stripped from this URL and ##### `fallback-content-type` Optionally specify the fallback content type of the extension if the URL does not return a valid `Widget-Content-Type` header. Currently the only supported value for this property is `html`. +##### `headers` +Optionally specify the headers that will be sent with the request. Example: + +```yaml +headers: + x-api-key: ${SECRET_KEY} +``` + ##### `allow-potentially-dangerous-html` Whether to allow the extension to display HTML. @@ -1793,6 +1900,8 @@ If any of the child containers are down, their status will propagate up to the p | hide-by-default | boolean | no | false | | format-container-names | boolean | no | false | | sock-path | string | no | /var/run/docker.sock | +| category | string | no | | +| running-only | boolean | no | false | ##### `hide-by-default` Whether to hide the containers by default. If set to `true` you'll have to manually add a `glance.hide: false` label to each container you want to display. By default all containers will be shown and if you want to hide a specific container you can add a `glance.hide: true` label. @@ -1801,7 +1910,59 @@ Whether to hide the containers by default. If set to `true` you'll have to manua When set to `true`, automatically converts container names such as `container_name_1` into `Container Name 1`. ##### `sock-path` -The path to the Docker socket. +The path to the Docker socket. This can also be a [remote socket](https://docs.docker.com/engine/daemon/remote-access/) or proxied socket using something like [docker-socket-proxy](https://github.com/Tecnativa/docker-socket-proxy). + +###### `category` +Filter to only the containers which have this category specified via the `glance.category` label. Useful if you want to have multiple containers widgets, each showing a different set of containers. + +
+View example +
+ + +```yaml +services: + jellyfin: + image: jellyfin/jellyfin:latest + labels: + glance.name: Jellyfin + glance.icon: si:jellyfin + glance.url: https://jellyfin.domain.com + glance.category: media + + gitea: + image: gitea/gitea:latest + labels: + glance.name: Gitea + glance.icon: si:gitea + glance.url: https://gitea.domain.com + glance.category: dev-tools + + vaultwarden: + image: vaultwarden/server:latest + labels: + glance.name: Vaultwarden + glance.icon: si:vaultwarden + glance.url: https://vaultwarden.domain.com + glance.category: dev-tools +``` + +Then you can use the `category` property to filter the containers: + +```yaml +- type: docker-containers + title: Dev tool containers + category: dev-tools + +- type: docker-containers + title: Media containers + category: media +``` + +
+ +##### `running-only` +Whether to only show running containers. If set to `true` only containers that are currently running will be displayed. If set to `false` all containers will be displayed regardless of their state. #### Labels | Name | Description | @@ -1814,6 +1975,7 @@ The path to the Docker socket. | glance.hide | Whether to hide the container. If set to `true` the container will not be displayed. Defaults to `false`. | | glance.id | The custom ID of the container. Used to group containers under a single parent. | | glance.parent | The ID of the parent container. Used to group containers under a single parent. | +| glance.category | The category of the container. Used to filter containers by category. | ### DNS Stats Display statistics from a self-hosted ad-blocking DNS resolver such as AdGuard Home, Pi-hole, or Technitium. @@ -1844,14 +2006,14 @@ Preview: | allow-insecure | bool | no | false | | url | string | yes | | | username | string | when service is `adguard` | | -| password | string | when service is `adguard` | | +| password | string | when service is `adguard` or `pihole-v6` | | | token | string | when service is `pihole` | | | hide-graph | bool | no | false | | hide-top-domains | bool | no | false | | hour-format | string | no | 12h | ##### `service` -Either `adguard`, `pihole`, or `technitium`. +Either `adguard`, `technitium`, or `pihole` (major version 5 and below) or `pihole-v6` (major version 6 and above). ##### `allow-insecure` Whether to allow invalid/self-signed certificates when making the request to the service. @@ -1863,10 +2025,14 @@ The base URL of the service. Only required when using AdGuard Home. The username used to log into the admin dashboard. ##### `password` -Only required when using AdGuard Home. The password used to log into the admin dashboard. +Required when using AdGuard Home, where the password is the one used to log into the admin dashboard. + +Also required when using Pi-hole major version 6 and above, where the password is the one used to log into the admin dashboard or the application password, which can be found in `Settings -> Web Interface / API -> Configure app password`. ##### `token` -Only required when using Pi-hole or Technitium. For Pi-hole, the API token which can be found in `Settings -> API -> Show API token`; for Technitium, an API token can be generated at `Administration -> Sessions -> Create Token`. +Required when using Pi-hole major version 5 or earlier. The API token which can be found in `Settings -> API -> Show API token`. + +Also required when using Technitium, an API token can be generated at `Administration -> Sessions -> Create Token`. ##### `hide-graph` Whether to hide the graph showing the number of queries over time. @@ -1931,7 +2097,7 @@ Whether to hide the swap usage. | Name | Type | Required | Default | | ---- | ---- | -------- | ------- | | cpu-temp-sensor | string | no | | -| hide-mointpoints-by-default | boolean | no | false | +| hide-mountpoints-by-default | boolean | no | false | | mountpoints | map\[string\]object | no | | ###### `cpu-temp-sensor` diff --git a/docs/custom-api.md b/docs/custom-api.md index 9848276..3a37df2 100644 --- a/docs/custom-api.md +++ b/docs/custom-api.md @@ -226,10 +226,10 @@ JSON response: } ``` -Calculations can be performed, however all numbers must be converted to floats first if they are not already: +Calculations can be performed on either ints or floats. If both numbers are ints, an int will be returned, otherwise a float will be returned. If you try to divide by zero, 0 will be returned. If you provide non-numeric values, `NaN` will be returned. ```html -
{{ sub (.JSON.Int "price" | toFloat) (.JSON.Int "discount" | toFloat) }}
+
{{ sub (.JSON.Int "price") (.JSON.Int "discount") }}
``` Output: @@ -309,6 +309,55 @@ You can also access the response headers:
{{ .Response.Header.Get "Content-Type" }}
``` +
+ +JSON response: + +```json +{"name": "Steve", "age": 30} +{"name": "Alex", "age": 25} +{"name": "John", "age": 35} +``` + +The above format is "[ndjson](https://docs.mulesoft.com/dataweave/latest/dataweave-formats-ndjson)" or "[JSON Lines](https://jsonlines.org/)", where each line is a separate JSON object. To parse this format, you must first disable the JSON validation check in your config, since by default the response is expected to be a single valid JSON object: + +```yaml +- type: custom-api + skip-json-validation: true +``` + +Then, to iterate over each object you can use `.JSONLines`: + +```html +{{ range .JSONLines }} +

{{ .String "name" }} is {{ .Int "age" }} years old

+{{ end }} +``` + +Output: + +```html +

Steve is 30 years old

+

Alex is 25 years old

+

John is 35 years old

+``` + +For other ways of selecting data from a JSON Lines response, have a look at the docs for [tidwall/gjson](https://github.com/tidwall/gjson/tree/master?tab=readme-ov-file#json-lines). For example, to get an array of all names, you can use the following: + +```html +{{ range .JSON.Array "..#.name" }} +

{{ .String "" }}

+{{ end }} +``` + +Output: + +```html +

Steve

+

Alex

+

John

+``` + ## Functions The following functions are available on the `JSON` object: @@ -325,13 +374,31 @@ The following helper functions provided by Glance are available: - `toFloat(i int) float`: Converts an integer to a float. - `toInt(f float) int`: Converts a float to an integer. - `toRelativeTime(t time.Time) template.HTMLAttr`: Converts Time to a relative time such as 2h, 1d, etc which dynamically updates. **NOTE:** the value of this function should be used as an attribute in an HTML tag, e.g. ``. -- `parseTime(layout string, s string) time.Time`: Parses a string into time.Time. The layout must be provided in Go's [date format](https://pkg.go.dev/time#pkg-constants). You can alternatively use these values instead of the literal format: "RFC3339", "RFC3339Nano", "DateTime", "DateOnly", "TimeOnly". +- `now() time.Time`: Returns the current time. +- `offsetNow(offset string) time.Time`: Returns the current time with an offset. The offset can be positive or negative and must be in the format "3h" "-1h" or "2h30m10s". +- `duration(str string) time.Duration`: Parses a string such as `1h`, `24h`, `5h30m`, etc into a `time.Duration`. +- `parseTime(layout string, s string) time.Time`: Parses a string into time.Time. The layout must be provided in Go's [date format](https://pkg.go.dev/time#pkg-constants). You can alternatively use these values instead of the literal format: "unix", "RFC3339", "RFC3339Nano", "DateTime", "DateOnly". +- `parseLocalTime(layout string, s string) time.Time`: Same as the above, except in the absence of a timezone, it will use the local timezone instead of UTC. +- `parseRelativeTime(layout string, s string) time.Time`: A shorthand for `{{ .String "date" | parseTime "rfc3339" | toRelativeTime }}`. - `add(a, b float) float`: Adds two numbers. - `sub(a, b float) float`: Subtracts two numbers. - `mul(a, b float) float`: Multiplies two numbers. - `div(a, b float) float`: Divides two numbers. - `formatApproxNumber(n int) string`: Formats a number to be more human-readable, e.g. 1000 -> 1k. - `formatNumber(n float|int) string`: Formats a number with commas, e.g. 1000 -> 1,000. +- `trimPrefix(prefix string, str string) string`: Trims the prefix from a string. +- `trimSuffix(suffix string, str string) string`: Trims the suffix from a string. +- `trimSpace(str string) string`: Trims whitespace from a string on both ends. +- `replaceAll(old string, new string, str string) string`: Replaces all occurrences of a string in a string. +- `replaceMatches(pattern string, replacement string, str string) string`: Replaces all occurrences of a regular expression in a string. +- `findMatch(pattern string, str string) string`: Finds the first match of a regular expression in a string. +- `findSubmatch(pattern string, str string) string`: Finds the first submatch of a regular expression in a string. +- `sortByString(key string, order string, arr []JSON): []JSON`: Sorts an array of JSON objects by a string key in either ascending or descending order. +- `sortByInt(key string, order string, arr []JSON): []JSON`: Sorts an array of JSON objects by an integer key in either ascending or descending order. +- `sortByFloat(key string, order string, arr []JSON): []JSON`: Sorts an array of JSON objects by a float key in either ascending or descending order. +- `sortByTime(key string, layout string, order string, arr []JSON): []JSON`: Sorts an array of JSON objects by a time key in either ascending or descending order. The format must be provided in Go's [date format](https://pkg.go.dev/time#pkg-constants). +- `concat(strings ...string) string`: Concatenates multiple strings together. +- `unique(key string, arr []JSON) []JSON`: Returns a unique array of JSON objects based on the given key. The following helper functions provided by Go's `text/template` are available: diff --git a/docs/extensions.md b/docs/extensions.md index b1fa4fa..b6719c1 100644 --- a/docs/extensions.md +++ b/docs/extensions.md @@ -26,6 +26,9 @@ If you know how to setup an HTTP server and a bit of HTML and CSS you're ready t ### `Widget-Title` Used to specify the title of the widget. If not provided, the widget's title will be "Extension". +### `Widget-Title-URL` +Used to specify the URL that will be opened when the widget's title is clicked. If the user has specified a `title-url` in their config, it will take precedence over this header. + ### `Widget-Content-Type` Used to specify the content type that will be returned by the extension. If not provided, the content will be shown as plain text. diff --git a/docs/glance.yml b/docs/glance.yml index 92b4de1..35dc7cb 100644 --- a/docs/glance.yml +++ b/docs/glance.yml @@ -66,9 +66,6 @@ pages: # hide-location: true - type: markets - # The link to go to when clicking on the symbol in the UI, - # {SYMBOL} will be substituded with the symbol for each market - symbol-link-template: https://www.tradingview.com/symbols/{SYMBOL}/news markets: - symbol: SPY name: S&P 500 diff --git a/docs/images/themes/dracula.png b/docs/images/themes/dracula.png new file mode 100644 index 0000000..8dba452 Binary files /dev/null and b/docs/images/themes/dracula.png differ diff --git a/docs/themes.md b/docs/themes.md index 285b032..fdc10b2 100644 --- a/docs/themes.md +++ b/docs/themes.md @@ -82,6 +82,17 @@ theme: negative-color: 209 88 54 ``` +### Dracula +![screenshot](images/themes/dracula.png) +```yaml +theme: + background-color: 231 15 21 + primary-color: 265 89 79 + contrast-multiplier: 1.2 + positive-color: 135 94 66 + negative-color: 0 100 67 +``` + ## Light ### Catppuccin Latte diff --git a/go.mod b/go.mod index 0ded337..4c19477 100644 --- a/go.mod +++ b/go.mod @@ -1,32 +1,32 @@ module github.com/glanceapp/glance -go 1.23.6 +go 1.24.2 require ( - github.com/fsnotify/fsnotify v1.8.0 + github.com/fsnotify/fsnotify v1.9.0 github.com/mmcdole/gofeed v1.3.0 - github.com/shirou/gopsutil/v4 v4.25.1 + github.com/shirou/gopsutil/v4 v4.25.3 github.com/tidwall/gjson v1.18.0 - golang.org/x/text v0.22.0 + golang.org/x/text v0.24.0 gopkg.in/yaml.v3 v3.0.1 ) require ( - github.com/PuerkitoBio/goquery v1.10.1 // indirect + github.com/PuerkitoBio/goquery v1.10.2 // indirect github.com/andybalholm/cascadia v1.3.3 // indirect github.com/ebitengine/purego v0.8.2 // indirect github.com/go-ole/go-ole v1.3.0 // indirect github.com/json-iterator/go v1.1.12 // indirect - github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 // indirect + github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35 // indirect github.com/mmcdole/goxpp v1.1.1 // indirect github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect github.com/modern-go/reflect2 v1.0.2 // indirect github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect github.com/tidwall/match v1.1.1 // indirect github.com/tidwall/pretty v1.2.1 // indirect - github.com/tklauser/go-sysconf v0.3.14 // indirect - github.com/tklauser/numcpus v0.9.0 // indirect + github.com/tklauser/go-sysconf v0.3.15 // indirect + github.com/tklauser/numcpus v0.10.0 // indirect github.com/yusufpapurcu/wmi v1.2.4 // indirect - golang.org/x/net v0.34.0 // indirect - golang.org/x/sys v0.30.0 // indirect + golang.org/x/net v0.39.0 // indirect + golang.org/x/sys v0.32.0 // indirect ) diff --git a/go.sum b/go.sum index 97af31d..9a79559 100644 --- a/go.sum +++ b/go.sum @@ -1,5 +1,7 @@ github.com/PuerkitoBio/goquery v1.10.1 h1:Y8JGYUkXWTGRB6Ars3+j3kN0xg1YqqlwvdTV8WTFQcU= github.com/PuerkitoBio/goquery v1.10.1/go.mod h1:IYiHrOMps66ag56LEH7QYDDupKXyo5A8qrjIx3ZtujY= +github.com/PuerkitoBio/goquery v1.10.2 h1:7fh2BdHcG6VFZsK7toXBT/Bh1z5Wmy8Q9MV9HqT2AM8= +github.com/PuerkitoBio/goquery v1.10.2/go.mod h1:0guWGjcLu9AYC7C1GHnpysHy056u9aEkUHwhdnePMCU= github.com/andybalholm/cascadia v1.3.3 h1:AG2YHrzJIm4BZ19iwJ/DAua6Btl3IwJX+VI4kktS1LM= github.com/andybalholm/cascadia v1.3.3/go.mod h1:xNd9bqTn98Ln4DwST8/nG+H0yuB8Hmgu1YHNnWw0GeA= github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= @@ -9,16 +11,21 @@ github.com/ebitengine/purego v0.8.2 h1:jPPGWs2sZ1UgOSgD2bClL0MJIqu58nOmIcBuXr62z github.com/ebitengine/purego v0.8.2/go.mod h1:iIjxzd6CiRiOG0UyXP+V1+jWqUXVjPKLAI0mRfJZTmQ= github.com/fsnotify/fsnotify v1.8.0 h1:dAwr6QBTBZIkG8roQaJjGof0pp0EeF+tNV7YBP3F/8M= github.com/fsnotify/fsnotify v1.8.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0= +github.com/fsnotify/fsnotify v1.9.0 h1:2Ml+OJNzbYCTzsxtv8vKSFD9PbJjmhYF14k/jKC7S9k= +github.com/fsnotify/fsnotify v1.9.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0= github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0= github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE= github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78= github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI= github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY= +github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8= github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg= github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM= github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo= github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 h1:7UMa6KCCMjZEMDtTVdcGu0B1GmmC7QJKiCCjyTAWQy0= github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683/go.mod h1:ilwx/Dta8jXAgpFYFvSWEMwxmbWXyiUHkd5FwyKhb5k= +github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35 h1:PpXWgLPs+Fqr325bN2FD2ISlRRztXibcX6e8f5FR5Dc= +github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35/go.mod h1:autxFIvghDt3jPTLoqZ9OZ7s9qTGNAWmYCjVFWPX/zg= github.com/mmcdole/gofeed v1.3.0 h1:5yn+HeqlcvjMeAI4gu6T+crm7d0anY85+M+v6fIFNG4= github.com/mmcdole/gofeed v1.3.0/go.mod h1:9TGv2LcJhdXePDzxiuMnukhV2/zb6VtnZt1mS+SjkLE= github.com/mmcdole/goxpp v1.1.1 h1:RGIX+D6iQRIunGHrKqnA2+700XMCnNv0bAOOv5MUhx8= @@ -34,6 +41,8 @@ github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE= github.com/shirou/gopsutil/v4 v4.25.1 h1:QSWkTc+fu9LTAWfkZwZ6j8MSUk4A2LV7rbH0ZqmLjXs= github.com/shirou/gopsutil/v4 v4.25.1/go.mod h1:RoUCUpndaJFtT+2zsZzzmhvbfGoDCJ7nFXKJf8GqJbI= +github.com/shirou/gopsutil/v4 v4.25.3 h1:SeA68lsu8gLggyMbmCn8cmp97V1TI9ld9sVzAUcKcKE= +github.com/shirou/gopsutil/v4 v4.25.3/go.mod h1:xbuxyoZj+UsgnZrENu3lQivsngRR5BdjbJwf2fv4szA= github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME= github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI= github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA= @@ -47,8 +56,12 @@ github.com/tidwall/pretty v1.2.1 h1:qjsOFOWWQl+N3RsoF5/ssm1pHmJJwhjlSbZ51I6wMl4= github.com/tidwall/pretty v1.2.1/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU= github.com/tklauser/go-sysconf v0.3.14 h1:g5vzr9iPFFz24v2KZXs/pvpvh8/V9Fw6vQK5ZZb78yU= github.com/tklauser/go-sysconf v0.3.14/go.mod h1:1ym4lWMLUOhuBOPGtRcJm7tEGX4SCYNEEEtghGG/8uY= +github.com/tklauser/go-sysconf v0.3.15 h1:VE89k0criAymJ/Os65CSn1IXaol+1wrsFHEB8Ol49K4= +github.com/tklauser/go-sysconf v0.3.15/go.mod h1:Dmjwr6tYFIseJw7a3dRLJfsHAMXZ3nEnL/aZY+0IuI4= github.com/tklauser/numcpus v0.9.0 h1:lmyCHtANi8aRUgkckBgoDk1nHCux3n2cgkJLXdQGPDo= github.com/tklauser/numcpus v0.9.0/go.mod h1:SN6Nq1O3VychhC1npsWostA+oW+VOQTxZrS604NSRyI= +github.com/tklauser/numcpus v0.10.0 h1:18njr6LDBk1zuna922MgdjQuJFjrdppsZG60sHGfjso= +github.com/tklauser/numcpus v0.10.0/go.mod h1:BiTKazU708GQTYF4mB+cmlpT2Is1gLk7XVuEeem8LsQ= github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY= github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0= github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0= @@ -74,6 +87,8 @@ golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM= golang.org/x/net v0.33.0/go.mod h1:HXLR5J+9DxmrqMwG9qjGCxZ+zKXxBru04zlTvWlWuN4= golang.org/x/net v0.34.0 h1:Mb7Mrk043xzHgnRM88suvJFwzVrRfHEHJEl5/71CKw0= golang.org/x/net v0.34.0/go.mod h1:di0qlW3YNM5oh6GqDGQr92MyTozJPmybPK4Ev/Gm31k= +golang.org/x/net v0.39.0 h1:ZCu7HMWDxpXpaiKdhzIfaltL9Lp31x/3fCP11bc6/fY= +golang.org/x/net v0.39.0/go.mod h1:X7NRbYVEA+ewNkCNyJ513WmMdQ3BineSwVtN2zD/d+E= golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= @@ -97,6 +112,8 @@ golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc= golang.org/x/sys v0.30.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= +golang.org/x/sys v0.32.0 h1:s77OFDvIQeibCmezSnk/q6iAfkdiQaJi4VzroCFrN20= +golang.org/x/sys v0.32.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k= golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE= golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo= golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8= @@ -117,6 +134,8 @@ golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU= golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ= golang.org/x/text v0.22.0 h1:bofq7m3/HAFvbF51jz3Q9wLg3jkvSPuiZu/pD1XwgtM= golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY= +golang.org/x/text v0.24.0 h1:dd5Bzh4yt5KYA8f9CJHCP4FB4D51c2c6JvN37xJJkJ0= +golang.org/x/text v0.24.0/go.mod h1:L8rBsPeo2pSS+xqN0d5u2ikmjtmoJbDBT1b7nHvFCdU= golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ= golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo= golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc= diff --git a/internal/glance/cli.go b/internal/glance/cli.go index e231706..0a76e66 100644 --- a/internal/glance/cli.go +++ b/internal/glance/cli.go @@ -5,23 +5,39 @@ import ( "fmt" "os" "strings" + + "github.com/shirou/gopsutil/v4/disk" + "github.com/shirou/gopsutil/v4/sensors" ) type cliIntent uint8 const ( - cliIntentServe cliIntent = iota - cliIntentConfigValidate = iota - cliIntentConfigPrint = iota - cliIntentDiagnose = iota + cliIntentVersionPrint cliIntent = iota + cliIntentServe + cliIntentConfigValidate + cliIntentConfigPrint + cliIntentDiagnose + cliIntentSensorsPrint + cliIntentMountpointInfo ) type cliOptions struct { intent cliIntent configPath string + args []string } func parseCliOptions() (*cliOptions, error) { + var args []string + + args = os.Args[1:] + if len(args) == 1 && (args[0] == "--version" || args[0] == "-v" || args[0] == "version") { + return &cliOptions{ + intent: cliIntentVersionPrint, + }, nil + } + flags := flag.NewFlagSet("", flag.ExitOnError) flags.Usage = func() { fmt.Println("Usage: glance [options] command") @@ -32,6 +48,8 @@ func parseCliOptions() (*cliOptions, error) { fmt.Println("\nCommands:") fmt.Println(" config:validate Validate the config file") fmt.Println(" config:print Print the parsed config file with embedded includes") + fmt.Println(" sensors:print List all sensors") + fmt.Println(" mountpoint:info Print information about a given mountpoint path") fmt.Println(" diagnose Run diagnostic checks") } configPath := flags.String("config", "glance.yml", "Set config path") @@ -41,7 +59,7 @@ func parseCliOptions() (*cliOptions, error) { } var intent cliIntent - var args = flags.Args() + args = flags.Args() unknownCommandErr := fmt.Errorf("unknown command: %s", strings.Join(args, " ")) if len(args) == 0 { @@ -51,11 +69,19 @@ func parseCliOptions() (*cliOptions, error) { intent = cliIntentConfigValidate } else if args[0] == "config:print" { intent = cliIntentConfigPrint + } else if args[0] == "sensors:print" { + intent = cliIntentSensorsPrint } else if args[0] == "diagnose" { intent = cliIntentDiagnose } else { return nil, unknownCommandErr } + } else if len(args) == 2 { + if args[0] == "mountpoint:info" { + intent = cliIntentMountpointInfo + } else { + return nil, unknownCommandErr + } } else { return nil, unknownCommandErr } @@ -63,5 +89,54 @@ func parseCliOptions() (*cliOptions, error) { return &cliOptions{ intent: intent, configPath: *configPath, + args: args, }, nil } + +func cliSensorsPrint() int { + tempSensors, err := sensors.SensorsTemperatures() + if err != nil { + if warns, ok := err.(*sensors.Warnings); ok { + fmt.Printf("Could not retrieve information for some sensors (%v):\n", err) + for _, w := range warns.List { + fmt.Printf(" - %v\n", w) + } + fmt.Println() + } else { + fmt.Printf("Failed to retrieve sensor information: %v\n", err) + return 1 + } + } + + if len(tempSensors) == 0 { + fmt.Println("No sensors found") + return 0 + } + + fmt.Println("Sensors found:") + for _, sensor := range tempSensors { + fmt.Printf(" %s: %.1f°C\n", sensor.SensorKey, sensor.Temperature) + } + + return 0 +} + +func cliMountpointInfo(requestedPath string) int { + usage, err := disk.Usage(requestedPath) + if err != nil { + fmt.Printf("Failed to retrieve info for path %s: %v\n", requestedPath, err) + if warns, ok := err.(*disk.Warnings); ok { + for _, w := range warns.List { + fmt.Printf(" - %v\n", w) + } + } + + return 1 + } + + fmt.Println("Path:", usage.Path) + fmt.Println("FS type:", ternary(usage.Fstype == "", "unknown", usage.Fstype)) + fmt.Printf("Used percent: %.1f%%\n", usage.UsedPercent) + + return 0 +} diff --git a/internal/glance/config-fields.go b/internal/glance/config-fields.go index e2ece3f..5ca6fb6 100644 --- a/internal/glance/config-fields.go +++ b/internal/glance/config-fields.go @@ -3,6 +3,7 @@ package glance import ( "crypto/tls" "fmt" + "html/template" "net/http" "net/url" "regexp" @@ -13,7 +14,7 @@ import ( "gopkg.in/yaml.v3" ) -var hslColorFieldPattern = regexp.MustCompile(`^(?:hsla?\()?(\d{1,3})(?: |,)+(\d{1,3})%?(?: |,)+(\d{1,3})%?\)?$`) +var hslColorFieldPattern = regexp.MustCompile(`^(?:hsla?\()?([\d\.]+)(?: |,)+([\d\.]+)%?(?: |,)+([\d\.]+)%?\)?$`) const ( hslHueMax = 360 @@ -22,13 +23,17 @@ const ( ) type hslColorField struct { - Hue uint16 - Saturation uint8 - Lightness uint8 + Hue float64 + Saturation float64 + Lightness float64 } func (c *hslColorField) String() string { - return fmt.Sprintf("hsl(%d, %d%%, %d%%)", c.Hue, c.Saturation, c.Lightness) + return fmt.Sprintf("hsl(%.1f, %.1f%%, %.1f%%)", c.Hue, c.Saturation, c.Lightness) +} + +func (c *hslColorField) ToHex() string { + return hslToHex(c.Hue, c.Saturation, c.Lightness) } func (c *hslColorField) UnmarshalYAML(node *yaml.Node) error { @@ -44,7 +49,7 @@ func (c *hslColorField) UnmarshalYAML(node *yaml.Node) error { return fmt.Errorf("invalid HSL color format: %s", value) } - hue, err := strconv.ParseUint(matches[1], 10, 16) + hue, err := strconv.ParseFloat(matches[1], 64) if err != nil { return err } @@ -53,7 +58,7 @@ func (c *hslColorField) UnmarshalYAML(node *yaml.Node) error { return fmt.Errorf("HSL hue must be between 0 and %d", hslHueMax) } - saturation, err := strconv.ParseUint(matches[2], 10, 8) + saturation, err := strconv.ParseFloat(matches[2], 64) if err != nil { return err } @@ -62,7 +67,7 @@ func (c *hslColorField) UnmarshalYAML(node *yaml.Node) error { return fmt.Errorf("HSL saturation must be between 0 and %d", hslSaturationMax) } - lightness, err := strconv.ParseUint(matches[3], 10, 8) + lightness, err := strconv.ParseFloat(matches[3], 64) if err != nil { return err } @@ -71,9 +76,9 @@ func (c *hslColorField) UnmarshalYAML(node *yaml.Node) error { return fmt.Errorf("HSL lightness must be between 0 and %d", hslLightnessMax) } - c.Hue = uint16(hue) - c.Saturation = uint8(saturation) - c.Lightness = uint8(lightness) + c.Hue = hue + c.Saturation = saturation + c.Lightness = lightness return nil } @@ -115,7 +120,7 @@ func (d *durationField) UnmarshalYAML(node *yaml.Node) error { } type customIconField struct { - URL string + URL template.URL IsFlatIcon bool // TODO: along with whether the icon is flat, we also need to know // whether the icon is black or white by default in order to properly @@ -127,13 +132,13 @@ func newCustomIconField(value string) customIconField { prefix, icon, found := strings.Cut(value, ":") if !found { - field.URL = value + field.URL = template.URL(value) return field } switch prefix { case "si": - field.URL = "https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/" + icon + ".svg" + field.URL = template.URL("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/" + icon + ".svg") field.IsFlatIcon = true case "di", "sh": // syntax: di:[.svg|.png] @@ -152,12 +157,12 @@ func newCustomIconField(value string) customIconField { } if prefix == "di" { - field.URL = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/" + ext + "/" + basename + "." + ext + field.URL = template.URL("https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/" + ext + "/" + basename + "." + ext) } else { - field.URL = "https://cdn.jsdelivr.net/gh/selfhst/icons/" + ext + "/" + basename + "." + ext + field.URL = template.URL("https://cdn.jsdelivr.net/gh/selfhst/icons/" + ext + "/" + basename + "." + ext) } default: - field.URL = value + field.URL = template.URL(value) } return field diff --git a/internal/glance/config.go b/internal/glance/config.go index 5a1af22..ea67f5f 100644 --- a/internal/glance/config.go +++ b/internal/glance/config.go @@ -19,13 +19,18 @@ import ( const CONFIG_INCLUDE_RECURSION_DEPTH_LIMIT = 20 +const ( + configVarTypeEnv = "env" + configVarTypeSecret = "secret" + configVarTypeFileFromEnv = "readFileFromEnv" +) + type config struct { Server struct { - Host string `yaml:"host"` - Port uint16 `yaml:"port"` - AssetsPath string `yaml:"assets-path"` - BaseURL string `yaml:"base-url"` - StartedAt time.Time `yaml:"-"` // used in custom css file + Host string `yaml:"host"` + Port uint16 `yaml:"port"` + AssetsPath string `yaml:"assets-path"` + BaseURL string `yaml:"base-url"` } `yaml:"server"` Document struct { @@ -34,6 +39,7 @@ type config struct { Theme struct { BackgroundColor *hslColorField `yaml:"background-color"` + BackgroundColorAsHex string `yaml:"-"` PrimaryColor *hslColorField `yaml:"primary-color"` PositiveColor *hslColorField `yaml:"positive-color"` NegativeColor *hslColorField `yaml:"negative-color"` @@ -44,11 +50,14 @@ type config struct { } `yaml:"theme"` Branding struct { - HideFooter bool `yaml:"hide-footer"` - CustomFooter template.HTML `yaml:"custom-footer"` - LogoText string `yaml:"logo-text"` - LogoURL string `yaml:"logo-url"` - FaviconURL string `yaml:"favicon-url"` + HideFooter bool `yaml:"hide-footer"` + CustomFooter template.HTML `yaml:"custom-footer"` + LogoText string `yaml:"logo-text"` + LogoURL string `yaml:"logo-url"` + FaviconURL string `yaml:"favicon-url"` + AppName string `yaml:"app-name"` + AppIconURL string `yaml:"app-icon-url"` + AppBackgroundColor string `yaml:"app-background-color"` } `yaml:"branding"` Pages []page `yaml:"pages"` @@ -58,6 +67,7 @@ type page struct { Title string `yaml:"name"` Slug string `yaml:"slug"` Width string `yaml:"width"` + DesktopNavigationWidth string `yaml:"desktop-navigation-width"` ShowMobileHeader bool `yaml:"show-mobile-header"` ExpandMobilePageNavigation bool `yaml:"expand-mobile-page-navigation"` HideDesktopNavigation bool `yaml:"hide-desktop-navigation"` @@ -71,7 +81,7 @@ type page struct { } func newConfigFromYAML(contents []byte) (*config, error) { - contents, err := parseConfigEnvVariables(contents) + contents, err := parseConfigVariables(contents) if err != nil { return nil, err } @@ -101,23 +111,33 @@ func newConfigFromYAML(contents []byte) (*config, error) { return config, nil } -// TODO: change the pattern so that it doesn't match commented out lines -var configEnvVariablePattern = regexp.MustCompile(`(^|.)\$\{([A-Z0-9_]+)\}`) +var envVariableNamePattern = regexp.MustCompile(`^[A-Z0-9_]+$`) +var configVariablePattern = regexp.MustCompile(`(^|.)\$\{(?:([a-zA-Z]+):)?([a-zA-Z0-9_-]+)\}`) -func parseConfigEnvVariables(contents []byte) ([]byte, error) { +// Parses variables defined in the config such as: +// ${API_KEY} - gets replaced with the value of the API_KEY environment variable +// \${API_KEY} - escaped, gets used as is without the \ in the config +// ${secret:api_key} - value gets loaded from /run/secrets/api_key +// ${readFileFromEnv:PATH_TO_SECRET} - value gets loaded from the file path specified in the environment variable PATH_TO_SECRET +// +// TODO: don't match against commented out sections, not sure exactly how since +// variables can be placed anywhere and used to modify the YAML structure itself +func parseConfigVariables(contents []byte) ([]byte, error) { var err error - replaced := configEnvVariablePattern.ReplaceAllFunc(contents, func(match []byte) []byte { + replaced := configVariablePattern.ReplaceAllFunc(contents, func(match []byte) []byte { if err != nil { return nil } - groups := configEnvVariablePattern.FindSubmatch(match) - if len(groups) != 3 { + groups := configVariablePattern.FindSubmatch(match) + if len(groups) != 4 { + // we can't handle this match, this shouldn't happen unless the number of groups + // in the regex has been changed without updating the below code return match } - prefix, key := string(groups[1]), string(groups[2]) + prefix := string(groups[1]) if prefix == `\` { if len(match) >= 2 { return match[1:] @@ -126,13 +146,20 @@ func parseConfigEnvVariables(contents []byte) ([]byte, error) { } } - value, found := os.LookupEnv(key) - if !found { - err = fmt.Errorf("environment variable %s not found", key) + typeAsString, variableName := string(groups[2]), string(groups[3]) + variableType := ternary(typeAsString == "", configVarTypeEnv, typeAsString) + + parsedValue, returnOriginal, localErr := parseConfigVariableOfType(variableType, variableName) + if localErr != nil { + err = fmt.Errorf("parsing variable: %v", localErr) return nil } - return []byte(prefix + value) + if returnOriginal { + return match + } + + return []byte(prefix + parsedValue) }) if err != nil { @@ -142,11 +169,58 @@ func parseConfigEnvVariables(contents []byte) ([]byte, error) { return replaced, nil } +// When the bool return value is true, it indicates that the caller should use the original value +func parseConfigVariableOfType(variableType, variableName string) (string, bool, error) { + switch variableType { + case configVarTypeEnv: + if !envVariableNamePattern.MatchString(variableName) { + return "", true, nil + } + + v, found := os.LookupEnv(variableName) + if !found { + return "", false, fmt.Errorf("environment variable %s not found", variableName) + } + + return v, false, nil + case configVarTypeSecret: + secretPath := filepath.Join("/run/secrets", variableName) + secret, err := os.ReadFile(secretPath) + if err != nil { + return "", false, fmt.Errorf("reading secret file: %v", err) + } + + return strings.TrimSpace(string(secret)), false, nil + case configVarTypeFileFromEnv: + if !envVariableNamePattern.MatchString(variableName) { + return "", true, nil + } + + filePath, found := os.LookupEnv(variableName) + if !found { + return "", false, fmt.Errorf("readFileFromEnv: environment variable %s not found", variableName) + } + + if !filepath.IsAbs(filePath) { + return "", false, fmt.Errorf("readFileFromEnv: file path %s is not absolute", filePath) + } + + fileContents, err := os.ReadFile(filePath) + if err != nil { + return "", false, fmt.Errorf("readFileFromEnv: reading file from %s: %v", variableName, err) + } + + return strings.TrimSpace(string(fileContents)), false, nil + default: + return "", true, nil + } +} + func formatWidgetInitError(err error, w widget) error { return fmt.Errorf("%s widget: %v", w.GetType(), err) } -var includePattern = regexp.MustCompile(`(?m)^([ \t]*)(?:-[ \t]*)?(?:!|\$)include:[ \t]*(.+)$`) +var configIncludePattern = regexp.MustCompile(`(?m)^([ \t]*)(?:-[ \t]*)?(?:!|\$)include:[ \t]*(.+)$`) func parseYAMLIncludes(mainFilePath string) ([]byte, map[string]struct{}, error) { return recursiveParseYAMLIncludes(mainFilePath, nil, 0) @@ -173,12 +247,12 @@ func recursiveParseYAMLIncludes(mainFilePath string, includes map[string]struct{ } var includesLastErr error - mainFileContents = includePattern.ReplaceAllFunc(mainFileContents, func(match []byte) []byte { + mainFileContents = configIncludePattern.ReplaceAllFunc(mainFileContents, func(match []byte) []byte { if includesLastErr != nil { return nil } - matches := includePattern.FindSubmatch(match) + matches := configIncludePattern.FindSubmatch(match) if len(matches) != 3 { includesLastErr = fmt.Errorf("invalid include match: %v", matches) return nil @@ -365,36 +439,46 @@ func isConfigStateValid(config *config) error { } for i := range config.Pages { - if config.Pages[i].Title == "" { + page := &config.Pages[i] + + if page.Title == "" { return fmt.Errorf("page %d has no name", i+1) } - if config.Pages[i].Width != "" && (config.Pages[i].Width != "wide" && config.Pages[i].Width != "slim") { + if page.Width != "" && (page.Width != "wide" && page.Width != "slim" && page.Width != "default") { return fmt.Errorf("page %d: width can only be either wide or slim", i+1) } - if len(config.Pages[i].Columns) == 0 { + if page.DesktopNavigationWidth != "" { + if page.DesktopNavigationWidth != "wide" && page.DesktopNavigationWidth != "slim" && page.DesktopNavigationWidth != "default" { + return fmt.Errorf("page %d: desktop-navigation-width can only be either wide or slim", i+1) + } + } + + if len(page.Columns) == 0 { return fmt.Errorf("page %d has no columns", i+1) } - if config.Pages[i].Width == "slim" { - if len(config.Pages[i].Columns) > 2 { + if page.Width == "slim" { + if len(page.Columns) > 2 { return fmt.Errorf("page %d is slim and cannot have more than 2 columns", i+1) } } else { - if len(config.Pages[i].Columns) > 3 { + if len(page.Columns) > 3 { return fmt.Errorf("page %d has more than 3 columns", i+1) } } columnSizesCount := make(map[string]int) - for j := range config.Pages[i].Columns { - if config.Pages[i].Columns[j].Size != "small" && config.Pages[i].Columns[j].Size != "full" { + for j := range page.Columns { + column := &page.Columns[j] + + if column.Size != "small" && column.Size != "full" { return fmt.Errorf("column %d of page %d: size can only be either small or full", j+1, i+1) } - columnSizesCount[config.Pages[i].Columns[j].Size]++ + columnSizesCount[page.Columns[j].Size]++ } full := columnSizesCount["full"] diff --git a/internal/glance/diagnose.go b/internal/glance/diagnose.go index 892aa5f..1ee1bc3 100644 --- a/internal/glance/diagnose.go +++ b/internal/glance/diagnose.go @@ -81,7 +81,9 @@ var diagnosticSteps = []diagnosticStep{ { name: "fetch data from Yahoo finance API", fn: func() (string, error) { - return testHttpRequest("GET", "https://query1.finance.yahoo.com/v8/finance/chart/NVDA", 200) + return testHttpRequestWithHeaders("GET", "https://query1.finance.yahoo.com/v8/finance/chart/NVDA", map[string]string{ + "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0", + }, 200) }, }, { @@ -103,7 +105,7 @@ func runDiagnostic() { fmt.Println("Glance version: " + buildVersion) fmt.Println("Go version: " + runtime.Version()) fmt.Printf("Platform: %s / %s / %d CPUs\n", runtime.GOOS, runtime.GOARCH, runtime.NumCPU()) - fmt.Println("In Docker container: " + boolToString(isRunningInsideDockerContainer(), "yes", "no")) + fmt.Println("In Docker container: " + ternary(isRunningInsideDockerContainer(), "yes", "no")) fmt.Printf("\nChecking network connectivity, this may take up to %d seconds...\n\n", int(httpTestRequestTimeout.Seconds())) @@ -129,7 +131,7 @@ func runDiagnostic() { fmt.Printf( "%s %s %s| %dms\n", - boolToString(step.err == nil, "✓ Can", "✗ Can't"), + ternary(step.err == nil, "✓ Can", "✗ Can't"), step.name, extraInfo, step.elapsed.Milliseconds(), diff --git a/internal/glance/embed.go b/internal/glance/embed.go index 7bb07c9..3d0db8c 100644 --- a/internal/glance/embed.go +++ b/internal/glance/embed.go @@ -1,13 +1,19 @@ package glance import ( + "bytes" "crypto/md5" "embed" "encoding/hex" + "errors" + "fmt" "io" "io/fs" "log" + "path/filepath" + "regexp" "strconv" + "strings" "time" ) @@ -20,6 +26,19 @@ var _templateFS embed.FS var staticFS, _ = fs.Sub(_staticFS, "static") var templateFS, _ = fs.Sub(_templateFS, "templates") +func readAllFromStaticFS(path string) ([]byte, error) { + // For some reason fs.FS only works with forward slashes, so in case we're + // running on Windows or pass paths with backslashes we need to replace them. + path = strings.ReplaceAll(path, "\\", "/") + + file, err := staticFS.Open(path) + if err != nil { + return nil, err + } + + return io.ReadAll(file) +} + var staticFSHash = func() string { hash, err := computeFSHash(staticFS) if err != nil { @@ -60,3 +79,74 @@ func computeFSHash(files fs.FS) (string, error) { return hex.EncodeToString(hash.Sum(nil))[:10], nil } + +var cssImportPattern = regexp.MustCompile(`(?m)^@import "(.*?)";$`) +var cssSingleLineCommentPattern = regexp.MustCompile(`(?m)^\s*\/\*.*?\*\/$`) +var whitespaceAtBeginningOfLinePattern = regexp.MustCompile(`(?m)^\s+`) + +// Yes, we bundle at runtime, give comptime pls +var bundledCSSContents = func() []byte { + const mainFilePath = "css/main.css" + + var recursiveParseImports func(path string, depth int) ([]byte, error) + recursiveParseImports = func(path string, depth int) ([]byte, error) { + if depth > 20 { + return nil, errors.New("maximum import depth reached, is one of your imports circular?") + } + + mainFileContents, err := readAllFromStaticFS(path) + if err != nil { + return nil, err + } + + // Normalize line endings, otherwise the \r's make the regex not match + mainFileContents = bytes.ReplaceAll(mainFileContents, []byte("\r\n"), []byte("\n")) + + mainFileDir := filepath.Dir(path) + var importLastErr error + + parsed := cssImportPattern.ReplaceAllFunc(mainFileContents, func(match []byte) []byte { + if importLastErr != nil { + return nil + } + + matches := cssImportPattern.FindSubmatch(match) + if len(matches) != 2 { + importLastErr = fmt.Errorf( + "import didn't return expected number of capture groups: %s, expected 2, got %d", + match, len(matches), + ) + return nil + } + + importFilePath := filepath.Join(mainFileDir, string(matches[1])) + importContents, err := recursiveParseImports(importFilePath, depth+1) + if err != nil { + importLastErr = err + return nil + } + + return importContents + }) + + if importLastErr != nil { + return nil, importLastErr + } + + return parsed, nil + } + + contents, err := recursiveParseImports(mainFilePath, 0) + if err != nil { + panic(fmt.Sprintf("building CSS bundle: %v", err)) + } + + // We could strip a bunch more unnecessary characters, but the biggest + // win comes from removing the whitespace at the beginning of lines + // since that's at least 4 bytes per property, which yielded a ~20% reduction. + contents = cssSingleLineCommentPattern.ReplaceAll(contents, nil) + contents = whitespaceAtBeginningOfLinePattern.ReplaceAll(contents, nil) + contents = bytes.ReplaceAll(contents, []byte("\n"), []byte("")) + + return contents +}() diff --git a/internal/glance/glance.go b/internal/glance/glance.go index 8fb3e40..d2fad40 100644 --- a/internal/glance/glance.go +++ b/internal/glance/glance.go @@ -18,13 +18,19 @@ var ( pageTemplate = mustParseTemplate("page.html", "document.html") pageContentTemplate = mustParseTemplate("page-content.html") pageThemeStyleTemplate = mustParseTemplate("theme-style.gotmpl") + manifestTemplate = mustParseTemplate("manifest.json") ) +const STATIC_ASSETS_CACHE_DURATION = 24 * time.Hour + type application struct { Version string + CreatedAt time.Time Config config ParsedThemeStyle template.HTML + parsedManifest []byte + slugToPage map[string]*page widgetByID map[uint64]widget } @@ -32,6 +38,7 @@ type application struct { func newApplication(config *config) (*application, error) { app := &application{ Version: buildVersion, + CreatedAt: time.Now(), Config: *config, slugToPage: make(map[string]*page), widgetByID: make(map[uint64]widget), @@ -40,7 +47,7 @@ func newApplication(config *config) (*application, error) { app.slugToPage[""] = &config.Pages[0] providers := &widgetProviders{ - assetResolver: app.AssetPath, + assetResolver: app.StaticAssetPath, } var err error @@ -59,6 +66,14 @@ func newApplication(config *config) (*application, error) { app.slugToPage[page.Slug] = page + if page.Width == "default" { + page.Width = "" + } + + if page.DesktopNavigationWidth == "" && page.DesktopNavigationWidth != "default" { + page.DesktopNavigationWidth = page.Width + } + for c := range page.Columns { column := &page.Columns[c] @@ -78,15 +93,38 @@ func newApplication(config *config) (*application, error) { config = &app.Config config.Server.BaseURL = strings.TrimRight(config.Server.BaseURL, "/") - config.Theme.CustomCSSFile = app.transformUserDefinedAssetPath(config.Theme.CustomCSSFile) + config.Theme.CustomCSSFile = app.resolveUserDefinedAssetPath(config.Theme.CustomCSSFile) + config.Branding.LogoURL = app.resolveUserDefinedAssetPath(config.Branding.LogoURL) - if config.Branding.FaviconURL == "" { - config.Branding.FaviconURL = app.AssetPath("favicon.png") + if config.Theme.BackgroundColor != nil { + config.Theme.BackgroundColorAsHex = config.Theme.BackgroundColor.ToHex() } else { - config.Branding.FaviconURL = app.transformUserDefinedAssetPath(config.Branding.FaviconURL) + config.Theme.BackgroundColorAsHex = "#151519" } - config.Branding.LogoURL = app.transformUserDefinedAssetPath(config.Branding.LogoURL) + if config.Branding.FaviconURL == "" { + config.Branding.FaviconURL = app.StaticAssetPath("favicon.png") + } else { + config.Branding.FaviconURL = app.resolveUserDefinedAssetPath(config.Branding.FaviconURL) + } + + if config.Branding.AppName == "" { + config.Branding.AppName = "Glance" + } + + if config.Branding.AppIconURL == "" { + config.Branding.AppIconURL = app.StaticAssetPath("app-icon.png") + } + + if config.Branding.AppBackgroundColor == "" { + config.Branding.AppBackgroundColor = config.Theme.BackgroundColorAsHex + } + + var manifestWriter bytes.Buffer + if err := manifestTemplate.Execute(&manifestWriter, pageTemplateData{App: app}); err != nil { + return nil, fmt.Errorf("parsing manifest.json: %v", err) + } + app.parsedManifest = manifestWriter.Bytes() return app, nil } @@ -116,7 +154,7 @@ func (p *page) updateOutdatedWidgets() { wg.Wait() } -func (a *application) transformUserDefinedAssetPath(path string) string { +func (a *application) resolveUserDefinedAssetPath(path string) string { if strings.HasPrefix(path, "/assets/") { return a.Config.Server.BaseURL + path } @@ -210,10 +248,15 @@ func (a *application) handleWidgetRequest(w http.ResponseWriter, r *http.Request widget.handleRequest(w, r) } -func (a *application) AssetPath(asset string) string { +func (a *application) StaticAssetPath(asset string) string { return a.Config.Server.BaseURL + "/static/" + staticFSHash + "/" + asset } +func (a *application) VersionedAssetPath(asset string) string { + return a.Config.Server.BaseURL + asset + + "?v=" + strconv.FormatInt(a.CreatedAt.Unix(), 10) +} + func (a *application) server() (func() error, func() error) { // TODO: add gzip support, static files must have their gzipped contents cached // TODO: add HTTPS support @@ -230,9 +273,29 @@ func (a *application) server() (func() error, func() error) { mux.Handle( fmt.Sprintf("GET /static/%s/{path...}", staticFSHash), - http.StripPrefix("/static/"+staticFSHash, fileServerWithCache(http.FS(staticFS), 24*time.Hour)), + http.StripPrefix( + "/static/"+staticFSHash, + fileServerWithCache(http.FS(staticFS), STATIC_ASSETS_CACHE_DURATION), + ), ) + assetCacheControlValue := fmt.Sprintf( + "public, max-age=%d", + int(STATIC_ASSETS_CACHE_DURATION.Seconds()), + ) + + mux.HandleFunc(fmt.Sprintf("GET /static/%s/css/bundle.css", staticFSHash), func(w http.ResponseWriter, r *http.Request) { + w.Header().Add("Cache-Control", assetCacheControlValue) + w.Header().Add("Content-Type", "text/css; charset=utf-8") + w.Write(bundledCSSContents) + }) + + mux.HandleFunc("GET /manifest.json", func(w http.ResponseWriter, r *http.Request) { + w.Header().Add("Cache-Control", assetCacheControlValue) + w.Header().Add("Content-Type", "application/json") + w.Write(a.parsedManifest) + }) + var absAssetsPath string if a.Config.Server.AssetsPath != "" { absAssetsPath, _ = filepath.Abs(a.Config.Server.AssetsPath) @@ -246,7 +309,6 @@ func (a *application) server() (func() error, func() error) { } start := func() error { - a.Config.Server.StartedAt = time.Now() log.Printf("Starting server on %s:%d (base-url: \"%s\", assets-path: \"%s\")\n", a.Config.Server.Host, a.Config.Server.Port, diff --git a/internal/glance/main.go b/internal/glance/main.go index baac315..67a980c 100644 --- a/internal/glance/main.go +++ b/internal/glance/main.go @@ -18,6 +18,8 @@ func Main() int { } switch options.intent { + case cliIntentVersionPrint: + fmt.Println(buildVersion) case cliIntentServe: // remove in v0.10.0 if serveUpdateNoticeIfConfigLocationNotMigrated(options.configPath) { @@ -47,6 +49,10 @@ func Main() int { } fmt.Println(string(contents)) + case cliIntentSensorsPrint: + return cliSensorsPrint() + case cliIntentMountpointInfo: + return cliMountpointInfo(options.args[1]) case cliIntentDiagnose: runDiagnostic() } diff --git a/internal/glance/static/css/forum-posts.css b/internal/glance/static/css/forum-posts.css new file mode 100644 index 0000000..e58ac6e --- /dev/null +++ b/internal/glance/static/css/forum-posts.css @@ -0,0 +1,19 @@ +.forum-post-list-thumbnail { + flex-shrink: 0; + width: 6rem; + height: 4.1rem; + border-radius: var(--border-radius); + object-fit: cover; + border: 1px solid var(--color-separator); + margin-top: 0.1rem; +} + +.forum-post-tags-container { + transform: translateY(-0.15rem); +} + +@container widget (max-width: 550px) { + .forum-post-autohide { + display: none; + } +} diff --git a/internal/glance/static/css/main.css b/internal/glance/static/css/main.css new file mode 100644 index 0000000..8d0d779 --- /dev/null +++ b/internal/glance/static/css/main.css @@ -0,0 +1,66 @@ +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); +} + +:root { + font-size: 10px; + + --scheme: ; + --bgh: 240; + --bgs: 8%; + --bgl: 9%; + --bghs: var(--bgh), var(--bgs); + --cm: 1; + --tsm: 1; + + --widget-gap: 23px; + --widget-content-vertical-padding: 15px; + --widget-content-horizontal-padding: 17px; + --widget-content-padding: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); + --content-bounds-padding: 15px; + --border-radius: 5px; + --mobile-navigation-height: 50px; + + --color-primary: hsl(43, 50%, 70%); + --color-positive: var(--color-primary); + --color-negative: hsl(0, 70%, 70%); + --color-background: hsl(var(--bghs), var(--bgl)); + --color-widget-background-hsl-values: var(--bghs), calc(var(--bgl) + 1%); + --color-widget-background: hsl(var(--color-widget-background-hsl-values)); + --color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm)))); + --color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); + --color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); + --color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%)); + --color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%))); + --color-progress-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm)))); + --color-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 26% * var(--cm)))); + --color-vertical-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 28% * var(--cm)))); + --color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm)))); + + --ths: var(--bgh), calc(var(--bgs) * var(--tsm)); + --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%)); + --color-text-paragraph: hsl(var(--ths), calc(var(--scheme) var(--cm) * 73%)); + --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-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%)); + + --font-size-h1: 1.7rem; + --font-size-h2: 1.6rem; + --font-size-h3: 1.5rem; + --font-size-h4: 1.4rem; + --font-size-base: 1.3rem; + --font-size-h5: 1.2rem; + --font-size-h6: 1.1rem; +} + +/* Do not change the order of the below imports unless you know what you're doing */ + +@import "site.css"; +@import "widgets.css"; +@import "popover.css"; +@import "utils.css"; +@import "mobile.css"; diff --git a/internal/glance/static/css/mobile.css b/internal/glance/static/css/mobile.css new file mode 100644 index 0000000..73b0d39 --- /dev/null +++ b/internal/glance/static/css/mobile.css @@ -0,0 +1,223 @@ +@media (max-width: 1190px) { + .header-container { + display: none; + } + + .page-column-small .size-title-dynamic { + font-size: var(--font-size-h3); + } + + .page-column-small { + width: 100%; + flex-shrink: 1; + } + + .page-column { + display: none; + animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards; + } + + .page-columns-transitioned .page-column { + animation-duration: .3s; + } + + @keyframes columnEntrance { + from { + opacity: 0; + transform: scaleX(0.95); + } + } + + .mobile-navigation-offset { + height: var(--mobile-navigation-height); + flex-shrink: 0; + } + + .mobile-navigation { + display: block; + position: fixed; + bottom: 0; + transform: translateY(calc(100% - var(--mobile-navigation-height))); + left: var(--content-bounds-padding); + right: var(--content-bounds-padding); + z-index: 11; + 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; + } + + .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .hamburger-icon { + --spacing: 7px; + color: var(--color-primary); + 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: 20px var(--content-bounds-padding); + display: flex; + align-items: center; + overflow-x: auto; + scrollbar-width: thin; + gap: 2.5rem; + } + + .mobile-navigation-icons { + display: flex; + justify-content: space-around; + align-items: center; + } + + body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1), + body:has(.mobile-navigation-input[value="1"]:checked) .page-columns > :nth-child(2), + body:has(.mobile-navigation-input[value="2"]:checked) .page-columns > :nth-child(3) { + display: block; + } + + .mobile-navigation-label { + display: flex; + flex: 1; + 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 { + display: block; + background: var(--color-text-base); + height: 10px; + width: 10px; + border-radius: 10px; + transition: width .3s, background-color .3s; + } + + .mobile-navigation-label:hover > .mobile-navigation-pill { + background-color: var(--color-text-highlight); + } + + .mobile-navigation-label:hover { + color: var(--color-text-highlight); + } + + .mobile-navigation-input:checked + .mobile-navigation-pill { + background: var(--color-primary); + width: 30px; + } + + .mobile-navigation-input, .mobile-navigation-page-links-input { + display: none; + } + + .hamburger-icon { + --spacing: 4px; + width: 1em; + height: 1px; + background-color: currentColor; + transition: color .3s, box-shadow .3s; + box-shadow: 0 calc(var(--spacing) * -1) 0 0 currentColor, 0 var(--spacing) 0 0 currentColor; + } + + .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); + } + + .weather-column-rain::before { + background-size: 7px 7px; + } + + .ios .search-input { + /* so that iOS Safari does not zoom the page when the input is focused */ + font-size: 16px; + } +} + +@media (max-width: 1190px) and (display-mode: standalone) { + :root { + --safe-area-inset-bottom: env(safe-area-inset-bottom, 0); + } + + .ios .body-content { + height: 100dvh; + } + + .expand-toggle-button.container-expanded { + 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); + } + + .mobile-navigation-icons { + padding-bottom: var(--safe-area-inset-bottom); + transition: padding-bottom .3s; + } + + .mobile-navigation-offset { + height: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); + } + + .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: 9.4px; + --widget-gap: 15px; + --widget-content-vertical-padding: 10px; + --widget-content-horizontal-padding: 10px; + --content-bounds-padding: 10px; + } + + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + + .row-reverse-on-mobile { + flex-direction: row-reverse; + } + + .hide-on-mobile, .thumbnail-container:has(> .hide-on-mobile) { + display: none + } + + .mobile-reachability-header { + display: block; + font-size: 3rem; + padding: 10vh 1rem; + text-align: center; + 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 { + line-clamp: 3; + -webkit-line-clamp: 3; + } +} diff --git a/internal/glance/static/css/popover.css b/internal/glance/static/css/popover.css new file mode 100644 index 0000000..232f29c --- /dev/null +++ b/internal/glance/static/css/popover.css @@ -0,0 +1,65 @@ +.popover-container, [data-popover-html] { + display: none; +} + +.popover-container { + --triangle-size: 10px; + --triangle-offset: 50%; + --triangle-margin: calc(var(--triangle-size) + 3px); + --entrance-y-offset: 8px; + --entrance-direction: calc(var(--entrance-y-offset) * -1); + + z-index: 20; + position: absolute; + padding-top: var(--triangle-margin); + padding-inline: var(--content-bounds-padding); +} + +.popover-container.position-above { + --entrance-direction: var(--entrance-y-offset); + padding-top: 0; + padding-bottom: var(--triangle-margin); +} + +.popover-frame { + --shadow-properties: 0 15px 20px -10px; + --shadow-color: hsla(var(--bghs), calc(var(--bgl) * 0.2), 0.5); + position: relative; + padding: 10px; + background: var(--color-popover-background); + border: 1px solid var(--color-popover-border); + border-radius: 5px; + animation: popoverFrameEntrance 0.3s backwards cubic-bezier(0.16, 1, 0.3, 1); + box-shadow: var(--shadow-properties) var(--shadow-color); +} + +.popover-frame::before { + content: ''; + position: absolute; + width: var(--triangle-size); + height: var(--triangle-size); + transform: rotate(45deg); + background-color: var(--color-popover-background); + border-top-left-radius: 2px; + border-left: 1px solid var(--color-popover-border); + border-top: 1px solid var(--color-popover-border); + left: calc(var(--triangle-offset) - (var(--triangle-size) / 2)); + top: calc(var(--triangle-size) / 2 * -1 - 1px); +} + +.popover-container.position-above .popover-frame::before { + transform: rotate(-135deg); + top: auto; + bottom: calc(var(--triangle-size) / 2 * -1 - 1px); +} + +.popover-container.position-above .popover-frame { + --shadow-properties: 0 10px 20px -10px; +} + +@keyframes popoverFrameEntrance { + from { + opacity: 0; + transform: translateY(var(--entrance-direction)); + } +} diff --git a/internal/glance/static/css/site.css b/internal/glance/static/css/site.css new file mode 100644 index 0000000..bf87dd3 --- /dev/null +++ b/internal/glance/static/css/site.css @@ -0,0 +1,295 @@ +.light-scheme { + --scheme: 100% -; +} + +.page { + height: 100%; + padding-block: var(--widget-gap); +} + +.page-content, .page.content-ready .page-loading-container { + display: none; +} + +.page.content-ready > .page-content { + display: block; +} + +.page-column-small .size-title-dynamic { + font-size: var(--font-size-h4); +} + +.page-column-full .size-title-dynamic { + font-size: var(--font-size-h3); +} + +pre { + font: inherit; +} + +::selection { + background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); + color: var(--color-text-highlight); +} + +::-webkit-scrollbar-thumb { + background: var(--color-text-subdue); + border-radius: var(--border-radius); +} + +::-webkit-scrollbar { + background: var(--color-background); + height: 5px; + width: 10px; +} + +*:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 0.1rem; + border-radius: var(--border-radius); +} + +*, *::before, *::after { + box-sizing: border-box; +} + +* { + padding: 0; + 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; +} + +html, body, .body-content { + height: 100%; +} + +h1, h2, h3, h4, h5 { + font: inherit; +} + +a { + text-decoration: none; + color: inherit; + overflow-wrap: break-word; +} + +ul { + list-style: none; +} + +body { + font-size: 1.3rem; + font-family: 'JetBrains Mono', monospace; + font-variant-ligatures: none; + line-height: 1.6; + color: var(--color-text-base); + background-color: var(--color-background); + overflow-y: scroll; +} + +.page-column-small { + width: 300px; + flex-shrink: 0; +} + +.page-column-full { + width: 100%; + min-width: 0; +} + +.page-columns { + display: flex; + gap: var(--widget-gap); + animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; +} + +@keyframes pageColumnsEntrance { + from { + opacity: 0; + transform: translateY(10px); + } +} + +.page-loading-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + animation: loadingContainerEntrance 200ms backwards; + animation-delay: 150ms; + font-size: 2rem; +} + +.page-loading-container > .loading-icon { + translate: 0 -250%; +} + +@keyframes loadingContainerEntrance { + from { + opacity: 0; + } +} + +.loading-icon { + min-width: 1.5em; + width: 1.5em; + height: 1.5em; + border: 0.25em solid hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 12%))); + border-top-color: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); + border-radius: 50%; + animation: loadingIconSpin 800ms infinite linear; +} + +@keyframes loadingIconSpin { + to { + transform: rotate(360deg); + } +} + +.notice-icon { + width: 0.7rem; + height: 0.7rem; + border-radius: 50%; +} + +.notice-icon-major { + background: var(--color-negative); +} + +.notice-icon-minor { + border: 1px solid var(--color-negative); +} + +kbd { + font: inherit; + padding: 0.1rem 0.8rem; + border-radius: var(--border-radius); + border: 2px solid var(--color-widget-background-highlight); + box-shadow: 0 2px 0 var(--color-widget-background-highlight); + user-select: none; + transition: transform .1s, box-shadow .1s; + font-size: var(--font-size-h5); + cursor: pointer; +} + +kbd:active { + transform: translateY(2px); + box-shadow: 0 0 0 0 var(--color-widget-background-highlight); +} + +.content-bounds { + max-width: 1600px; + width: 100%; + margin-inline: auto; + padding: 0 var(--content-bounds-padding); +} + +.content-bounds-wide { + max-width: 1920px; +} + +.content-bounds-slim { + max-width: 1100px; +} + +.page-center-vertically .page { + display: flex; + justify-content: center; + flex-direction: column; +} + +.header-container { + margin-top: calc(var(--widget-gap) / 2); + --header-height: 45px; + --header-items-gap: 2.5rem; +} + +.header { + display: flex; + height: var(--header-height); + gap: var(--header-items-gap); +} + +.logo { + height: 100%; + line-height: var(--header-height); + font-size: 2rem; + color: var(--color-text-highlight); + border-right: 1px solid var(--color-widget-content-border); + padding-right: var(--widget-content-horizontal-padding); +} + +.logo:has(img) { + display: flex; + align-items: center; +} + +.logo img { + max-height: 2.7rem; +} + +.nav { + height: 100%; + gap: var(--header-items-gap); +} + +.nav .nav-item { + line-height: var(--header-height); +} + +.footer { + padding-bottom: calc(var(--widget-gap) * 1.5); + padding-top: calc(var(--widget-gap) / 2); + animation: loadingContainerEntrance 200ms backwards; + animation-delay: 150ms; +} + +.mobile-navigation, .mobile-reachability-header { + display: none; +} + +.nav-item { + display: block; + height: 100%; + border-bottom: 2px solid transparent; + transition: color .3s, border-color .3s; + font-size: var(--font-size-h3); + flex-shrink: 0; +} + +.nav-item:not(.nav-item-current):hover { + border-bottom-color: var(--color-text-subdue); + color: var(--color-text-highlight); +} + +.nav-item.nav-item-current { + border-bottom-color: var(--color-primary); + color: var(--color-text-highlight); +} diff --git a/internal/glance/static/css/utils.css b/internal/glance/static/css/utils.css new file mode 100644 index 0000000..fbc3bad --- /dev/null +++ b/internal/glance/static/css/utils.css @@ -0,0 +1,562 @@ +.masonry { + display: flex; + gap: var(--widget-gap); +} + +.masonry-column { + flex: 1; + display: flex; + flex-direction: column; +} + +.widget-small-content-bounds { + max-width: 350px; + margin: 0 auto; +} + +.visually-hidden { + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.list-horizontal-text { + display: flex; + list-style: none; + flex-wrap: wrap; + align-items: center; +} + +.list-horizontal-text > *:not(:last-child)::after { + content: '•' / ""; + color: var(--color-text-subdue); + margin: 0 0.4rem; + position: relative; + top: 0.1rem; +} + +.summary { + width: 100%; + cursor: pointer; + word-spacing: -0.18em; + user-select: none; + list-style: none; + position: relative; + display: flex; + z-index: 1; +} + +.summary::-webkit-details-marker { + display: none; +} + +.details[open] .summary { + margin-bottom: .8rem; +} + +.summary::before { + content: ""; + position: absolute; + inset: -.3rem -.8rem; + border-radius: var(--border-radius); + background-color: var(--color-widget-background-highlight); + opacity: 0; + transition: opacity 0.2s; + z-index: -1; +} + +.details[open] .summary::before, .summary:hover::before { + opacity: 1; +} + +.details:not([open]) .list-with-transition { + display: none; +} + +.summary::after { + content: "◀" / ""; + font-size: 1.2em; + position: absolute; + top: 0; + bottom: 0; + line-height: 1.3em; + right: 0; + transition: rotate .5s cubic-bezier(0.22, 1, 0.36, 1); +} + +details[open] .summary::after { + rotate: -90deg; +} + +/* TODO: refactor, otherwise I hope I never have to change dynamic columns again */ +.dynamic-columns { + --list-half-gap: 0.5rem; + gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); + display: grid; + grid-template-columns: repeat(var(--columns-per-row), 1fr); +} + +.dynamic-columns > * { + padding-left: var(--widget-content-horizontal-padding); + border-left: 1px solid var(--color-separator); + min-width: 0; +} + +.dynamic-columns > *:first-child { + padding-top: 0; + border-top: none; + border-left: none; +} + +.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: 599px) { + .dynamic-columns { gap: 0; } + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns > * { + border-left: none; + padding-left: 0; + } + .dynamic-columns > *:not(:first-child) { + margin-top: calc(var(--list-half-gap) * 2); + } + .dynamic-columns.list-with-separator > *:not(:first-child) { + margin-top: var(--list-half-gap); + border-top: 1px solid var(--color-separator); + padding-top: var(--list-half-gap); + } +} +@container widget (min-width: 600px) and (max-width: 849px) { + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } + .dynamic-columns > :nth-child(2n-1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 850px) and (max-width: 1249px) { + .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } + .dynamic-columns > :nth-child(3n+1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 1250px) and (max-width: 1499px) { + .dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } + .dynamic-columns > :nth-child(4n+1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 1500px) { + .dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } + .dynamic-columns > :nth-child(5n+1) { + border-left: none; + padding-left: 0; + } +} + +.cards-vertical { + flex-direction: column; +} + +.cards-horizontal { + --cards-per-row: 6.5; +} + +.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; + scrollbar-width: thin; + padding-bottom: 1rem; +} + +.cards-grid { + --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.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; } } +@container widget (max-width: 850px) { .cards-grid { --cards-per-row: 3; } } +@container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } } +@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } } + +.text-truncate, +.single-line-titles .title +{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.single-line-titles .title { + display: block; +} + +.text-truncate-2-lines, .text-truncate-3-lines { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; +} + +.text-truncate-3-lines { line-clamp: 3; -webkit-line-clamp: 3; } +.text-truncate-2-lines { line-clamp: 2; -webkit-line-clamp: 2; } + +.visited-indicator:not(.text-truncate)::after, +.visited-indicator.text-truncate::before { + content: '↗' / ""; + margin-left: 0.5em; + display: inline-block; + position: relative; + top: 0.15em; + color: var(--color-text-base); +} + +.visited-indicator.text-truncate { + direction: rtl; + text-align: left; +} + +.visited-indicator:not(:visited)::before, .visited-indicator:not(:visited)::after { + color: var(--color-primary); +} + +.page-columns-transitioned .list-with-transition > * { animation: collapsibleItemReveal .25s backwards; } +.list-with-transition > *:nth-child(2) { animation-delay: 30ms; } +.list-with-transition > *:nth-child(3) { animation-delay: 60ms; } +.list-with-transition > *:nth-child(4) { animation-delay: 90ms; } +.list-with-transition > *:nth-child(5) { animation-delay: 120ms; } +.list-with-transition > *:nth-child(6) { animation-delay: 150ms; } +.list-with-transition > *:nth-child(7) { animation-delay: 180ms; } +.list-with-transition > *:nth-child(8) { animation-delay: 210ms; } + +.list > *:not(:first-child) { + margin-top: calc(var(--list-half-gap) * 2); +} + +.list.list-with-separator > *:not(:first-child) { + margin-top: var(--list-half-gap); + border-top: 1px solid var(--color-separator); + padding-top: var(--list-half-gap); +} + +.collapsible-container:not(.container-expanded) > .collapsible-item { + display: none; +} + +.collapsible-item { + animation: collapsibleItemReveal .25s backwards; +} + +@keyframes collapsibleItemReveal { + from { + opacity: 0; + transform: translateY(10px); + } +} + +.expand-toggle-button { + 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); +} + +.expand-toggle-button.container-expanded { + position: sticky; + /* -1px to hide 1px gap on chrome */ + bottom: -1px; +} + +.expand-toggle-button-icon { + display: inline-block; + margin-left: 1rem; + position: relative; + top: -.2rem; +} + +.expand-toggle-button-icon::before { + content: '' / ""; + font-size: 0.8rem; + transform: rotate(90deg); + line-height: 1; + display: inline-block; + transition: transform 0.3s; +} + +.expand-toggle-button.container-expanded .expand-toggle-button-icon::before { + transform: rotate(-90deg); +} + +.cards-grid.collapsible-container + .expand-toggle-button { + text-align: center; + margin-top: 0.5rem; + background-color: var(--color-background); +} + +.widget-content:has(.expand-toggle-button:last-child) { + padding-bottom: 0; +} + +.carousel-container { + position: relative; +} + +.carousel-container::before, .carousel-container::after { + content: ''; + position: absolute; + width: 2rem; + top: 0; + bottom: 1rem; + z-index: 10; + opacity: 0; + pointer-events: none; + transition-duration: 0.2s; +} + +.carousel-container::before { + background: linear-gradient(to right, var(--color-background), transparent); +} + +.carousel-container::after { + right: 0; + background: linear-gradient(to left, var(--color-background), transparent); +} + +.carousel-container.show-left-cutoff::before, .carousel-container.show-right-cutoff::after { + opacity: 1; +} + +.attachments { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +:root:not(.light-scheme) .flat-icon { + filter: invert(1); +} + +.attachments > * { + border-radius: var(--border-radius); + padding: 0.1rem 0.5rem; + font-size: var(--font-size-h6); + background-color: var(--color-separator); +} + +.progress-bar { + border: 1px solid var(--color-progress-border); + border-radius: var(--border-radius); + display: flex; + flex-direction: column; + gap: 2px; + padding: 2px; + height: 1.5rem; + /* naughty, but oh so beautiful */ + margin-inline: -3px; +} + +.progress-bar-combined { + height: 3rem; +} + +.popover-active > .progress-bar { + transition: border-color .3s; + border-color: var(--color-text-subdue); +} + +.progress-value { + --half-border-radius: calc(var(--border-radius) / 2); + border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0; + background: var(--color-progress-value); + width: calc(var(--percent) * 1%); + min-width: 1px; + flex: 1; +} + +.progress-value:first-child { + border-top-left-radius: var(--half-border-radius); +} + +.progress-value:last-child { + border-bottom-left-radius: var(--half-border-radius); +} + +.progress-value-notice { + background: linear-gradient(to right, var(--color-progress-value) 65%, var(--color-negative)); +} + +.value-separator { + min-width: 2rem; + margin-inline: 0.8rem; + flex: 1; + height: calc(1em * 1.1); + border-bottom: 1px dotted var(--color-text-subdue); +} + +.thumbnail { + filter: grayscale(0.2) contrast(0.9); + opacity: 0.8; + transition: filter 0.2s, opacity .2s; +} + +.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; +} + +.size-h1 { font-size: var(--font-size-h1); } +.size-h2 { font-size: var(--font-size-h2); } +.size-h3 { font-size: var(--font-size-h3); } +.size-h4 { font-size: var(--font-size-h4); } +.size-base { font-size: var(--font-size-base); } +.size-h5 { font-size: var(--font-size-h5); } +.size-h6 { font-size: var(--font-size-h6); } + +.color-highlight { color: var(--color-text-highlight); } +.color-paragraph { color: var(--color-text-paragraph); } +.color-base { color: var(--color-text-base); } +.color-subdue { color: var(--color-text-subdue); } +.color-negative { color: var(--color-negative); } +.color-positive { color: var(--color-positive); } +.color-primary { color: var(--color-primary); } + +.color-primary-if-not-visited:not(:visited) { + color: var(--color-primary); +} + +.cursor-help { cursor: help; } +.rounded { border-radius: var(--border-radius); } +.break-all { word-break: break-all; } +.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; } +.text-very-compact { word-spacing: -0.35em; } +.rtl { direction: rtl; } +.shrink { flex-shrink: 1; } +.shrink-0 { flex-shrink: 0; } +.min-width-0 { min-width: 0; } +.max-width-100 { max-width: 100%; } +.block { display: block; } +.inline-block { display: inline-block; } +.overflow-hidden { overflow: hidden; } +.relative { position: relative; } +.flex { display: flex; } +.flex-1 { flex: 1; } +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.justify-between { justify-content: space-between; } +.justify-stretch { justify-content: stretch; } +.justify-evenly { justify-content: space-evenly; } +.justify-center { justify-content: center; } +.justify-end { justify-content: end; } +.uppercase { text-transform: uppercase; } +.grow { flex-grow: 1; } +.flex-column { flex-direction: column; } +.items-center { align-items: center; } +.items-start { align-items: start; } +.items-end { align-items: end; } +.gap-5 { gap: 0.5rem; } +.gap-7 { gap: 0.7rem; } +.gap-10 { gap: 1rem; } +.gap-12 { gap: 1.2rem; } +.gap-15 { gap: 1.5rem; } +.gap-20 { gap: 2rem; } +.gap-25 { gap: 2.5rem; } +.gap-35 { gap: 3.5rem; } +.gap-45 { gap: 4.5rem; } +.gap-55 { gap: 5.5rem; } +.margin-left-auto { margin-left: auto; } +.margin-top-3 { margin-top: 0.3rem; } +.margin-top-5 { margin-top: 0.5rem; } +.margin-top-7 { margin-top: 0.7rem; } +.margin-top-10 { margin-top: 1rem; } +.margin-top-15 { margin-top: 1.5rem; } +.margin-top-20 { margin-top: 2rem; } +.margin-top-25 { margin-top: 2.5rem; } +.margin-top-35 { margin-top: 3.5rem; } +.margin-top-40 { margin-top: 4rem; } +.margin-top-auto { margin-top: auto; } +.margin-block-3 { margin-block: 0.3rem; } +.margin-block-5 { margin-block: 0.5rem; } +.margin-block-7 { margin-block: 0.7rem; } +.margin-block-8 { margin-block: 0.8rem; } +.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; } +.margin-bottom-10 { margin-bottom: 1rem; } +.margin-bottom-15 { margin-bottom: 1.5rem; } +.margin-bottom-auto { margin-bottom: auto; } +.margin-bottom-widget { margin-bottom: var(--widget-content-vertical-padding); } +.padding-widget { padding: var(--widget-content-padding); } +.padding-block-widget { padding-block: var(--widget-content-vertical-padding); } +.padding-inline-widget { padding-inline: var(--widget-content-horizontal-padding); } +.padding-block-5 { padding-block: 0.5rem; } +.scale-half { transform: scale(0.5); } +.list { --list-half-gap: 0rem; } +.list-gap-2 { --list-half-gap: 0.1rem; } +.list-gap-4 { --list-half-gap: 0.2rem; } +.list-gap-8 { --list-half-gap: 0.4rem; } +.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-gap-34 { --list-half-gap: 1.7rem; } diff --git a/internal/glance/static/css/widget-bookmarks.css b/internal/glance/static/css/widget-bookmarks.css new file mode 100644 index 0000000..7f2dabd --- /dev/null +++ b/internal/glance/static/css/widget-bookmarks.css @@ -0,0 +1,31 @@ +.bookmarks-group { + --bookmarks-group-color: var(--color-primary); +} + +.bookmarks-group-title { + color: var(--bookmarks-group-color); +} + +.bookmarks-link:not(.bookmarks-link-no-arrow)::after { + content: '↗' / ""; + margin-left: 0.5em; + display: inline-block; + position: relative; + top: 0.15em; + color: var(--bookmarks-group-color); +} + +.bookmarks-icon-container { + margin-block: 0.1rem; + background-color: var(--color-widget-background-highlight); + border-radius: var(--border-radius); + padding: 0.5rem; + opacity: 0.7; + flex-shrink: 0; +} + +.bookmarks-icon { + width: 20px; + height: 20px; + opacity: 0.8; +} diff --git a/internal/glance/static/css/widget-calendar.css b/internal/glance/static/css/widget-calendar.css new file mode 100644 index 0000000..f9b0d9d --- /dev/null +++ b/internal/glance/static/css/widget-calendar.css @@ -0,0 +1,71 @@ +.old-calendar-day { + width: calc(100% / 7); + text-align: center; + padding: 0.6rem 0; +} + +.old-calendar-day-today { + border-radius: var(--border-radius); + background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) (var(--bgl)) + 6%))); + color: var(--color-text-highlight); +} + +.calendar-dates { + text-align: center; + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; +} + +.calendar-date { + padding: 0.4rem 0; + color: var(--color-text-base); + position: relative; + border-radius: var(--border-radius); + background: none; + border: none; + font: inherit; +} + +.calendar-current-date { + border-radius: var(--border-radius); + background-color: var(--color-popover-border); + color: var(--color-text-highlight); +} + +.calendar-spillover-date { + color: var(--color-text-subdue); +} + +.calendar-header-button { + position: relative; + cursor: pointer; + width: 2rem; + height: 2rem; + z-index: 1; + background: none; + border: none; +} + +.calendar-header-button::before { + content: ''; + position: absolute; + inset: -0.2rem; + border-radius: var(--border-radius); + background-color: var(--color-text-subdue); + opacity: 0; + transition: opacity 0.2s; + z-index: -1; +} + +.calendar-header-button:hover::before { + opacity: 0.4; +} + +.calendar-undo-button { + display: inline-block; + vertical-align: text-top; + width: 2rem; + height: 2rem; + margin-left: 0.7rem; +} diff --git a/internal/glance/static/css/widget-clock.css b/internal/glance/static/css/widget-clock.css new file mode 100644 index 0000000..47a1a2f --- /dev/null +++ b/internal/glance/static/css/widget-clock.css @@ -0,0 +1,7 @@ +.clock-time { + min-width: 8ch; +} + +.clock-time span { + color: var(--color-text-highlight); +} diff --git a/internal/glance/static/css/widget-dns-stats.css b/internal/glance/static/css/widget-dns-stats.css new file mode 100644 index 0000000..15a1d42 --- /dev/null +++ b/internal/glance/static/css/widget-dns-stats.css @@ -0,0 +1,120 @@ +.dns-stats-totals { + transition: opacity .3s; + transition-delay: 50ms; +} + +.dns-stats:has(.dns-stats-graph .popover-active) .dns-stats-totals { + opacity: 0.1; + transition-delay: 0s; +} + +.dns-stats-graph { + --graph-height: 70px; + height: var(--graph-height); + position: relative; + margin-bottom: 2.5rem; +} + +.dns-stats-graph-gridlines-container { + position: absolute; + inset: 0; +} + +.dns-stats-graph-gridlines { + height: 100%; + width: 100%; +} + +.dns-stats-graph-columns { + display: flex; + height: 100%; +} + +.dns-stats-graph-column { + display: flex; + justify-content: flex-end; + align-items: center; + flex-direction: column; + width: calc(100% / 8); + position: relative; +} + +.dns-stats-graph-column::before { + content: ''; + position: absolute; + inset: 1px 0; + opacity: 0; + background: var(--color-text-base); + transition: opacity .2s; +} + +.dns-stats-graph-column:hover::before { + opacity: 0.05; +} + +.dns-stats-graph-bar { + width: 14px; + height: calc((var(--bar-height) / 100) * var(--graph-height)); + border: 1px solid var(--color-progress-border); + border-radius: var(--border-radius) var(--border-radius) 0 0; + display: flex; + background: var(--color-widget-background); + padding: 2px 2px 0 2px; + flex-direction: column; + gap: 2px; + transition: border-color .2s; + min-height: 10px; +} + +.dns-stats-graph-column.popover-active .dns-stats-graph-bar { + border-color: var(--color-text-subdue); + border-bottom-color: var(--color-progress-border); +} + +.dns-stats-graph-bar > * { + border-radius: 2px; + background: var(--color-vertical-progress-value); + min-height: 1px; +} + +.dns-stats-graph-bar > .queries { + flex-grow: 1; +} + +.dns-stats-graph-bar > *:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.dns-stats-graph-bar > .blocked { + background-color: var(--color-negative); + flex-basis: calc(var(--percent) - 1px); +} + +.dns-stats-graph-column:nth-child(even) .dns-stats-graph-time { + opacity: 1; + transform: translateY(0); +} + +.dns-stats-graph-time, .dns-stats-graph-columns:hover .dns-stats-graph-time { + position: absolute; + font-size: var(--font-size-h6); + inset-inline: 0; + text-align: center; + height: 2.5rem; + line-height: 2.5rem; + top: 100%; + user-select: none; + opacity: 0; + transform: translateY(-0.5rem); + transition: opacity .2s, transform .2s; +} + +.dns-stats-graph-column:hover .dns-stats-graph-time { + opacity: 1; + transform: translateY(0); +} + +.dns-stats-graph-columns:hover .dns-stats-graph-column:not(:hover) .dns-stats-graph-time { + opacity: 0; +} diff --git a/internal/glance/static/css/widget-docker-containers.css b/internal/glance/static/css/widget-docker-containers.css new file mode 100644 index 0000000..ae08788 --- /dev/null +++ b/internal/glance/static/css/widget-docker-containers.css @@ -0,0 +1,26 @@ +.docker-container-icon { + display: block; + filter: grayscale(0.4); + object-fit: contain; + aspect-ratio: 1 / 1; + width: 2.7rem; + opacity: 0.8; + transition: filter 0.3s, opacity 0.3s; +} + +.docker-container-icon.flat-icon { + opacity: 0.7; +} + +.docker-container:hover .docker-container-icon { + opacity: 1; +} + +.docker-container:hover .docker-container-icon:not(.flat-icon) { + filter: grayscale(0); +} + +.docker-container-status-icon { + width: 2rem; + height: 2rem; +} diff --git a/internal/glance/static/css/widget-group.css b/internal/glance/static/css/widget-group.css new file mode 100644 index 0000000..378853b --- /dev/null +++ b/internal/glance/static/css/widget-group.css @@ -0,0 +1,49 @@ +.widget-group-header { + overflow-x: auto; + scrollbar-width: thin; +} + +.widget-group-title { + background: none; + font: inherit; + border: none; + text-transform: uppercase; + border-bottom: 1px dotted transparent; + cursor: pointer; + flex-shrink: 0; + transition: color .3s, border-color .3s; + color: var(--color-text-subdue); + line-height: calc(1.6em - 1px); +} + +.widget-group-title:hover:not(.widget-group-title-current) { + color: var(--color-text-base); +} + +.widget-group-title-current { + border-bottom-color: var(--color-text-base-muted); + color: var(--color-text-base); +} + +.widget-group-content { + animation: widgetGroupContentEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; +} + +.widget-group-content[data-direction="right"] { + --direction: 5px; +} + +.widget-group-content[data-direction="left"] { + --direction: -5px; +} + +@keyframes widgetGroupContentEntrance { + from { + opacity: 0; + transform: translateX(var(--direction)); + } +} + +.widget-group-content:not(.widget-group-content-current) { + display: none; +} diff --git a/internal/glance/static/css/widget-markets.css b/internal/glance/static/css/widget-markets.css new file mode 100644 index 0000000..f670a25 --- /dev/null +++ b/internal/glance/static/css/widget-markets.css @@ -0,0 +1,13 @@ +.market-chart { + margin-left: auto; + width: 6.5rem; + flex-shrink: 0; +} + +.market-chart svg { + width: 100%; +} + +.market-values { + min-width: 8rem; +} diff --git a/internal/glance/static/css/widget-monitor.css b/internal/glance/static/css/widget-monitor.css new file mode 100644 index 0000000..8bc629b --- /dev/null +++ b/internal/glance/static/css/widget-monitor.css @@ -0,0 +1,36 @@ +.monitor-site-icon { + display: block; + opacity: 0.8; + filter: grayscale(0.4); + object-fit: contain; + aspect-ratio: 1 / 1; + width: 3.2rem; + position: relative; + top: -0.1rem; + transition: filter 0.3s, opacity 0.3s; +} + +.monitor-site-icon.flat-icon { + opacity: 0.7; +} + +.monitor-site:hover .monitor-site-icon { + opacity: 1; +} + +.monitor-site:hover .monitor-site-icon:not(.flat-icon) { + filter: grayscale(0); +} + +.monitor-site-status-icon { + flex-shrink: 0; + margin-left: auto; + width: 2rem; + height: 2rem; +} + +.monitor-site-status-icon-compact { + width: 1.8rem; + height: 1.8rem; + flex-shrink: 0; +} diff --git a/internal/glance/static/css/widget-reddit.css b/internal/glance/static/css/widget-reddit.css new file mode 100644 index 0000000..5b62e0e --- /dev/null +++ b/internal/glance/static/css/widget-reddit.css @@ -0,0 +1,22 @@ +.reddit-card-thumbnail { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 0% 20%; + opacity: 0.15; + filter: blur(1px); +} + +.reddit-card-thumbnail-container { + position: absolute; + inset: 0; + overflow: hidden; + border-radius: var(--border-radius); +} + +.reddit-card-thumbnail-container::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(0deg, var(--color-widget-background) 10%, transparent); +} diff --git a/internal/glance/static/css/widget-releases.css b/internal/glance/static/css/widget-releases.css new file mode 100644 index 0000000..7def4cf --- /dev/null +++ b/internal/glance/static/css/widget-releases.css @@ -0,0 +1,6 @@ +.release-source-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + opacity: 0.4; +} diff --git a/internal/glance/static/css/widget-rss.css b/internal/glance/static/css/widget-rss.css new file mode 100644 index 0000000..34b7114 --- /dev/null +++ b/internal/glance/static/css/widget-rss.css @@ -0,0 +1,56 @@ +.rss-card-image { + 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; +} + +.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; +} diff --git a/internal/glance/static/css/widget-search.css b/internal/glance/static/css/widget-search.css new file mode 100644 index 0000000..ebf5cbb --- /dev/null +++ b/internal/glance/static/css/widget-search.css @@ -0,0 +1,79 @@ +.search-icon { + width: 2.3rem; +} + +.search-icon-container { + position: relative; + flex-shrink: 0; +} + +/* gives a wider hit area for the 3 people that will notice the animation : ) */ +.search-icon-container::before { + content: ''; + position: absolute; + inset: -1rem; +} + +.search-icon-container:hover > .search-icon { + animation: searchIconHover 2.9s forwards; +} + +@keyframes searchIconHover { + 0%, 39% { translate: 0 0; } + 20% { scale: 1.3; } + 40% { scale: 1; } + 50% { translate: -30% 30%; } + 70% { translate: 30% -30%; } + 90% { translate: -30% -30%; } + 100% { translate: 0 0; } +} + +.search { + transition: border-color .2s; + position: relative; +} + +.search:hover { + border-color: var(--color-text-subdue); +} + +.search:focus-within { + border-color: var(--color-primary); +} + +.search-input { + border: 0; + background: none; + width: 100%; + height: 6rem; + font: inherit; + outline: none; + color: var(--color-text-highlight); +} + +.search-input::placeholder { + color: var(--color-text-base-muted); + opacity: 1; +} + +.search-bangs { display: none; } + +.search-bang { + border-radius: calc(var(--border-radius) * 2); + background: var(--color-widget-background-highlight); + padding: 0.3rem 1rem; + flex-shrink: 0; + font-size: var(--font-size-h5); + animation: searchBangsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; +} + +@keyframes searchBangsEntrance { + 0% { + opacity: 0; + transform: translateX(-10px); + } +} + +.search-bang:empty { + display: none; +} diff --git a/internal/glance/static/css/widget-server-stats.css b/internal/glance/static/css/widget-server-stats.css new file mode 100644 index 0000000..11f9ab5 --- /dev/null +++ b/internal/glance/static/css/widget-server-stats.css @@ -0,0 +1,81 @@ +.widget-type-server-info { + position: relative; +} + +.server + .server { + margin-top: 3rem; +} + +.server { + gap: 1rem; + display: flex; + flex-direction: column; +} + +.server-info { + align-items: center; + display: flex; + justify-content: space-between; + gap: 1.5rem; + flex-shrink: 1; + min-width: 0; +} + +.server-details { + min-width: 0; +} + +.server-icon { + height: 3rem; + width: 3rem; +} + +.server-spicy-cpu-icon { + height: 1em; + align-self: center; + margin-left: 0.4em; + margin-bottom: 0.2rem; +} + +.server-stats { + display: flex; + gap: 1.5rem; + margin-top: 0.5rem; +} + +.server-stat-unavailable { + opacity: 0.5; +} + +@container widget (min-width: 650px) { + .server { + gap: 2rem; + flex-direction: row; + align-items: center; + } + + .server + .server { + margin-top: 1rem; + } + + .server-info { + flex-direction: row-reverse; + justify-content: unset; + margin-right: auto; + z-index: 1; + } + + .server-stats { + flex-direction: row; + justify-content: right; + min-width: 450px; + margin-top: 0; + gap: 2rem; + padding-bottom: 0.8rem; + z-index: 1; + } + + .server-stats > * { + max-width: 200px; + } +} diff --git a/internal/glance/static/css/widget-twitch.css b/internal/glance/static/css/widget-twitch.css new file mode 100644 index 0000000..d109756 --- /dev/null +++ b/internal/glance/static/css/widget-twitch.css @@ -0,0 +1,47 @@ +.twitch-category-thumbnail { + width: 5rem; + aspect-ratio: 3 / 4; + border-radius: var(--border-radius); +} + +.twitch-channel-avatar { + aspect-ratio: 1; + border-radius: 50%; +} + +.twitch-channel-avatar-container { + width: 4.4rem; + height: 4.4rem; + border: 2px solid var(--color-text-subdue); + padding: 2px; + border-radius: 50%; + position: relative; + flex-shrink: 0; +} + +.twitch-channel-live .twitch-channel-avatar-container { + border: 2px solid var(--color-positive); + margin-bottom: 1rem; +} + +.twitch-channel-live .twitch-channel-avatar-container::after { + content: 'LIVE'; + position: absolute; + background: var(--color-positive); + color: var(--color-widget-background); + font-size: var(--font-size-h6); + left: 50%; + bottom: -35%; + border-radius: var(--border-radius); + padding-inline: 0.3rem; + transform: translate(-50%); + border: 2px solid var(--color-widget-background); +} + +.twitch-stream-preview { + max-width: 100%; + width: 400px; + aspect-ratio: 16 / 9; + border-radius: var(--border-radius); + object-fit: cover; +} diff --git a/internal/glance/static/css/widget-videos.css b/internal/glance/static/css/widget-videos.css new file mode 100644 index 0000000..8d07801 --- /dev/null +++ b/internal/glance/static/css/widget-videos.css @@ -0,0 +1,13 @@ +.video-thumbnail { + width: 100%; + aspect-ratio: 16 / 8.9; + object-fit: cover; + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.video-horizontal-list-thumbnail { + height: 4rem; + aspect-ratio: 16 / 8.9; + object-fit: cover; + border-radius: var(--border-radius); +} diff --git a/internal/glance/static/css/widget-weather.css b/internal/glance/static/css/widget-weather.css new file mode 100644 index 0000000..84d50ba --- /dev/null +++ b/internal/glance/static/css/widget-weather.css @@ -0,0 +1,139 @@ +.weather-column { + position: relative; + display: flex; + align-items: center; + justify-content: end; + flex-direction: column; + width: calc(100% / 12); + padding-top: 3px; +} + +.weather-column-value, .weather-columns:hover .weather-column-value { + font-size: 13px; + color: var(--color-text-highlight); + letter-spacing: -0.1rem; + margin-right: 0.1rem; + position: relative; + margin-bottom: 0.3rem; + opacity: 0; + transform: translateY(0.5rem); + transition: opacity .2s, transform .2s; + user-select: none; +} + +.weather-column-current .weather-column-value, .weather-column:hover .weather-column-value { + opacity: 1; + transform: translateY(0); +} + +.weather-column-value::after { + position: absolute; + content: '°'; + left: 100%; + color: var(--color-text-subdue); +} + +.weather-column-value.weather-column-value-negative::before { + position: absolute; + content: '-'; + right: 100%; +} + +.weather-bar, .weather-columns:hover .weather-bar { + height: calc(20px + var(--weather-bar-height) * 40px); + width: 6px; + background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 18%))); + border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 24%))); + border-bottom: 0; + border-radius: 6px 6px 0 0; + mask-image: linear-gradient(0deg, transparent 0, #000 10px); + -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10px); + transition: background-color .2s, border-color .2s, width .2s; +} + +.weather-column-current .weather-bar, .weather-column:hover .weather-bar { + width: 10px; + background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); + border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 50%))); +} + +.weather-column-rain { + position: absolute; + inset: 0; + bottom: 20%; + overflow: hidden; + mask-image: linear-gradient(0deg, transparent 40%, #000); + -webkit-mask-image: linear-gradient(0deg, transparent 40%, #000); +} + +.weather-column-rain::before { + content: ''; + position: absolute; + /* TODO: figure out a way to make it look continuous between columns, right now */ + /* depending on the width of the page the rain inside two columns next to each other */ + /* can overlap and look bad */ + background: radial-gradient(circle at 4px 4px, hsl(200, 90%, 70%, 0.4) 1px, transparent 0); + background-size: 8px 8px; + transform: rotate(45deg) translate(-50%, 25%); + height: 130%; + aspect-ratio: 1; + left: 55%; +} + +.weather-column:nth-child(3) .weather-column-time, +.weather-column:nth-child(7) .weather-column-time, +.weather-column:nth-child(11) .weather-column-time { + opacity: 1; + transform: translateY(0); +} + +.weather-column-time, .weather-columns:hover .weather-column-time { + margin-top: 0.3rem; + font-size: var(--font-size-h6); + opacity: 0; + transform: translateY(-0.5rem); + transition: opacity .2s, transform .2s; + user-select: none; +} + +.weather-column:hover .weather-column-time { + opacity: 1; + transform: translateY(0); +} + +.weather-column-daylight { + position: absolute; + inset: 0; + background: linear-gradient(0deg, transparent 30px, hsl(50, 50%, 30%, 0.2)); +} + +.weather-column-daylight-sunrise { + border-radius: 20px 0 0 0; +} + +.weather-column-daylight-sunset { + border-radius: 0 20px 0 0; +} + +.location-icon { + width: 0.8em; + height: 0.8em; + border-radius: 0 50% 50% 50%; + background-color: currentColor; + transform: rotate(225deg) translate(.1em, .1em); + position: relative; + flex-shrink: 0; +} + +.location-icon::after { + content: ''; + position: absolute; + z-index: 2; + width: .4em; + height: .4em; + border-radius: 50%; + background-color: var(--color-widget-background); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/internal/glance/static/css/widgets.css b/internal/glance/static/css/widgets.css new file mode 100644 index 0000000..9c9e8ee --- /dev/null +++ b/internal/glance/static/css/widgets.css @@ -0,0 +1,88 @@ +@import "widget-bookmarks.css"; +@import "widget-calendar.css"; +@import "widget-clock.css"; +@import "widget-dns-stats.css"; +@import "widget-docker-containers.css"; +@import "widget-group.css"; +@import "widget-markets.css"; +@import "widget-monitor.css"; +@import "widget-reddit.css"; +@import "widget-releases.css"; +@import "widget-rss.css"; +@import "widget-search.css"; +@import "widget-server-stats.css"; +@import "widget-twitch.css"; +@import "widget-videos.css"; +@import "widget-weather.css"; + +@import "forum-posts.css"; + +.widget-error-header { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + margin-bottom: 1.8rem; + z-index: 1; +} + +.widget-error-header::before { + content: ''; + position: absolute; + inset: calc(0rem - (var(--widget-content-vertical-padding) / 2)) calc(0rem - (var(--widget-content-horizontal-padding) / 2)); + background: var(--color-negative); + opacity: 0.05; + border-radius: var(--border-radius); + z-index: -1; +} + +.widget-error-icon { + width: 2.4rem; + height: 2.4rem; + flex-shrink: 0; + stroke: var(--color-negative); + opacity: 0.6; +} + +.widget-content { + container-type: inline-size; + container-name: widget; +} + +.widget-content:not(.widget-content-frameless) { + padding: var(--widget-content-padding); +} + +.widget-content:not(.widget-content-frameless), .widget-content-frame { + background: var(--color-widget-background); + border-radius: var(--border-radius); + border: 1px solid var(--color-widget-content-border); + box-shadow: 0px 3px 0px 0px hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl)) - 0.5%)); +} + +.widget-header { + padding: 0 calc(var(--widget-content-horizontal-padding) + 1px); + font-size: var(--font-size-h4); + margin-bottom: 0.9rem; + display: flex; + align-items: center; + gap: 1rem; +} + +.widget-beta-icon { + width: 1.6rem; + height: 1.6rem; + flex-shrink: 0; + transition: transform .45s, opacity .45s, stroke .45s; + opacity: 0.7; +} + +.widget-beta-icon:hover, .widget-header .popover-active > .widget-beta-icon { + fill: var(--color-text-highlight); + transform: translateY(-10%) scale(1.3); + opacity: 1; +} + +.widget + .widget { + margin-top: var(--widget-gap); +} diff --git a/internal/glance/static/js/main.js b/internal/glance/static/js/main.js index dcd8946..dca713b 100644 --- a/internal/glance/static/js/main.js +++ b/internal/glance/static/js/main.js @@ -104,6 +104,7 @@ function setupSearchBoxes() { for (let i = 0; i < searchWidgets.length; i++) { const widget = searchWidgets[i]; const defaultSearchUrl = widget.dataset.defaultSearchUrl; + const target = widget.dataset.target || "_blank"; const newTab = widget.dataset.newTab === "true"; const inputElement = widget.getElementsByClassName("search-input")[0]; const bangElement = widget.getElementsByClassName("search-bang")[0]; @@ -143,7 +144,7 @@ function setupSearchBoxes() { const url = searchUrlTemplate.replace("!QUERY!", encodeURIComponent(query)); if (newTab && !event.ctrlKey || !newTab && event.ctrlKey) { - window.open(url, '_blank').focus(); + window.open(url, target).focus(); } else { window.location.href = url; } @@ -649,7 +650,7 @@ function setupTruncatedElementTitles() { for (let i = 0; i < elements.length; i++) { const element = elements[i]; - if (element.title === "") element.title = element.textContent; + if (element.getAttribute("title") === null) element.title = element.textContent; } } diff --git a/internal/glance/static/main.css b/internal/glance/static/main.css deleted file mode 100644 index c9c3c17..0000000 --- a/internal/glance/static/main.css +++ /dev/null @@ -1,2110 +0,0 @@ -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); -} - -:root { - font-size: 10px; - - --scheme: ; - --bgh: 240; - --bgs: 8%; - --bgl: 9%; - --bghs: var(--bgh), var(--bgs); - --cm: 1; - --tsm: 1; - - --widget-gap: 23px; - --widget-content-vertical-padding: 15px; - --widget-content-horizontal-padding: 17px; - --widget-content-padding: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); - --content-bounds-padding: 15px; - --border-radius: 5px; - --mobile-navigation-height: 50px; - - --color-primary: hsl(43, 50%, 70%); - --color-positive: var(--color-primary); - --color-negative: hsl(0, 70%, 70%); - --color-background: hsl(var(--bghs), var(--bgl)); - --color-widget-background-hsl-values: var(--bghs), calc(var(--bgl) + 1%); - --color-widget-background: hsl(var(--color-widget-background-hsl-values)); - --color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm)))); - --color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); - --color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); - --color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%)); - --color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%))); - --color-progress-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm)))); - --color-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 30% * var(--cm)))); - --color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm)))); - - --ths: var(--bgh), calc(var(--bgs) * var(--tsm)); - --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%)); - --color-text-paragraph: hsl(var(--ths), calc(var(--scheme) var(--cm) * 73%)); - --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-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%)); - - --font-size-h1: 1.7rem; - --font-size-h2: 1.6rem; - --font-size-h3: 1.5rem; - --font-size-h4: 1.4rem; - --font-size-base: 1.3rem; - --font-size-h5: 1.2rem; - --font-size-h6: 1.1rem; -} - -.light-scheme { - --scheme: 100% -; -} - -.page { - height: 100%; - padding-block: var(--widget-gap); -} - -.page-content, .page.content-ready .page-loading-container { - display: none; -} - -.page.content-ready > .page-content { - display: block; -} - -.page-column-small .size-title-dynamic { - font-size: var(--font-size-h4); -} - -.page-column-full .size-title-dynamic { - font-size: var(--font-size-h3); -} - -.color-primary-if-not-visited:not(:visited) { - color: var(--color-primary); -} - -.text-truncate, -.single-line-titles .title -{ - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.single-line-titles .title { - display: block; -} - -.text-truncate-2-lines, .text-truncate-3-lines { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-box-orient: vertical; -} - -.text-truncate-3-lines { line-clamp: 3; -webkit-line-clamp: 3; } -.text-truncate-2-lines { line-clamp: 2; -webkit-line-clamp: 2; } - -.visited-indicator:not(.text-truncate)::after, -.visited-indicator.text-truncate::before, -.bookmarks-link:not(.bookmarks-link-no-arrow)::after { - content: '↗' / ""; - margin-left: 0.5em; - display: inline-block; - position: relative; - top: 0.15em; - color: var(--color-text-base); -} - -.visited-indicator.text-truncate { - direction: rtl; - text-align: left; -} - -.visited-indicator:not(:visited)::before, .visited-indicator:not(:visited)::after { - color: var(--color-primary); -} - -.page-columns-transitioned .list-with-transition > * { animation: collapsibleItemReveal .25s backwards; } -.list-with-transition > *:nth-child(2) { animation-delay: 30ms; } -.list-with-transition > *:nth-child(3) { animation-delay: 60ms; } -.list-with-transition > *:nth-child(4) { animation-delay: 90ms; } -.list-with-transition > *:nth-child(5) { animation-delay: 120ms; } -.list-with-transition > *:nth-child(6) { animation-delay: 150ms; } -.list-with-transition > *:nth-child(7) { animation-delay: 180ms; } -.list-with-transition > *:nth-child(8) { animation-delay: 210ms; } - -.list > *:not(:first-child) { - margin-top: calc(var(--list-half-gap) * 2); -} - -.list.list-with-separator > *:not(:first-child) { - margin-top: var(--list-half-gap); - border-top: 1px solid var(--color-separator); - padding-top: var(--list-half-gap); -} - -.collapsible-container:not(.container-expanded) > .collapsible-item { - display: none; -} - -.collapsible-item { - animation: collapsibleItemReveal .25s backwards; -} - -@keyframes collapsibleItemReveal { - from { - opacity: 0; - transform: translateY(10px); - } -} - -.expand-toggle-button { - 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); -} - -.expand-toggle-button.container-expanded { - position: sticky; - /* -1px to hide 1px gap on chrome */ - bottom: -1px; -} - -.expand-toggle-button-icon { - display: inline-block; - margin-left: 1rem; - position: relative; - top: -.2rem; -} - -.expand-toggle-button-icon::before { - content: '' / ""; - font-size: 0.8rem; - transform: rotate(90deg); - line-height: 1; - display: inline-block; - transition: transform 0.3s; -} - -.expand-toggle-button.container-expanded .expand-toggle-button-icon::before { - transform: rotate(-90deg); -} - -.widget-group-header { - overflow-x: auto; - scrollbar-width: thin; -} - -.widget-group-title { - background: none; - font: inherit; - border: none; - text-transform: uppercase; - border-bottom: 1px dotted transparent; - cursor: pointer; - flex-shrink: 0; - transition: color .3s, border-color .3s; - color: var(--color-text-subdue); - line-height: calc(1.6em - 1px); -} - -.widget-group-title:hover:not(.widget-group-title-current) { - color: var(--color-text-base); -} - -.widget-group-title-current { - border-bottom-color: var(--color-text-base-muted); - color: var(--color-text-base); -} - -.widget-group-content { - animation: widgetGroupContentEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; -} - -.widget-group-content[data-direction="right"] { - --direction: 5px; -} - -.widget-group-content[data-direction="left"] { - --direction: -5px; -} - -@keyframes widgetGroupContentEntrance { - from { - opacity: 0; - transform: translateX(var(--direction)); - } -} - -.widget-group-content:not(.widget-group-content-current) { - display: none; -} - -.widget-content:has(.expand-toggle-button:last-child) { - padding-bottom: 0; -} - -.cards-grid.collapsible-container + .expand-toggle-button { - text-align: center; - margin-top: 0.5rem; - background-color: var(--color-background); -} - -.attachments { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.attachments > * { - border-radius: var(--border-radius); - padding: 0.1rem 0.5rem; - font-size: var(--font-size-h6); - background-color: var(--color-separator); -} - -pre { - font: inherit; -} - -::selection { - background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); - color: var(--color-text-highlight); -} - -::-webkit-scrollbar-thumb { - background: var(--color-text-subdue); - border-radius: var(--border-radius); -} - -::-webkit-scrollbar { - background: var(--color-background); - height: 5px; - width: 10px; -} - -*:focus-visible { - outline: 2px solid var(--color-primary); - outline-offset: 0.1rem; - border-radius: var(--border-radius); -} - -*, *::before, *::after { - box-sizing: border-box; -} - -* { - padding: 0; - 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; -} - -html, body, .body-content { - height: 100%; -} - -h1, h2, h3, h4, h5 { - font: inherit; -} - -.visually-hidden { - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} - -a { - text-decoration: none; - color: inherit; - overflow-wrap: break-word; -} - -ul { - list-style: none; -} - -body { - font-size: 1.3rem; - font-family: 'JetBrains Mono', monospace; - font-variant-ligatures: none; - line-height: 1.6; - color: var(--color-text-base); - background-color: var(--color-background); - overflow-y: scroll; -} - -.page-column-small { - width: 300px; - flex-shrink: 0; -} - -.page-column-full { - width: 100%; - min-width: 0; -} - -.page-columns { - display: flex; - gap: var(--widget-gap); - animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; -} - -@keyframes pageColumnsEntrance { - from { - opacity: 0; - transform: translateY(10px); - } -} - -.page-loading-container { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - animation: loadingContainerEntrance 200ms backwards; - animation-delay: 150ms; - font-size: 2rem; -} - -.page-loading-container > .loading-icon { - translate: 0 -250%; -} - -@keyframes loadingContainerEntrance { - from { - opacity: 0; - } -} - -.loading-icon { - min-width: 1.5em; - width: 1.5em; - height: 1.5em; - border: 0.25em solid hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 12%))); - border-top-color: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); - border-radius: 50%; - animation: loadingIconSpin 800ms infinite linear; -} - -@keyframes loadingIconSpin { - to { - transform: rotate(360deg); - } -} - -.notice-icon { - width: 0.7rem; - height: 0.7rem; - border-radius: 50%; -} - -.notice-icon-major { - background: var(--color-negative); -} - -.notice-icon-minor { - border: 1px solid var(--color-negative); -} - -kbd { - font: inherit; - padding: 0.1rem 0.8rem; - border-radius: var(--border-radius); - border: 2px solid var(--color-widget-background-highlight); - box-shadow: 0 2px 0 var(--color-widget-background-highlight); - user-select: none; - transition: transform .1s, box-shadow .1s; - font-size: var(--font-size-h5); - cursor: pointer; -} - -kbd:active { - transform: translateY(2px); - box-shadow: 0 0 0 0 var(--color-widget-background-highlight); -} - -.masonry { - display: flex; - gap: var(--widget-gap); -} - -.masonry-column { - flex: 1; - display: flex; - flex-direction: column; -} - -.popover-container, [data-popover-html] { - display: none; -} - -.popover-container { - --triangle-size: 10px; - --triangle-offset: 50%; - --triangle-margin: calc(var(--triangle-size) + 3px); - --entrance-y-offset: 8px; - --entrance-direction: calc(var(--entrance-y-offset) * -1); - - z-index: 20; - position: absolute; - padding-top: var(--triangle-margin); - padding-inline: var(--content-bounds-padding); -} - -.popover-container.position-above { - --entrance-direction: var(--entrance-y-offset); - padding-top: 0; - padding-bottom: var(--triangle-margin); -} - -.popover-frame { - --shadow-properties: 0 15px 20px -10px; - --shadow-color: hsla(var(--bghs), calc(var(--bgl) * 0.2), 0.5); - position: relative; - padding: 10px; - background: var(--color-popover-background); - border: 1px solid var(--color-popover-border); - border-radius: 5px; - animation: popoverFrameEntrance 0.3s backwards cubic-bezier(0.16, 1, 0.3, 1); - box-shadow: var(--shadow-properties) var(--shadow-color); -} - -.popover-frame::before { - content: ''; - position: absolute; - width: var(--triangle-size); - height: var(--triangle-size); - transform: rotate(45deg); - background-color: var(--color-popover-background); - border-top-left-radius: 2px; - border-left: 1px solid var(--color-popover-border); - border-top: 1px solid var(--color-popover-border); - left: calc(var(--triangle-offset) - (var(--triangle-size) / 2)); - top: calc(var(--triangle-size) / 2 * -1 - 1px); -} - -.popover-container.position-above .popover-frame::before { - transform: rotate(-135deg); - top: auto; - bottom: calc(var(--triangle-size) / 2 * -1 - 1px); -} - -.popover-container.position-above .popover-frame { - --shadow-properties: 0 10px 20px -10px; -} - -@keyframes popoverFrameEntrance { - from { - opacity: 0; - transform: translateY(var(--entrance-direction)); - } -} - -.summary { - width: 100%; - cursor: pointer; - word-spacing: -0.18em; - user-select: none; - list-style: none; - position: relative; - display: flex; - z-index: 1; -} - -.details[open] .summary { - margin-bottom: .8rem; -} - -.summary::before { - content: ""; - position: absolute; - inset: -.3rem -.8rem; - border-radius: var(--border-radius); - background-color: var(--color-widget-background-highlight); - opacity: 0; - transition: opacity 0.2s; - z-index: -1; -} - -.details[open] .summary::before, .summary:hover::before { - opacity: 1; -} - -.details:not([open]) .list-with-transition { - display: none; -} - -.summary::after { - content: "◀" / ""; - font-size: 1.2em; - position: absolute; - top: 0; - bottom: 0; - line-height: 1.3em; - right: 0; - transition: rotate .5s cubic-bezier(0.22, 1, 0.36, 1); -} - -details[open] .summary::after { - rotate: -90deg; -} - -.content-bounds { - max-width: 1600px; - width: 100%; - margin-inline: auto; - padding: 0 var(--content-bounds-padding); -} - -.page-width-wide .content-bounds { - max-width: 1920px; -} - -.page-width-slim .content-bounds { - max-width: 1100px; -} - -.page-center-vertically .page { - display: flex; - justify-content: center; - flex-direction: column; -} - -/* TODO: refactor, otherwise I hope I never have to change dynamic columns again */ -.dynamic-columns { - --list-half-gap: 0.5rem; - gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); - display: grid; - grid-template-columns: repeat(var(--columns-per-row), 1fr); -} - -.dynamic-columns > * { - padding-left: var(--widget-content-horizontal-padding); - border-left: 1px solid var(--color-separator); - min-width: 0; -} - -.dynamic-columns > *:first-child { - padding-top: 0; - border-top: none; - border-left: none; -} - -.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: 599px) { - .dynamic-columns { gap: 0; } - .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } - .dynamic-columns > * { - border-left: none; - padding-left: 0; - } - .dynamic-columns > *:not(:first-child) { - margin-top: calc(var(--list-half-gap) * 2); - } - .dynamic-columns.list-with-separator > *:not(:first-child) { - margin-top: var(--list-half-gap); - border-top: 1px solid var(--color-separator); - padding-top: var(--list-half-gap); - } -} -@container widget (min-width: 600px) and (max-width: 849px) { - .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } - .dynamic-columns > :nth-child(2n-1) { - border-left: none; - padding-left: 0; - } -} -@container widget (min-width: 850px) and (max-width: 1249px) { - .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } - .dynamic-columns > :nth-child(3n+1) { - border-left: none; - padding-left: 0; - } -} -@container widget (min-width: 1250px) and (max-width: 1499px) { - .dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } - .dynamic-columns > :nth-child(4n+1) { - border-left: none; - padding-left: 0; - } -} -@container widget (min-width: 1500px) { - .dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } - .dynamic-columns > :nth-child(5n+1) { - border-left: none; - padding-left: 0; - } -} - -.cards-vertical { - flex-direction: column; -} - -.cards-horizontal { - --cards-per-row: 6.5; -} - -.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; - scrollbar-width: thin; - padding-bottom: 1rem; -} - -.cards-grid { - --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.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; } } -@container widget (max-width: 850px) { .cards-grid { --cards-per-row: 3; } } -@container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } } -@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } } - -.widget-small-content-bounds { - max-width: 350px; - margin: 0 auto; -} - -.widget-error-header { - display: flex; - align-items: center; - justify-content: space-between; - position: relative; - margin-bottom: 1.8rem; - z-index: 1; -} - -.widget-error-header::before { - content: ''; - position: absolute; - inset: calc(0rem - (var(--widget-content-vertical-padding) / 2)) calc(0rem - (var(--widget-content-horizontal-padding) / 2)); - background: var(--color-negative); - opacity: 0.05; - border-radius: var(--border-radius); - z-index: -1; -} - -.widget-error-icon { - width: 2.4rem; - height: 2.4rem; - flex-shrink: 0; - stroke: var(--color-negative); - opacity: 0.6; -} - -.widget-content { - container-type: inline-size; - container-name: widget; -} - -.widget-content:not(.widget-content-frameless) { - padding: var(--widget-content-padding); -} - -.widget-content:not(.widget-content-frameless), .widget-content-frame { - background: var(--color-widget-background); - border-radius: var(--border-radius); - border: 1px solid var(--color-widget-content-border); - box-shadow: 0px 3px 0px 0px hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl)) - 0.5%)); -} - -.padding-widget { - padding: var(--widget-content-padding); -} - -.margin-bottom-widget { - margin-bottom: var(--widget-content-vertical-padding); -} - -.padding-block-widget { - padding-block: var(--widget-content-vertical-padding); -} - -.padding-inline-widget { - padding-inline: var(--widget-content-horizontal-padding); -} - -.widget-header { - padding: 0 calc(var(--widget-content-horizontal-padding) + 1px); - font-size: var(--font-size-h4); - margin-bottom: 0.9rem; - display: flex; - align-items: center; - gap: 1rem; -} - -.widget-beta-icon { - width: 1.6rem; - height: 1.6rem; - flex-shrink: 0; - transition: transform .45s, opacity .45s, stroke .45s; - opacity: 0.7; -} - -.widget-beta-icon:hover, .widget-header .popover-active > .widget-beta-icon { - fill: var(--color-text-highlight); - transform: translateY(-10%) scale(1.3); - opacity: 1; -} - -.widget + .widget { - margin-top: var(--widget-gap); -} - -.list-horizontal-text { - display: flex; - list-style: none; - flex-wrap: wrap; - align-items: center; -} - -.list-horizontal-text > *:not(:last-child)::after { - content: '•' / ""; - color: var(--color-text-subdue); - margin: 0 0.4rem; - position: relative; - top: 0.1rem; -} - -.header-container { - margin-top: calc(var(--widget-gap) / 2); - --header-height: 45px; - --header-items-gap: 2.5rem; -} - -.header { - display: flex; - height: var(--header-height); - gap: var(--header-items-gap); -} - -.logo { - height: 100%; - line-height: var(--header-height); - font-size: 2rem; - color: var(--color-text-highlight); - border-right: 1px solid var(--color-widget-content-border); - padding-right: var(--widget-content-horizontal-padding); -} - -.logo:has(img) { - display: flex; - align-items: center; -} - -.logo img { - max-height: 2.7rem; -} - -.nav { - height: 100%; - gap: var(--header-items-gap); -} - -.nav .nav-item { - line-height: var(--header-height); -} - -.footer { - padding-bottom: calc(var(--widget-gap) * 1.5); - padding-top: calc(var(--widget-gap) / 2); - animation: loadingContainerEntrance 200ms backwards; - animation-delay: 150ms; -} - -.mobile-navigation, .mobile-reachability-header { - display: none; -} - -.nav-item { - display: block; - height: 100%; - border-bottom: 2px solid transparent; - transition: color .3s, border-color .3s; - font-size: var(--font-size-h3); - flex-shrink: 0; -} - -.nav-item:not(.nav-item-current):hover { - border-bottom-color: var(--color-text-subdue); - color: var(--color-text-highlight); -} - -.nav-item.nav-item-current { - border-bottom-color: var(--color-primary); - color: var(--color-text-highlight); -} - -.release-source-icon { - width: 16px; - height: 16px; - flex-shrink: 0; - opacity: 0.4; -} - -.market-chart { - margin-left: auto; - width: 6.5rem; - flex-shrink: 0; -} - -.market-chart svg { - width: 100%; -} - -.market-values { - min-width: 8rem; -} - -.carousel-container { - position: relative; -} - -.carousel-container::before, .carousel-container::after { - content: ''; - position: absolute; - width: 2rem; - top: 0; - bottom: 1rem; - z-index: 10; - opacity: 0; - pointer-events: none; - transition-duration: 0.2s; -} - -.carousel-container::before { - left: 0; - background: linear-gradient(to right, var(--color-background), transparent); -} - -.carousel-container::after { - right: 0; - background: linear-gradient(to left, var(--color-background), transparent); -} - -.carousel-container.show-left-cutoff::before, .carousel-container.show-right-cutoff::after { - opacity: 1; -} - -.video-thumbnail { - width: 100%; - aspect-ratio: 16 / 8.9; - object-fit: cover; - border-radius: var(--border-radius) var(--border-radius) 0 0; -} - -.video-horizontal-list-thumbnail { - height: 4rem; - aspect-ratio: 16 / 8.9; - object-fit: cover; - border-radius: var(--border-radius); -} - -.search-icon { - width: 2.3rem; -} - -.search-icon-container { - position: relative; - flex-shrink: 0; -} - -/* gives a wider hit area for the 3 people that will notice the animation : ) */ -.search-icon-container::before { - content: ''; - position: absolute; - inset: -1rem; -} - -.search-icon-container:hover > .search-icon { - animation: searchIconHover 2.9s forwards; -} - -@keyframes searchIconHover { - 0%, 39% { translate: 0 0; } - 20% { scale: 1.3; } - 40% { scale: 1; } - 50% { translate: -30% 30%; } - 70% { translate: 30% -30%; } - 90% { translate: -30% -30%; } - 100% { translate: 0 0; } -} - -.search { - transition: border-color .2s; - position: relative; -} - -.search:hover { - border-color: var(--color-text-subdue); -} - -.search:focus-within { - border-color: var(--color-primary); -} - -.search-input { - border: 0; - background: none; - width: 100%; - height: 6rem; - font: inherit; - outline: none; - color: var(--color-text-highlight); -} - -.search-input::placeholder { - color: var(--color-text-base-muted); - opacity: 1; -} - -.search-bangs { display: none; } - -.search-bang { - border-radius: calc(var(--border-radius) * 2); - background: var(--color-widget-background-highlight); - padding: 0.3rem 1rem; - flex-shrink: 0; - font-size: var(--font-size-h5); - animation: searchBangsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; -} - -@keyframes searchBangsEntrance { - 0% { - opacity: 0; - transform: translateX(-10px); - } -} - -.search-bang:empty { - display: none; -} - -.forum-post-list-thumbnail { - flex-shrink: 0; - width: 6rem; - height: 4.1rem; - border-radius: var(--border-radius); - object-fit: cover; - border: 1px solid var(--color-separator); - margin-top: 0.1rem; -} - -.forum-post-tags-container { - transform: translateY(-0.15rem); -} - -@container widget (max-width: 550px) { - .forum-post-autohide { - display: none; - } -} - -.bookmarks-group { - --bookmarks-group-color: var(--color-primary); -} - -.bookmarks-group-title { - color: var(--bookmarks-group-color); -} - -.bookmarks-group .bookmarks-link::after { - color: var(--bookmarks-group-color); -} - -.bookmarks-icon-container { - margin-block: 0.1rem; - background-color: var(--color-widget-background-highlight); - border-radius: var(--border-radius); - padding: 0.5rem; - opacity: 0.7; - flex-shrink: 0; -} - -.bookmarks-icon { - width: 20px; - height: 20px; - opacity: 0.8; -} - -:root:not(.light-scheme) .flat-icon { - filter: invert(1); -} - -.old-calendar-day { - width: calc(100% / 7); - text-align: center; - padding: 0.6rem 0; -} - -.old-calendar-day-today { - border-radius: var(--border-radius); - background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) (var(--bgl)) + 6%))); - color: var(--color-text-highlight); -} - -.calendar-dates { - text-align: center; - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 2px; -} - -.calendar-date { - padding: 0.4rem 0; - color: var(--color-text-paragraph); - position: relative; - border-radius: var(--border-radius); - background: none; - border: none; - font: inherit; -} - -.calendar-current-date { - border-radius: var(--border-radius); - background-color: var(--color-popover-border); - color: var(--color-text-highlight); -} - -.calendar-spillover-date { - color: var(--color-text-subdue); -} - -.calendar-header-button { - position: relative; - cursor: pointer; - width: 2rem; - height: 2rem; - z-index: 1; - background: none; - border: none; -} - -.calendar-header-button::before { - content: ''; - position: absolute; - inset: -0.2rem; - border-radius: var(--border-radius); - background-color: var(--color-text-subdue); - opacity: 0; - transition: opacity 0.2s; - z-index: -1; -} - -.calendar-header-button:hover::before { - opacity: 0.4; -} - -.calendar-undo-button { - display: inline-block; - vertical-align: text-top; - width: 2rem; - height: 2rem; - margin-left: 0.7rem; -} - -.dns-stats-totals { - transition: opacity .3s; - transition-delay: 50ms; -} - -.dns-stats:has(.dns-stats-graph .popover-active) .dns-stats-totals { - opacity: 0.1; - transition-delay: 0s; -} - -.dns-stats-graph { - --graph-height: 70px; - height: var(--graph-height); - position: relative; - margin-bottom: 2.5rem; -} - -.dns-stats-graph-gridlines-container { - position: absolute; - inset: 0; -} - -.dns-stats-graph-gridlines { - height: 100%; - width: 100%; -} - -.dns-stats-graph-columns { - display: flex; - height: 100%; -} - -.dns-stats-graph-column { - display: flex; - justify-content: flex-end; - align-items: center; - flex-direction: column; - width: calc(100% / 8); - position: relative; -} - -.dns-stats-graph-column::before { - content: ''; - position: absolute; - inset: 1px 0; - opacity: 0; - background: var(--color-text-base); - transition: opacity .2s; -} - -.dns-stats-graph-column:hover::before { - opacity: 0.05; -} - -.dns-stats-graph-bar { - width: 14px; - height: calc((var(--bar-height) / 100) * var(--graph-height)); - border: 1px solid var(--color-progress-border); - border-radius: var(--border-radius) var(--border-radius) 0 0; - display: flex; - background: var(--color-widget-background); - padding: 2px 2px 0 2px; - flex-direction: column; - gap: 2px; - transition: border-color .2s; - min-height: 10px; -} - -.dns-stats-graph-column.popover-active .dns-stats-graph-bar { - border-color: var(--color-text-subdue); - border-bottom-color: var(--color-progress-border); -} - -.dns-stats-graph-bar > * { - border-radius: 2px; - background: var(--color-progress-value); - min-height: 1px; -} - -.dns-stats-graph-bar > .queries { - flex-grow: 1; -} - -.dns-stats-graph-bar > *:last-child { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.dns-stats-graph-bar > .blocked { - background-color: var(--color-negative); -} - -.dns-stats-graph-column:nth-child(even) .dns-stats-graph-time { - opacity: 1; - transform: translateY(0); -} - -.dns-stats-graph-time, .dns-stats-graph-columns:hover .dns-stats-graph-time { - position: absolute; - font-size: var(--font-size-h6); - inset-inline: 0; - text-align: center; - height: 2.5rem; - line-height: 2.5rem; - top: 100%; - user-select: none; - opacity: 0; - transform: translateY(-0.5rem); - transition: opacity .2s, transform .2s; -} - -.dns-stats-graph-column:hover .dns-stats-graph-time { - opacity: 1; - transform: translateY(0); -} - -.dns-stats-graph-columns:hover .dns-stats-graph-column:not(:hover) .dns-stats-graph-time { - opacity: 0; -} - -.weather-column { - position: relative; - display: flex; - align-items: center; - justify-content: end; - flex-direction: column; - width: calc(100% / 12); - padding-top: 3px; -} - -.weather-column-value, .weather-columns:hover .weather-column-value { - font-size: 13px; - color: var(--color-text-highlight); - letter-spacing: -0.1rem; - margin-right: 0.1rem; - position: relative; - margin-bottom: 0.3rem; - opacity: 0; - transform: translateY(0.5rem); - transition: opacity .2s, transform .2s; - user-select: none; -} - -.weather-column-current .weather-column-value, .weather-column:hover .weather-column-value { - opacity: 1; - transform: translateY(0); -} - -.weather-column-value::after { - position: absolute; - content: '°'; - left: 100%; - color: var(--color-text-subdue); -} - -.weather-column-value.weather-column-value-negative::before { - position: absolute; - content: '-'; - right: 100%; -} - -.weather-bar, .weather-columns:hover .weather-bar { - height: calc(20px + var(--weather-bar-height) * 40px); - width: 6px; - background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 18%))); - border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 24%))); - border-bottom: 0; - border-radius: 6px 6px 0 0; - mask-image: linear-gradient(0deg, transparent 0, #000 10px); - -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10px); - transition: background-color .2s, border-color .2s, width .2s; -} - -.weather-column-current .weather-bar, .weather-column:hover .weather-bar { - width: 10px; - background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); - border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 50%))); -} - -.weather-column-rain { - position: absolute; - inset: 0; - bottom: 20%; - overflow: hidden; - mask-image: linear-gradient(0deg, transparent 40%, #000); - -webkit-mask-image: linear-gradient(0deg, transparent 40%, #000); -} - -.weather-column-rain::before { - content: ''; - position: absolute; - /* TODO: figure out a way to make it look continuous between columns, right now - depending on the width of the page the rain inside two columns next to each other - can overlap and look bad */ - background: radial-gradient(circle at 4px 4px, hsl(200, 90%, 70%, 0.4) 1px, transparent 0); - background-size: 8px 8px; - transform: rotate(45deg) translate(-50%, 25%); - height: 130%; - aspect-ratio: 1; - left: 55%; -} - -.weather-column:nth-child(3) .weather-column-time, -.weather-column:nth-child(7) .weather-column-time, -.weather-column:nth-child(11) .weather-column-time { - opacity: 1; - transform: translateY(0); -} - -.weather-column-time, .weather-columns:hover .weather-column-time { - margin-top: 0.3rem; - font-size: var(--font-size-h6); - opacity: 0; - transform: translateY(-0.5rem); - transition: opacity .2s, transform .2s; - user-select: none; -} - -.weather-column:hover .weather-column-time { - opacity: 1; - transform: translateY(0); -} - -.weather-column-daylight { - position: absolute; - inset: 0; - background: linear-gradient(0deg, transparent 30px, hsl(50, 50%, 30%, 0.2)); -} - -.weather-column-daylight-sunrise { - border-radius: 20px 0 0 0; -} - -.weather-column-daylight-sunset { - border-radius: 0 20px 0 0; -} - -.location-icon { - width: 0.8em; - height: 0.8em; - border-radius: 0 50% 50% 50%; - background-color: currentColor; - transform: rotate(225deg) translate(.1em, .1em); - position: relative; - flex-shrink: 0; -} - -.location-icon::after { - content: ''; - position: absolute; - z-index: 2; - width: .4em; - height: .4em; - border-radius: 50%; - background-color: var(--color-widget-background); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.clock-time { - min-width: 8ch; -} - -.clock-time span { - color: var(--color-text-highlight); -} - -.monitor-site-icon { - display: block; - opacity: 0.8; - filter: grayscale(0.4); - object-fit: contain; - aspect-ratio: 1 / 1; - width: 3.2rem; - position: relative; - top: -0.1rem; - transition: filter 0.3s, opacity 0.3s; -} - -.monitor-site-icon.flat-icon { - opacity: 0.7; -} - -.monitor-site:hover .monitor-site-icon { - opacity: 1; -} - -.monitor-site:hover .monitor-site-icon:not(.flat-icon) { - filter: grayscale(0); -} - -.monitor-site-status-icon { - flex-shrink: 0; - margin-left: auto; - width: 2rem; - height: 2rem; -} - -.monitor-site-status-icon-compact { - width: 1.8rem; - height: 1.8rem; - flex-shrink: 0; -} - -.docker-container-icon { - display: block; - filter: grayscale(0.4); - object-fit: contain; - aspect-ratio: 1 / 1; - width: 2.7rem; - opacity: 0.8; - transition: filter 0.3s, opacity 0.3s; -} - -.docker-container-icon.flat-icon { - opacity: 0.7; -} - -.docker-container:hover .docker-container-icon { - opacity: 1; -} - -.docker-container:hover .docker-container-icon:not(.flat-icon) { - filter: grayscale(0); -} - -.docker-container-status-icon { - width: 2rem; - height: 2rem; -} - -.widget-type-server-info { - position: relative; -} - -.server + .server { - margin-top: 3rem; -} - -.server { - gap: 1rem; - display: flex; - flex-direction: column; -} - -.server-info { - align-items: center; - display: flex; - justify-content: space-between; - gap: 1.5rem; - flex-shrink: 1; - min-width: 0; -} - -.server-details { - min-width: 0; -} - -.server-icon { - height: 3rem; - width: 3rem; -} - -.server-spicy-cpu-icon { - height: 1em; - align-self: center; - margin-left: 0.4em; - margin-bottom: 0.2rem; -} - -.server-stats { - display: flex; - gap: 1.5rem; - margin-top: 0.5rem; -} - -.server-stat-unavailable { - opacity: 0.5; -} - -.progress-bar { - border: 1px solid var(--color-progress-border); - border-radius: var(--border-radius); - display: flex; - flex-direction: column; - gap: 2px; - padding: 2px; - height: 1.5rem; - margin-inline: -3px; /* naughty, but oh so beautiful */ -} - -.progress-bar-combined { - height: 3rem; -} - -.popover-active > .progress-bar { - transition: border-color .3s; - border-color: var(--color-text-subdue); -} - -.progress-value { - --half-border-radius: calc(var(--border-radius) / 2); - border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0; - background: var(--color-progress-value); - width: calc(var(--percent) * 1%); - min-width: 1px; - flex: 1; -} - -.progress-value:first-child { - border-top-left-radius: var(--half-border-radius); -} - -.progress-value:last-child { - border-bottom-left-radius: var(--half-border-radius); -} - -.progress-value-notice { - background: linear-gradient(to right, var(--color-progress-value) 65%, var(--color-negative)); -} - -.value-separator { - min-width: 2rem; - margin-inline: 0.8rem; - flex: 1; - height: calc(1em * 1.1); - border-bottom: 1px dotted var(--color-text-subdue); -} - -@container widget (min-width: 650px) { - .server { - gap: 2rem; - flex-direction: row; - align-items: center; - } - - .server + .server { - margin-top: 1rem; - } - - .server-info { - flex-direction: row-reverse; - justify-content: unset; - margin-right: auto; - z-index: 1; - } - - .server-stats { - flex-direction: row; - justify-content: right; - min-width: 450px; - margin-top: 0; - gap: 2rem; - padding-bottom: 0.8rem; - z-index: 1; - } - - .server-stats > * { - max-width: 200px; - } -} - -.thumbnail { - filter: grayscale(0.2) contrast(0.9); - opacity: 0.8; - transition: filter 0.2s, opacity .2s; -} - -.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; -} - -.rss-card-image { - 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; -} - -.rss-detailed-description { - max-width: 55rem; - color: var(--color-text-base-muted); -} - -.rss-detailed-thumbnail { - margin-top: 0.3rem; -} - -.rss-detailed-thumbnail > * { - aspect-ratio: 3 / 2; - height: 8.7rem; -} - -.twitch-category-thumbnail { - width: 5rem; - aspect-ratio: 3 / 4; - border-radius: var(--border-radius); -} - -.twitch-channel-avatar { - aspect-ratio: 1; - border-radius: 50%; -} - -.twitch-channel-avatar-container { - width: 4.4rem; - height: 4.4rem; - border: 2px solid var(--color-text-subdue); - padding: 2px; - border-radius: 50%; - position: relative; - flex-shrink: 0; -} - -.twitch-channel-live .twitch-channel-avatar-container { - border: 2px solid var(--color-positive); - margin-bottom: 1rem; -} - -.twitch-channel-live .twitch-channel-avatar-container::after { - content: 'LIVE'; - position: absolute; - background: var(--color-positive); - color: var(--color-widget-background); - font-size: var(--font-size-h6); - left: 50%; - bottom: -35%; - border-radius: var(--border-radius); - padding-inline: 0.3rem; - transform: translate(-50%); - border: 2px solid var(--color-widget-background); -} - -.twitch-stream-preview { - max-width: 100%; - width: 400px; - aspect-ratio: 16 / 9; - border-radius: var(--border-radius); - object-fit: cover; -} - -.reddit-card-thumbnail { - width: 100%; - height: 100%; - object-fit: cover; - object-position: 0% 20%; - opacity: 0.15; - filter: blur(1px); -} - -.reddit-card-thumbnail-container { - position: absolute; - inset: 0; - overflow: hidden; - border-radius: var(--border-radius); -} - -.reddit-card-thumbnail-container::after { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(0deg, var(--color-widget-background) 10%, transparent); -} - -@media (max-width: 1190px) { - .header-container { - display: none; - } - - .page-column-small .size-title-dynamic { - font-size: var(--font-size-h3); - } - - .page-column-small { - width: 100%; - flex-shrink: 1; - } - - .page-column { - display: none; - animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards; - } - - .page-columns-transitioned .page-column { - animation-duration: .3s; - } - - @keyframes columnEntrance { - from { - opacity: 0; - transform: scaleX(0.95); - } - } - - .mobile-navigation-offset { - height: var(--mobile-navigation-height); - flex-shrink: 0; - } - - .mobile-navigation { - display: block; - position: fixed; - 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; - } - - .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .hamburger-icon { - --spacing: 7px; - color: var(--color-primary); - 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; - overflow-x: auto; - scrollbar-width: thin; - gap: 2.5rem; - } - - .mobile-navigation-icons { - display: flex; - justify-content: space-around; - align-items: center; - } - - body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1), - body:has(.mobile-navigation-input[value="1"]:checked) .page-columns > :nth-child(2), - body:has(.mobile-navigation-input[value="2"]:checked) .page-columns > :nth-child(3) { - display: block; - } - - .mobile-navigation-label { - display: flex; - flex: 1; - 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 { - display: block; - background: var(--color-text-base); - height: 10px; - width: 10px; - border-radius: 10px; - transition: width .3s, background-color .3s; - } - - .mobile-navigation-label:hover > .mobile-navigation-pill { - background-color: var(--color-text-highlight); - } - - .mobile-navigation-label:hover { - color: var(--color-text-highlight); - } - - .mobile-navigation-input:checked + .mobile-navigation-pill { - background: var(--color-primary); - width: 30px; - } - - .mobile-navigation-input, .mobile-navigation-page-links-input { - display: none; - } - - .hamburger-icon { - --spacing: 4px; - width: 1em; - height: 1px; - background-color: currentColor; - transition: color .3s, box-shadow .3s; - box-shadow: 0 calc(var(--spacing) * -1) 0 0 currentColor, 0 var(--spacing) 0 0 currentColor; - } - - .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); - } - - .weather-column-rain::before { - background-size: 7px 7px; - } - - .ios .search-input { - /* so that iOS Safari does not zoom the page when the input is focused */ - font-size: 16px; - } -} - -@media (max-width: 1190px) and (display-mode: standalone) { - :root { - --safe-area-inset-bottom: env(safe-area-inset-bottom, 0); - } - - .ios .body-content { - height: 100dvh; - } - - .expand-toggle-button.container-expanded { - 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); - } - - .mobile-navigation-icons { - padding-bottom: var(--safe-area-inset-bottom); - transition: padding-bottom .3s; - } - - .mobile-navigation-offset { - height: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); - } - - .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; - --widget-gap: 15px; - --widget-content-vertical-padding: 10px; - --widget-content-horizontal-padding: 10px; - --content-bounds-padding: 10px; - } - - .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } - - .row-reverse-on-mobile { - flex-direction: row-reverse; - } - - .hide-on-mobile, .thumbnail-container:has(> .hide-on-mobile) { - display: none - } - - .mobile-reachability-header { - display: block; - font-size: 3rem; - padding: 10vh 1rem; - text-align: center; - 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 { - line-clamp: 3; - -webkit-line-clamp: 3; - } -} - -.size-h1 { font-size: var(--font-size-h1); } -.size-h2 { font-size: var(--font-size-h2); } -.size-h3 { font-size: var(--font-size-h3); } -.size-h4 { font-size: var(--font-size-h4); } -.size-base { font-size: var(--font-size-base); } -.size-h5 { font-size: var(--font-size-h5); } -.size-h6 { font-size: var(--font-size-h6); } - -.color-highlight { color: var(--color-text-highlight); } -.color-paragraph { color: var(--color-text-paragraph); } -.color-base { color: var(--color-text-base); } -.color-subdue { color: var(--color-text-subdue); } -.color-negative { color: var(--color-negative); } -.color-positive { color: var(--color-positive); } -.color-primary { color: var(--color-primary); } - -.cursor-help { cursor: help; } -.break-all { word-break: break-all; } -.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; } -.text-very-compact { word-spacing: -0.35em; } -.rtl { direction: rtl; } -.shrink { flex-shrink: 1; } -.shrink-0 { flex-shrink: 0; } -.min-width-0 { min-width: 0; } -.max-width-100 { max-width: 100%; } -.block { display: block; } -.inline-block { display: inline-block; } -.overflow-hidden { overflow: hidden; } -.relative { position: relative; } -.flex { display: flex; } -.flex-1 { flex: 1; } -.flex-wrap { flex-wrap: wrap; } -.flex-nowrap { flex-wrap: nowrap; } -.justify-between { justify-content: space-between; } -.justify-stretch { justify-content: stretch; } -.justify-evenly { justify-content: space-evenly; } -.justify-center { justify-content: center; } -.justify-end { justify-content: end; } -.uppercase { text-transform: uppercase; } -.grow { flex-grow: 1; } -.flex-column { flex-direction: column; } -.items-center { align-items: center; } -.items-start { align-items: start; } -.items-end { align-items: end; } -.gap-5 { gap: 0.5rem; } -.gap-7 { gap: 0.7rem; } -.gap-10 { gap: 1rem; } -.gap-12 { gap: 1.2rem; } -.gap-15 { gap: 1.5rem; } -.gap-20 { gap: 2rem; } -.gap-25 { gap: 2.5rem; } -.gap-35 { gap: 3.5rem; } -.gap-45 { gap: 4.5rem; } -.gap-55 { gap: 5.5rem; } -.margin-left-auto { margin-left: auto; } -.margin-top-3 { margin-top: 0.3rem; } -.margin-top-5 { margin-top: 0.5rem; } -.margin-top-7 { margin-top: 0.7rem; } -.margin-top-10 { margin-top: 1rem; } -.margin-top-15 { margin-top: 1.5rem; } -.margin-top-20 { margin-top: 2rem; } -.margin-top-25 { margin-top: 2.5rem; } -.margin-top-35 { margin-top: 3.5rem; } -.margin-top-40 { margin-top: 4rem; } -.margin-top-auto { margin-top: auto; } -.margin-block-3 { margin-block: 0.3rem; } -.margin-block-5 { margin-block: 0.5rem; } -.margin-block-7 { margin-block: 0.7rem; } -.margin-block-8 { margin-block: 0.8rem; } -.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; } -.margin-bottom-10 { margin-bottom: 1rem; } -.margin-bottom-15 { margin-bottom: 1.5rem; } -.margin-bottom-auto { margin-bottom: auto; } -.padding-block-5 { padding-block: 0.5rem; } -.scale-half { transform: scale(0.5); } -.list { --list-half-gap: 0rem; } -.list-gap-2 { --list-half-gap: 0.1rem; } -.list-gap-4 { --list-half-gap: 0.2rem; } -.list-gap-8 { --list-half-gap: 0.4rem; } -.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-gap-34 { --list-half-gap: 1.7rem; } diff --git a/internal/glance/static/manifest.json b/internal/glance/static/manifest.json deleted file mode 100644 index 42e8213..0000000 --- a/internal/glance/static/manifest.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "Glance", - "display": "standalone", - "background_color": "#151519", - "scope": "/", - "start_url": "/", - "icons": [ - { - "src": "app-icon.png", - "type": "image/png", - "sizes": "512x512" - } - ] -} diff --git a/internal/glance/templates.go b/internal/glance/templates.go index ec8d0f3..8164eb0 100644 --- a/internal/glance/templates.go +++ b/internal/glance/templates.go @@ -5,6 +5,7 @@ import ( "html/template" "math" "strconv" + "strings" "golang.org/x/text/language" "golang.org/x/text/message" @@ -27,6 +28,9 @@ var globalTemplateFunctions = template.FuncMap{ "formatPrice": func(price float64) string { return intl.Sprintf("%.2f", price) }, + "formatPriceWithPrecision": func(precision int, price float64) string { + return intl.Sprintf("%."+strconv.Itoa(precision)+"f", price) + }, "dynamicRelativeTimeAttrs": dynamicRelativeTimeAttrs, "formatServerMegabytes": func(mb uint64) template.HTML { var value string @@ -50,6 +54,7 @@ var globalTemplateFunctions = template.FuncMap{ return template.HTML(value + ` ` + label + ``) }, + "hasPrefix": strings.HasPrefix, } func mustParseTemplate(primary string, dependencies ...string) *template.Template { diff --git a/internal/glance/templates/dns-stats.html b/internal/glance/templates/dns-stats.html index feb90f9..bb4222c 100644 --- a/internal/glance/templates/dns-stats.html +++ b/internal/glance/templates/dns-stats.html @@ -59,8 +59,8 @@ {{ if ne $column.Queries $column.Blocked }}
{{ end }} - {{ if or (gt $column.Blocked 0) (and (lt $column.PercentTotal 15) (lt $column.PercentBlocked 10)) }} -
+ {{ if gt $column.PercentBlocked 0 }} +
{{ end }} {{ end }} diff --git a/internal/glance/templates/docker-containers.html b/internal/glance/templates/docker-containers.html index 991d66d..afbbb17 100644 --- a/internal/glance/templates/docker-containers.html +++ b/internal/glance/templates/docker-containers.html @@ -1,10 +1,10 @@ {{ template "widget-base.html" . }} {{- define "widget-content" }} -
+ {{- end }} {{- define "state-icon" }} {{- if eq . "ok" }} - + {{- else if eq . "warn" }} - + {{- else if eq . "paused" }} - + {{- else }} - + {{- end }} diff --git a/internal/glance/templates/document.html b/internal/glance/templates/document.html index a26f854..4530827 100644 --- a/internal/glance/templates/document.html +++ b/internal/glance/templates/document.html @@ -10,13 +10,13 @@ - - - - + + + + - - + + {{ block "document-head-after" . }}{{ end }} diff --git a/internal/glance/templates/manifest.json b/internal/glance/templates/manifest.json new file mode 100644 index 0000000..124f330 --- /dev/null +++ b/internal/glance/templates/manifest.json @@ -0,0 +1,15 @@ +{ + "name": "{{ .App.Config.Branding.AppName }}", + "display": "standalone", + "background_color": "{{ .App.Config.Branding.AppBackgroundColor }}", + "theme_color": "{{ .App.Config.Branding.AppBackgroundColor }}", + "scope": "/", + "start_url": "/", + "icons": [ + { + "src": "{{ .App.Config.Branding.AppIconURL }}", + "type": "image/png", + "sizes": "512x512" + } + ] +} diff --git a/internal/glance/templates/markets.html b/internal/glance/templates/markets.html index a979321..cd8da49 100644 --- a/internal/glance/templates/markets.html +++ b/internal/glance/templates/markets.html @@ -17,7 +17,7 @@
{{ printf "%+.2f" .PercentChange }}%
-
{{ .Currency }}{{ .Price | formatPrice }}
+
{{ .Currency }}{{ .Price | formatPriceWithPrecision .PriceHint }}
{{ end }} diff --git a/internal/glance/templates/page.html b/internal/glance/templates/page.html index 90f7177..24baf78 100644 --- a/internal/glance/templates/page.html +++ b/internal/glance/templates/page.html @@ -11,13 +11,13 @@ {{ end }} -{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if ne "" .Page.Width }}page-width-{{ .Page.Width }} {{ end }}{{ if .Page.CenterVertically }}page-center-vertically{{ end }}"{{ end }} +{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if .Page.CenterVertically }}page-center-vertically{{ end }}"{{ end }} {{ define "document-head-after" }} {{ .App.ParsedThemeStyle }} {{ if ne "" .App.Config.Theme.CustomCSSFile }} - + {{ end }} {{ if ne "" .App.Config.Document.Head }}{{ .App.Config.Document.Head }}{{ end }} @@ -32,7 +32,7 @@ {{ define "document-body" }}
{{ if not .Page.HideDesktopNavigation }} -
+
@@ -56,7 +56,7 @@
-
+

{{ .Page.Title }}

diff --git a/internal/glance/templates/search.html b/internal/glance/templates/search.html index 6e8fc43..ae981c6 100644 --- a/internal/glance/templates/search.html +++ b/internal/glance/templates/search.html @@ -3,7 +3,7 @@ {{ define "widget-content-classes" }}widget-content-frameless{{ end }} {{ define "widget-content" }} -
+
{{ range .Bangs }} diff --git a/internal/glance/templates/videos-vertical-list.html b/internal/glance/templates/videos-vertical-list.html index b7ea6b2..a735a74 100644 --- a/internal/glance/templates/videos-vertical-list.html +++ b/internal/glance/templates/videos-vertical-list.html @@ -6,7 +6,7 @@
  • - {{ .Title }} + {{ .Title }}
    • diff --git a/internal/glance/utils.go b/internal/glance/utils.go index 8455bfe..2f76965 100644 --- a/internal/glance/utils.go +++ b/internal/glance/utils.go @@ -4,6 +4,7 @@ import ( "bytes" "fmt" "html/template" + "math" "net/http" "net/url" "os" @@ -119,14 +120,6 @@ func parseRFC3339Time(t string) time.Time { return parsed } -func boolToString(b bool, trueValue, falseValue string) string { - if b { - return trueValue - } - - return falseValue -} - func normalizeVersionFormat(version string) string { version = strings.ToLower(strings.TrimSpace(version)) @@ -186,3 +179,62 @@ func ternary[T any](condition bool, a, b T) T { return b } + +// Having compile time errors about unused variables is cool and all, but I don't want to +// have to constantly comment out my code while I'm working on it and testing things out +func ItsUsedTrustMeBro(...any) {} + +func hslToHex(h, s, l float64) string { + s /= 100.0 + l /= 100.0 + + var r, g, b float64 + + if s == 0 { + r, g, b = l, l, l + } else { + hueToRgb := func(p, q, t float64) float64 { + if t < 0 { + t += 1 + } + if t > 1 { + t -= 1 + } + if t < 1.0/6.0 { + return p + (q-p)*6.0*t + } + if t < 1.0/2.0 { + return q + } + if t < 2.0/3.0 { + return p + (q-p)*(2.0/3.0-t)*6.0 + } + return p + } + + q := 0.0 + if l < 0.5 { + q = l * (1 + s) + } else { + q = l + s - l*s + } + + p := 2*l - q + + h /= 360.0 + + r = hueToRgb(p, q, h+1.0/3.0) + g = hueToRgb(p, q, h) + b = hueToRgb(p, q, h-1.0/3.0) + } + + ir := int(math.Round(r * 255.0)) + ig := int(math.Round(g * 255.0)) + ib := int(math.Round(b * 255.0)) + + ir = int(math.Max(0, math.Min(255, float64(ir)))) + ig = int(math.Max(0, math.Min(255, float64(ig)))) + ib = int(math.Max(0, math.Min(255, float64(ib)))) + + return fmt.Sprintf("#%02x%02x%02x", ir, ig, ib) +} diff --git a/internal/glance/widget-custom-api.go b/internal/glance/widget-custom-api.go index 32f47b4..3c58b7e 100644 --- a/internal/glance/widget-custom-api.go +++ b/internal/glance/widget-custom-api.go @@ -3,6 +3,7 @@ package glance import ( "bytes" "context" + "encoding/json" "errors" "fmt" "html/template" @@ -10,6 +11,9 @@ import ( "log/slog" "math" "net/http" + "regexp" + "sort" + "strconv" "strings" "sync" "time" @@ -21,10 +25,16 @@ var customAPIWidgetTemplate = mustParseTemplate("custom-api.html", "widget-base. // Needs to be exported for the YAML unmarshaler to work type CustomAPIRequest struct { - URL string `json:"url"` - Headers map[string]string `json:"headers"` - Parameters queryParametersField `json:"parameters"` - httpRequest *http.Request `yaml:"-"` + URL string `yaml:"url"` + AllowInsecure bool `yaml:"allow-insecure"` + Headers map[string]string `yaml:"headers"` + Parameters queryParametersField `yaml:"parameters"` + Method string `yaml:"method"` + BodyType string `yaml:"body-type"` + Body any `yaml:"body"` + SkipJSONValidation bool `yaml:"skip-json-validation"` + bodyReader io.ReadSeeker `yaml:"-"` + httpRequest *http.Request `yaml:"-"` } type customAPIWidget struct { @@ -82,7 +92,41 @@ func (req *CustomAPIRequest) initialize() error { return errors.New("URL is required") } - httpReq, err := http.NewRequest(http.MethodGet, req.URL, nil) + if req.Body != nil { + if req.Method == "" { + req.Method = http.MethodPost + } + + if req.BodyType == "" { + req.BodyType = "json" + } + + if req.BodyType != "json" && req.BodyType != "string" { + return errors.New("invalid body type, must be either 'json' or 'string'") + } + + switch req.BodyType { + case "json": + encoded, err := json.Marshal(req.Body) + if err != nil { + return fmt.Errorf("marshaling body: %v", err) + } + + req.bodyReader = bytes.NewReader(encoded) + case "string": + bodyAsString, ok := req.Body.(string) + if !ok { + return errors.New("body must be a string when body-type is 'string'") + } + + req.bodyReader = strings.NewReader(bodyAsString) + } + + } else if req.Method == "" { + req.Method = http.MethodGet + } + + httpReq, err := http.NewRequest(strings.ToUpper(req.Method), req.URL, req.bodyReader) if err != nil { return err } @@ -91,6 +135,10 @@ func (req *CustomAPIRequest) initialize() error { httpReq.URL.RawQuery = req.Parameters.toQueryString() } + if req.BodyType == "json" { + httpReq.Header.Set("Content-Type", "application/json") + } + for key, value := range req.Headers { httpReq.Header.Add(key, value) } @@ -110,6 +158,17 @@ type customAPITemplateData struct { subrequests map[string]*customAPIResponseData } +func (data *customAPITemplateData) JSONLines() []decoratedGJSONResult { + result := make([]decoratedGJSONResult, 0, 5) + + gjson.ForEachLine(data.JSON.Raw, func(line gjson.Result) bool { + result = append(result, decoratedGJSONResult{line}) + return true + }) + + return result +} + func (data *customAPITemplateData) Subrequest(key string) *customAPIResponseData { req, exists := data.subrequests[key] if !exists { @@ -125,7 +184,12 @@ func (data *customAPITemplateData) Subrequest(key string) *customAPIResponseData } func fetchCustomAPIRequest(ctx context.Context, req *CustomAPIRequest) (*customAPIResponseData, error) { - resp, err := defaultHTTPClient.Do(req.httpRequest.WithContext(ctx)) + if req.bodyReader != nil { + req.bodyReader.Seek(0, io.SeekStart) + } + + client := ternary(req.AllowInsecure, defaultInsecureHTTPClient, defaultHTTPClient) + resp, err := client.Do(req.httpRequest.WithContext(ctx)) if err != nil { return nil, err } @@ -138,14 +202,19 @@ func fetchCustomAPIRequest(ctx context.Context, req *CustomAPIRequest) (*customA body := strings.TrimSpace(string(bodyBytes)) - if body != "" && !gjson.Valid(body) { - truncatedBody, isTruncated := limitStringLength(body, 100) - if isTruncated { - truncatedBody += "... " + if !req.SkipJSONValidation && body != "" && !gjson.Valid(body) { + if 200 <= resp.StatusCode && resp.StatusCode < 300 { + truncatedBody, isTruncated := limitStringLength(body, 100) + if isTruncated { + truncatedBody += "... " + } + + slog.Error("Invalid response JSON in custom API widget", "url", req.httpRequest.URL.String(), "body", truncatedBody) + return nil, errors.New("invalid response JSON") } - slog.Error("Invalid response JSON in custom API widget", "url", req.httpRequest.URL.String(), "body", truncatedBody) - return nil, errors.New("invalid response JSON") + return nil, errors.New(fmt.Sprintf("%d %s", resp.StatusCode, http.StatusText(resp.StatusCode))) + } data := &customAPIResponseData{ @@ -247,7 +316,7 @@ func gJsonResultArrayToDecoratedResultArray(results []gjson.Result) []decoratedG } func (r *decoratedGJSONResult) Exists(key string) bool { - return r.Get(key).Exists() + return r.Result.Get(key).Exists() } func (r *decoratedGJSONResult) Array(key string) []decoratedGJSONResult { @@ -255,7 +324,7 @@ func (r *decoratedGJSONResult) Array(key string) []decoratedGJSONResult { return gJsonResultArrayToDecoratedResultArray(r.Result.Array()) } - return gJsonResultArrayToDecoratedResultArray(r.Get(key).Array()) + return gJsonResultArrayToDecoratedResultArray(r.Result.Get(key).Array()) } func (r *decoratedGJSONResult) String(key string) string { @@ -263,15 +332,15 @@ func (r *decoratedGJSONResult) String(key string) string { return r.Result.String() } - return r.Get(key).String() + return r.Result.Get(key).String() } -func (r *decoratedGJSONResult) Int(key string) int64 { +func (r *decoratedGJSONResult) Int(key string) int { if key == "" { - return r.Result.Int() + return int(r.Result.Int()) } - return r.Get(key).Int() + return int(r.Result.Get(key).Int()) } func (r *decoratedGJSONResult) Float(key string) float64 { @@ -279,7 +348,7 @@ func (r *decoratedGJSONResult) Float(key string) float64 { return r.Result.Float() } - return r.Get(key).Float() + return r.Result.Get(key).Float() } func (r *decoratedGJSONResult) Bool(key string) bool { @@ -287,55 +356,219 @@ func (r *decoratedGJSONResult) Bool(key string) bool { return r.Result.Bool() } - return r.Get(key).Bool() + return r.Result.Get(key).Bool() +} + +func (r *decoratedGJSONResult) Get(key string) *decoratedGJSONResult { + return &decoratedGJSONResult{r.Result.Get(key)} +} + +func customAPIDoMathOp[T int | float64](a, b T, op string) T { + switch op { + case "add": + return a + b + case "sub": + return a - b + case "mul": + return a * b + case "div": + if b == 0 { + return 0 + } + return a / b + } + return 0 } var customAPITemplateFuncs = func() template.FuncMap { - funcs := template.FuncMap{ - "toFloat": func(a int64) float64 { - return float64(a) - }, - "toInt": func(a float64) int64 { - return int64(a) - }, - "add": func(a, b float64) float64 { - return a + b - }, - "sub": func(a, b float64) float64 { - return a - b - }, - "mul": func(a, b float64) float64 { - return a * b - }, - "div": func(a, b float64) float64 { - if b == 0 { + var regexpCacheMu sync.Mutex + var regexpCache = make(map[string]*regexp.Regexp) + + getCachedRegexp := func(pattern string) *regexp.Regexp { + regexpCacheMu.Lock() + defer regexpCacheMu.Unlock() + + regex, exists := regexpCache[pattern] + if !exists { + regex = regexp.MustCompile(pattern) + regexpCache[pattern] = regex + } + + return regex + } + + doMathOpWithAny := func(a, b any, op string) any { + switch at := a.(type) { + case int: + switch bt := b.(type) { + case int: + return customAPIDoMathOp(at, bt, op) + case float64: + return customAPIDoMathOp(float64(at), bt, op) + default: return math.NaN() } + case float64: + switch bt := b.(type) { + case int: + return customAPIDoMathOp(at, float64(bt), op) + case float64: + return customAPIDoMathOp(at, bt, op) + default: + return math.NaN() + } + default: + return math.NaN() + } + } - return a / b + funcs := template.FuncMap{ + "toFloat": func(a int) float64 { + return float64(a) + }, + "toInt": func(a float64) int { + return int(a) + }, + "add": func(a, b any) any { + return doMathOpWithAny(a, b, "add") + }, + "sub": func(a, b any) any { + return doMathOpWithAny(a, b, "sub") + }, + "mul": func(a, b any) any { + return doMathOpWithAny(a, b, "mul") + }, + "div": func(a, b any) any { + return doMathOpWithAny(a, b, "div") + }, + "now": func() time.Time { + return time.Now() + }, + "offsetNow": func(offset string) time.Time { + d, err := time.ParseDuration(offset) + if err != nil { + return time.Now() + } + return time.Now().Add(d) + }, + "duration": func(str string) time.Duration { + d, err := time.ParseDuration(str) + if err != nil { + return 0 + } + + return d }, "parseTime": func(layout, value string) time.Time { - switch strings.ToLower(layout) { - case "rfc3339": - layout = time.RFC3339 - case "rfc3339nano": - layout = time.RFC3339Nano - case "datetime": - layout = time.DateTime - case "dateonly": - layout = time.DateOnly - case "timeonly": - layout = time.TimeOnly - } - - parsed, err := time.Parse(layout, value) - if err != nil { - return time.Unix(0, 0) - } - - return parsed + return customAPIFuncParseTimeInLocation(layout, value, time.UTC) + }, + "parseLocalTime": func(layout, value string) time.Time { + return customAPIFuncParseTimeInLocation(layout, value, time.Local) }, "toRelativeTime": dynamicRelativeTimeAttrs, + "parseRelativeTime": func(layout, value string) template.HTMLAttr { + // Shorthand to do both of the above with a single function call + return dynamicRelativeTimeAttrs(customAPIFuncParseTimeInLocation(layout, value, time.UTC)) + }, + // The reason we flip the parameter order is so that you can chain multiple calls together like this: + // {{ .JSON.String "foo" | trimPrefix "bar" | doSomethingElse }} + // instead of doing this: + // {{ trimPrefix (.JSON.String "foo") "bar" | doSomethingElse }} + // since the piped value gets passed as the last argument to the function. + "trimPrefix": func(prefix, s string) string { + return strings.TrimPrefix(s, prefix) + }, + "trimSuffix": func(suffix, s string) string { + return strings.TrimSuffix(s, suffix) + }, + "trimSpace": strings.TrimSpace, + "replaceAll": func(old, new, s string) string { + return strings.ReplaceAll(s, old, new) + }, + "replaceMatches": func(pattern, replacement, s string) string { + if s == "" { + return "" + } + + return getCachedRegexp(pattern).ReplaceAllString(s, replacement) + }, + "findMatch": func(pattern, s string) string { + if s == "" { + return "" + } + + return getCachedRegexp(pattern).FindString(s) + }, + "findSubmatch": func(pattern, s string) string { + if s == "" { + return "" + } + + regex := getCachedRegexp(pattern) + return itemAtIndexOrDefault(regex.FindStringSubmatch(s), 1, "") + }, + "sortByString": func(key, order string, results []decoratedGJSONResult) []decoratedGJSONResult { + sort.Slice(results, func(a, b int) bool { + if order == "asc" { + return results[a].String(key) < results[b].String(key) + } + + return results[a].String(key) > results[b].String(key) + }) + + return results + }, + "sortByInt": func(key, order string, results []decoratedGJSONResult) []decoratedGJSONResult { + sort.Slice(results, func(a, b int) bool { + if order == "asc" { + return results[a].Int(key) < results[b].Int(key) + } + + return results[a].Int(key) > results[b].Int(key) + }) + + return results + }, + "sortByFloat": func(key, order string, results []decoratedGJSONResult) []decoratedGJSONResult { + sort.Slice(results, func(a, b int) bool { + if order == "asc" { + return results[a].Float(key) < results[b].Float(key) + } + + return results[a].Float(key) > results[b].Float(key) + }) + + return results + }, + "sortByTime": func(key, layout, order string, results []decoratedGJSONResult) []decoratedGJSONResult { + sort.Slice(results, func(a, b int) bool { + timeA := customAPIFuncParseTimeInLocation(layout, results[a].String(key), time.UTC) + timeB := customAPIFuncParseTimeInLocation(layout, results[b].String(key), time.UTC) + + if order == "asc" { + return timeA.Before(timeB) + } + + return timeA.After(timeB) + }) + + return results + }, + "concat": func(items ...string) string { + return strings.Join(items, "") + }, + "unique": func(key string, results []decoratedGJSONResult) []decoratedGJSONResult { + seen := make(map[string]struct{}) + out := make([]decoratedGJSONResult, 0, len(results)) + for _, result := range results { + val := result.String(key) + if _, ok := seen[val]; !ok { + seen[val] = struct{}{} + out = append(out, result) + } + } + return out + }, } for key, value := range globalTemplateFunctions { @@ -346,3 +579,30 @@ var customAPITemplateFuncs = func() template.FuncMap { return funcs }() + +func customAPIFuncParseTimeInLocation(layout, value string, loc *time.Location) time.Time { + switch strings.ToLower(layout) { + case "unix": + asInt, err := strconv.ParseInt(value, 10, 64) + if err != nil { + return time.Unix(0, 0) + } + + return time.Unix(asInt, 0) + case "rfc3339": + layout = time.RFC3339 + case "rfc3339nano": + layout = time.RFC3339Nano + case "datetime": + layout = time.DateTime + case "dateonly": + layout = time.DateOnly + } + + parsed, err := time.ParseInLocation(layout, value, loc) + if err != nil { + return time.Unix(0, 0) + } + + return parsed +} diff --git a/internal/glance/widget-dns-stats.go b/internal/glance/widget-dns-stats.go index 68b6ac2..7311b1b 100644 --- a/internal/glance/widget-dns-stats.go +++ b/internal/glance/widget-dns-stats.go @@ -1,14 +1,18 @@ package glance import ( + "bytes" "context" "encoding/json" "errors" + "fmt" "html/template" + "io" "log/slog" "net/http" "sort" "strings" + "sync" "time" ) @@ -23,8 +27,9 @@ const ( type dnsStatsWidget struct { widgetBase `yaml:",inline"` - TimeLabels [8]string `yaml:"-"` - Stats *dnsStats `yaml:"-"` + TimeLabels [8]string `yaml:"-"` + Stats *dnsStats `yaml:"-"` + piholeSessionID string `yaml:"-"` HourFormat string `yaml:"hour-format"` HideGraph bool `yaml:"hide-graph"` @@ -37,11 +42,18 @@ type dnsStatsWidget struct { Password string `yaml:"password"` } +const ( + dnsServiceAdguard = "adguard" + dnsServicePihole = "pihole" + dnsServiceTechnitium = "technitium" + dnsServicePiholeV6 = "pihole-v6" +) + func makeDNSWidgetTimeLabels(format string) [8]string { now := time.Now() - var labels [8]string + var labels [dnsStatsBars]string - for h := 24; h > 0; h -= 3 { + for h := dnsStatsHoursSpan; h > 0; h -= dnsStatsHoursPerBar { labels[7-(h/3-1)] = strings.ToLower(now.Add(-time.Duration(h) * time.Hour).Format(format)) } @@ -49,17 +61,24 @@ func makeDNSWidgetTimeLabels(format string) [8]string { } func (widget *dnsStatsWidget) initialize() error { + titleURL := strings.TrimRight(widget.URL, "/") + switch widget.Service { + case dnsServicePihole, dnsServicePiholeV6: + titleURL = titleURL + "/admin" + } + widget. withTitle("DNS Stats"). - withTitleURL(string(widget.URL)). + withTitleURL(titleURL). withCacheDuration(10 * time.Minute) switch widget.Service { - case "adguard": - case "pihole": - case "technitium": + case dnsServiceAdguard: + case dnsServicePiholeV6: + case dnsServicePihole: + case dnsServiceTechnitium: default: - return errors.New("service must be either 'adguard', 'pihole', or 'technitium'") + return fmt.Errorf("service must be one of: %s, %s, %s, %s", dnsServiceAdguard, dnsServicePihole, dnsServicePiholeV6, dnsServiceTechnitium) } return nil @@ -70,12 +89,25 @@ func (widget *dnsStatsWidget) update(ctx context.Context) { var err error switch widget.Service { - case "adguard": + case dnsServiceAdguard: stats, err = fetchAdguardStats(widget.URL, widget.AllowInsecure, widget.Username, widget.Password, widget.HideGraph) - case "pihole": - stats, err = fetchPiholeStats(widget.URL, widget.AllowInsecure, widget.Token, widget.HideGraph) - case "technitium": + case dnsServicePihole: + stats, err = fetchPihole5Stats(widget.URL, widget.AllowInsecure, widget.Token, widget.HideGraph) + case dnsServiceTechnitium: stats, err = fetchTechnitiumStats(widget.URL, widget.AllowInsecure, widget.Token, widget.HideGraph) + case dnsServicePiholeV6: + var newSessionID string + stats, newSessionID, err = fetchPiholeStats( + widget.URL, + widget.AllowInsecure, + widget.Password, + widget.piholeSessionID, + !widget.HideGraph, + !widget.HideTopDomains, + ) + if err == nil { + widget.piholeSessionID = newSessionID + } } if !widget.canContinueUpdateAfterHandlingErr(err) { @@ -97,11 +129,11 @@ func (widget *dnsStatsWidget) Render() template.HTML { type dnsStats struct { TotalQueries int - BlockedQueries int + BlockedQueries int // we don't actually use this anywhere in templates, maybe remove it later? BlockedPercent int ResponseTime int DomainsBlocked int - Series [8]dnsStatsSeries + Series [dnsStatsBars]dnsStatsSeries TopBlockedDomains []dnsStatsBlockedDomain } @@ -136,13 +168,7 @@ func fetchAdguardStats(instanceURL string, allowInsecure bool, username, passwor request.SetBasicAuth(username, password) - var client requestDoer - if !allowInsecure { - client = defaultHTTPClient - } else { - client = defaultInsecureHTTPClient - } - + var client = ternary(allowInsecure, defaultInsecureHTTPClient, defaultHTTPClient) responseJson, err := decodeJsonFromRequest[adguardStatsResponse](client, request) if err != nil { return nil, err @@ -163,7 +189,7 @@ func fetchAdguardStats(instanceURL string, allowInsecure bool, username, passwor stats.BlockedPercent = int(float64(responseJson.BlockedQueries) / float64(responseJson.TotalQueries) * 100) - for i := 0; i < topBlockedDomainsCount; i++ { + for i := range topBlockedDomainsCount { domain := responseJson.TopBlockedDomains[i] var firstDomain string @@ -206,11 +232,11 @@ func fetchAdguardStats(instanceURL string, allowInsecure bool, username, passwor maxQueriesInSeries := 0 - for i := 0; i < dnsStatsBars; i++ { + for i := range dnsStatsBars { queries := 0 blocked := 0 - for j := 0; j < dnsStatsHoursPerBar; j++ { + for j := range dnsStatsHoursPerBar { queries += queriesSeries[i*dnsStatsHoursPerBar+j] blocked += blockedSeries[i*dnsStatsHoursPerBar+j] } @@ -229,35 +255,36 @@ func fetchAdguardStats(instanceURL string, allowInsecure bool, username, passwor } } - for i := 0; i < dnsStatsBars; i++ { + for i := range dnsStatsBars { stats.Series[i].PercentTotal = int(float64(stats.Series[i].Queries) / float64(maxQueriesInSeries) * 100) } return stats, nil } -type piholeStatsResponse struct { - TotalQueries int `json:"dns_queries_today"` - QueriesSeries piholeQueriesSeries `json:"domains_over_time"` - BlockedQueries int `json:"ads_blocked_today"` - BlockedSeries map[int64]int `json:"ads_over_time"` - BlockedPercentage float64 `json:"ads_percentage_today"` - TopBlockedDomains piholeTopBlockedDomains `json:"top_ads"` - DomainsBlocked int `json:"domains_being_blocked"` +// Legacy Pi-hole stats response (before v6) +type pihole5StatsResponse struct { + TotalQueries int `json:"dns_queries_today"` + QueriesSeries pihole5QueriesSeries `json:"domains_over_time"` + BlockedQueries int `json:"ads_blocked_today"` + BlockedSeries map[int64]int `json:"ads_over_time"` + BlockedPercentage float64 `json:"ads_percentage_today"` + TopBlockedDomains pihole5TopBlockedDomains `json:"top_ads"` + DomainsBlocked int `json:"domains_being_blocked"` } // If the user has query logging disabled it's possible for domains_over_time to be returned as an // empty array rather than a map which will prevent unmashalling the rest of the data so we use // custom unmarshal behavior to fallback to an empty map. // See https://github.com/glanceapp/glance/issues/289 -type piholeQueriesSeries map[int64]int +type pihole5QueriesSeries map[int64]int -func (p *piholeQueriesSeries) UnmarshalJSON(data []byte) error { +func (p *pihole5QueriesSeries) UnmarshalJSON(data []byte) error { temp := make(map[int64]int) err := json.Unmarshal(data, &temp) if err != nil { - *p = make(piholeQueriesSeries) + *p = make(pihole5QueriesSeries) } else { *p = temp } @@ -267,16 +294,16 @@ func (p *piholeQueriesSeries) UnmarshalJSON(data []byte) error { // If user has some level of privacy enabled on Pihole, `json:"top_ads"` is an empty array // Use custom unmarshal behavior to avoid not getting the rest of the valid data when unmarshalling -type piholeTopBlockedDomains map[string]int +type pihole5TopBlockedDomains map[string]int -func (p *piholeTopBlockedDomains) UnmarshalJSON(data []byte) error { +func (p *pihole5TopBlockedDomains) UnmarshalJSON(data []byte) error { // NOTE: do not change to piholeTopBlockedDomains type here or it will cause a stack overflow // because of the UnmarshalJSON method getting called recursively temp := make(map[string]int) err := json.Unmarshal(data, &temp) if err != nil { - *p = make(piholeTopBlockedDomains) + *p = make(pihole5TopBlockedDomains) } else { *p = temp } @@ -284,7 +311,7 @@ func (p *piholeTopBlockedDomains) UnmarshalJSON(data []byte) error { return nil } -func fetchPiholeStats(instanceURL string, allowInsecure bool, token string, noGraph bool) (*dnsStats, error) { +func fetchPihole5Stats(instanceURL string, allowInsecure bool, token string, noGraph bool) (*dnsStats, error) { if token == "" { return nil, errors.New("missing API token") } @@ -297,14 +324,8 @@ func fetchPiholeStats(instanceURL string, allowInsecure bool, token string, noGr return nil, err } - var client requestDoer - if !allowInsecure { - client = defaultHTTPClient - } else { - client = defaultInsecureHTTPClient - } - - responseJson, err := decodeJsonFromRequest[piholeStatsResponse](client, request) + var client = ternary(allowInsecure, defaultInsecureHTTPClient, defaultHTTPClient) + responseJson, err := decodeJsonFromRequest[pihole5StatsResponse](client, request) if err != nil { return nil, err } @@ -348,7 +369,6 @@ func fetchPiholeStats(instanceURL string, allowInsecure bool, token string, noGr } var lowestTimestamp int64 = 0 - for timestamp := range responseJson.QueriesSeries { if lowestTimestamp == 0 || timestamp < lowestTimestamp { lowestTimestamp = timestamp @@ -357,11 +377,11 @@ func fetchPiholeStats(instanceURL string, allowInsecure bool, token string, noGr maxQueriesInSeries := 0 - for i := 0; i < 8; i++ { + for i := range dnsStatsBars { queries := 0 blocked := 0 - for j := 0; j < 18; j++ { + for j := range 18 { index := lowestTimestamp + int64(i*10800+j*600) queries += responseJson.QueriesSeries[index] @@ -382,13 +402,287 @@ func fetchPiholeStats(instanceURL string, allowInsecure bool, token string, noGr } } - for i := 0; i < 8; i++ { + for i := range dnsStatsBars { stats.Series[i].PercentTotal = int(float64(stats.Series[i].Queries) / float64(maxQueriesInSeries) * 100) } return stats, nil } +func fetchPiholeStats( + instanceURL string, + allowInsecure bool, + password string, + sessionID string, + includeGraph bool, + includeTopDomains bool, +) (*dnsStats, string, error) { + instanceURL = strings.TrimRight(instanceURL, "/") + var client = ternary(allowInsecure, defaultInsecureHTTPClient, defaultHTTPClient) + + fetchNewSessionID := func() error { + newSessionID, err := fetchPiholeSessionID(instanceURL, client, password) + if err != nil { + return err + } + sessionID = newSessionID + return nil + } + + if sessionID == "" { + if err := fetchNewSessionID(); err != nil { + slog.Error("Failed to fetch Pihole v6 session ID", "error", err) + return nil, "", fmt.Errorf("fetching session ID: %v", err) + } + } else { + isValid, err := checkPiholeSessionIDIsValid(instanceURL, client, sessionID) + if err != nil { + slog.Error("Failed to check Pihole v6 session ID validity", "error", err) + return nil, "", fmt.Errorf("checking session ID: %v", err) + } + + if !isValid { + if err := fetchNewSessionID(); err != nil { + slog.Error("Failed to renew Pihole v6 session ID", "error", err) + return nil, "", fmt.Errorf("renewing session ID: %v", err) + } + } + } + + var wg sync.WaitGroup + ctx, cancel := context.WithCancel(context.Background()) + defer cancel() + + type statsResponseJson struct { + Queries struct { + Total int `json:"total"` + Blocked int `json:"blocked"` + PercentBlocked float64 `json:"percent_blocked"` + } `json:"queries"` + Gravity struct { + DomainsBlocked int `json:"domains_being_blocked"` + } `json:"gravity"` + } + + statsRequest, _ := http.NewRequestWithContext(ctx, "GET", instanceURL+"/api/stats/summary", nil) + statsRequest.Header.Set("x-ftl-sid", sessionID) + + var statsResponse statsResponseJson + var statsErr error + + wg.Add(1) + go func() { + defer wg.Done() + statsResponse, statsErr = decodeJsonFromRequest[statsResponseJson](client, statsRequest) + if statsErr != nil { + cancel() + } + }() + + type seriesResponseJson struct { + History []struct { + Timestamp int64 `json:"timestamp"` + Total int `json:"total"` + Blocked int `json:"blocked"` + } `json:"history"` + } + + var seriesResponse seriesResponseJson + var seriesErr error + + if includeGraph { + seriesRequest, _ := http.NewRequestWithContext(ctx, "GET", instanceURL+"/api/history", nil) + seriesRequest.Header.Set("x-ftl-sid", sessionID) + + wg.Add(1) + go func() { + defer wg.Done() + seriesResponse, seriesErr = decodeJsonFromRequest[seriesResponseJson](client, seriesRequest) + }() + } + + type topDomainsResponseJson struct { + Domains []struct { + Domain string `json:"domain"` + Count int `json:"count"` + } `json:"domains"` + TotalQueries int `json:"total_queries"` + BlockedQueries int `json:"blocked_queries"` + Took float64 `json:"took"` + } + + var topDomainsResponse topDomainsResponseJson + var topDomainsErr error + + if includeTopDomains { + topDomainsRequest, _ := http.NewRequestWithContext(ctx, "GET", instanceURL+"/api/stats/top_domains?blocked=true", nil) + topDomainsRequest.Header.Set("x-ftl-sid", sessionID) + + wg.Add(1) + go func() { + defer wg.Done() + topDomainsResponse, topDomainsErr = decodeJsonFromRequest[topDomainsResponseJson](client, topDomainsRequest) + }() + } + + wg.Wait() + partialContent := false + + if statsErr != nil { + return nil, "", fmt.Errorf("fetching stats: %v", statsErr) + } + + if includeGraph && seriesErr != nil { + slog.Error("Failed to fetch Pihole v6 graph data", "error", seriesErr) + partialContent = true + } + + if includeTopDomains && topDomainsErr != nil { + slog.Error("Failed to fetch Pihole v6 top domains", "error", topDomainsErr) + partialContent = true + } + + stats := &dnsStats{ + TotalQueries: statsResponse.Queries.Total, + BlockedQueries: statsResponse.Queries.Blocked, + BlockedPercent: int(statsResponse.Queries.PercentBlocked), + DomainsBlocked: statsResponse.Gravity.DomainsBlocked, + } + + if includeGraph && seriesErr == nil { + if len(seriesResponse.History) != 145 { + slog.Error( + "Pihole v6 graph data has unexpected length", + "length", len(seriesResponse.History), + "expected", 145, + ) + partialContent = true + } else { + // The API from v5 used to return 144 data points, but v6 returns 145. + // We only show data from the last 24 hours hours, Pihole returns data + // points in a 10 minute interval, 24*(60/10) = 144. Why is there an extra + // data point? I don't know, but we'll just ignore the first one since it's + // the oldest data point. + history := seriesResponse.History[1:] + + const interval = 10 + const dataPointsPerBar = dnsStatsHoursPerBar * (60 / interval) + + maxQueriesInSeries := 0 + + for i := range dnsStatsBars { + queries := 0 + blocked := 0 + for j := range dataPointsPerBar { + index := i*dataPointsPerBar + j + queries += history[index].Total + blocked += history[index].Blocked + } + if queries > maxQueriesInSeries { + maxQueriesInSeries = queries + } + stats.Series[i] = dnsStatsSeries{ + Queries: queries, + Blocked: blocked, + } + if queries > 0 { + stats.Series[i].PercentBlocked = int(float64(blocked) / float64(queries) * 100) + } + } + + for i := range dnsStatsBars { + stats.Series[i].PercentTotal = int(float64(stats.Series[i].Queries) / float64(maxQueriesInSeries) * 100) + } + } + } + + if includeTopDomains && topDomainsErr == nil && len(topDomainsResponse.Domains) > 0 { + domains := make([]dnsStatsBlockedDomain, 0, len(topDomainsResponse.Domains)) + for i := range topDomainsResponse.Domains { + d := &topDomainsResponse.Domains[i] + domains = append(domains, dnsStatsBlockedDomain{ + Domain: d.Domain, + PercentBlocked: int(float64(d.Count) / float64(statsResponse.Queries.Blocked) * 100), + }) + } + + sort.Slice(domains, func(a, b int) bool { + return domains[a].PercentBlocked > domains[b].PercentBlocked + }) + stats.TopBlockedDomains = domains[:min(len(domains), 5)] + } + + return stats, sessionID, ternary(partialContent, errPartialContent, nil) +} + +func fetchPiholeSessionID(instanceURL string, client *http.Client, password string) (string, error) { + requestBody := []byte(`{"password":"` + password + `"}`) + + request, err := http.NewRequest("POST", instanceURL+"/api/auth", bytes.NewBuffer(requestBody)) + if err != nil { + return "", fmt.Errorf("creating authentication request: %v", err) + } + request.Header.Set("Content-Type", "application/json") + + response, err := client.Do(request) + if err != nil { + return "", fmt.Errorf("sending authentication request: %v", err) + } + defer response.Body.Close() + + body, err := io.ReadAll(response.Body) + if err != nil { + return "", fmt.Errorf("reading authentication response: %v", err) + } + + var jsonResponse struct { + Session struct { + SID string `json:"sid"` + Message string `json:"message"` + } `json:"session"` + } + + if err := json.Unmarshal(body, &jsonResponse); err != nil { + return "", fmt.Errorf("parsing authentication response: %v", err) + } + + if response.StatusCode != http.StatusOK { + return "", fmt.Errorf( + "authentication request returned status %s with message '%s'", + response.Status, jsonResponse.Session.Message, + ) + } + + if jsonResponse.Session.SID == "" { + return "", fmt.Errorf( + "authentication response returned empty session ID, status code %d, message '%s'", + response.StatusCode, jsonResponse.Session.Message, + ) + } + + return jsonResponse.Session.SID, nil +} + +func checkPiholeSessionIDIsValid(instanceURL string, client *http.Client, sessionID string) (bool, error) { + request, err := http.NewRequest("GET", instanceURL+"/api/auth", nil) + if err != nil { + return false, fmt.Errorf("creating session ID check request: %v", err) + } + request.Header.Set("x-ftl-sid", sessionID) + + response, err := client.Do(request) + if err != nil { + return false, err + } + defer response.Body.Close() + + if response.StatusCode != http.StatusOK && response.StatusCode != http.StatusUnauthorized { + return false, fmt.Errorf("session ID check request returned status %s", response.Status) + } + + return response.StatusCode == http.StatusOK, nil +} + type technitiumStatsResponse struct { Response struct { Stats struct { diff --git a/internal/glance/widget-docker-containers.go b/internal/glance/widget-docker-containers.go index 61cb388..702a34b 100644 --- a/internal/glance/widget-docker-containers.go +++ b/internal/glance/widget-docker-containers.go @@ -278,6 +278,7 @@ func isDockerContainerHidden(container *dockerContainerJsonResponse, hideByDefau return hideByDefault } + func fetchDockerContainersFromSource( source string, category string, @@ -311,6 +312,7 @@ func fetchDockerContainersFromSource( } } + fetchAll := ternary(runningOnly, "false", "true") ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second) defer cancel() diff --git a/internal/glance/widget-extension.go b/internal/glance/widget-extension.go index 47034f3..c2b11f5 100644 --- a/internal/glance/widget-extension.go +++ b/internal/glance/widget-extension.go @@ -22,6 +22,7 @@ type extensionWidget struct { URL string `yaml:"url"` FallbackContentType string `yaml:"fallback-content-type"` Parameters queryParametersField `yaml:"parameters"` + Headers map[string]string `yaml:"headers"` AllowHtml bool `yaml:"allow-potentially-dangerous-html"` Extension extension `yaml:"-"` cachedHTML template.HTML `yaml:"-"` @@ -46,6 +47,7 @@ func (widget *extensionWidget) update(ctx context.Context) { URL: widget.URL, FallbackContentType: widget.FallbackContentType, Parameters: widget.Parameters, + Headers: widget.Headers, AllowHtml: widget.AllowHtml, }) @@ -57,6 +59,10 @@ func (widget *extensionWidget) update(ctx context.Context) { widget.Title = extension.Title } + if widget.TitleURL == "" && extension.TitleURL != "" { + widget.TitleURL = extension.TitleURL + } + widget.cachedHTML = widget.renderTemplate(widget, extensionWidgetTemplate) } @@ -67,8 +73,8 @@ func (widget *extensionWidget) Render() template.HTML { type extensionType int const ( - extensionContentHTML extensionType = iota - extensionContentUnknown = iota + extensionContentHTML extensionType = iota + extensionContentUnknown ) var extensionStringToType = map[string]extensionType{ @@ -77,6 +83,7 @@ var extensionStringToType = map[string]extensionType{ const ( extensionHeaderTitle = "Widget-Title" + extensionHeaderTitleURL = "Widget-Title-URL" extensionHeaderContentType = "Widget-Content-Type" extensionHeaderContentFrameless = "Widget-Content-Frameless" ) @@ -85,11 +92,13 @@ type extensionRequestOptions struct { URL string `yaml:"url"` FallbackContentType string `yaml:"fallback-content-type"` Parameters queryParametersField `yaml:"parameters"` + Headers map[string]string `yaml:"headers"` AllowHtml bool `yaml:"allow-potentially-dangerous-html"` } type extension struct { Title string + TitleURL string Content template.HTML Frameless bool } @@ -109,7 +118,13 @@ func convertExtensionContent(options extensionRequestOptions, content []byte, co func fetchExtension(options extensionRequestOptions) (extension, error) { request, _ := http.NewRequest("GET", options.URL, nil) - request.URL.RawQuery = options.Parameters.toQueryString() + if len(options.Parameters) > 0 { + request.URL.RawQuery = options.Parameters.toQueryString() + } + + for key, value := range options.Headers { + request.Header.Add(key, value) + } response, err := http.DefaultClient.Do(request) if err != nil { @@ -133,6 +148,10 @@ func fetchExtension(options extensionRequestOptions) (extension, error) { extension.Title = response.Header.Get(extensionHeaderTitle) } + if response.Header.Get(extensionHeaderTitleURL) != "" { + extension.TitleURL = response.Header.Get(extensionHeaderTitleURL) + } + contentType, ok := extensionStringToType[response.Header.Get(extensionHeaderContentType)] if !ok { diff --git a/internal/glance/widget-markets.go b/internal/glance/widget-markets.go index a3bb325..b53b10a 100644 --- a/internal/glance/widget-markets.go +++ b/internal/glance/widget-markets.go @@ -79,6 +79,7 @@ type market struct { Name string Currency string Price float64 + PriceHint int PercentChange float64 SvgChartPoints string } @@ -106,6 +107,7 @@ type marketResponseJson struct { RegularMarketPrice float64 `json:"regularMarketPrice"` ChartPreviousClose float64 `json:"chartPreviousClose"` ShortName string `json:"shortName"` + PriceHint int `json:"priceHint"` } `json:"meta"` Indicators struct { Quote []struct { @@ -152,13 +154,14 @@ func fetchMarketsDataFromYahoo(marketRequests []marketRequest) (marketList, erro continue } - prices := response.Chart.Result[0].Indicators.Quote[0].Close + result := &response.Chart.Result[0] + prices := result.Indicators.Quote[0].Close if len(prices) > marketChartDays { prices = prices[len(prices)-marketChartDays:] } - previous := response.Chart.Result[0].Meta.RegularMarketPrice + previous := result.Meta.RegularMarketPrice if len(prices) >= 2 && prices[len(prices)-2] != 0 { previous = prices[len(prices)-2] @@ -166,21 +169,22 @@ func fetchMarketsDataFromYahoo(marketRequests []marketRequest) (marketList, erro points := svgPolylineCoordsFromYValues(100, 50, maybeCopySliceWithoutZeroValues(prices)) - currency, exists := currencyToSymbol[strings.ToUpper(response.Chart.Result[0].Meta.Currency)] + currency, exists := currencyToSymbol[strings.ToUpper(result.Meta.Currency)] if !exists { - currency = response.Chart.Result[0].Meta.Currency + currency = result.Meta.Currency } markets = append(markets, market{ marketRequest: marketRequests[i], - Price: response.Chart.Result[0].Meta.RegularMarketPrice, + Price: result.Meta.RegularMarketPrice, Currency: currency, + PriceHint: result.Meta.PriceHint, Name: ternary(marketRequests[i].CustomName == "", - response.Chart.Result[0].Meta.ShortName, + result.Meta.ShortName, marketRequests[i].CustomName, ), PercentChange: percentChange( - response.Chart.Result[0].Meta.RegularMarketPrice, + result.Meta.RegularMarketPrice, previous, ), SvgChartPoints: points, diff --git a/internal/glance/widget-reddit.go b/internal/glance/widget-reddit.go index e7109fa..86832b5 100644 --- a/internal/glance/widget-reddit.go +++ b/internal/glance/widget-reddit.go @@ -194,7 +194,7 @@ func fetchSubredditPosts( var client requestDoer = defaultHTTPClient if requestUrlTemplate != "" { - requestUrl = strings.ReplaceAll(requestUrlTemplate, "{REQUEST-URL}", requestUrl) + requestUrl = strings.ReplaceAll(requestUrlTemplate, "{REQUEST-URL}", url.QueryEscape(requestUrl)) } else if proxyClient != nil { client = proxyClient } diff --git a/internal/glance/widget-rss.go b/internal/glance/widget-rss.go index e7d2e8b..1598371 100644 --- a/internal/glance/widget-rss.go +++ b/internal/glance/widget-rss.go @@ -331,6 +331,7 @@ func fetchItemsFromRSSFeeds(requests []rssFeedRequest) (rssFeedItemList, error) failed := 0 entries := make(rssFeedItemList, 0, len(feeds)*10) + seen := make(map[string]struct{}) for i := range feeds { if errs[i] != nil { @@ -339,7 +340,13 @@ func fetchItemsFromRSSFeeds(requests []rssFeedRequest) (rssFeedItemList, error) continue } - entries = append(entries, feeds[i]...) + for _, item := range feeds[i] { + if _, exists := seen[item.Link]; exists { + continue + } + entries = append(entries, item) + seen[item.Link] = struct{}{} + } } if failed == len(requests) { diff --git a/internal/glance/widget-search.go b/internal/glance/widget-search.go index 9d2b600..300361d 100644 --- a/internal/glance/widget-search.go +++ b/internal/glance/widget-search.go @@ -20,6 +20,7 @@ type searchWidget struct { SearchEngine string `yaml:"search-engine"` Bangs []SearchBang `yaml:"bangs"` NewTab bool `yaml:"new-tab"` + Target string `yaml:"target"` Autofocus bool `yaml:"autofocus"` Placeholder string `yaml:"placeholder"` } @@ -33,6 +34,10 @@ func convertSearchUrl(url string) string { var searchEngines = map[string]string{ "duckduckgo": "https://duckduckgo.com/?q={QUERY}", "google": "https://www.google.com/search?q={QUERY}", + "bing": "https://www.bing.com/search?q={QUERY}", + "perplexity": "https://www.perplexity.ai/search?q={QUERY}", + "kagi": "https://kagi.com/search?q={QUERY}", + "startpage": "https://www.startpage.com/search?q={QUERY}", } func (widget *searchWidget) initialize() error { diff --git a/internal/glance/widget-twitch-channels.go b/internal/glance/widget-twitch-channels.go index f3ab206..1290a26 100644 --- a/internal/glance/widget-twitch-channels.go +++ b/internal/glance/widget-twitch-channels.go @@ -196,6 +196,10 @@ func fetchChannelFromTwitchTask(channel string) (twitchChannel, error) { slog.Warn("Failed to parse Twitch stream started at", "error", err, "started_at", streamMetadata.UserOrNull.Stream.StartedAt) } } + } else { + // This prevents live channels with 0 viewers from being + // incorrectly sorted lower than offline channels + result.ViewersCount = -1 } return result, nil diff --git a/internal/glance/widget-utils.go b/internal/glance/widget-utils.go index 2688473..c6b7745 100644 --- a/internal/glance/widget-utils.go +++ b/internal/glance/widget-utils.go @@ -180,8 +180,8 @@ func workerPoolDo[I any, O any](job *workerPoolJob[I, O]) ([]O, []error, error) } if len(job.data) == 1 { - output, err := job.task(job.data[0]) - return append(results, output), append(errs, err), nil + results[0], errs[0] = job.task(job.data[0]) + return results, errs, nil } tasksQueue := make(chan *workerPoolTask[I, O]) diff --git a/internal/glance/widget-videos.go b/internal/glance/widget-videos.go index fdc654c..ff79864 100644 --- a/internal/glance/widget-videos.go +++ b/internal/glance/widget-videos.go @@ -56,7 +56,7 @@ func (widget *videosWidget) initialize() error { widget.Channels = append(widget.Channels, make([]string, len(widget.Playlists))...) for i := range widget.Playlists { - widget.Channels[initialLen+i] = "playlist:" + widget.Playlists[i] + widget.Channels[initialLen+i] = videosWidgetPlaylistPrefix + widget.Playlists[i] } } diff --git a/pkg/sysinfo/sysinfo.go b/pkg/sysinfo/sysinfo.go index 673b9d2..ed20318 100644 --- a/pkg/sysinfo/sysinfo.go +++ b/pkg/sysinfo/sysinfo.go @@ -201,11 +201,12 @@ func Collect(req *SystemInfoRequest) (*SystemInfo, []error) { // currently disabled on Windows because it requires elevated privilidges, otherwise // keeps returning a single sensor with key "ACPI\\ThermalZone\\TZ00_0" which // doesn't seem to be the CPU sensor or correspond to anything useful when - // compared against the temperatures Libre Hardware Monitor reports - // also disabled on openbsd because it's not implemented by go-psutil - if runtime.GOOS != "windows" && runtime.GOOS != "openbsd" { + // compared against the temperatures Libre Hardware Monitor reports. + // Also disabled on the bsd's because it's not implemented by go-psutil for them + if runtime.GOOS != "windows" && runtime.GOOS != "openbsd" && runtime.GOOS != "netbsd" && runtime.GOOS != "freebsd" { sensorReadings, err := sensors.SensorsTemperatures() - if err == nil { + _, errIsWarning := err.(*sensors.Warnings) + if err == nil || errIsWarning { if req.CPUTempSensor != "" { for i := range sensorReadings { if sensorReadings[i].SensorKey == req.CPUTempSensor { @@ -227,35 +228,50 @@ func Collect(req *SystemInfoRequest) (*SystemInfo, []error) { } } - filesystems, err := disk.Partitions(false) - if err == nil { - for _, fs := range filesystems { - mpReq, ok := req.Mountpoints[fs.Mountpoint] - isHidden := req.HideMountpointsByDefault - if ok && mpReq.Hide != nil { - isHidden = *mpReq.Hide - } - if isHidden { - continue - } - - usage, err := disk.Usage(fs.Mountpoint) - if err == nil { - mpInfo := MountpointInfo{ - Path: fs.Mountpoint, - Name: mpReq.Name, - TotalMB: usage.Total / 1024 / 1024, - UsedMB: usage.Used / 1024 / 1024, - UsedPercent: uint8(math.Min(usage.UsedPercent, 100)), - } - - info.Mountpoints = append(info.Mountpoints, mpInfo) - } else { - addErr(fmt.Errorf("getting filesystem usage for %s: %v", fs.Mountpoint, err)) - } + addedMountpoints := map[string]struct{}{} + addMountpointInfo := func(requestedPath string, mpReq MointpointRequest) { + if _, exists := addedMountpoints[requestedPath]; exists { + return } - } else { - addErr(fmt.Errorf("getting filesystems: %v", err)) + + isHidden := req.HideMountpointsByDefault + if mpReq.Hide != nil { + isHidden = *mpReq.Hide + } + if isHidden { + return + } + + usage, err := disk.Usage(requestedPath) + if err == nil { + mpInfo := MountpointInfo{ + Path: requestedPath, + Name: mpReq.Name, + TotalMB: usage.Total / 1024 / 1024, + UsedMB: usage.Used / 1024 / 1024, + UsedPercent: uint8(math.Min(usage.UsedPercent, 100)), + } + + info.Mountpoints = append(info.Mountpoints, mpInfo) + addedMountpoints[requestedPath] = struct{}{} + } else { + addErr(fmt.Errorf("getting filesystem usage for %s: %v", requestedPath, err)) + } + } + + if !req.HideMountpointsByDefault { + filesystems, err := disk.Partitions(false) + if err == nil { + for _, fs := range filesystems { + addMountpointInfo(fs.Mountpoint, req.Mountpoints[fs.Mountpoint]) + } + } else { + addErr(fmt.Errorf("getting filesystems: %v", err)) + } + } + + for mountpoint, mpReq := range req.Mountpoints { + addMountpointInfo(mountpoint, mpReq) } sort.Slice(info.Mountpoints, func(a, b int) bool {