Public: anyone can read this; the crew can change it.
The front page's featured repository draws §5's card, and no front-featured class remains in src/web/studio/home.ts #4718
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/4690-the-front-page-s-featured-repository-dra → main 1 commit fork 2 threads · 2 unresolved
2 files
changed +24
−23
src/web/studio/home.ts +20 −19
| @@ -358,25 +358,26 @@ function featuredCard(featured: NonNullable<FrontPage["featured"]>): Html { | ||
| 358 | 358 | }), |
| 359 | 359 | ]) |
| 360 | 360 | : null; |
| 361 | return html`<section class="front-featured" aria-label="Featured"> | |
| 362 | ${when( | |
| 363 | picture, | |
| 364 | (src) => | |
| 365 | html`<a class="front-featured-look" href="${base}" | |
| 366 | ><img | |
| 367 | src="${src}" | |
| 368 | width="${LOOK_SIZES.thumb.width}" | |
| 369 | height="${LOOK_SIZES.thumb.height}" | |
| 370 | alt="${repo.name} as it looks now" | |
| 371 | /></a>`, | |
| 372 | )} | |
| 373 | <div class="front-featured-body"> | |
| 374 | <span class="small muted">Featured</span> | |
| 375 | <h2><a href="${base}">${repo.ownerName}/${repo.name}</a></h2> | |
| 376 | ${when(repo.description, (d) => html`<p>${d}</p>`)} ${work} | |
| 377 | <div class="bar">${btn("Open", { href: base, variant: "primary" })}</div> | |
| 378 | </div> | |
| 379 | </section>`; | |
| 361 | return card( | |
| 362 | html`${when( | |
| 363 | picture, | |
| 364 | (src) => | |
| 365 | html`<a class="look" href="${base}" | |
| 366 | ><img | |
| 367 | src="${src}" | |
| 368 | width="${LOOK_SIZES.thumb.width}" | |
| 369 | height="${LOOK_SIZES.thumb.height}" | |
| 370 | alt="${repo.name} as it looks now" | |
| 371 | /></a>`, | |
| 372 | )} | |
| 373 | <div class="card-body stack stack-tight"> | |
| 374 | <span class="small muted">Featured</span> | |
| 375 | <h2><a href="${base}">${repo.ownerName}/${repo.name}</a></h2> | |
| 376 | ${when(repo.description, (d) => html`<p class="muted">${d}</p>`)} ${work} | |
| 377 | <div class="bar">${btn("Open", { href: base, variant: "primary" })}</div> | |
| 378 | </div>`, | |
| 379 | { pad: false, attrs: html`role="region" aria-label="Featured"` }, | |
| 380 | ); | |
| 380 | 381 | } |
| 381 | 382 | |
| 382 | 383 | /** A weight's name as the controls say it. */ |
test/front.test.ts +4 −4
| @@ -427,10 +427,10 @@ describe("the front page", () => { | ||
| 427 | 427 | forgetFrontScores(app); |
| 428 | 428 | const body = await door(); |
| 429 | 429 | // The most-forked app is featured — a stranger's, ahead of the owner's. |
| 430 | const featured = body.slice( | |
| 431 | body.indexOf('class="front-featured"'), | |
| 432 | body.indexOf("</section>", body.indexOf('class="front-featured"')), | |
| 433 | ); | |
| 430 | const start = body.indexOf('aria-label="Featured"'); | |
| 431 | expect(start).toBeGreaterThan(-1); | |
| 432 | const next = body.indexOf('class="card', start); | |
The slice ends at the next class="card, which is the nested crew listCard when one is present. The href assertion only needs the heading link, so it holds. If you later assert on the crew rows, widen the slice. |
||
| 433 | const featured = body.slice(start, next === -1 ? undefined : next); | |
| 434 | 434 | expect(featured).toContain('href="/zed/loved"'); |
| 435 | 435 | expect(body).not.toContain('href="/owner/down"'); |
| 436 | 436 | expect(body).not.toContain('href="/owner/bare"'); |
new above
offline
The description gets class muted here and the body is stack-tight. Both match the tiles. The nested listCard in ${work} is the one place a card sits inside a card; check it at 360px.