Repository bar: an Artifacts menu and a More menu 16ee5d19d220

//! A repository's Artifacts menu (oxygenhub#254): every run's build

//! artifacts in one list, the runner images its jobs use, and its

//! Terraform state. Releases and reports keep their own pages.

use super::{filters, lookup, Error, Page, RepoShell, Shell};

use crate::auth::Viewer;

use crate::db::flow as fdb;

use crate::{db, Shared};

use askama::Template;

use axum::extract::{Path, State};

/// At most this many artifacts are listed, newest first.

const ARTIFACTS_SHOWN: i64 = 200;

/// Images used within this many days are listed.

const IMAGE_DAYS: i64 = 90;

#[derive(Template)]

#[template(path = "repo_artifacts.html")]

pub struct ArtifactsPage {

    shell: Shell,

    repo: RepoShell,

    artifacts: Vec<fdb::RepoArtifact>,

    limit: i64,

}

/// `GET /{owner}/{name}/artifacts`.

pub async fn artifacts(

    State(app): State<Shared>,

    viewer: Viewer,

    Path((owner, name)): Path<(String, String)>,

) -> Result<Page<ArtifactsPage>, Error> {

    let shell = Shell::new(&app, &format!("/{owner}/{name}/artifacts"), &viewer);

    let (_repo, row, role) = lookup(&app, &shell, &viewer, &owner, &name).await?;

    let artifacts = fdb::repo_artifacts(&app.db, row.id, ARTIFACTS_SHOWN).await.map_err(|e| Error::from_db(shell.clone(), e))?;

    Ok(Page(ArtifactsPage { shell, repo: RepoShell::new(&app, &row, "artifacts").with_role(role), artifacts, limit: ARTIFACTS_SHOWN }))

}

/// One image this repository's jobs ran on.

pub struct ImageView {

    /// The image's BLAKE3, or what the pipeline named when it is not a hash.

    pub image: String,

    pub hashed: bool,

    pub jobs: i64,

    pub last_ms: i64,

    /// Kept by the hub: its size and architecture.

    pub kept: Option<(i64, String)>,

}

#[derive(Template)]

#[template(path = "repo_images.html")]

pub struct ImagesPage {

    shell: Shell,

    repo: RepoShell,

    images: Vec<ImageView>,

    days: i64,

}

/// `GET /{owner}/{name}/images`.

pub async fn images(

    State(app): State<Shared>,

    viewer: Viewer,

    Path((owner, name)): Path<(String, String)>,

) -> Result<Page<ImagesPage>, Error> {

    let shell = Shell::new(&app, &format!("/{owner}/{name}/images"), &viewer);

    let (_repo, row, role) = lookup(&app, &shell, &viewer, &owner, &name).await?;

    let e = |e| Error::from_db(shell.clone(), e);

    let uses = crate::images::uses_of(&app.db, row.id, db::now_ms() - IMAGE_DAYS * 24 * 3600 * 1000).await.map_err(e)?;

    let kept = crate::images::kept(&app.db).await.map_err(e)?;

    let images = uses

        .into_iter()

        .map(|u| {

            let kept = kept.iter().find(|k| k.hash.eq_ignore_ascii_case(&u.image)).map(|k| (k.size, k.arch.clone()));

            ImageView { hashed: jet::images::is_hash(&u.image), image: u.image, jobs: u.jobs, last_ms: u.last_ms, kept }

        })

        .collect();

    Ok(Page(ImagesPage { shell, repo: RepoShell::new(&app, &row, "images").with_role(role), images, days: IMAGE_DAYS }))

}

#[derive(Template)]

#[template(path = "repo_terraform.html")]

pub struct TerraformPage {

    shell: Shell,

    repo: RepoShell,

    tf_states: Vec<(db::terraform::TfState, i64)>,

}

/// `GET /{owner}/{name}/terraform`: the states the hub keeps for this

/// repository (oxygenhub#252), and the backend block that uses them.

