diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index cda2741..d3f1da8 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1 +1,2 @@ github: [glanceapp] +patreon: glanceapp diff --git a/Dockerfile b/Dockerfile index 4d8cd87..c751565 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM golang:1.23.6-alpine3.21 AS builder +FROM golang:1.24.4-alpine3.21 AS builder WORKDIR /app COPY . /app @@ -9,8 +9,5 @@ FROM alpine:3.21 WORKDIR /app COPY --from=builder /app/glance . -HEALTHCHECK --timeout=10s --start-period=60s --interval=60s \ - CMD wget --spider -q http://localhost:8080/api/healthz - EXPOSE 8080/tcp ENTRYPOINT ["/app/glance", "--config", "/app/config/glance.yml"] diff --git a/Dockerfile.goreleaser b/Dockerfile.goreleaser index bbfa8ad..244b177 100644 --- a/Dockerfile.goreleaser +++ b/Dockerfile.goreleaser @@ -3,8 +3,5 @@ FROM alpine:3.21 WORKDIR /app COPY glance . -HEALTHCHECK --timeout=10s --start-period=60s --interval=60s \ - CMD wget --spider -q http://localhost:8080/api/healthz - EXPOSE 8080/tcp ENTRYPOINT ["/app/glance", "--config", "/app/config/glance.yml"] diff --git a/README.md b/README.md index 127a7d4..7207c37 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@

What if you could see everything at a...

Glance

-

InstallConfigurationPreconfigured pagesThemesDiscord

+

InstallConfigurationDiscordSponsor

+

Community widgetsPreconfigured pagesThemes

