@grimoire-rs/indexer 0.3.3 → 0.4.1

package/dist/renderer/astro/pages/p/[...slug].astro

@@ -2,7 +2,22 @@
 // Frozen public URL: /p/<namespace>/<name>/. grim resolves against it, the
 // VS Code deep link points at it, and search engines index it — the route
 // shape is a contract, not an implementation detail.
-import { ChevronRight, FolderRoot, Globe, Image, ImageOff, Scale, User } from "lucide-preact";
+import {
+  BookOpen,
+  Bug,
+  ChevronRight,
+  FolderRoot,
+  Globe,
+  History,
+  House,
+  Image,
+  ImageOff,
+  Mail,
+  MessageCircle,
+  Scale,
+  ShieldAlert,
+  User,
+} from "lucide-preact";
 import Base from "../../layouts/Base.astro";
 import VersionMenu from "../../components/VersionMenu.astro";
 import CommandField from "../../components/CommandField.astro";
@@ -19,7 +34,10 @@ import { withBase } from "../../lib/base";
 import { SHIKI_THEMES } from "../../lib/code";
 import {
   compareVersions,
+  externalUrl,
+  lastUpdated,
   resolveMemberRef,
+  timeAgo,
   versionCascade,
   vscodeUrl,
   type CatalogPackage,
@@ -110,11 +128,45 @@ const scopeChoices = [
   { name: "Global", command: `grim add --global ${pkg.ref}`, Icon: Globe },
   { name: "Project", command: addCommand, Icon: FolderRoot },
 ];
+
+// Every outbound string on this page was handed to the index by a registry
+// it does not control, so each one goes through the scheme allowlist before
+// it becomes an href — the repository link included, which predates the rest
+// of them and took the same string unchecked.
+const repository = externalUrl(pkg.repository);
+const homepage = externalUrl(pkg.url);
+const documentation = externalUrl(pkg.documentation);
+
+// Who publishes this, as one line under the summary. `vendor` is derived
+// from the repository namespace when the publisher set none, so it is often
+// the same string as `authors` — a set, not a join, keeps it from being
+// printed twice.
+const byline = [...new Set([pkg.authors, pkg.vendor].filter(Boolean))].join(" · ");
+
+// "Get help" belongs to the *repository*, not this version: it is read off
+// the description companion, so a maintainer moves a link without any
+// artifact digest moving. Built here and rendered only when a channel is
+// actually set — most repositories publish none, and a block of four dead
+// rows is worse than no block.
+const supportChannels = [
+  { label: "Issue tracker", href: externalUrl(pkg.support?.issues), Icon: Bug },
+  { label: "Chat", href: externalUrl(pkg.support?.chat), Icon: MessageCircle },
+  { label: "Contact", href: externalUrl(pkg.support?.contact), Icon: Mail },
+  { label: "Report a vulnerability", href: externalUrl(pkg.support?.security), Icon: ShieldAlert },
+].filter((channel): channel is { label: string; href: string; Icon: typeof Bug } =>
+  channel.href !== null,
+);
+
+// A commit SHA is not something to read, it is something to check against a
+// checkout. It rides as the tooltip on the date it explains rather than
+// taking a row of its own and putting 40 hex characters in the rail.
+const updated = lastUpdated(pkg);
+const updatedTitle = pkg.revision ? `${updated} · revision ${pkg.revision}` : updated;
 ---
 
 <Base title={`${title} — ${config.brand}`} description={description} image={pkg.logo}>
   <div class="detail">
-    <header class="detail-head">
+    <header class="detail-head" data-slot="detail-header">
       {
         pkg.logo ? (
           // The placeholder ships in the markup and the image fades in over
@@ -130,7 +182,7 @@ const scopeChoices = [
             <img src={withBase(pkg.logo)} alt="" />
           </span>
         ) : (
-          <div class="tile letter" style={`background: var(--kind-${pkg.kind}, var(--muted))`}>
+          <div class="tile letter" style={`background: var(--grim-color-kind-${pkg.kind}, var(--grim-color-muted))`}>
             {pkg.name[0]?.toUpperCase()}
           </div>
         )
@@ -138,14 +190,19 @@ const scopeChoices = [
       <div class="detail-head-text">
         <h1>
           {pkg.name} <span class={`badge kind-${pkg.kind}`}>{pkg.kind}</span>
+          {/* Skills only — every other kind reports null, and grim's own
+              surfaces show it beside the kind for the same reason: it
+              qualifies what the thing is, not what it says about itself. */}
+          {pkg.compatibility && <span class="badge compat">{pkg.compatibility}</span>}
         </h1>
         {description && <p class="summary">{description}</p>}
+        {byline && <p class="byline">by {byline}</p>}
       </div>
     </header>
 
     {
       pkg.deprecated && (
-        <p class="deprecated-banner">
+        <p class="deprecated-banner" data-slot="deprecated-banner">
           ⚠️ deprecated{pkg.replacedBy ? ` — replaced by ${pkg.replacedBy}` : ""}
         </p>
       )
@@ -172,7 +229,7 @@ const scopeChoices = [
       }
     </div>
 
-    <div class="detail-body">
+    <div class="detail-body" data-slot="detail-body">
       <main class="detail-main">
         {/* Radio tabs, not a scripted tablist: the ribbon works on a page
             whose JS never ran, and a radio group already has the keyboard
@@ -267,7 +324,7 @@ const scopeChoices = [
         {openTab === null && <p class="panel-empty">No content available.</p>}
       </main>
 
-      <aside class="detail-rail">
+      <aside class="detail-rail" data-slot="detail-rail">
         {tags.length > 0 && (
           <section>
             <h2>Versions</h2>
@@ -304,19 +361,45 @@ const scopeChoices = [
                 <dd>{pkg.license}</dd>
               </>
             )}
-            {pkg.repository && (
+            {repository && (
               <>
                 <dt>
                   <BrandMark path={repoMark} size={15} />
                   Repository
                 </dt>
                 <dd>
-                  <a href={pkg.repository} target="_blank" rel="noopener noreferrer">
+                  <a href={repository} target="_blank" rel="noopener noreferrer">
                     source
                   </a>
                 </dd>
               </>
             )}
+            {homepage && (
+              <>
+                <dt>
+                  <House size={15} aria-hidden="true" />
+                  Homepage
+                </dt>
+                <dd>
+                  <a href={homepage} target="_blank" rel="noopener noreferrer">
+                    website
+                  </a>
+                </dd>
+              </>
+            )}
+            {documentation && (
+              <>
+                <dt>
+                  <BookOpen size={15} aria-hidden="true" />
+                  Docs
+                </dt>
+                <dd>
+                  <a href={documentation} target="_blank" rel="noopener noreferrer">
+                    documentation
+                  </a>
+                </dd>
+              </>
+            )}
             {pkg.owner?.github && (
               <>
                 <dt>
@@ -334,6 +417,19 @@ const scopeChoices = [
                 </dd>
               </>
             )}
+            {updated && (
+              <>
+                <dt>
+                  <History size={15} aria-hidden="true" />
+                  Updated
+                </dt>
+                <dd>
+                  <time datetime={updated} title={updatedTitle}>
+                    {timeAgo(updated) || updated}
+                  </time>
+                </dd>
+              </>
+            )}
           </dl>
           {pkg.keywords && pkg.keywords.length > 0 && (
             <ul class="keywords">
@@ -352,6 +448,22 @@ const scopeChoices = [
             </ul>
           )}
         </section>
+
+        {supportChannels.length > 0 && (
+          <section class="support">
+            <h2>Get help</h2>
+            <ul>
+              {supportChannels.map(({ label, href, Icon }) => (
+                <li>
+                  <Icon size={15} aria-hidden="true" />
+                  <a href={href} target="_blank" rel="noopener noreferrer">
+                    {label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
       </aside>
     </div>
   </div>
@@ -397,33 +509,39 @@ const scopeChoices = [
 </script>
 
 <style>
+@layer grimoire {
+  /* Layered so a user CSS file (unlayered) outranks these rules. Astro
+     scopes a component style to `.foo[data-astro-cid-…]` — specificity
+     (0,2,0) — which beats a consumer's `.foo` in EITHER source order, so
+     source order alone does not make this overridable. Not reindented:
+     the wrapper stays a two-line diff. */
   .detail {
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: var(--grim-space-7);
   }
   .detail-head {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 1rem 1.25rem;
+    gap: var(--grim-space-6);
+    background: var(--grim-color-card);
+    border: var(--grim-border-width) solid var(--grim-color-border);
+    border-radius: var(--grim-radius-xl);
+    padding: var(--grim-space-6) var(--grim-space-7);
   }
   .tile {
     flex-shrink: 0;
     width: 3.5rem;
     height: 3.5rem;
-    border-radius: 10px;
+    border-radius: var(--grim-radius-xl);
     object-fit: cover;
   }
   .tile.letter {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--on-accent);
-    font-size: 1.5rem;
+    color: var(--grim-color-on-accent);
+    font-size: var(--grim-text-xl);
     font-weight: 700;
     font-family: ui-monospace, "SFMono-Regular", monospace;
   }
@@ -431,27 +549,58 @@ const scopeChoices = [
     margin: 0;
     display: flex;
     align-items: center;
-    gap: 0.6rem;
-    font-size: 1.5rem;
+    gap: var(--grim-space-4);
+    font-size: var(--grim-text-xl);
     font-family: ui-monospace, "SFMono-Regular", monospace;
   }
   .summary {
-    margin: 0.3rem 0 0;
-    color: var(--muted);
+    margin: var(--grim-space-2) 0 0;
+    color: var(--grim-color-muted);
+  }
+  .byline {
+    margin: var(--grim-space-3) 0 0;
+    color: var(--grim-color-muted);
+    font-size: var(--grim-text-sm);
+  }
+  /* The kind badge names a closed set of five and shouts accordingly. A
+     compatibility hint is a free string off the registry — upper-casing it
+     would misspell whatever the publisher actually wrote. */
+  .badge.compat {
+    text-transform: none;
+    letter-spacing: normal;
+    font-family: ui-monospace, "SFMono-Regular", monospace;
+  }
+  .support ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--grim-space-4);
+  }
+  .support li {
+    display: flex;
+    align-items: center;
+    gap: var(--grim-space-3);
+    font-size: var(--grim-text-md);
+  }
+  .support li :global(svg) {
+    flex-shrink: 0;
+    color: var(--grim-color-muted);
   }
   .deprecated-banner {
     margin: 0;
-    background: var(--banner-bg);
-    color: var(--banner-fg);
-    border: 1px solid var(--banner-border);
-    border-radius: 8px;
-    padding: 0.6rem 0.9rem;
+    background: var(--grim-color-banner-bg);
+    color: var(--grim-color-banner-fg);
+    border: var(--grim-border-width) solid var(--grim-color-banner-border);
+    border-radius: var(--grim-radius-lg);
+    padding: var(--grim-space-4) var(--grim-space-6);
     font-weight: 600;
   }
   .detail-body {
     display: grid;
     grid-template-columns: 1fr 18rem;
-    gap: 2rem;
+    gap: var(--grim-space-8);
     align-items: start;
   }
   @media (max-width: 55rem) {
@@ -461,10 +610,10 @@ const scopeChoices = [
   }
   .detail-main {
     min-width: 0;
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 1.25rem 1.5rem;
+    background: var(--grim-color-card);
+    border: var(--grim-border-width) solid var(--grim-color-border);
+    border-radius: var(--grim-radius-xl);
+    padding: var(--grim-space-7) var(--grim-space-7);
   }
   /* Markdown opens with its own heading, whose margin lands on top of the
      panel padding and reads as a hole. Every panel sets its own top edge. */
@@ -481,23 +630,26 @@ const scopeChoices = [
      panel's own top edge rather than a line floating in the content. */
   .ribbon {
     display: flex;
-    gap: 1.25rem;
-    margin: -1.25rem -1.5rem 1.25rem;
-    padding: 0 1.5rem;
-    border-bottom: 1px solid var(--border);
+    gap: var(--grim-space-7);
+    /* The negation of `.detail-main`'s own padding, written as that token so
+       the two cannot drift apart into a bleed that no longer reaches the edge. */
+    margin: calc(-1 * var(--grim-space-7)) calc(-1 * var(--grim-space-7))
+      var(--grim-space-7);
+    padding: 0 var(--grim-space-7);
+    border-bottom: var(--grim-border-width) solid var(--grim-color-border);
   }
   .ribbon label {
-    padding: 0.7rem 0;
-    margin-bottom: -1px; /* the active underline sits on the panel rule */
+    padding: var(--grim-space-5) 0;
+    margin-bottom: calc(-1 * var(--grim-border-width)); /* the active underline sits on the panel rule */
     border-bottom: 2px solid transparent;
-    font-size: 0.85rem;
+    font-size: var(--grim-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: var(--muted);
+    color: var(--grim-color-muted);
     cursor: pointer;
   }
   .ribbon label:hover {
-    color: var(--fg);
+    color: var(--grim-color-fg);
   }
   /* Nothing behind it. Still shown, so the ribbon is the same shape on every
      package page, but visibly not a thing to click. */
@@ -510,7 +662,7 @@ const scopeChoices = [
   #panel-readme:disabled ~ .ribbon label[for="panel-readme"]:hover,
   #panel-contents:disabled ~ .ribbon label[for="panel-contents"]:hover,
   #panel-changelog:disabled ~ .ribbon label[for="panel-changelog"]:hover {
-    color: var(--muted);
+    color: var(--grim-color-muted);
   }
   /* Every tab empty: say it once, in the middle. */
   .panel-empty {
@@ -518,7 +670,7 @@ const scopeChoices = [
     place-items: center;
     min-height: 11rem;
     margin: 0;
-    color: var(--muted);
+    color: var(--grim-color-muted);
   }
   .tab-panel {
     display: none;
@@ -531,16 +683,16 @@ const scopeChoices = [
   #panel-readme:checked ~ .ribbon label[for="panel-readme"],
   #panel-contents:checked ~ .ribbon label[for="panel-contents"],
   #panel-changelog:checked ~ .ribbon label[for="panel-changelog"] {
-    color: var(--fg);
-    border-bottom-color: var(--accent);
+    color: var(--grim-color-fg);
+    border-bottom-color: var(--grim-color-accent);
   }
   /* The input carries the focus, the label shows it. */
   #panel-readme:focus-visible ~ .ribbon label[for="panel-readme"],
   #panel-contents:focus-visible ~ .ribbon label[for="panel-contents"],
   #panel-changelog:focus-visible ~ .ribbon label[for="panel-changelog"] {
-    outline: 2px solid var(--accent);
+    outline: 2px solid var(--grim-color-accent);
     outline-offset: 2px;
-    border-radius: 3px;
+    border-radius: var(--grim-radius-sm);
   }
 
   /* A bundle's member list: what it installs, one row each. A grid, not a
@@ -553,7 +705,7 @@ const scopeChoices = [
     padding: 0;
     display: grid;
     grid-template-columns: auto auto 1fr;
-    gap: 0.45rem 0.75rem;
+    gap: var(--grim-space-4) var(--grim-space-5);
     align-items: center;
   }
   .members li {
@@ -568,8 +720,8 @@ const scopeChoices = [
     justify-self: start;
   }
   .members code {
-    color: var(--muted);
-    font-size: 0.82rem;
+    color: var(--grim-color-muted);
+    font-size: var(--grim-text-sm);
     overflow-wrap: anywhere;
   }
   /* Narrow: three columns of a long ref do not fit, so each member becomes
@@ -586,32 +738,32 @@ const scopeChoices = [
   .detail-rail {
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: var(--grim-space-7);
   }
   .detail-rail section {
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 1rem;
+    background: var(--grim-color-card);
+    border: var(--grim-border-width) solid var(--grim-color-border);
+    border-radius: var(--grim-radius-xl);
+    padding: var(--grim-space-6);
   }
   /* Panel label. The main panel's ribbon labels match this by hand — they
      are <label>s, not headings, so they cannot join the selector. */
   .detail-rail h2 {
-    margin: 0 0 0.6rem;
-    font-size: 0.85rem;
+    margin: 0 0 var(--grim-space-4);
+    font-size: var(--grim-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: var(--muted);
+    color: var(--grim-color-muted);
   }
   /* Loose badges, both for the cascade and the older tags — VersionMenu owns
      the pill itself, this only lays them out. */
   .cascade {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.3rem;
+    gap: var(--grim-space-2);
   }
   .older {
-    margin-top: 0.7rem;
+    margin-top: var(--grim-space-5);
   }
   /* The UA marker is a glyph that flips between two characters with no
      in-between; a real chevron can turn. `list-style` kills it everywhere
@@ -621,22 +773,22 @@ const scopeChoices = [
   .older > summary {
     display: flex;
     align-items: center;
-    gap: 0.35rem;
+    gap: var(--grim-space-3);
     list-style: none;
-    padding-block: 0.15rem;
+    padding-block: var(--grim-space-1);
     cursor: pointer;
-    font-size: 0.8rem;
-    color: var(--muted);
+    font-size: var(--grim-text-sm);
+    color: var(--grim-color-muted);
   }
   .older > summary::-webkit-details-marker {
     display: none;
   }
   .older > summary:hover {
-    color: var(--fg);
+    color: var(--grim-color-fg);
   }
   .older > summary :global(svg) {
     flex-shrink: 0;
-    transition: transform 160ms ease;
+    transition: transform var(--grim-duration-base) ease;
   }
   .older[open] > summary :global(svg) {
     transform: rotate(90deg);
@@ -647,7 +799,7 @@ const scopeChoices = [
     }
   }
   .older[open] > summary {
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--grim-space-4);
   }
   dl {
     margin: 0;
@@ -657,14 +809,14 @@ const scopeChoices = [
        `stretch` sits each at the top of its own box, so the size difference
        reads as two lines that never quite line up. */
     align-items: center;
-    gap: 0.45rem 0.7rem;
+    gap: var(--grim-space-4) var(--grim-space-5);
   }
   dt {
     display: flex;
     align-items: center;
-    gap: 0.4rem;
-    color: var(--muted);
-    font-size: 0.85rem;
+    gap: var(--grim-space-3);
+    color: var(--grim-color-muted);
+    font-size: var(--grim-text-sm);
   }
   /* Every icon is the same box, so the label text lands on one x without an
      icon column of its own. */
@@ -673,15 +825,15 @@ const scopeChoices = [
   }
   dd {
     margin: 0;
-    font-size: 0.9rem;
+    font-size: var(--grim-text-md);
   }
   .keywords {
     list-style: none;
-    margin: 0.75rem 0 0;
+    margin: var(--grim-space-5) 0 0;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.35rem;
+    gap: var(--grim-space-3);
   }
   /* The chip is the link, not a box around it — otherwise the padding is
      dead space the pointer falls through. Bordered and hovering to accent
@@ -690,27 +842,28 @@ const scopeChoices = [
      that answers differently reads as a different kind of thing. */
   .keywords a {
     display: inline-block;
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--chip-bg);
-    padding: 0.15rem 0.6rem;
-    font-size: 0.78rem;
-    color: var(--muted);
+    border: var(--grim-border-width) solid var(--grim-color-border);
+    border-radius: var(--grim-radius-pill);
+    background: var(--grim-color-chip-bg);
+    padding: var(--grim-space-1) var(--grim-space-4);
+    font-size: var(--grim-text-xs);
+    color: var(--grim-color-muted);
     text-decoration: none;
     transition:
-      color 120ms ease,
-      border-color 120ms ease,
-      background-color 120ms ease;
+      color var(--grim-duration-fast) ease,
+      border-color var(--grim-duration-fast) ease,
+      background-color var(--grim-duration-fast) ease;
   }
   .keywords a:hover,
   .keywords a:focus-visible {
-    color: var(--accent);
-    border-color: var(--accent);
-    background: var(--accent-soft);
+    color: var(--grim-color-accent);
+    border-color: var(--grim-color-accent);
+    background: var(--grim-color-accent-soft);
   }
   @media (prefers-reduced-motion: reduce) {
     .keywords a {
       transition: none;
     }
   }
+}
 </style>