Bump version

Fix typo

.github/workflows/build.yml

@@ -1,49 +0,0 @@
-name: Build docker image
-
-on:
-  release:
-    types:
-      - published
-
-env:
-  CARGO_TERM_COLOR: always
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Get latest release tag
-        id: release
-        uses: pozetroninc/github-action-get-latest-release@master
-        with:
-          owner: sergi0g
-          repo: cup
-          excludes: prerelease, draft
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and push
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64,linux/arm64
-          tags: |
-            ghcr.io/sergi0g/cup:latest
-            ghcr.io/sergi0g/cup:${{ steps.release.outputs.release }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

.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/docs.yml

@@ -0,0 +1,43 @@
+name: Deploy github pages
+on:
+  push:
+    paths:
+      - "docs/**"
+  workflow_dispatch:
+jobs:
+  build:
+    defaults:
+      run:
+        working-directory: docs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/out/
+  deploy:
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/nightly.yml

@@ -0,0 +1,91 @@
+name: Nightly Release
+on:
+  workflow_dispatch:
+
+jobs:
+  build-binaries:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - 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: 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 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: binaries
+          path: |
+            cup-linux-amd64
+            cup-linux-arm64
+
+  build-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64, linux/arm64
+          push: true
+          tags: ghcr.io/sergi0g/cup:nightly
+          cache-from: type=gha
+          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

@@ -0,0 +1,110 @@
+name: Release
+on:
+  workflow_dispatch:
+
+jobs:
+  get-tag:
+    runs-on: ubuntu-latest
+    outputs:
+      tag: ${{ steps.tag.outputs.tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Get current tag
+        id: tag
+        run: |
+          TAG=v$(head -n 4 Cargo.toml | grep version | awk '{print $3}' | tr -d '"')
+          echo "Current tag: $TAG"
+          echo "tag=$TAG" >> $GITHUB_OUTPUT
+
+  build-binaries:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - 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: 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 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: binaries
+          path: |
+            cup-linux-amd64
+            cup-linux-arm64
+
+  build-image:
+    needs: get-tag
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64, linux/arm64
+          push: true
+          tags: ghcr.io/sergi0g/cup:${{ needs.get-tag.outputs.tag }},ghcr.io/sergi0g/cup:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+  release:
+    runs-on: ubuntu-latest
+    needs: [get-tag, build-image, build-binaries]
+    steps:
+      - name: Download binaries
+        uses: actions/download-artifact@v4
+        with:
+          name: binaries
+          path: binaries
+
+      - name: Create release
+        uses: softprops/action-gh-release@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          prerelease: true
+          tag_name: ${{ needs.get-tag.outputs.tag }}
+          name: ${{ needs.get-tag.outputs.tag }}
+          files: binaries/*

.gitignore

@@ -1 +1,8 @@
 /target
+/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,26 +1,29 @@
 [package]
 name = "cup"
-version = "0.1.0"
+version = "2.3.1"
 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"] }
-json = "0.12.4"
-rayon = "1.10.0"
-xitca-web = { version = "0.5.0", optional = true }
+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"
 
 [features]
 default = ["server", "cli"]
-server = ["dep:xitca-web", "dep:liquid"]
+server = ["dep:xitca-web", "dep:liquid", "dep:chrono"]
 cli = ["dep:indicatif", "dep:termsize"]
 
 [profile.release]

Dockerfile

@@ -1,16 +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 cup
+# Copy files
 WORKDIR /cup
-COPY Cargo.toml Cargo.lock ./
-RUN cargo build --release
-
-COPY src ./src
+
+COPY Cargo.toml .
+COPY Cargo.lock .
+COPY ./src ./src
+
+# 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,142 +13,28 @@ 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 test machine, it took ~12 seconds for ~95 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.1 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!
 
-## Installation
+## Documentation
 
-You can install Cup in 2 ways: as a docker container (recommended) or as a binary.
-
-### With docker
-
-Requirements: [Docker](https://docs.docker.com/engine/install/)
-
-Difficulty: Easy
-
-- Open a terminal and run `docker pull ghcr.io/sergi0g/cup`. If you're not in the `docker` group, make sure to prefix the command as root.
-
-That's it! Now head over to the Usage section!
-
-### From source
-
-Requirements: [Rust](https://rustup.rs)
-
-Difficulty: Moderate
-
-1. Open a terminal and clone the git repository
-   ```
-   $ git clone https://github.com/sergi0g/cup
-   ```
-2. Change your directory to the repository you just cloned
-   ```
-   $ cd cup
-   ```
-3. Build Cup
-   ```
-   $ cargo build --release
-   ```
-   This will build cup with all features by default. If you want to build just the server, you can append `--no-default-features --features cli` or `--no-default-features --features server` depending one what you need.
-4. Add the binary to your path for easy access
-
-   Consult your shell's documentation on how to do this. For Bash, the following will likely work:
-
-   ```
-   $ mv /target/release/cup ~/.local/bin
-   ```
-
-   Make sure to reload your shell.
-
-   You're now ready to use Cup!
-
-## Usage
-
-### CLI
-
-Cup's CLI provides the `cup check` command.
-
-Basic usage:
-
-```
-$ cup check
-nginx:alpine                                      Update available
-redis:7                                           Update available
-redis:alpine                                      Update available
-...
-centos:7                                                Up to date
-mcr.microsoft.com/devcontainers/go:0-1.19-bullseye      Up to date
-rockylinux:9-minimal                                    Up to date
-rabbitmq:3.11.9-management                              Up to date
-...
-some/deleted:image                                         Unknown
-```
-
-If you have a [Nerd Font](https://nerdfonts.com) installed, you can also add icons with the `-i` flag: `cup check -i`
-
-If you want the output to be JSON, use the `-r` flag:
-
-```
-$ cup check -r
-[{"image":"nginx:alpine","has_update":true},{"image":"rockylinux:9-minimal","has_update":false},{"image":"some/deleted:image","has_update":null}]
-```
-
-Checking a single image is also possible:
-
-```
-$ cup check node:latest
-node:latest has an update available
-```
-
-If using the docker image:
-
-```
-$ docker run -v /var/run/docker.sock:/var/run/docker.sock cup check
-```
-
-### Server
-
-The server provides the `cup serve` command.
-
-Basic usage:
-
-```
-$ cup serve
-Serving on http://0.0.0.0:8000
-Received GET request on /
-Received GET request on /json
-```
-
-This will launch the server on port 8000. To access it, visit `http://<YOUR_IP>:8000` (replace `<YOUR_IP>` with the IP address of the machine running Cup.)
-
-The URL `http://<YOUR_IP>:8000/json` is also available for usage with integrations.
-
-If you want to use a custom port, use the `-p` flag:
-
-```
-$ cup check -p 9000
-Serving on http://0.0.0.0:9000
-Received GET request on /
-Received GET request on /json
-```
-
-If using the docker image (replace `<PORT>` with the port you're using (default 8000)):
-
-```
-$ docker run -v /var/run/docker.sock:/var/run/docker.sock -p <PORT>:<PORT> cup serve
-```
+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 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 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)
 
+## Roadmap
+Take a sneak peek at what's coming up in future releases on the [roadmap](https://github.com/users/sergi0g/projects/2)!
+
 ## Contributing
 
 All contributions are welcome!
@@ -158,9 +46,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/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

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

docs/README.md

@@ -0,0 +1 @@
+This is where Cup's documentation lives. It's created with [Nextra](https://nextra.site).

docs/next.config.js

@@ -0,0 +1,17 @@
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.jsx",
+});
+
+module.exports = withNextra(
+  {
+    output: "export",
+    images: {
+      unoptimized: true
+    },
+    basePath: process.env.NODE_ENV == 'production' ? '/cup' : ''
+  }
+);
+
+// If you have other Next.js configurations, you can pass them as the parameter:
+// module.exports = withNextra({ /* other next.js config */ })

docs/package.json

@@ -0,0 +1,21 @@
+{
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@tabler/icons-react": "^3.11.0",
+    "next": "^14.2.5",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.5"
+  },
+  "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
+}

