feat(theme): adding theme

Author: thibaud-perrin

Dockerfile

@@ -5,7 +5,8 @@ ENV PYTHONDONTWRITEBYTECODE=1 \
     PIP_NO_CACHE_DIR=1 \
     PIP_DISABLE_PIP_VERSION_CHECK=1 \
     DEVPI_SERVERDIR=/data/server \
-    DEVPI_SECRETFILE=/data/.secret
+    DEVPI_SECRETFILE=/data/.secret \
+    DEVPI_THEME_DIR=/app/theme
 
 RUN apt-get update \
  && apt-get install -y --no-install-recommends curl ca-certificates \
@@ -16,6 +17,7 @@ RUN pip install \
       "devpi-web>=5.0,<6" \
       "devpi-client>=7.0,<8"
 
+COPY theme /app/theme
 COPY entrypoint.sh /usr/local/bin/entrypoint.sh
 RUN chmod +x /usr/local/bin/entrypoint.sh
 

README.md

@@ -30,6 +30,8 @@ Based on [devpi](https://devpi.net), with persistent storage and full compatibil
 
 ## Use it
 
+> **The web UI is browse-only.** devpi-web shows your indexes, packages, and search — but there's **no web login form**. All authenticated actions (logging in, creating users, creating indexes, uploading packages) go through the `devpi-client` CLI described below. This is by design in devpi.
+
 ### Configure the devpi client
 
 ```bash
@@ -40,15 +42,24 @@ devpi login root --password="$DEVPI_ROOT_PASSWORD"
 
 ### Create a user and a private index
 
+By default the server runs with `--restrict-modify root`, so only `root` can create users and indexes. While still logged in as `root`:
+
 ```bash
 devpi user -c alice password=s3cret email=alice@example.com
+devpi index -c alice/prod bases=root/pypi
+```
+
+Then switch to the new user to publish:
+
+```bash
 devpi login alice --password=s3cret
-devpi index -c prod bases=root/pypi
 devpi use alice/prod
 ```
 
 `bases=root/pypi` makes your index fall through to the on-demand PyPI mirror, so `pip install`ing a public dependency through your index Just Works.
 
+> Want any authenticated user to create their own indexes? Set the service variable `DEVPI_RESTRICT_MODIFY=""` and redeploy.
+
 ### Publish a package
 
 With `devpi upload` (builds + uploads from the current project):
@@ -95,6 +106,7 @@ For CI, prefer a scoped token over a password: see [`devpi-tokens`](https://pypi
 | `DEVPI_SERVERDIR` | `/data/server` | Where devpi stores packages, indexes, and metadata. Must be on the mounted volume. |
 | `DEVPI_SECRETFILE` | `/data/.secret` | Persistent server secret. Required so login tokens survive a redeploy. |
 | `DEVPI_RESTRICT_MODIFY` | `root` | Only `root` can create users/indexes. Set to an empty string to allow any logged-in user to create their own. |
+| `DEVPI_THEME_DIR` | `/app/theme` | Folder passed to devpi-server's `--theme`. Ships with a built-in modern theme (system fonts, dark mode). Point it at a folder under `/data` to use your own, or set to an empty string for the stock devpi look. |
 
 ## Persistence & the `/data` volume
 

entrypoint.sh

@@ -41,5 +41,12 @@ if [ -n "$DEVPI_RESTRICT_MODIFY" ]; then
     server_args+=(--restrict-modify "$DEVPI_RESTRICT_MODIFY")
 fi
 
+if [ -n "${DEVPI_THEME_DIR:-}" ] && [ -d "$DEVPI_THEME_DIR" ]; then
+    echo "[entrypoint] using devpi-web theme at $DEVPI_THEME_DIR"
+    server_args+=(--theme "$DEVPI_THEME_DIR")
+elif [ -n "${DEVPI_THEME_DIR:-}" ]; then
+    echo "[entrypoint] warning: DEVPI_THEME_DIR=$DEVPI_THEME_DIR is set but not a directory, skipping theme"
+fi
+
 echo "[entrypoint] starting devpi-server on 0.0.0.0:$PORT"
 exec devpi-server "${server_args[@]}"

scripts/smoke-test.sh

@@ -92,6 +92,21 @@ pre_clean
 docker volume create "$VOLUME_NAME" >/dev/null
 start_container
 
+# --- 3b. verify the custom theme CSS is actually served ------------------
+log "checking that the custom theme CSS is referenced and served"
+ROOT_HTML="$(curl -fsS "http://localhost:${HOST_PORT}/")"
+THEME_URL="$(printf '%s\n' "$ROOT_HTML" | grep -oE '\+theme-static-[^"]+style\.css' | head -1 || true)"
+if [ -z "$THEME_URL" ]; then
+    printf '%s\n' "$ROOT_HTML" | head -40
+    fail "root page does not reference a +theme-static-*/style.css link — --theme flag not picked up"
+fi
+THEME_CSS_STATUS="$(curl -s -o /dev/null -w '%{http_code}' "http://localhost:${HOST_PORT}/${THEME_URL}")"
+if [ "$THEME_CSS_STATUS" != "200" ]; then
+    docker logs "$CONTAINER_NAME" | tail -40 || true
+    fail "theme CSS at /${THEME_URL} did not return 200 (got: $THEME_CSS_STATUS)"
+fi
+log "theme CSS served at /${THEME_URL}"
+
 # --- 4. create user + index, upload wheel --------------------------------
 log "configuring devpi client inside container"
 in_container devpi use "http://localhost:3141"

theme/static/style.css

@@ -0,0 +1,282 @@
+:root {
+    --bg: #fafafa;
+    --surface: #ffffff;
+    --border: #e5e7eb;
+    --text: #111827;
+    --text-muted: #6b7280;
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --accent: #1e40af;
+    --success: #15803d;
+    --warning: #b45309;
+    --danger: #b91c1c;
+    --radius: 8px;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #0b0f17;
+        --surface: #111827;
+        --border: #1f2937;
+        --text: #e5e7eb;
+        --text-muted: #9ca3af;
+        --primary: #60a5fa;
+        --primary-hover: #93c5fd;
+        --accent: #93c5fd;
+        --success: #4ade80;
+        --warning: #fbbf24;
+        --danger: #f87171;
+        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    }
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+    margin: 0;
+    padding: 2rem 1.25rem 4rem;
+    background: var(--bg);
+    color: var(--text);
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 15px;
+    line-height: 1.55;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body > * {
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h1, h2, h3, h4 {
+    color: var(--text);
+    font-weight: 650;
+    line-height: 1.25;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
+    text-decoration: none;
+}
+
+h1 {
+    font-size: 1.9rem;
+    letter-spacing: -0.01em;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.6rem;
+    margin-top: 0;
+}
+
+h1 a, h1 a:visited {
+    color: var(--text);
+    text-decoration: none;
+}
+
+h2 { font-size: 1.35rem; }
+h3 { font-size: 1.1rem; color: var(--text-muted); }
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.12s ease;
+}
+
+a:hover { color: var(--primary-hover); text-decoration: underline; }
+a:visited { color: var(--accent); }
+
+code, pre, tt {
+    font-family: var(--mono);
+    font-size: 0.9em;
+}
+
+code, tt {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 0.1em 0.4em;
+}
+
+pre {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+    overflow-x: auto;
+    box-shadow: var(--shadow);
+}
+
+pre code { background: transparent; border: none; padding: 0; }
+
+input[type="text"], input[type="search"], input[type="password"] {
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 0.6rem 0.85rem;
+    font-size: 0.95rem;
+    font-family: inherit;
+    min-width: 260px;
+    box-shadow: var(--shadow);
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+button, input[type="submit"], input[type="button"] {
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: var(--radius);
+    padding: 0.6rem 1.1rem;
+    font-size: 0.95rem;
+    font-family: inherit;
+    font-weight: 550;
+    cursor: pointer;
+    transition: background 0.12s ease, transform 0.06s ease;
+    box-shadow: var(--shadow);
+}
+
+button:hover, input[type="submit"]:hover, input[type="button"]:hover {
+    background: var(--primary-hover);
+}
+
+button:active, input[type="submit"]:active, input[type="button"]:active {
+    transform: translateY(1px);
+}
+
+form { margin: 1rem 0; }
+
+form input[type="text"], form input[type="search"] { margin-right: 0.5rem; }
+
+ul, ol {
+    padding-left: 1.4rem;
+    margin: 0.6rem 0 1.2rem;
+}
+
+li { margin: 0.25rem 0; }
+
+.projectlist, .indexlist, ul.projects, ul.indexes {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 0.5rem;
+}
+
+.projectlist li, .indexlist li, ul.projects li, ul.indexes li {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 0.6rem 0.9rem;
+    box-shadow: var(--shadow);
+    margin: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    margin: 1rem 0;
+    box-shadow: var(--shadow);
+}
+
+th, td {
+    padding: 0.65rem 0.9rem;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+    font-size: 0.92rem;
+}
+
+th {
+    background: var(--bg);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    font-size: 0.78rem;
+}
+
+tr:last-child td { border-bottom: none; }
+
+hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 1.5rem 0;
+}
+
+.status-badge, .badge, .status {
+    display: inline-block;
+    padding: 0.15rem 0.55rem;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+}
+
+.status-ok, .badge-ok, .status.ok { color: var(--success); border-color: var(--success); }
+.status-degraded, .status.degraded, .badge-warning { color: var(--warning); border-color: var(--warning); }
+.status-failed, .status.failed, .badge-error { color: var(--danger); border-color: var(--danger); }
+
+.searchbar, .search, #search {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+    margin: 1rem 0 1.5rem;
+    box-shadow: var(--shadow);
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.searchbar input[type="text"], .search input[type="text"] {
+    flex: 1 1 300px;
+    min-width: 200px;
+}
+
+.breadcrumbs, .breadcrumb {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin: 0.25rem 0 1rem;
+}
+
+.breadcrumbs a, .breadcrumb a { color: var(--text-muted); }
+.breadcrumbs a:hover, .breadcrumb a:hover { color: var(--primary); }
+
+footer, .footer {
+    margin-top: 3rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 0.82rem;
+    text-align: center;
+}
+
+footer a, .footer a { color: var(--text-muted); }
+
+.how-to-search, a[href*="how-to"], a[title*="search"] {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+@media (max-width: 640px) {
+    body { padding: 1.25rem 0.9rem 3rem; font-size: 14px; }
+    h1 { font-size: 1.55rem; }
+    .projectlist, .indexlist, ul.projects, ul.indexes { grid-template-columns: 1fr; }
+}