-
+
diff --git a/app/components/OgImage/MakeSkill.takumi.vue b/app/components/OgImage/MakeSkill.takumi.vue
new file mode 100644
index 00000000..3c7470a3
--- /dev/null
+++ b/app/components/OgImage/MakeSkill.takumi.vue
@@ -0,0 +1,49 @@
+
+
+
+
+ ![]()
+
+
diff --git a/app/components/OgImage/Page.takumi.vue b/app/components/OgImage/Page.takumi.vue
index b22186af..1b8c0d7a 100644
--- a/app/components/OgImage/Page.takumi.vue
+++ b/app/components/OgImage/Page.takumi.vue
@@ -14,17 +14,6 @@ const safeDescription = computed(() => ogText(props.description))
-
-
-
-
+ ![]()
-
+ ![]()
+
diff --git a/app/utils/og-texture.ts b/app/utils/og-texture.ts
new file mode 100644
index 00000000..cf94ce5a
--- /dev/null
+++ b/app/utils/og-texture.ts
@@ -0,0 +1,284 @@
+// Static brand textures for OG cards. The site draws the live versions on a
+// canvas; an OG card is one still frame, drawn server side as SVG dots,
+// because the OG renderer has only Plus Jakarta Sans and IBM Plex Mono and
+// neither has braille glyphs. Every texture is stone: on a card, the lockup's
+// trailing dot is the one rose element. DESIGN.md "Texture system" has the jobs.
+
+export interface TextureDot {
+ x: number
+ y: number
+ /** 0 to 1, multiplied into the ink colour. */
+ alpha: number
+}
+
+export interface TextureRect {
+ x: number
+ y: number
+ width: number
+ height: number
+}
+
+/** A stable 0 to 1 value for three integers. The live canvases use the same hash. */
+function hash(x: number, y: number, s: number): number {
+ let n = (Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263) + Math.imul(s | 0, 1442695041)) | 0
+ n = Math.imul(n ^ (n >>> 13), 1274126177)
+ return ((n ^ (n >>> 16)) >>> 0) / 4294967295
+}
+
+/** A stable seed for a string, such as a Skill's owner, repository and name. */
+export function textureSeed(text: string): number {
+ let h = 2166136261
+ for (let i = 0; i < text.length; i++)
+ h = Math.imul(h ^ text.charCodeAt(i), 16777619)
+ return (h >>> 0) % 1_000_000_007
+}
+
+/** Whether a box touches any of the rects. */
+function overlaps(rects: readonly TextureRect[], box: TextureRect): boolean {
+ return rects.some(r => box.x <= r.x + r.width && box.x + box.width >= r.x && box.y <= r.y + r.height && box.y + box.height >= r.y)
+}
+
+// Six-dot literary braille. Bit k is dot k + 1, the order Unicode uses from U+2800.
+const BRAILLE: Record = {}
+for (const token of 'a1 b12 c14 d145 e15 f124 g1245 h125 i24 j245 k13 l123 m134 n1345 o135 p1234 q12345 r1235 s234 t2345 u136 v1236 w2456 x1346 y13456 z1356 -36 /34'.split(' ')) {
+ let mask = 0
+ for (const dot of token.slice(1))
+ mask |= 1 << (Number(dot) - 1)
+ BRAILLE[token[0]!] = mask
+}
+for (const [index, digit] of [...'1234567890'].entries())
+ BRAILLE[digit] = BRAILLE['abcdefghij'[index]!]!
+
+/** Real registry Skills, so the noise is made of the thing itself. */
+const FIELD_NAMES = [
+ 'anthropics/skills/pdf',
+ 'mattpocock/skills/tdd',
+ 'obra/superpowers/brainstorming',
+ 'vercel-labs/agent-skills/react-best-practices',
+ 'anthropics/skills/frontend-design',
+ 'obra/superpowers/systematic-debugging',
+ 'anthropics/skills/mcp-builder',
+ 'anthropics/skills/skill-creator',
+ 'vercel-labs/agent-skills/web-design-guidelines',
+ 'anthropics/skills/webapp-testing',
+ 'obra/superpowers/writing-plans',
+ 'addyosmani/web-quality-skills/performance',
+ 'antfu/skills/vitest',
+ 'pbakaus/impeccable/impeccable',
+ 'kepano/obsidian-skills/json-canvas',
+ 'anthropics/skills/canvas-design',
+] as const
+
+/**
+ * Braille names: rows of real Skill names written in braille, dense and
+ * complete near the focal point, thinning to sparse dots far from it. Three
+ * ripple rings cross the field, frozen where the live field rests. On a card
+ * the focal point is the lockup's dot, so the lockup is the name the noise
+ * resolves into.
+ */
+export function brailleNamesField(input: {
+ width: number
+ height: number
+ focal: { x: number, y: number }
+ /** Areas that stay empty, such as the text block. */
+ clear?: readonly TextureRect[]
+}): TextureDot[] {
+ const { width, height, focal, clear = [] } = input
+ const cellWidth = 12
+ const lineHeight = 24
+ const dotStep = 6
+ const cols = Math.floor(width / cellWidth)
+ const rows = Math.floor(height / lineHeight)
+ const ox = (width - cols * cellWidth) / 2
+ const oy = (height - rows * lineHeight) / 2
+ const reach = Math.max(width, height) * 0.26
+ // The still frame: rings at about 170, 245 and 315px from the focal point.
+ const ring = (d: number): number => {
+ let b = 0
+ for (const age of [2.2, 1.7, 1.2]) {
+ const g = (d - age * 144) / 29
+ b += Math.exp(-g * g) * Math.exp(-age * 0.45)
+ }
+ return b
+ }
+ const alphas = [0.2, 0.32, 0.46, 0.62]
+
+ const dots: TextureDot[] = []
+ for (let y = 0; y < rows; y++) {
+ let text = ''
+ let last = -1
+ for (let k = 0; text.length < cols + 60; k++) {
+ let pick = Math.floor(hash(y, k, 5) * FIELD_NAMES.length)
+ if (pick === last)
+ pick = (pick + 1) % FIELD_NAMES.length
+ last = pick
+ text += `${k > 0 ? ' ' : ''}${FIELD_NAMES[pick]}`
+ }
+ text = text.slice(Math.floor(hash(y, 7, 3) * 28))
+ for (let x = 0; x < cols; x++) {
+ const full = BRAILLE[text[x] ?? ' '] ?? 0
+ if (!full)
+ continue
+ const cx = ox + x * cellWidth
+ const cy = oy + y * lineHeight + lineHeight / 2
+ // A whole cell stays out of a clear area, so no letter is cut in half at its edge.
+ if (overlaps(clear, { x: cx, y: cy - lineHeight / 2, width: cellWidth, height: lineHeight }))
+ continue
+ const d = Math.hypot(cx + cellWidth / 2 - focal.x, cy - focal.y)
+ const base = Math.exp(-d / reach)
+ const lift = ring(d)
+ const strength = base * 0.6 + lift
+ // Near the focal point a cell keeps its whole letter; farther out each dot survives by chance.
+ const keep = strength > 0.62 ? 1 : base * 0.5 + lift * 0.9 + 0.03
+ const alpha = alphas[Math.min(3, Math.floor(strength * 3.2))]!
+ for (let i = 0; i < 6; i++) {
+ if (!((full >> i) & 1) || hash(x * 2 + (i >= 3 ? 1 : 0), y * 3 + (i % 3), 4) >= keep)
+ continue
+ dots.push({ x: cx + cellWidth * (i >= 3 ? 0.75 : 0.25), y: cy + ((i % 3) - 1) * dotStep, alpha })
+ }
+ }
+ }
+ return dots
+}
+
+/**
+ * File minimap: columns of SKILL.md files drawn as rows of dots. Each file has
+ * frontmatter, a title, an intro, then sections of prose, lists or code. One
+ * dot is one character cell. The same seed always draws the same files.
+ */
+export function fileMinimap(input: {
+ region: TextureRect
+ seed: number
+ /** Distance in px over which the left edge fades in. */
+ fade?: number
+ /** Cell pitch in px. Rows sit at twice the pitch. */
+ pitch?: number
+ /** Start each column at the top of a file, instead of partway down the stream. */
+ fromStart?: boolean
+}): TextureDot[] {
+ const { region, seed, fade = 0, pitch = 5.6, fromStart = false } = input
+ const rowPitch = pitch * 2
+ const lineCells = 20
+ const columnCells = 25
+ const levels = [0.12, 0.2, 0.3, 0.42, 0.56]
+ const rowCount = Math.ceil(region.height / rowPitch)
+
+ const dots: TextureDot[] = []
+ for (let c = 0; c * columnCells * pitch < region.width; c++) {
+ const lines: Array = []
+ const offset = fromStart ? 0 : Math.floor(hash(seed, c, 41) * 30)
+ for (let f = 0; lines.length < offset + rowCount; f++)
+ skillFileLines(Math.floor(hash(seed + c, f, 43) * 1e9), lineCells, lines)
+ const x0 = region.x + c * columnCells * pitch
+ for (let r = 0; r < rowCount; r++) {
+ const runs = lines[offset + r]
+ if (!runs)
+ continue
+ const y = region.y + (r + 0.5) * rowPitch
+ for (let i = 0; i < runs.length; i += 3) {
+ for (let k = 0; k < runs[i + 1]!; k++) {
+ const x = x0 + (runs[i]! + k + 0.5) * pitch
+ if (x > region.x + region.width)
+ continue
+ const edge = fade > 0 ? Math.min(1, (x - region.x) / fade) : 1
+ if (edge > 0)
+ dots.push({ x, y, alpha: levels[runs[i + 2]!]! * edge * edge })
+ }
+ }
+ }
+ }
+ return dots
+}
+
+/** Appends one SKILL.md's lines. A line is a flat list of runs: start cell, length, level 0 to 4. A blank line is null. */
+function skillFileLines(seed: number, width: number, out: Array): void {
+ let n = 0
+ const rnd = (): number => hash(seed, n++, 23)
+ const ri = (k: number): number => Math.floor(rnd() * k)
+ const words = (from: number, to: number, level: number, runs: number[] = [], minLen = 2, spread = 6): number[] => {
+ const wordSeed = ri(1e9)
+ let x = from
+ for (let i = 0; i < 40; i++) {
+ const len = minLen + Math.floor(hash(wordSeed, i, 11) * spread)
+ if (x + len > to)
+ break
+ runs.push(x, len, level)
+ x += len + 1
+ }
+ return runs
+ }
+ const line = (runs: number[]): void => {
+ out.push(runs)
+ }
+ const gap = (): void => {
+ out.push(null)
+ }
+ const para = (count: number): void => {
+ for (let j = 0; j < count; j++)
+ line(words(0, j === count - 1 ? 6 + ri(11) : width - ri(3), 1))
+ }
+ // Frontmatter fences, name, description.
+ line([0, 3, 0])
+ line(words(6, 9 + ri(7), 1, [0, 4, 2]))
+ line(words(9, width, 1, [0, 7, 2]))
+ if (rnd() < 0.6)
+ line(words(2, width - ri(5), 1))
+ line([0, 3, 0])
+ gap()
+ // Title, intro.
+ line(words(2, 8 + ri(10), 4, [0, 1, 4]))
+ gap()
+ para(2 + ri(2))
+ const sections = 2 + ri(3)
+ for (let i = 0; i < sections; i++) {
+ gap()
+ line(words(3, 8 + ri(9), 3, [0, 2, 3]))
+ gap()
+ const kind = rnd()
+ if (kind < 0.36) {
+ para(2 + ri(3))
+ }
+ else if (kind < 0.72) {
+ const items = 2 + ri(3)
+ for (let j = 0; j < items; j++) {
+ line(words(2, width - ri(7), 1, [0, 1, 3]))
+ if (rnd() < 0.3)
+ line(words(2, 7 + ri(10), 1))
+ }
+ }
+ else {
+ line([0, 3, 0])
+ const count = 2 + ri(4)
+ for (let j = 0; j < count; j++)
+ line(words(ri(3) * 2, width - ri(6), 0, [], 1, 5))
+ line([0, 3, 0])
+ }
+ }
+ gap()
+ gap()
+ gap()
+}
+
+/**
+ * Dots as one SVG image. Each alpha step is one path of zero-length round-capped
+ * segments, which keeps a field of thousands of dots to a few kilobytes.
+ */
+export function textureSvg(dots: readonly TextureDot[], options: { width: number, height: number, ink: string, radius: number }): string {
+ const { width, height, ink, radius } = options
+ const groups = new Map()
+ for (const dot of dots) {
+ const step = Math.round(dot.alpha * 40) / 40
+ if (step <= 0)
+ continue
+ let group = groups.get(step)
+ if (!group) {
+ group = []
+ groups.set(step, group)
+ }
+ group.push(`M${Math.round(dot.x * 10) / 10} ${Math.round(dot.y * 10) / 10}h0`)
+ }
+ const paths = [...groups].map(([alpha, segments]) =>
+ ` {
+ const tile = markSvg({ colors: BRAND_DARK, tile: BRAND_TILE })
+ const smallTile = markSvg({ colors: BRAND_DARK, tile: BRAND_TILE, cut: 'small' })
+ return {
+ // Browser tabs draw the SVG favicon at 16px, so it takes the small cut and follows the OS scheme.
+ 'favicon.svg': markSvg({ colors: BRAND_LIGHT, dark: BRAND_DARK, cut: 'small' }),
+ // favicon.ico cannot follow the scheme, so it sits on the stone tile. nuxt.config.ts declares these three sizes.
+ 'favicon.ico': ico([
+ { size: 16, data: png(smallTile, 16) },
+ { size: 32, data: png(tile, 32) },
+ { size: 48, data: png(tile, 48) },
+ ]),
+ // The weekly email header and the Discord digest avatar use the tile, because Gmail strips SVG.
+ 'logo-icon.svg': tile,
+ 'logo-icon.png': png(tile, 512),
+ // `logo` and `logo-mark` are for dark backgrounds; the `-light` files are for light ones.
+ 'logo.svg': lockupSvg({ colors: BRAND_DARK, height: 84 }),
+ 'logo-light.svg': lockupSvg({ colors: BRAND_LIGHT, height: 84 }),
+ 'logo-mark.svg': markSvg({ colors: BRAND_DARK }),
+ 'logo-mark-light.svg': markSvg({ colors: BRAND_LIGHT }),
+ }
+}
+
+const files = brandFiles()
+await Promise.all(Object.entries(files).map(([name, data]) => writeFile(resolve(PUBLIC, name), data)))
+console.log(`Wrote ${Object.keys(files).length} brand files to public/: ${Object.keys(files).join(', ')}`)
diff --git a/shared/brand-mark.ts b/shared/brand-mark.ts
new file mode 100644
index 00000000..a6f54991
--- /dev/null
+++ b/shared/brand-mark.ts
@@ -0,0 +1,168 @@
+// The skilld mark: a prompt caret and one rose dot. Stone dots are the noise;
+// the rose dot is the Skill you picked. This module is the only place the
+// geometry lives. AppLogo, the OG lockup, and every file in public/ come from
+// it (scripts/generate-brand-assets.ts writes the files). DESIGN.md describes
+// the system; change the shapes here, then run `pnpm brand:assets`.
+
+export interface BrandColors {
+ /** The caret and the wordmark. */
+ ink: string
+ /** The one rose dot. */
+ dot: string
+}
+
+/** Stone 900 and Tailwind rose 500 on light surfaces, stone 100 and rose 400 on dark ones. */
+export const BRAND_LIGHT: BrandColors = { ink: '#1c1917', dot: '#f43f5e' }
+export const BRAND_DARK: BrandColors = { ink: '#f5f5f4', dot: '#fb7185' }
+
+/** The stone 900 tile behind raster icons, where the background is unknown. */
+export const BRAND_TILE = '#1c1917'
+
+/** Which cut of the mark to draw. `small` is for 16px, where the regular caret thins out. */
+export type MarkCut = 'regular' | 'small'
+
+/** The mark lives in a 100 unit box. The box starts at x 5 so the caret and the dot sit optically centred. */
+const MARK_VIEWBOX = { x: 5, y: 0, width: 100, height: 100 } as const
+
+const CARET_PATH: Record = {
+ regular: 'M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z',
+ small: 'M58 50 L18 82 L18 62 L33 50 L18 38 L18 18 Z',
+}
+
+const MARK_DOT: Record = {
+ regular: { cx: 80, cy: 50, r: 10 },
+ small: { cx: 80, cy: 50, r: 12 },
+}
+
+/** The caret's ink, in mark units. Both cuts share it. */
+const CARET_INK = { left: 18, right: 58, top: 18, bottom: 82, centreY: 50 } as const
+
+/**
+ * The wordmark, outlined from IBM Plex Mono SemiBold (SIL Open Font License),
+ * so a file renders the same with or without the font installed. Font units:
+ * 1000 per em, y points up, the origin is the baseline at the glyph's left
+ * edge. Every glyph advances 600 units, because Plex Mono is monospaced.
+ */
+const GLYPHS: Record<'s' | 'k' | 'i' | 'l' | 'd', string> = {
+ s: 'M298 -12Q213 -12 151 14.5Q89 41 54 86L129 154Q161 119 202.5 100Q244 81 299 81Q347 81 376 97Q405 113 405 146Q405 174 385.5 184Q366 194 334 199L251 212Q219 217 188.5 226.5Q158 236 134.5 253Q111 270 97 296.5Q83 323 83 361Q83 442 143.5 485Q204 528 310 528Q385 528 437.5 507Q490 486 524 448L457 374Q435 398 398.5 416.5Q362 435 306 435Q208 435 208 374Q208 346 228 335.5Q248 325 280 320L362 307Q395 302 425.5 292.5Q456 283 479.5 266Q503 249 517 223Q531 197 531 159Q531 79 469.5 33.5Q408 -12 298 -12Z',
+ k: 'M77 740L205 740L205 306L211 306L286 388L413 516L562 516L357 313L584 0L431 0L266 240L205 182L205 0L77 0Z',
+ i: 'M332 596Q287 596 268.5 615Q250 634 250 661L250 685Q250 712 268.5 731Q287 750 332 750Q377 750 395.5 731Q414 712 414 685L414 661Q414 634 395.5 615Q377 596 332 596ZM98 101L268 101L268 415L98 415L98 516L396 516L396 101L554 101L554 0L98 0Z',
+ l: 'M72 101L236 101L236 639L72 639L72 740L364 740L364 101L529 101L529 0L72 0Z',
+ d: 'M403 91L396 91Q375 44 338.5 16Q302 -12 242 -12Q198 -12 161.5 4.5Q125 21 99 54.5Q73 88 59 139Q45 190 45 258Q45 394 99 461Q153 528 242 528Q302 528 338.5 500Q375 472 396 425L403 425L403 740L531 740L531 0L403 0ZM296 90Q318 90 337.5 95.5Q357 101 371.5 111.5Q386 122 394.5 138.5Q403 155 403 177L403 339Q403 361 394.5 377.5Q386 394 371.5 404.5Q357 415 337.5 420.5Q318 426 296 426Q240 426 209.5 392Q179 358 179 299L179 217Q179 158 209.5 124Q240 90 296 90Z',
+}
+const WORD = ['s', 'k', 'i', 'l', 'l', 'd'] as const
+const FONT_UNITS = 1000
+const ADVANCE = 600
+
+/**
+ * The lockup, in ems of the wordmark (from the brand lab, 2026-10-06). The
+ * caret box is 1.05em tall and centred on a line-height 1 box, which puts its
+ * centre 0.375em above the baseline for Plex Mono. The trailing dot is 0.3em
+ * across, sits 0.32em after the word and 0.12em above the baseline, so its
+ * centre lands at half the x-height (0.258em) and it reads as a cursor.
+ */
+const LOCKUP_EM = {
+ caretBoxHeight: 1.05,
+ caretCentre: 0.375,
+ gap: 0.38,
+ tracking: -0.02,
+ dotSize: 0.3,
+ dotGap: 0.32,
+ dotLift: 0.12,
+} as const
+
+/** Lockup coordinates use 100 units per em, baseline at y 0, y pointing down. */
+const EM = 100
+
+export interface LockupPart {
+ d: string
+ transform: string
+}
+
+export interface LockupGeometry {
+ /** A tight box around the ink: x, y, width, height, in lockup units. */
+ box: { x: number, y: number, width: number, height: number }
+ caret: LockupPart
+ glyphs: LockupPart[]
+ dot: { cx: number, cy: number, r: number }
+}
+
+const round = (value: number): number => Math.round(value * 1e4) / 1e4
+
+/** Where every piece of the lockup sits. Pure data; the SVG writer and AppLogo both draw from it. */
+export function lockupGeometry(): LockupGeometry {
+ // The lab drew the caret in a 56 by 80 crop of the mark box, 8 units of air on each side.
+ const caretScale = (LOCKUP_EM.caretBoxHeight * EM) / 80
+ const caretTop = -LOCKUP_EM.caretCentre * EM - (CARET_INK.centreY - CARET_INK.top) * caretScale
+ const caretBottom = -LOCKUP_EM.caretCentre * EM + (CARET_INK.bottom - CARET_INK.centreY) * caretScale
+ const caretWidth = (CARET_INK.right - CARET_INK.left) * caretScale
+ const caretTranslateY = -LOCKUP_EM.caretCentre * EM - CARET_INK.centreY * caretScale
+
+ const wordStart = caretWidth + 8 * caretScale + LOCKUP_EM.gap * EM
+ const glyphScale = EM / FONT_UNITS
+ const pitch = ADVANCE * glyphScale + LOCKUP_EM.tracking * EM
+ const glyphs = WORD.map((char, index) => ({
+ d: GLYPHS[char],
+ transform: `matrix(${glyphScale} 0 0 ${-glyphScale} ${round(wordStart + index * pitch)} 0)`,
+ }))
+ const wordEnd = wordStart + WORD.length * pitch
+
+ const r = (LOCKUP_EM.dotSize * EM) / 2
+ const dot = { cx: round(wordEnd + LOCKUP_EM.dotGap * EM + r), cy: round(-(LOCKUP_EM.dotLift * EM + r)), r }
+
+ // Glyph descent: `s` and `d` overshoot the baseline by 12 font units.
+ const bottom = Math.max(caretBottom, 12 * glyphScale)
+ return {
+ box: { x: 0, y: round(caretTop), width: round(dot.cx + r), height: round(bottom - caretTop) },
+ caret: {
+ d: CARET_PATH.regular,
+ transform: `matrix(${round(caretScale)} 0 0 ${round(caretScale)} ${round(-CARET_INK.left * caretScale)} ${round(caretTranslateY)})`,
+ },
+ glyphs,
+ dot,
+ }
+}
+
+interface SvgOptions {
+ /** Colours for light surfaces, or the only colours when `dark` is absent. */
+ colors: BrandColors
+ /** When set, a prefers-color-scheme rule switches to these colours. For favicons and README images. */
+ dark?: BrandColors
+}
+
+function schemeStyle(dark: BrandColors | undefined): string {
+ return dark ? `` : ''
+}
+
+/** The standalone mark as an SVG file: caret plus dot, optionally on a rounded tile. */
+export function markSvg(options: SvgOptions & { cut?: MarkCut, tile?: string }): string {
+ const { colors, dark, cut = 'regular', tile } = options
+ const dot = MARK_DOT[cut]
+ if (tile) {
+ // A 512 tile with the mark's ink centred: x 18 to 90, y 18 to 82, centre (54, 50).
+ // The small cut fills more of the tile, because a 16px tile has no pixels to spare.
+ const scale = cut === 'small' ? 5.4 : 4.4
+ const tx = round(256 - 54 * scale)
+ const ty = round(256 - 50 * scale)
+ return `\n`
+ }
+ const { x, y, width, height } = MARK_VIEWBOX
+ return `\n`
+}
+
+/** The lockup as an SVG file: caret, outlined wordmark, trailing dot. `height` sets the intrinsic pixel height. */
+export function lockupSvg(options: SvgOptions & { height?: number }): string {
+ const { colors, dark, height } = options
+ const { box, caret, glyphs, dot } = lockupGeometry()
+ const size = height ? ` width="${round((height * box.width) / box.height)}" height="${height}"` : ''
+ const paths = [caret, ...glyphs].map(part => `![]()
` value. */
+export function svgDataUri(svg: string): string {
+ return `data:image/svg+xml;utf8,${encodeURIComponent(svg.trim())}`
+}
diff --git a/test/unit/docs-fold-contract.test.ts b/test/unit/docs-fold-contract.test.ts
index c592cbe5..2b2bd4ff 100644
--- a/test/unit/docs-fold-contract.test.ts
+++ b/test/unit/docs-fold-contract.test.ts
@@ -18,14 +18,6 @@ describe('component rules (DESIGN.md)', () => {
})
})
-describe('noise field identity pointer (DESIGN.md)', () => {
- it('claims the noise field identity spec in this section, not COPY.md', () => {
- const specLines = design.split('\n').filter(line => line.includes('identity spec'))
- expect(specLines.length).toBeGreaterThan(0)
- expect(specLines.filter(line => line.includes('COPY.md'))).toEqual([])
- })
-})
-
describe('docs/work brief citations', () => {
it('cites the pivot plan at its new path, never the deleted root file', () => {
const briefs = readdirSync('docs/work').filter(file => file.endsWith('.md'))
diff --git a/test/unit/og-image-skill.test.ts b/test/unit/og-image-skill.test.ts
index 95be67df..ee6644f1 100644
--- a/test/unit/og-image-skill.test.ts
+++ b/test/unit/og-image-skill.test.ts
@@ -22,7 +22,7 @@ describe('skill OG image', () => {
expect(component.text()).toContain('Vue Best Practices')
expect(component.text()).not.toContain('skilld add')
- expect(component.get('img').attributes()).toMatchObject({
+ expect(component.get('img[alt="hyf0"]').attributes()).toMatchObject({
src: 'https://github.com/hyf0.png?size=128',
alt: 'hyf0',
})
diff --git a/test/unit/og-texture.test.ts b/test/unit/og-texture.test.ts
new file mode 100644
index 00000000..357409e9
--- /dev/null
+++ b/test/unit/og-texture.test.ts
@@ -0,0 +1,47 @@
+// @vitest-environment node
+import { describe, expect, it } from 'vitest'
+import { brailleNamesField, fileMinimap, textureSeed } from '../../app/utils/og-texture'
+
+function inRect(rect: { x: number, y: number, width: number, height: number }) {
+ return (dot: { x: number, y: number }) => dot.x >= rect.x && dot.x <= rect.x + rect.width && dot.y >= rect.y && dot.y <= rect.y + rect.height
+}
+
+describe('brailleNamesField', () => {
+ it('keeps the text block empty and every dot on the card', () => {
+ const text = { x: 60, y: 160, width: 640, height: 260 }
+ const dots = brailleNamesField({ width: 1200, height: 600, focal: { x: 590, y: 260 }, clear: [text] })
+
+ expect(dots.length).toBeGreaterThan(500)
+ expect(dots.filter(inRect(text))).toEqual([])
+ expect(dots.every(inRect({ x: 0, y: 0, width: 1200, height: 600 }))).toBe(true)
+ })
+
+ it('draws more dots near the focal point than far from it', () => {
+ const focal = { x: 900, y: 300 }
+ const dots = brailleNamesField({ width: 1200, height: 600, focal })
+ const near = dots.filter(inRect({ x: 800, y: 200, width: 200, height: 200 })).length
+ const far = dots.filter(inRect({ x: 0, y: 200, width: 200, height: 200 })).length
+
+ expect(near).toBeGreaterThan(far * 2)
+ })
+})
+
+describe('fileMinimap', () => {
+ const region = { x: 780, y: 0, width: 420, height: 600 }
+
+ it('draws the same files for the same Skill and different files for another', () => {
+ const tdd = fileMinimap({ region, seed: textureSeed('mattpocock/skills/tdd') })
+
+ expect(fileMinimap({ region, seed: textureSeed('mattpocock/skills/tdd') })).toEqual(tdd)
+ expect(fileMinimap({ region, seed: textureSeed('mattpocock/skills/grill-me') })).not.toEqual(tdd)
+ })
+
+ it('stays inside its region and fades in from the left edge', () => {
+ const dots = fileMinimap({ region, seed: textureSeed('antfu/skills/vite'), fade: 300 })
+ const edge = dots.filter(dot => dot.x < region.x + 30)
+ const inner = dots.filter(dot => dot.x > region.x + 300)
+
+ expect(dots.every(inRect(region))).toBe(true)
+ expect(Math.max(...edge.map(dot => dot.alpha))).toBeLessThan(Math.min(...inner.map(dot => dot.alpha)))
+ })
+})
+
+
+ {{ safeTitle }}
+
+
+
+ {{ safeDescription }}
+
+
+
-
-
-
+ class="text-3xl leading-snug"
+ :style="{ position: 'absolute', left: `${LEFT}px`, top: `${textTop}px`, width: '620px', color: 'oklch(0.72 0.01 60)' }"
+ >
+ {{ description }}
- {{ description }}
-
-