docs/pages/_app.mdx

@@ -0,0 +1,10 @@
+import '../styles.css';
+import 'nextra-theme-docs/style.css';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <main>
+      <Component {...pageProps} />
+    </main>
+  );
+}

docs/pages/_meta.json

@@ -0,0 +1,13 @@
+{
+    "docs": {
+        "title": "Documentation",
+        "type": "page"
+    },
+    "about": {
+        "title": "About",
+        "type": "page",
+        "theme": {
+            "typesetting": "article"
+        }
+    }
+}

docs/pages/about.mdx

@@ -0,0 +1,110 @@
+import Image from "next/image";
+import old_cup from "../assets/old_cup.png"
+import web_ui from "../assets/blue_theme.png"
+
+# About
+Cup is a small utility that checks for updates to Docker containers. The logic is simple: Cup checks the locally pulled images' digests against the latest ones in their registry. It then presents the results in a pretty interface. Here's the story:
+
+## How it started
+
+I got the basic idea for Cup a long time ago. I was looking at [Homepage's list of widgets](https://gethomepage.dev/latest/widgets/) when I discovered [What's Up Docker?](https://github.com/fmartinou/whats-up-docker) (referred to as WUD from now on).
+
+According to the docs:
+
+> What's up Docker ( aka WUD ) gets you notified when a new version of your Docker Container is available.
+
+It supports the most common registries, has integrations with IFTTT, Slack, Telegram and other apps/services for notifications or triggering workflows and also has the option to automatically update containers, like [Watchtower](https://github.com/containrrr/watchtower).
+
+I was managing my homelab myself at that time and the only way to check if I had updates was log in to the server and manually try to pull the images for *every single compose file*. WUD seemed to solve the problem nicely, so I decided to give it a try. I never used automatic updates or notifications, but I configured it and let it run.
+
+After deploying it and setting up my reverse proxy, I was greeted with this dashboard:
+<Image src="https://github.com/fmartinou/whats-up-docker/blob/master/docs/ui/ui.png?raw=true" alt="A screenshot of WUD's web UI, from the docs" />
+It was working fine, but... the UI was not what I expected. It really reminds me of some really old Android app (I hope I didn't offend anyone). That was strike one. Nevertheless, I left it running. It was useful after all.
+
+A few days later I was pulling some docker images, when I got this error message:
+
+> You have reached your pull rate limit. You may increase the limit by authenticating and upgrading: https://www.docker.com/increase-rate-limits.
+
+Wait a minute. What was that? I'd never encountered a message like this before. I thought "Weird. Maybe I pulled too many images today?". So I decided to finish those updates another day.
+
+Next time I tried, same issue. "What the heck is happening?" I thought. The only change I'd made to my homelab at that time was installing WUD. So I stopped it. And that's where the problems ended.
+
+The problem was clearly related to WUD, so I started trying to find what was going wrong. That was when I came upon [this page from Docker's documentation](https://docs.docker.com/docker-hub/download-rate-limit/). I noticed 2 things:
+
+> A pull request is defined as up to two `GET` requests on registry manifest URLs (`/v2/*/manifests/*`)
+
+> `HEAD` requests aren't counted.
+
+There were also helpful instructions on how to check the rate limit:
+
+```
+sergio@desktop:~ $ TOKEN=$(curl "https://auth.docker.io/token?service=registry.docker.io&scope=repository:ratelimitpreview/test:pull" | jq -r .token)
+  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
+                                 Dload  Upload   Total   Spent    Left  Speed
+100  5429    0  5429    0     0   7431      0 --:--:-- --:--:-- --:--:--  7426
+
+sergio@desktop:~ $ curl --head -H "Authorization: Bearer $TOKEN" https://registry-1.docker.io/v2/ratelimitpreview/test/manifests/latest
+HTTP/1.1 200 OK
+content-length: 2782
+content-type: application/vnd.docker.distribution.manifest.v1+prettyjws
+docker-content-digest: sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020
+docker-distribution-api-version: registry/2.0
+etag: "sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020"
+date: Tue, 16 Jul 2024 12:13:17 GMT
+strict-transport-security: max-age=31536000
+ratelimit-limit: 100;w=21600
+ratelimit-remaining: 100;w=21600
+docker-ratelimit-source: <REDACTED>
+```
+
+The rate limit is there, just like in the docs, but do you see something else interesting? Look at this header: `docker-content-digest: sha256:767a3815c34823b355bed31760d5fa3daca0aec2ce15b217c9cd83229e0e2020`
+
+This is an image's digest. Can we check for updates by making `HEAD` requests to Docker Hub?
+
+The answer is yes:
+
+```
+$ set TOKEN $(curl -H "Accept: application/vnd.docker.distribution.manifest.list.v2+json" "https://auth.docker.io/token?service=registry.docker.io&scope=repository:library/busybox:pull" | jq -r .token)
+$ curl --head -H "Authorization: Bearer $TOKEN" -H "Accept: application/vnd.docker.distribution.manifest.v2.list+json" https://registry-1.docker.io/v2/library/busybox/manifests/latest
+HTTP/1.1 200 OK
+content-length: 6761
+content-type: application/vnd.oci.image.index.v1+json
+docker-content-digest: sha256:9ae97d36d26566ff84e8893c64a6dc4fe8ca6d1144bf5b87b2b85a32def253c7
+docker-distribution-api-version: registry/2.0
+etag: "sha256:9ae97d36d26566ff84e8893c64a6dc4fe8ca6d1144bf5b87b2b85a32def253c7"
+date: Tue, 16 Jul 2024 12:17:49 GMT
+strict-transport-security: max-age=31536000
+ratelimit-limit: 100;w=21600
+ratelimit-remaining: 100;w=21600
+docker-ratelimit-source: <REDACTED>
+```
+
+And then we can compare that with the digest of the image stored locally:
+
+```
+$ docker inspect busybox:latest | jq -r '.[0].RepoDigests[0]'
+busybox@sha256:9ae97d36d26566ff84e8893c64a6dc4fe8ca6d1144bf5b87b2b85a32def253c7
+```
+
+Notice how the 2 digests are the same. We can check for image updates without using up the rate limit!
+
+That's when I got the idea of writing a program to do this automatically.
+
+## The birth of Cup
+
+I initially intended to write a simple bash script but I chose not to for the following reasons:
+
+- I wanted something more than a simple script. WUD has a web UI and support for so many integrations! I had to match that some way!
+- Bash is slow and I was learning Rust at the time, so I wanted to practice (and make a proper project)
+
+It started out as a small CLI that could either check a single image, or check all the images.
+<Image src={old_cup} alt="The initial version of Cup" />
+It also couldn't check for updates to images not from Docker Hub, lacked a web UI and generally had many limitations. But it proved it could be done, quickly and efficiently. The binary was just 5 MB and took about 5 seconds for ~90 images on my development machine. That's insane!
+
+A few days later, I decided to completely rewrite it. I tried to write clean code, split it in files and fix every limitation from the previous version. I'm quite close. Here's what it looks like now:
+<Image src="https://github.com/sergi0g/cup/blob/main/screenshots/cup.gif?raw=true" alt="Cup's old CLI" />
+It also has a statically rendered web UI making it ideal for self hosting.
+<Image src={web_ui} alt="Cup's web UI"/>
+With some optimization (well ok, maybe a lot), the binary is 5 MB and that means I finally don't have to wait forever to pull the Docker image! Finally something that works nicely with my 1.5 MB/s internet connection! (Thank you powerline!)
+
+Now go ahead and try it out!

docs/pages/docs/_meta.json

@@ -0,0 +1,23 @@
+{
+    "index": {
+        "title": "Introduction"
+    },
+    "installation": {
+        "title": "Installation"
+    },
+    "configuration": {
+        "title": "Configuration"
+    },
+    "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

@@ -0,0 +1,58 @@
+import { Steps, Callout, Card, Cards } from "nextra-theme-docs";
+import { IconPaint, IconLockOpen, IconKey } from '@tabler/icons-react';
+
+# Configuration
+
+## Custom docker socket
+
+Sometimes, there may be a need to specify a custom docker socket. Cup provides the `-s` option for this.
+
+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.
+
+## Configuration file
+
+Cup has an option to be configured from a configuration file named `cup.json`.
+
+<Steps>
+### Create the configuration file
+Create a `cup.json` file somewhere on your system. For binary installs, a path like `~/.config/cup.json` is recommended.
+If you're running with Docker, you can create a `cup.json` in the directory you're running cup and mount it into the container. _In the next section you will need to use the path where you **mounted** the file_
+
+### Configure Cup from the configuration file
+Follow the guides below to customize your `cup.json`
+
+<Cards>
+    <Card icon={<IconKey />} title="Authentication" href="/docs/configuration/authentication" />
+    <Card icon={<IconLockOpen />} title="Insecure registries" href="/docs/configuration/insecure-registries" />
+    <Card icon={<IconPaint />} title="Theme" href="/docs/configuration/theme" />
+</Cards>
+
+Here's a full example:
+```json
+{
+    "authentication": {
+        "ghcr.io": "<YOUR_TOKEN_HERE>",
+        "registry-1.docker.io": "<YOUR_TOKEN_HERE>"
+    },
+    "theme": "blue",
+    "insecure_registries": ["localhost:5000", "my-insecure-registry.example.com"]
+}
+```
+
+### Run Cup with the new configuration file
+To let Cup know that you'd like it to use a custom configuration file, you can use the `-c` flag, followed by the _absolute_ path of the file.
+
+```bash
+$ cup -c /home/sergio/.config/cup.json check
+```
+
+```bash
+$ docker run -tv /var/run/docker.sock:/var/run/docker.sock -v /home/sergio/.config/cup.json:/config/cup.json ghcr.io/sergi0g/cup -c /config/cup.json serve
+```
+</Steps>

docs/pages/docs/configuration/authentication.mdx

@@ -0,0 +1,22 @@
+import { Callout } from 'nextra-theme-docs'
+
+# Authentication
+
+Some registries (or specific images) may require you to be authenticated. For those, you can modify `cup.json` like this:
+
+```json
+{
+    "authentication": {
+        "<YOUR_REGISTRY_DOMAIN_1>": "<YOUR_TOKEN_1>",
+        "<YOUR_REGISTRY_DOMAIN_2>": "<YOUR_TOKEN_2>"
+        // ...
+    },
+    // Other options
+}
+```
+
+You can use any registry, like `ghcr.io`, `quay.io`, `gcr.io`, etc.
+
+<Callout emoji="⚠️">
+For Docker Hub, use `registry-1.docker.io`
+</Callout>

docs/pages/docs/configuration/insecure-registries.mdx

@@ -0,0 +1,20 @@
+import { Callout } from 'nextra-theme-docs'
+
+# Insecure registries
+
+For the best security, Cup only connects to registries over SSL (HTTPS) by default. However, for people running a local registry that haven't configured SSL, this may be a problem.
+
+To solve this problem, `cup.json` has an `"insecure_registries"` option which allows you to specify exceptions
+
+Here's what it looks like:
+
+```json
+{
+    "insecure_registries": ["<INSECURE_REGISTRY_1>", "<INSECURE_REGISTRY_2>"],
+    // Other options
+}
+```
+
+<Callout emoji="⚠️">
+When configuring an insecure registry that doesn't run on port 80, don't forget to specify it (i.e. use `localhost:5000` instead of `localhost` if your registry is running on port `5000`)
+</Callout>

docs/pages/docs/configuration/theme.mdx

@@ -0,0 +1,31 @@
+import { Callout } from "nextra-theme-docs";
+import Image from "next/image";
+
+import blue from "../../../assets/blue_theme.png";
+import gray from "../../../assets/gray_theme.png";
+
+# Theme
+
+<Callout emoji="⚠️">
+This configuration option is only for the server
+</Callout>
+
+Cup initially had a blue theme which looked like this:
+
+<Image alt="Screenshot of blue theme" src={blue} />
+
+This was replaced by a more neutral theme which is now the default:
+
+<Image alt="Screenshot of neutral theme" src={gray} />
+
+However, you can get the old theme back by adding the `theme` key to your `cup.json`
+Available values are `default` and `blue`.
+
+Here's an example:
+
+```json
+{
+    "theme": "blue",
+    // 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/index.mdx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import cup from "../../assets/cup.gif";
+import { Cards, Card } from "nextra-theme-docs";
+import { IconBrandDocker, IconPackage } from "@tabler/icons-react";
+
+# Introduction
+
+<Image src={cup} unoptimized />
+
+Cup is a lightweight alternative to [What's up Docker?](https://github.com/fmartinou/whats-up-docker) written in Rust.
+
+# 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.
+- 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? 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.
+- 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!
+
+# Installation
+
+<Cards>
+    <Card icon={<IconBrandDocker />} title="With Docker" href="/docs/installation/docker" />
+    <Card icon={<IconPackage />} title="As a binary" href="/docs/installation/binary" />
+</Cards>

docs/pages/docs/installation/_meta.json

@@ -0,0 +1,8 @@
+{
+    "docker": {
+        "title": "With Docker"
+    },
+    "binary": {
+        "title": "As a binary"
+    }
+}

docs/pages/docs/installation/binary.mdx

@@ -0,0 +1,25 @@
+import { Callout, Card, Steps } from "nextra-theme-docs";
+import { IconFileDescription } from "@tabler/icons-react";
+
+# As a binary
+## Introduction
+
+This guide will help you install Cup from a binary.
+
+## Installation
+
+<Steps>
+### Download binary
+Go to https://github.com/sergi0g/cup/releases/latest.
+
+Depending on your system's architecture, choose the binary for your system. For example, for an `x86_64` machine, you should download `cup-x86_64-unknown-linux-musl`
+<Callout>
+You can use the command `uname -i` to find this
+</Callout>
+### Add binary to path
+Move the binary you downloaded to a directory in your path. You can usually get a list those directories by running `echo $PATH`. On most Linux systems, moving it to `~/.local/bin` is usually enough.
+</Steps>
+
+That's it! Cup is ready to be used. Head over to the Usage page to get started.
+<br />
+<Card icon={<IconFileDescription />} title="Usage" href="/docs/usage" />

docs/pages/docs/installation/docker.mdx

@@ -0,0 +1,21 @@
+import { Callout, Card } from "nextra-theme-docs";
+import { IconFileDescription } from "@tabler/icons-react";
+
+# With Docker
+## Introduction
+
+This guide will help you install Cup as a Docker container. It is the easiest installation method and also makes updating Cup very easy.
+
+## Installation
+
+To get started, open up a terminal and run the following command.
+```bash
+$ docker pull ghcr.io/sergi0g/cup
+```
+<Callout emoji="⚠️">
+If you aren't in the `docker` group, please ensure you run all commands as a user who does. In most cases, you'll just need to prefix the `docker` commands with `sudo`
+</Callout>
+
+That's it! Cup is ready to be used. Head over to the Usage page to get started.
+<br />
+<Card icon={<IconFileDescription />} title="Usage" href="/docs/usage" />

docs/pages/docs/nightly.mdx

@@ -0,0 +1,21 @@
+import { Callout } from "nextra-theme-docs"
+
+# Using the latest version
+
+The installation instructions you previously followed describe how to install Cup's stable version.
+
+However, it is only updated when a new release is created, so if you want the latest features, you'll need to install Cup's nightly version.
+
+Cup's nightly version always contains the latest changes in the main branch.
+
+<Callout emoji="⚠️">
+There is no guarantee that the nightly version will always work. There may be breaking changes or a bad commit and it may not work properly. Install nightly only if you know what you are doing. These instructions will assume you have the technical know-how to follow them. If you do not, please use the stable release
+</Callout>
+
+## With Docker
+
+Instead of `ghcr.io/sergi0g/cup`, use `ghcr.io/sergi0g/cup:nightly`
+
+## As a binary
+
+Go to a [nightly workflow run](https://github.com/sergi0g/cup/actions/workflows/nightly.yml) and download the artifact for your system.

docs/pages/docs/usage.mdx

@@ -0,0 +1,11 @@
+import { IconServer, IconTerminal } from "@tabler/icons-react";
+import { Cards, Card } from "nextra-theme-docs";
+
+# Usage
+
+You can use Cup in 2 different ways. As a CLI or as a server. You can learn more about each mode in its corresponding page
+
+<Cards>
+    <Card icon={<IconTerminal />} title="CLI" href="/docs/usage/cli" />
+    <Card icon={<IconServer />} title="Server" href="/docs/usage/server" />
+</Cards>

docs/pages/docs/usage/cli.mdx

@@ -0,0 +1,73 @@
+import Image from "next/image";
+import cup from "../../../assets/cup.gif";
+
+# CLI
+
+Cup's CLI provides the `cup check` command.
+
+## Basic Usage
+
+### Check for all updates
+```ansi
+$ cup check
+nginx:alpine                                      Update available
+redis:7                                           Update available
+redis:alpine                                      Update available
+...
+centos:7                                                Up to date
+mcr.microsoft.com/devcontainers/go:0-1.19-bullseye      Up to date
+rockylinux:9-minimal                                    Up to date
+rabbitmq:3.11.9-management                              Up to date
+...
+some/deleted:image                                         Unknown
+```
+
+### Check for updates to a specific image
+```
+$ cup check node:latest
+node:latest has an update available
+```
+
+## Enable icons
+You can also enable icons if you have a [Nerd Font](https://nerdfonts.com) installed.
+
+<Image src={cup} unoptimized />
+
+## JSON output
+When integrating Cup with other services (e.g. webhooks or a dashboard), you may find Cup's JSON output functionality useful. 
+
+It provides some useful metrics (see [server](/docs/usage/server) for more information), along with a list of images and whether they have an update or not.
+
+```
+$ cup check -r
+{"metrics":{"update_available":4,"monitored_images":25,"unknown":1,"up_to_date":20},"images":{"ghcr.io/immich-app/immich-server:v1.106.4":false,"portainer/portainer-ce:2.20.3-alpine":false,"ghcr.io/runtipi/runtipi:v3.4.1":false,...}}
+```
+
+Here is how it would look in Typescript:
+
+```ts
+type CupData = {
+    metrics: {
+        monitored_images: number,
+        up_to_date: number,
+        update_available: number,
+        unknown: number
+    },
+    images: {
+        [image: string]: boolean | null
+    }
+}
+```
+
+## Usage with Docker
+
+If you're using the Docker image, just replace all occurences of `cup` in the examples with `docker run -tv /var/run/docker.sock:/var/run/docker.sock ghcr.io/sergi0g/cup`.
+
+For example, this:
+```bash /check node:latest/
+$ cup check node:latest
+```
+becomes:
+```bash /check node:latest/
+$ docker run -tv /var/run/docker.sock:/var/run/docker.sock ghcr.io/sergi0g/cup check node:latest
+```

docs/pages/docs/usage/server.mdx

@@ -0,0 +1,53 @@
+import { Callout } from "nextra-theme-docs";
+
+# Server
+
+The server provides the `cup serve` command.
+
+## Basic usage
+
+```ansi
+$ cup serve
+2024-07-17T09:08:38.724922Z    INFO   xitca_server::net  :  Started Tcp listening on: Some(0.0.0.0:8000)                                                                              
+2024-07-17T09:08:38.725076Z    WARN   xitca_server::server::future  :  ServerFuture::wait is called from within tokio context. It would block current thread from handling async tasks
+2024-07-17T09:08:38.725248Z    INFO   xitca_server::worker  :  Started xitca-server-worker-0                                                                                          
+2024-07-17T09:08:38.725343Z    INFO   xitca_server::worker  :  Started xitca-server-worker-1                                                                                          
+2024-07-17T09:08:38.725580Z    INFO   xitca_server::worker  :  Started xitca-server-worker-2                                                                                          
+2024-07-17T09:08:38.725607Z    INFO   xitca_server::worker  :  Started xitca-server-worker-3                                                                                          
+2024-07-17T09:08:41.390783Z    INFO   request  {  method  = GET  uri  = / }  :   on_request  :  serving request                       
+2024-07-17T09:08:41.390905Z    INFO   request  {  method  = GET  uri  = / }  :   on_response  :  sending response
+```
+
+This will launch the server on port `8000`. To access it, visit `http://<YOUR_IP>:8000` (replace `<YOUR_IP>` with the IP address of the machine running Cup.)
+
+<Callout>
+The URL `http://<YOUR_IP>:8000/json` is also available for usage with integrations.
+</Callout>
+
+## Use a different port
+
+Pass the `-p` argument with the port you want to use
+
+```ansi
+$ cup serve -p 9000
+2024-07-17T09:08:38.724922Z    INFO   xitca_server::net  :  Started Tcp listening on: Some(0.0.0.0:9000)                                                                              
+2024-07-17T09:08:38.725076Z    WARN   xitca_server::server::future  :  ServerFuture::wait is called from within tokio context. It would block current thread from handling async tasks
+2024-07-17T09:08:38.725248Z    INFO   xitca_server::worker  :  Started xitca-server-worker-0                                                                                          
+2024-07-17T09:08:38.725343Z    INFO   xitca_server::worker  :  Started xitca-server-worker-1                                                                                          
+2024-07-17T09:08:38.725580Z    INFO   xitca_server::worker  :  Started xitca-server-worker-2                                                                                          
+2024-07-17T09:08:38.725607Z    INFO   xitca_server::worker  :  Started xitca-server-worker-3                                                                                          
+2024-07-17T09:08:41.390783Z    INFO   request  {  method  = GET  uri  = / }  :   on_request  :  serving request                       
+2024-07-17T09:08:41.390905Z    INFO   request  {  method  = GET  uri  = / }  :   on_response  :  sending response
+```
+
+## Usage with Docker
+If you're using the Docker image, just replace all occurences of `cup` in the examples with `docker run -tv /var/run/docker.sock:/var/run/docker.sock -p <PORT>:<PORT> ghcr.io/sergi0g/cup`, where `<PORT>` is the port Cup will be using.
+
+For example, this:
+```bash /serve -p 9000/
+$ cup serve -p 9000
+```
+becomes:
+```bash /serve -p 9000/
+$ docker run -tv /var/run/docker.sock:/var/run/docker.sock -p 9000:9000 ghcr.io/sergi0g/cup serve -p 9000
+```

docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

docs/styles.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.tabler-icon {
+    color: rgb(250 250 250 / var(--tw-text-opacity)) !important
+}

docs/tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "src/template.liquid"
+    "theme.config.jsx"
   ],
   theme: {
     extend: {},

docs/theme.config.jsx

@@ -0,0 +1,111 @@
+import { ThemeSwitch } from "nextra-theme-docs";
+import { useRouter } from "next/router";
+import { useConfig } from "nextra-theme-docs";
+
+export default {
+  docsRepositoryBase: "https://github.com/sergi0g/cup/tree/main/docs",
+  useNextSeoProps() {
+    const { asPath } = useRouter()
+    if (asPath !== '/') {
+      return {
+        titleTemplate: '%s – Cup'
+      }
+    }
+  },
+  head: () => {
+    const { asPath } = useRouter()
+    const { frontMatter } = useConfig()
+    const url =
+      'https://sergi0g.github.io/cup/docs/' +
+      (`/${asPath}`);
+ 
+    return (
+      <>
+        <meta property="og:url" content={url} />
+        <meta property="og:title" content={frontMatter.title || 'Cup'} />
+        <meta
+          property="og:description"
+          content={frontMatter.description || 'The easiest way to manage your container updates'}
+        />
+      </>
+    )
+  },
+  logo: (
+    <div className="flex items-center">
+      <Logo />
+      <h1 className="font-bold ml-2">Cup</h1>
+    </div>
+  ),
+  logoLink: "https://sergi0g.github.io/cup/docs/",
+  project: {
+    link: "https://github.com/sergi0g/cup/",
+  },
+  navbar: {
+    extraContent: <ThemeSwitch lite className="[&_span]:hidden" />,
+  },
+  toc: {
+    backToTop: true,
+  },
+  footer: {
+    text: null,
+  },
+  navigation: false,
+};
+
+function Logo() {
+  return (
+    <svg
+      viewBox="0 0 128 128"
+      style={{ height: "calc(var(--nextra-navbar-height) * 0.6)" }}
+    >
+      <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>
+  );
+}

src/check.rs

@@ -0,0 +1,106 @@
+use std::collections::{HashMap, HashSet};
+
+use crate::{
+    debug,
+    docker::get_images_from_docker_daemon,
+    image::Image,
+    registry::{check_auth, get_latest_digests, get_token},
+    utils::{new_reqwest_client, unsplit_image, CliConfig},
+};
+
+#[cfg(feature = "cli")]
+use crate::docker::get_image_from_docker_daemon;
+#[cfg(feature = "cli")]
+use crate::registry::get_latest_digest;
+
+pub trait Unique<T> {
+    // So we can filter vecs for duplicates
+    fn unique(&mut self);
+}
+
+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();
+        self.retain(|item| seen.insert(item.clone()));
+    }
+}
+
+pub async fn get_all_updates(options: &CliConfig) -> Vec<(String, Option<bool>)> {
+    let local_images = get_images_from_docker_daemon(options).await;
+    let mut image_map: HashMap<String, Option<String>> = HashMap::with_capacity(local_images.len());
+    for image in &local_images {
+        let img = unsplit_image(image);
+        image_map.insert(img, image.digest.clone());
+    }
+    let mut registries: Vec<&String> = local_images.iter().map(|image| &image.registry).collect();
+    registries.unique();
+    let mut remote_images: Vec<Image> = Vec::with_capacity(local_images.len());
+    let client = new_reqwest_client();
+    for registry in registries {
+        if options.verbose {
+            debug!("Checking images from registry {}", registry)
+        }
+        let images: Vec<&Image> = local_images
+            .iter()
+            .filter(|image| &image.registry == registry)
+            .collect();
+        let credentials = options.config["authentication"][registry]
+            .clone()
+            .take_string()
+            .or(None);
+        let mut latest_images = match check_auth(registry, options, &client).await {
+            Some(auth_url) => {
+                let token = get_token(images.clone(), &auth_url, &credentials, &client).await;
+                if options.verbose {
+                    debug!("Using token {}", token);
+                }
+                get_latest_digests(images, Some(&token), options, &client).await
+            }
+            None => get_latest_digests(images, None, options, &client).await,
+        };
+        remote_images.append(&mut latest_images);
+    }
+    if options.verbose {
+        debug!("Collecting results")
+    }
+    let mut result: Vec<(String, Option<bool>)> = Vec::new();
+    remote_images.iter().for_each(|image| {
+        let img = unsplit_image(image);
+        match &image.digest {
+            Some(d) => {
+                let r = d != image_map.get(&img).unwrap().as_ref().unwrap();
+                result.push((img, Some(r)))
+            }
+            None => result.push((img, None)),
+        }
+    });
+    result
+}
+
+#[cfg(feature = "cli")]
+pub async fn get_update(image: &str, options: &CliConfig) -> Option<bool> {
+    let local_image = get_image_from_docker_daemon(options.socket.clone(), image).await;
+    let credentials = options.config["authentication"][&local_image.registry]
+        .clone()
+        .take_string()
+        .or(None);
+    let client = new_reqwest_client();
+    let token = match check_auth(&local_image.registry, options, &client).await {
+        Some(auth_url) => get_token(vec![&local_image], &auth_url, &credentials, &client).await,
+        None => String::new(),
+    };
+    if options.verbose {
+        debug!("Using token {}", token);
+    };
+    let remote_image = match token.as_str() {
+        "" => get_latest_digest(&local_image, None, options, &client).await,
+        _ => get_latest_digest(&local_image, Some(&token), options, &client).await,
+    };
+    match &remote_image.digest {
+        Some(d) => Some(d != &local_image.digest.unwrap()),
+        None => None,
+    }
+}

src/docker.rs

@@ -1,12 +1,14 @@
-use bollard::{
-    secret::ImageSummary,
-    ClientVersion, Docker,
-};
+use bollard::{secret::ImageSummary, 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,
+    utils::{split_image, CliConfig},
+};
 
 fn create_docker_client(socket: Option<String>) -> Docker {
     let client: Result<Docker, bollard::errors::Error> = match socket {
@@ -27,35 +29,24 @@ 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);
+pub async fn get_images_from_docker_daemon(options: &CliConfig) -> Vec<Image> {
+    let client: Docker = create_docker_client(options.socket.clone());
     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();
+    let mut handles = 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(),
-                    ),
-                });
+        handles.push(Image::from(image, options))
     }
-        }
-    }
-    result
+    join_all(handles)
+        .await
+        .iter()
+        .filter(|img| img.is_some())
+        .map(|img| img.clone().unwrap())
+        .collect()
 }
 
 #[cfg(feature = "cli")]

