@gjsify/site 0.63.1-next.237 → 0.64.0

package/lib/client/site.css

@@ -362,16 +362,20 @@ h1 {
   border-block-start: 1px solid var(--band-line);
 }
 
+/* Three fixed rows — pill, value, label — so a badge whose pill is taller (the platform glyphs) or
+ * that carries no value at all still lands its label on the neighbours' line. */
 .badge {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: 2.75rem minmax(1.5rem, auto) auto;
   align-items: center;
+  justify-items: center;
   gap: 0.3rem;
   min-width: 0;
   text-align: center;
 }
 
 .badge-pill {
+  grid-row: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -451,10 +455,10 @@ h1 {
   --platform-color: #4285f4;
 }
 
-/* Kept in the flow even when a badge has no value, so every label sits on the same line. */
+/* The row is reserved even when a badge has no value, so every label sits on the same line. */
 .badge-value {
+  grid-row: 2;
   line-height: 1.5;
-  min-height: 1.5em;
   font-weight: 700;
   font-size: 0.95rem;
   /* A long licence id must wrap inside the badge instead of widening the row. */
@@ -462,6 +466,7 @@ h1 {
 }
 
 .badge-label {
+  grid-row: 3;
   color: var(--muted);
   font-size: 0.78rem;
 }

package/lib/render/pages.d.ts

@@ -34,6 +34,11 @@ export declare function languageName(code: string): string;
 export declare function ctaLabel(target: DownloadTarget, t: Translate): string;
 /** A window shot brings its own shadow; ours would draw a second one around it. */
 export declare function frameAttribute(ctx: Pick<RenderContext, 'images'>, screenshot: Screenshot): 'none' | undefined;
+/**
+ * The facts row under the hero. A badge whose fact is missing is left out, not faked, and the row
+ * tells CSS how many it ended up with so the columns divide the width evenly.
+ */
+export declare function badges(ctx: Pick<RenderContext, 'data' | 't' | 'lang'>): string;
 export declare function linkCard(href: string, title: string, glyph: IconName): string;
 /** A bank transfer as a card: the details to read or copy, and an EPC QR code that fills them into a banking app. */
 export declare function sepaCard(entry: SiteSupportSepa, t: Translate): string;

package/lib/render/pages.js

@@ -254,9 +254,12 @@ ${data.downloads.hasReleases ? `<p class="dialog-foot"><a href="${esc(data.downl
 </app-download>`;
 }
 function badge(spec) {
+    // An absent value is not an empty element: the row reserves the line, the DOM stays clean.
+    const value = spec.value
+        ? `\n<span${attrs({ class: 'badge-value', title: spec.title })}>${esc(spec.value)}</span>`
+        : '';
     return `<li${attrs({ class: spec.class ? `badge ${spec.class}` : 'badge', hidden: spec.hidden })}>
-<span class="badge-pill">${spec.pill ?? icon(spec.glyph)}</span>
-<span${attrs({ class: 'badge-value', title: spec.title })}>${esc(spec.value)}</span>
+<span class="badge-pill">${spec.pill ?? icon(spec.glyph)}</span>${value}
 <span class="badge-label">${esc(spec.label)}</span>
 </li>`;
 }
@@ -268,7 +271,7 @@ function shortLicense(id) {
  * The facts row under the hero. A badge whose fact is missing is left out, not faked, and the row
  * tells CSS how many it ended up with so the columns divide the width evenly.
  */
-function badges(ctx) {
+export function badges(ctx) {
     const { data, t, lang } = ctx;
     const number = new Intl.NumberFormat(lang, { notation: 'compact', maximumFractionDigits: 1 });
     const targets = data.downloads.targets;
@@ -295,7 +298,7 @@ function badges(ctx) {
             .map((os) => icon(PLATFORM_ICONS[os], { title: osName(os, t), class: `platform platform-${os}` }))
             .join('');
         const label = oses.every(isBrowserPlatform) ? t('Browsers') : t('Platforms');
-        specs.push({ pill: `<span class="badge-platforms">${glyphs}</span>`, value: '', label });
+        specs.push({ pill: `<span class="badge-platforms">${glyphs}</span>`, label });
     }
     if (data.app.ageRating) {
         const { minAge } = data.app.ageRating;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/site",
-    "version": "0.63.1-next.237",
+    "version": "0.64.0",
     "description": "Static landing page generator for a GNOME-style app, rendered from its AppStream metainfo — downloads, screenshots, release notes, support links, no JavaScript required.",
     "type": "module",
     "main": "lib/index.js",
@@ -54,26 +54,25 @@
     "license": "MIT",
     "dependencies": {
         "@girs/gdkpixbuf-2.0": "5.4.0",
-        "@gjsify/console": "0.63.1-next.237",
-        "@gjsify/crypto": "0.63.1-next.237",
-        "@gjsify/fs": "0.63.1-next.237",
-        "@gjsify/module": "0.63.1-next.237",
-        "@gjsify/os": "0.63.1-next.237",
-        "@gjsify/path": "0.63.1-next.237",
-        "@gjsify/process": "0.63.1-next.237",
-        "@gjsify/url": "0.63.1-next.237",
+        "@gjsify/console": "^0.64.0",
+        "@gjsify/crypto": "^0.64.0",
+        "@gjsify/fs": "^0.64.0",
+        "@gjsify/module": "^0.64.0",
+        "@gjsify/os": "^0.64.0",
+        "@gjsify/path": "^0.64.0",
+        "@gjsify/process": "^0.64.0",
+        "@gjsify/url": "^0.64.0",
         "fast-xml-parser": "^5.11.2",
         "qrcode-generator": "^2.0.4"
     },
     "devDependencies": {
-        "@gjsify/cli": "0.63.1-next.237",
+        "@gjsify/cli": "^0.64.0",
         "@gjsify/node-gi": "file:../../node-gi/node-gi",
-        "@gjsify/unit": "0.63.1-next.237",
+        "@gjsify/unit": "^0.64.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },
     "gjsify": {
         "tier": 2
-    },
-    "gitHead": "a349db400a7e68befc11ba6381ddb0e4caff09b6"
+    }
 }