-
+
+
{{ view.note }}
-+
{{ view.description }}
@@ -151,13 +166,17 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
-
+
+
(row.reason._tag === 'posts' ? row.reason.posts : [
/**
* Each row draws the signal that ranked it, and only that one. Mentions ranked
- * a row with posts, so it gets the braille spark. Stars ranked a surge or a
- * filler row, so those keep the star line. Two charts on one line would ask the
- * reader which one put the row here.
+ * a row with posts, so it gets the braille spark beside its name. Stars ranked
+ * a surge or a filler row, so those keep the star line. Two charts on one row
+ * would ask the reader which one put the row here.
*
* A month board ranks posts older than the spark's seven days. A week of
- * blank cells draws nothing beside a bare zero, so that row shows no spark and
- * its posts carry their own dates.
+ * blank cells draws nothing, so that row shows no spark and its faces carry
+ * the evidence alone.
*/
-const isSocial = computed(() => row.reason._tag === 'posts')
const mentions = computed(() => {
const days = row.reason._tag === 'posts' ? row.reason.mentionsByDay : null
return days?.some(count => count > 0) ? days : null
})
-const starLine = computed(() => !isSocial.value && row.starSeries.length > 0)
+const starLine = computed(() => row.reason._tag !== 'posts' && row.starSeries.length > 0)
+
/**
- * Whether the meta line has anything to say. A track member says nothing
- * there: its section heading already states the order.
+ * Whether the second line has anything to say. A track member says nothing
+ * there: its section heading already states the order. Its description keeps
+ * both lines instead.
*/
-const hasSignal = computed(() => {
- if (row.reason._tag === 'member')
- return false
- return !isSocial.value || mentions.value !== null
-})
+const hasReason = computed(() => row.reason._tag !== 'member' || starLine.value)
+
+const open = ref(false)
+const postsId = useId()
+const postsLabel = computed(() => `${posts.value.length} ${posts.value.length === 1 ? 'post' : 'posts'} about /${row.name}`)
@@ -70,31 +74,44 @@ const hasSignal = computed(() => {
:rank
:actions
:surface
+ :description-lines="hasReason ? 1 : 2"
@avatar-error="owner => emit('avatarError', owner)"
>
-
- (() => {
- const rows = leaderboard.value
- ? leaderboardBoardRows(leaderboard.value.items)
- : [
- ...namedSkills.value.map((s): TrendingBoardRow => ({
- key: s.registryPath,
- owner: s.owner,
- repo: s.repo,
- name: s.name,
- title: s.canonicalName,
- to: s.registryPath,
- subtitle: `${s.owner}/${s.repo}`,
- description: s.description,
- stars: s.stars,
- // `?? []` covers an edge-cached feed from before these fields
- // existed, for the five minutes one can outlive a deploy.
- starSeries: s.starSeries ?? [],
- names: [s.name, s.canonicalName],
- // A post or a single-Skill surge put this exact Skill here, so the
- // run command never guesses.
- skill: { owner: s.owner, repo: s.repo, name: s.name },
- reason: s.evidence
- ? { _tag: 'posts', posts: [s.evidence, ...(s.morePosts ?? [])].map(post => boardPost(post, clock.value)), mentionsByDay: s.mentionsByDay ?? null }
- : s.starGain !== null
- ? { _tag: 'surge', gain: s.starGain, when: s.starGainDay ? relativeDay(s.starGainDay, clock.value) : null }
- : { _tag: 'filler' },
- })),
- // Filler says so. A starred repository shown because the socials were
- // quiet must never pass for one that devs posted about.
- ...fallback.value.map((s): TrendingBoardRow => ({
- key: s.registryPath,
- owner: s.owner,
- repo: s.repo,
- name: s.name,
- title: s.canonicalName,
- to: s.registryPath,
- subtitle: `${s.owner}/${s.repo}`,
- description: s.description,
- stars: s.stars,
- starSeries: s.starSeries ?? [],
- names: [s.name, s.canonicalName],
- skill: singleSkill(s.owner, s.repo, s.name, s.repoSkillCount ?? 0),
- reason: { _tag: 'filler' },
- })),
- ].slice(0, BOARD_LIMIT)
-
- return rows.filter(row => !missingAvatars.value.has(row.owner))
+ const alive = (row: TrendingBoardRow) => !missingAvatars.value.has(row.owner)
+ if (leaderboard.value)
+ return leaderboardBoardRows(leaderboard.value.items).filter(alive)
+ return feed.value ? feedBoardRows(feed.value).filter(alive).slice(0, BOARD_LIMIT) : []
})
const earlierRows = computed(() => {
diff --git a/shared/trending-range.ts b/shared/trending-range.ts
index 2ab13a5f..1207a124 100644
--- a/shared/trending-range.ts
+++ b/shared/trending-range.ts
@@ -423,6 +423,109 @@ export function isEvidenced(row: TrendingBoardRow): boolean {
return row.reason._tag !== 'filler' && row.reason._tag !== 'member'
}
+/**
+ * The fields `feedBoardRows` reads off a named Skill in the trending feed.
+ *
+ * Structural, like {@link LeaderboardRowInput}, so the mapper never imports
+ * the server route. The optional fields cover an edge-cached feed from before
+ * they existed, for the five minutes one can outlive a deploy.
+ */
+export interface FeedSkillInput {
+ owner: string
+ repo: string
+ name: string
+ canonicalName: string
+ registryPath: string
+ description: string | null
+ stars: number | null
+ starGain: number | null
+ starGainDay: number | null
+ evidence: BoardPostInput | null
+ morePosts?: readonly BoardPostInput[]
+ mentionsByDay?: readonly number[] | null
+ starSeries?: readonly StarPoint[]
+}
+
+/** The fields `feedBoardRows` reads off a star-ranked filler Skill. */
+export interface FeedFallbackInput {
+ owner: string
+ repo: string
+ name: string
+ canonicalName: string
+ registryPath: string
+ description: string | null
+ stars: number
+ repoSkillCount?: number
+ starSeries?: readonly StarPoint[]
+}
+
+export interface FeedBoardInput {
+ namedSkills: readonly FeedSkillInput[]
+ fallback: readonly FeedFallbackInput[]
+ /** Unix seconds the ranking was computed at. Every date on the board is measured against it. */
+ computedAt: number
+}
+
+/**
+ * The week and month boards, in one rank sequence.
+ *
+ * Evidenced rows always sit above star-only rows, never interleaved by score.
+ * Ranking a 200,000-star repository against "two people named it" would let
+ * raw popularity win the board every week, which is what the `all` range is
+ * already for. Filling the tail with starred skills is honest; letting them
+ * outrank the evidence is not.
+ *
+ * Filler drops any Skill already named. The two lists are drawn from
+ * overlapping sources, and production served `ppt-master`, `hallmark` and
+ * `karpathy-guidelines` in both at once, with different numbers against each.
+ * The same skill twice is not two findings.
+ */
+export function feedBoardRows(feed: FeedBoardInput): TrendingBoardRow[] {
+ const clock = feed.computedAt
+ const named = feed.namedSkills.map((s): TrendingBoardRow => ({
+ key: s.registryPath,
+ owner: s.owner,
+ repo: s.repo,
+ name: s.name,
+ title: s.canonicalName,
+ to: s.registryPath,
+ subtitle: `${s.owner}/${s.repo}`,
+ description: s.description,
+ stars: s.stars,
+ starSeries: s.starSeries ?? [],
+ names: [s.name, s.canonicalName],
+ // A post or a single-Skill surge put this exact Skill here, so the run
+ // command never guesses.
+ skill: { owner: s.owner, repo: s.repo, name: s.name },
+ reason: s.evidence
+ ? { _tag: 'posts', posts: [s.evidence, ...(s.morePosts ?? [])].map(post => boardPost(post, clock)), mentionsByDay: s.mentionsByDay ?? null }
+ : s.starGain !== null
+ ? { _tag: 'surge', gain: s.starGain, when: s.starGainDay ? relativeDay(s.starGainDay, clock) : null }
+ : { _tag: 'filler' },
+ }))
+ const shown = new Set(named.map(row => row.to))
+ // Filler says so. A starred repository shown because the socials were quiet
+ // must never pass for one that devs posted about.
+ const filler = feed.fallback
+ .filter(s => !shown.has(s.registryPath))
+ .map((s): TrendingBoardRow => ({
+ key: s.registryPath,
+ owner: s.owner,
+ repo: s.repo,
+ name: s.name,
+ title: s.canonicalName,
+ to: s.registryPath,
+ subtitle: `${s.owner}/${s.repo}`,
+ description: s.description,
+ stars: s.stars,
+ starSeries: s.starSeries ?? [],
+ names: [s.name, s.canonicalName],
+ skill: singleSkill(s.owner, s.repo, s.name, s.repoSkillCount ?? 0),
+ reason: { _tag: 'filler' },
+ }))
+ return [...named, ...filler]
+}
+
/**
* The fields `leaderboardBoardRows` reads off a `SkillsLeaderboardItem`.
*
diff --git a/test/unit/trending-range.test.ts b/test/unit/trending-range.test.ts
index cb52ed88..198cfff3 100644
--- a/test/unit/trending-range.test.ts
+++ b/test/unit/trending-range.test.ts
@@ -1,6 +1,7 @@
-import type { LeaderboardRowInput } from '#shared/trending-range'
+import type { FeedFallbackInput, FeedSkillInput, LeaderboardRowInput } from '#shared/trending-range'
import { describe, expect, it } from 'vitest'
import {
+ feedBoardRows,
isEvidenced,
leaderboardBoardRows,
resolveTrendingPage,
@@ -197,6 +198,92 @@ describe('leaderboard rows on the trending board', () => {
})
})
+const FEED_CLOCK = 1_790_000_000
+
+function namedSkill(overrides: Partial = {}): FeedSkillInput {
+ return {
+ owner: 'pbakaus',
+ repo: 'impeccable',
+ name: 'impeccable',
+ canonicalName: 'impeccable',
+ registryPath: '/gh/pbakaus/impeccable/impeccable',
+ description: 'Design taste for agents.',
+ stars: 3_200,
+ starGain: null,
+ starGainDay: null,
+ evidence: null,
+ ...overrides,
+ }
+}
+
+function fallbackSkill(overrides: Partial = {}): FeedFallbackInput {
+ return {
+ owner: 'mattpocock',
+ repo: 'skills',
+ name: 'tdd',
+ canonicalName: 'tdd',
+ registryPath: '/gh/mattpocock/skills/tdd',
+ description: 'Test first.',
+ stars: 40_000,
+ repoSkillCount: 12,
+ ...overrides,
+ }
+}
+
+describe('feed rows on the week and month boards', () => {
+ it('ranks every named skill above the star filler, whatever the stars', () => {
+ const rows = feedBoardRows({
+ namedSkills: [namedSkill({ stars: 10 })],
+ fallback: [fallbackSkill({ stars: 200_000 })],
+ computedAt: FEED_CLOCK,
+ })
+
+ expect(rows.map(row => row.key)).toEqual(['/gh/pbakaus/impeccable/impeccable', '/gh/mattpocock/skills/tdd'])
+ })
+
+ it('drops filler that repeats a named skill', () => {
+ const rows = feedBoardRows({
+ namedSkills: [namedSkill()],
+ fallback: [fallbackSkill({ registryPath: '/gh/pbakaus/impeccable/impeccable' }), fallbackSkill()],
+ computedAt: FEED_CLOCK,
+ })
+
+ expect(rows.map(row => row.key)).toEqual(['/gh/pbakaus/impeccable/impeccable', '/gh/mattpocock/skills/tdd'])
+ })
+
+ it('quotes the post that named a skill, dated against the feed clock', () => {
+ const post = {
+ url: 'https://x.com/someone/status/1',
+ text: 'impeccable fixed my landing page',
+ platform: 'x' as const,
+ authorHandle: 'someone',
+ authorAvatar: null,
+ favouriteCount: 4,
+ postedAt: FEED_CLOCK - 86_400,
+ }
+ const [row] = feedBoardRows({ namedSkills: [namedSkill({ evidence: post })], fallback: [], computedAt: FEED_CLOCK })
+
+ expect(row!.reason).toMatchObject({ _tag: 'posts', posts: [{ handle: 'someone', when: '1d ago' }] })
+ expect(isEvidenced(row!)).toBe(true)
+ })
+
+ it('states the surge when stars, not posts, named the skill', () => {
+ const [row] = feedBoardRows({ namedSkills: [namedSkill({ starGain: 865 })], fallback: [], computedAt: FEED_CLOCK })
+
+ expect(row!.reason).toMatchObject({ _tag: 'surge', gain: 865 })
+ })
+
+ it('gives filler a run command target only when its repository holds one skill', () => {
+ const rows = feedBoardRows({
+ namedSkills: [],
+ fallback: [fallbackSkill(), fallbackSkill({ repo: 'solo', registryPath: '/gh/mattpocock/solo/tdd', repoSkillCount: 1 })],
+ computedAt: FEED_CLOCK,
+ })
+
+ expect(rows.map(row => row.skill)).toEqual([null, { owner: 'mattpocock', repo: 'solo', name: 'tdd' }])
+ })
+})
+
describe('the skill a row may print a run command for', () => {
it('is the skill when its repository holds only that one', () => {
expect(singleSkill('pbakaus', 'impeccable', 'impeccable', 1))
{{ view.note }}
-+
{{ view.description }}
@@ -434,6 +453,11 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
margin-block-start: 0.875rem;
}
+/* An aside whose one block is hidden, such as posts behind a toggle, takes no space. */
+.skill-card__row-aside:has(> [hidden]:only-child) {
+ display: none;
+}
+
.skill-card__row-end {
grid-area: end;
display: flex;
diff --git a/app/components/skill-card/_SkillCardIdentity.vue b/app/components/skill-card/_SkillCardIdentity.vue
index 2bdc4edb..2d4aa287 100644
--- a/app/components/skill-card/_SkillCardIdentity.vue
+++ b/app/components/skill-card/_SkillCardIdentity.vue
@@ -47,6 +47,7 @@ const where = computed(() => view.author ? view.repo : view.source)
- -
-
-
-
- ----
- {{ repo.owner }}/{{ repo.repo }} - - - {{ repo.skillCount }} {{ repo.skillCount === 1 ? 'skill' : 'skills' }} - -- {{ repo.evidence.text }} -
-- {{ trendingShareLabel(repo.authorCount) }} - @{{ repo.evidence.authorHandle }} - - Source - - -
-
-
+
+
diff --git a/layers/marketing/app/components/TrendingPostFaces.vue b/layers/marketing/app/components/TrendingPostFaces.vue
new file mode 100644
index 00000000..6c87e736
--- /dev/null
+++ b/layers/marketing/app/components/TrendingPostFaces.vue
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
diff --git a/layers/marketing/app/components/TrendingPostQuote.vue b/layers/marketing/app/components/TrendingPostQuote.vue
new file mode 100644
index 00000000..b33538f2
--- /dev/null
+++ b/layers/marketing/app/components/TrendingPostQuote.vue
@@ -0,0 +1,80 @@
+
+
+
+
+ @{{ post.handle }}
+
+
+ {{ segment.value }}
+ {{ segment.value }}
+
+
+
+
+
+
diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue
index 0b248417..efd3c26e 100644
--- a/layers/marketing/app/pages/skills/trending.vue
+++ b/layers/marketing/app/pages/skills/trending.vue
@@ -4,17 +4,15 @@ import type { AdmittedSkillsResponse } from '#layers/registry/server/api/skills/
import type { SkillsLeaderboardResponse } from '#layers/registry/server/api/skills/leaderboard.get'
import type { TrendingBoardRow } from '#shared/trending-range'
import { setResponseHeaders } from 'h3'
-import { relativeDay } from '#shared/trending-post'
import {
- boardPost,
DEMOTED_STARRED_REPOSITORIES,
+ feedBoardRows,
isEvidenced,
leaderboardBoardRows,
MIN_INDEXABLE_ROWS,
monthStamp,
resolveTrendingPage,
resolveTrendingRange,
- singleSkill,
TRENDING_BOARD_LIMIT,
TRENDING_RANGES,
trendingRangeDescription,
@@ -156,81 +154,16 @@ function onAvatarError(owner: string) {
missingAvatars.value = new Set(missingAvatars.value).add(owner)
}
-const namedSkills = computed(() =>
- (feed.value?.namedSkills ?? []).filter(s => !missingAvatars.value.has(s.owner)),
-)
-
-/**
- * Fallback minus anything already on the page.
- *
- * The two lists are drawn from overlapping sources, and production served
- * `ppt-master`, `hallmark` and `karpathy-guidelines` in both at once, with
- * different numbers against each (`+865 stars` above, `46,712 stars` below).
- * The same skill twice is not two findings.
- */
-const fallback = computed(() => {
- const shown = new Set(namedSkills.value.map(s => s.registryPath))
- return (feed.value?.fallback ?? []).filter(s =>
- !shown.has(s.registryPath) && !missingAvatars.value.has(s.owner),
- )
-})
-
/**
- * One board, in one rank sequence.
- *
- * Evidenced rows always sit above star-only rows, never interleaved by score.
- * Ranking a 200,000-star repository against "two people named it" would let
- * raw popularity win the page every week, which is what the `all` range is
- * already for. Filling the tail with starred skills is honest; letting them
- * outrank the evidence is not.
+ * One board, in one rank sequence; see `feedBoardRows` for the order and
+ * the filler rule. Rows whose owner is gone drop before the cap, so a dead
+ * account never costs the board a row.
*/
const board = computed