src/formatting.rs

@@ -3,7 +3,7 @@ use std::time::Duration;
 use indicatif::{ProgressBar, ProgressStyle};
 use json::object;
 
-use crate::utils::sort_update_vec;
+use crate::utils::{sort_update_vec, to_json};
 
 pub fn print_updates(updates: &[(String, Option<bool>)], icons: &bool) {
     let sorted_updates = sort_update_vec(updates);
@@ -40,11 +40,7 @@ pub fn print_updates(updates: &[(String, Option<bool>)], icons: &bool) {
 }
 
 pub fn print_raw_updates(updates: &[(String, Option<bool>)]) {
-    let mut result = json::Array::new();
-    for update in updates {
-        result.push(object! {image: update.0.clone(), has_update: update.1});
-    }
-    println!("{}", json::stringify(result));
+    println!("{}", json::stringify(to_json(updates)));
 }
 
 pub fn print_update(name: &str, has_update: &Option<bool>) {
@@ -62,8 +58,8 @@ pub fn print_update(name: &str, has_update: &Option<bool>) {
 }
 
 pub fn print_raw_update(name: &str, has_update: &Option<bool>) {
-    let result = object!{image: name, has_update: *has_update};
-    println!("{}", json::stringify(result));
+    let result = object! {images: {[name]: *has_update}};
+    println!("{}", result);
 }
 
 pub struct Spinner {

src/image.rs

@@ -1,3 +1,10 @@
+use bollard::secret::ImageSummary;
+
+use crate::{
+    debug,
+    utils::{split_image, CliConfig},
+};
+
 #[derive(Clone, Debug)]
 pub struct Image {
     pub registry: String,
@@ -5,3 +12,30 @@ pub struct Image {
     pub tag: String,
     pub digest: Option<String>,
 }
+
+impl Image {
+    pub async fn from(image: ImageSummary, options: &CliConfig) -> Option<Self> {
+        if !image.repo_tags.is_empty() && !image.repo_digests.is_empty() {
+            let (registry, repository, tag) = split_image(&image.repo_tags[0]);
+            let image = Image {
+                registry,
+                repository,
+                tag,
+                digest: Some(
+                    image.repo_digests[0]
+                        .clone()
+                        .split('@')
+                        .collect::<Vec<&str>>()[1]
+                        .to_string(),
+                ),
+            };
+            return Some(image);
+        } else if options.verbose {
+            debug!(
+                "Skipped an image\nTags: {:#?}\nDigests: {:#?}",
+                image.repo_tags, image.repo_digests
+            )
+        }
+        None
+    }
+}

src/main.rs

@@ -1,22 +1,15 @@
+#[cfg(feature = "cli")]
+use check::{get_all_updates, get_update};
+use chrono::Local;
 use clap::{Parser, Subcommand};
 #[cfg(feature = "cli")]
-use docker::get_image_from_docker_daemon;
-use docker::get_images_from_docker_daemon;
-#[cfg(feature = "cli")]
 use formatting::{print_raw_update, print_raw_updates, print_update, print_updates, Spinner};
-use image::Image;
-use rayon::iter::{IntoParallelRefIterator, ParallelIterator};
-#[cfg(feature = "cli")]
-use registry::get_latest_digest;
-use registry::{check_auth, get_latest_digests, get_token};
 #[cfg(feature = "server")]
 use server::serve;
-use std::{
-    collections::{HashMap, HashSet},
-    sync::Mutex,
-};
-use utils::unsplit_image;
+use std::path::PathBuf;
+use utils::{load_config, CliConfig};
 
+pub mod check;
 pub mod docker;
 #[cfg(feature = "cli")]
 pub mod formatting;
@@ -31,6 +24,15 @@ pub mod utils;
 struct Cli {
     #[arg(short, long, default_value = None)]
     socket: Option<String>,
+    #[arg(short, long, default_value_t = String::new(), help = "Config file path")]
+    config_path: String,
+    #[arg(
+        short,
+        long,
+        default_value_t = false,
+        help = "Enable verbose (debug) logging"
+    )]
+    verbose: bool,
     #[command(subcommand)]
     command: Option<Commands>,
 }
@@ -43,121 +45,78 @@ enum Commands {
         image: Option<String>,
         #[arg(short, long, default_value_t = false, help = "Enable icons")]
         icons: bool,
-        #[arg(short, long, default_value_t = false, help = "Output JSON instead of formatted text")]
+        #[arg(
+            short,
+            long,
+            default_value_t = false,
+            help = "Output JSON instead of formatted text"
+        )]
         raw: bool,
     },
     #[cfg(feature = "server")]
     Serve {
-        #[arg(short, long, default_value_t = 8000, help = "Use a different port for the server")]
+        #[arg(
+            short,
+            long,
+            default_value_t = 8000,
+            help = "Use a different port for the server"
+        )]
         port: u16,
     },
 }
 
