CodeForAfrica / CodeForAfrica/probeview

[Feature] Add a lightweight brand logo, favicon, and social image

Open
#8 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.