CodeForAfrica / CodeForAfrica/probeview
[Feature] Add a lightweight brand logo, favicon, and social image
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 0
- Avg merge
- 2d 16h
- Merged PRs (30d)
- 7
Description
## Problem
ProbeView has no visual identity. The header is text-only (`{siteName}` +
"Status"), the favicon is the stock Next.js default (`app/favicon.ico`), and
there is no social/OG image, apple-touch-icon, or `theme-color`, so shared links
preview as bare text and the browser tab/mobile chrome are unbranded. The repo
also still carries the default Next.js placeholder SVGs (`public/next.svg`,
`vercel.svg`, `file.svg`, `globe.svg`, `window.svg`).
## Proposed solution
Introduce a small, hardcoded SVG **product mark for ProbeView** (not the
deployment's `siteName`) so it stays white-label / self-host-safe, reused
everywhere it makes sense:
- A dependency-free SVG mark component matching the existing
`components/icons.tsx` family (`viewBox="0 0 24 24"`, `currentColor`,
`strokeWidth="2"`, round caps/joins) that adapts to the light/dark theme.
- Place the mark in the header lockup (`app/layout.tsx`) beside `siteName`.
- Favicon via App Router `app/icon.svg`, replacing the stock `app/favicon.ico`.
- Social image via `app/opengraph-image` and an `app/apple-icon`.
- `theme-color` (light/dark) through the `viewport` export.
- Remove the unused `public/*.svg` placeholders.
The exact glyph is left to the implementer, provided it reads clearly at 16px,
works in both themes via `currentColor`, and keeps the compact status-page feel.
## Alternatives considered
- A `siteName`-specific logo — rejected because it breaks the white-label /
self-host design; branding should stay portable and env-driven.
- Committing binary `.ico`/`.png` assets — a static SVG (plus generated
`opengraph-image`/`apple-icon`) is lighter and theme-aware.
- Making the mark configurable now — deferred; hardcoded is enough for now.
## Additional context
- Keep credentials server-only and behavior read-only; this is presentation
only, no new runtime state.
- Palette lives in `app/globals.css` (status green `#22c55e`); the mark should
lean on `currentColor` rather than coupling to it.
- Update `docs/` if any user-visible branding/config expectations change.
> Note: this project is intentionally a **read-only live uptime/latency view**
> with no incidents feature. Proposals that keep it stateless and configurable
> by environment are most likely to be accepted.
Contributor guide
Assessment
This issue has not been assessed yet.