-pub trait Unique<T> {
-    // So we can filter vecs for duplicates
-    fn unique(&mut self);
-}
-
-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();
-        self.retain(|item| seen.insert(item.clone()));
-    }
-}
-
 #[tokio::main]
 async fn main() {
     let cli = Cli::parse();
+    let cfg_path = match cli.config_path.as_str() {
+        "" => None,
+        path => Some(PathBuf::from(path)),
+    };
+    if cli.verbose {
+        debug!("CLI options:");
+        debug!("Config path: {:?}", cfg_path);
+        debug!("Socket: {:?}", &cli.socket)
+    }
+    let cli_config = CliConfig {
+        socket: cli.socket,
+        verbose: cli.verbose,
+        config: load_config(cfg_path),
+    };
+    if cli.verbose {
+        debug!("Config: {}", cli_config.config)
+    }
     match &cli.command {
         #[cfg(feature = "cli")]
         Some(Commands::Check { image, icons, raw }) => match image {
             Some(name) => {
-                let has_update = get_update(name, cli.socket).await;
+                let has_update = get_update(name, &cli_config).await;
                 match raw {
                     true => print_raw_update(name, &has_update),
                     false => print_update(name, &has_update),
                 };
             }
             None => {
+                let start = Local::now().timestamp_millis();
                 match raw {
-                    true => print_raw_updates(&get_all_updates(cli.socket).await),
+                    true => {
+                        let updates = get_all_updates(&cli_config).await;
+                        print_raw_updates(&updates);
+                    }
                     false => {
                         let spinner = Spinner::new();
-                        let updates = get_all_updates(cli.socket).await;
+                        let updates = get_all_updates(&cli_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 updates = get_all_updates(cli.socket).await;
-            let _ = serve(port, &updates).await;
+            let _ = serve(port, &cli_config).await;
         }
         None => (),
     }
 }
-
-async fn get_all_updates(socket: Option<String>) -> 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 mut latest_images = match check_auth(registry) {
-            Some(auth_url) => {
-                let token = get_token(images.clone(), &auth_url);
-                get_latest_digests(images, Some(&token))
-            }
-            None => get_latest_digests(images, None),
-        };
-        remote_images.append(&mut latest_images);
-    }
-    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)))
-            }
-            None => result_mutex.lock().unwrap().push((img, None)),
-        }
-    });
-    let result = result_mutex.lock().unwrap().clone();
-    result
-}
-
-#[cfg(feature = "cli")]
-async fn get_update(image: &str, socket: Option<String>) -> Option<bool> {
-    let local_image = get_image_from_docker_daemon(socket, image).await;
-    let token = match check_auth(&local_image.registry) {
-        Some(auth_url) => get_token(vec![&local_image], &auth_url),
-        None => String::new(),
-    };
-    let remote_image = match token.as_str() {
-        "" => get_latest_digest(&local_image, None),
-        _ => get_latest_digest(&local_image, Some(&token)),
-    };
-    match &remote_image.digest {
-        Some(d) => Some(d != &local_image.digest.unwrap()),
-        None => None,
-    }
-}