pub async fn terraform(

    State(app): State<Shared>,

    viewer: Viewer,

    Path((owner, name)): Path<(String, String)>,

) -> Result<Page<TerraformPage>, Error> {

    let shell = Shell::new(&app, &format!("/{owner}/{name}/terraform"), &viewer);

    let (_repo, row, role) = lookup(&app, &shell, &viewer, &owner, &name).await?;

    let e = |e| Error::from_db(shell.clone(), e);

    let mut tf_states = Vec::new();

    for s in db::terraform::of_repo(&app.db, row.id).await.map_err(e)? {

        let n = db::terraform::versions(&app.db, row.id, &s.name).await.map_err(e)?;

        tf_states.push((s, n));

    }

    Ok(Page(TerraformPage { shell, repo: RepoShell::new(&app, &row, "terraform").with_role(role), tf_states }))

}

{% extends "base.html" %}

{% import "repo_tabs.html" as m %}

{% block title %}Build artifacts · {{ repo.owner }}/{{ repo.name }}{% endblock %}

{% block bodyattrs %} data-repo="{{ repo.url }}"{% endblock %}

{% block tabs %}{% call m::tabs(repo, "artifacts") %}{% endblock %}

{% block content %}

<div class="head"><h1>Build artifacts <small>{{ artifacts.len() }}</small></h1></div>

<p class="small mute">What this repository's OxygenFlow jobs kept (the <code>artifact</code> blocks of a job's <code>output</code>), newest first{% if artifacts.len() as i64 == limit %}, the latest {{ limit }}{% endif %}. Each run's page has its own; a release can attach one as an asset.</p>

{% if artifacts.is_empty() %}<p class="empty">No artifacts yet. A job keeps a file with an <code>output { artifact "NAME" { path "/src/…" } }</code> block in <code>.flow/pipeline.kdl</code>.</p>{% else %}

<div class="table"><table>

<tr><th>Artifact</th><th>Run</th><th>Job</th><th>Size</th><th>BLAKE3</th><th>Made</th></tr>

{% for a in artifacts %}

<tr>

  <td><a href="{{ repo.url }}/flow/{{ a.run_number }}/artifacts/{{ a.job|urlencode }}/{{ a.name|urlencode }}" title="{{ a.path }}">{{ a.name }}</a></td>

  <td><a href="{{ repo.url }}/flow/{{ a.run_number }}">#{{ a.run_number }}</a> <span class="small mute">{{ a.bookmark }}</span></td>

  <td>{{ a.job }}</td>

  <td class="small">{{ a.size|bytes }}</td>

  <td><code class="small" title="{{ a.content }}">{{ a.content|short }}</code></td>

  <td class="small"><time title="{{ a.created_ms|when_i }}">{{ a.created_ms|ago_i }}</time></td>

</tr>

{% endfor %}

</table></div>

{% endif %}

{% endblock %}

{% extends "base.html" %}

{% import "repo_tabs.html" as m %}

{% block title %}Images · {{ repo.owner }}/{{ repo.name }}{% endblock %}

{% block bodyattrs %} data-repo="{{ repo.url }}"{% endblock %}

{% block tabs %}{% call m::tabs(repo, "images") %}{% endblock %}

{% block content %}

<div class="head"><h1>Images <small>{{ images.len() }}</small></h1></div>

<p class="small mute">The runner images (root file systems) this repository's jobs ran on in the last {{ days }} days, named by their BLAKE3 as <code>sandbox</code> blocks pin them (<code>rootfs "cas://blob/…"</code>). A runner without one fetches it from the hub, when the hub keeps it.</p>

{% if images.is_empty() %}<p class="empty">No jobs ran on a pinned image in the last {{ days }} days.</p>{% else %}

<div class="table"><table>

<tr><th>Image</th><th>Architecture</th><th>Size</th><th>On the hub</th><th>Jobs</th><th>Last used</th></tr>

{% for i in images %}

<tr>

  <td>{% if i.hashed %}<code title="{{ i.image }}">{{ i.image|short }}</code>{% else %}<code>{{ i.image }}</code>{% endif %}</td>

  {% if let Some((size, arch)) = i.kept %}<td class="small">{% if arch.is_empty() %}<span class="mute">unknown</span>{% else %}{{ arch }}{% endif %}</td><td class="small">{{ size|bytes }}</td><td><span class="sig sig-valid">✔</span> kept</td>{% else %}<td class="small mute">unknown</td><td class="small mute">unknown</td><td><span class="sig sig-unsigned">○</span> <span class="small mute">runners only</span></td>{% endif %}

  <td>{{ i.jobs }}</td>

  <td class="small"><time title="{{ i.last_ms|when_i }}">{{ i.last_ms|ago_i }}</time></td>

