Bump micromatch from 4.0.7 to 4.0.8 in /docs (#33)

Bumps [micromatch](https://github.com/micromatch/micromatch) from 4.0.7 to 4.0.8.
- [Release notes](https://github.com/micromatch/micromatch/releases)
- [Changelog](https://github.com/micromatch/micromatch/blob/master/CHANGELOG.md)
- [Commits](https://github.com/micromatch/micromatch/compare/4.0.7...4.0.8)

---
updated-dependencies:
- dependency-name: micromatch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI
+on:
+  pull_request:
+  push:
+    branches: "main"
+
+jobs:
+  build-binary:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Rust
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install deps
+        run: cd web && bun install
+
+      - name: Build
+        run: ./build.sh cargo build --verbose
+
+  build-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64
+          push: false
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/nightly.yml

@@ -1,46 +1,48 @@
 name: Nightly Release
 on:
-  push:
-    branches: main
+  workflow_dispatch:
 
 jobs:
-  build-binary:
-    strategy:
-      matrix:
-        platform:
-          - release_for: linux-aarch64
-            os: ubuntu-latest
-            target: aarch64-unknown-linux-musl
-            bin: cup
-            name: cup-linux-aarch64
-            command: build
-
-          - release_for: linux-x86_64
-            os: ubuntu-latest
-            target: x86_64-unknown-linux-musl
-            bin: cup
-            name: cup-linux-x86_64
-            command: build
-
-    runs-on: ${{ matrix.platform.os }}
+  build-binaries:
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup rust
+      - name: Set up Rust
         uses: actions-rust-lang/setup-rust-toolchain@v1
 
       - name: Install cross
         run: cargo install cross --git https://github.com/cross-rs/cross
 
-      - name: Build binary
-        run: cross ${{ matrix.platform.command }} --target ${{ matrix.platform.target }}
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
 
-      - name: Upload CLI
+      - name: Install deps
+        run: cd web && bun install
+
+      - name: Build amd64 binary
+        run: |
+          ./build.sh cross build --target x86_64-unknown-linux-musl --release
+          mv target/x86_64-unknown-linux-musl/release/cup ./cup-linux-amd64
+
+      - name: Build arm64 binary
+        run: |
+          ./build.sh cross build --target aarch64-unknown-linux-musl --release
+          mv target/aarch64-unknown-linux-musl/release/cup ./cup-linux-arm64
+
+      - name: Upload binaries
         uses: actions/upload-artifact@v4
         with:
-          name: ${{ matrix.platform.name }}
-          path: target/${{ matrix.platform.target }}/debug/${{ matrix.platform.bin }}
+          name: binaries
+          path: |
+            cup-linux-amd64
+            cup-linux-arm64
 
   build-image:
     runs-on: ubuntu-latest
@@ -69,4 +71,21 @@ jobs:
           push: true
           tags: ghcr.io/sergi0g/cup:nightly
           cache-from: type=gha
-          cache-to: type=gha,mode=max
+          cache-to: type=gha,mode=max
+
+  nightly-release:
+    runs-on: ubuntu-latest
+    needs: build-binaries
+    steps:
+      - name: Download binaries
+        uses: actions/download-artifact@v4
+        with:
+          name: binaries
+          path: binaries
+
+      - uses: pyTooling/Actions/releaser@r0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          tag: nightly
+          rm: true
+          files: binaries/*

.github/workflows/release.yml

@@ -1,7 +1,6 @@
 name: Release
 on:
-  push:
-    tags: ["v*.*.*"]
+  workflow_dispatch:
 
 jobs:
   get-tag:
@@ -9,37 +8,56 @@ jobs:
     outputs:
       tag: ${{ steps.tag.outputs.tag }}
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Get current tag
         id: tag
         run: |
-          TAG=$(echo "$GITHUB_REF" | sed 's/^refs\/tags\///')
+          TAG=v$(head -n 4 Cargo.toml | grep version | awk '{print $3}' | tr -d '"')
           echo "Current tag: $TAG"
           echo "tag=$TAG" >> $GITHUB_OUTPUT
-  build-binary:
-    strategy:
-      matrix:
-        arch:
-          - aarch64
-          - x86_64
+
+  build-binaries:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup rust
+      - name: Set up Rust
         uses: actions-rust-lang/setup-rust-toolchain@v1
 
       - name: Install cross
         run: cargo install cross --git https://github.com/cross-rs/cross
 
-      - name: Build binary
-        run: cross build --target ${{ matrix.arch }}-unknown-linux-musl --release
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
-      - name: Upload binary
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install deps
+        run: cd web && bun install
+
+      - name: Build amd64 binary
+        run: |
+          ./build.sh cross build --target x86_64-unknown-linux-musl --release
+          mv target/x86_64-unknown-linux-musl/release/cup ./cup-linux-amd64
+
+      - name: Build arm64 binary
+        run: |
+          ./build.sh cross build --target aarch64-unknown-linux-musl --release
+          mv target/aarch64-unknown-linux-musl/release/cup ./cup-linux-arm64
+
+      - name: Upload binaries
         uses: actions/upload-artifact@v4
         with:
-          name: cup-linux-${{ matrix.arch }}
-          path: target/${{ matrix.arch }}-unknown-linux-musl/release/cup
+          name: binaries
+          path: |
+            cup-linux-amd64
+            cup-linux-arm64
 
   build-image:
     needs: get-tag
@@ -73,24 +91,13 @@ jobs:
 
   release:
     runs-on: ubuntu-latest
-    needs: [get-tag, build-image, build-binary]
+    needs: [get-tag, build-image, build-binaries]
     steps:
-      - name: Download arm64 binary
+      - name: Download binaries
         uses: actions/download-artifact@v4
         with:
-          name: cup-linux-aarch64
-          path: cup-linux-aarch64
-
-      - name: Download x86 binary
-        uses: actions/download-artifact@v4
-        with:
-          name: cup-linux-x86_64
-          path: cup-linux-x86_64
-
-      # - name: Extract and rename binaries
-      #   run: |
-      #     unzip /home/runner/work/cup/cup/cup-linux-aarch64 && mv /home/runner/work/cup/cup/cup cup-linux-aarch64
-      #     unzip /home/runner/work/cup/cup/cup-linux-x86_64 && mv /home/runner/work/cup/cup/cup cup-linux-x86_64
+          name: binaries
+          path: binaries
 
       - name: Create release
         uses: softprops/action-gh-release@v2
@@ -100,6 +107,4 @@ jobs:
           prerelease: true
           tag_name: ${{ needs.get-tag.outputs.tag }}
           name: ${{ needs.get-tag.outputs.tag }}
-          files: |
-            cup-linux-aarch64
-            cup-linux-x86_64
+          files: binaries/*

.gitignore

@@ -2,6 +2,7 @@
 /docs/.next
 /docs/node_modules
 /docs/out
+/src/static
 
 # In case I accidentally commit mine...
 cup.json

.tool-versions

@@ -1 +0,0 @@
-rust 1.79.0

CONTRIBUTING.md

@@ -0,0 +1,51 @@
+# Contributing
+
+First of all, thanks for taking time to contribute to Cup! This guide will help you set up a development environment and make your first contribution.
+
+## Setting up a development environment
+
+Requirements:
+- A computer running Linux
+- Rust (usually installed from https://rustup.rs/)
+- Node.js 22+ and Bun 1+
+
+1. Fork the repository. This is where you'll be pushing your changes before you create a pull request. Make sure to _create a new branch_ for your changes.
+2. Clone your fork with `git clone https://github.com/<YOUR_USERNAME>/cup` (if you use SSH, `git clone git@github.com:<YOUR_USERNAME>/cup`) and open your editor
+3. Switch to your newly created branch (e.g. if your branch is called `improve-logging`, run `git checkout improve-logging`)
+4. Run `bun install` in `web/` and `./build.sh` to set up the frontend
+
+You're ready to go!
+
+## Project architecture
+
+Cup can be run in 2 modes: CLI and server.
+
+All CLI specific functionality is located in `src/formatting.rs` and some other files in functions prefixed with `#[cfg(feature = "cli")]`.
+
+All server specific functionality is located in `src/server.rs` and `web/`.
+
+## Important notes
+
+- When making any changes, always make sure to write optimize your code for:
+  + Performance: You should always benchmark Cup before making changes and after your changes to make sure there is none (or a very small) difference in time. Profiling old and new code is also good.
+  + Readability: Include comments describing any new functions you create, give descriptive names to variables and when making a design decision or a compromise, ALWAYS include a comment explaining what you did and why.
+
+- If you plan on developing the frontend without making backend changes, it is highly recommended to run `cup serve` in the background and start the frontend in development mode from `web/` with `bun dev`.
+
+- If you make changes to the frontend, always remember to prefix your build command with the `build.sh` script which takes care of rebuilding the frontend. For example: `./build.sh cargo build -r`
+
+- When adding new features to Cup (e.g. configuration options), make sure to update the documentation (located in `docs/`). Refer to other pages in the documentation, or to the [official docs](https://nextra.site) for any questions you may have. The docs use `pnpm` as their package manager.
+
+- If you need help with finishing something (e.g. you've made some commits and need help with writing docs, you want some feedback about a design decision, etc.), you can open a draft PR and ask for help there.
+
+## Submitting a PR
+
+To have your changes included in Cup, you will need to create a pull request.
+
+Before doing so, please make sure you have run `cargo clippy` and resolved all warnings related to your changes and have formatted your code with `cargo fmt`. This ensures Cup's codebase is consistent and uses good practices for code.
+
+After you're done with that, commit your changes and push them to your branch.
+
+Next, open your fork on Github and create a pull request. Make sure to include the changes you made, which issues it addresses (if any) and any other info you think is important.
+
+Happy contributing!

Cargo.toml

@@ -1,23 +1,26 @@
 [package]
 name = "cup"
-version = "2.1.0"
+version = "2.4.0"
 edition = "2021"
 
 [dependencies]
 clap = { version = "4.5.7", features = ["derive"] }
 indicatif = { version = "0.17.8", optional = true }
-tokio = {version = "1.38.0", features = ["rt", "rt-multi-thread", "macros"]}
-ureq = { version = "2.9.7", features = ["tls"] }
-rayon = "1.10.0"
+tokio = {version = "1.38.0", features = ["macros"]}
 xitca-web = { version = "0.5.0", optional = true, features = ["logger"] }
 liquid = { version = "0.26.6", optional = true }
 bollard = "0.16.1"
 once_cell = "1.19.0"
-http-auth = { version = "0.1.9", features = [] }
+http-auth = { version = "0.1.9", default-features = false, features = [] }
 termsize = { version = "0.1.8", optional = true }
 regex = "1.10.5"
 chrono = { version = "0.4.38", default-features = false, features = ["std", "alloc", "clock"], optional = true }
 json = "0.12.4"
+reqwest = { version = "0.12.7", default-features = false, features = ["rustls-tls"] }
+futures = "0.3.30"
+reqwest-retry = "0.6.1"
+reqwest-middleware = "0.3.3"
+rustc-hash = "2.0.0"
 
 [features]
 default = ["server", "cli"]

Dockerfile

@@ -1,20 +1,42 @@
-FROM rust:alpine AS build
-WORKDIR /
+### Build UI ###
+FROM node:20 AS web
 
+# Install bun
+RUN curl -fsSL https://bun.sh/install | bash
+
+# Copy web folder
+COPY ./web /web
+WORKDIR /web
+
+# Install requirements
+RUN ~/.bun/bin/bun install
+
+# Build frontend
+RUN ~/.bun/bin/bun run build
+
+### Build Cup ###
+FROM rust:1.80.1-alpine AS build
+
+# Requirements
 RUN apk add musl-dev
 
-RUN USER=root cargo new --bin cup
+# Copy files
 WORKDIR /cup
 
-COPY Cargo.toml Cargo.lock .
-RUN cargo build --release
-RUN rm -rf src/
+COPY Cargo.toml .
+COPY Cargo.lock .
+COPY ./src ./src
 
-COPY src src
-# This is a very bad workaround, but cargo only triggers a rebuild this way for some reason
-RUN printf "\n" >> src/main.rs
+# Copy UI from web builder
+COPY --from=web /web/dist src/static
+
+# Build
 RUN cargo build --release
 
+### Main ###
 FROM scratch
+
+# Copy binary
 COPY --from=build /cup/target/release/cup /cup
+
 ENTRYPOINT ["/cup"]

README.md

@@ -4,6 +4,8 @@ Cup is the easiest way to check for container image updates.
 
 ![Demo](screenshots/cup.gif)
 
+_If you like this project and/or use Cup, please consider starring the project ⭐. It motivates me to continue working on it and imrpoving it. Plus, you get updates for new releases!_
+
 ## Screenshots
 
 ![Cup web in light mode](screenshots/web_light.png)
@@ -11,11 +13,11 @@ Cup is the easiest way to check for container image updates.
 
 ## Features
 
-- Extremely fast. Cup takes full advantage of your CPU and is hightly optimized, resulting in lightning fast speed. On my test machine, it took ~6 seconds for 70 images.
+- Extremely fast. Cup takes full advantage of your CPU and is hightly optimized, resulting in lightning fast speed. On my Raspberry Pi 5, it took 3.7 seconds for 58 images!
 - Supports most registries, including Docker Hub, ghcr.io, Quay, lscr.io and even Gitea (or derivatives)
 - Doesn't exhaust any rate limits. This is the original reason I created Cup. It was inspired by [What's up docker?](https://github.com/fmartinou/whats-up-docker) which would always use it up.
 - Beautiful CLI and web interface for checking on your containers any time.
-- The binary is tiny! At the time of writing it's just 4.7 MB. No more pulling 100+ MB docker images for a such a simple program.
+- The binary is tiny! At the time of writing it's just 5.2 MB. No more pulling 100+ MB docker images for a such a simple program.
 - JSON output for both the CLI and web interface so you can connect Cup to integrations. It's easy to parse and makes webhooks and pretty dashboards simple to set up!
 
 ## Documentation
@@ -24,11 +26,10 @@ Take a look at https://sergi0g.github.io/cup/docs!
 
 ## Limitations
 
-Cup is a work in progress. It might not have as many features as What's up Docker. If one of these features is really important for you, please consider using another tool.
+Cup is a work in progress. It might not have as many features as other alternatives. If one of these features is really important for you, please consider using another tool.
 
-- ~~Cup currently doesn't support registries which use repositories without slashes. This includes Azure. This problem may sound a bit weird, but it's due to the regex that's used at the moment. This will (hopefully) be fixed in the future.~~
-- ~~Cup doesn't support private images. This is on the roadmap. Currently, it just returns unknown for those images.~~
-- Cup cannot trigger your integrations. If you want that to happen automatically, please use What's up docker instead. Cup was created to be simple. The data is there, and it's up to you to retrieve it (e.g. by running `cup check -r` with a cronjob or periodically requesting the `/json` url from the server)
+- Cup (currently) does not support semver.
+- Cup cannot directly trigger your integrations. If you want that to happen automatically, please use What's up Docker instead. Cup was created to be simple. The data is there, and it's up to you to retrieve it (e.g. by running `cup check -r` with a cronjob or periodically requesting the `/json` url from the server).
 
 ## Roadmap
 Take a sneak peek at what's coming up in future releases on the [roadmap](https://github.com/users/sergi0g/projects/2)!
@@ -44,9 +45,7 @@ Here are some ideas to get you started:
 - Help optimize Cup and make it even better!
 - Add more features to the web UI
 
-To contribute, fork the repository, make your changes and the submit a pull request.
-
-Note: If you update the UI, please make sure to recompile the CSS with `tailwindcss -mo src/static/index.css`. You need to have the Tailwind CSS CLI installed ([instructions here](https://tailwindcss.com/docs/installation))
+For more information, check the [docs](https://sergi0g.github.io/cup/docs/contributing)!
 
 ## Support
 

build.sh

@@ -0,0 +1,22 @@
+#!/bin/sh
+
+# Exit on error
+set -e
+
+# This is kind of like a shim that makes sure the frontend is rebuilt when running a build. For example you can run `./build.sh cargo build --release`
+
+# Remove old files
+rm -rf src/static
+
+# Frontend
+cd web/
+
+# Build
+bun run build
+
+# Copy UI to src folder
+cp -r dist/ ../src/static
+
+# Run command from argv
+
+$@

docs/.tool-versions

@@ -1 +1 @@
-nodejs 21.6.2
+nodejs 22.8.0

docs/package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.11.0",
-    "next": "^14.2.5",
+    "next": "^14.2.10",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.3.1",
@@ -16,5 +16,6 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.5"
-  }
-}
+  },
+  "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
+}

docs/pages/docs/_meta.json

@@ -11,7 +11,13 @@
     "usage": {
         "title": "Usage"
     },
+    "community-resources": {
+        "title": "Community Resources"
+    },
     "nightly": {
         "title": "Using the latest version"
+    },
+    "contributing": {
+        "title": "Contributing"
     }
 }

docs/pages/docs/community-resources/docker-compose.mdx

@@ -0,0 +1,23 @@
+# Docker Compose
+
+Many users find it useful to run Cup with Docker Compose, as it enables them to have it constantly running in the background and easily control it. Cup's lightweight resource usae makes it ideal for this use case.
+
+There have been requests for an official Docker Compose file, but I believe you should customize it to your needs.
+
+Here is an example of what I would use (by [@ioverho](https://github.com/ioverho)):
+
+```yaml
+services:
+  cup:
+    image: ghcr.io/sergi0g/cup:latest
+    container_name: cup # Optional
+    restart: unless-stopped
+    command: -c /config/cup.json serve
+    ports:
+      - 8000:8000
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ./cup.json:/config/cup.json
+```
+
+This can be customized further of course, if you choose to use a different port, another config location, or would like to change something else. Have fun!

docs/pages/docs/community-resources/homepage-widget.mdx

@@ -0,0 +1,75 @@
+import Image from 'next/image';
+import widget1 from '../../../assets/350767810-42eccc89-bdfd-426a-a113-653abe7483d8.png'
+import widget2 from '../../../assets/358304960-e9f26767-51f7-4b5a-8b74-a5811019497b.jpeg'
+
+# Homepage Widget
+
+Some users have asked for a homepage widget.
+
+## Docker Compose with the widget configured via labels:
+
+```yaml
+services:
+  cup:
+    image: ghcr.io/sergi0g/cup
+    container_name: cup
+    command: -c /config/cup.json serve -p 8000
+    volumes:
+      - ./config/cup.json:/config/cup.json
+      - /var/run/docker.sock:/var/run/docker.sock
+    ports:
+      - 8000:8000
+    restart: unless-stopped
+    labels:
+      homepage.group: Network
+      homepage.name: Cup
+      homepage.icon: /icons/cup-with-straw.png
+      homepage.href: http://myserver:8000
+      homepage.ping: http://myserver:8000
+      homepage.description: Checks for container updates
+      homepage.widget.type: customapi
+      homepage.widget.url: http://myserver:8000/json
+      homepage.widget.mappings[0].label: Monitoring
+      homepage.widget.mappings[0].field.metrics: monitored_images
+      homepage.widget.mappings[0].format: number
+      homepage.widget.mappings[1].label: Up to date
+      homepage.widget.mappings[1].field.metrics: up_to_date
+      homepage.widget.mappings[1].format: number
+      homepage.widget.mappings[2].label: Updates
+      homepage.widget.mappings[2].field.metrics: update_available
+      homepage.widget.mappings[2].format: number
+```
+Preview:
+<Image src={widget1}/>
+
+Credit: [@agrmohit](https://github.com/agrmohit)
+
+## Widget in Homepage's config file format:
+
+```yaml
+widget:
+  type: customapi
+  url: http://<SERVER_IP>:9000/json
+  refreshInterval: 10000
+  method: GET
+  mappings:
+    - field:
+        metrics: monitored_images
+      label: Monitored images
+      format: number
+    - field: 
+        metrics: up_to_date
+      label: Up to date
+      format: number
+    - field: 
+        metrics: update_available
+      label: Available updates
+      format: number
+    - field: 
+        metrics: unknown
+      label: Unknown
+      format: number
+```
+Preview:
+<Image src={widget2}/>
+Credit: [@remussamoila](https://github.com/remussamoila)

docs/pages/docs/configuration.mdx

@@ -1,5 +1,5 @@
 import { Steps, Callout, Card, Cards } from "nextra-theme-docs";
-import { IconPaint, IconLockOpen, IconKey } from '@tabler/icons-react';
+import { IconPaint, IconLockOpen, IconKey, IconPlug } from '@tabler/icons-react';
 
 # Configuration
 
@@ -13,7 +13,8 @@ For example, if using Podman, you might do
 $ cup -s /run/user/1000/podman/podman.sock check
 ```
 
-This option will hopefully be moved to the configuration file soon.
+This option is also available in the configuration file and it's best to put it there.
+<Card icon={<IconPlug />} title="Custom Docker socket" href="/docs/configuration/socket" />
 
 ## Configuration file
 

docs/pages/docs/configuration/socket.mdx

@@ -0,0 +1,10 @@
+# Socket
+
+If you need to specify a custom Docker socket (e.g. because you're using Podman), you can use the `socket` option. Here's an example:
+
+```json
+{
+    "socket": "/run/user/1000/podman/podman.sock"
+    // Other options
+}
+```

docs/pages/docs/contributing.mdx

@@ -0,0 +1,51 @@
+# Contributing
+
+First of all, thanks for taking time to contribute to Cup! This guide will help you set up a development environment and make your first contribution.
+
+## Setting up a development environment
+
+Requirements:
+- A computer running Linux
+- Rust (usually installed from https://rustup.rs/)
+- Node.js 22+ and Bun 1+
+
+1. Fork the repository. This is where you'll be pushing your changes before you create a pull request. Make sure to _create a new branch_ for your changes.
+2. Clone your fork with `git clone https://github.com/<YOUR_USERNAME>/cup` (if you use SSH, `git clone git@github.com:<YOUR_USERNAME>/cup`) and open your editor
+3. Switch to your newly created branch (e.g. if your branch is called `improve-logging`, run `git checkout improve-logging`)
+4. Run `bun install` in `web/` and `./build.sh` to set up the frontend
+
+You're ready to go!
+
+## Project architecture
+
+Cup can be run in 2 modes: CLI and server.
+
+All CLI specific functionality is located in `src/formatting.rs` and some other files in functions prefixed with `#[cfg(feature = "cli")]`.
+
+All server specific functionality is located in `src/server.rs` and `web/`.
+
+## Important notes
+
+- When making any changes, always make sure to write optimize your code for:
+  + Performance: You should always benchmark Cup before making changes and after your changes to make sure there is none (or a very small) difference in time. Profiling old and new code is also good.
+  + Readability: Include comments describing any new functions you create, give descriptive names to variables and when making a design decision or a compromise, ALWAYS include a comment explaining what you did and why.
+
+- If you plan on developing the frontend without making backend changes, it is highly recommended to run `cup serve` in the background and start the frontend in development mode from `web/` with `bun dev`.
+
+- If you make changes to the frontend, always remember to prefix your build command with the `build.sh` script which takes care of rebuilding the frontend. For example: `./build.sh cargo build -r`
+
+- When adding new features to Cup (e.g. configuration options), make sure to update the documentation (located in `docs/`). Refer to other pages in the documentation, or to the [official docs](https://nextra.site) for any questions you may have. The docs use `pnpm` as their package manager.
+
+- If you need help with finishing something (e.g. you've made some commits and need help with writing docs, you want some feedback about a design decision, etc.), you can open a draft PR and ask for help there.
+
+## Submitting a PR
+
+To have your changes included in Cup, you will need to create a pull request.
+
+Before doing so, please make sure you have run `cargo clippy` and resolved all warnings related to your changes and have formatted your code with `cargo fmt`. This ensures Cup's codebase is consistent and uses good practices for code.
+
+After you're done with that, commit your changes and push them to your branch.
+
+Next, open your fork on Github and create a pull request. Make sure to include the changes you made, which issues it addresses (if any) and any other info you think is important.
+
+Happy contributing!

docs/pages/docs/usage/cli.mdx

@@ -20,12 +20,22 @@ rockylinux:9-minimal                                    Up to date
 rabbitmq:3.11.9-management                              Up to date
 ...
 some/deleted:image                                         Unknown
+[38:5:86mINFO  ✨ Checked 58 images in 3772ms
 ```
 
-### Check for updates to a specific image
-```
+### Check for updates to specific images
+```ansi
 $ cup check node:latest
-node:latest has an update available
+node:latest                                      Update available
+[38:5:86mINFO  ✨ Checked 1 images in 1310ms
+```
+
+```ansi
+$ cup check node:latest
+nextcloud:30                                          Update available
+postgres:14                                           Update available
+mysql:8.0                                               Up to date
+[38:5:86mINFO  ✨ Checked 3 images in 1769ms
 ```
 
 ## Enable icons
@@ -46,7 +56,7 @@ $ cup check -r
 Here is how it would look in Typescript:
 
 ```ts
-type CupData = {
+interface CupData {
     metrics: {
         monitored_images: number,
         up_to_date: number,

docs/pnpm-lock.yaml

@@ -12,14 +12,14 @@ importers:
         specifier: ^3.11.0
         version: 3.11.0(react@18.3.1)
       next:
-        specifier: ^14.2.5
-        version: 14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^14.2.10
+        version: 14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       nextra:
         specifier: ^2.13.4
-        version: 2.13.4(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.13.4(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       nextra-theme-docs:
         specifier: ^2.13.4
-        version: 2.13.4(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@2.13.4(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.13.4(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@2.13.4(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -175,59 +175,59 @@ packages:
     resolution: {integrity: sha512-lH8bYk2kqfbKsht/Gejd8K+y069ZXPHBfrlcj1ptS6xlJbHhncHxpFyy57W+PTuCcN+MPGVjs+3CiufG8EUrCQ==}
     engines: {node: '>= 10'}
 
-  '@next/env@14.2.5':
-    resolution: {integrity: sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==}
+  '@next/env@14.2.10':
+    resolution: {integrity: sha512-dZIu93Bf5LUtluBXIv4woQw2cZVZ2DJTjax5/5DOs3lzEOeKLy7GxRSr4caK9/SCPdaW6bCgpye6+n4Dh9oJPw==}
 
-  '@next/swc-darwin-arm64@14.2.5':
-    resolution: {integrity: sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==}
+  '@next/swc-darwin-arm64@14.2.10':
+    resolution: {integrity: sha512-V3z10NV+cvMAfxQUMhKgfQnPbjw+Ew3cnr64b0lr8MDiBJs3eLnM6RpGC46nhfMZsiXgQngCJKWGTC/yDcgrDQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@14.2.5':
-    resolution: {integrity: sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==}
+  '@next/swc-darwin-x64@14.2.10':
+    resolution: {integrity: sha512-Y0TC+FXbFUQ2MQgimJ/7Ina2mXIKhE7F+GUe1SgnzRmwFY3hX2z8nyVCxE82I2RicspdkZnSWMn4oTjIKz4uzA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@14.2.5':
-    resolution: {integrity: sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==}
+  '@next/swc-linux-arm64-gnu@14.2.10':
+    resolution: {integrity: sha512-ZfQ7yOy5zyskSj9rFpa0Yd7gkrBnJTkYVSya95hX3zeBG9E55Z6OTNPn1j2BTFWvOVVj65C3T+qsjOyVI9DQpA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@14.2.5':
-    resolution: {integrity: sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==}
+  '@next/swc-linux-arm64-musl@14.2.10':
+    resolution: {integrity: sha512-n2i5o3y2jpBfXFRxDREr342BGIQCJbdAUi/K4q6Env3aSx8erM9VuKXHw5KNROK9ejFSPf0LhoSkU/ZiNdacpQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@14.2.5':
-    resolution: {integrity: sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==}
+  '@next/swc-linux-x64-gnu@14.2.10':
+    resolution: {integrity: sha512-GXvajAWh2woTT0GKEDlkVhFNxhJS/XdDmrVHrPOA83pLzlGPQnixqxD8u3bBB9oATBKB//5e4vpACnx5Vaxdqg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@14.2.5':
-    resolution: {integrity: sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==}
+  '@next/swc-linux-x64-musl@14.2.10':
+    resolution: {integrity: sha512-opFFN5B0SnO+HTz4Wq4HaylXGFV+iHrVxd3YvREUX9K+xfc4ePbRrxqOuPOFjtSuiVouwe6uLeDtabjEIbkmDA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@14.2.5':
-    resolution: {integrity: sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==}
+  '@next/swc-win32-arm64-msvc@14.2.10':
+    resolution: {integrity: sha512-9NUzZuR8WiXTvv+EiU/MXdcQ1XUvFixbLIMNQiVHuzs7ZIFrJDLJDaOF1KaqttoTujpcxljM/RNAOmw1GhPPQQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-ia32-msvc@14.2.5':
-    resolution: {integrity: sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==}
+  '@next/swc-win32-ia32-msvc@14.2.10':
+    resolution: {integrity: sha512-fr3aEbSd1GeW3YUMBkWAu4hcdjZ6g4NBl1uku4gAn661tcxd1bHs1THWYzdsbTRLcCKLjrDZlNp6j2HTfrw+Bg==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@14.2.5':
-    resolution: {integrity: sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==}
+  '@next/swc-win32-x64-msvc@14.2.10':
+    resolution: {integrity: sha512-UjeVoRGKNL2zfbcQ6fscmgjBAS/inHBh63mjIlfPg/NG8Yn2ztqylXt5qilYb6hoHIwaU2ogHknHWWmahJjgZQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1249,8 +1249,8 @@ packages:
   micromark@3.2.0:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
 
-  micromatch@4.0.7:
-    resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
   minimatch@9.0.5:
@@ -1297,8 +1297,8 @@ packages:
       react: '*'
       react-dom: '*'
 
-  next@14.2.5:
-    resolution: {integrity: sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==}
+  next@14.2.10:
+    resolution: {integrity: sha512-sDDExXnh33cY3RkS9JuFEKaS4HmlWmDKP1VJioucCG6z5KuA008DPsDZOzi8UfqEk3Ii+2NCQSJrfbEWtZZfww==}
     engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
@@ -1991,33 +1991,33 @@ snapshots:
       '@napi-rs/simple-git-win32-arm64-msvc': 0.1.17
       '@napi-rs/simple-git-win32-x64-msvc': 0.1.17
 
-  '@next/env@14.2.5': {}
+  '@next/env@14.2.10': {}
 
-  '@next/swc-darwin-arm64@14.2.5':
+  '@next/swc-darwin-arm64@14.2.10':
     optional: true
 
-  '@next/swc-darwin-x64@14.2.5':
+  '@next/swc-darwin-x64@14.2.10':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@14.2.5':
+  '@next/swc-linux-arm64-gnu@14.2.10':
     optional: true
 
-  '@next/swc-linux-arm64-musl@14.2.5':
+  '@next/swc-linux-arm64-musl@14.2.10':
     optional: true
 
-  '@next/swc-linux-x64-gnu@14.2.5':
+  '@next/swc-linux-x64-gnu@14.2.10':
     optional: true
 
-  '@next/swc-linux-x64-musl@14.2.5':
+  '@next/swc-linux-x64-musl@14.2.10':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@14.2.5':
+  '@next/swc-win32-arm64-msvc@14.2.10':
     optional: true
 
-  '@next/swc-win32-ia32-msvc@14.2.5':
+  '@next/swc-win32-ia32-msvc@14.2.10':
     optional: true
 
-  '@next/swc-win32-x64-msvc@14.2.5':
+  '@next/swc-win32-x64-msvc@14.2.10':
     optional: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -2572,7 +2572,7 @@ snapshots:
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.7
+      micromatch: 4.0.8
 
   fastq@1.17.1:
     dependencies:
@@ -3371,7 +3371,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  micromatch@4.0.7:
+  micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
@@ -3405,21 +3405,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  next-seo@6.5.0(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-seo@6.5.0(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next-themes@0.2.1(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-themes@0.2.1(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@next/env': 14.2.5
+      '@next/env': 14.2.10
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
       caniuse-lite: 1.0.30001642
@@ -3429,20 +3429,20 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       styled-jsx: 5.1.1(react@18.3.1)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.5
-      '@next/swc-darwin-x64': 14.2.5
-      '@next/swc-linux-arm64-gnu': 14.2.5
-      '@next/swc-linux-arm64-musl': 14.2.5
-      '@next/swc-linux-x64-gnu': 14.2.5
-      '@next/swc-linux-x64-musl': 14.2.5
-      '@next/swc-win32-arm64-msvc': 14.2.5
-      '@next/swc-win32-ia32-msvc': 14.2.5
-      '@next/swc-win32-x64-msvc': 14.2.5
+      '@next/swc-darwin-arm64': 14.2.10
+      '@next/swc-darwin-x64': 14.2.10
+      '@next/swc-linux-arm64-gnu': 14.2.10
+      '@next/swc-linux-arm64-musl': 14.2.10
+      '@next/swc-linux-x64-gnu': 14.2.10
+      '@next/swc-linux-x64-musl': 14.2.10
+      '@next/swc-win32-arm64-msvc': 14.2.10
+      '@next/swc-win32-ia32-msvc': 14.2.10
+      '@next/swc-win32-x64-msvc': 14.2.10
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@2.13.4(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@2.13.4(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  nextra-theme-docs@2.13.4(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@2.13.4(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@popperjs/core': 2.11.8
@@ -3453,16 +3453,16 @@ snapshots:
       git-url-parse: 13.1.1
       intersection-observer: 0.12.2
       match-sorter: 6.3.4
-      next: 14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next-seo: 6.5.0(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next-themes: 0.2.1(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      nextra: 2.13.4(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-seo: 6.5.0(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-themes: 0.2.1(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      nextra: 2.13.4(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.23.8
 
-  nextra@2.13.4(next@14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  nextra@2.13.4(next@14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mdx-js/mdx': 2.3.0
@@ -3476,7 +3476,7 @@ snapshots:
       gray-matter: 4.0.3
       katex: 0.16.11
       lodash.get: 4.4.2
-      next: 14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-mdx-remote: 4.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       p-limit: 3.1.0
       react: 18.3.1
@@ -3857,7 +3857,7 @@ snapshots:
       is-glob: 4.0.3
       jiti: 1.21.6
       lilconfig: 2.1.0
-      micromatch: 4.0.7
+      micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.1

docs/theme.config.jsx

@@ -16,7 +16,7 @@ export default {
     const { asPath } = useRouter()
     const { frontMatter } = useConfig()
     const url =
-      'https://sergi0g.github.io/cup' +
+      'https://sergi0g.github.io/cup/docs/' +
       (`/${asPath}`);
  
     return (
@@ -36,9 +36,9 @@ export default {
       <h1 className="font-bold ml-2">Cup</h1>
     </div>
   ),
-  logoLink: "sergi0g.github.io/cup",
+  logoLink: "https://sergi0g.github.io/cup/docs/",
   project: {
-    link: "https://github.com/sergi0g/cup",
+    link: "https://github.com/sergi0g/cup/",
   },
   navbar: {
     extraContent: <ThemeSwitch lite className="[&_span]:hidden" />,

src/check.rs

@@ -1,88 +1,95 @@
-use std::{collections::{HashMap, HashSet}, sync::Mutex};
+use futures::future::join_all;
+use rustc_hash::{FxHashMap, FxHashSet};
 
-use rayon::iter::{IntoParallelRefIterator, ParallelIterator};
-use json::JsonValue;
+use crate::{
+    config::Config, image::Image, registry::{check_auth, get_token}, utils::new_reqwest_client
+};
 
-use crate::{docker::get_images_from_docker_daemon, image::Image, registry::{check_auth, get_token, get_latest_digests}, utils::unsplit_image};
-
-#[cfg(feature = "cli")]
-use crate::docker::get_image_from_docker_daemon;
-#[cfg(feature = "cli")]
 use crate::registry::get_latest_digest;
 
+/// Trait for a type that implements a function `unique` that removes any duplicates.
+/// In this case, it will be used for a Vec.
 pub trait Unique<T> {
-    // So we can filter vecs for duplicates
-    fn unique(&mut self);
+    fn unique(&mut self) -> Vec<T>;
 }
 
 impl<T> Unique<T> for Vec<T>
 where
     T: Clone + Eq + std::hash::Hash,
 {
-    fn unique(self: &mut Vec<T>) {
-        let mut seen: HashSet<T> = HashSet::new();
+    /// Remove duplicates from Vec
+    fn unique(self: &mut Vec<T>) -> Self {
+        let mut seen: FxHashSet<T> = FxHashSet::default();
         self.retain(|item| seen.insert(item.clone()));
+        self.to_vec()
     }
 }
 
-pub async fn get_all_updates(socket: Option<String>, config: &JsonValue) -> Vec<(String, Option<bool>)> {
-    let image_map_mutex: Mutex<HashMap<String, &Option<String>>> = Mutex::new(HashMap::new());
-    let local_images = get_images_from_docker_daemon(socket).await;
-    local_images.par_iter().for_each(|image| {
-        let img = unsplit_image(&image.registry, &image.repository, &image.tag);
-        image_map_mutex.lock().unwrap().insert(img, &image.digest);
-    });
-    let image_map = image_map_mutex.lock().unwrap().clone();
-    let mut registries: Vec<&String> = local_images
-        .par_iter()
-        .map(|image| &image.registry)
-        .collect();
-    registries.unique();
-    let mut remote_images: Vec<Image> = Vec::new();
-    for registry in registries {
-        let images: Vec<&Image> = local_images
-            .par_iter()
-            .filter(|image| &image.registry == registry)
-            .collect();
-        let credentials = config["authentication"][registry].clone().take_string().or(None);
-        let mut latest_images = match check_auth(registry, config) {
-            Some(auth_url) => {
-                let token = get_token(images.clone(), &auth_url, &credentials);
-                get_latest_digests(images, Some(&token), config)
-            }
-            None => get_latest_digests(images, None, config),
-        };
-        remote_images.append(&mut latest_images);
+/// Returns a list of updates for all images passed in.
+pub async fn get_updates(images: &[Image], config: &Config) -> Vec<(String, Option<bool>)> {
+    // Get a list of unique registries our images belong to. We are unwrapping the registry because it's guaranteed to be there.
+    let registries: Vec<&String> = images
+        .iter()
+        .map(|image| image.registry.as_ref().unwrap())
+        .collect::<Vec<&String>>()
+        .unique();
+
+    // Create request client. All network requests share the same client for better performance.
+    // This client is also configured to retry a failed request up to 3 times with exponential backoff in between.
+    let client = new_reqwest_client();
+
+    // Create a map of images indexed by registry. This solution seems quite inefficient, since each iteration causes a key to be looked up. I can't find anything better at the moment.
+    let mut image_map: FxHashMap<&String, Vec<&Image>> = FxHashMap::default();
+
+    for image in images {
+        image_map
+            .entry(image.registry.as_ref().unwrap())
+            .or_default()
+            .push(image);
     }
-    let result_mutex: Mutex<Vec<(String, Option<bool>)>> = Mutex::new(Vec::new());
-    remote_images.par_iter().for_each(|image| {
-        let img = unsplit_image(&image.registry, &image.repository, &image.tag);
-        match &image.digest {
-            Some(d) => {
-                let r = d != image_map.get(&img).unwrap().as_ref().unwrap();
-                result_mutex.lock().unwrap().push((img, Some(r)))
+
+    // Retrieve an authentication token (if required) for each registry.
+    let mut tokens: FxHashMap<&String, Option<String>> = FxHashMap::default();
+    for registry in registries {
+        let credentials = config.authentication.get(registry);
+        match check_auth(registry, config, &client).await {
+            Some(auth_url) => {
+                let token = get_token(
+                    image_map.get(registry).unwrap(),
+                    &auth_url,
+                    &credentials,
+                    &client,
+                )
+                .await;
+                tokens.insert(registry, Some(token));
+            }
+            None => {
+                tokens.insert(registry, None);
             }
-            None => result_mutex.lock().unwrap().push((img, None)),
         }
-    });
-    let result = result_mutex.lock().unwrap().clone();
+    }
+
+    // Create a Vec to store futures so we can await them all at once.
+    let mut handles = Vec::new();
+    // Loop through images and get the latest digest for each
+    for image in images {
+        let token = tokens.get(&image.registry.as_ref().unwrap()).unwrap();
+        let future = get_latest_digest(image, token.as_ref(), config, &client);
+        handles.push(future);
+    }
+    // Await all the futures
+    let final_images = join_all(handles).await;
+
+    let mut result: Vec<(String, Option<bool>)> = Vec::with_capacity(images.len());
+    final_images
+        .iter()
+        .for_each(|image| match &image.remote_digest {
+            Some(digest) => {
+                let has_update = !image.local_digests.as_ref().unwrap().contains(digest);
+                result.push((image.reference.clone(), Some(has_update)))
+            }
+            None => result.push((image.reference.clone(), None)),
+        });
+
     result
 }
-
-#[cfg(feature = "cli")]
-pub async fn get_update(image: &str, socket: Option<String>, config: &JsonValue) -> Option<bool> {
-    let local_image = get_image_from_docker_daemon(socket, image).await;
-    let credentials = config["authentication"][&local_image.registry].clone().take_string().or(None);
-    let token = match check_auth(&local_image.registry, config) {
-        Some(auth_url) => get_token(vec![&local_image], &auth_url, &credentials),
-        None => String::new(),
-    };
-    let remote_image = match token.as_str() {
-        "" => get_latest_digest(&local_image, None, config),
-        _ => get_latest_digest(&local_image, Some(&token), config),
-    };
-    match &remote_image.digest {
-        Some(d) => Some(d != &local_image.digest.unwrap()),
-        None => None,
-    }
-}

src/config.rs

@@ -0,0 +1,130 @@
+use std::path::PathBuf;
+
+use rustc_hash::FxHashMap;
+
+use crate::error;
+
+const VALID_KEYS: [&str; 4] = ["authentication", "theme", "insecure_registries", "socket"];
+
+#[derive(Clone)]
+pub enum Theme {
+    Default,
+    Blue,
+}
+
+#[derive(Clone)]
+pub struct Config {
+    pub authentication: FxHashMap<String, String>,
+    pub theme: Theme,
+    pub insecure_registries: Vec<String>,
+    pub socket: Option<String>,
+}
+
+impl Config {
+    /// A stupid new function that exists just so calling `load` doesn't require a self argument
+    #[allow(clippy::new_without_default)]
+    pub fn new() -> Self {
+        Self {
+            authentication: FxHashMap::default(),
+            theme: Theme::Default,
+            insecure_registries: Vec::with_capacity(0),
+            socket: None
+        }
+    }
+    /// Reads the config from the file path provided and returns the parsed result.
+    pub fn load(&self, path: Option<PathBuf>) -> Self {
+        let raw_config = match &path {
+            Some(path) => std::fs::read_to_string(path),
+            None => Ok(String::from("{}")), // Empty config
+        };
+        if raw_config.is_err() {
+            panic!(
+                "Failed to read config file from {}. Are you sure the file exists?",
+                &path.unwrap().to_str().unwrap()
+            )
+        };
+        self.parse(&raw_config.unwrap()) // We can safely unwrap here
+    }
+    /// Parses and validates the config. The process is quite manual and I would rather use a library, but I don't want to grow the dependency tree, for a config as simple as this one.
+    /// Many of these checks are stupid, but we either validate the config properly, or we don't at all, so... this is the result. I _am not_ proud of this code.
+    pub fn parse(&self, raw_config: &str) -> Self {
+        let json = match json::parse(raw_config) {
+            Ok(v) => v,
+            Err(e) => panic!("Failed to parse config!\n{}", e),
+        };
+        // In the code, raw_<key> means the JsonValue from the parsed config, before it's validated.
+
+        // Authentication
+        let raw_authentication = &json["authentication"];
+        if !raw_authentication.is_null() && !raw_authentication.is_object() {
+            error!("Config key `authentication` must be an object!");
+        }
+        let mut authentication: FxHashMap<String, String> = FxHashMap::default();
+        raw_authentication.entries().for_each(|(registry, key)| {
+            if !key.is_string() {
+                error!("Config key `authentication.{}` must be a string!", registry);
+            }
+            authentication.insert(registry.to_string(), key.to_string());
+        });
+
+        // Theme
+        let raw_theme = &json["theme"];
+        if !raw_theme.is_null() && !raw_theme.is_string() {
+            error!("Config key `theme` must be a string!");
+        }
+        let theme: Theme = {
+            if raw_theme.is_null() {
+                Theme::Default
+            } else {
+                match raw_theme.as_str().unwrap() {
+                    "default" => Theme::Default,
+                    "blue" => Theme::Blue,
+                    _ => {
+                        error!("Config key `theme` must be one of: `default`, `blue`!");
+                    }
+                }
+            }
+        };
+
+        // Insecure registries
+        let raw_insecure_registries = &json["insecure_registries"];
+        if !raw_insecure_registries.is_null() && !raw_insecure_registries.is_array() {
+            error!("Config key `insecure_registries` must be an array!");
+        }
+        let insecure_registries: Vec<String> = raw_insecure_registries
+            .members()
+            .map(|registry| {
+                if !registry.is_string() {
+                    error!("Config key `insecure_registries` must only consist of strings!");
+                } else {
+                    registry.as_str().unwrap().to_owned()
+                }
+            })
+            .collect();
+
+        // Socket
+        let raw_socket = &json["socket"];
+        if !raw_socket.is_null() && !raw_socket.is_string() {
+            error!("Config key `socket` must be a string!");
+        }
+        let socket: Option<String> = if raw_socket.is_null() {
+            None
+        } else {
+            Some(raw_socket.to_string())
+        };
+
+        // Check for extra keys
+        json.entries().for_each(|(key, _)| {
+            if !VALID_KEYS.contains(&key) {
+                error!("Invalid key `{}`", key)
+            }
+        });
+
+        Self {
+            authentication,
+            theme,
+            insecure_registries,
+            socket,
+        }
+    }
+}

src/docker.rs

@@ -1,12 +1,8 @@
-use bollard::{
-    secret::ImageSummary,
-    ClientVersion, Docker,
-};
+use bollard::{models::ImageInspect, ClientVersion, Docker};
 
-#[cfg(feature = "cli")]
-use bollard::secret::ImageInspect;
+use futures::future::join_all;
 
-use crate::{error, image::Image, utils::split_image};
+use crate::{error, image::Image, config::Config};
 
 fn create_docker_client(socket: Option<String>) -> Docker {
     let client: Result<Docker, bollard::errors::Error> = match socket {
@@ -27,58 +23,79 @@ fn create_docker_client(socket: Option<String>) -> Docker {
     }
 }
 
-pub async fn get_images_from_docker_daemon(socket: Option<String>) -> Vec<Image> {
-    let client: Docker = create_docker_client(socket);
-    let images: Vec<ImageSummary> = match client.list_images::<String>(None).await {
-        Ok(images) => images,
-        Err(e) => {
-            error!("Failed to retrieve list of images available!\n{}", e)
-        }
-    };
-    let mut result: Vec<Image> = Vec::new();
-    for image in images {
-        if !image.repo_tags.is_empty() && image.repo_digests.len() == 1 {
-            for t in &image.repo_tags {
-                let (registry, repository, tag) = split_image(t);
-                result.push(Image {
-                    registry,
-                    repository,
-                    tag,
-                    digest: Some(
-                        image.repo_digests[0]
-                            .clone()
-                            .split('@')
-                            .collect::<Vec<&str>>()[1]
-                            .to_string(),
-                    ),
-                });
+/// Retrieves images from Docker daemon. If `references` is Some, return only the images whose references match the ones specified.
+pub async fn get_images_from_docker_daemon(
+    config: &Config,
+    references: &Option<Vec<String>>,
+) -> Vec<Image> {
+    let client: Docker = create_docker_client(config.socket.clone());
+    // If https://github.com/moby/moby/issues/48612 is fixed, this code should be faster. For now a workaround will be used.
+    // let mut filters = HashMap::with_capacity(1);
+    // match references {
+    //     Some(refs) => {
+    //         filters.insert("reference".to_string(), refs.clone());
+    //     }
+    //     None => (),
+    // }
+    // let images: Vec<ImageSummary> = match client
+    //     .list_images::<String>(Some(ListImagesOptions {
+    //         filters,
+    //         ..Default::default()
+    //     }))
+    //     .await
+    // {
+    //     Ok(images) => images,
+    //     Err(e) => {
+    //         error!("Failed to retrieve list of images available!\n{}", e)
+    //     }
+    // };
+    // let mut handles = Vec::new();
+    // for image in images {
+    //     handles.push(Image::from(image, options))
+    // }
+    // join_all(handles)
+    //     .await
+    //     .iter()
+    //     .filter_map(|img| img.clone())
+    //     .collect()
+    match references {
+        Some(refs) => {
+            let mut inspect_handles = Vec::with_capacity(refs.len());
+            for reference in refs {
+                inspect_handles.push(client.inspect_image(reference));
             }
-        }
-    }
-    result
-}
-
-#[cfg(feature = "cli")]
-pub async fn get_image_from_docker_daemon(socket: Option<String>, name: &str) -> Image {
-    let client: Docker = create_docker_client(socket);
-    let image: ImageInspect = match client.inspect_image(name).await {
-        Ok(i) => i,
-        Err(e) => error!("Failed to retrieve image {} from daemon\n{}", name, e),
-    };
-    match image.repo_tags {
-        Some(_) => (),
-        None => error!("Image has no tags"), // I think this is actually unreachable
-    }
-    match image.repo_digests {
-        Some(d) => {
-            let (registry, repository, tag) = split_image(&image.repo_tags.unwrap()[0]);
-            Image {
-                registry,
-                repository,
-                tag,
-                digest: Some(d[0].clone().split('@').collect::<Vec<&str>>()[1].to_string()),
+            let inspects: Vec<ImageInspect> = join_all(inspect_handles)
+                .await
+                .iter()
+                .filter(|inspect| inspect.is_ok())
+                .map(|inspect| inspect.as_ref().unwrap().clone())
+                .collect();
+            let mut image_handles = Vec::with_capacity(inspects.len());
+            for inspect in inspects {
+                image_handles.push(Image::from_inspect(inspect.clone()));
             }
+            join_all(image_handles)
+                .await
+                .iter()
+                .filter_map(|img| img.clone())
+                .collect()
+        }
+        None => {
+            let images = match client.list_images::<String>(None).await {
+                Ok(images) => images,
+                Err(e) => {
+                    error!("Failed to retrieve list of images available!\n{}", e)
+                }
+            };
+            let mut handles = Vec::new();
+            for image in images {
+                handles.push(Image::from_summary(image))
+            }
+            join_all(handles)
+                .await
+                .iter()
+                .filter_map(|img| img.clone())
+                .collect()
         }
-        None => error!("No digests found for image {}", name),
     }
 }

src/formatting.rs

@@ -1,7 +1,6 @@
 use std::time::Duration;
 
 use indicatif::{ProgressBar, ProgressStyle};
-use json::object;
 
 use crate::utils::{sort_update_vec, to_json};
 
@@ -33,7 +32,7 @@ pub fn print_updates(updates: &[(String, Option<bool>)], icons: &bool) {
         let dynamic_space =
             " ".repeat(term_width - description.len() - icon.len() - update.0.len());
         println!(
-            "{}{}{}{}{}",
+            "{}{}{}{}{}\u{001b}[0m",
             color, icon, update.0, dynamic_space, description
         );
     }
@@ -43,30 +42,12 @@ pub fn print_raw_updates(updates: &[(String, Option<bool>)]) {
     println!("{}", json::stringify(to_json(updates)));
 }
 
-pub fn print_update(name: &str, has_update: &Option<bool>) {
-    let color = match has_update {
-        Some(true) => "\u{001b}[38;5;12m",
-        Some(false) => "\u{001b}[38;5;2m",
-        None => "\u{001b}[38;5;8m",
-    };
-    let description = match has_update {
-        Some(true) => "has an update available",
-        Some(false) => "is up to date",
-        None => "wasn't found",
-    };
-    println!("{}{} {}", color, name, description);
-}
-
-pub fn print_raw_update(name: &str, has_update: &Option<bool>) {
-    let result = object! {images: {[name]: *has_update}} ;
-    println!("{}", result);
-}
-
 pub struct Spinner {
     spinner: ProgressBar,
 }
 
 impl Spinner {
+    #[allow(clippy::new_without_default)]
     pub fn new() -> Spinner {
         let spinner = ProgressBar::new_spinner();
         let style: &[&str] = &["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];

src/image.rs

@@ -1,7 +1,119 @@
+use bollard::models::{ImageInspect, ImageSummary};
+use once_cell::sync::Lazy;
+use regex::Regex;
+
+use crate::error;
+
+/// Image struct that contains all information that may be needed by a function.
+/// It's designed to be passed around between functions
 #[derive(Clone, Debug)]
 pub struct Image {
-    pub registry: String,
-    pub repository: String,
-    pub tag: String,
-    pub digest: Option<String>,
+    pub reference: String,
+    pub registry: Option<String>,
+    pub repository: Option<String>,
+    pub tag: Option<String>,
+    pub local_digests: Option<Vec<String>>,
+    pub remote_digest: Option<String>,
 }
+
+impl Image {
+    /// Creates an populates the fields of an Image object based on the ImageSummary from the Docker daemon
+    pub async fn from_summary(image: ImageSummary) -> Option<Self> {
+        if !image.repo_tags.is_empty() && !image.repo_digests.is_empty() {
+            let mut image = Image {
+                reference: image.repo_tags[0].clone(),
+                registry: None,
+                repository: None,
+                tag: None,
+                local_digests: Some(
+                    image
+                        .repo_digests
+                        .clone()
+                        .iter()
+                        .map(|digest| digest.split('@').collect::<Vec<&str>>()[1].to_string())
+                        .collect(),
+                ),
+                remote_digest: None,
+            };
+            let (registry, repository, tag) = image.split();
+            image.registry = Some(registry);
+            image.repository = Some(repository);
+            image.tag = Some(tag);
+
+            return Some(image);
+        }
+        None
+    }
+
+    pub async fn from_inspect(image: ImageInspect) -> Option<Self> {
+        if image.repo_tags.is_some()
+            && !image.repo_tags.as_ref().unwrap().is_empty()
+            && image.repo_digests.is_some()
+            && !image.repo_digests.as_ref().unwrap().is_empty()
+        {
+            let mut image = Image {
+                reference: image.repo_tags.as_ref().unwrap()[0].clone(),
+                registry: None,
+                repository: None,
+                tag: None,
+                local_digests: Some(
+                    image
+                        .repo_digests
+                        .unwrap()
+                        .clone()
+                        .iter()
+                        .map(|digest| digest.split('@').collect::<Vec<&str>>()[1].to_string())
+                        .collect(),
+                ),
+                remote_digest: None,
+            };
+            let (registry, repository, tag) = image.split();
+            image.registry = Some(registry);
+            image.repository = Some(repository);
+            image.tag = Some(tag);
+
+            return Some(image);
+        }
+        None
+    }
+
+    /// Takes an image and splits it into registry, repository and tag, based on the reference.
+    /// For example, `ghcr.io/sergi0g/cup:latest` becomes `['ghcr.io', 'sergi0g/cup', 'latest']`.
+    pub fn split(&self) -> (String, String, String) {
+        match RE.captures(&self.reference) {
+            Some(c) => {
+                let registry = match c.name("registry") {
+                    Some(registry) => registry.as_str().to_owned(),
+                    None => String::from("registry-1.docker.io"),
+                };
+                return (
+                    registry.clone(),
+                    match c.name("repository") {
+                        Some(repository) => {
+                            let repo = repository.as_str().to_owned();
+                            if !repo.contains('/') && registry == "registry-1.docker.io" {
+                                format!("library/{}", repo)
+                            } else {
+                                repo
+                            }
+                        }
+                        None => error!("Failed to parse image {}", &self.reference),
+                    },
+                    match c.name("tag") {
+                        Some(tag) => tag.as_str().to_owned(),
+                        None => String::from("latest"),
+                    },
+                );
+            }
+            None => error!("Failed to parse image {}", &self.reference),
+        }
+    }
+}
+
+/// Regex to match Docker image references against, so registry, repository and tag can be extracted.
+static RE: Lazy<Regex> = Lazy::new(|| {
+    Regex::new(
+        r#"^(?P<name>(?:(?P<registry>(?:(?:localhost|[\w-]+(?:\.[\w-]+)+)(?::\d+)?)|[\w]+:\d+)/)?(?P<repository>[a-z0-9_.-]+(?:/[a-z0-9_.-]+)*))(?::(?P<tag>[\w][\w.-]{0,127}))?$"#, // From https://regex101.com/r/nmSDPA/1
+    )
+    .unwrap()
+});

src/main.rs

@@ -1,22 +1,24 @@
+use check::get_updates;
+use chrono::Local;
 use clap::{Parser, Subcommand};
+use config::Config;
+use docker::get_images_from_docker_daemon;
 #[cfg(feature = "cli")]
-use formatting::{print_raw_update, print_raw_updates, print_update, print_updates, Spinner};
-#[cfg(feature = "cli")]
-use check::{get_all_updates, get_update};
+use formatting::{print_raw_updates, print_updates, Spinner};
 #[cfg(feature = "server")]
 use server::serve;
 use std::path::PathBuf;
-use utils::load_config;
 
 pub mod check;
+pub mod config;
 pub mod docker;
-pub mod image;
-pub mod registry;
-pub mod utils;
 #[cfg(feature = "cli")]
 pub mod formatting;
+pub mod image;
+pub mod registry;
 #[cfg(feature = "server")]
 pub mod server;
+pub mod utils;
 
 #[derive(Parser)]
 #[command(version, about, long_about = None)]
@@ -33,8 +35,8 @@ struct Cli {
 enum Commands {
     #[cfg(feature = "cli")]
     Check {
-        #[arg(default_value = None)]
-        image: Option<String>,
+        #[arg(name = "Images", default_value = None)]
+        references: Option<Vec<String>>,
         #[arg(short, long, default_value_t = false, help = "Enable icons")]
         icons: bool,
         #[arg(
@@ -64,32 +66,38 @@ async fn main() {
         "" => None,
         path => Some(PathBuf::from(path)),
     };
-    let config = load_config(cfg_path);
+    let mut config = Config::new().load(cfg_path);
+    match cli.socket {
+        Some(socket) => config.socket = Some(socket),
+        None => ()
+    }
     match &cli.command {
         #[cfg(feature = "cli")]
-        Some(Commands::Check { image, icons, raw }) => match image {
-            Some(name) => {
-                let has_update = get_update(name, cli.socket, &config).await;
-                match raw {
-                    true => print_raw_update(name, &has_update),
-                    false => print_update(name, &has_update),
-                };
-            }
-            None => {
-                match raw {
-                    true => print_raw_updates(&get_all_updates(cli.socket, &config).await),
-                    false => {
-                        let spinner = Spinner::new();
-                        let updates = get_all_updates(cli.socket, &config).await;
-                        spinner.succeed();
-                        print_updates(&updates, icons);
-                    }
-                };
-            }
-        },
+        Some(Commands::Check {
+            references,
+            icons,
+            raw,
+        }) => {
+            let start = Local::now().timestamp_millis();
+            let images = get_images_from_docker_daemon(&config, references).await;
+            match raw {
+                true => {
+                    let updates = get_updates(&images, &config).await;
+                    print_raw_updates(&updates);
+                }
+                false => {
+                    let spinner = Spinner::new();
+                    let updates = get_updates(&images, &config).await;
+                    spinner.succeed();
+                    let end = Local::now().timestamp_millis();
+                    print_updates(&updates, icons);
+                    info!("✨ Checked {} images in {}ms", updates.len(), end - start);
+                }
+            };
+        }
         #[cfg(feature = "server")]
         Some(Commands::Serve { port }) => {
-            let _ = serve(port, cli.socket, config).await;
+            let _ = serve(port, &config).await;
         }
         None => (),
     }

src/registry.rs

@@ -1,144 +1,154 @@
-use std::sync::Mutex;
-
 use json::JsonValue;
-use rayon::iter::{IntoParallelRefIterator, ParallelIterator};
-use ureq::{Error, ErrorKind};
 
 use http_auth::parse_challenges;
+use reqwest_middleware::ClientWithMiddleware;
 
-use crate::{error, image::Image, warn};
+use crate::{config::Config, error, image::Image, warn};
 
-pub fn check_auth(registry: &str, config: &JsonValue) -> Option<String> {
-    let protocol = if config["insecure_registries"].contains(registry) { "http" } else { "https" };
-    let response = ureq::get(&format!("{}://{}/v2/", protocol, registry)).call();
+pub async fn check_auth(
+    registry: &str,
+    config: &Config,
+    client: &ClientWithMiddleware,
+) -> Option<String> {
+    let protocol = if config.insecure_registries.contains(&registry.to_string()) {
+        "http"
+    } else {
+        "https"
+    };
+    let response = client
+        .get(format!("{}://{}/v2/", protocol, registry))
+        .send()
+        .await;
     match response {
-        Ok(_) => None,
-        Err(Error::Status(401, response)) => match response.header("www-authenticate") {
-            Some(challenge) => Some(parse_www_authenticate(challenge)),
-            None => error!("Unauthorized to access registry {} and no way to authenticate was provided", registry),
-        },
-        Err(Error::Transport(error)) => {
-            match error.kind() {
-                ErrorKind::Dns => {
-                    warn!("Failed to lookup the IP of the registry, retrying.");
-                    return check_auth(registry, config)
-                }, // If something goes really wrong, this can get stuck in a loop
-                ErrorKind::ConnectionFailed => {
-                    warn!("Connection probably timed out, retrying.");
-                    return check_auth(registry, config)
-                }, // Same here
-                _ => error!("{}", error)
-            }
-        },
-        Err(e) => error!("{}", e),
-    }
-}
-
-pub fn get_latest_digest(image: &Image, token: Option<&String>, config: &JsonValue) -> Image {
-    let protocol = if config["insecure_registries"].contains(json::JsonValue::from(image.registry.clone())) { "http" } else { "https" };
-    let mut request = ureq::head(&format!(
-        "{}://{}/v2/{}/manifests/{}",
-        protocol, &image.registry, &image.repository, &image.tag
-    ));
-    if let Some(t) = token {
-        request = request.set("Authorization", &format!("Bearer {}", t));
-    }
-    let raw_response = match request
-        .set("Accept", "application/vnd.docker.distribution.manifest.list.v2+json, application/vnd.docker.distribution.manifest.v2+json, application/vnd.oci.image.index.v1+json")
-        .call()
-    {
-        Ok(response) => response,
-        Err(Error::Status(401, response)) => {
-            if token.is_some() {
-                warn!("Failed to authenticate to registry {} with given token!\n{}", &image.registry, token.unwrap());
-                return Image { digest: None, ..image.clone() }
+        Ok(r) => {
+            let status = r.status().as_u16();
+            if status == 401 {
+                match r.headers().get("www-authenticate") {
+                    Some(challenge) => Some(parse_www_authenticate(challenge.to_str().unwrap())),
+                    None => error!(
+                        "Unauthorized to access registry {} and no way to authenticate was provided",
+                        registry
+                    ),
+                }
+            } else if status == 200 {
+                None
             } else {
-                return get_latest_digest(
-                    image,
-                    Some(&get_token(
-                        vec![image],
-                        &parse_www_authenticate(response.header("www-authenticate").unwrap()),
-                        &None // I think?
-                    )),
-                    config
+                warn!(
+                    "Received unexpected status code {}\nResponse: {}",
+                    status,
+                    r.text().await.unwrap()
                 );
+                None
             }
         }
-        Err(Error::Status(_, _)) => {
-            return Image {
-                digest: None,
-                ..image.clone()
+        Err(e) => {
+            if e.is_connect() {
+                warn!("Connection to registry {} failed.", &registry);
+                None
+            } else {
+                error!("Unexpected error: {}", e.to_string())
             }
-        },
-        Err(Error::Transport(error)) => {
-            match error.kind() {
-                ErrorKind::Dns => {
-                    warn!("Failed to lookup the IP of the registry, retrying.");
-                    return get_latest_digest(image, token, config)
-                }, // If something goes really wrong, this can get stuck in a loop
-                ErrorKind::ConnectionFailed => {
-                    warn!("Connection probably timed out, retrying.");
-                    return get_latest_digest(image, token, config)
-                }, // Same here
-                _ => error!("Failed to retrieve image digest\n{}!", error)
-            }
-        },
-    };
-    match raw_response.header("docker-content-digest") {
-        Some(digest) => Image {
-            digest: Some(digest.to_string()),
-            ..image.clone()
-        },
-        None => error!("Server returned invalid response! No docker-content-digest!"),
+        }
     }
 }
 
-pub fn get_latest_digests(images: Vec<&Image>, token: Option<&String>, config: &JsonValue) -> Vec<Image> {
-    let result: Mutex<Vec<Image>> = Mutex::new(Vec::new());
-    images.par_iter().for_each(|&image| {
-        let digest = get_latest_digest(image, token, config).digest;
-        result.lock().unwrap().push(Image {
-            digest,
-            ..image.clone()
-        });
-    });
-    let r = result.lock().unwrap().clone();
-    r
-}
-
-pub fn get_token(images: Vec<&Image>, auth_url: &str, credentials: &Option<String>) -> String {
-    let mut final_url = auth_url.to_owned();
-    for image in &images {
-        final_url = format!("{}&scope=repository:{}:pull", final_url, image.repository);
-    }
-    let mut base_request = ureq::get(&final_url).set("Accept", "application/vnd.oci.image.index.v1+json"); // Seems to be unnecesarry. Will probably remove in the future
-    base_request = match credentials {
-        Some(creds) => base_request.set("Authorization", &format!("Basic {}", creds)),
-        None => base_request
-    };
-    let raw_response = match base_request.call()
+pub async fn get_latest_digest(
+    image: &Image,
+    token: Option<&String>,
+    config: &Config,
+    client: &ClientWithMiddleware,
+) -> Image {
+    let protocol = if config.insecure_registries.contains(&image.registry.clone().unwrap())
     {
-        Ok(response) => match response.into_string() {
+        "http"
+    } else {
+        "https"
+    };
+    let mut request = client.head(format!(
+        "{}://{}/v2/{}/manifests/{}",
+        protocol,
+        &image.registry.as_ref().unwrap(),
+        &image.repository.as_ref().unwrap(),
+        &image.tag.as_ref().unwrap()
+    ));
+    if let Some(t) = token {
+        request = request.header("Authorization", &format!("Bearer {}", t));
+    }
+    let raw_response = match request
+        .header("Accept", "application/vnd.docker.distribution.manifest.list.v2+json, application/vnd.docker.distribution.manifest.v2+json, application/vnd.oci.image.index.v1+json")
+        .send().await
+    {
+        Ok(response) => {
+            let status = response.status();
+            if status == 401 {
+                if token.is_some() {
+                    warn!("Failed to authenticate to registry {} with given token!\n{}", &image.registry.as_ref().unwrap(), token.unwrap());
+                } else {
+                    warn!("Registry requires authentication");
+                }
+                return Image { remote_digest: None, ..image.clone() }
+            } else if status == 404 {
+                warn!("Image {:?} not found", &image);
+                return Image { remote_digest: None, ..image.clone() }
+            } else {
+                response
+            }
+        },
+        Err(e) => {
+            if e.is_connect() {
+                warn!("Connection to registry failed.");
+                return Image { remote_digest: None, ..image.clone() }
+            } else {
+                error!("Unexpected error: {}", e.to_string())
+            }
+        },
+    };
+    match raw_response.headers().get("docker-content-digest") {
+        Some(digest) => Image {
+            remote_digest: Some(digest.to_str().unwrap().to_string()),
+            ..image.clone()
+        },
+        None => error!(
+            "Server returned invalid response! No docker-content-digest!\n{:#?}",
+            raw_response
+        ),
+    }
+}
+
+pub async fn get_token(
+    images: &Vec<&Image>,
+    auth_url: &str,
+    credentials: &Option<&String>,
+    client: &ClientWithMiddleware,
+) -> String {
+    let mut final_url = auth_url.to_owned();
+    for image in images {
+        final_url = format!(
+            "{}&scope=repository:{}:pull",
+            final_url,
+            image.repository.as_ref().unwrap()
+        );
+    }
+    let mut base_request = client
+        .get(&final_url)
+        .header("Accept", "application/vnd.oci.image.index.v1+json"); // Seems to be unnecessary. Will probably remove in the future
+    base_request = match credentials {
+        Some(creds) => base_request.header("Authorization", &format!("Basic {}", creds)),
+        None => base_request,
+    };
+    let raw_response = match base_request.send().await {
+        Ok(response) => match response.text().await {
             Ok(res) => res,
             Err(e) => {
                 error!("Failed to parse response into string!\n{}", e)
             }
         },
-        Err(Error::Transport(error)) => {
-            match error.kind() {
-                ErrorKind::Dns => {
-                    warn!("Failed to lookup the IP of the registry, retrying.");
-                    return get_token(images, auth_url, credentials)
-                }, // If something goes really wrong, this can get stuck in a loop
-                ErrorKind::ConnectionFailed => {
-                    warn!("Connection probably timed out, retrying.");
-                    return get_token(images, auth_url, credentials)
-                }, // Same here
-                _ => error!("Token request failed\n{}!", error)
-            }
-        },
         Err(e) => {
-            error!("Token request failed!\n{}", e)
+            if e.is_connect() {
+                error!("Connection to registry failed.");
+            } else {
+                error!("Token request failed!\n{}", e.to_string())
+            }
         }
     };
     let parsed_token_response: JsonValue = match json::parse(&raw_response) {

src/server.rs

@@ -6,7 +6,7 @@ use liquid::{object, Object};
 use tokio::sync::Mutex;
 use xitca_web::{
     body::ResponseBody,
-    handler::{handler_service, state::StateRef},
+    handler::{handler_service, path::PathRef, state::StateRef},
     http::WebResponse,
     middleware::Logger,
     route::get,
@@ -14,28 +14,26 @@ use xitca_web::{
 };
 
 use crate::{
-    check::get_all_updates,
-    error,
-    utils::{sort_update_vec, to_json},
+    check::get_updates, config::{Config, Theme}, docker::get_images_from_docker_daemon, info, utils::{sort_update_vec, to_json}
 };
 
-const RAW_TEMPLATE: &str = include_str!("static/template.liquid");
-const STYLE: &str = include_str!("static/index.css");
+const HTML: &str = include_str!("static/index.html");
+const JS: &str = include_str!("static/assets/index.js");
+const CSS: &str = include_str!("static/assets/index.css");
 const FAVICON_ICO: &[u8] = include_bytes!("static/favicon.ico");
 const FAVICON_SVG: &[u8] = include_bytes!("static/favicon.svg");
 const APPLE_TOUCH_ICON: &[u8] = include_bytes!("static/apple-touch-icon.png");
 
-pub async fn serve(port: &u16, socket: Option<String>, config: JsonValue) -> std::io::Result<()> {
-    let mut data = ServerData::new(socket, config).await;
-    data.refresh().await;
+pub async fn serve(port: &u16, config: &Config) -> std::io::Result<()> {
+    info!("Starting server, please wait...");
+    let data = ServerData::new(config).await;
+    info!("Ready to start!");
     App::new()
         .with_state(Arc::new(Mutex::new(data)))
-        .at("/", get(handler_service(home)))
+        .at("/", get(handler_service(_static)))
         .at("/json", get(handler_service(json)))
         .at("/refresh", get(handler_service(refresh)))
-        .at("/favicon.ico", handler_service(favicon_ico)) // These aren't pretty but this is xitca-web...
-        .at("/favicon.svg", handler_service(favicon_svg))
-        .at("/apple-touch-icon.png", handler_service(apple_touch_icon))
+        .at("/*", get(handler_service(_static)))
         .enclosed(Logger::new())
         .serve()
         .bind(format!("0.0.0.0:{}", port))?
@@ -43,14 +41,46 @@ pub async fn serve(port: &u16, socket: Option<String>, config: JsonValue) -> std
         .wait()
 }
 
-async fn home(data: StateRef<'_, Arc<Mutex<ServerData>>>) -> WebResponse {
-    WebResponse::new(ResponseBody::from(data.lock().await.template.clone()))
+async fn _static(data: StateRef<'_, Arc<Mutex<ServerData>>>, path: PathRef<'_>) -> WebResponse {
+    match path.0 {
+        "/" => WebResponse::builder()
+            .header("Content-Type", "text/html")
+            .body(ResponseBody::from(data.lock().await.template.clone()))
+            .unwrap(),
+        "/assets/index.js" => WebResponse::builder()
+            .header("Content-Type", "text/javascript")
+            .body(ResponseBody::from(JS.replace(
+                "=\"neutral\"",
+                &format!("=\"{}\"", data.lock().await.theme),
+            )))
+            .unwrap(),
+        "/assets/index.css" => WebResponse::builder()
+            .header("Content-Type", "text/css")
+            .body(ResponseBody::from(CSS))
+            .unwrap(),
+        "/favicon.ico" => WebResponse::builder()
+            .header("Content-Type", "image/vnd.microsoft.icon")
+            .body(ResponseBody::from(FAVICON_ICO))
+            .unwrap(),
+        "/favicon.svg" => WebResponse::builder()
+            .header("Content-Type", "image/svg+xml")
+            .body(ResponseBody::from(FAVICON_SVG))
+            .unwrap(),
+        "/apple-touch-icon.png" => WebResponse::builder()
+            .header("Content-Type", "image/png")
+            .body(ResponseBody::from(APPLE_TOUCH_ICON))
+            .unwrap(),
+        _ => WebResponse::builder()
+            .status(404)
+            .body(ResponseBody::from("Not found"))
+            .unwrap(),
+    }
 }
 
 async fn json(data: StateRef<'_, Arc<Mutex<ServerData>>>) -> WebResponse {
-    WebResponse::new(ResponseBody::from(
-        json::stringify(data.lock().await.json.clone())
-    ))
+    WebResponse::new(ResponseBody::from(json::stringify(
+        data.lock().await.json.clone(),
+    )))
 }
 
 async fn refresh(data: StateRef<'_, Arc<Mutex<ServerData>>>) -> WebResponse {
@@ -58,48 +88,43 @@ async fn refresh(data: StateRef<'_, Arc<Mutex<ServerData>>>) -> WebResponse {
     WebResponse::new(ResponseBody::from("OK"))
 }
 
-async fn favicon_ico() -> WebResponse {
-    WebResponse::new(ResponseBody::from(FAVICON_ICO))
-}
-
-async fn favicon_svg() -> WebResponse {
-    WebResponse::new(ResponseBody::from(FAVICON_SVG))
-}
-
-async fn apple_touch_icon() -> WebResponse {
-    WebResponse::new(ResponseBody::from(APPLE_TOUCH_ICON))
-}
-
 struct ServerData {
     template: String,
     raw_updates: Vec<(String, Option<bool>)>,
     json: JsonValue,
-    socket: Option<String>,
-    config: JsonValue,
+    config: Config,
+    theme: &'static str,
 }
 
 impl ServerData {
-    async fn new(socket: Option<String>, config: JsonValue) -> Self {
+    async fn new(config: &Config) -> Self {
         let mut s = Self {
-            socket,
+            config: config.clone(),
             template: String::new(),
             json: json::object! {
                 metrics: json::object! {},
                 images: json::object! {},
             },
             raw_updates: Vec::new(),
-            config,
+            theme: "neutral",
         };
         s.refresh().await;
         s
     }
     async fn refresh(&mut self) {
-        let updates = sort_update_vec(&get_all_updates(self.socket.clone(), &self.config["authentication"]).await);
+        let start = Local::now().timestamp_millis();
+        if !self.raw_updates.is_empty() {
+            info!("Refreshing data");
+        }
+        let images = get_images_from_docker_daemon(&self.config, &None).await;
+        let updates = sort_update_vec(&get_updates(&images, &self.config).await);
+        let end = Local::now().timestamp_millis();
+        info!("✨ Checked {} images in {}ms", updates.len(), end - start);
         self.raw_updates = updates;
         let template = liquid::ParserBuilder::with_stdlib()
             .build()
             .unwrap()
-            .parse(RAW_TEMPLATE)
+            .parse(HTML)
             .unwrap();
         let images = self
             .raw_updates
@@ -110,24 +135,20 @@ impl ServerData {
             })
             .collect::<Vec<Object>>();
         self.json = to_json(&self.raw_updates);
-        let last_updated = Local::now().format("%Y-%m-%d %H:%M:%S");
-        let theme = match &self.config["theme"].as_str() {
-            Some(t) => match *t {
-                "default" => "neutral",
-                "blue" => "gray",
-                _ => error!(
-                    "Invalid theme {} specified! Please choose between 'default' and 'blue'",
-                    t
-                ),
-            },
-            None => "neutral",
+        let last_updated = Local::now();
+        self.json["last_updated"] = last_updated
+            .to_rfc3339_opts(chrono::SecondsFormat::Secs, true)
+            .to_string()
+            .into();
+        self.theme = match &self.config.theme {
+            Theme::Default => "neutral",
+            Theme::Blue => "gray"
         };
         let globals = object!({
             "metrics": [{"name": "Monitored images", "value": self.json["metrics"]["monitored_images"].as_usize()}, {"name": "Up to date", "value": self.json["metrics"]["up_to_date"].as_usize()}, {"name": "Updates available", "value": self.json["metrics"]["update_available"].as_usize()}, {"name": "Unknown", "value": self.json["metrics"]["unknown"].as_usize()}],
             "images": images,
-            "style": STYLE,
-            "last_updated": last_updated.to_string(),
-            "theme": theme
+            "last_updated": last_updated.format("%Y-%m-%d %H:%M:%S").to_string(),
+            "theme": &self.theme
         });
         self.template = template.render(&globals).unwrap();
     }

src/static/template.liquid

@@ -1,294 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf8">
-    <meta name="theme-color" content="#ffffff">
-    <link rel="icon" type="image/svg+xml" href="favicon.svg">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link rel="apple-touch-icon" href="apple-touch-icon.png">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Cup</title>
-    <style>
-      {{ style }}
-    </style>
-    <style>
-      /* Kinda hacky, but thank you https://geary.co/internal-borders-css-grid/ */
-      .gi {
-        position: relative;
-        height: 100%;
-      }
-
-      .gi::before,
-      .gi::after {
-        content: '';
-        position: absolute;
-        z-index: 1;
-        {% if theme == "neutral" %}
-        background-color: #e5e5e5;
-        {% elsif theme == "gray" %}
-        background-color: #e5e7eb
-        {% endif %}
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .gi::before,
-        .gi::after {
-          {% if theme == "neutral" %}
-          background-color: #262626;
-          {% elsif theme == "gray" %}
-          background-color: #1f2937
-          {% endif %}
-        }
-      }
-
-      .gi::before {
-        inline-size: 1px;
-        block-size: 100vh;
-        inset-inline-start: -0.125rem;
-      }
-
-      .gi::after {
-        inline-size: 100vw;
-        block-size: 1px;
-        inset-inline-start: 0;
-        inset-block-start: -0.12rem;
-      }
-
-      @supports (scrollbar-color: auto) {
-        html {
-          scrollbar-color: #707070 #343840;
-        }
-      }
-
-      @supports selector(::-webkit-scrollbar) {
-        html::-webkit-scrollbar {
-          width: 10px;
-        }
-
-        html::-webkit-scrollbar-track {
-          background: #343840;
-        }
-
-        html::-webkit-scrollbar-thumb {
-          background: #707070;
-          border-radius: 0.375rem;
-        }
-
-        html::-webkit-scrollbar-thumb:hover {
-          background: #b5b5b5;
-        }
-      }
-    </style>
-    <script>
-      function refresh(event) {
-        var button = event.currentTarget;
-        button.disabled = true;
-
-        let request = new XMLHttpRequest();
-        request.onload = function () {
-          if (request.status === 200) {
-            window.location.reload();
-          }
-        };
-        request.open('GET', `${window.location.origin}/refresh`);
-        request.send();
-      }
-    </script>
-  </head>
-  <body>
-    <div class="flex justify-center items-center min-h-screen bg-{{ theme }}-50 dark:bg-{{ theme }}-950">
-      <div class="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
-        <div class="max-w-[48rem] mx-auto h-full my-8">
-          <div class="flex items-center gap-1">
-            <h1 class="text-5xl lg:text-6xl font-bold dark:text-white">Cup</h1>
-            <svg
-              version="1.1"
-              id="Layer_2"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              x="0px"
-              y="0px"
-              viewBox="0 0 128 128"
-              style="enable-background:new 0 0 128 128;"
-              xml:space="preserve"
-              class="size-16"
-            >
-              <path style="fill:#A6CFD6;" d="M65.12,17.55c-17.6-0.53-34.75,5.6-34.83,14.36c-0.04,5.2,1.37,18.6,3.62,48.68s2.25,33.58,3.5,34.95
-                c1.25,1.37,10.02,8.8,25.75,8.8s25.93-6.43,26.93-8.05c0.48-0.78,1.83-17.89,3.5-37.07c1.81-20.84,3.91-43.9,3.99-45.06
-                C97.82,30.66,94.2,18.43,65.12,17.55z"/>
-              <path style="fill:#DCEDF6;" d="M41.4,45.29c-0.12,0.62,1.23,24.16,2.32,27.94c1.99,6.92,9.29,7.38,10.23,4.16
-                c0.9-3.07-0.38-29.29-0.38-29.29s-3.66-0.3-6.43-0.84C44,46.63,41.4,45.29,41.4,45.29z"/>
-              <path style="fill:#6CA4AE;" d="M33.74,32.61c-0.26,8.83,20.02,12.28,30.19,12.22c13.56-0.09,29.48-4.29,29.8-11.7
-                S79.53,21.1,63.35,21.1C49.6,21.1,33.96,25.19,33.74,32.61z"/>
-              <path style="fill:#DC0D27;" d="M84.85,13.1c-0.58,0.64-9.67,30.75-9.67,30.75s2.01-0.33,4-0.79c2.63-0.61,3.76-1.06,3.76-1.06
-                s7.19-22.19,7.64-23.09c0.45-0.9,21.61-7.61,22.31-7.93c0.7-0.32,1.39-0.4,1.46-0.78c0.06-0.38-2.34-6.73-3.11-6.73
-                C110.47,3.47,86.08,11.74,84.85,13.1z"/>
-              <path style="fill:#8A1F0F;" d="M110.55,7.79c1.04,2.73,2.8,3.09,3.55,2.77c0.45-0.19,1.25-1.84,0.01-4.47
-                c-0.99-2.09-2.17-2.74-2.93-2.61C110.42,3.6,109.69,5.53,110.55,7.79z"/>
-              <g>
-                <path style="fill:#8A1F0F;" d="M91.94,18.34c-0.22,0-0.44-0.11-0.58-0.3l-3.99-5.77c-0.22-0.32-0.14-0.75,0.18-0.97
-                  c0.32-0.22,0.76-0.14,0.97,0.18l3.99,5.77c0.22,0.32,0.14,0.75-0.18,0.97C92.21,18.3,92.07,18.34,91.94,18.34z"/>
-              </g>
-              <g>
-                <path style="fill:#8A1F0F;" d="M90.28,19.43c-0.18,0-0.35-0.07-0.49-0.2l-5.26-5.12c-0.28-0.27-0.28-0.71-0.01-0.99
-                  c0.27-0.28,0.71-0.28,0.99-0.01l5.26,5.12c0.28,0.27,0.28,0.71,0.01,0.99C90.64,19.36,90.46,19.43,90.28,19.43z"/>
-              </g>
-              <g>
-                <path style="fill:#8A1F0F;" d="M89.35,21.22c-0.12,0-0.25-0.03-0.36-0.1l-5.6-3.39c-0.33-0.2-0.44-0.63-0.24-0.96
-                  c0.2-0.33,0.63-0.44,0.96-0.24l5.6,3.39c0.33,0.2,0.44,0.63,0.24,0.96C89.82,21.1,89.59,21.22,89.35,21.22z"/>
-              </g>
-            </svg>
-          </div>
-          <div class="shadow-sm bg-white dark:bg-{{ theme }}-900 rounded-md my-8">
-            <dl class="lg:grid-cols-4 grid-cols-2 gap-1 grid overflow-hidden *:relative">
-              {% for metric in metrics %}
-                <div class="gi">
-                  <div class="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full">
-                    <dt class="text-{{ theme }}-500 dark:text-{{ theme }}-400 leading-6 font-medium">
-                      {{ metric.name }}
-                    </dt>
-                    <div class="flex gap-1 justify-between items-center">
-                      <dd class="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full">
-                        {{ metric.value }}
-                      </dd>
-                      {% if metric.name == 'Monitored images' %}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="24"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          fill="currentColor"
-                          class="size-6 text-black dark:text-white shrink-0"
-                        >
-                          <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 4c4.29 0 7.863 2.429 10.665 7.154l.22 .379l.045 .1l.03 .083l.014 .055l.014 .082l.011 .1v.11l-.014 .111a.992 .992 0 0 1 -.026 .11l-.039 .108l-.036 .075l-.016 .03c-2.764 4.836 -6.3 7.38 -10.555 7.499l-.313 .004c-4.396 0 -8.037 -2.549 -10.868 -7.504a1 1 0 0 1 0 -.992c2.831 -4.955 6.472 -7.504 10.868 -7.504zm0 5a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z" />
-                        </svg>
-                      {% elsif metric.name == 'Up to date' %}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="24"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          fill="currentColor"
-                          class="size-6 text-green-500 shrink-0"
-                        >
-                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                          <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" />
-                        </svg>
-                      {% elsif metric.name == 'Updates available' %}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="24"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          fill="currentColor"
-                          class="size-6 text-blue-500 shrink-0"
-                        >
-                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                          <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z" />
-                        </svg>
-                      {% elsif metric.name == 'Unknown' %}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="24"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          fill="currentColor"
-                          class="size-6 text-{{ theme }}-500 shrink-0"
-                        >
-                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                          <path d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 13a1 1 0 0 0 -.993 .883l-.007 .117l.007 .127a1 1 0 0 0 1.986 0l.007 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883zm1.368 -6.673a2.98 2.98 0 0 0 -3.631 .728a1 1 0 0 0 1.44 1.383l.171 -.18a.98 .98 0 0 1 1.11 -.15a1 1 0 0 1 -.34 1.886l-.232 .012a1 1 0 0 0 .111 1.994a3 3 0 0 0 1.371 -5.673z" />
-                        </svg>
-                      {% endif %}
-                    </div>
-                  </div>
-                </div>
-              {% endfor %}
-            </dl>
-          </div>
-          <div class="shadow-sm bg-white dark:bg-{{ theme }}-900 rounded-md my-8">
-            <div class="flex justify-between items-center px-6 py-4 text-{{ theme }}-500">
-              <h3>Last checked: {{ last_updated }}</h3>
-              <button class="group" onclick="refresh(event)">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="group-disabled:animate-spin"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4,11A8.1,8.1 0 0 1 19.5,9M20,5v4h-4" /><path d="M20,13A8.1,8.1 0 0 1 4.5,15M4,19v-4h4" />
-                </svg>
-              </button>
-            </div>
-            <ul class="*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-{{ theme }}-800 divide-y dark:text-white">
-              {% for image in images %}
-                <li>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                    <path d="M21 16.008v-8.018a1.98 1.98 0 0 0 -1 -1.717l-7 -4.008a2.016 2.016 0 0 0 -2 0l-7 4.008c-.619 .355 -1 1.01 -1 1.718v8.018c0 .709 .381 1.363 1 1.717l7 4.008a2.016 2.016 0 0 0 2 0l7 -4.008c.619 -.355 1 -1.01 1 -1.718z" />
-                    <path d="M12 22v-10" />
-                    <path d="M12 12l8.73 -5.04" />
-                    <path d="M3.27 6.96l8.73 5.04" />
-                  </svg>
-                  {{ image.name }}
-                  {% if image.has_update == 'false' %}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      class="text-green-500 ml-auto"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                      <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" />
-                    </svg>
-                  {% elsif image.has_update == 'true' %}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      class="text-blue-500 ml-auto"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                      <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z" />
-                    </svg>
-                  {% elsif image.has_update == 'null' %}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      class="text-{{ theme }}-500 ml-auto"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                      <path d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 13a1 1 0 0 0 -.993 .883l-.007 .117l.007 .127a1 1 0 0 0 1.986 0l.007 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883zm1.368 -6.673a2.98 2.98 0 0 0 -3.631 .728a1 1 0 0 0 1.44 1.383l.171 -.18a.98 .98 0 0 1 1.11 -.15a1 1 0 0 1 -.34 1.886l-.232 .012a1 1 0 0 0 .111 1.994a3 3 0 0 0 1.371 -5.673z" />
-                    </svg>
-                  {% endif %}
-                </li>
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>

src/utils.rs

@@ -1,81 +1,6 @@
-use std::path::PathBuf;
-
 use json::{object, JsonValue};
-use once_cell::sync::Lazy;
-use regex::Regex;
-
-/// This macro is an alternative to panic. It prints the message you give it and exits the process with code 1, without printing a stack trace. Useful for when the program has to exit due to a user error or something unexpected which is unrelated to the program (e.g. a failed web request)
-#[macro_export]
-macro_rules! error {
-    ($($arg:tt)*) => ({
-        eprintln!($($arg)*);
-        std::process::exit(1);
-    })
-}
-
-// A small macro to print in yellow as a warning
-#[macro_export]
-macro_rules! warn {
-    ($($arg:tt)*) => ({
-        eprintln!("\x1b[93m{}\x1b[0m", format!($($arg)*));
-    })
-}
-
-/// Takes an image and splits it into registry, repository and tag. For example ghcr.io/sergi0g/cup:latest becomes ['ghcr.io', 'sergi0g/cup', 'latest'].
-pub fn split_image(image: &str) -> (String, String, String) {
-    static RE: Lazy<Regex> = Lazy::new(|| {
-        Regex::new(
-            r#"^(?P<name>(?:(?P<registry>(?:(?:localhost|[\w-]+(?:\.[\w-]+)+)(?::\d+)?)|[\w]+:\d+)/)?(?P<repository>[a-z0-9_.-]+(?:/[a-z0-9_.-]+)*))(?::(?P<tag>[\w][\w.-]{0,127}))?$"#, // From https://regex101.com/r/nmSDPA/1
-        )
-        .unwrap()
-    });
-    match RE.captures(image) {
-        Some(c) => {
-            let registry = match c.name("registry") {
-                    Some(registry) => registry.as_str().to_owned(),
-                    None => String::from("registry-1.docker.io"),
-                };
-            return (
-                registry.clone(),
-                match c.name("repository") {
-                    Some(repository) => {
-                        let repo = repository.as_str().to_owned();
-                        if !repo.contains('/') && registry == "registry-1.docker.io" {
-                            format!("library/{}", repo)
-                        } else {
-                            repo
-                        }
-                    }
-                    None => error!("Failed to parse image {}", image),
-                },
-                match c.name("tag") {
-                    Some(tag) => tag.as_str().to_owned(),
-                    None => String::from("latest"),
-                },
-            )
-        }
-        None => error!("Failed to parse image {}", image),
-    }
-}
-
-/// Given an image's parts which were previously created by split_image, recreate a reference that docker would use. This means removing the registry part, if it's Docker Hub and removing "library" if the image is official
-pub fn unsplit_image(registry: &str, repository: &str, tag: &str) -> String {
-    let reg = match registry {
-        "registry-1.docker.io" => String::new(),
-        r => format!("{}/", r),
-    };
-    let repo = match repository.split('/').collect::<Vec<&str>>()[0] {
-        "library" => {
-            if reg.is_empty() {
-                repository.strip_prefix("library/").unwrap()
-            } else {
-                repository
-            }
-        }
-        _ => repository,
-    };
-    format!("{}{}:{}", reg, repo, tag)
-}
+use reqwest_middleware::{ClientBuilder, ClientWithMiddleware};
+use reqwest_retry::{policies::ExponentialBackoff, RetryTransientMiddleware};
 
 /// Sorts the update vector alphabetically and where Some(true) > Some(false) > None
 pub fn sort_update_vec(updates: &[(String, Option<bool>)]) -> Vec<(String, Option<bool>)> {
@@ -95,24 +20,6 @@ pub fn sort_update_vec(updates: &[(String, Option<bool>)]) -> Vec<(String, Optio
     sorted_updates.to_vec()
 }
 
-/// Tries to load the config from the path provided and perform basic validation
-pub fn load_config(config_path: Option<PathBuf>) -> JsonValue {
-    let raw_config = match &config_path {
-        Some(path) => std::fs::read_to_string(path),
-        None => Ok(String::from("{\"theme\":\"default\"}")),
-    };
-    if raw_config.is_err() {
-        panic!(
-            "Failed to read config file from {}. Are you sure the file exists?",
-            &config_path.unwrap().to_str().unwrap()
-        )
-    };
-    match json::parse(&raw_config.unwrap()) {
-        Ok(v) => v,
-        Err(e) => panic!("Failed to parse config!\n{}", e),
-    }
-}
-
 pub fn to_json(updates: &[(String, Option<bool>)]) -> JsonValue {
     let mut json_data: JsonValue = object! {
         metrics: object! {},
@@ -124,21 +31,56 @@ pub fn to_json(updates: &[(String, Option<bool>)]) -> JsonValue {
     let up_to_date = updates
         .iter()
         .filter(|&(_, value)| *value == Some(false))
-        .collect::<Vec<&(String, Option<bool>)>>()
-        .len();
+        .count();
     let update_available = updates
         .iter()
         .filter(|&(_, value)| *value == Some(true))
-        .collect::<Vec<&(String, Option<bool>)>>()
-        .len();
-    let unknown = updates
-        .iter()
-        .filter(|&(_, value)| value.is_none())
-        .collect::<Vec<&(String, Option<bool>)>>()
-        .len();
+        .count();
+    let unknown = updates.iter().filter(|&(_, value)| value.is_none()).count();
     let _ = json_data["metrics"].insert("monitored_images", updates.len());
     let _ = json_data["metrics"].insert("up_to_date", up_to_date);
     let _ = json_data["metrics"].insert("update_available", update_available);
     let _ = json_data["metrics"].insert("unknown", unknown);
     json_data
 }
+
+// Logging
+
+/// This macro is an alternative to panic. It prints the message you give it and exits the process with code 1, without printing a stack trace. Useful for when the program has to exit due to a user error or something unexpected which is unrelated to the program (e.g. a failed web request)
+#[macro_export]
+macro_rules! error {
+    ($($arg:tt)*) => ({
+        eprintln!("\x1b[38:5:204mERROR \x1b[0m {}", format!($($arg)*));
+        std::process::exit(1);
+    })
+}
+
+// A small macro to print in yellow as a warning
+#[macro_export]
+macro_rules! warn {
+    ($($arg:tt)*) => ({
+        eprintln!("\x1b[38:5:192mWARN \x1b[0m {}", format!($($arg)*));
+    })
+}
+
+#[macro_export]
+macro_rules! info {
+    ($($arg:tt)*) => ({
+        println!("\x1b[38:5:86mINFO \x1b[0m {}", format!($($arg)*));
+    })
+}
+
+#[macro_export]
+macro_rules! debug {
+    ($($arg:tt)*) => ({
+        println!("\x1b[38:5:63mDEBUG \x1b[0m {}", format!($($arg)*));
+    })
+}
+
+pub fn new_reqwest_client() -> ClientWithMiddleware {
+    ClientBuilder::new(reqwest::Client::new())
+        .with(RetryTransientMiddleware::new_with_policy(
+            ExponentialBackoff::builder().build_with_max_retries(3),
+        ))
+        .build()
+}

tailwind.config.js

@@ -1,17 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "src/static/template.liquid"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-  safelist: [
-    {
-      pattern: /(bg|text|divide)-(gray|neutral)-.+/,
-      variants: ["dark"]
-    }
-  ]
-}
-

web/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

web/.tool-versions

@@ -0,0 +1 @@
+nodejs 22.8.0

web/README.md

@@ -0,0 +1,9 @@
+# Cup web frontend
+
+This is the Cup web frontend, built with Vite and React. Once it's built, Cup modifies a few things (notably the theme) and sends the result to the client.
+
+# Development
+
+Requirements: Bun, Node.js 20+
+
+Install dependencies with `bun install` and start the development server with `bun dev`.

web/eslint.config.js

@@ -0,0 +1,36 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.strictTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+);

web/index.html

@@ -0,0 +1,273 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf8" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Cup</title>
+  </head>
+  <body>
+    <div id="root">
+      <div
+        class="flex justify-center items-center min-h-screen bg-{{ theme }}-50 dark:bg-{{ theme }}-950"
+      >
+        <div class="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
+          <div class="max-w-[48rem] mx-auto h-full my-8">
+            <div class="flex items-center gap-1">
+              <h1 class="text-5xl lg:text-6xl font-bold dark:text-white">
+                Cup
+              </h1>
+              <svg
+                version="1.1"
+                id="Layer_2"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                x="0px"
+                y="0px"
+                viewBox="0 0 128 128"
+                style="enable-background: new 0 0 128 128"
+                xml:space="preserve"
+                class="size-14 lg:size-16"
+              >
+                <path
+                  style="fill: #a6cfd6"
+                  d="M65.12,17.55c-17.6-0.53-34.75,5.6-34.83,14.36c-0.04,5.2,1.37,18.6,3.62,48.68s2.25,33.58,3.5,34.95
+                c1.25,1.37,10.02,8.8,25.75,8.8s25.93-6.43,26.93-8.05c0.48-0.78,1.83-17.89,3.5-37.07c1.81-20.84,3.91-43.9,3.99-45.06
+                C97.82,30.66,94.2,18.43,65.12,17.55z"
+                />
+                <path
+                  style="fill: #dcedf6"
+                  d="M41.4,45.29c-0.12,0.62,1.23,24.16,2.32,27.94c1.99,6.92,9.29,7.38,10.23,4.16
+                c0.9-3.07-0.38-29.29-0.38-29.29s-3.66-0.3-6.43-0.84C44,46.63,41.4,45.29,41.4,45.29z"
+                />
+                <path
+                  style="fill: #6ca4ae"
+                  d="M33.74,32.61c-0.26,8.83,20.02,12.28,30.19,12.22c13.56-0.09,29.48-4.29,29.8-11.7
+                S79.53,21.1,63.35,21.1C49.6,21.1,33.96,25.19,33.74,32.61z"
+                />
+                <path
+                  style="fill: #dc0d27"
+                  d="M84.85,13.1c-0.58,0.64-9.67,30.75-9.67,30.75s2.01-0.33,4-0.79c2.63-0.61,3.76-1.06,3.76-1.06
+                s7.19-22.19,7.64-23.09c0.45-0.9,21.61-7.61,22.31-7.93c0.7-0.32,1.39-0.4,1.46-0.78c0.06-0.38-2.34-6.73-3.11-6.73
+                C110.47,3.47,86.08,11.74,84.85,13.1z"
+                />
+                <path
+                  style="fill: #8a1f0f"
+                  d="M110.55,7.79c1.04,2.73,2.8,3.09,3.55,2.77c0.45-0.19,1.25-1.84,0.01-4.47
+                c-0.99-2.09-2.17-2.74-2.93-2.61C110.42,3.6,109.69,5.53,110.55,7.79z"
+                />
+                <g>
+                  <path
+                    style="fill: #8a1f0f"
+                    d="M91.94,18.34c-0.22,0-0.44-0.11-0.58-0.3l-3.99-5.77c-0.22-0.32-0.14-0.75,0.18-0.97
+                  c0.32-0.22,0.76-0.14,0.97,0.18l3.99,5.77c0.22,0.32,0.14,0.75-0.18,0.97C92.21,18.3,92.07,18.34,91.94,18.34z"
+                  />
+                </g>
+                <g>
+                  <path
+                    style="fill: #8a1f0f"
+                    d="M90.28,19.43c-0.18,0-0.35-0.07-0.49-0.2l-5.26-5.12c-0.28-0.27-0.28-0.71-0.01-0.99
+                  c0.27-0.28,0.71-0.28,0.99-0.01l5.26,5.12c0.28,0.27,0.28,0.71,0.01,0.99C90.64,19.36,90.46,19.43,90.28,19.43z"
+                  />
+                </g>
+                <g>
+                  <path
+                    style="fill: #8a1f0f"
+                    d="M89.35,21.22c-0.12,0-0.25-0.03-0.36-0.1l-5.6-3.39c-0.33-0.2-0.44-0.63-0.24-0.96
+                  c0.2-0.33,0.63-0.44,0.96-0.24l5.6,3.39c0.33,0.2,0.44,0.63,0.24,0.96C89.82,21.1,89.59,21.22,89.35,21.22z"
+                  />
+                </g>
+              </svg>
+            </div>
+            <div
+              class="shadow-sm bg-white dark:bg-{{ theme }}-900 rounded-md my-8"
+            >
+              <dl
+                class="lg:grid-cols-4 grid-cols-2 gap-1 grid overflow-hidden *:relative"
+              >
+                {% for metric in metrics %}
+                <div class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi">
+                  <div
+                    class="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full"
+                  >
+                    <dt
+                      class="text-{{ theme }}-500 dark:text-{{ theme }}-400 leading-6 font-medium"
+                    >
+                      {{ metric.name }}
+                    </dt>
+                    <div class="flex gap-1 justify-between items-center">
+                      <dd
+                        class="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full"
+                      >
+                        {{ metric.value }}
+                      </dd>
+                      {% if metric.name == 'Monitored images' %}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-6 text-black dark:text-white shrink-0"
+                      >
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                          d="M12 4c4.29 0 7.863 2.429 10.665 7.154l.22 .379l.045 .1l.03 .083l.014 .055l.014 .082l.011 .1v.11l-.014 .111a.992 .992 0 0 1 -.026 .11l-.039 .108l-.036 .075l-.016 .03c-2.764 4.836 -6.3 7.38 -10.555 7.499l-.313 .004c-4.396 0 -8.037 -2.549 -10.868 -7.504a1 1 0 0 1 0 -.992c2.831 -4.955 6.472 -7.504 10.868 -7.504zm0 5a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z"
+                        />
+                      </svg>
+                      {% elsif metric.name == 'Up to date' %}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-6 text-green-500 shrink-0"
+                      >
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                          d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+                        />
+                      </svg>
+                      {% elsif metric.name == 'Updates available' %}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-6 text-blue-500 shrink-0"
+                      >
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                          d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z"
+                        />
+                      </svg>
+                      {% elsif metric.name == 'Unknown' %}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-6 text-{{ theme }}-500 shrink-0"
+                      >
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                          d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 13a1 1 0 0 0 -.993 .883l-.007 .117l.007 .127a1 1 0 0 0 1.986 0l.007 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883zm1.368 -6.673a2.98 2.98 0 0 0 -3.631 .728a1 1 0 0 0 1.44 1.383l.171 -.18a.98 .98 0 0 1 1.11 -.15a1 1 0 0 1 -.34 1.886l-.232 .012a1 1 0 0 0 .111 1.994a3 3 0 0 0 1.371 -5.673z"
+                        />
+                      </svg>
+                      {% endif %}
+                    </div>
+                  </div>
+                </div>
+                {% endfor %}
+              </dl>
+            </div>
+            <div
+              class="shadow-sm bg-white dark:bg-{{ theme }}-900 rounded-md my-8"
+            >
+              <div
+                class="flex justify-between items-center px-6 py-4 text-{{ theme }}-500"
+              >
+                <h3>Last checked: {{ last_updated }}</h3>
+                <button class="group" onclick="refresh(event)">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="group-disabled:animate-spin"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M4,11A8.1,8.1 0 0 1 19.5,9M20,5v4h-4" />
+                    <path d="M20,13A8.1,8.1 0 0 1 4.5,15M4,19v-4h4" />
+                  </svg>
+                </button>
+              </div>
+              <ul
+                class="*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-{{ theme }}-800 divide-y dark:text-white"
+              >
+                {% for image in images %}
+                <li>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path
+                      d="M21 16.008v-8.018a1.98 1.98 0 0 0 -1 -1.717l-7 -4.008a2.016 2.016 0 0 0 -2 0l-7 4.008c-.619 .355 -1 1.01 -1 1.718v8.018c0 .709 .381 1.363 1 1.717l7 4.008a2.016 2.016 0 0 0 2 0l7 -4.008c.619 -.355 1 -1.01 1 -1.718z"
+                    />
+                    <path d="M12 22v-10" />
+                    <path d="M12 12l8.73 -5.04" />
+                    <path d="M3.27 6.96l8.73 5.04" />
+                  </svg>
+                  {{ image.name }} {% if image.has_update == 'false' %}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="text-green-500 ml-auto"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path
+                      d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+                    />
+                  </svg>
+                  {% elsif image.has_update == 'true' %}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="text-blue-500 ml-auto"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path
+                      d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z"
+                    />
+                  </svg>
+                  {% elsif image.has_update == 'null' %}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="text-{{ theme }}-500 ml-auto"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path
+                      d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 13a1 1 0 0 0 -.993 .883l-.007 .117l.007 .127a1 1 0 0 0 1.986 0l.007 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883zm1.368 -6.673a2.98 2.98 0 0 0 -3.631 .728a1 1 0 0 0 1.44 1.383l.171 -.18a.98 .98 0 0 1 1.11 -.15a1 1 0 0 1 -.34 1.886l-.232 .012a1 1 0 0 0 .111 1.994a3 3 0 0 0 1.371 -5.673z"
+                    />
+                  </svg>
+                  {% endif %}
+                </li>
+                {% endfor %}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "fmt": "prettier --write ."
+  },
+  "dependencies": {
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@tabler/icons-react": "^3.14.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.42",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  }
+}

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

web/src/App.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import Logo from "./components/Logo";
+import Statistic from "./components/Statistic";
+import Image from "./components/Image";
+import { LastChecked } from "./components/LastChecked";
+import Loading from "./components/Loading";
+import { Data } from "./types";
+import { theme } from "./theme";
+import RefreshButton from "./components/RefreshButton";
+import Search from "./components/Search";
+
+function App() {
+  const [data, setData] = useState<Data | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  if (!data) return <Loading onLoad={setData} />;
+  return (
+    <div
+      className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
+    >
+      <div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
+        <div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
+          <div className="flex items-center gap-1">
+            <h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
+              Cup
+            </h1>
+            <Logo />
+          </div>
+          <div
+            className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
+          >
+            <dl className="lg:grid-cols-4 md:grid-cols-2 gap-1 grid-cols-1 grid overflow-hidden *:relative">
+              {Object.entries(data.metrics).map(([name, value]) => (
+                <Statistic name={name} value={value} key={name} />
+              ))}
+            </dl>
+          </div>
+          <div
+            className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
+          >
+            <div
+              className={`flex justify-between items-center px-6 py-4 text-${theme}-500`}
+            >
+              <LastChecked datetime={data.last_updated} />
+              <RefreshButton />
+            </div>
+            <Search onChange={setSearchQuery}/>
+            <ul
+              className={`*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-${theme}-800 divide-y dark:text-white`}
+            >
+              {Object.entries(data.images).filter(([name]) => name.includes(searchQuery)).map(([name, status]) => (
+                <Image name={name} status={status} key={name} />
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

web/src/components/Image.tsx

@@ -0,0 +1,46 @@
+import {
+  IconCircleArrowUpFilled,
+  IconCircleCheckFilled,
+  IconCube,
+  IconHelpCircleFilled,
+} from "@tabler/icons-react";
+import { WithTooltip } from "./Tooltip";
+
+export default function Image({
+  name,
+  status,
+}: {
+  name: string;
+  status: boolean | null;
+}) {
+  return (
+    <li className="break-all">
+      <IconCube className="size-6 shrink-0" />
+      {name}
+      {status == false && (
+        <WithTooltip
+          text="Up to date"
+          className="text-green-500 ml-auto size-6 shrink-0"
+        >
+          <IconCircleCheckFilled />
+        </WithTooltip>
+      )}
+      {status == true && (
+        <WithTooltip
+          text="Update available"
+          className="text-blue-500 ml-auto size-6 shrink-0"
+        >
+          <IconCircleArrowUpFilled />
+        </WithTooltip>
+      )}
+      {status == null && (
+        <WithTooltip
+          text="Unknown"
+          className="text-gray-500 ml-auto size-6 shrink-0"
+        >
+          <IconHelpCircleFilled />
+        </WithTooltip>
+      )}
+    </li>
+  );
+}

web/src/components/LastChecked.tsx

@@ -0,0 +1,6 @@
+import { intlFormatDistance } from "date-fns/intlFormatDistance";
+
+export function LastChecked({ datetime }: { datetime: string }) {
+  const date = intlFormatDistance(new Date(datetime), new Date());
+  return <h3>Last checked {date}</h3>;
+}

web/src/components/Loading.tsx

@@ -0,0 +1,34 @@
+import { IconLoader2 } from "@tabler/icons-react";
+import { Data } from "../types";
+import Logo from "./Logo";
+import { theme } from "../theme";
+
+export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
+  fetch(
+    process.env.NODE_ENV === "production"
+      ? "/json"
+      : `http://${window.location.hostname}:8000/json`,
+  ).then((response) => response.json().then((data) => {onLoad(data as Data)}));
+  return (
+    <div
+      className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
+    >
+      <div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full absolute overflow-hidden">
+        <div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
+          <div className="flex items-center gap-1">
+            <h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
+              Cup
+            </h1>
+            <Logo />
+          </div>
+          <div
+            className={`h-full flex justify-center
+            items-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
+          >
+            Loading <IconLoader2 className="animate-spin" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/Logo.tsx

@@ -0,0 +1,54 @@
+export default function Logo() {
+  return (
+    <svg viewBox="0 0 128 128" className="size-14 lg:size-16">
+      <path
+        style={{ fill: "#A6CFD6" }}
+        d="M65.12,17.55c-17.6-0.53-34.75,5.6-34.83,14.36c-0.04,5.2,1.37,18.6,3.62,48.68s2.25,33.58,3.5,34.95
+                c1.25,1.37,10.02,8.8,25.75,8.8s25.93-6.43,26.93-8.05c0.48-0.78,1.83-17.89,3.5-37.07c1.81-20.84,3.91-43.9,3.99-45.06
+                C97.82,30.66,94.2,18.43,65.12,17.55z"
+      />
+      <path
+        style={{ fill: "#DCEDF6" }}
+        d="M41.4,45.29c-0.12,0.62,1.23,24.16,2.32,27.94c1.99,6.92,9.29,7.38,10.23,4.16
+                c0.9-3.07-0.38-29.29-0.38-29.29s-3.66-0.3-6.43-0.84C44,46.63,41.4,45.29,41.4,45.29z"
+      />
+      <path
+        style={{ fill: "#6CA4AE" }}
+        d="M33.74,32.61c-0.26,8.83,20.02,12.28,30.19,12.22c13.56-0.09,29.48-4.29,29.8-11.7
+                S79.53,21.1,63.35,21.1C49.6,21.1,33.96,25.19,33.74,32.61z"
+      />
+      <path
+        style={{ fill: "#DC0D27" }}
+        d="M84.85,13.1c-0.58,0.64-9.67,30.75-9.67,30.75s2.01-0.33,4-0.79c2.63-0.61,3.76-1.06,3.76-1.06
+                s7.19-22.19,7.64-23.09c0.45-0.9,21.61-7.61,22.31-7.93c0.7-0.32,1.39-0.4,1.46-0.78c0.06-0.38-2.34-6.73-3.11-6.73
+                C110.47,3.47,86.08,11.74,84.85,13.1z"
+      />
+      <path
+        style={{ fill: "#8A1F0F" }}
+        d="M110.55,7.79c1.04,2.73,2.8,3.09,3.55,2.77c0.45-0.19,1.25-1.84,0.01-4.47
+                c-0.99-2.09-2.17-2.74-2.93-2.61C110.42,3.6,109.69,5.53,110.55,7.79z"
+      />
+      <g>
+        <path
+          style={{ fill: "#8A1F0F" }}
+          d="M91.94,18.34c-0.22,0-0.44-0.11-0.58-0.3l-3.99-5.77c-0.22-0.32-0.14-0.75,0.18-0.97
+                  c0.32-0.22,0.76-0.14,0.97,0.18l3.99,5.77c0.22,0.32,0.14,0.75-0.18,0.97C92.21,18.3,92.07,18.34,91.94,18.34z"
+        />
+      </g>
+      <g>
+        <path
+          style={{ fill: "#8A1F0F" }}
+          d="M90.28,19.43c-0.18,0-0.35-0.07-0.49-0.2l-5.26-5.12c-0.28-0.27-0.28-0.71-0.01-0.99
+                  c0.27-0.28,0.71-0.28,0.99-0.01l5.26,5.12c0.28,0.27,0.28,0.71,0.01,0.99C90.64,19.36,90.46,19.43,90.28,19.43z"
+        />
+      </g>
+      <g>
+        <path
+          style={{ fill: "#8A1F0F" }}
+          d="M89.35,21.22c-0.12,0-0.25-0.03-0.36-0.1l-5.6-3.39c-0.33-0.2-0.44-0.63-0.24-0.96
+                  c0.2-0.33,0.63-0.44,0.96-0.24l5.6,3.39c0.33,0.2,0.44,0.63,0.24,0.96C89.82,21.1,89.59,21.22,89.35,21.22z"
+        />
+      </g>
+    </svg>
+  );
+}

web/src/components/RefreshButton.tsx

@@ -0,0 +1,45 @@
+import { MouseEvent } from "react";
+import { WithTooltip } from "./Tooltip";
+
+export default function RefreshButton() {
+  const refresh = (event: MouseEvent) => {
+    const btn = event.currentTarget as HTMLButtonElement;
+    btn.disabled = true;
+
+    const request = new XMLHttpRequest();
+    request.onload = () => {
+      if (request.status === 200) {
+        window.location.reload();
+      }
+    };
+    request.open(
+      "GET",
+      process.env.NODE_ENV === "production"
+        ? "/refresh"
+        : `http://${window.location.hostname}:8000/refresh`,
+    );
+    request.send();
+  };
+  return (
+    <WithTooltip text="Reload">
+      <button className="group" onClick={refresh}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="group-disabled:animate-spin"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M4,11A8.1,8.1 0 0 1 19.5,9M20,5v4h-4" />
+          <path d="M20,13A8.1,8.1 0 0 1 4.5,15M4,19v-4h4" />
+        </svg>
+      </button>
+    </WithTooltip>
+  );
+}

web/src/components/Search.tsx

@@ -0,0 +1,51 @@
+import { ChangeEvent, useState } from "react";
+import { theme } from "../theme";
+import { IconSearch, IconX } from "@tabler/icons-react";
+
+export default function Search({
+  onChange,
+}: {
+  onChange: (value: string) => void;
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showClear, setShowClear] = useState(false);
+  const handleChange = (event: ChangeEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    setSearchQuery(value);
+    onChange(value);
+    if (value !== "") {
+      setShowClear(true);
+    } else setShowClear(false);
+  };
+  const handleClear = () => {
+    setShowClear(false);
+    setSearchQuery("");
+    onChange("");
+  };
+  return (
+    <div className={`w-full px-6 text-${theme}-500`}>
+      <div
+        className={`flex items-center w-full rounded-md border border-${theme}-300 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-200 dark:bg-${theme}-800 flex-nowrap peer`}
+      >
+        <IconSearch className="size-5" />
+        <div className="w-full">
+          <input
+            className={`w-full h-10 text-sm text-${theme}-600 dark:text-${theme}-400 focus:outline-none peer bg-transparent placeholder:text-${theme}-500`}
+            placeholder="Search"
+            onChange={handleChange}
+            value={searchQuery}
+          ></input>
+        </div>
+        {showClear && (
+          <button onClick={handleClear} className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}>
+            <IconX className="size-5" />
+          </button>
+        )}
+      </div>
+      <div
+        className="relative -translate-y-[8px] h-[8px] border-b-blue-600 border-b-2 w-0 peer-has-[:focus]:w-full transition-all duration-200 rounded-md left-1/2 -translate-x-1/2"
+        style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
+      ></div>
+    </div>
+  );
+}

web/src/components/Statistic.tsx

@@ -0,0 +1,48 @@
+import {
+  IconCircleArrowUpFilled,
+  IconCircleCheckFilled,
+  IconEyeFilled,
+  IconHelpCircleFilled,
+} from "@tabler/icons-react";
+import { theme } from "../theme";
+
+export default function Statistic({
+  name,
+  value,
+}: {
+  name: string;
+  value: number;
+}) {
+  name = name.replaceAll("_", " ");
+  name = name.slice(0, 1).toUpperCase() + name.slice(1); // Capitalize name
+  return (
+    <div
+      className={`before:bg-${theme}-200 before:dark:bg-${theme}-800 after:bg-${theme}-200 after:dark:bg-${theme}-800 gi`}
+    >
+      <div className="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full">
+        <dt
+          className={`text-${theme}-500 dark:text-${theme}-400 leading-6 font-medium`}
+        >
+          {name}
+        </dt>
+        <div className="flex gap-1 justify-between items-center">
+          <dd className="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full">
+            {value}
+          </dd>
+          {name == "Monitored images" && (
+            <IconEyeFilled className="size-6 text-black dark:text-white shrink-0" />
+          )}
+          {name == "Up to date" && (
+            <IconCircleCheckFilled className="size-6 text-green-500 shrink-0" />
+          )}
+          {name == "Update available" && (
+            <IconCircleArrowUpFilled className="size-6 text-blue-500 shrink-0" />
+          )}
+          {name == "Unknown" && (
+            <IconHelpCircleFilled className="size-6 text-gray-500 shrink-0" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/Tooltip.tsx

@@ -0,0 +1,46 @@
+import { Provider, Root, Trigger, Content } from "@radix-ui/react-tooltip";
+import { cn } from "../utils";
+import { forwardRef, ReactNode } from "react";
+import { theme } from "../theme";
+
+const TooltipContent = forwardRef<
+  React.ElementRef<typeof Content>,
+  React.ComponentPropsWithoutRef<typeof Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      `z-50 overflow-hidden rounded-md border border-${theme}-200 bg-white px-3 py-1.5 text-sm text-${theme}-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-${theme}-800 dark:bg-${theme}-950 dark:text-${theme}-50`,
+      className,
+    )}
+    {...props}
+  />
+));
+
+TooltipContent.displayName = Content.displayName;
+
+const WithTooltip = ({
+  children,
+  text,
+  className,
+}: {
+  children: ReactNode;
+  text: string;
+  className?: string;
+}) => {
+  return (
+    <Provider>
+      <Root>
+        <Trigger className={className} asChild>
+          {children}
+        </Trigger>
+        <TooltipContent>
+          <p className="text-black dark:text-white">{text}</p>
+        </TooltipContent>
+      </Root>
+    </Provider>
+  );
+};
+
+export { WithTooltip };

web/src/index.css

@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Kinda hacky, but thank you https://geary.co/internal-borders-css-grid/ */
+.gi {
+  position: relative;
+  height: 100%;
+}
+
+.gi::before,
+.gi::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+}
+
+.gi::before {
+  inline-size: 1px;
+  block-size: 100vh;
+  inset-inline-start: -0.125rem;
+}
+
+.gi::after {
+  inline-size: 100vw;
+  block-size: 1px;
+  inset-inline-start: 0;
+  inset-block-start: -0.12rem;
+}
+
+@supports (scrollbar-color: auto) {
+  html {
+    scrollbar-color: #707070 #343840;
+  }
+}
+
+@supports selector(::-webkit-scrollbar) {
+  html::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  html::-webkit-scrollbar-track {
+    background: #343840;
+  }
+
+  html::-webkit-scrollbar-thumb {
+    background: #707070;
+    border-radius: 0.375rem;
+  }
+
+  html::-webkit-scrollbar-thumb:hover {
+    background: #b5b5b5;
+  }
+}

web/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

web/src/theme.ts

@@ -0,0 +1 @@
+export const theme = "neutral"; // Will be modified by server at runtime

web/src/types.ts

@@ -0,0 +1,10 @@
+export interface Data {
+  metrics: {
+    monitored_images: number;
+    up_to_date: number;
+    update_available: number;
+    unknown: number;
+  };
+  images: Record<string, boolean | null>;
+  last_updated: string;
+};

web/src/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

web/tailwind.config.js

@@ -0,0 +1,49 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/App.tsx", "./src/components/*.tsx"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("tailwindcss-animate")],
+  safelist: [
+    // Generate minimum extra CSS
+    {
+      pattern: /bg-(gray|neutral)-50/,
+    },
+    {
+      pattern: /bg-(gray|neutral)-(900|950)/,
+      variants: ["dark"],
+    },
+    {
+      pattern: /bg-(gray|neutral)-200/,
+      variants: ["before", "after"],
+    },
+    {
+      pattern: /bg-(gray|neutral)-800/,
+      variants: ["before:dark", "after:dark", "dark"],
+    },
+    {
+      pattern: /text-(gray|neutral)-600/,
+      variants: ["hover"]
+    },
+    {
+      pattern: /text-(gray|neutral)-400/,
+      variants: ["hover", "dark", "dark:hover"]
+    },
+    {
+      pattern: /text-(gray|neutral)-500/,
+      variants: ["dark", "placeholder"],
+    },
+    {
+      pattern: /divide-(gray|neutral)-800/,
+      variants: ["dark"],
+    },
+    {
+      pattern: /border-(gray|neutral)-300/,
+    },
+    {
+      pattern: /border-(gray|neutral)-700/,
+      variants: ["dark"],
+    },
+  ],
+};

web/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

web/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

web/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      // https://stackoverflow.com/q/69614671/vite-without-hash-in-filename#75344943
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`,
+      },
+    },
+  },
+});