src/registry.rs

@@ -1,100 +1,171 @@
-use std::sync::Mutex;
-
-use rayon::iter::{IntoParallelRefIterator, ParallelIterator};
-use ureq::Error;
+use futures::future::join_all;
+use json::JsonValue;
 
 use http_auth::parse_challenges;
+use reqwest_middleware::ClientWithMiddleware;
 
-use crate::{error, image::Image};
+use crate::{debug, error, image::Image, utils::CliConfig, warn};
 
-pub fn check_auth(registry: &str) -> Option<String> {
-    let response = ureq::get(&format!("https://{}/v2/", registry)).call();
+pub async fn check_auth(
+    registry: &str,
+    options: &CliConfig,
+    client: &ClientWithMiddleware,
+) -> Option<String> {
+    let protocol = if options.config["insecure_registries"].contains(registry) {
+        if options.verbose {
+            debug!(
+                "{} is configured as an insecure registry. Downgrading to HTTP",
+                registry
+            );
+        };
+        "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!("Server returned invalid response!"),
-        },
-        Err(e) => error!("{}", e),
+        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 {
+                warn!(
+                    "Received unexpected status code {}\nResponse: {}",
+                    status,
+                    r.text().await.unwrap()
+                );
+                None
+            }
+        }
+        Err(e) => {
+            if e.is_connect() {
+                warn!("Connection to registry {} failed.", &registry);
+                None
+            } else {
+                error!("Unexpected error: {}", e.to_string())
+            }
+        }
     }
 }
 