</tr>

{% endfor %}

</table></div>

{% endif %}

{% endblock %}

{% extends "base.html" %}

{% import "repo_tabs.html" as m %}

{% block title %}Terraform state · {{ repo.owner }}/{{ repo.name }}{% endblock %}

{% block bodyattrs %} data-repo="{{ repo.url }}"{% endblock %}

{% block tabs %}{% call m::tabs(repo, "terraform") %}{% endblock %}

{% block content %}

<div class="head"><h1>Terraform state <small>{{ tf_states.len() }}</small></h1></div>

<p>The hub keeps this repository's Terraform and OpenTofu state, sealed at rest, with its last {{ crate::terraform::VERSIONS_KEPT }} versions, outside the repository's history. Point a configuration at it with this backend block, naming the state in place of <code>NAME</code> (a repository may keep several):</p>

<pre class="snippet">terraform {

  backend "http" {

    address        = "{{ shell.base_url }}/api/v1/repos/{{ repo.owner }}/{{ repo.name }}/terraform/state/NAME"

    lock_address   = "{{ shell.base_url }}/api/v1/repos/{{ repo.owner }}/{{ repo.name }}/terraform/state/NAME"

    unlock_address = "{{ shell.base_url }}/api/v1/repos/{{ repo.owner }}/{{ repo.name }}/terraform/state/NAME"

    username       = "flow"

  }

}</pre>

<h2>From a pipeline</h2>

<p>A job uses it with an identity token of this hub's, so it needs no cloud credential for the state. Give the job <code>identity "{{ shell.base_url }}/terraform" {% raw %}{{% endraw %} mount-path "/run/secrets/tf" {% raw %}}{% endraw %}</code>, run <code>export TF_HTTP_PASSWORD=$(cat /run/secrets/tf)</code> before <code>tofu init</code>, and let its sandbox reach this hub (<code>network "egress" {% raw %}{{% endraw %} allow "{{ shell.base_url|host }}" {% raw %}}{% endraw %}</code>, beside whatever else it reaches).</p>

<h2>From your machine</h2>

<p>Set <code>TF_HTTP_PASSWORD</code> to one of your tokens: <code>repo:write</code> to change a state, <code>repo:read</code> to read one; the repository role it acts with decides the rest.</p>

<h2>States</h2>

{% if tf_states.is_empty() %}<p class="empty">No state yet: the first <code>tofu apply</code> through the backend makes one.</p>{% else %}

<div class="table"><table>

<tr><th>State</th><th>Serial</th><th>Last written</th><th>Lock</th><th>Versions kept</th></tr>

{% for (s, n) in tf_states %}<tr><td><strong>{{ s.name }}</strong></td><td>{{ s.serial }}</td><td class="small">{% if s.updated_by.is_empty() %}<span class="mute">never</span>{% else %}by {{ s.updated_by }} <time title="{{ s.updated_ms|when_i }}">{{ s.updated_ms|ago_i }}</time>{% endif %}</td><td class="small">{% if s.lock_id.is_empty() %}<span class="mute">free</span>{% else %}held by {{ s.locked_by }}{% if let Some(t) = s.locked_ms %} <time title="{{ t|when_i }}">{{ t|ago_i }}</time>{% endif %}{% endif %}</td><td>{{ n }}</td></tr>{% endfor %}

</table></div>{% endif %}

{% endblock %}

:root[data-look="github"] .tab-menu > summary { padding: 8px 10px; font-size: 14px; border-radius: 6px; }

:root[data-look="github"] .tab-menu > summary.on { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--gh-tab); border-radius: 0; font-weight: 600; }

:root[data-look="github"] .tab-menu > summary:hover { background: var(--gh-btn-hover); }

:root[data-look="github"] .tab-menu-list { border-radius: 6px; padding: 4px; }

