unkinben
eee8ee1c31
ci/woodpecker/tag/docker Pipeline was successful
## Why A repository detail page in the ArtifactAPI UI showed configuration and stats, but nothing that told a user how to actually *consume* the repo. You had to already know the per-package-type URL scheme (yum baseurl, pip index-url, docker registry host, terraform source address, ...) by hand. This adds an in-page, copy-pasteable "How do I use this?" panel so each repo page tells you exactly how to point a Linux host at it. ## Changes - Add a `UsageInstructions` component: a collapsible "How do I use this?" panel with monospace code boxes and copy-to-clipboard buttons, styled to match the existing detail-section / badge theme. - Generate instructions per package type (rpm, pypi, npm, docker, terraform, helm, alpine, goproxy, puppet, generic) and per class: - **remote** — consume via the caching proxy (`/api/v1/remote/<name>/...`). - **local** — consume via the real registry endpoint, plus a publish/push example (rpm `PUT .../files/`, docker Registry V2 push, terraform provider upload). - **virtual** — consume the merged index via `/api/v1/virtual/<name>/...` using the same per-type client config. - Interpolate the repository's real name into every snippet so it is genuinely copy-pasteable. - Resolve the instance base URL from `window.location.origin` (the UI is served on the API origin, client `BASE=''`) instead of hardcoding a hostname; falls back to the public host only when `window` is unavailable. - Render the panel on `RemoteDetail`, `LocalDetail`, and the `Virtuals` member-expand panel. ## Verification - `npm run build` (tsc typecheck + vite build) passes. - Rendered the component in headless Chromium against real repo data for rpm remote, rpm local (with publish), docker local (with push), terraform local (HCL `required_providers` + signing note), and a pypi virtual — all snippets render with the correct URLs and theme. Reviewed-on: #105 Co-authored-by: Ben Vincent <ben@unkin.net> Co-committed-by: Ben Vincent <ben@unkin.net>
100 lines
1.8 KiB
CSS
100 lines
1.8 KiB
CSS
.usage-panel {
|
|
margin: 24px 0;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.usage-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 14px 18px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-bright);
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.usage-toggle:hover {
|
|
background: var(--bg-elevated);
|
|
}
|
|
|
|
.usage-caret {
|
|
display: inline-block;
|
|
transition: transform 0.15s;
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.usage-caret.open {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.usage-body {
|
|
padding: 4px 18px 18px;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.usage-snippet-title {
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
margin: 14px 0 8px;
|
|
}
|
|
|
|
.usage-codebox {
|
|
position: relative;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.usage-codebox pre {
|
|
margin: 0;
|
|
padding: 14px 16px;
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85em;
|
|
line-height: 1.5;
|
|
color: var(--text-bright);
|
|
white-space: pre;
|
|
}
|
|
|
|
.usage-copy-btn {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
padding: 3px 10px;
|
|
font-size: 0.75em;
|
|
font-family: var(--font-sans);
|
|
color: var(--text-muted);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.usage-copy-btn:hover {
|
|
color: var(--text-bright);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.usage-note {
|
|
margin-top: 8px;
|
|
font-size: 0.82em;
|
|
color: var(--text-muted);
|
|
line-height: 1.45;
|
|
}
|