-pub fn get_latest_digest(image: &Image, token: Option<&String>) -> Image {
-    let mut request = ureq::head(&format!(
-        "https://{}/v2/{}/manifests/{}",
-        &image.registry, &image.repository, &image.tag
+pub async fn get_latest_digest(
+    image: &Image,
+    token: Option<&String>,
+    options: &CliConfig,
+    client: &ClientWithMiddleware,
+) -> Image {
+    let protocol = if options.config["insecure_registries"]
+        .contains(json::JsonValue::from(image.registry.clone()))
+    {
+        "http"
+    } else {
+        "https"
+    };
+    let mut request = client.head(format!(
+        "{}://{}/v2/{}/manifests/{}",
+        protocol, &image.registry, &image.repository, &image.tag
     ));
     if let Some(t) = token {
-        request = request.set("Authorization", &format!("Bearer {}", t));
+        request = request.header("Authorization", &format!("Bearer {}", t));
     }
     let raw_response = match request
-        .set("Accept", "application/vnd.docker.distribution.manifest.list.v2+json, application/vnd.oci.image.index.v1+json")
-        .call()
+        .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) => response,
-        Err(Error::Status(401, response)) => {
+        Ok(response) => {
+            let status = response.status();
+            if status == 401 {
                 if token.is_some() {
-                error!("Failed to authenticate with given token!\n{}", token.unwrap())
+                    warn!("Failed to authenticate to registry {} with given token!\n{}", &image.registry, token.unwrap());
                 } else {
-                return get_latest_digest(
-                    image,
-                    Some(&get_token(
-                        vec![image],
-                        &parse_www_authenticate(response.header("www-authenticate").unwrap()),
-                    )),
-                );
+                    warn!("Registry requires authentication");
                 }
+                return Image { digest: None, ..image.clone() }
+            } else if status == 404 {
+                warn!("Image {:?} not found", &image);
+                return Image { digest: None, ..image.clone() }
+            } else {
+                response
             }
-        Err(Error::Status(_, _)) => {
-            return Image {
-                digest: None,
-                ..image.clone()
+        },
+        Err(e) => {
+            if e.is_connect() {
+                warn!("Connection to registry failed.");
+                return Image { digest: None, ..image.clone() }
+            } else {
+                error!("Unexpected error: {}", e.to_string())
             }
-        }
-        Err(ureq::Error::Transport(e)) => error!("Failed to send request!\n{}", e),
+        },
     };
-    match raw_response.header("docker-content-digest") {
+    match raw_response.headers().get("docker-content-digest") {
         Some(digest) => Image {
-            digest: Some(digest.to_string()),
+            digest: Some(digest.to_str().unwrap().to_string()),
             ..image.clone()
         },
-        None => error!("Server returned invalid response! No docker-content-digest!"),
+        None => error!(
+            "Server returned invalid response! No docker-content-digest!\n{:#?}",
+            raw_response
+        ),
     }
 }
 
-pub fn get_latest_digests(images: Vec<&Image>, token: Option<&String>) -> Vec<Image> {
-    let result: Mutex<Vec<Image>> = Mutex::new(Vec::new());
-    images.par_iter().for_each(|&image| {
-        let digest = get_latest_digest(image, token).digest;
-        result.lock().unwrap().push(Image {
-            digest,
-            ..image.clone()
-        });
-    });
-    let r = result.lock().unwrap().clone();
-    r
+pub async fn get_latest_digests(
+    images: Vec<&Image>,
+    token: Option<&String>,
+    options: &CliConfig,
+    client: &ClientWithMiddleware,
+) -> Vec<Image> {
+    let mut handles = Vec::new();
+    for image in images {
+        handles.push(get_latest_digest(image, token, options, client))
+    }
+    join_all(handles).await
 }
 
-pub fn get_token(images: Vec<&Image>, auth_url: &str) -> String {
+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 {
+    for image in &images {
         final_url = format!("{}&scope=repository:{}:pull", final_url, image.repository);
     }
-    let raw_response = match ureq::get(&final_url)
-        .set("Accept", "application/vnd.oci.image.index.v1+json")
-        .call()
-    {
-        Ok(response) => match response.into_string() {
+    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(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 = match json::parse(&raw_response) {
+    let parsed_token_response: JsonValue = match json::parse(&raw_response) {
         Ok(parsed) => parsed,
         Err(e) => {
             error!("Failed to parse server response\n{}", e)
@@ -117,6 +188,6 @@ fn parse_www_authenticate(www_auth: &str) -> String {
             error!("Unsupported scheme {}", &challenge.scheme)
         }
     } else {
-        error!("No challenge provided");
+        error!("No challenge provided by the server");
     }
 }

src/server.rs

@@ -1,90 +1,163 @@
-use std::sync::Mutex;
+use std::sync::Arc;
 
+use chrono::Local;
+use json::JsonValue;
 use liquid::{object, Object};
-use rayon::iter::{IntoParallelRefIterator, ParallelIterator};
+use tokio::sync::Mutex;
 use xitca_web::{
     body::ResponseBody,
-    handler::{handler_service, path::PathOwn, state::StateOwn},
-    http::{Method, WebResponse},
+    handler::{handler_service, path::PathRef, state::StateRef},
+    http::WebResponse,
+    middleware::Logger,
     route::get,
     App,
 };
 
-const RAW_TEMPLATE: &str = include_str!("template.liquid");
-const STYLE: &str = include_str!("index.css");
+use crate::{
+    check::get_all_updates,
+    error, info,
+    utils::{sort_update_vec, to_json, CliConfig},
+};
 
-pub async fn serve(port: &u16, updates: &[(String, Option<bool>)]) -> std::io::Result<()> {
-    println!("Serving on http://0.0.0.0:{}", port);
+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, options: &CliConfig) -> std::io::Result<()> {
+    info!("Starting server, please wait...");
+    let data = ServerData::new(options).await;
+    info!("Ready to start!");
     App::new()
-        .with_state(updates.to_owned())
-        .at("/", get(handler_service(home)))
+        .with_state(Arc::new(Mutex::new(data)))
+        .at("/", get(handler_service(_static)))
         .at("/json", get(handler_service(json)))
+        .at("/refresh", get(handler_service(refresh)))
+        .at("/*", get(handler_service(_static)))
+        .enclosed(Logger::new())
         .serve()
         .bind(format!("0.0.0.0:{}", port))?
         .run()
         .wait()
 }
 
-async fn home(
-    updates: StateOwn<Vec<(String, Option<bool>)>>,
-    method: Method,
-    path: PathOwn,
-) -> WebResponse {
+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(),
+    )))
+}
+
+async fn refresh(data: StateRef<'_, Arc<Mutex<ServerData>>>) -> WebResponse {
+    data.lock().await.refresh().await;
+    WebResponse::new(ResponseBody::from("OK"))
+}
+
+struct ServerData {
+    template: String,
+    raw_updates: Vec<(String, Option<bool>)>,
+    json: JsonValue,
+    options: CliConfig,
+    theme: &'static str,
+}
+
+impl ServerData {
+    async fn new(options: &CliConfig) -> Self {
+        let mut s = Self {
+            options: options.clone(),
+            template: String::new(),
+            json: json::object! {
+                metrics: json::object! {},
+                images: json::object! {},
+            },
+            raw_updates: Vec::new(),
+            theme: "neutral",
+        };
+        s.refresh().await;
+        s
+    }
+    async fn refresh(&mut self) {
+        let start = Local::now().timestamp_millis();
+        if !self.raw_updates.is_empty() {
+            info!("Refreshing data");
+        }
+        let updates = sort_update_vec(&get_all_updates(&self.options).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 = updates
-        .0
-        .par_iter()
-        .map(|(name, image)| match image {
-            Some(value) => {
-                if *value {
-                    object!({"name": name, "status": "update-available"})
-                } else {
-                    object!({"name": name, "status": "up-to-date"})
-                }
-            }
-            None => object!({"name": name, "status": "unknown"}),
+        let images = self
+            .raw_updates
+            .iter()
+            .map(|(name, has_update)| match has_update {
+                Some(v) => object!({"name": name, "has_update": v.to_string()}), // Liquid kinda thinks false == nil, so we'll be comparing strings from now on
+                None => object!({"name": name, "has_update": "null"}),
             })
             .collect::<Vec<Object>>();
-    let uptodate = images
-        .par_iter()
-        .filter(|&o| o["status"] == "up-to-date")
-        .collect::<Vec<&Object>>()
-        .len();
-    let updatable = images
-        .par_iter()
-        .filter(|&o| o["status"] == "update-available")
-        .collect::<Vec<&Object>>()
-        .len();
-    let unknown = images
-        .par_iter()
-        .filter(|&o| o["status"] == "unknown")
-        .collect::<Vec<&Object>>()
-        .len();
+        self.json = to_json(&self.raw_updates);
+        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.options.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 globals = object!({
-        "metrics": [{"name": "Monitored images", "value": images.len()}, {"name": "Up to date", "value": uptodate}, {"name": "Updates available", "value": updatable}, {"name": "Unknown", "value": unknown}],
+            "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.format("%Y-%m-%d %H:%M:%S").to_string(),
+            "theme": &self.theme
         });
-    let result = template.render(&globals).unwrap();
-    println!("Received {} request on {}", method, path.0);
-    WebResponse::new(ResponseBody::from(result))
-}
-
-async fn json(
-    updates: StateOwn<Vec<(String, Option<bool>)>>,
-    method: Method,
-    path: PathOwn,
-) -> WebResponse {
-    let result_mutex: Mutex<json::object::Object> = Mutex::new(json::object::Object::new());
-    updates.par_iter().for_each(|image| match image.1 {
-        Some(b) => result_mutex.lock().unwrap().insert(&image.0, json::from(b)),
-        None => result_mutex.lock().unwrap().insert(&image.0, json::Null),
-    });
-    let result = json::stringify(result_mutex.lock().unwrap().clone());
-    println!("Received {} request on {}", method, path.0);
-    WebResponse::new(ResponseBody::from(result))
+        self.template = template.render(&globals).unwrap();
+    }
 }

src/template.liquid

@@ -1,129 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf8">
-    <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;
-        background-color: #e5e7eb;
-        z-index: 1;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .gi::before, .gi::after {
-            background-color: #1f2937;
-        }
-      }
-
-      .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;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-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">
-          <h1 class="text-6xl font-bold dark:text-white">Cup🥤</h1>
-          <div class="shadow-sm bg-white dark:bg-gray-900 rounded-md my-8">
-            <dl class="lg:grid-cols-4 md:grid-cols-2 gap-1 grid-cols-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-gray-500 dark:text-gray-400 leading-6 font-medium">{{ metric.name }}</dt>
-                    <dd class="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl flex-none w-full">
-                      {{ metric.value }}
-                    </dd>
-                  </div>
-                </div>
-              {% endfor %}
-            </dl>
-          </div>
-          <div class="shadow-sm bg-white dark:bg-gray-900 rounded-md my-8">
-            <ul class="*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-gray-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.status == 'up-to-date' %}
-                    <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.status == 'update-available' %}
-                    <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.status == 'unknown' %}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      class="text-gray-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,33 +1,33 @@
-use regex::Regex;
+use std::path::PathBuf;
+
+use crate::{error, image::Image};
+use json::{object, JsonValue};
 use once_cell::sync::Lazy;
+use regex::Regex;
+use reqwest_middleware::{ClientBuilder, ClientWithMiddleware};
+use reqwest_retry::{policies::ExponentialBackoff, RetryTransientMiddleware};
 
-#[macro_export]
-macro_rules! error {
-    ($($arg:tt)*) => ({
-        eprintln!($($arg)*);
-        std::process::exit(1);
-    })
-}
-
-// 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(|| {
+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()
-    });
+});
+
+/// 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) {
     match RE.captures(image) {
         Some(c) => {
-            return (
-                match c.name("registry") {
+            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('/') {
+                        if !repo.contains('/') && registry == "registry-1.docker.io" {
                             format!("library/{}", repo)
                         } else {
                             repo
@@ -39,32 +39,136 @@ pub fn split_image(image: &str) -> (String, String, String) {
                     Some(tag) => tag.as_str().to_owned(),
                     None => String::from("latest"),
                 },
-            )
+            );
         }
         None => error!("Failed to parse image {}", image),
     }
 }
 
-pub fn unsplit_image(registry: &str, repository: &str, tag: &str) -> String {
-    let reg = match registry {
+/// 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(image: &Image) -> String {
+    let reg = match image.registry.as_str() {
         "registry-1.docker.io" => String::new(),
         r => format!("{}/", r),
     };
-    let repo = match repository.split('/').collect::<Vec<&str>>()[0] {
-        "library" => repository.strip_prefix("library/").unwrap(),
-        _ => repository,
+    let repo = match image.repository.split('/').collect::<Vec<&str>>()[0] {
+        "library" => {
+            if reg.is_empty() {
+                image.repository.strip_prefix("library/").unwrap()
+            } else {
+                image.repository.as_str()
+            }
+        }
+        _ => image.repository.as_str(),
     };
-    format!("{}{}:{}", reg, repo, tag)
+    format!("{}{}:{}", reg, repo, image.tag)
 }
 
-#[cfg(feature = "cli")]
+/// 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>)> {
     let mut sorted_updates = updates.to_vec();
     sorted_updates.sort_unstable_by(|a, b| match (a.1, b.1) {
-        (Some(a), Some(b)) => (!a).cmp(&!b),
+        (Some(c), Some(d)) => {
+            if c == d {
+                a.0.cmp(&b.0)
+            } else {
+                (!c).cmp(&!d)
+            }
+        }
         (Some(_), None) => std::cmp::Ordering::Less,
         (None, Some(_)) => std::cmp::Ordering::Greater,
-        (None, None) => std::cmp::Ordering::Equal,
+        (None, None) => a.0.cmp(&b.0),
     });
     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! {},
+        images: object! {}
+    };
+    updates.iter().for_each(|(image, has_update)| {
+        let _ = json_data["images"].insert(image, *has_update);
+    });
+    let up_to_date = updates
+        .iter()
+        .filter(|&(_, value)| *value == Some(false))
+        .count();
+    let update_available = updates
+        .iter()
+        .filter(|&(_, value)| *value == Some(true))
+        .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
+}
+
+/// Struct to hold some config values to avoid having to pass them all the time
+#[derive(Clone)]
+pub struct CliConfig {
+    pub socket: Option<String>,
+    pub verbose: bool,
+    pub config: JsonValue,
+}
+
+// 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[41m ERROR \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[103m WARN  \x1b[0m {}", format!($($arg)*));
+    })
+}
+
+#[macro_export]
+macro_rules! info {
+    ($($arg:tt)*) => ({
+        println!("\x1b[44m INFO  \x1b[0m {}", format!($($arg)*));
+    })
+}
+
+#[macro_export]
+macro_rules! debug {
+    ($($arg:tt)*) => ({
+        println!("\x1b[48:5:57m DEBUG \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()
+}

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/public/favicon.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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">
+<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/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}-200 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-800 flex-nowrap peer`}
+      >
+        <IconSearch className="size-5" />
+        <div className="w-full">
+          <input
+            className={`w-full h-10 text-sm 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}-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,45 @@
+/** @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"],
+    },
+    {
+      pattern: /text-(gray|neutral)-400/,
+      variants: ["hover"]
+    },
+    {
+      pattern: /text-(gray|neutral)-500/,
+      variants: ["dark", "placeholder"],
+    },
+    {
+      pattern: /divide-(gray|neutral)-800/,
+      variants: ["dark"],
+    },
+    {
+      pattern: /border-(gray|neutral)-200/,
+    },
+    {
+      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]`,
+      },
+    },
+  },
+});