Vetrix Docs

Screenshots

This directory is the image asset library for the Vetrix user documentation. It contains no reader-facing prose — no page here explains a feature. Everything stored here is a picture that a documentation page elsewhere under user-docs/ embeds. If you came here to read the documentation, start at the user documentation index instead.

The library is not populated yet. Every area folder listed below currently holds a single .gitkeep placeholder, which is what keeps the empty folder in version control. The captures themselves come from a separate screenshot workstream, which is on hold until a demo instance can be seeded with realistic data; folders fill in as that work lands. Until then, the pages describe the interface in words alone.

Area folders

There is one folder per documentation area, named after the page directory it serves. An image belongs in the folder matching the page that embeds it.

  • account/ — registration, signing in, password reset, profile, personal access tokens, SSH keys, two-factor authentication, OAuth applications, and notification preferences.
  • admin/ — the admin panel: the overview dashboard, users, user groups, roles, security, OAuth providers, rate limits, the operations pages, repository transfers, project configuration, email, and instance settings.
  • cicd/ — pipelines and their jobs and logs, pipeline configuration, code coverage, environments, deployments, and security findings.
  • integrations/ — webhooks and the Model Context Protocol server.
  • navigation/ — the newsfeed, explore, search, the notifications inbox, profiles, and the signed-in repository list.
  • registry/ — the packages browser and the package version, tag, and install views.
  • repositories/ — the repository home page, code browsing, symbols, commits, branches and tags, comparing changes, repository creation, analytics, issues, merge requests, milestones, and every repository settings page.

The area folders are flat, while some page directories are not: the admin pages under admin/operations/ still keep their images directly in admin/. The page slug in the file name is enough to tell them apart, so no nested folder is needed.

Naming

Name each file <page-slug>--<element>.png, using a double hyphen to separate the two parts:

  • <page-slug> is the page's Markdown file name without the .md extension — for example two-factor-auth for account/two-factor-auth.md.
  • <element> names what the image shows, in lowercase words joined by single hyphens — for example backup-codes or diff-view.

Two files following the convention would be account/two-factor-auth--backup-codes.png and repositories/merge-requests--diff-view.png. Sorting a folder by name therefore groups every image for a page together.

Contributing

  • Save captures as PNG. Capture the interface at a standard browser zoom, and crop to the region the surrounding text is describing rather than to the whole window.
  • Capture a demo instance. Screenshots must not show real user names, email addresses, tokens, keys, or private repository contents.
  • Embed the image from the page with a relative path — from a page in user-docs/account/, an image in this library is two levels away through ../screenshots/account/. Always give the image alt text that says what it shows, so the page still makes sense to someone using a screen reader or a text-only view.
  • Keep the picture supporting the prose, not replacing it. A reader who cannot see the image should still be able to complete the task from the surrounding steps.
  • When a folder gains its first real image, remove that folder's .gitkeep.