![](docs/images/readme-main-image.png) @@ -16,7 +17,7 @@ * Docker containers status * Server stats * Custom widgets -* [and many more...](docs/configuration.md) +* [and many more...](docs/configuration.md#configuring-glance) ### Fast and lightweight * Low memory usage @@ -45,8 +46,7 @@ Easily create your own theme by tweaking a few numbers or choose from one of the
## Configuration -Configuration is done through YAML files, to learn more about how the layout works, how to add more pages and how to configure widgets, visit the [configuration documentation](docs/configuration.md). - +Configuration is done through YAML files, to learn more about how the layout works, how to add more pages and how to configure widgets, visit the [configuration documentation](docs/configuration.md#configuring-glance).
Preview example configuration file
@@ -79,7 +79,7 @@ pages: channels: - theprimeagen - j_blow - - piratesoftware + - giantwaffle - cohhcarnage - christitustech - EJ_SA @@ -194,8 +194,10 @@ services: glance: container_name: glance image: glanceapp/glance + restart: unless-stopped volumes: - ./config:/app/config + - /etc/localtime:/etc/localtime:ro ports: - 8080:8080 ``` diff --git a/docs/configuration.md b/docs/configuration.md index f67261a..e8d139c 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -6,6 +6,9 @@ - [Environment variables](#environment-variables) - [Other ways of providing tokens/passwords/secrets](#other-ways-of-providing-tokenspasswordssecrets) - [Including other config files](#including-other-config-files) + - [Icons](#icons) + - [Config schema](#config-schema) +- [Authentication](#authentication) - [Server](#server) - [Document](#document) - [Branding](#branding) @@ -24,6 +27,7 @@ - [Custom API](#custom-api) - [Extension](#extension) - [Weather](#weather) + - [Todo](#todo) - [Monitor](#monitor) - [Releases](#releases) - [Docker Containers](#docker-containers) @@ -182,6 +186,95 @@ docker run --rm -v ./glance.yml:/app/config/glance.yml glanceapp/glance config:p This assumes that the config you want to print is in your current working directory and is named `glance.yml`. +## Icons + +For widgets which provide you with the ability to specify icons such as the monitor, bookmarks, docker containers, etc, you can use the `icon` property to specify a URL to an image or use icon names from multiple libraries via prefixes: + +```yml +icon: si:immich # si for Simple icons https://simpleicons.org/ +icon: sh:immich # sh for selfh.st icons https://selfh.st/icons/ +icon: di:immich # di for Dashboard icons https://github.com/homarr-labs/dashboard-icons +icon: mdi:camera # mdi for Material Design icons https://pictogrammers.com/library/mdi/ +``` + +> [!NOTE] +> +> The icons are loaded externally and are hosted on `cdn.jsdelivr.net`, if you do not wish to depend on a 3rd party you are free to download the icons individually and host them locally. + +Icons from the Simple icons library as well as Material Design icons will automatically invert their color to match your light or dark theme, however you may want to enable this manually for other icons. To do this, you can use the `auto-invert` prefix: + +```yaml +icon: auto-invert https://example.com/path/to/icon.png # with a URL +icon: auto-invert sh:glance-dark # with a selfh.st icon +``` + +This expects the icon to be black and will automatically invert it to white when using a dark theme. + +## Config schema + +For property descriptions, validation and autocompletion of the config within your IDE, @not-first has kindly created a [schema](https://github.com/not-first/glance-schema). Massive thanks to them for this, go check it out and give them a star! + +## Authentication + +To make sure that only you and the people you want to share your dashboard with have access to it, you can set up authentication via username and password. This is done through a top level `auth` property. Example: + +```yaml +auth: + secret-key: # this must be set to a random value generated using the secret:make CLI command + users: + admin: + password: 123456 + svilen: + password: 123456 +``` + +To generate a secret key, run the following command: + +```sh +./glance secret:make +``` + +Or with Docker: + +```sh +docker run --rm glanceapp/glance secret:make +``` + +### Using hashed passwords + +If you do not want to store plain passwords in your config file or in environment variables, you can hash your password and provide its hash instead: + +```sh +./glance password:hash mysecretpassword +``` + +Or with Docker: + +```sh +docker run --rm glanceapp/glance password:hash mysecretpassword +``` + +Then, in your config file use the `password-hash` property instead of `password`: + +```yaml +auth: + secret-key: # this must be set to a random value generated using the secret:make CLI command + users: + admin: + password-hash: $2a$10$o6SXqiccI3DDP2dN4ADumuOeIHET6Q4bUMYZD6rT2Aqt6XQ3DyO.6 +``` + +### Preventing brute-force attacks + +Glance will automatically block IP addresses of users who fail to authenticate 5 times in a row in the span of 5 minutes. In order for this feature to work correctly, Glance must know the real IP address of requests. If you're using a reverse proxy such as nginx, Traefik, NPM, etc, you must set the `proxied` property in the `server` configuration to `true`: + +```yaml +server: + proxied: true +``` + +When set to `true`, Glance will use the `X-Forwarded-For` header to determine the original IP address of the request, so make sure that your reverse proxy is correctly configured to send that header. + ## Server Server configuration is done through a top level `server` property. Example: @@ -197,6 +290,7 @@ server: | ---- | ---- | -------- | ------- | | host | string | no | | | port | number | no | 8080 | +| proxied | boolean | no | false | | base-url | string | no | | | assets-path | string | no | | @@ -206,6 +300,9 @@ The address which the server will listen on. Setting it to `localhost` means tha #### `port` A number between 1 and 65,535, so long as that port isn't already used by anything else. +#### `proxied` +Set to `true` if you're using a reverse proxy in front of Glance. This will make Glance use the `X-Forwarded-*` headers to determine the original request details. + #### `base-url` The base URL that Glance is hosted under. No need to specify this unless you're using a reverse proxy and are hosting Glance under a directory. If that's the case then you can set this value to `/glance` or whatever the directory is called. Note that the forward slash (`/`) in the beginning is required unless you specify the full domain and path. @@ -268,6 +365,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 @@ -279,6 +379,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`. @@ -295,6 +398,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. @@ -302,9 +414,24 @@ Example: ```yaml theme: + # This will be the default theme background-color: 100 20 10 primary-color: 40 90 40 contrast-multiplier: 1.1 + + disable-picker: false + presets: + gruvbox-dark: + background-color: 0 0 16 + primary-color: 43 59 81 + positive-color: 61 66 44 + negative-color: 6 96 59 + + zebra: + light: true + background-color: 0 0 95 + primary-color: 0 0 10 + negative-color: 0 90 50 ``` ### Available themes @@ -321,6 +448,8 @@ If you don't want to spend time configuring your own theme, there are [several a | contrast-multiplier | number | no | 1 | | text-saturation-multiplier | number | no | 1 | | custom-css-file | string | no | | +| disable-picker | bool | false | | +| presets | object | no | | #### `light` Whether the scheme is light or dark. This does not change the background color, it inverts the text colors so that they look appropriately on a light background. @@ -365,6 +494,33 @@ theme: > > In addition, you can also use the `css-class` property which is available on every widget to set custom class names for individual widgets. +#### `disable-picker` +When set to `true` hides the theme picker and disables the abiltity to switch between themes. All users who previously picked a non-default theme will be switched over to the default theme. + +#### `presets` +Define additional theme presets that can be selected from the theme picker on the page. For each preset, you can specify the same properties as for the default theme, such as `background-color`, `primary-color`, `positive-color`, `negative-color`, `contrast-multiplier`, etc., except for the `custom-css-file` property. + +Example: + +```yaml +theme: + presets: + my-custom-dark-theme: + background-color: 229 19 23 + contrast-multiplier: 1.2 + primary-color: 222 74 74 + positive-color: 96 44 68 + negative-color: 359 68 71 + my-custom-light-theme: + light: true + background-color: 220 23 95 + contrast-multiplier: 1.1 + primary-color: 220 91 54 + positive-color: 109 58 40 + negative-color: 347 87 44 +``` + +To override the default dark and light themes, use the key names `default-dark` and `default-light`. ## Pages & Columns ![illustration of pages and columns](images/pages-and-columns-illustration.png) @@ -395,8 +551,8 @@ pages: | 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 | +| head-widgets | array | no | | | columns | array | yes | | #### `name` @@ -427,9 +583,6 @@ When set to `true`, vertically centers the content on the page. Has no effect if #### `hide-desktop-navigation` Whether to show the navigation links at the top of the page on desktop. -#### `expand-mobile-page-navigation` -Whether the mobile page navigation should be expanded by default. - #### `show-mobile-header` Whether to show a header displaying the name of the page on mobile. The header purposefully has a lot of vertical whitespace in order to push the content down and make it easier to reach on tall devices. @@ -437,6 +590,43 @@ Preview: ![](images/mobile-header-preview.png) +#### `head-widgets` + +Head widgets will be shown at the top of the page, above the columns, and take up the combined width of all columns. You can specify any widget, though some will look better than others, such as the markets, RSS feed with `horizontal-cards` style, and videos widgets. Example: + +![](images/head-widgets-preview.png) + +```yaml +pages: + - name: Home + head-widgets: + - type: markets + hide-header: true + markets: + - symbol: SPY + name: S&P 500 + - symbol: BTC-USD + name: Bitcoin + - symbol: NVDA + name: NVIDIA + - symbol: AAPL + name: Apple + - symbol: MSFT + name: Microsoft + + columns: + - size: small + widgets: + - type: calendar + - size: full + widgets: + - type: hacker-news + - size: small + widgets: + - type: weather + location: London, United Kingdom +``` + ### Columns Columns are defined for each page using a `columns` property. There are two types of columns - `full` and `small`, which refers to their width. A small column takes up a fixed amount of width (300px) and a full column takes up the all of the remaining width. You can have up to 3 columns per page and you must have either 1 or 2 full columns. Example: @@ -515,6 +705,7 @@ pages: | type | string | yes | | title | string | no | | title-url | string | no | +| hide-header | boolean | no | false | | cache | string | no | | css-class | string | no | @@ -527,6 +718,13 @@ The title of the widget. If left blank it will be defined by the widget. #### `title-url` The URL to go to when clicking on the widget's title. If left blank it will be defined by the widget (if available). +#### `hide-header` +When set to `true`, the header (title) of the widget will be hidden. You cannot hide the header of the group widget. + +> [!NOTE] +> +> If a widget fails to update, a red dot or circle is shown next to the title of that widget indicating that the it is not working. You will not be able to see this if you hide the header. + #### `cache` How long to keep the fetched data in memory. The value is a string and must be a number followed by one of s, m, h, d. Examples: @@ -672,6 +870,7 @@ Preview: | playlists | array | no | | | limit | integer | no | 25 | | style | string | no | horizontal-cards | +| sort-by | string | no | posted | | collapse-after | integer | no | 7 | | collapse-after-rows | integer | no | 4 | | include-shorts | boolean | no | false | @@ -699,9 +898,18 @@ A list of playlist IDs: - PL8mG-RkN2uTxTK4m_Vl2dYR9yE41kRdBg ``` +The playlist ID can be found in its link which is in the form of +``` +https://www.youtube.com...&list={ID}&... +``` + ##### `limit` The maximum number of videos to show. +##### `sort-by` +Used to specify the order in which the videos should get returned. Possible values are `none`, `updated`, and `posted`. +Default value is `posted`. + ##### `collapse-after` Specify the number of videos to show when using the `vertical-list` style before the "SHOW MORE" button appears. @@ -828,7 +1036,10 @@ Display a list of posts from a specific subreddit. > [!WARNING] > -> Reddit does not allow unauthorized API access from VPS IPs, if you're hosting Glance on a VPS you will get a 403 response. As a workaround you can route the traffic from Glance through a VPN or your own HTTP proxy using the `request-url-template` property. +> Reddit does not allow unauthorized API access from VPS IPs, if you're hosting Glance on a VPS you will get a 403 +> response. As a workaround you can either [register an app on Reddit](https://ssl.reddit.com/prefs/apps/) and use the +> generated ID and secret in the widget configuration to authenticate your requests (see `app-auth` property), use a proxy +> (see `proxy` property) or route the traffic from Glance through a VPN. Example: @@ -853,6 +1064,7 @@ Example: | top-period | string | no | day | | search | string | no | | | extra-sort-by | string | no | | +| app-auth | object | no | | ##### `subreddit` The subreddit for which to fetch the posts from. @@ -960,6 +1172,19 @@ Can be used to specify an additional sort which will be applied on top of the al The `engagement` sort tries to place the posts with the most points and comments on top, also prioritizing recent over old posts. +##### `app-auth` +```yaml +widgets: + - type: reddit + subreddit: technology + app-auth: + name: ${REDDIT_APP_NAME} + id: ${REDDIT_APP_CLIENT_ID} + secret: ${REDDIT_APP_SECRET} +``` + +To register an app on Reddit, go to [this page](https://ssl.reddit.com/prefs/apps/). + ### Search Widget Display a search bar that can be used to search for specific terms on various search engines. @@ -997,6 +1222,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 | | @@ -1018,6 +1244,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. @@ -1333,7 +1562,7 @@ Examples: #### Properties | Name | Type | Required | Default | | ---- | ---- | -------- | ------- | -| url | string | yes | | +| url | string | no | | | headers | key (string) & value (string) | no | | | method | string | no | GET | | body-type | string | no | json | @@ -1342,6 +1571,7 @@ Examples: | allow-insecure | boolean | no | false | | skip-json-validation | boolean | no | false | | template | string | yes | | +| options | map | no | | | parameters | key (string) & value (string|array) | no | | | subrequests | map of requests | no | | @@ -1394,6 +1624,95 @@ When set to `true`, skips the JSON validation step. This is useful when the API ##### `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). +##### `options` +A map of options that will be passed to the template and can be used to modify the behavior of the widget. + +
+View examples + +
+ +Instead of defining options within the template and having to modify the template itself like such: + +```yaml +- type: custom-api + template: | + {{ /* User configurable options */ }} + {{ $collapseAfter := 5 }} + {{ $showThumbnails := true }} + {{ $showFlairs := false }} + + +``` + +You can use the `options` property to retrieve and define default values for these variables: + +```yaml +- type: custom-api + template: | + +``` + +This way, you can optionally specify the `collapse-after`, `show-thumbnails` and `show-flairs` properties in the widget configuration: + +```yaml +- type: custom-api + options: + collapse-after: 5 + show-thumbnails: true + show-flairs: false +``` + +Which means you can reuse the same template for multiple widgets with different options: + +```yaml +# Note that `custom-widgets` isn't a special property, it's just used to define the reusable "anchor", see https://support.atlassian.com/bitbucket-cloud/docs/yaml-anchors/ +custom-widgets: + - &example-widget + type: custom-api + template: | + {{ .Options.StringOr "custom-option" "not defined" }} + +pages: + - name: Home + columns: + - size: full + widgets: + - <<: *example-widget + options: + custom-option: "Value 1" + + - <<: *example-widget + options: + custom-option: "Value 2" +``` + +Currently, the available methods on the `.Options` object are: `StringOr`, `IntOr`, `BoolOr` and `FloatOr`. + +
+ ##### `parameters` A list of keys and values that will be sent to the custom-api as query paramters. @@ -1549,6 +1868,44 @@ Otherwise, if set to `false` (which is the default) it'll be displayed as: Greenville, United States ``` +### Todo + +A simple to-do list that allows you to add, edit and delete tasks. The tasks are stored in the browser's local storage. + +Example: + +```yaml +- type: to-do +``` + +Preview: + +![](images/todo-widget-preview.png) + +To reorder tasks, drag and drop them by grabbing the top side of the task: + +![](images/reorder-todo-tasks-prevew.gif) + +To delete a task, hover over it and click on the trash icon. + +#### Properties + +| Name | Type | Required | Default | +| ---- | ---- | -------- | ------- | +| id | string | no | | + +##### `id` + +The ID of the todo list. If you want to have multiple todo lists, you must specify a different ID for each one. The ID is used to store the tasks in the browser's local storage. This means that if you have multiple todo lists with the same ID, they will share the same tasks. + +#### Keyboard shortcuts +| Keys | Action | Condition | +| ---- | ------ | --------- | +| Enter | Add a task to the bottom of the list | When the "Add a task" field is focused | +| Ctrl + Enter | Add a task to the top of the list | When the "Add a task" field is focused | +| Down Arrow | Focus the last task that was added | When the "Add a task" field is focused | +| Escape | Focus the "Add a task" field | When a task is focused | + ### Monitor Display a list of sites and whether they are reachable (online) or not. This is determined by sending a GET request to the specified URL, if the response is 200 then the site is OK. The time it took to receive a response is also shown in milliseconds. @@ -1574,7 +1931,6 @@ Example: - title: Vaultwarden url: https://vault.yourdomain.com icon: /assets/vaultwarden-logo.png - ``` Preview: @@ -1612,6 +1968,7 @@ Properties for each site: | check-url | string | no | | | error-url | string | no | | | icon | string | no | | +| timeout | string | no | 3s | | allow-insecure | boolean | no | false | | same-tab | boolean | no | false | | alt-status-codes | array | no | | @@ -1623,7 +1980,7 @@ The title used to indicate the site. `url` -The public facing URL of a monitored service, the user will be redirected here. If `check-url` is not specified, this is used as the status check. +The URL of the monitored service, which must be reachable by Glance, and will be used as the link to go to when clicking on the title. If `check-url` is not specified, this is used as the status check. `check-url` @@ -1635,17 +1992,11 @@ If the monitored service returns an error, the user will be redirected here. If `icon` -Optional URL to an image which will be used as the icon for the site. Can be an external URL or internal via [server configured assets](#assets-path). You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix or [Dashboard Icons](https://github.com/walkxcode/dashboard-icons) via a `di:` prefix: +See [Icons](#icons) for more information on how to specify icons. -```yaml -icon: si:jellyfin -icon: si:gitea -icon: si:adguard -``` +`timeout` -> [!WARNING] -> -> Simple Icons are loaded externally and are hosted on `cdn.jsdelivr.net`, if you do not wish to depend on a 3rd party you are free to download the icons individually and host them locally. +How long to wait for a response from the server before considering it unreachable. The value is a string and must be a number followed by one of s, m, h, d. Example: `5s` for 5 seconds, `1m` for 1 minute, etc. `allow-insecure` @@ -1670,7 +2021,7 @@ HTTP Basic Authentication credentials for protected sites. ```yaml basic-auth: - usename: your-username + username: your-username password: your-password ``` @@ -1815,6 +2166,19 @@ Configuration of the containers is done via labels applied to each container: glance.description: Movies & shows ``` +Alternatively, you can also define the values within your `glance.yml` via the `containers` property, where the key is the container name and each value is the same as the labels but without the "glance." prefix: + +```yaml +- type: docker-containers + containers: + container_name_1: + name: Container Name + description: Description of the container + url: https://container.domain.com + icon: si:container-icon + hide: false +``` + For services with multiple containers you can specify a `glance.id` on the "main" container and `glance.parent` on each "child" container:
@@ -1866,25 +2230,84 @@ If any of the child containers are down, their status will propagate up to the p | Name | Type | Required | Default | | ---- | ---- | -------- | ------- | | 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. +##### `format-container-names` +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 | | ---- | ----------- | | glance.name | The name displayed in the UI. If not specified, the name of the container will be used. | -| glance.icon | The icon displayed in the UI. Can be an external URL or an icon prefixed with si:, sh: or di: like with the bookmarks and monitor widgets | +| glance.icon | See [Icons](#icons) for more information on how to specify icons | | glance.url | The URL that the user will be redirected to when clicking on the container. | | glance.same-tab | Whether to open the link in the same or a new tab. Default is `false`. | | glance.description | A short description displayed in the UI. Default is empty. | | 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. @@ -1936,7 +2359,7 @@ Only required when using AdGuard Home. The username used to log into the admin d ##### `password` 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`. +For Pi-hole version 6+, this field is required if you have set a password to log into Pi-hole. You can either use the password you use to log into the admin dashboard or the application password, which can be found in `Settings -> Web Interface / API -> Configure app password`. ##### `token` Required when using Pi-hole major version 5 or earlier. The API token which can be found in `Settings -> API -> Show API token`. @@ -2006,7 +2429,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` @@ -2081,6 +2504,7 @@ Example: pull-requests-limit: 5 issues-limit: 3 commits-limit: 3 + exclude-draft-prs: true ``` Preview: @@ -2096,6 +2520,7 @@ Preview: | pull-requests-limit | integer | no | 3 | | issues-limit | integer | no | 3 | | commits-limit | integer | no | -1 | +| exclude-draft-prs | boolean | no | false | ##### `repository` The owner and repository name that will have their information displayed. @@ -2112,6 +2537,9 @@ The maximum number of latest open issues to show. Set to `-1` to not show any. ##### `commits-limit` The maximum number of lastest commits to show from the default branch. Set to `-1` to not show any. +##### `exclude-draft-prs` +Wheter to exclude draft pull requests from the list. Set to `false` by default to include them. + ### Bookmarks Display a list of links which can be grouped. @@ -2192,17 +2620,7 @@ An array of groups which can optionally have a title and a custom color. `icon` -URL pointing to an image. You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix or [Dashboard Icons](https://github.com/walkxcode/dashboard-icons) via a `di:` prefix: - -```yaml -icon: si:gmail -icon: si:youtube -icon: si:reddit -``` - -> [!WARNING] -> -> Simple Icons are loaded externally and are hosted on `cdn.jsdelivr.net`, if you do not wish to depend on a 3rd party you are free to download the icons individually and host them locally. +See [Icons](#icons) for more information on how to specify icons. `same-tab` diff --git a/docs/custom-api.md b/docs/custom-api.md index 99e3a5e..67c706b 100644 --- a/docs/custom-api.md +++ b/docs/custom-api.md @@ -219,6 +219,38 @@ Output: JSON response: +```json +{ + "user": { + "id": 42, + "name": "Alice", + "active": true + } +} +``` + +To loop through each property of the object, you would use the following: + +```html +{{ range $key, $value := .JSON.Entries "user" }} +
{{ $key }}: {{ $value.String "" }}
+{{ end }} +``` + +Output: + +```html +
id: 42
+
name: Alice
+
active: true
+``` + +Each property in the object is exposed as a pair, with `$key` being a string and `$value` providing access to the value using the usual JSON methods. + +
+ +JSON response: + ```json { "price": 100, @@ -238,7 +270,7 @@ Output:
90
``` -Other operations include `add`, `mul`, and `div`. +Other operations include `add`, `mul`, `div` and `mod`.
@@ -358,6 +390,52 @@ Output:

John

``` +
+ +In some instances, you may need to make two consecutive API calls, where you use the result of the first call in the second call. To achieve this, you can make additional HTTP requests from within the template itself using the following syntax: + +```yaml +- type: custom-api + url: https://api.example.com/get-id-of-something + template: | + {{ $theID := .JSON.String "id" }} + + {{ + $something := newRequest (concat "https://api.example.com/something/" $theID) + | withParameter "key" "value" + | withHeader "Authorization" "Bearer token" + | getResponse + }} + + {{ $something.JSON.String "title" }} +``` + +Here, `$theID` gets retrieved from the result of the first API call and used in the second API call. The `newRequest` function creates a new request, and the `getResponse` function executes it. You can also use `withParameter` and `withHeader` to optionally add parameters and headers to the request. + +If you need to make a request to a URL that requires dynamic parameters, you can omit the `url` property in the YAML and run the request entirely from within the template itself: + +```yaml +- type: custom-api + title: Events from the last 24h + template: | + {{ + $events := newRequest "https://api.example.com/events" + | withParameter "after" (offsetNow "-24h" | formatTime "rfc3339") + | getResponse + }} + + {{ if eq $events.Response.StatusCode 200 }} + {{ range $events.JSON.Array "events" }} +
{{ .String "title" }}
+
+ {{ end }} + {{ else }} +

Failed to fetch data: {{ $events.Response.Status }}

+ {{ end }} +``` + +*Note that you need to manually check for the correct status code.* + ## Functions The following functions are available on the `JSON` object: @@ -368,6 +446,15 @@ The following functions are available on the `JSON` object: - `Bool(key string) bool`: Returns the value of the key as a boolean. - `Array(key string) []JSON`: Returns the value of the key as an array of `JSON` objects. - `Exists(key string) bool`: Returns true if the key exists in the JSON object. +- `Entries(key string)`: Returns an iterator that allows you to loop through each property of the object. Example: `{{ range $key, $value := .JSON.Entries "user" }}`. This will yield pairs of key and value, where `$key` is a string and `$value` is a `JSON` object. + +The following functions are available on the `Options` object: + +- `StringOr(key string, default string) string`: Returns the value of the key as a string, or the default value if the key does not exist. +- `IntOr(key string, default int) int`: Returns the value of the key as an integer, or the default value if the key does not exist. +- `FloatOr(key string, default float) float`: Returns the value of the key as a float, or the default value if the key does not exist. +- `BoolOr(key string, default bool) bool`: Returns the value of the key as a boolean, or the default value if the key does not exist. +- `JSON(key string) JSON`: Returns the value of the key as a stringified `JSON` object, or throws an error if the key does not exist. The following helper functions provided by Glance are available: @@ -378,17 +465,21 @@ The following helper functions provided by Glance are available: - `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". +- `formatTime(layout string, s string) time.Time`: Formats a `time.Time` into a string. The layout uses the same format as `parseTime`. +- `parseLocalTime(layout string, s string) time.Time`: Same as the above, except it will automatically convert the time to the server's timezone and 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. +- `mod(a, b int) int`: Remainder after dividing a by b (a % b). - `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. @@ -396,17 +487,21 @@ The following helper functions provided by Glance are available: - `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. +- `percentChange(current float, previous float) float`: Calculates the percentage change between two numbers. +- `startOfDay(t time.Time) time.Time`: Returns the start of the day for a given time. +- `endOfDay(t time.Time) time.Time`: Returns the end of the day for a given time. The following helper functions provided by Go's `text/template` are available: - `eq(a, b any) bool`: Compares two values for equality. - `ne(a, b any) bool`: Compares two values for inequality. - `lt(a, b any) bool`: Compares two values for less than. -- `lte(a, b any) bool`: Compares two values for less than or equal to. +- `le(a, b any) bool`: Compares two values for less than or equal to. - `gt(a, b any) bool`: Compares two values for greater than. -- `gte(a, b any) bool`: Compares two values for greater than or equal to. -- `and(a, b bool) bool`: Returns true if both values are true. -- `or(a, b bool) bool`: Returns true if either value is true. +- `ge(a, b any) bool`: Compares two values for greater than or equal to. +- `and(args ...bool) bool`: Returns true if **all** arguments are true; accepts two or more boolean values. +- `or(args ...bool) bool`: Returns true if **any** argument is true; accepts two or more boolean values. - `not(a bool) bool`: Returns the opposite of the value. - `index(a any, b int) any`: Returns the value at the specified index of an array. - `len(a any) int`: Returns the length of an array. diff --git a/docs/glance.yml b/docs/glance.yml index 35dc7cb..b5c68c4 100644 --- a/docs/glance.yml +++ b/docs/glance.yml @@ -27,7 +27,7 @@ pages: channels: - theprimeagen - j_blow - - piratesoftware + - giantwaffle - cohhcarnage - christitustech - EJ_SA diff --git a/docs/images/head-widgets-preview.png b/docs/images/head-widgets-preview.png new file mode 100644 index 0000000..3de52fc Binary files /dev/null and b/docs/images/head-widgets-preview.png differ diff --git a/docs/images/reorder-todo-tasks-prevew.gif b/docs/images/reorder-todo-tasks-prevew.gif new file mode 100644 index 0000000..99c6169 Binary files /dev/null and b/docs/images/reorder-todo-tasks-prevew.gif differ 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/images/todo-widget-preview.png b/docs/images/todo-widget-preview.png new file mode 100644 index 0000000..5d7a724 Binary files /dev/null and b/docs/images/todo-widget-preview.png differ diff --git a/docs/logo.png b/docs/logo.png new file mode 100644 index 0000000..7dbc2cc Binary files /dev/null and b/docs/logo.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..f0d15ee 100644 --- a/go.mod +++ b/go.mod @@ -1,32 +1,33 @@ module github.com/glanceapp/glance -go 1.23.6 +go 1.24.4 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.5 github.com/tidwall/gjson v1.18.0 - golang.org/x/text v0.22.0 + golang.org/x/crypto v0.39.0 + golang.org/x/text v0.26.0 gopkg.in/yaml.v3 v3.0.1 ) require ( - github.com/PuerkitoBio/goquery v1.10.1 // indirect + github.com/PuerkitoBio/goquery v1.10.3 // indirect github.com/andybalholm/cascadia v1.3.3 // indirect - github.com/ebitengine/purego v0.8.2 // indirect + github.com/ebitengine/purego v0.8.4 // 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.41.0 // indirect + golang.org/x/sys v0.33.0 // indirect ) diff --git a/go.sum b/go.sum index 97af31d..ee3bde9 100644 --- a/go.sum +++ b/go.sum @@ -1,24 +1,25 @@ -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.3 h1:pFYcNSqHxBD06Fpj/KsbStFRsgRATgnf3LeXiUkhzPo= +github.com/PuerkitoBio/goquery v1.10.3/go.mod h1:tMUX0zDMHXYlAQk6p35XxQMqMweEKB7iK7iLNd4RH4Y= 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= github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c= github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= -github.com/ebitengine/purego v0.8.2 h1:jPPGWs2sZ1UgOSgD2bClL0MJIqu58nOmIcBuXr62z1I= -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/ebitengine/purego v0.8.4 h1:CF7LEKg5FFOsASUj0+QwaXf8Ht6TlFxg09+S9wz0omw= +github.com/ebitengine/purego v0.8.4/go.mod h1:iIjxzd6CiRiOG0UyXP+V1+jWqUXVjPKLAI0mRfJZTmQ= +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/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU= 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= @@ -32,8 +33,10 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt9k/+g42oCprj/FisM4qX9L3sZB3upGN2ZU= 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.4 h1:cdtFO363VEOOFrUCjZRh4XVJkb548lyF0q0uTeMqYPw= +github.com/shirou/gopsutil/v4 v4.25.4/go.mod h1:xbuxyoZj+UsgnZrENu3lQivsngRR5BdjbJwf2fv4szA= +github.com/shirou/gopsutil/v4 v4.25.5 h1:rtd9piuSMGeU8g1RMXjZs9y9luK5BwtnG7dZaQUJAsc= +github.com/shirou/gopsutil/v4 v4.25.5/go.mod h1:PfybzyydfZcN+JMMjkF6Zb8Mq1A/VcogFFg7hj50W9c= 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= @@ -45,10 +48,10 @@ github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JT github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU= 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/numcpus v0.9.0 h1:lmyCHtANi8aRUgkckBgoDk1nHCux3n2cgkJLXdQGPDo= -github.com/tklauser/numcpus v0.9.0/go.mod h1:SN6Nq1O3VychhC1npsWostA+oW+VOQTxZrS604NSRyI= +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.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= @@ -58,6 +61,10 @@ golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliY golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU= golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8= golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk= +golang.org/x/crypto v0.38.0 h1:jt+WWG8IZlBnVbomuhg2Mdq0+BBQaHbtqHEFEigjUV8= +golang.org/x/crypto v0.38.0/go.mod h1:MvrbAqul58NNYPKnOra203SB9vpuZW0e+RRZV+Ggqjw= +golang.org/x/crypto v0.39.0 h1:SHs+kF4LP+f+p14esP5jAoDpHU8Gu/v9lFRK6IT5imM= +golang.org/x/crypto v0.39.0/go.mod h1:L+Xg3Wf6HoL4Bn4238Z6ft6KfEpN0tJGo53AAPC632U= golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4= golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs= golang.org/x/mod v0.12.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs= @@ -72,8 +79,10 @@ golang.org/x/net v0.15.0/go.mod h1:idbUs1IY1+zTqbi8yxTbhexhEEk5ur9LInksu6HrEpk= golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44= 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.40.0 h1:79Xs7wF06Gbdcg4kdCCIQArK11Z1hr5POQ6+fIYHNuY= +golang.org/x/net v0.40.0/go.mod h1:y0hY0exeL2Pku80/zKK7tpntoX23cqL3Oa6njdgRtds= +golang.org/x/net v0.41.0 h1:vBTly1HeNPEn3wtREYfy4GZ/NECgw2Cnl+nK6Nz3uvw= +golang.org/x/net v0.41.0/go.mod h1:B/K4NNqkfmg07DQYrbwvSluqCJOOXwUjeb/5lOisjbA= 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= @@ -95,8 +104,8 @@ golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= 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.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw= +golang.org/x/sys v0.33.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= @@ -115,8 +124,10 @@ golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE= golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU= 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.25.0 h1:qVyWApTSYLk/drJRO5mDlNYskwQznZmkpV2c8q9zls4= +golang.org/x/text v0.25.0/go.mod h1:WEdwpYrmk1qmdHvhkSTNPm3app7v4rsT8F2UD6+VHIA= +golang.org/x/text v0.26.0 h1:P42AVeLghgTYr4+xUnTRKDMqpar+PtX7KWuNQL21L8M= +golang.org/x/text v0.26.0/go.mod h1:QK15LZJUUQVJxhz7wXgxSy/CJaTFjd0G+YLonydOVQA= 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/auth.go b/internal/glance/auth.go new file mode 100644 index 0000000..e6497a1 --- /dev/null +++ b/internal/glance/auth.go @@ -0,0 +1,343 @@ +package glance + +import ( + "bytes" + "crypto/hmac" + "crypto/rand" + "crypto/sha256" + "encoding/base64" + "encoding/binary" + "encoding/json" + "fmt" + "io" + "log" + mathrand "math/rand/v2" + "net/http" + "strconv" + "strings" + "time" + + "golang.org/x/crypto/bcrypt" +) + +const AUTH_SESSION_COOKIE_NAME = "session_token" +const AUTH_RATE_LIMIT_WINDOW = 5 * time.Minute +const AUTH_RATE_LIMIT_MAX_ATTEMPTS = 5 + +const AUTH_TOKEN_SECRET_LENGTH = 32 +const AUTH_USERNAME_HASH_LENGTH = 32 +const AUTH_SECRET_KEY_LENGTH = AUTH_TOKEN_SECRET_LENGTH + AUTH_USERNAME_HASH_LENGTH +const AUTH_TIMESTAMP_LENGTH = 4 // uint32 +const AUTH_TOKEN_DATA_LENGTH = AUTH_USERNAME_HASH_LENGTH + AUTH_TIMESTAMP_LENGTH + +// How long the token will be valid for +const AUTH_TOKEN_VALID_PERIOD = 14 * 24 * time.Hour // 14 days +// How long the token has left before it should be regenerated +const AUTH_TOKEN_REGEN_BEFORE = 7 * 24 * time.Hour // 7 days + +var loginPageTemplate = mustParseTemplate("login.html", "document.html", "footer.html") + +type doWhenUnauthorized int + +const ( + redirectToLogin doWhenUnauthorized = iota + showUnauthorizedJSON +) + +type failedAuthAttempt struct { + attempts int + first time.Time +} + +func generateSessionToken(username string, secret []byte, now time.Time) (string, error) { + if len(secret) != AUTH_SECRET_KEY_LENGTH { + return "", fmt.Errorf("secret key length is not %d bytes", AUTH_SECRET_KEY_LENGTH) + } + + usernameHash, err := computeUsernameHash(username, secret) + if err != nil { + return "", err + } + + data := make([]byte, AUTH_TOKEN_DATA_LENGTH) + copy(data, usernameHash) + expires := now.Add(AUTH_TOKEN_VALID_PERIOD).Unix() + binary.LittleEndian.PutUint32(data[AUTH_USERNAME_HASH_LENGTH:], uint32(expires)) + + h := hmac.New(sha256.New, secret[0:AUTH_TOKEN_SECRET_LENGTH]) + h.Write(data) + + signature := h.Sum(nil) + encodedToken := base64.StdEncoding.EncodeToString(append(data, signature...)) + // encodedToken ends up being (hashed username + expiration timestamp + signature) encoded as base64 + + return encodedToken, nil +} + +func computeUsernameHash(username string, secret []byte) ([]byte, error) { + if len(secret) != AUTH_SECRET_KEY_LENGTH { + return nil, fmt.Errorf("secret key length is not %d bytes", AUTH_SECRET_KEY_LENGTH) + } + + h := hmac.New(sha256.New, secret[AUTH_TOKEN_SECRET_LENGTH:]) + h.Write([]byte(username)) + + return h.Sum(nil), nil +} + +func verifySessionToken(token string, secretBytes []byte, now time.Time) ([]byte, bool, error) { + tokenBytes, err := base64.StdEncoding.DecodeString(token) + if err != nil { + return nil, false, err + } + + if len(tokenBytes) != AUTH_TOKEN_DATA_LENGTH+32 { + return nil, false, fmt.Errorf("token length is invalid") + } + + if len(secretBytes) != AUTH_SECRET_KEY_LENGTH { + return nil, false, fmt.Errorf("secret key length is not %d bytes", AUTH_SECRET_KEY_LENGTH) + } + + usernameHashBytes := tokenBytes[0:AUTH_USERNAME_HASH_LENGTH] + timestampBytes := tokenBytes[AUTH_USERNAME_HASH_LENGTH : AUTH_USERNAME_HASH_LENGTH+AUTH_TIMESTAMP_LENGTH] + providedSignatureBytes := tokenBytes[AUTH_TOKEN_DATA_LENGTH:] + + h := hmac.New(sha256.New, secretBytes[0:32]) + h.Write(tokenBytes[0:AUTH_TOKEN_DATA_LENGTH]) + expectedSignatureBytes := h.Sum(nil) + + if !hmac.Equal(expectedSignatureBytes, providedSignatureBytes) { + return nil, false, fmt.Errorf("signature does not match") + } + + expiresTimestamp := int64(binary.LittleEndian.Uint32(timestampBytes)) + if now.Unix() > expiresTimestamp { + return nil, false, fmt.Errorf("token has expired") + } + + return usernameHashBytes, + // True if the token should be regenerated + time.Unix(expiresTimestamp, 0).Add(-AUTH_TOKEN_REGEN_BEFORE).Before(now), + nil +} + +func makeAuthSecretKey(length int) (string, error) { + key := make([]byte, length) + _, err := rand.Read(key) + if err != nil { + return "", err + } + return base64.StdEncoding.EncodeToString(key), nil +} + +func (a *application) handleAuthenticationAttempt(w http.ResponseWriter, r *http.Request) { + if r.Header.Get("Content-Type") != "application/json" { + w.WriteHeader(http.StatusBadRequest) + return + } + + waitOnFailure := 1*time.Second - time.Duration(mathrand.IntN(500))*time.Millisecond + + ip := a.addressOfRequest(r) + + a.authAttemptsMu.Lock() + exceededRateLimit, retryAfter := func() (bool, int) { + attempt, exists := a.failedAuthAttempts[ip] + if !exists { + a.failedAuthAttempts[ip] = &failedAuthAttempt{ + attempts: 1, + first: time.Now(), + } + + return false, 0 + } + + elapsed := time.Since(attempt.first) + if elapsed < AUTH_RATE_LIMIT_WINDOW && attempt.attempts >= AUTH_RATE_LIMIT_MAX_ATTEMPTS { + return true, max(1, int(AUTH_RATE_LIMIT_WINDOW.Seconds()-elapsed.Seconds())) + } + + attempt.attempts++ + return false, 0 + }() + + if exceededRateLimit { + a.authAttemptsMu.Unlock() + time.Sleep(waitOnFailure) + w.Header().Set("Retry-After", strconv.Itoa(retryAfter)) + w.WriteHeader(http.StatusTooManyRequests) + return + } else { + // Clean up old failed attempts + for ipOfAttempt := range a.failedAuthAttempts { + if time.Since(a.failedAuthAttempts[ipOfAttempt].first) > AUTH_RATE_LIMIT_WINDOW { + delete(a.failedAuthAttempts, ipOfAttempt) + } + } + a.authAttemptsMu.Unlock() + } + + body, err := io.ReadAll(r.Body) + if err != nil { + w.WriteHeader(http.StatusBadRequest) + return + } + + var creds struct { + Username string `json:"username"` + Password string `json:"password"` + } + + err = json.Unmarshal(body, &creds) + if err != nil { + w.WriteHeader(http.StatusBadRequest) + return + } + + logAuthFailure := func() { + log.Printf( + "Failed login attempt for user '%s' from %s", + creds.Username, ip, + ) + } + + if len(creds.Username) == 0 || len(creds.Password) == 0 { + time.Sleep(waitOnFailure) + w.WriteHeader(http.StatusUnauthorized) + return + } + + if len(creds.Username) > 50 || len(creds.Password) > 100 { + logAuthFailure() + time.Sleep(waitOnFailure) + w.WriteHeader(http.StatusUnauthorized) + return + } + + u, exists := a.Config.Auth.Users[creds.Username] + if !exists { + logAuthFailure() + time.Sleep(waitOnFailure) + w.WriteHeader(http.StatusUnauthorized) + return + } + + if err := bcrypt.CompareHashAndPassword(u.PasswordHash, []byte(creds.Password)); err != nil { + logAuthFailure() + time.Sleep(waitOnFailure) + w.WriteHeader(http.StatusUnauthorized) + return + } + + token, err := generateSessionToken(creds.Username, a.authSecretKey, time.Now()) + if err != nil { + log.Printf("Could not compute session token during login attempt: %v", err) + time.Sleep(waitOnFailure) + w.WriteHeader(http.StatusUnauthorized) + return + } + + a.setAuthSessionCookie(w, r, token, time.Now().Add(AUTH_TOKEN_VALID_PERIOD)) + + a.authAttemptsMu.Lock() + delete(a.failedAuthAttempts, ip) + a.authAttemptsMu.Unlock() + + w.WriteHeader(http.StatusOK) +} + +func (a *application) isAuthorized(w http.ResponseWriter, r *http.Request) bool { + if !a.RequiresAuth { + return true + } + + token, err := r.Cookie(AUTH_SESSION_COOKIE_NAME) + if err != nil || token.Value == "" { + return false + } + + usernameHash, shouldRegenerate, err := verifySessionToken(token.Value, a.authSecretKey, time.Now()) + if err != nil { + return false + } + + username, exists := a.usernameHashToUsername[string(usernameHash)] + if !exists { + return false + } + + _, exists = a.Config.Auth.Users[username] + if !exists { + return false + } + + if shouldRegenerate { + newToken, err := generateSessionToken(username, a.authSecretKey, time.Now()) + if err != nil { + log.Printf("Could not compute session token during regeneration: %v", err) + return false + } + + a.setAuthSessionCookie(w, r, newToken, time.Now().Add(AUTH_TOKEN_VALID_PERIOD)) + } + + return true +} + +// Handles sending the appropriate response for an unauthorized request and returns true if the request was unauthorized +func (a *application) handleUnauthorizedResponse(w http.ResponseWriter, r *http.Request, fallback doWhenUnauthorized) bool { + if a.isAuthorized(w, r) { + return false + } + + switch fallback { + case redirectToLogin: + http.Redirect(w, r, a.Config.Server.BaseURL+"/login", http.StatusSeeOther) + case showUnauthorizedJSON: + w.WriteHeader(http.StatusUnauthorized) + w.Write([]byte(`{"error": "Unauthorized"}`)) + } + + return true +} + +// Maybe this should be a POST request instead? +func (a *application) handleLogoutRequest(w http.ResponseWriter, r *http.Request) { + a.setAuthSessionCookie(w, r, "", time.Now().Add(-1*time.Hour)) + http.Redirect(w, r, a.Config.Server.BaseURL+"/login", http.StatusSeeOther) +} + +func (a *application) setAuthSessionCookie(w http.ResponseWriter, r *http.Request, token string, expires time.Time) { + http.SetCookie(w, &http.Cookie{ + Name: AUTH_SESSION_COOKIE_NAME, + Value: token, + Expires: expires, + Secure: strings.ToLower(r.Header.Get("X-Forwarded-Proto")) == "https", + Path: a.Config.Server.BaseURL + "/", + SameSite: http.SameSiteLaxMode, + HttpOnly: true, + }) +} + +func (a *application) handleLoginPageRequest(w http.ResponseWriter, r *http.Request) { + if a.isAuthorized(w, r) { + http.Redirect(w, r, a.Config.Server.BaseURL+"/", http.StatusSeeOther) + return + } + + data := &templateData{ + App: a, + } + a.populateTemplateRequestData(&data.Request, r) + + var responseBytes bytes.Buffer + err := loginPageTemplate.Execute(&responseBytes, data) + if err != nil { + w.WriteHeader(http.StatusInternalServerError) + w.Write([]byte(err.Error())) + return + } + + w.Write(responseBytes.Bytes()) +} diff --git a/internal/glance/auth_test.go b/internal/glance/auth_test.go new file mode 100644 index 0000000..97e6bc9 --- /dev/null +++ b/internal/glance/auth_test.go @@ -0,0 +1,85 @@ +package glance + +import ( + "bytes" + "encoding/base64" + "testing" + "time" +) + +func TestAuthTokenGenerationAndVerification(t *testing.T) { + secret, err := makeAuthSecretKey(AUTH_SECRET_KEY_LENGTH) + if err != nil { + t.Fatalf("Failed to generate secret key: %v", err) + } + + secretBytes, err := base64.StdEncoding.DecodeString(secret) + if err != nil { + t.Fatalf("Failed to decode secret key: %v", err) + } + + if len(secretBytes) != AUTH_SECRET_KEY_LENGTH { + t.Fatalf("Secret key length is not %d bytes", AUTH_SECRET_KEY_LENGTH) + } + + now := time.Now() + username := "admin" + + token, err := generateSessionToken(username, secretBytes, now) + if err != nil { + t.Fatalf("Failed to generate session token: %v", err) + } + + usernameHashBytes, shouldRegen, err := verifySessionToken(token, secretBytes, now) + if err != nil { + t.Fatalf("Failed to verify session token: %v", err) + } + + if shouldRegen { + t.Fatal("Token should not need to be regenerated immediately after generation") + } + + computedUsernameHash, err := computeUsernameHash(username, secretBytes) + if err != nil { + t.Fatalf("Failed to compute username hash: %v", err) + } + + if !bytes.Equal(usernameHashBytes, computedUsernameHash) { + t.Fatal("Username hash does not match the expected value") + } + + // Test token regeneration + timeRightAfterRegenPeriod := now.Add(AUTH_TOKEN_VALID_PERIOD - AUTH_TOKEN_REGEN_BEFORE + 2*time.Second) + _, shouldRegen, err = verifySessionToken(token, secretBytes, timeRightAfterRegenPeriod) + if err != nil { + t.Fatalf("Token verification should not fail during regeneration period, err: %v", err) + } + + if !shouldRegen { + t.Fatal("Token should have been marked for regeneration") + } + + // Test token expiration + _, _, err = verifySessionToken(token, secretBytes, now.Add(AUTH_TOKEN_VALID_PERIOD+2*time.Second)) + if err == nil { + t.Fatal("Expected token verification to fail after token expiration") + } + + // Test tampered token + decodedToken, err := base64.StdEncoding.DecodeString(token) + if err != nil { + t.Fatalf("Failed to decode token: %v", err) + } + + // If any of the bytes are off by 1, the token should be considered invalid + for i := range len(decodedToken) { + tampered := make([]byte, len(decodedToken)) + copy(tampered, decodedToken) + tampered[i] += 1 + + _, _, err = verifySessionToken(base64.StdEncoding.EncodeToString(tampered), secretBytes, now) + if err == nil { + t.Fatalf("Expected token verification to fail for tampered token at index %d", i) + } + } +} diff --git a/internal/glance/cli.go b/internal/glance/cli.go index e231706..5544b8b 100644 --- a/internal/glance/cli.go +++ b/internal/glance/cli.go @@ -5,23 +5,41 @@ 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 + cliIntentSecretMake + cliIntentPasswordHash ) 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") @@ -30,10 +48,15 @@ func parseCliOptions() (*cliOptions, error) { flags.PrintDefaults() 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(" diagnose Run diagnostic checks") + fmt.Println(" config:validate Validate the config file") + fmt.Println(" config:print Print the parsed config file with embedded includes") + fmt.Println(" password:hash Hash a password") + fmt.Println(" secret:make Generate a random secret key") + 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") err := flags.Parse(os.Args[1:]) if err != nil { @@ -41,7 +64,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,8 +74,24 @@ 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 if args[0] == "secret:make" { + intent = cliIntentSecretMake + } else { + return nil, unknownCommandErr + } + } else if len(args) == 2 { + if args[0] == "password:hash" { + intent = cliIntentPasswordHash + } else { + return nil, unknownCommandErr + } + } else if len(args) == 2 { + if args[0] == "mountpoint:info" { + intent = cliIntentMountpointInfo } else { return nil, unknownCommandErr } @@ -63,5 +102,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..c1fa73b 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,8 @@ 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\.]+)%?\)?$`) +var inStringPropertyPattern = regexp.MustCompile(`(?m)([a-zA-Z]+)\[(.*?)\]`) const ( hslHueMax = 360 @@ -22,17 +24,32 @@ const ( ) type hslColorField struct { - Hue uint16 - Saturation uint8 - Lightness uint8 + H float64 + S float64 + L 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.H, c.S, c.L) +} + +func (c *hslColorField) ToHex() string { + return hslToHex(c.H, c.S, c.L) +} + +func (c1 *hslColorField) SameAs(c2 *hslColorField) bool { + if c1 == nil && c2 == nil { + return true + } + if c1 == nil || c2 == nil { + return false + } + return c1.H == c2.H && c1.S == c2.S && c1.L == c2.L } func (c *hslColorField) UnmarshalYAML(node *yaml.Node) error { var value string + errorLine := fmt.Sprintf("line %d:", node.Line) if err := node.Decode(&value); err != nil { return err @@ -41,39 +58,39 @@ func (c *hslColorField) UnmarshalYAML(node *yaml.Node) error { matches := hslColorFieldPattern.FindStringSubmatch(value) if len(matches) != 4 { - return fmt.Errorf("invalid HSL color format: %s", value) + return fmt.Errorf("%s invalid HSL color format: %s", errorLine, value) } - hue, err := strconv.ParseUint(matches[1], 10, 16) + hue, err := strconv.ParseFloat(matches[1], 64) if err != nil { return err } if hue > hslHueMax { - return fmt.Errorf("HSL hue must be between 0 and %d", hslHueMax) + return fmt.Errorf("%s HSL hue must be between 0 and %d", errorLine, hslHueMax) } - saturation, err := strconv.ParseUint(matches[2], 10, 8) + saturation, err := strconv.ParseFloat(matches[2], 64) if err != nil { return err } if saturation > hslSaturationMax { - return fmt.Errorf("HSL saturation must be between 0 and %d", hslSaturationMax) + return fmt.Errorf("%s HSL saturation must be between 0 and %d", errorLine, hslSaturationMax) } - lightness, err := strconv.ParseUint(matches[3], 10, 8) + lightness, err := strconv.ParseFloat(matches[3], 64) if err != nil { return err } if lightness > hslLightnessMax { - return fmt.Errorf("HSL lightness must be between 0 and %d", hslLightnessMax) + return fmt.Errorf("%s HSL lightness must be between 0 and %d", errorLine, hslLightnessMax) } - c.Hue = uint16(hue) - c.Saturation = uint8(saturation) - c.Lightness = uint8(lightness) + c.H = hue + c.S = saturation + c.L = lightness return nil } @@ -84,6 +101,7 @@ type durationField time.Duration func (d *durationField) UnmarshalYAML(node *yaml.Node) error { var value string + errorLine := fmt.Sprintf("line %d:", node.Line) if err := node.Decode(&value); err != nil { return err @@ -92,12 +110,12 @@ func (d *durationField) UnmarshalYAML(node *yaml.Node) error { matches := durationFieldPattern.FindStringSubmatch(value) if len(matches) != 3 { - return fmt.Errorf("invalid duration format: %s", value) + return fmt.Errorf("%s invalid duration format for value `%s`", errorLine, value) } duration, err := strconv.Atoi(matches[1]) if err != nil { - return err + return fmt.Errorf("%s invalid duration value: %s", errorLine, matches[1]) } switch matches[2] { @@ -115,49 +133,91 @@ func (d *durationField) UnmarshalYAML(node *yaml.Node) error { } type customIconField struct { - URL string - 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 - // invert the color based on the theme being light or dark + URL template.URL + Color string + AutoInvert bool +} + +func (h *customIconField) Elem() template.HTML { + return h.ElemWithClass("") +} + +func (h *customIconField) ElemWithClass(class string) template.HTML { + if h.AutoInvert && h.Color == "" { + class = "flat-icon " + class + } + + if h.Color != "" { + return template.HTML( + `
`, + ) + } + + return template.HTML( + ``, + ) } func newCustomIconField(value string) customIconField { + const autoInvertPrefix = "auto-invert " field := customIconField{} + if strings.HasPrefix(value, autoInvertPrefix) { + field.AutoInvert = true + value = strings.TrimPrefix(value, autoInvertPrefix) + } + + value, properties := parseInStringProperties(value) + + if color, ok := properties["color"]; ok { + switch color { + case "primary": + color = "var(--color-primary)" + case "positive": + color = "var(--color-positive)" + case "negative": + color = "var(--color-negative)" + case "base": + color = "var(--color-text-base)" + case "subdue": + color = "var(--color-text-subdue)" + } + + field.Color = color + } + 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.IsFlatIcon = true - case "di", "sh": - // syntax: di:[.svg|.png] - // syntax: sh:[.svg|.png] - // if the icon name is specified without extension, it is assumed to be wanting the SVG icon - // otherwise, specify the extension of either .svg or .png to use either of the CDN offerings - // any other extension will be interpreted as .svg - basename, ext, found := strings.Cut(icon, ".") - if !found { - ext = "svg" - basename = icon - } + basename, ext, found := strings.Cut(icon, ".") + if !found { + ext = "svg" + basename = icon + } - if ext != "svg" && ext != "png" { - ext = "svg" - } + if ext != "svg" && ext != "png" { + ext = "svg" + } - if prefix == "di" { - field.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 - } + switch prefix { + case "si": + field.AutoInvert = true + field.URL = template.URL("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/" + basename + ".svg") + case "di": + field.URL = template.URL("https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/" + ext + "/" + basename + "." + ext) + case "mdi": + field.AutoInvert = true + field.URL = template.URL("https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/" + basename + ".svg") + case "sh": + field.URL = template.URL("https://cdn.jsdelivr.net/gh/selfhst/icons/" + ext + "/" + basename + "." + ext) + case "hi": + field.AutoInvert = true + field.URL = template.URL("https://cdn.jsdelivr.net/npm/heroicons@latest/24/" + basename + ".svg") default: - field.URL = value + field.URL = template.URL(value) } return field @@ -173,6 +233,23 @@ func (i *customIconField) UnmarshalYAML(node *yaml.Node) error { return nil } +func parseInStringProperties(value string) (string, map[string]string) { + properties := make(map[string]string) + + value = inStringPropertyPattern.ReplaceAllStringFunc(value, func(match string) string { + matches := inStringPropertyPattern.FindStringSubmatch(match) + if len(matches) != 3 { + return "" + } + + properties[matches[1]] = matches[2] + + return "" + }) + + return strings.TrimSpace(value), properties +} + type proxyOptionsField struct { URL string `yaml:"url"` AllowInsecure bool `yaml:"allow-insecure"` @@ -231,6 +308,8 @@ func (q *queryParametersField) UnmarshalYAML(node *yaml.Node) error { *q = make(queryParametersField) + errorLine := fmt.Sprintf("line %d:", node.Line) + // TODO: refactor the duplication in the switch cases if any more types get added for key, value := range decoded { switch v := value.(type) { @@ -252,11 +331,11 @@ func (q *queryParametersField) UnmarshalYAML(node *yaml.Node) error { case bool: (*q)[key] = append((*q)[key], fmt.Sprintf("%t", item)) default: - return fmt.Errorf("invalid query parameter value type: %T", item) + return fmt.Errorf("%s invalid query parameter value type: %T", errorLine, item) } } default: - return fmt.Errorf("invalid query parameter value type: %T", value) + return fmt.Errorf("%s invalid query parameter value type: %T", errorLine, value) } } diff --git a/internal/glance/config.go b/internal/glance/config.go index a63afff..d4d6af0 100644 --- a/internal/glance/config.go +++ b/internal/glance/config.go @@ -2,8 +2,10 @@ package glance import ( "bytes" + "errors" "fmt" "html/template" + "iter" "log" "maps" "os" @@ -27,49 +29,61 @@ const ( 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"` + Proxied bool `yaml:"proxied"` + AssetsPath string `yaml:"assets-path"` + BaseURL string `yaml:"base-url"` } `yaml:"server"` + Auth struct { + SecretKey string `yaml:"secret-key"` + Users map[string]*user `yaml:"users"` + } `yaml:"auth"` + Document struct { Head template.HTML `yaml:"head"` } `yaml:"document"` Theme struct { - BackgroundColor *hslColorField `yaml:"background-color"` - PrimaryColor *hslColorField `yaml:"primary-color"` - PositiveColor *hslColorField `yaml:"positive-color"` - NegativeColor *hslColorField `yaml:"negative-color"` - Light bool `yaml:"light"` - ContrastMultiplier float32 `yaml:"contrast-multiplier"` - TextSaturationMultiplier float32 `yaml:"text-saturation-multiplier"` - CustomCSSFile string `yaml:"custom-css-file"` + themeProperties `yaml:",inline"` + CustomCSSFile string `yaml:"custom-css-file"` + + DisablePicker bool `yaml:"disable-picker"` + Presets orderedYAMLMap[string, *themeProperties] `yaml:"presets"` } `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"` + FaviconType string `yaml:"-"` + AppName string `yaml:"app-name"` + AppIconURL string `yaml:"app-icon-url"` + AppBackgroundColor string `yaml:"app-background-color"` } `yaml:"branding"` Pages []page `yaml:"pages"` } +type user struct { + Password string `yaml:"password"` + PasswordHashString string `yaml:"password-hash"` + PasswordHash []byte `yaml:"-"` +} + 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"` - CenterVertically bool `yaml:"center-vertically"` - Columns []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"` + HideDesktopNavigation bool `yaml:"hide-desktop-navigation"` + CenterVertically bool `yaml:"center-vertically"` + HeadWidgets widgets `yaml:"head-widgets"` + Columns []struct { Size string `yaml:"size"` Widgets widgets `yaml:"widgets"` } `yaml:"columns"` @@ -96,6 +110,12 @@ func newConfigFromYAML(contents []byte) (*config, error) { } for p := range config.Pages { + for w := range config.Pages[p].HeadWidgets { + if err := config.Pages[p].HeadWidgets[w].initialize(); err != nil { + return nil, formatWidgetInitError(err, config.Pages[p].HeadWidgets[w]) + } + } + for c := range config.Pages[p].Columns { for w := range config.Pages[p].Columns[c].Widgets { if err := config.Pages[p].Columns[c].Widgets[w].initialize(); err != nil { @@ -424,11 +444,39 @@ func configFilesWatcher( }, nil } +// TODO: Refactor, we currently validate in two different places, this being +// one of them, which doesn't modify the data and only checks for logical errors +// and then again when creating the application which does modify the data and do +// further validation. Would be better if validation was done in a single place. func isConfigStateValid(config *config) error { if len(config.Pages) == 0 { return fmt.Errorf("no pages configured") } + if len(config.Auth.Users) > 0 && config.Auth.SecretKey == "" { + return fmt.Errorf("secret-key must be set when users are configured") + } + + for username := range config.Auth.Users { + if username == "" { + return fmt.Errorf("user has no name") + } + + if len(username) < 3 { + return errors.New("usernames must be at least 3 characters") + } + + user := config.Auth.Users[username] + + if user.Password == "" { + if user.PasswordHashString == "" { + return fmt.Errorf("user %s must have a password or a password-hash set", username) + } + } else if len(user.Password) < 6 { + return fmt.Errorf("the password for %s must be at least 6 characters", username) + } + } + if config.Server.AssetsPath != "" { if _, err := os.Stat(config.Server.AssetsPath); os.IsNotExist(err) { return fmt.Errorf("assets directory does not exist: %s", config.Server.AssetsPath) @@ -487,3 +535,103 @@ func isConfigStateValid(config *config) error { return nil } + +// Read-only way to store ordered maps from a YAML structure +type orderedYAMLMap[K comparable, V any] struct { + keys []K + data map[K]V +} + +func newOrderedYAMLMap[K comparable, V any](keys []K, values []V) (*orderedYAMLMap[K, V], error) { + if len(keys) != len(values) { + return nil, fmt.Errorf("keys and values must have the same length") + } + + om := &orderedYAMLMap[K, V]{ + keys: make([]K, len(keys)), + data: make(map[K]V, len(keys)), + } + + copy(om.keys, keys) + + for i := range keys { + om.data[keys[i]] = values[i] + } + + return om, nil +} + +func (om *orderedYAMLMap[K, V]) Items() iter.Seq2[K, V] { + return func(yield func(K, V) bool) { + for _, key := range om.keys { + value, ok := om.data[key] + if !ok { + continue + } + if !yield(key, value) { + return + } + } + } +} + +func (om *orderedYAMLMap[K, V]) Get(key K) (V, bool) { + value, ok := om.data[key] + return value, ok +} + +func (self *orderedYAMLMap[K, V]) Merge(other *orderedYAMLMap[K, V]) *orderedYAMLMap[K, V] { + merged := &orderedYAMLMap[K, V]{ + keys: make([]K, 0, len(self.keys)+len(other.keys)), + data: make(map[K]V, len(self.data)+len(other.data)), + } + + merged.keys = append(merged.keys, self.keys...) + maps.Copy(merged.data, self.data) + + for _, key := range other.keys { + if _, exists := self.data[key]; !exists { + merged.keys = append(merged.keys, key) + } + } + maps.Copy(merged.data, other.data) + + return merged +} + +func (om *orderedYAMLMap[K, V]) UnmarshalYAML(node *yaml.Node) error { + if node.Kind != yaml.MappingNode { + return fmt.Errorf("orderedMap: expected mapping node, got %d", node.Kind) + } + + if len(node.Content)%2 != 0 { + return fmt.Errorf("orderedMap: expected even number of content items, got %d", len(node.Content)) + } + + om.keys = make([]K, len(node.Content)/2) + om.data = make(map[K]V, len(node.Content)/2) + + for i := 0; i < len(node.Content); i += 2 { + keyNode := node.Content[i] + valueNode := node.Content[i+1] + + var key K + if err := keyNode.Decode(&key); err != nil { + return fmt.Errorf("orderedMap: decoding key: %v", err) + } + + if _, ok := om.data[key]; ok { + return fmt.Errorf("orderedMap: duplicate key %v", key) + } + + var value V + if err := valueNode.Decode(&value); err != nil { + return fmt.Errorf("orderedMap: decoding value: %v", err) + } + + (*om).keys[i/2] = key + (*om).data[key] = value + } + + return nil +} diff --git a/internal/glance/diagnose.go b/internal/glance/diagnose.go index 27d0e19..2839a23 100644 --- a/internal/glance/diagnose.go +++ b/internal/glance/diagnose.go @@ -12,7 +12,7 @@ import ( "time" ) -const httpTestRequestTimeout = 10 * time.Second +const httpTestRequestTimeout = 15 * time.Second var diagnosticSteps = []diagnosticStep{ { @@ -75,13 +75,17 @@ var diagnosticSteps = []diagnosticStep{ { name: "fetch data from Reddit API", fn: func() (string, error) { - return testHttpRequest("GET", "https://www.reddit.com/search.json", 200) + return testHttpRequestWithHeaders("GET", "https://www.reddit.com/search.json", map[string]string{ + "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0", + }, 200) }, }, { 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) }, }, { @@ -163,7 +167,7 @@ func testHttpRequestWithHeaders(method, url string, headers map[string]string, e request.Header.Add(key, value) } - response, err := http.DefaultClient.Do(request) + response, err := defaultHTTPClient.Do(request) if err != nil { return "", err } diff --git a/internal/glance/embed.go b/internal/glance/embed.go index 3d0db8c..e09caa8 100644 --- a/internal/glance/embed.go +++ b/internal/glance/embed.go @@ -82,7 +82,6 @@ func computeFSHash(files fs.FS) (string, error) { 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 { diff --git a/internal/glance/glance.go b/internal/glance/glance.go index ab63536..28771fa 100644 --- a/internal/glance/glance.go +++ b/internal/glance/glance.go @@ -3,52 +3,151 @@ package glance import ( "bytes" "context" + "encoding/base64" "fmt" - "html/template" "log" "net/http" "path/filepath" + "slices" "strconv" "strings" "sync" "time" + + "golang.org/x/crypto/bcrypt" ) var ( - pageTemplate = mustParseTemplate("page.html", "document.html") - pageContentTemplate = mustParseTemplate("page-content.html") - pageThemeStyleTemplate = mustParseTemplate("theme-style.gotmpl") + pageTemplate = mustParseTemplate("page.html", "document.html", "footer.html") + pageContentTemplate = mustParseTemplate("page-content.html") + manifestTemplate = mustParseTemplate("manifest.json") ) const STATIC_ASSETS_CACHE_DURATION = 24 * time.Hour +var reservedPageSlugs = []string{"login", "logout"} + type application struct { - Version string - Config config - ParsedThemeStyle template.HTML + Version string + CreatedAt time.Time + Config config + + parsedManifest []byte slugToPage map[string]*page widgetByID map[uint64]widget + + RequiresAuth bool + authSecretKey []byte + usernameHashToUsername map[string]string + authAttemptsMu sync.Mutex + failedAuthAttempts map[string]*failedAuthAttempt } -func newApplication(config *config) (*application, error) { +func newApplication(c *config) (*application, error) { app := &application{ Version: buildVersion, - Config: *config, + CreatedAt: time.Now(), + Config: *c, slugToPage: make(map[string]*page), widgetByID: make(map[uint64]widget), } + config := &app.Config - app.slugToPage[""] = &config.Pages[0] + // + // Init auth + // - providers := &widgetProviders{ - assetResolver: app.AssetPath, + if len(config.Auth.Users) > 0 { + secretBytes, err := base64.StdEncoding.DecodeString(config.Auth.SecretKey) + if err != nil { + return nil, fmt.Errorf("decoding secret-key: %v", err) + } + + if len(secretBytes) != AUTH_SECRET_KEY_LENGTH { + return nil, fmt.Errorf("secret-key must be exactly %d bytes", AUTH_SECRET_KEY_LENGTH) + } + + app.usernameHashToUsername = make(map[string]string) + app.failedAuthAttempts = make(map[string]*failedAuthAttempt) + app.RequiresAuth = true + + for username := range config.Auth.Users { + user := config.Auth.Users[username] + usernameHash, err := computeUsernameHash(username, secretBytes) + if err != nil { + return nil, fmt.Errorf("computing username hash for user %s: %v", username, err) + } + app.usernameHashToUsername[string(usernameHash)] = username + + if user.PasswordHashString != "" { + user.PasswordHash = []byte(user.PasswordHashString) + user.PasswordHashString = "" + } else { + hashedPassword, err := bcrypt.GenerateFromPassword([]byte(user.Password), bcrypt.DefaultCost) + if err != nil { + return nil, fmt.Errorf("hashing password for user %s: %v", username, err) + } + + user.Password = "" + user.PasswordHash = hashedPassword + } + } + + app.authSecretKey = secretBytes } - var err error - app.ParsedThemeStyle, err = executeTemplateToHTML(pageThemeStyleTemplate, &app.Config.Theme) - if err != nil { - return nil, fmt.Errorf("parsing theme style: %v", err) + // + // Init themes + // + + if !config.Theme.DisablePicker { + themeKeys := make([]string, 0, 2) + themeProps := make([]*themeProperties, 0, 2) + + defaultDarkTheme, ok := config.Theme.Presets.Get("default-dark") + if ok && !config.Theme.SameAs(defaultDarkTheme) || !config.Theme.SameAs(&themeProperties{}) { + themeKeys = append(themeKeys, "default-dark") + themeProps = append(themeProps, &themeProperties{}) + } + + themeKeys = append(themeKeys, "default-light") + themeProps = append(themeProps, &themeProperties{ + Light: true, + BackgroundColor: &hslColorField{240, 13, 95}, + PrimaryColor: &hslColorField{230, 100, 30}, + NegativeColor: &hslColorField{0, 70, 50}, + ContrastMultiplier: 1.3, + TextSaturationMultiplier: 0.5, + }) + + themePresets, err := newOrderedYAMLMap(themeKeys, themeProps) + if err != nil { + return nil, fmt.Errorf("creating theme presets: %v", err) + } + config.Theme.Presets = *themePresets.Merge(&config.Theme.Presets) + + for key, properties := range config.Theme.Presets.Items() { + properties.Key = key + if err := properties.init(); err != nil { + return nil, fmt.Errorf("initializing preset theme %s: %v", key, err) + } + } + } + + config.Theme.Key = "default" + if err := config.Theme.init(); err != nil { + return nil, fmt.Errorf("initializing default theme: %v", err) + } + + // + // Init pages + // + + app.slugToPage[""] = &config.Pages[0] + + providers := &widgetProviders{ + assetResolver: app.StaticAssetPath, } for p := range config.Pages { @@ -59,6 +158,10 @@ func newApplication(config *config) (*application, error) { page.Slug = titleToSlug(page.Title) } + if slices.Contains(reservedPageSlugs, page.Slug) { + return nil, fmt.Errorf("page slug \"%s\" is reserved", page.Slug) + } + app.slugToPage[page.Slug] = page if page.Width == "default" { @@ -69,6 +172,12 @@ func newApplication(config *config) (*application, error) { page.DesktopNavigationWidth = page.Width } + for i := range page.HeadWidgets { + widget := page.HeadWidgets[i] + app.widgetByID[widget.GetID()] = widget + widget.setProviders(providers) + } + for c := range page.Columns { column := &page.Columns[c] @@ -79,24 +188,44 @@ func newApplication(config *config) (*application, error) { for w := range column.Widgets { widget := column.Widgets[w] app.widgetByID[widget.GetID()] = widget - widget.setProviders(providers) } } } - 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") - } else { - config.Branding.FaviconURL = app.transformUserDefinedAssetPath(config.Branding.FaviconURL) + config.Branding.FaviconURL = ternary( + config.Branding.FaviconURL == "", + app.StaticAssetPath("favicon.svg"), + app.resolveUserDefinedAssetPath(config.Branding.FaviconURL), + ) + + config.Branding.FaviconType = ternary( + strings.HasSuffix(config.Branding.FaviconURL, ".svg"), + "image/svg+xml", + "image/png", + ) + + if config.Branding.AppName == "" { + config.Branding.AppName = "Glance" + } + + if config.Branding.AppIconURL == "" { + config.Branding.AppIconURL = app.StaticAssetPath("app-icon.png") } - config.Branding.LogoURL = app.transformUserDefinedAssetPath(config.Branding.LogoURL) + if config.Branding.AppBackgroundColor == "" { + config.Branding.AppBackgroundColor = config.Theme.BackgroundColorAsHex + } + + manifest, err := executeTemplateToString(manifestTemplate, templateData{App: app}) + if err != nil { + return nil, fmt.Errorf("parsing manifest.json: %v", err) + } + app.parsedManifest = []byte(manifest) return app, nil } @@ -107,6 +236,20 @@ func (p *page) updateOutdatedWidgets() { var wg sync.WaitGroup context := context.Background() + for w := range p.HeadWidgets { + widget := p.HeadWidgets[w] + + if !widget.requiresUpdate(&now) { + continue + } + + wg.Add(1) + go func() { + defer wg.Done() + widget.update(context) + }() + } + for c := range p.Columns { for w := range p.Columns[c].Widgets { widget := p.Columns[c].Widgets[w] @@ -126,7 +269,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 } @@ -134,26 +277,51 @@ func (a *application) transformUserDefinedAssetPath(path string) string { return path } -type pageTemplateData struct { - App *application - Page *page +type templateRequestData struct { + Theme *themeProperties +} + +type templateData struct { + App *application + Page *page + Request templateRequestData +} + +func (a *application) populateTemplateRequestData(data *templateRequestData, r *http.Request) { + theme := &a.Config.Theme.themeProperties + + if !a.Config.Theme.DisablePicker { + selectedTheme, err := r.Cookie("theme") + if err == nil { + preset, exists := a.Config.Theme.Presets.Get(selectedTheme.Value) + if exists { + theme = preset + } + } + } + + data.Theme = theme } func (a *application) handlePageRequest(w http.ResponseWriter, r *http.Request) { page, exists := a.slugToPage[r.PathValue("page")] - if !exists { a.handleNotFound(w, r) return } - pageData := pageTemplateData{ + if a.handleUnauthorizedResponse(w, r, redirectToLogin) { + return + } + + data := templateData{ Page: page, App: a, } + a.populateTemplateRequestData(&data.Request, r) var responseBytes bytes.Buffer - err := pageTemplate.Execute(&responseBytes, pageData) + err := pageTemplate.Execute(&responseBytes, data) if err != nil { w.WriteHeader(http.StatusInternalServerError) w.Write([]byte(err.Error())) @@ -165,13 +333,16 @@ func (a *application) handlePageRequest(w http.ResponseWriter, r *http.Request) func (a *application) handlePageContentRequest(w http.ResponseWriter, r *http.Request) { page, exists := a.slugToPage[r.PathValue("page")] - if !exists { a.handleNotFound(w, r) return } - pageData := pageTemplateData{ + if a.handleUnauthorizedResponse(w, r, showUnauthorizedJSON) { + return + } + + pageData := templateData{ Page: page, } @@ -195,6 +366,35 @@ func (a *application) handlePageContentRequest(w http.ResponseWriter, r *http.Re w.Write(responseBytes.Bytes()) } +func (a *application) addressOfRequest(r *http.Request) string { + remoteAddrWithoutPort := func() string { + for i := len(r.RemoteAddr) - 1; i >= 0; i-- { + if r.RemoteAddr[i] == ':' { + return r.RemoteAddr[:i] + } + } + + return r.RemoteAddr + } + + if !a.Config.Server.Proxied { + return remoteAddrWithoutPort() + } + + // This should probably be configurable or look for multiple headers, not just this one + forwardedFor := r.Header.Get("X-Forwarded-For") + if forwardedFor == "" { + return remoteAddrWithoutPort() + } + + ips := strings.Split(forwardedFor, ",") + if len(ips) == 0 || ips[0] == "" { + return remoteAddrWithoutPort() + } + + return ips[0] +} + func (a *application) handleNotFound(w http.ResponseWriter, _ *http.Request) { // TODO: add proper not found page w.WriteHeader(http.StatusNotFound) @@ -202,42 +402,60 @@ func (a *application) handleNotFound(w http.ResponseWriter, _ *http.Request) { } func (a *application) handleWidgetRequest(w http.ResponseWriter, r *http.Request) { - widgetValue := r.PathValue("widget") + // TODO: this requires a rework of the widget update logic so that rather + // than locking the entire page we lock individual widgets + w.WriteHeader(http.StatusNotImplemented) - widgetID, err := strconv.ParseUint(widgetValue, 10, 64) - if err != nil { - a.handleNotFound(w, r) - return - } + // widgetValue := r.PathValue("widget") - widget, exists := a.widgetByID[widgetID] + // widgetID, err := strconv.ParseUint(widgetValue, 10, 64) + // if err != nil { + // a.handleNotFound(w, r) + // return + // } - if !exists { - a.handleNotFound(w, r) - return - } + // widget, exists := a.widgetByID[widgetID] + + // if !exists { + // a.handleNotFound(w, r) + // return + // } - widget.handleRequest(w, r) + // 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 mux := http.NewServeMux() mux.HandleFunc("GET /{$}", a.handlePageRequest) mux.HandleFunc("GET /{page}", a.handlePageRequest) mux.HandleFunc("GET /api/pages/{page}/content/{$}", a.handlePageContentRequest) + + if !a.Config.Theme.DisablePicker { + mux.HandleFunc("POST /api/set-theme/{key}", a.handleThemeChangeRequest) + } + mux.HandleFunc("/api/widgets/{widget}/{path...}", a.handleWidgetRequest) mux.HandleFunc("GET /api/healthz", func(w http.ResponseWriter, _ *http.Request) { w.WriteHeader(http.StatusOK) }) + if a.RequiresAuth { + mux.HandleFunc("GET /login", a.handleLoginPageRequest) + mux.HandleFunc("GET /logout", a.handleLogoutRequest) + mux.HandleFunc("POST /api/authenticate", a.handleAuthenticationAttempt) + } + mux.Handle( fmt.Sprintf("GET /static/%s/{path...}", staticFSHash), http.StripPrefix( @@ -246,17 +464,23 @@ func (a *application) server() (func() error, func() error) { ), ) - cssBundleCacheControlValue := fmt.Sprintf( + 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", cssBundleCacheControlValue) + 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) @@ -270,7 +494,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..c994d97 100644 --- a/internal/glance/main.go +++ b/internal/glance/main.go @@ -6,6 +6,11 @@ import ( "log" "net/http" "os" + "regexp" + "strconv" + "strings" + + "golang.org/x/crypto/bcrypt" ) var buildVersion = "dev" @@ -18,6 +23,8 @@ func Main() int { } switch options.intent { + case cliIntentVersionPrint: + fmt.Println(buildVersion) case cliIntentServe: // remove in v0.10.0 if serveUpdateNoticeIfConfigLocationNotMigrated(options.configPath) { @@ -47,14 +54,49 @@ func Main() int { } fmt.Println(string(contents)) + case cliIntentSensorsPrint: + return cliSensorsPrint() + case cliIntentMountpointInfo: + return cliMountpointInfo(options.args[1]) case cliIntentDiagnose: runDiagnostic() + case cliIntentSecretMake: + key, err := makeAuthSecretKey(AUTH_SECRET_KEY_LENGTH) + if err != nil { + fmt.Printf("Failed to make secret key: %v\n", err) + return 1 + } + + fmt.Println(key) + case cliIntentPasswordHash: + password := options.args[1] + + if password == "" { + fmt.Println("Password cannot be empty") + return 1 + } + + if len(password) < 6 { + fmt.Println("Password must be at least 6 characters long") + return 1 + } + + hashedPassword, err := bcrypt.GenerateFromPassword([]byte(password), bcrypt.DefaultCost) + if err != nil { + fmt.Printf("Failed to hash password: %v\n", err) + return 1 + } + + fmt.Println(string(hashedPassword)) } return 0 } func serveApp(configPath string) error { + // TODO: refactor if this gets any more complex, the current implementation is + // difficult to reason about due to all of the callbacks and simultaneous operations, + // use a single goroutine and a channel to initiate synchronous changes to the server exitChannel := make(chan struct{}) hadValidConfigOnStartup := false var stopServer func() error @@ -66,23 +108,35 @@ func serveApp(configPath string) error { config, err := newConfigFromYAML(newContents) if err != nil { - log.Printf("Config has errors: %v", err) + errStr := strings.ReplaceAll(err.Error(), "\n", "") + errStr = sequentialWhitespacePattern.ReplaceAllString(errStr, " ") + errStr = strings.ReplaceAll(errStr, "!!seq", "array") + + log.Printf("Config has errors: %v", errStr) + printConfigLinesNearErrorIfAvailable(err, newContents) if !hadValidConfigOnStartup { close(exitChannel) } return - } else if !hadValidConfigOnStartup { - hadValidConfigOnStartup = true } app, err := newApplication(config) if err != nil { log.Printf("Failed to create application: %v", err) + + if !hadValidConfigOnStartup { + close(exitChannel) + } + return } + if !hadValidConfigOnStartup { + hadValidConfigOnStartup = true + } + if stopServer != nil { if err := stopServer(); err != nil { log.Printf("Error while trying to stop server: %v", err) @@ -134,6 +188,41 @@ func serveApp(configPath string) error { return nil } +var errorLinePattern = regexp.MustCompile(`line (\d+)`) + +func printConfigLinesNearErrorIfAvailable(err error, configContents []byte) { + if err == nil { + return + } + + matches := errorLinePattern.FindStringSubmatch(err.Error()) + if len(matches) < 2 { + return + } + + errorAtLine, err := strconv.Atoi(matches[1]) + if err != nil { + return + } + + contents := strings.ReplaceAll(string(configContents), "\r\n", "\n") + lines := strings.Split(contents, "\n") + + if errorAtLine < 1 || errorAtLine > len(lines) { + return + } + + contextLength := 3 + + for i := max(0, errorAtLine-contextLength-1); i < min(len(lines), errorAtLine+contextLength); i++ { + if i == errorAtLine-1 { + fmt.Printf("-> %s\n", lines[i]) + } else { + fmt.Printf("| %s\n", lines[i]) + } + } +} + func serveUpdateNoticeIfConfigLocationNotMigrated(configPath string) bool { if !isRunningInsideDockerContainer() { return false diff --git a/internal/glance/static/app-icon.png b/internal/glance/static/app-icon.png index 54fc413..fdf8906 100644 Binary files a/internal/glance/static/app-icon.png and b/internal/glance/static/app-icon.png differ diff --git a/internal/glance/static/css/login.css b/internal/glance/static/css/login.css new file mode 100644 index 0000000..0afcd1a --- /dev/null +++ b/internal/glance/static/css/login.css @@ -0,0 +1,155 @@ +.login-bounds { + max-width: 500px; + padding: 0 2rem; +} + +.form-label { + text-transform: uppercase; + margin-bottom: 0.5rem; +} + +.form-input { + transition: border-color .2s; +} + +.form-input input { + border: 0; + background: none; + width: 100%; + height: 5.2rem; + font: inherit; + outline: none; + color: var(--color-text-highlight); +} + +.form-input-icon { + width: 2rem; + height: 2rem; + margin-top: -0.1rem; + opacity: 0.5; +} + +.form-input input[type="password"] { + letter-spacing: 0.3rem; + font-size: 0.9em; +} + +.form-input input[type="password"]::placeholder { + letter-spacing: 0; + font-size: var(--font-size-base); +} + +.form-input:hover { + border-color: var(--color-progress-border); +} + +.form-input:focus-within { + border-color: var(--color-primary); + transition-duration: .7s; +} + +.login-button { + width: 100%; + display: block; + padding: 1rem; + background: none; + border: 1px solid var(--color-text-subdue); + border-radius: var(--border-radius); + color: var(--color-text-paragraph); + cursor: pointer; + font: inherit; + font-size: var(--font-size-h4); + display: flex; + gap: .5rem; + align-items: center; + justify-content: center; + transition: all .3s, margin-top 0s; + margin-top: 3rem; +} + +.login-button:not(:disabled) { + box-shadow: 0 0 10px 1px var(--color-separator); +} + +.login-error-message:not(:empty) + .login-button { + margin-top: 2rem; +} + +.login-button:focus, .login-button:hover { + outline: none; + border-color: var(--color-primary); + color: var(--color-primary); +} + +.login-button:disabled { + border-color: var(--color-separator); + color: var(--color-text-subdue); + cursor: not-allowed; +} + +.login-button svg { + width: 1.7rem; + height: 1.7rem; + transition: transform .2s; +} + +.login-button:not(:disabled):hover svg, .login-button:not(:disabled):focus svg { + transform: translateX(.5rem); +} + +.animate-entrance { + animation: fieldReveal 0.7s backwards; + animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); +} + +.animate-entrance:nth-child(1) { animation-delay: .1s; } +.animate-entrance:nth-child(2) { animation-delay: .2s; } +.animate-entrance:nth-child(4) { animation-delay: .3s; } + +@keyframes fieldReveal { + from { + opacity: 0.0001; + transform: translateY(4rem); + } +} + +.login-error-message { + color: var(--color-negative); + font-size: var(--font-size-base); + padding: 1.3rem calc(var(--widget-content-horizontal-padding) + 1px); + position: relative; + margin-top: 2rem; + animation: errorMessageEntrance 0.4s backwards cubic-bezier(0.34, 1.56, 0.64, 1); +} + +@keyframes errorMessageEntrance { + from { + opacity: 0; + transform: scale(1.1); + } +} + +.login-error-message:empty { + display: none; +} + +.login-error-message::before { + content: ""; + position: absolute; + inset: 0; + border-radius: var(--border-radius); + background: var(--color-negative); + opacity: 0.05; + z-index: -1; +} + +.footer { + animation-delay: .4s; + animation-duration: 1s; +} + +.toggle-password-visibility { + background: none; + border: none; + cursor: pointer; +} diff --git a/internal/glance/static/css/mobile.css b/internal/glance/static/css/mobile.css index 2f5cdbe..2b71a24 100644 --- a/internal/glance/static/css/mobile.css +++ b/internal/glance/static/css/mobile.css @@ -48,6 +48,17 @@ transition: transform .3s; } + .mobile-navigation-actions > * { + padding-block: 1.1rem; + padding-inline: var(--content-bounds-padding); + cursor: pointer; + transition: background-color 50ms; + } + + .mobile-navigation-actions > *:active { + background-color: var(--color-widget-background-highlight); + } + .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .hamburger-icon { --spacing: 7px; color: var(--color-primary); @@ -60,7 +71,8 @@ .mobile-navigation-page-links { border-top: 1px solid var(--color-widget-content-border); - padding: 15px var(--content-bounds-padding); + border-bottom: 1px solid var(--color-widget-content-border); + padding: 20px var(--content-bounds-padding); display: flex; align-items: center; overflow-x: auto; diff --git a/internal/glance/static/css/site.css b/internal/glance/static/css/site.css index bf87dd3..cd30823 100644 --- a/internal/glance/static/css/site.css +++ b/internal/glance/static/css/site.css @@ -1,4 +1,4 @@ -.light-scheme { +:root[data-scheme=light] { --scheme: 100% -; } @@ -13,6 +13,7 @@ .page.content-ready > .page-content { display: block; + animation: pageContentEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; } .page-column-small .size-title-dynamic { @@ -27,6 +28,23 @@ pre { font: inherit; } + +input[type="text"] { + width: 100%; + border: 0; + background: none; + font: inherit; + color: inherit; +} + +button { + font: inherit; + border: 0; + cursor: pointer; + background: none; + color: inherit; +} + ::selection { background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); color: var(--color-text-highlight); @@ -43,6 +61,10 @@ pre { width: 10px; } +*:active { + -webkit-tap-highlight-color: transparent; +} + *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0.1rem; @@ -127,10 +149,9 @@ body { .page-columns { display: flex; gap: var(--widget-gap); - animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; } -@keyframes pageColumnsEntrance { +@keyframes pageContentEntrance { from { opacity: 0; transform: translateY(10px); @@ -153,7 +174,9 @@ body { @keyframes loadingContainerEntrance { from { - opacity: 0; + /* Using 0.001 instead of 0 fixes a random 1s freeze on Chrome on page load when all */ + /* elements have opacity 0 and are animated in. I don't want to be a web dev anymore. */ + opacity: 0.001; } } @@ -219,7 +242,7 @@ kbd:active { max-width: 1100px; } -.page-center-vertically .page { +.page.center-vertically { display: flex; justify-content: center; flex-direction: column; @@ -239,6 +262,7 @@ kbd:active { .logo { height: 100%; + flex-shrink: 0; line-height: var(--header-height); font-size: 2rem; color: var(--color-text-highlight); @@ -246,7 +270,7 @@ kbd:active { padding-right: var(--widget-content-horizontal-padding); } -.logo:has(img) { +.logo:has(img, svg) { display: flex; align-items: center; } @@ -255,13 +279,20 @@ kbd:active { max-height: 2.7rem; } -.nav { +.desktop-navigation { + overflow-x: auto; + min-width: 0; height: 100%; gap: var(--header-items-gap); } -.nav .nav-item { - line-height: var(--header-height); +.desktop-navigation .nav-item { + display: flex; + align-items: center; +} + +.desktop-navigation .nav-item-text { + margin-top: 3px; } .footer { @@ -293,3 +324,84 @@ kbd:active { border-bottom-color: var(--color-primary); color: var(--color-text-highlight); } + +.logout-button { + width: 2rem; + height: 2rem; + stroke: var(--color-text-subdue); + transition: stroke .2s; +} + +.logout-button:hover, .logout-button:focus { + stroke: var(--color-text-highlight); +} + +.theme-choices { + --presets-per-row: 2; + display: grid; + grid-template-columns: repeat(var(--presets-per-row), 1fr); + align-items: center; + gap: 1.35rem; +} + +.theme-choices:has(> :nth-child(3)) { + --presets-per-row: 3; +} + +.theme-preset { + background-color: var(--color); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + height: 2rem; + padding-inline: 0.5rem; + border-radius: 0.3rem; + border: none; + cursor: pointer; + position: relative; +} + +.theme-choices .theme-preset::before { + content: ''; + position: absolute; + inset: -.4rem; + border-radius: .7rem; + border: 2px solid transparent; + transition: border-color .3s; +} + +.theme-choices .theme-preset:hover::before { + border-color: var(--color-text-subdue); +} + +.theme-choices .theme-preset.current::before { + border-color: var(--color-text-base); +} + +.theme-preset-light { + gap: 0.3rem; + height: 1.8rem; +} + +.theme-color { + background-color: var(--color); + width: 0.9rem; + height: 0.9rem; + border-radius: 0.2rem; +} + +.theme-preset-light .theme-color { + width: 1rem; + height: 1rem; + border-radius: 0.3rem; +} + +.current-theme-preview { + opacity: 0.4; + transition: opacity .3s; +} + +.theme-picker.popover-active .current-theme-preview, .theme-picker:hover { + opacity: 1; +} diff --git a/internal/glance/static/css/utils.css b/internal/glance/static/css/utils.css index 9962528..d243f77 100644 --- a/internal/glance/static/css/utils.css +++ b/internal/glance/static/css/utils.css @@ -380,7 +380,28 @@ details[open] .summary::after { gap: 0.5rem; } -:root:not(.light-scheme) .flat-icon { +.icon { + object-fit: contain; + user-select: none; +} + +.icon:not(.colored-icon) { + opacity: 0.85; + filter: grayscale(0.2); + transition: opacity 0.2s, filter 0.2s; +} + +.icon-parent:hover .icon { + opacity: 1; + filter: none; +} + +.colored-icon { + mask: var(--icon-url) no-repeat center / contain; + background-color: var(--icon-color); +} + +:root:not([data-scheme=light]) .flat-icon:not(.colored-icon) { filter: invert(1); } @@ -472,6 +493,22 @@ details[open] .summary::after { filter: none; } +.hide-scrollbars { + scrollbar-width: none; +} + +/* Hide on Safari and Chrome */ +.hide-scrollbars::-webkit-scrollbar { + display: none; +} + +.ui-icon { + width: 2.3rem; + height: 2.3rem; + display: block; + flex-shrink: 0; +} + .size-h1 { font-size: var(--font-size-h1); } .size-h2 { font-size: var(--font-size-h2); } .size-h3 { font-size: var(--font-size-h3); } @@ -488,11 +525,72 @@ details[open] .summary::after { .color-positive { color: var(--color-positive); } .color-primary { color: var(--color-primary); } +.bg-highlight { background-color: var(--color-widget-background-highlight); } + .color-primary-if-not-visited:not(:visited) { color: var(--color-primary); } +.drag-and-drop-container { + position: relative; +} + +.drag-and-drop-decoy { + outline: 1px dashed var(--color-primary); + opacity: 0.25; + border-radius: var(--border-radius); +} + +.drag-and-drop-draggable { + position: absolute; + cursor: grabbing !important; +} + +.drag-and-drop-draggable:empty { + display: none; +} + +.drag-and-drop-draggable * { + cursor: grabbing !important; +} + +.auto-scaling-textarea-container { + position: relative; +} + +.auto-scaling-textarea { + position: absolute; + inset: 0; + background: none; + border: none; + font: inherit; + resize: none; + color: inherit; + overflow: hidden; +} + +.auto-scaling-textarea:focus { + outline: none; +} + +.auto-scaling-textarea-mimic { + white-space: pre-wrap; + min-height: 1lh; + user-select: none; + word-wrap: break-word; + font: inherit; + visibility: hidden; +} + +.square-18 { width: 1.8rem; height: 1.8rem; } +.square-20 { width: 2rem; height: 2rem; } +.square-27 { width: 2.7rem; height: 2.7rem; } +.square-30 { width: 3rem; height: 3rem; } +.square-32 { width: 3.2rem; height: 3.2rem; } +.square-40 { width: 4rem; height: 4rem; } + .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; } @@ -504,6 +602,7 @@ details[open] .summary::after { .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .min-width-0 { min-width: 0; } +.width-max-content { width: max-content; } .max-width-100 { max-width: 100%; } .block { display: block; } .inline-block { display: inline-block; } @@ -522,6 +621,7 @@ details[open] .summary::after { .grow { flex-grow: 1; } .flex-column { flex-direction: column; } .items-center { align-items: center; } +.self-center { align-self: center; } .items-start { align-items: start; } .items-end { align-items: end; } .gap-5 { gap: 0.5rem; } @@ -531,10 +631,14 @@ details[open] .summary::after { .gap-15 { gap: 1.5rem; } .gap-20 { gap: 2rem; } .gap-25 { gap: 2.5rem; } +.gap-30 { gap: 3rem; } .gap-35 { gap: 3.5rem; } +.gap-40 { gap: 4rem; } .gap-45 { gap: 4.5rem; } +.gap-50 { gap: 5rem; } .gap-55 { gap: 5.5rem; } .margin-left-auto { margin-left: auto; } +.margin-inline-auto { margin-inline: auto; } .margin-top-2 { margin-top: 0.2rem; } .margin-top-3 { margin-top: 0.3rem; } .margin-top-5 { margin-top: 0.5rem; } @@ -562,7 +666,11 @@ details[open] .summary::after { .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-inline-10 { padding-inline: 1rem; } +.pointer-events-none { pointer-events: none; } +.select-none { user-select: none; } .padding-block-5 { padding-block: 0.5rem; } +.padding-10 { padding: 1rem; } .scale-half { transform: scale(0.5); } .list { --list-half-gap: 0rem; } .list-gap-2 { --list-half-gap: 0.1rem; } @@ -573,3 +681,7 @@ details[open] .summary::after { .list-gap-20 { --list-half-gap: 1rem; } .list-gap-24 { --list-half-gap: 1.2rem; } .list-gap-34 { --list-half-gap: 1.7rem; } + +@media (max-width: 1190px) { + .size-base-on-mobile { font-size: var(--font-size-base); } +} diff --git a/internal/glance/static/css/widget-bookmarks.css b/internal/glance/static/css/widget-bookmarks.css index 7f2dabd..d0431d2 100644 --- a/internal/glance/static/css/widget-bookmarks.css +++ b/internal/glance/static/css/widget-bookmarks.css @@ -20,12 +20,11 @@ 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; +.bookmarks-grid { + display: grid; + gap: 2.5rem 0; + grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } diff --git a/internal/glance/static/css/widget-docker-containers.css b/internal/glance/static/css/widget-docker-containers.css deleted file mode 100644 index ae08788..0000000 --- a/internal/glance/static/css/widget-docker-containers.css +++ /dev/null @@ -1,26 +0,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; -} diff --git a/internal/glance/static/css/widget-monitor.css b/internal/glance/static/css/widget-monitor.css deleted file mode 100644 index 8bc629b..0000000 --- a/internal/glance/static/css/widget-monitor.css +++ /dev/null @@ -1,36 +0,0 @@ -.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-todo.css b/internal/glance/static/css/widget-todo.css new file mode 100644 index 0000000..2466273 --- /dev/null +++ b/internal/glance/static/css/widget-todo.css @@ -0,0 +1,129 @@ +.todo-widget { + padding-top: 4rem; +} + +.todo-plus-icon { + --icon-color: var(--color-text-subdue); + position: relative; + width: 1.4rem; + height: 1.4rem; +} + +.todo-plus-icon::before, .todo-plus-icon::after { + content: ""; + position: absolute; + background-color: var(--icon-color); + transition: background-color .2s; +} + +.todo-plus-icon::before { + width: 2px; + inset-block: 0.2rem; + left: 50%; + transform: translateX(-50%); +} + +.todo-plus-icon::after { + height: 2px; + inset-inline: 0.2rem; + top: 50%; + transform: translateY(-50%); +} + +.todo-input textarea::placeholder { + color: var(--color-text-base-muted); +} + +.todo-input { + position: relative; + color: var(--color-text-highlight); +} + +.todo-input:focus-within .todo-plus-icon { + --icon-color: var(--color-text-base); +} + +.todo-item { + transform-origin: center; + padding: 0.5rem 0; +} + +.todo-item-checkbox { + -webkit-appearance: none; + appearance: none; + border: 2px solid var(--color-text-subdue); + width: 1.4rem; + height: 1.4rem; + position: relative; + cursor: pointer; + border-radius: 0.3rem; + transition: border-color .2s; +} + +.todo-item-checkbox::before { + content: ""; + inset: -1rem; + position: absolute; +} + +.todo-item-checkbox::after { + content: ''; + position: absolute; + inset: 0.3rem; + border-radius: 0.1rem; + opacity: 0; + transition: opacity .2s; +} + +.todo-item-checkbox:checked::after { + background: var(--color-primary); + opacity: 1; +} + +.todo-item-checkbox:focus-visible { + outline: none; + border-color: var(--color-primary); +} + +.todo-item-text { + color: var(--color-text-base); + transition: color .35s; +} + +.todo-item-text:focus { + color: var(--color-text-highlight); +} + +.todo-item-drag-handle { + position: absolute; + top: -0.5rem; + inset-inline: 0; + height: 1rem; + cursor: grab; +} + +.todo-item.is-being-dragged .todo-item-drag-handle { + height: 3rem; + top: -1.5rem; +} + +.todo-item:has(.todo-item-checkbox:checked) .todo-item-text { + text-decoration: line-through; + color: var(--color-text-subdue); +} + +.todo-item-delete { + width: 1.5rem; + height: 1.5rem; + opacity: 0; + transition: opacity .2s; + outline-offset: .5rem; +} + +.todo-item:hover .todo-item-delete, .todo-item:focus-within .todo-item-delete { + opacity: 1; +} + +.todo-item.is-being-dragged .todo-item-delete { + opacity: 0; +} diff --git a/internal/glance/static/css/widgets.css b/internal/glance/static/css/widgets.css index d87ce9c..3c231c4 100644 --- a/internal/glance/static/css/widgets.css +++ b/internal/glance/static/css/widgets.css @@ -2,10 +2,8 @@ @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"; @@ -14,6 +12,7 @@ @import "widget-twitch.css"; @import "widget-videos.css"; @import "widget-weather.css"; +@import "widget-todo.css"; @import "forum-posts.css"; .widget-error-header { @@ -43,6 +42,10 @@ opacity: 0.6; } +.head-widgets { + margin-bottom: var(--widget-gap); +} + .widget-content { container-type: inline-size; container-name: widget; diff --git a/internal/glance/static/favicon.png b/internal/glance/static/favicon.png index 8323483..63e4734 100644 Binary files a/internal/glance/static/favicon.png and b/internal/glance/static/favicon.png differ diff --git a/internal/glance/static/favicon.svg b/internal/glance/static/favicon.svg new file mode 100644 index 0000000..8e92c1e --- /dev/null +++ b/internal/glance/static/favicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/internal/glance/static/js/animations.js b/internal/glance/static/js/animations.js index db5b0aa..7aa6d00 100644 --- a/internal/glance/static/js/animations.js +++ b/internal/glance/static/js/animations.js @@ -31,3 +31,28 @@ export function slideFade({ }, }; } + + +export function animateReposition( + element, + onAnimEnd, + animOptions = { duration: 400, easing: easeOutQuint } +) { + const rectBefore = element.getBoundingClientRect(); + + return () => { + const rectAfter = element.getBoundingClientRect(); + const offsetY = rectBefore.y - rectAfter.y; + const offsetX = rectBefore.x - rectAfter.x; + + element.animate({ + keyframes: [ + { transform: `translate(${offsetX}px, ${offsetY}px)` }, + { transform: 'none' } + ], + options: animOptions + }, onAnimEnd); + + return rectAfter; + } +} diff --git a/internal/glance/static/js/calendar.js b/internal/glance/static/js/calendar.js index fb6602e..fbf2e98 100644 --- a/internal/glance/static/js/calendar.js +++ b/internal/glance/static/js/calendar.js @@ -30,7 +30,7 @@ const [datesEntranceLeft, datesEntranceRight] = directions( const undoEntrance = slideFade({ direction: "left", distance: "100%", duration: 300 }); export default function(element) { - element.swap(Calendar( + element.swapWith(Calendar( Number(element.dataset.firstDayOfWeek ?? 1) )); } diff --git a/internal/glance/static/js/login.js b/internal/glance/static/js/login.js new file mode 100644 index 0000000..5b58748 --- /dev/null +++ b/internal/glance/static/js/login.js @@ -0,0 +1,141 @@ +import { find } from "./templating.js"; + +const AUTH_ENDPOINT = pageData.baseURL + "/api/authenticate"; + +const showPasswordSVG = ` + +`; + +const hidePasswordSVG = ` + + +`; + +const container = find("#login-container"); +const usernameInput = find("#username"); +const passwordInput = find("#password"); +const errorMessage = find("#error-message"); +const loginButton = find("#login-button"); +const toggleVisibilityButton = find("#toggle-password-visibility"); + +const state = { + lastUsername: "", + lastPassword: "", + isLoading: false, + isRateLimited: false +}; + +const lang = { + showPassword: "Show password", + hidePassword: "Hide password", + incorrectCredentials: "Incorrect username or password", + rateLimited: "Too many login attempts, try again in a few minutes", + unknownError: "An error occurred, please try again", +}; + +container.clearStyles("display"); +setTimeout(() => usernameInput.focus(), 200); + +toggleVisibilityButton + .html(showPasswordSVG) + .attr("title", lang.showPassword) + .on("click", function() { + if (passwordInput.type === "password") { + passwordInput.type = "text"; + toggleVisibilityButton.html(hidePasswordSVG).attr("title", lang.hidePassword); + return; + } + + passwordInput.type = "password"; + toggleVisibilityButton.html(showPasswordSVG).attr("title", lang.showPassword); + }); + +function enableLoginButtonIfCriteriaMet() { + const usernameValue = usernameInput.value.trim(); + const passwordValue = passwordInput.value.trim(); + + const usernameValid = usernameValue.length >= 3; + const passwordValid = passwordValue.length >= 6; + + const isUsingLastCredentials = + usernameValue === state.lastUsername + && passwordValue === state.lastPassword; + + loginButton.disabled = !( + usernameValid + && passwordValid + && !isUsingLastCredentials + && !state.isLoading + && !state.isRateLimited + ); +} + +function handleLoginWithEnter(event) { + if (event.key !== "Enter") return; + if (loginButton.disabled) return; + + document.activeElement.blur(); + handleLoginAttempt(); +} + +usernameInput + .on("input", enableLoginButtonIfCriteriaMet) + .on("keydown", handleLoginWithEnter); + +passwordInput + .on("input", enableLoginButtonIfCriteriaMet) + .on("keydown", handleLoginWithEnter); + +async function handleLoginAttempt() { + state.lastUsername = usernameInput.value; + state.lastPassword = passwordInput.value; + errorMessage.text(""); + + loginButton.disable(); + state.isLoading = true; + + const response = await fetch(AUTH_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + username: usernameInput.value, + password: passwordInput.value + }), + }); + + state.isLoading = false; + if (response.status === 200) { + setTimeout(() => { window.location.href = pageData.baseURL + "/"; }, 300); + + container.animate({ + keyframes: [{ offset: 1, transform: "scale(0.95)", opacity: 0 }], + options: { duration: 300, easing: "ease", fill: "forwards" }} + ); + + find("footer")?.animate({ + keyframes: [{ offset: 1, opacity: 0 }], + options: { duration: 300, easing: "ease", fill: "forwards", delay: 50 } + }); + } else if (response.status === 401) { + errorMessage.text(lang.incorrectCredentials); + passwordInput.focus(); + } else if (response.status === 429) { + errorMessage.text(lang.rateLimited); + state.isRateLimited = true; + const retryAfter = response.headers.get("Retry-After") || 30; + setTimeout(() => { + state.lastUsername = ""; + state.lastPassword = ""; + state.isRateLimited = false; + + enableLoginButtonIfCriteriaMet(); + }, retryAfter * 1000); + } else { + errorMessage.text(lang.unknownError); + passwordInput.focus(); + } +} + +loginButton.disable().on("click", handleLoginAttempt); diff --git a/internal/glance/static/js/masonry.js b/internal/glance/static/js/masonry.js index 45680f4..83e6206 100644 --- a/internal/glance/static/js/masonry.js +++ b/internal/glance/static/js/masonry.js @@ -37,9 +37,6 @@ export function setupMasonries() { columnsFragment.append(column); } - // poor man's masonry - // TODO: add an option that allows placing items in the - // shortest column instead of iterating the columns in order for (let i = 0; i < items.length; i++) { columnsFragment.children[i % columnsCount].appendChild(items[i]); } diff --git a/internal/glance/static/js/main.js b/internal/glance/static/js/page.js similarity index 87% rename from internal/glance/static/js/main.js rename to internal/glance/static/js/page.js index dcd8946..0212a4f 100644 --- a/internal/glance/static/js/main.js +++ b/internal/glance/static/js/page.js @@ -1,6 +1,7 @@ import { setupPopovers } from './popover.js'; import { setupMasonries } from './masonry.js'; import { throttledDebounce, isElementVisible, openURLInNewTab } from './utils.js'; +import { elem, find, findAll } from './templating.js'; async function fetchPageContent(pageData) { // TODO: handle non 200 status codes/time outs @@ -104,6 +105,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 +145,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; } @@ -192,7 +194,7 @@ function setupSearchBoxes() { document.addEventListener("keydown", (event) => { if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return; - if (event.key != "s") return; + if (event.code != "KeyS") return; inputElement.focus(); event.preventDefault(); @@ -640,6 +642,17 @@ async function setupCalendars() { calendar.default(elems[i]); } +async function setupTodos() { + const elems = Array.from(document.getElementsByClassName("todo")); + if (elems.length == 0) return; + + const todo = await import ('./todo.js'); + + for (let i = 0; i < elems.length; i++){ + todo.default(elems[i]); + } +} + function setupTruncatedElementTitles() { const elements = document.querySelectorAll(".text-truncate, .single-line-titles .title, .text-truncate-2-lines, .text-truncate-3-lines"); @@ -649,11 +662,90 @@ 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.innerText.trim().replace(/\s+/g, " "); } } +async function changeTheme(key, onChanged) { + const themeStyleElem = find("#theme-style"); + + const response = await fetch(`${pageData.baseURL}/api/set-theme/${key}`, { + method: "POST", + }); + + if (response.status != 200) { + alert("Failed to set theme: " + response.statusText); + return; + } + const newThemeStyle = await response.text(); + + const tempStyle = elem("style") + .html("* { transition: none !important; }") + .appendTo(document.head); + + themeStyleElem.html(newThemeStyle); + document.documentElement.setAttribute("data-theme", key); + document.documentElement.setAttribute("data-scheme", response.headers.get("X-Scheme")); + typeof onChanged == "function" && onChanged(); + setTimeout(() => { tempStyle.remove(); }, 10); +} + +function initThemePicker() { + const themeChoicesInMobileNav = find(".mobile-navigation .theme-choices"); + if (!themeChoicesInMobileNav) return; + + const themeChoicesInHeader = find(".header-container .theme-choices"); + + if (themeChoicesInHeader) { + themeChoicesInHeader.replaceWith( + themeChoicesInMobileNav.cloneNode(true) + ); + } + + const presetElems = findAll(".theme-choices .theme-preset"); + let themePreviewElems = document.getElementsByClassName("current-theme-preview"); + let isLoading = false; + + presetElems.forEach((presetElement) => { + const themeKey = presetElement.dataset.key; + + if (themeKey === undefined) { + return; + } + + if (themeKey == pageData.theme) { + presetElement.classList.add("current"); + } + + presetElement.addEventListener("click", () => { + if (themeKey == pageData.theme) return; + if (isLoading) return; + + isLoading = true; + changeTheme(themeKey, function() { + isLoading = false; + pageData.theme = themeKey; + presetElems.forEach((e) => { e.classList.remove("current"); }); + + Array.from(themePreviewElems).forEach((preview) => { + preview.querySelector(".theme-preset").replaceWith( + presetElement.cloneNode(true) + ); + }) + + presetElems.forEach((e) => { + if (e.dataset.key != themeKey) return; + e.classList.add("current"); + }); + }); + }); + }) +} + async function setupPage() { + initThemePicker(); + const pageElement = document.getElementById("page"); const pageContentElement = document.getElementById("page-content"); const pageContent = await fetchPageContent(pageData); @@ -664,6 +756,7 @@ async function setupPage() { setupPopovers(); setupClocks() await setupCalendars(); + await setupTodos(); setupCarousels(); setupSearchBoxes(); setupCollapsibleLists(); diff --git a/internal/glance/static/js/popover.js b/internal/glance/static/js/popover.js index 331ee26..bada463 100644 --- a/internal/glance/static/js/popover.js +++ b/internal/glance/static/js/popover.js @@ -38,6 +38,8 @@ function handleMouseEnter(event) { if (activeTarget !== target) { hidePopover(); requestAnimationFrame(() => requestAnimationFrame(showPopover)); + } else if (activeTarget.dataset.popoverTrigger === "click") { + hidePopover(); } return; @@ -100,11 +102,14 @@ function showPopover() { contentElement.style.maxWidth = contentMaxWidth; activeTarget.classList.add("popover-active"); document.addEventListener("keydown", handleHidePopoverOnEscape); + window.addEventListener("scroll", queueRepositionContainer); window.addEventListener("resize", queueRepositionContainer); observer.observe(containerElement); } function repositionContainer() { + if (activeTarget === null) return; + containerElement.style.display = "block"; const targetBounds = activeTarget.dataset.popoverAnchor !== undefined @@ -125,7 +130,7 @@ function repositionContainer() { } else if (left + containerBounds.width > window.innerWidth) { containerElement.style.removeProperty("left"); containerElement.style.right = 0; - containerElement.style.setProperty("--triangle-offset", containerBounds.width - containerInlinePadding - (window.innerWidth - targetBounds.left - targetBoundsWidthOffset) + -1 + "px"); + containerElement.style.setProperty("--triangle-offset", containerBounds.width - containerInlinePadding - (document.documentElement.clientWidth - targetBounds.left - targetBoundsWidthOffset) + -1 + "px"); } else { containerElement.style.removeProperty("right"); containerElement.style.left = left + "px"; @@ -157,7 +162,11 @@ function hidePopover() { activeTarget.classList.remove("popover-active"); containerElement.style.display = "none"; + containerElement.style.removeProperty("top"); + containerElement.style.removeProperty("left"); + containerElement.style.removeProperty("right"); document.removeEventListener("keydown", handleHidePopoverOnEscape); + window.removeEventListener("scroll", queueRepositionContainer); window.removeEventListener("resize", queueRepositionContainer); observer.unobserve(containerElement); @@ -181,7 +190,12 @@ export function setupPopovers() { for (let i = 0; i < targets.length; i++) { const target = targets[i]; - target.addEventListener("mouseenter", handleMouseEnter); + if (target.dataset.popoverTrigger === "click") { + target.addEventListener("click", handleMouseEnter); + } else { + target.addEventListener("mouseenter", handleMouseEnter); + } + target.addEventListener("mouseleave", handleMouseLeave); } } diff --git a/internal/glance/static/js/templating.js b/internal/glance/static/js/templating.js index 05824bc..a06d41f 100644 --- a/internal/glance/static/js/templating.js +++ b/internal/glance/static/js/templating.js @@ -29,6 +29,15 @@ export function findAll(selector) { return document.querySelectorAll(selector); } + +HTMLCollection.prototype.map = function(fn) { + return Array.from(this).map(fn); +} + +HTMLCollection.prototype.indexOf = function(element) { + return Array.prototype.indexOf.call(this, element); +} + const ep = HTMLElement.prototype; const fp = DocumentFragment.prototype; const tp = Text.prototype; @@ -110,7 +119,7 @@ ep.appendTo = function(parent) { return this; } -ep.swap = function(element) { +ep.swapWith = function(element) { this.replaceWith(element); return element; } @@ -147,6 +156,22 @@ ep.styles = function(s) { return this; } +ep.clearStyles = function(...props) { + for (let i = 0; i < props.length; i++) + this.style.removeProperty(props[i]); + return this; +} + +ep.disable = function() { + this.disabled = true; + return this; +} + +ep.enable = function() { + this.disabled = false; + return this; +} + const epAnimate = ep.animate; ep.animate = function(anim, callback) { const a = epAnimate.call(this, anim.keyframes, anim.options); diff --git a/internal/glance/static/js/todo.js b/internal/glance/static/js/todo.js new file mode 100644 index 0000000..b70f6bd --- /dev/null +++ b/internal/glance/static/js/todo.js @@ -0,0 +1,442 @@ +import { elem, fragment } from "./templating.js"; +import { animateReposition } from "./animations.js"; +import { clamp, Vec2, toggleableEvents, throttledDebounce } from "./utils.js"; + +const trashIconSvg = ` + +`; + +export default function(element) { + element.swapWith( + Todo(element.dataset.todoId) + ) +} + +function itemAnim(height, entrance = true) { + const visible = { height: height + "px", opacity: 1 }; + const hidden = { height: "0", opacity: 0, padding: "0" }; + + return { + keyframes: [ + entrance ? hidden : visible, + entrance ? visible : hidden + ], + options: { duration: 200, easing: "ease" } + } +} + +function inputMarginAnim(entrance = true) { + const amount = "1.5rem"; + + return { + keyframes: [ + { marginBottom: entrance ? "0px" : amount }, + { marginBottom: entrance ? amount : "0" } + ], + options: { duration: 200, easing: "ease", fill: "forwards" } + } +} + +function loadFromLocalStorage(id) { + return JSON.parse(localStorage.getItem(`todo-${id}`) || "[]"); +} + +function saveToLocalStorage(id, data) { + localStorage.setItem(`todo-${id}`, JSON.stringify(data)); +} + +function Item(unserialize = {}, onUpdate, onDelete, onEscape, onDragStart) { + let item, input, inputArea; + + const serializeable = { + text: unserialize.text || "", + checked: unserialize.checked || false + }; + + item = elem().classes("todo-item", "flex", "gap-10", "items-center").append( + elem("input") + .classes("todo-item-checkbox", "shrink-0") + .styles({ marginTop: "-0.1rem" }) + .attrs({ type: "checkbox" }) + .on("change", (e) => { + serializeable.checked = e.target.checked; + onUpdate(); + }) + .tap(self => self.checked = serializeable.checked), + + input = autoScalingTextarea(textarea => inputArea = textarea + .classes("todo-item-text") + .attrs({ + placeholder: "empty task", + spellcheck: "false" + }) + .on("keydown", (e) => { + if (e.key === "Enter") { + e.preventDefault(); + } else if (e.key === "Escape") { + e.preventDefault(); + onEscape(); + } + }) + .on("input", () => { + serializeable.text = inputArea.value; + onUpdate(); + }) + ).classes("min-width-0", "grow").append( + elem() + .classes("todo-item-drag-handle") + .on("mousedown", (e) => onDragStart(e, item)) + ), + + elem("button") + .classes("todo-item-delete", "shrink-0") + .html(trashIconSvg) + .on("click", () => onDelete(item)) + ); + + input.component.setValue(serializeable.text); + return item.component({ + focusInput: () => inputArea.focus(), + serialize: () => serializeable + }); +} + +function Todo(id) { + let items, input, inputArea, inputContainer, lastAddedItem; + let queuedForRemoval = 0; + let reorderable; + let isDragging = false; + + const onDragEnd = () => isDragging = false; + const onDragStart = (event, element) => { + isDragging = true; + reorderable.component.onDragStart(event, element); + }; + + const saveItems = () => { + if (isDragging) return; + + saveToLocalStorage( + id, items.children.map(item => item.component.serialize()) + ); + }; + + const onItemRepositioned = () => saveItems(); + const debouncedOnItemUpdate = throttledDebounce(saveItems, 10, 1000); + + const onItemDelete = (item) => { + if (lastAddedItem === item) lastAddedItem = null; + const height = item.clientHeight; + queuedForRemoval++; + item.animate(itemAnim(height, false), () => { + item.remove(); + queuedForRemoval--; + saveItems(); + }); + + if (items.children.length - queuedForRemoval === 0) + inputContainer.animate(inputMarginAnim(false)); + }; + + const newItem = (data) => Item( + data, + debouncedOnItemUpdate, + onItemDelete, + () => inputArea.focus(), + onDragStart + ); + + const addNewItem = (itemText, prepend) => { + const totalItemsBeforeAppending = items.children.length; + const item = lastAddedItem = newItem({ text: itemText }); + + prepend ? items.prepend(item) : items.append(item); + saveItems(); + const height = item.clientHeight; + item.animate(itemAnim(height)); + + if (totalItemsBeforeAppending === 0) + inputContainer.animate(inputMarginAnim()); + }; + + const handleInputKeyDown = (e) => { + switch (e.key) { + case "Enter": + e.preventDefault(); + const value = e.target.value.trim(); + if (value === "") return; + addNewItem(value, e.ctrlKey); + input.component.setValue(""); + break; + case "Escape": + e.target.blur(); + break; + case "ArrowDown": + if (!lastAddedItem) return; + e.preventDefault(); + lastAddedItem.component.focusInput(); + break; + } + }; + + items = elem() + .classes("todo-items") + .append( + ...loadFromLocalStorage(id).map(data => newItem(data)) + ); + + return fragment().append( + inputContainer = elem() + .classes("todo-input", "flex", "gap-10", "items-center") + .classesIf(items.children.length > 0, "margin-bottom-15") + .styles({ paddingRight: "2.5rem" }) + .append( + elem().classes("todo-plus-icon", "shrink-0"), + input = autoScalingTextarea(textarea => inputArea = textarea + .on("keydown", handleInputKeyDown) + .attrs({ + placeholder: "Add a task", + spellcheck: "false" + }) + ).classes("grow", "min-width-0") + ), + + reorderable = verticallyReorderable(items, onItemRepositioned, onDragEnd), + ); +} + + +// See https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ +export function autoScalingTextarea(yieldTextarea = null) { + let textarea, mimic; + + const updateMimic = (newValue) => mimic.text(newValue + ' '); + const container = elem().classes("auto-scaling-textarea-container").append( + textarea = elem("textarea") + .classes("auto-scaling-textarea") + .on("input", () => updateMimic(textarea.value)), + mimic = elem().classes("auto-scaling-textarea-mimic") + ) + + if (typeof yieldTextarea === "function") yieldTextarea(textarea); + + return container.component({ setValue: (newValue) => { + textarea.value = newValue; + updateMimic(newValue); + }}); +} + +export function verticallyReorderable(itemsContainer, onItemRepositioned, onDragEnd) { + const classToAddToDraggedItem = "is-being-dragged"; + + const currentlyBeingDragged = { + element: null, + initialIndex: null, + clientOffset: Vec2.new(), + }; + + const decoy = { + element: null, + currentIndex: null, + }; + + const draggableContainer = { + element: null, + initialRect: null, + }; + + const lastClientPos = Vec2.new(); + let initialScrollY = null; + let addDocumentEvents, removeDocumentEvents; + + const handleReposition = (event) => { + if (currentlyBeingDragged.element == null) return; + + if (event.clientY !== undefined && event.clientX !== undefined) + lastClientPos.setFromEvent(event); + + const client = lastClientPos; + const container = draggableContainer; + const item = currentlyBeingDragged; + + const scrollOffset = window.scrollY - initialScrollY; + const offsetY = client.y - container.initialRect.y - item.clientOffset.y + scrollOffset; + const offsetX = client.x - container.initialRect.x - item.clientOffset.x; + + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + const viewportWidth = window.innerWidth - scrollbarWidth; + + const confinedX = clamp( + offsetX, + -container.initialRect.x, + viewportWidth - container.initialRect.x - container.initialRect.width + ); + + container.element.styles({ + transform: `translate(${confinedX}px, ${offsetY}px)`, + }); + + const containerTop = client.y - item.clientOffset.y; + const containerBottom = client.y + container.initialRect.height - item.clientOffset.y; + + let swapWithLast = true; + let swapWithIndex = null; + + for (let i = 0; i < itemsContainer.children.length; i++) { + const childRect = itemsContainer.children[i].getBoundingClientRect(); + const topThreshold = childRect.top + childRect.height * .6; + const bottomThreshold = childRect.top + childRect.height * .4; + + if (containerBottom > topThreshold) { + if (containerTop < bottomThreshold && i != decoy.currentIndex) { + swapWithIndex = i; + swapWithLast = false; + break; + } + continue; + }; + + swapWithLast = false; + + if (i == decoy.currentIndex || i-1 == decoy.currentIndex) break; + swapWithIndex = (i < decoy.currentIndex) ? i : i-1; + break; + } + + const lastItemIndex = itemsContainer.children.length - 1; + + if (swapWithLast && decoy.currentIndex != lastItemIndex) + swapWithIndex = lastItemIndex; + + if (swapWithIndex === null) + return; + + const diff = swapWithIndex - decoy.currentIndex; + if (Math.abs(diff) > 1) { + swapWithIndex = decoy.currentIndex + Math.sign(diff); + } + + const siblingToSwapWith = itemsContainer.children[swapWithIndex]; + + if (siblingToSwapWith.isCurrentlyAnimating) return; + + const animateDecoy = animateReposition(decoy.element); + const animateChild = animateReposition( + siblingToSwapWith, + () => { + siblingToSwapWith.isCurrentlyAnimating = false; + handleReposition({ + clientX: client.x, + clientY: client.y, + }); + } + ); + + siblingToSwapWith.isCurrentlyAnimating = true; + + if (swapWithIndex > decoy.currentIndex) + decoy.element.before(siblingToSwapWith); + else + decoy.element.after(siblingToSwapWith); + + decoy.currentIndex = itemsContainer.children.indexOf(decoy.element); + + animateDecoy(); + animateChild(); + } + + const handleRelease = (event) => { + if (event.buttons != 0) return; + + removeDocumentEvents(); + const item = currentlyBeingDragged; + const element = item.element; + element.styles({ pointerEvents: "none" }); + const animate = animateReposition(element, () => { + item.element = null; + element + .clearClasses(classToAddToDraggedItem) + .clearStyles("pointer-events"); + + if (typeof onDragEnd === "function") onDragEnd(element); + + if (item.initialIndex != decoy.currentIndex && typeof onItemRepositioned === "function") + onItemRepositioned(element, item.initialIndex, decoy.currentIndex); + }); + + decoy.element.swapWith(element); + draggableContainer.element.append(decoy.element); + draggableContainer.element.clearStyles("transform", "width"); + + item.element = null; + decoy.element.remove(); + + animate(); + } + + const preventDefault = (event) => { + event.preventDefault(); + }; + + const handleGrab = (event, element) => { + if (currentlyBeingDragged.element != null) return; + + event.preventDefault(); + + const item = currentlyBeingDragged; + if (item.element != null) return; + + addDocumentEvents(); + initialScrollY = window.scrollY; + const client = lastClientPos.setFromEvent(event); + const elementRect = element.getBoundingClientRect(); + + item.element = element; + item.initialIndex = decoy.currentIndex = itemsContainer.children.indexOf(element); + item.clientOffset.set(client.x - elementRect.x, client.y - elementRect.y); + + // We use getComputedStyle here to get width and height because .clientWidth and .clientHeight + // return integers and not the real float values, which can cause the decoy to be off by a pixel + const elementStyle = getComputedStyle(element); + const initialWidth = elementStyle.width; + + decoy.element = elem().classes("drag-and-drop-decoy").styles({ + height: elementStyle.height, + width: initialWidth, + }); + + const container = draggableContainer; + + element.swapWith(decoy.element); + container.element.append(element); + element.classes(classToAddToDraggedItem); + + decoy.element.animate({ + keyframes: [{ transform: "scale(.9)", opacity: 0, offset: 0 }], + options: { duration: 300, easing: "ease" } + }) + + container.element.styles({ width: initialWidth, transform: "none" }); + container.initialRect = container.element.getBoundingClientRect(); + + const offsetY = elementRect.y - container.initialRect.y; + const offsetX = elementRect.x - container.initialRect.x; + + container.element.styles({ transform: `translate(${offsetX}px, ${offsetY}px)` }); + } + + [addDocumentEvents, removeDocumentEvents] = toggleableEvents(document, { + "mousemove": handleReposition, + "scroll": handleReposition, + "mousedown": preventDefault, + "contextmenu": preventDefault, + "mouseup": handleRelease, + }); + + return elem().classes("drag-and-drop-container").append( + itemsContainer, + draggableContainer.element = elem().classes("drag-and-drop-draggable") + ).component({ + onDragStart: handleGrab + }); +} diff --git a/internal/glance/static/js/utils.js b/internal/glance/static/js/utils.js index 1d1816a..a82f97a 100644 --- a/internal/glance/static/js/utils.js +++ b/internal/glance/static/js/utils.js @@ -36,3 +36,46 @@ export function openURLInNewTab(url, focus = true) { if (focus && newWindow != null) newWindow.focus(); } + + +export class Vec2 { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static new(x = 0, y = 0) { + return new Vec2(x, y); + } + + static fromEvent(event) { + return new Vec2(event.clientX, event.clientY); + } + + setFromEvent(event) { + this.x = event.clientX; + this.y = event.clientY; + return this; + } + + set(x, y) { + this.x = x; + this.y = y; + return this; + } +} + +export function toggleableEvents(element, eventToHandlerMap) { + return [ + () => { + for (const [event, handler] of Object.entries(eventToHandlerMap)) { + element.addEventListener(event, handler); + } + }, + () => { + for (const [event, handler] of Object.entries(eventToHandlerMap)) { + element.removeEventListener(event, handler); + } + } + ]; +} 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 733b5fe..097be00 100644 --- a/internal/glance/templates.go +++ b/internal/glance/templates.go @@ -21,6 +21,9 @@ var globalTemplateFunctions = template.FuncMap{ "safeURL": func(str string) template.URL { return template.URL(str) }, + "safeHTML": func(str string) template.HTML { + return template.HTML(str) + }, "absInt": func(i int) int { return int(math.Abs(float64(i))) }, diff --git a/internal/glance/templates/bookmarks-grid.html b/internal/glance/templates/bookmarks-grid.html new file mode 100644 index 0000000..cf33ebc --- /dev/null +++ b/internal/glance/templates/bookmarks-grid.html @@ -0,0 +1,21 @@ +{{ template "widget-base.html" . }} + +{{ define "widget-content" }} + +{{ end }} diff --git a/internal/glance/templates/bookmarks.html b/internal/glance/templates/bookmarks.html index 1952cdb..43821ed 100644 --- a/internal/glance/templates/bookmarks.html +++ b/internal/glance/templates/bookmarks.html @@ -10,10 +10,10 @@
    {{- range .Links }}
  • -
    +
    {{- if ne "" .Icon.URL }}
    - + {{ .Icon.ElemWithClass "square-20" }}
    {{- end }} {{ .Title }} diff --git a/internal/glance/templates/docker-containers.html b/internal/glance/templates/docker-containers.html index aeb2f0f..f7c8d7c 100644 --- a/internal/glance/templates/docker-containers.html +++ b/internal/glance/templates/docker-containers.html @@ -3,9 +3,9 @@ {{- define "widget-content" }}
      {{- range .Containers }} -
    • +
    • {{ template "state-icon" .StateIcon }}
      -
      {{ .Title }} {{ .StateText }}
      +
      {{ .Name }} {{ .StateText }}
    • {{- end }}
    @@ -22,11 +22,11 @@
    -
    +
    {{- if .URL }} - {{ .Title }} + {{ .Name }} {{- else }} -
    {{ .Title }}
    +
    {{ .Name }}
    {{- end }} {{- if .Description }}
    {{ .Description }}
    @@ -47,19 +47,19 @@ {{- define "state-icon" }} {{- if eq . "ok" }} - {{ block "document-head-before" . }}{{ end }} + {{ block "document-title" . }}{{ end }} - - - - - - - - + + + + + + + + {{ if .App.Config.Theme.CustomCSSFile }}{{ end }} {{ block "document-head-after" . }}{{ end }} + {{ if .App.Config.Document.Head }}{{ .App.Config.Document.Head }}{{ end }} {{ template "document-body" . }} diff --git a/internal/glance/templates/footer.html b/internal/glance/templates/footer.html new file mode 100644 index 0000000..5a76330 --- /dev/null +++ b/internal/glance/templates/footer.html @@ -0,0 +1,11 @@ +{{ if not .App.Config.Branding.HideFooter }} +
    +{{ if eq "" .App.Config.Branding.CustomFooter }} +
    + Glance {{ if ne "dev" .App.Version }}{{ .App.Version }}{{ else }}({{ .App.Version }}){{ end }} +
    +{{ else }} + {{ .App.Config.Branding.CustomFooter }} +{{ end }} +
    +{{ end }} diff --git a/internal/glance/templates/forum-posts.html b/internal/glance/templates/forum-posts.html index 05a57d8..5b65b69 100644 --- a/internal/glance/templates/forum-posts.html +++ b/internal/glance/templates/forum-posts.html @@ -23,7 +23,7 @@ {{- end }} {{- end }}
    - {{ .Title }} + {{ .Title }} {{- if .Tags }}