unkin/artifactapi
3
0
Fork 0
Code Issues 5 Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

feat(ui): add "How do I use this?" usage instructions to repo detail pages #105

Merged
benvin merged 1 commits from benvin/ui-usage-instructions into master 2026-07-25 14:16:23 +10:00
Conversation 0 Commits 1 Files Changed 5
+402
unkinben commented 2026-07-25 12:58:35 +10:00
Owner
Copy Link
Copy Source

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.
## 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.
unkinben added 1 commit 2026-07-25 12:58:35 +10:00
feat(ui): add How do I use this? usage instructions to repo detail pages
ci/woodpecker/pr/pre-commit Pipeline was successful
Details
ci/woodpecker/pr/build Pipeline was successful
Details
ci/woodpecker/pr/test Pipeline was successful
Details
452cb87ce2 
Users landing on a repository page had no in-UI guidance on how to
actually consume it — they had to know the URL scheme for each package
type by hand. This adds a per-repository, per-type set of copy-pasteable
Linux instructions so a repo page tells you exactly how to configure a
host against it.

- Add 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 snippets per package type (rpm, pypi, npm, docker, terraform,
  helm, alpine, goproxy, puppet, generic) and per class (remote proxy,
  local registry, virtual merged index) using the repo's real name.
- Resolve the instance base URL from window.location.origin (the UI is
  served on the API origin) rather than hardcoding a hostname.
- Render the panel on RemoteDetail, LocalDetail, and the Virtuals member
  expand panel.
benvin merged commit eee8ee1c31 into master 2026-07-25 14:16:23 +10:00
benvin deleted branch benvin/ui-usage-instructions 2026-07-25 14:16:23 +10:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
benvin (BenVincent) unkin-agent (Unkin Agent) unkinben (Ben Vincent)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: unkin/artifactapi#105
Delete Branch "benvin/ui-usage-instructions"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?