Improve/package UI

public/images/icons/ATTRIBUTION.txt

@@ -13,6 +13,16 @@ linux.svg, apple.svg, windows.svg, channel.svg, docs.svg, github.svg
            https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
   Credit: Pictogrammers
 
+magnifier.svg
+  Source: Starlight's own icon set, @astrojs/starlight
+          components-internals/Icons.ts, `magnifier`
+  Licence: MIT
+           https://github.com/withastro/starlight/blob/main/LICENSE
+  Credit: Astro contributors
+  Note: not a Material icon like the rest, on purpose. The header's site
+        search renders this same glyph, and the two search boxes sit on the
+        same page.
+
 wasm.svg
   Source: Simple Icons, via zensical/templates/.icons/simple/webassembly.svg
   Licence: CC0 1.0 Universal

src/components/DistroHead.astro

@@ -1,6 +1,6 @@
 ---
 import type { Distro } from "../data/distros";
-import { supportLine, title } from "../data/distros";
+import { repoName, repoUrl, supportLine, title } from "../data/distros";
 import DistroTabs from "./DistroTabs.astro";
 
 interface Props {
@@ -22,6 +22,17 @@ const { distro } = Astro.props;
     <h1 id="_top">ROS {distro.ros} {title(distro)}</h1>
     <p class="support">{supportLine(distro)}</p>
   </div>
+  <!-- The label is spelled out for screen readers because the repo name is
+       dropped on narrow screens, where the mark alone carries the link. -->
+  <a
+    class="repo"
+    href={repoUrl(distro)}
+    aria-label={`${repoName(distro)} on GitHub`}
+    title={`The recipes that build the ${distro.channel} channel`}
+  >
+    <span class="repo__icon" aria-hidden="true"></span>
+    <span class="repo__name">{repoName(distro)}</span>
+  </a>
 </div>
 
 <style>
@@ -48,4 +59,50 @@ const { distro } = Astro.props;
     font-size: var(--sl-text-sm);
     color: var(--sl-color-gray-3);
   }
+  /* Pushed to the trailing edge, away from the title block. Wraps under the
+     artwork on narrow screens rather than squeezing the heading. */
+  .repo {
+    margin-inline-start: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.8rem;
+    border: 1px solid var(--border-2);
+    border-radius: var(--radius-md);
+    font-family: var(--font-mono);
+    font-size: var(--sl-text-xs);
+    color: var(--fg-1);
+    text-decoration: none;
+    white-space: nowrap;
+    transition:
+      background var(--dur-2) var(--ease-out),
+      color var(--dur-2) var(--ease-out);
+  }
+  .repo:hover {
+    background: var(--fg-1);
+    color: var(--bg-page);
+  }
+  .repo:focus-visible {
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 1px;
+  }
+  /* A mask, not an image, so the glyph follows the text colour through the
+     hover inversion and both themes. */
+  .repo__icon {
+    width: 1rem;
+    height: 1rem;
+    flex: 0 0 auto;
+    background-color: currentColor;
+    mask-image: url("/images/icons/github.svg");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+  }
+  /* Below the two-column layout the repo name is the first thing worth
+     dropping: the icon still says where the link goes. */
+  @media (max-width: 30rem) {
+    .repo__name {
+      display: none;
+    }
+  }
 </style>

src/components/package-table/PackageTable.svelte

@@ -395,6 +395,10 @@
 
     <div class="rs-tools">
       <span class="rs-search">
+        <span
+          class="rs-icon rs-icon--magnifier rs-search__icon"
+          aria-hidden="true"
+        ></span>
         <input
           type="search"
           autocomplete="off"
@@ -828,19 +832,48 @@
     flex: 1;
     min-width: 0;
   }
+  /* The search box carries the whole table: it is the one control people
+     reach for first, so it gets the card treatment the shared toolbar rule
+     above leaves flat, and the room the icon and the "/" hint need on either
+     side. */
+  .rs-tools .rs-search input {
+    padding: 0.6em 2.4em;
+    border: 1.5px solid var(--border-2);
+    border-radius: var(--radius-md);
+    background: var(--bg-surface);
+    box-shadow: var(--shadow-card);
+    font-size: 0.95rem;
+  }
+  .rs-tools .rs-search input::placeholder {
+    color: var(--fg-2);
+  }
+  .rs-search__icon {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--fg-2);
+    pointer-events: none;
+  }
+  /* Both edges answer focus: the glyph picks up the accent the border takes. */
+  .rs-search:focus-within .rs-search__icon {
+    color: var(--sl-color-accent);
+  }
   /* Advertises the "/" shortcut. Gone while typing, and gone entirely on
      touch devices, where there is no key to press. */
   .rs-slash {
     position: absolute;
-    right: 0.5rem;
+    right: 0.6rem;
     top: 50%;
     transform: translateY(-50%);
-    padding: 0.05em 0.45em;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.25rem;
+    padding: 0.15em 0.5em;
+    border: 1px solid var(--border-2);
+    border-radius: var(--radius-xs);
     font-family: inherit;
-    font-size: 0.75rem;
-    color: var(--sl-color-gray-3);
+    font-size: 0.8rem;
+    color: var(--fg-2);
     pointer-events: none;
   }
   .rs-search:focus-within .rs-slash,
@@ -1227,6 +1260,9 @@
   .rs-icon--github {
     mask-image: url("/images/icons/github.svg");
   }
+  .rs-icon--magnifier {
+    mask-image: url("/images/icons/magnifier.svg");
+  }
 
   /* Availability marks. Every column except Package holds one, so the cells
      are centred without needing a class of their own. */

src/data/distros.ts

@@ -95,6 +95,21 @@ export function browseUrl(distro: Distro): string {
   return BROWSE[distro.base](distro.channel);
 }
 
+/**
+ * The vinca repository whose recipes build this distro's channel.
+ *
+ * Every distro in `DISTROS` has one under the same name, `RoboStack/ros-noetic`
+ * through `RoboStack/ros-lyrical`, so the URL is derived rather than listed.
+ */
+export function repoUrl(distro: Distro): string {
+  return `https://github.com/RoboStack/ros-${distro.name}`;
+}
+
+/** `RoboStack/ros-lyrical`: the repo link's label. */
+export function repoName(distro: Distro): string {
+  return `RoboStack/ros-${distro.name}`;
+}
+
 export function title(distro: Distro): string {
   return distro.name.charAt(0).toUpperCase() + distro.name.slice(1);
 }