:root[data-look="github"] .tabs .tab-menu-list a[aria-current] { box-shadow: inset 2px 0 0 var(--gh-tab); border-radius: 0 6px 6px 0; }

  /* The repository bar's menus (oxygenhub#254) are <details>, open without

     this file; here one open menu closes the others, and a click outside or

     Escape closes it. */

  var menus = document.querySelectorAll("[data-tab-menu]");

  function closeMenus(except) {

    menus.forEach(function (m) { if (m !== except) m.open = false; });

  }

  menus.forEach(function (m) {

    m.addEventListener("toggle", function () { if (m.open) closeMenus(m); });

  });

  if (menus.length) {

    document.addEventListener("click", function (ev) {

      if (!ev.target.closest || !ev.target.closest("[data-tab-menu]")) closeMenus(null);

    });

    document.addEventListener("keydown", function (ev) {

      if (ev.key !== "Escape") return;

      var open = document.querySelector("[data-tab-menu][open]");

      if (open) { open.open = false; open.querySelector("summary").focus(); }

    });

  }

/// An artifact with the run and job that made it, for a repository's list

/// of every run's outputs (oxygenhub#254).

#[derive(Clone, Debug, FromRow)]

pub struct RepoArtifact {

    pub run_number: i64,

    pub bookmark: String,

    pub job: String,

    pub name: String,

    pub path: String,

    pub size: i64,

    pub content: String,

    pub created_ms: i64,

}

/// A repository's newest artifacts, at most `limit`.

pub async fn repo_artifacts(pool: &Pool, repo_id: i64, limit: i64) -> sqlx::Result<Vec<RepoArtifact>> {

    sqlx::query_as(

        "SELECT r.number AS run_number, r.bookmark, j.name AS job, a.name, a.path, a.size, a.content, a.created_ms

         FROM flow_artifacts a JOIN flow_jobs j ON j.id = a.job_id JOIN flow_runs r ON r.id = j.run_id

         WHERE r.repo_id = $1 ORDER BY a.created_ms DESC, r.number DESC, j.name, a.name LIMIT $2",

    )

    .bind(repo_id)

    .bind(limit)

    .fetch_all(pool)

    .await

}

/// What one repository's jobs ran on since `since_ms`, newest first

/// (its Images page, oxygenhub#254).

pub async fn uses_of(pool: &Pool, repo_id: i64, since_ms: i64) -> sqlx::Result<Vec<Use>> {

    let rootfs = crate::db::json_text("j.sandbox", "rootfs");

    sqlx::query_as(&format!(

        "SELECT lower({rootfs}) AS image, p.owner, p.name, COUNT(*) AS jobs,

                MAX(COALESCE(j.started_ms, r.created_ms)) AS last_ms

         FROM flow_jobs j JOIN flow_runs r ON r.id = j.run_id JOIN repositories p ON p.id = r.repo_id

         WHERE r.created_ms >= $1 AND p.id = $2 AND COALESCE({rootfs}, '') != ''

         GROUP BY lower({rootfs}), p.id, p.owner, p.name ORDER BY last_ms DESC"

    ))

    .bind(since_ms)

    .bind(repo_id)

    .fetch_all(pool)

    .await

}

/// A URL's host, without its scheme, port or path (an egress allow line).

pub fn host(url: &str, _: &dyn askama::Values) -> askama::Result<String> {

    Ok(url.split_once("://").map_or(url, |(_, rest)| rest).split(['/', ':']).next().unwrap_or("").to_string())

}

