import Image from "next/image";
import widget1 from "@/app/assets/350767810-42eccc89-bdfd-426a-a113-653abe7483d8.png";
import widget2 from "@/app/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/api/v3/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: updates_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/api/v3/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: updates_available
      label: Available updates
      format: number
    - field:
        metrics: unknown
      label: Unknown
      format: number
```

Preview:

<Image src={widget2} />
Credit: [@remussamoila](https://github.com/remussamoila)