mod artifacts;

        .route("/{owner}/{name}/artifacts", get(artifacts::artifacts))

        .route("/{owner}/{name}/images", get(artifacts::images))

        .route("/{owner}/{name}/terraform", get(artifacts::terraform))

    // The bar (#254): Tags is Releases' second view and in the More menu;

    // the less used pages sit in More, the outputs in Artifacts; Projects

    // and Conflicts are off the bar.

    assert!(tags.contains("href=\"/andy/demo/releases\" class=\"on\" aria-current=\"page\">Releases</a>"), "{tags}");

    assert!(tags.contains("href=\"/andy/demo/tags\" class=\"on\" aria-current=\"page\">tags</a>"), "the sub-tab");

    let more = &tags[tags.find(">More</summary>").expect("the More menu")..];

    let more = &more[..more.find("</details>").unwrap()];

    for p in ["bookmarks", "tags", "trust", "pushes", "conflicts"] {

        assert!(more.contains(&format!("href=\"/andy/demo/{p}\"")), "More has {p}: {more}");

    }

    let artifacts = &tags[tags.find(">Artifacts</summary>").expect("the Artifacts menu")..];

    let artifacts = &artifacts[..artifacts.find("</details>").unwrap()];

    for p in ["releases", "artifacts", "images", "terraform"] {

        assert!(artifacts.contains(&format!("href=\"/andy/demo/{p}\"")), "Artifacts has {p}: {artifacts}");

    }

    assert!(!tags.contains("project boards\">Projects</a>"), "Projects is not a repository tab");

    let releases = page(&h.app, "/andy/demo/releases").await;

    assert!(releases.contains("href=\"/andy/demo/tags\">tags</a>"), "{releases}");

    for p in ["artifacts", "images", "terraform"] {

        let body = page(&h.app, &format!("/andy/demo/{p}")).await;

        assert!(body.contains("<summary class=\"on\">Artifacts</summary>"), "{p}: {body}");

    }

    // So does the repository's Build artifacts page (#254), and the bar's

    // Artifacts menu leads there.

    let (_, list) = call(&h.app, "GET", "/andy/demo/artifacts", None, None).await;

    assert!(list.contains(&link) && list.contains(&format!("#{}</a>", run.number)), "{list}");

    assert!(list.contains("<summary class=\"on\">Artifacts</summary>") && list.contains("href=\"/andy/demo/images\""), "{list}");

    // Its page under Artifacts (#254) lists the state and the backend block.

    let (st, page) = call(&h.app, "GET", "/andy/infra/terraform", None, None).await;

    assert_eq!(st, StatusCode::OK, "{page}");

    assert!(page.contains("<strong>prod</strong>") && page.contains("/api/v1/repos/andy/infra/terraform/state/NAME"), "{page}");

    assert!(page.contains("allow "") || page.contains("allow \""), "the egress line names the hub");

    // Found from anywhere (#119): the site bar and the owner's profile (no

    // longer the repository's tabs, #254), and a New project button on the

    // list; a stranger is told who can make one.

    assert!(home.contains("href=\"/projects/andy\"><svg class=\"ic\""), "site bar");

    assert!(!home.contains("project boards\">Projects</a>"), "not a repository tab");

    assert!(get(app, "/andy", Some(&bob)).await.body.contains("href=\"/projects/andy\">Projects</a>"), "the owner's profile");

`header` (wordmark, global search box, "+" menu for new repository/issue/proposal, notifications bell with unread count, avatar menu) · `.band` (Repositories · Explore · Proposals · Issues · Notifications, with admin links pushed right) · repository `.tabs` (Code · Changes · Proposals · Issues · Flow · Releases · Wiki · Artifacts ▾ · More ▾ · Settings, open proposals and issues with a count pill; oxygenhub#254). **Artifacts** holds Releases, Build artifacts, Images, Terraform state and Reports (when there are any); **More** holds Bookmarks, Tags, Diffusion (when used), Trust, Pushes and Conflicts. The menus are `<details>`, so they open without JavaScript; hub.js closes one when another opens, on a click outside and on Escape. Under 760 pixels, where the bar scrolls sideways, a menu opens inline in the bar. Projects belong to the owner and are reached from the site band and the owner's profile; a state with conflicts says so on its overview · `main` at 1180px max (wider than retroplay's 980 because diffs need it; tree and file pages use 100% with 22px gutters) · `footer`.

| `/{owner}/{name}/releases`, `/tags` | §9; the two are views of the Releases tab |

| `/{owner}/{name}/artifacts` | Build artifacts: the newest 200 artifacts of every run, with the run, job, size, BLAKE3 and when, each linking its download (oxygenhub#254) |

| `/{owner}/{name}/images` | The runner images the repository's jobs ran on in the last 90 days: architecture and size when the hub keeps the image, the jobs that used it and when last |

| `/{owner}/{name}/terraform` | Terraform state (§13.5.4): the backend block, how a pipeline and a person authenticate, and the states with their serials, last writer, lock and versions kept |

**Storage:** each state is sealed at rest with the hub's secrets key, and the last 20 versions before it are kept (migration 0079: `terraform_states`, `terraform_state_versions`). Backups carry the sealed bodies, which open only with this hub's key. A repository's Artifacts › Terraform state page (`/{owner}/{name}/terraform`) lists its states, serials, writers, locks and versions, with the backend block to use. Not for the hub's own infrastructure (oxygenhub-gcp), whose state cannot live on the hub it deploys.

    <p><a class="go small" href="/projects/{{ account.username }}">Projects</a></p>

{% if !one %}<div class="bar"><span class="modes"><a href="{{ repo.url }}/releases" class="on" aria-current="page">releases</a><a href="{{ repo.url }}/tags">tags</a></span></div>{% endif %}

    <a href="{{ repo.url }}/flow"{% if tab == "flow" %} class="on" aria-current="page"{% endif %}>Flow</a>

    <a href="{{ repo.url }}/releases"{% if tab == "releases" || tab == "tags" %} class="on" aria-current="page"{% endif %}>Releases</a>

    {# Menus are <details>: they open without JavaScript; hub.js only closes them (oxygenhub#254). #}

    <details class="tab-menu" data-tab-menu>

      <summary{% if tab == "artifacts" || tab == "images" || tab == "terraform" || tab == "reports" || tab == "tests" || tab == "coverage" %} class="on"{% endif %}>Artifacts</summary>

      <div class="tab-menu-list">

        <a href="{{ repo.url }}/releases"{% if tab == "releases" %} aria-current="page"{% endif %}>Releases</a>

        <a href="{{ repo.url }}/artifacts"{% if tab == "artifacts" %} aria-current="page"{% endif %}>Build artifacts</a>

        <a href="{{ repo.url }}/images"{% if tab == "images" %} aria-current="page"{% endif %}>Images</a>

        <a href="{{ repo.url }}/terraform"{% if tab == "terraform" %} aria-current="page"{% endif %}>Terraform state</a>

        {% if repo.reports || repo.tests || repo.coverage %}<a href="{{ repo.url }}/reports"{% if tab == "reports" || tab == "tests" || tab == "coverage" %} aria-current="page"{% endif %}>Reports</a>{% endif %}

      </div>

    </details>

    <details class="tab-menu" data-tab-menu>

      <summary{% if tab == "bookmarks" || tab == "diffusion" || tab == "trust" || tab == "pushes" || tab == "conflicts" %} class="on"{% endif %}>More</summary>

      <div class="tab-menu-list">

        <a href="{{ repo.url }}/bookmarks"{% if tab == "bookmarks" %} aria-current="page"{% endif %}>Bookmarks</a>

        <a href="{{ repo.url }}/tags"{% if tab == "tags" %} aria-current="page"{% endif %}>Tags</a>

        {% if repo.diffusion %}<a href="{{ repo.url }}/diffusion"{% if tab == "diffusion" %} aria-current="page"{% endif %}>Diffusion</a>{% endif %}

        <a href="{{ repo.url }}/trust"{% if tab == "trust" %} aria-current="page"{% endif %}>Trust</a>

        <a href="{{ repo.url }}/pushes"{% if tab == "pushes" %} aria-current="page"{% endif %}>Pushes</a>

        <a href="{{ repo.url }}/conflicts"{% if tab == "conflicts" %} aria-current="page"{% endif %}>Conflicts</a>

      </div>

    </details>

/* The bar's menus (oxygenhub#254): a summary that looks like a tab, its

   links in a panel below it; where the bar scrolls (narrow screens) they

   open inline instead, so the panel is never clipped. */

.tab-menu { position: relative; }

.tab-menu > summary { list-style: none; cursor: pointer; padding: 10px 12px; color: var(--ink); font-size: 13px; }

.tab-menu > summary::-webkit-details-marker { display: none; }

.tab-menu > summary::after { content: " \25BE"; color: var(--mute); }

.tab-menu > summary.on { border-bottom: 2px solid var(--acc); font-weight: 600; }

.tab-menu > summary:hover { background: var(--soft); }

.tab-menu-list { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 190px; display: flex; flex-direction: column; padding: 4px 0; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

.tabs .tab-menu-list a { padding: 8px 14px; white-space: nowrap; }

.tabs .tab-menu-list a[aria-current] { font-weight: 600; box-shadow: inset 2px 0 0 var(--acc); }

  .tab-menu { position: static; }

  .tab-menu > summary { display: inline-block; }

  .tab-menu-list { position: static; display: inline-flex; flex-direction: row; min-width: 0; padding: 0; border: 0; box-shadow: none; background: var(--soft); }

<div class="bar"><span class="modes"><a href="{{ repo.url }}/releases">releases</a><a href="{{ repo.url }}/tags" class="on" aria-current="page">tags</a></span></div>