@certrev/cert-block 1.2.0-canary.6 → 1.2.0

package/src/builder/ssr-seed.ts

@@ -0,0 +1,343 @@
+/**
+ * The server render's envelope seed (1.2.0): what lets a hydrated delivery card paint with NO browser read.
+ *
+ * Through 1.1.1 the browser re-read the Delivery API for every card it hydrated, because nothing handed the server's
+ * read to it. A storefront whose Content-Security-Policy `connect-src` does not name the CertREV origin (e.l.f.'s
+ * Hydrogen store is one) blocked that read, the read settled as a suppress, and the card the server had painted
+ * vanished. So the painted face now carries the envelope it was painted from, as one attribute on its wrapper:
+ * `data-certrev-envelope` = `{ v: 1, baseUrl, externalId, design?, payload, signature?, renderDef }`. `payload` is the
+ * signed envelope's payload as the Delivery API served it, less the fields the def hides (below); `renderDef` is the
+ * def the face was painted with; `design` is the design pin the read was made with (the canary replica's `?design=N`),
+ * present only on a pinned read. React escapes the attribute like any other, so no `<script>` and no CSP `script-src`
+ * are involved.
+ *
+ * HIDDEN FIELDS ARE ABSENT FROM THE PAGE, NOT JUST FROM THE FACE. A def's `hidden` set (`reviewerPhoto`, `memo`) is the
+ * brand's statement that the page does not show those fields; a seed that carried them would put the reviewer's photo
+ * URL or the memo text in the page source all the same. So `withoutHiddenContent` removes them from the payload
+ * BEFORE the card paints and before it serializes, and both the server's face and the browser's are painted from the
+ * stripped payload (so they are identical, and a hidden memo is not on the page in either place):
+ *  - `reviewerPhoto` hides `content.expert.photoUrl` and the author's `content.author.photoUrl` (the reader face paints
+ *    the author's photo under the same switch);
+ *  - `memo` hides `content.memo`.
+ * `display.showExpertPhoto: false` is the payload's own switch for the same photos and is stripped the same way (the
+ * portal never writes the URL for it either): both photo URLs go, as for `reviewerPhoto`, whatever the def hides.
+ * `content.expert.compensationCue` is NEVER touched: the cue is a locked disclosure no def can hide, and the face
+ * paints "Compensated expert" from it in the banner, the memo and the sidebar (the floating pill's own markup has
+ * no disclosure line, as in the portal's snippets; its modal paints the cue from the same field).
+ *
+ * THE SIGNATURE IS LEFT OUT WHENEVER ANYTHING WAS STRIPPED. The signature signs the full payload, so a payload with a
+ * field removed no longer verifies against it, and a seed that carried both would hand a verifier a pair that fails.
+ * Leaving it out costs nothing: the browser never re-checks a seed's signature (next paragraph), it re-runs only
+ * `renderVerdict` (lifecycle and subject) at its own clock, and neither reads a field the strip removes. A seed whose
+ * payload was not stripped keeps the signature, so a verifier can still check the page's HTML against the issuer key.
+ *
+ * The browser trusts a seed as far as it trusts the server HTML the seed sits in: whoever can write that HTML can
+ * already write any card they like, so the signature is NOT re-verified here (which would make hydration async, and
+ * Ed25519 in WebCrypto is not in every browser). The client still re-runs the lifecycle and subject policy
+ * (`renderVerdict`) at its own clock once hydration is done; `cert-review-card.tsx` does that.
+ *
+ * A PINNED CARD TAKES ONLY A SEED WITH THE SAME PIN (and an unpinned card only an unpinned one): the pin is part of
+ * the seed's key, as it is part of the read's, so the canary replica's `?design=7` card never paints the design the
+ * page carried for another version.
+ *
+ * WHEN THE SERVER HAD NO ENVELOPE TO PAINT (1.2.0) the same attribute carries a fallback record instead of a seed:
+ * `{ v: 1, baseUrl, externalId, design?, face }`, where `face` is `'options'` (CertREV could not be reached, so the
+ * server painted the block's own options face) or `'none'` (the server painted nothing: revoked, expired, unverifiable,
+ * for another entry). A browser that renders the card again (hydration, or React's client re-render after a hydration
+ * error elsewhere on the page) paints what the record says, so it neither reads the Delivery API nor shows a card the
+ * server withheld. A record holds no payload, so `parseSeed` never takes one for a seed. A `'none'` record sits on a
+ * `hidden` element with nothing in it.
+ *
+ * React-free and browser-only in effect: with no `document` (a server) `pageSeedFor` finds nothing, so a server never
+ * reads or keeps a seed and a multi-tenant render process holds nothing per page.
+ */
+
+import { HIDEABLE_FIELDS } from '../components/render-def.js'
+import type { CertContent, CertPayload, CertSignature } from '../contract/kernel.js'
+import { type DesignPin, parseDesignPin, parseRenderDef } from '../verify/get-verified-delivery.js'
+import type { CertChromeRenderDef } from './cert-chrome-data.js'
+
+export const SEED_ATTRIBUTE = 'data-certrev-envelope'
+
+export interface DeliverySeed {
+	readonly baseUrl: string
+	readonly externalId: string
+	/** The design pin the read was made with; absent on an unpinned read (every production brand). */
+	readonly design?: DesignPin
+	/** The payload as painted: with every field the def hides removed (`withoutHiddenContent`). */
+	readonly payload: CertPayload
+	/**
+	 * The envelope's signature as served; absent when the payload was stripped (it no longer verifies), and when a
+	 * cache was filled by hand (a test, a custom cache).
+	 */
+	readonly signature?: CertSignature
+	readonly renderDef: CertChromeRenderDef | null
+}
+
+/** A seed as read from the page: the parsed seed and the attribute's exact text (re-rendered verbatim on hydration). */
+export interface PageSeed {
+	readonly seed: DeliverySeed
+	readonly raw: string
+}
+
+/** What the server painted with no verified envelope: the block's options face, or nothing. */
+export type FallbackFace = 'options' | 'none'
+
+/** The record a server writes where it had no envelope to paint (the file header). */
+export interface DeliveryFallback {
+	readonly baseUrl: string
+	readonly externalId: string
+	readonly design?: DesignPin
+	readonly face: FallbackFace
+}
+
+/** A fallback record as read from the page, with the attribute's exact text. */
+export interface PageFallback {
+	readonly fallback: DeliveryFallback
+	readonly raw: string
+}
+
+/** Whatever the server wrote for one placement: a seed or a fallback record. */
+export type PageRecord = PageSeed | PageFallback
+
+const isRecord = (v: unknown): v is Record<string, unknown> => typeof v === 'object' && v !== null && !Array.isArray(v)
+
+/** A value worth hiding: anything but nothing (absent, null, the empty string). */
+const hasValue = (v: unknown): boolean => v !== undefined && v !== null && v !== ''
+
+/**
+ * The payload with the named people's photo URLs removed (`null`); the same object when neither had one. The card uses
+ * it for a photo the browser could not load (a brand's CSP `img-src`, a 404), so the face repaints with the initials.
+ */
+export function withoutPhotos(payload: CertPayload, people: readonly ('expert' | 'author')[]): CertPayload {
+	let content: Record<string, unknown> = { ...payload.content }
+	let stripped = false
+	for (const person of people) {
+		const fields = content[person]
+		if (isRecord(fields) && hasValue(fields.photoUrl)) {
+			content = { ...content, [person]: { ...fields, photoUrl: null } }
+			stripped = true
+		}
+	}
+	return stripped ? { ...payload, content: content as unknown as CertContent } : payload
+}
+
+/**
+ * The payload with every content field the def's `hidden` set controls removed, and whether anything was; the two
+ * photo URLs go as well when the payload's own `display.showExpertPhoto` is `false` (exactly `false`, as the reader
+ * face reads it: absent or `null` shows the photo).
+ *
+ * Only the ids in `HIDEABLE_FIELDS` count (a def may list others; the faces ignore them, so they hide nothing). A
+ * removed text field becomes `null`, so the content keeps the shape the contract types give it and every face reads it
+ * as absent. Nothing but those fields changes: the subject and lifecycle (what `renderVerdict` reads), the cue, the
+ * dates, the links and the names are the payload's own. Never throws on a hostile shape: a payload whose `expert` or
+ * `author` is not an object has no photo to strip.
+ */
+export function withoutHiddenContent(
+	payload: CertPayload,
+	renderDef: CertChromeRenderDef | null,
+): { readonly payload: CertPayload; readonly stripped: boolean } {
+	const hidden = (renderDef?.hidden ?? []).filter((id) => (HIDEABLE_FIELDS as readonly string[]).includes(id))
+	const display: unknown = (payload.content as unknown as Record<string, unknown> | undefined)?.display
+	const photoOff = isRecord(display) && display.showExpertPhoto === false
+	if (hidden.length === 0 && !photoOff) return { payload, stripped: false }
+	let next = photoOff || hidden.includes('reviewerPhoto') ? withoutPhotos(payload, ['expert', 'author']) : payload
+	if (hidden.includes('memo') && hasValue(next.content.memo)) {
+		next = { ...next, content: { ...next.content, memo: null } as unknown as CertContent }
+	}
+	return { payload: next, stripped: next !== payload }
+}
+
+/**
+ * The seed for a verified read: the payload stripped of what the def hides, and the signature only when nothing was
+ * stripped. The card paints from this seed's payload, on the server and in the browser alike.
+ */
+export function seedFor(read: {
+	readonly baseUrl: string
+	readonly externalId: string
+	readonly design?: DesignPin
+	readonly payload: CertPayload
+	readonly signature?: CertSignature
+	readonly renderDef: CertChromeRenderDef | null
+}): DeliverySeed {
+	const { payload, stripped } = withoutHiddenContent(read.payload, read.renderDef)
+	return {
+		baseUrl: read.baseUrl,
+		externalId: read.externalId,
+		...(read.design ? { design: read.design } : {}),
+		payload,
+		...(read.signature && !stripped ? { signature: read.signature } : {}),
+		renderDef: read.renderDef,
+	}
+}
+
+const serializedPin = (design: DesignPin | undefined) =>
+	design ? { design: { version: design.version, ...(design.brand === undefined ? {} : { brand: design.brand }) } } : {}
+
+export function serializeSeed(seed: DeliverySeed): string {
+	return JSON.stringify({
+		v: 1,
+		baseUrl: seed.baseUrl,
+		externalId: seed.externalId,
+		...serializedPin(seed.design),
+		payload: seed.payload,
+		...(seed.signature ? { signature: seed.signature } : {}),
+		renderDef: seed.renderDef,
+	})
+}
+
+export function serializeFallback(fallback: DeliveryFallback): string {
+	return JSON.stringify({
+		v: 1,
+		baseUrl: fallback.baseUrl,
+		externalId: fallback.externalId,
+		...serializedPin(fallback.design),
+		face: fallback.face,
+	})
+}
+
+/** A pin a record names, judged by the same grammar the card's own pin is: undefined when absent, null when bad. */
+function parsedPin(design: unknown): DesignPin | undefined | null {
+	if (design === undefined) return undefined
+	const judged = isRecord(design)
+		? parseDesignPin({ design: design.version, ...(design.brand === undefined ? {} : { designBrand: design.brand }) })
+		: 'invalid'
+	return judged === 'invalid' || judged === undefined ? null : judged
+}
+
+/** The seed in one attribute value, or null for anything that is not one (never throws). */
+export function parseSeed(raw: string): DeliverySeed | null {
+	let value: unknown
+	try {
+		value = JSON.parse(raw)
+	} catch {
+		return null
+	}
+	if (!isRecord(value) || value.v !== 1) return null
+	const { baseUrl, externalId, design, payload, signature, renderDef } = value
+	if (typeof baseUrl !== 'string' || typeof externalId !== 'string') return null
+	if (!isRecord(payload) || !isRecord(payload.subject) || !isRecord(payload.lifecycle) || !isRecord(payload.content)) {
+		return null
+	}
+	// A pin the seed names is judged by the same grammar the card's own pin is; one that fails it is not a seed.
+	const pin = parsedPin(design)
+	if (pin === null) return null
+	return {
+		baseUrl,
+		externalId,
+		...(pin ? { design: pin } : {}),
+		payload: payload as unknown as CertPayload,
+		...(isRecord(signature) ? { signature: signature as unknown as CertSignature } : {}),
+		renderDef: parseRenderDef(renderDef),
+	}
+}
+
+/** A fallback record in one attribute value, or null for anything that is not one (a seed included; never throws). */
+export function parseFallback(raw: string): DeliveryFallback | null {
+	let value: unknown
+	try {
+		value = JSON.parse(raw)
+	} catch {
+		return null
+	}
+	if (!isRecord(value) || value.v !== 1 || 'payload' in value) return null
+	const { baseUrl, externalId, design, face } = value
+	if (typeof baseUrl !== 'string' || typeof externalId !== 'string') return null
+	if (face !== 'options' && face !== 'none') return null
+	const pin = parsedPin(design)
+	if (pin === null) return null
+	return { baseUrl, externalId, ...(pin ? { design: pin } : {}), face }
+}
+
+/** One placement's key: the origin, the entry and the pin (the read's own key, so a pin never shares a seed). */
+function seedKey(baseUrl: string, externalId: string, design: DesignPin | undefined): string {
+	return design ? `${baseUrl}|${externalId}|design=${design.version}|${design.brand ?? ''}` : `${baseUrl}|${externalId}`
+}
+
+/**
+ * The seeds (and fallback records) this page's server HTML carried, by placement, for the page's lifetime: a card
+ * mounted later by a client-side render (an in-app navigation back to a server-rendered article, or React's client
+ * re-render after a hydration error) paints what the server painted, as the hydrated card it replaces would have.
+ */
+const pageSeeds = new Map<string, PageRecord>()
+
+const recordKey = (record: PageRecord): string => {
+	const r = 'seed' in record ? record.seed : record.fallback
+	return seedKey(r.baseUrl, r.externalId, r.design)
+}
+
+/** Every seed and fallback record the live document carries, in document order. */
+function scanDocument(): PageRecord[] {
+	const found: PageRecord[] = []
+	for (const el of Array.from(document.querySelectorAll(`[${SEED_ATTRIBUTE}]`))) {
+		const raw = el.getAttribute(SEED_ATTRIBUTE)
+		if (!raw) continue
+		const seed = parseSeed(raw)
+		const fallback = seed ? null : parseFallback(raw)
+		if (seed) found.push({ seed, raw })
+		else if (fallback) found.push({ fallback, raw })
+	}
+	return found
+}
+
+/**
+ * The record the server wrote for this placement and pin: its seed, or its fallback record. By default: from the map,
+ * else from one scan of the document (which also records every other one on the page). With `live`, the map is not
+ * consulted: the document is scanned and decides, so what a hydrating card learns is what the server HTML in front of
+ * it carries, not what an earlier page in this process left behind. `undefined` when the page carries none, and always
+ * on a server.
+ */
+export function pageRecordFor(
+	baseUrl: string,
+	externalId: string,
+	design?: DesignPin,
+	options: { readonly live?: boolean } = {},
+): PageRecord | undefined {
+	const key = seedKey(baseUrl, externalId, design)
+	if (typeof document === 'undefined') return undefined
+	const known = options.live ? undefined : pageSeeds.get(key)
+	if (known) return known
+	let inDocument = false
+	for (const found of scanDocument()) {
+		const k = recordKey(found)
+		if (k === key) inDocument = true
+		if (options.live || !pageSeeds.has(k)) pageSeeds.set(k, found)
+	}
+	// A live read answers for the document alone: a record an earlier page left in the map is not one this page carries.
+	return options.live && !inDocument ? undefined : pageSeeds.get(key)
+}
+
+/** `pageRecordFor`, seeds only: the seed the server painted for this placement and pin. */
+export function pageSeedFor(
+	baseUrl: string,
+	externalId: string,
+	design?: DesignPin,
+	options: { readonly live?: boolean } = {},
+): PageSeed | undefined {
+	const record = pageRecordFor(baseUrl, externalId, design, options)
+	return record && 'seed' in record ? record : undefined
+}
+
+/** A Suspense boundary's comment marker as React's server render writes it: `$` (done), `$?` (pending), `$!`, `$~`. */
+const BOUNDARY_MARKER = /^\$[?!~]?$/
+
+/**
+ * Whether the live document holds server-rendered React HTML: any Suspense boundary marker. The delivery card sits in
+ * a `<Suspense>` of its own, so a server render of one always leaves a marker, a card the server painted nothing for
+ * (revoked, expired, unreachable) included, and a client render never does. This is how a card that is hydrating tells
+ * a browser hydrating server HTML (the document holds it) from a server render that merely runs where a `document`
+ * exists (a test's jsdom, a shim): there the document does not hold the HTML being produced.
+ */
+export function pageHoldsServerHtml(): boolean {
+	if (typeof document === 'undefined' || !document.documentElement) return false
+	const walker = document.createTreeWalker(document.documentElement, 128 /* NodeFilter.SHOW_COMMENT */)
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+		if (BOUNDARY_MARKER.test((node as Comment).data)) return true
+	}
+	return false
+}
+
+/** Test seam: forget every seed (a new page). */
+export function forgetPageSeedsForTests(): void {
+	pageSeeds.clear()
+}

package/src/reader/face.ts

@@ -1,8 +1,23 @@
 /**
- * `certrev-reader-face`: the round avatar on a reader byline: the person's photo when there is one to show, the
- * silhouette when there is not. The span carries a size class (`sm` for the author, none for the banner reviewer,
- * `lg` for the memo and sidebar reviewer); the image is requested at `width` square through the asset resizer.
+ * `certrev-reader-face`: the round avatar on a reader byline: the person's photo when there is one to paint, else their
+ * initials, else (a person with no name to take them from) the silhouette. The span carries a size class (`sm` for the
+ * author, none for the banner reviewer, `lg` for the memo and sidebar reviewer); the image is requested at `width`
+ * square through the asset resizer.
+ *
+ * THE INITIALS ARE A BYTE SPEC the portal's Liquid snippets and the WordPress renderer repeat, so all three print the
+ * same bytes: trim the name and split it on single spaces (`' '`) SKIPPING empty parts (two spaces in a row are one
+ * gap: "Jane  Doe" gives "JD"); drop the FIRST part when, lowercased, it is one of the honorifics dr, mr, mrs, ms,
+ * prof, mx (each with or without its trailing dot); take the first character, by code point, of each of the first two
+ * parts left; uppercase them. Non-empty initials paint exactly
+ * `<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><text x="20" y="20" text-anchor="middle"
+ * dominant-baseline="central" font-size="15" font-weight="700">JD</text></svg>` (one line, the initials escaped);
+ * empty ones paint the silhouette as before.
+ *
+ * "A photo to paint" is `show` with a URL that passes `safeUrl`. A def that hides `reviewerPhoto`, or
+ * `display.showExpertPhoto: false`, passes `show: false`: the URL is never read, so it never reaches the page, and the
+ * avatar is the initials (a hidden photo used to remove the avatar altogether; it removes the photo now).
  */
+import { asText } from '../components/escape.js'
 import { avatarUrl, cleaned, esc, safeUrl } from './helpers.js'
 
 export type ReaderFaceSize = '' | 'sm' | 'lg'
@@ -10,8 +25,10 @@ export type ReaderFaceSize = '' | 'sm' | 'lg'
 export interface ReaderFaceInput {
 	/** The photo URL on the envelope. */
 	readonly photo: unknown
-	/** Whether to ATTEMPT the photo: false never reads the URL (the silhouette shows). */
+	/** Whether to ATTEMPT the photo: false never reads the URL (the initials show). */
 	readonly show: boolean
+	/** The person's display name, the initials' source; a hostile type reads as no name. */
+	readonly name: unknown
 	readonly size: ReaderFaceSize
 	/** The pixel width the resizer is asked for. */
 	readonly width: number
@@ -20,16 +37,52 @@ export interface ReaderFaceInput {
 const SILHOUETTE =
 	'<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><circle cx="20" cy="14.8" r="7"/><path d="M20 23.4c-6.9 0-12.6 4.8-13.8 11.2a20 20 0 0 0 27.6 0C32.6 28.2 26.9 23.4 20 23.4Z"/></svg>'
 
+const HONORIFICS: ReadonlySet<string> = new Set([
+	'dr',
+	'dr.',
+	'mr',
+	'mr.',
+	'mrs',
+	'mrs.',
+	'ms',
+	'ms.',
+	'prof',
+	'prof.',
+	'mx',
+	'mx.',
+])
+
+/** The initials of a display name by the spec above: '' when the name leaves no first character to take. */
+export function initialsOf(name: unknown): string {
+	const parts = asText(name)
+		.trim()
+		.split(' ')
+		.filter((part) => part !== '')
+	if (HONORIFICS.has((parts[0] ?? '').toLowerCase())) parts.shift()
+	return parts
+		.slice(0, 2)
+		.map((part) => Array.from(part)[0] ?? '')
+		.join('')
+		.toUpperCase()
+}
+
+const initialsSvg = (initials: string): string =>
+	'<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><text x="20" y="20" text-anchor="middle" ' +
+	`dominant-baseline="central" font-size="15" font-weight="700">${esc(initials)}</text></svg>`
+
 const DIMENSION: Readonly<Record<ReaderFaceSize, number>> = { '': 42, sm: 36, lg: 46 }
 
-export function readerFace({ photo, show, size, width }: ReaderFaceInput): string {
+export function readerFace({ photo, show, name, size, width }: ReaderFaceInput): string {
 	const safe = show ? cleaned(safeUrl(photo)) : ''
 	const src = cleaned(avatarUrl(safe, width))
 	const dim = DIMENSION[size]
 	const cls = size === '' ? 'certrev-r-face' : `certrev-r-face ${esc(size)}`
+	const initials = src !== '' ? '' : initialsOf(name)
 	const inner =
 		src !== ''
 			? `<img src="${esc(src)}" alt="" width="${dim}" height="${dim}" loading="lazy" decoding="async">`
-			: SILHOUETTE
+			: initials !== ''
+				? initialsSvg(initials)
+				: SILHOUETTE
 	return `<span class="${cls}">${inner}</span>`
 }

package/src/reader/render.ts

@@ -27,8 +27,10 @@
  *    sentence is direct text of the scope element, which carries `data-ftc-line` itself (after the cue's " · " there
  *    is a `<!-- -->`, so the cue separator and the sentence are two text nodes). The `<!-- -->` marks between
  *    adjacent leaves are React's, kept so the bytes equal the Liquid snippets' and the portal's goldens;
- *  - the def's `hidden` set removes the avatars (`reviewerPhoto`), `display.showExpertPhoto === false` keeps the
- *    silhouette and never requests the photo, `display.showAuthor === false` drops the author column.
+ *  - the avatars: a photo when there is one to paint, else the person's initials (`face.ts` is the byte spec), else the
+ *    silhouette for a name with none. The def's `hidden` set holding `reviewerPhoto`, and `display.showExpertPhoto ===
+ *    false`, keep the photo URL out of the page entirely (the avatar is the initials); neither removes the avatar.
+ *    `display.showAuthor === false` drops the author column.
  *
  * Every interpolated field is escaped and every URL passes `safeUrl`. A hostile type (a number, an object) renders as
  * nothing, never as a throw: see `helpers.ts`.
@@ -90,7 +92,7 @@ interface Facts {
 	readonly def: unknown
 	readonly certId: string
 	readonly ename: string
-	readonly hideAvatar: boolean
+	/** Whether a photo may be painted: neither `reviewerPhoto` hidden nor `showExpertPhoto: false`. */
 	readonly showPhoto: boolean
 	/** The joined credential labels, '' when there are none. */
 	readonly creds: string
@@ -110,8 +112,7 @@ function readFacts(input: ReaderFaceInput): Facts {
 	const def = input.def
 	const rd = rec(def)
 
-	const hideAvatar = contains(rd.hidden, 'reviewerPhoto')
-	const showPhoto = disp.showExpertPhoto !== false && !hideAvatar
+	const showPhoto = disp.showExpertPhoto !== false && !contains(rd.hidden, 'reviewerPhoto')
 
 	// POR-9738: each credential's cardLabel over its bare abbreviation, joined with ', ' (labels are not trimmed).
 	const labels: string[] = []
@@ -132,7 +133,6 @@ function readFacts(input: ReaderFaceInput): Facts {
 		def,
 		certId: asText(input.certId),
 		ename: textOr(expert.displayName),
-		hideAvatar,
 		showPhoto,
 		creds: labels.join(', '),
 		hasCue,
@@ -216,15 +216,15 @@ function bannerCard(f: Facts): string {
 	const authorName = textOr(author.name)
 	const authorTitle = textOr(author.title)
 	const hasAuthor = f.disp.showAuthor !== false && authorName !== '' && authorName !== f.ename
-	const avatar = (photo: unknown, size: 'sm' | ''): string =>
-		f.hideAvatar ? '' : readerFace({ photo, show: f.showPhoto, size, width: 84 })
+	const avatar = (photo: unknown, name: string, size: 'sm' | ''): string =>
+		readerFace({ photo, show: f.showPhoto, name, size, width: 84 })
 
 	const authorBy = hasAuthor
-		? `<div class="certrev-r-by">${avatar(author.photoUrl, 'sm')}<div>\n              <b>${esc(authorName)}</b>` +
+		? `<div class="certrev-r-by">${avatar(author.photoUrl, authorName, 'sm')}<div>\n              <b>${esc(authorName)}</b>` +
 			`${authorTitle !== '' ? `<em>${esc(authorTitle)}</em>` : ''}<span class="certrev-r-role">Written by</span>\n            </div>\n          </div>`
 		: ''
 	const expertBy =
-		`<div class="certrev-r-by">${avatar(f.expert.photoUrl, '')}<div>\n            <b>${esc(f.ename)}</b>` +
+		`<div class="certrev-r-by">${avatar(f.expert.photoUrl, f.ename, '')}<div>\n            <b>${esc(f.ename)}</b>` +
 		`${verifiedLine(f, true)}<span class="certrev-r-role on">Reviewed by</span>\n          </div>\n        </div>`
 
 	const certifiedAt = f.content.certifiedAt
@@ -279,7 +279,7 @@ function bannerMemo(f: Facts): string {
 				(f.vurl !== '' ? anchor(f.vurl, '', 'View certificate') : '') +
 				'</div>'
 			: ''
-	const avatar = f.hideAvatar ? '' : readerFace({ photo: f.expert.photoUrl, show: f.showPhoto, size: 'lg', width: 112 })
+	const avatar = readerFace({ photo: f.expert.photoUrl, show: f.showPhoto, name: f.ename, size: 'lg', width: 112 })
 	return (
 		`${sectionOpen(f, false, `Expert memo by ${f.ename}`)}\n  <div class="certrev-r-card pad">\n` +
 		'    <div class="certrev-r-kick">Expert memo</div>\n' +
@@ -299,7 +299,7 @@ function bannerMemo(f: Facts): string {
 function sidebar(f: Facts): string {
 	if (f.ename === '') return ''
 	const bio = f.disp.showBio !== false && !isBlank(f.expert.bio) ? asText(f.expert.bio) : ''
-	const avatar = f.hideAvatar ? '' : readerFace({ photo: f.expert.photoUrl, show: f.showPhoto, size: 'lg', width: 112 })
+	const avatar = readerFace({ photo: f.expert.photoUrl, show: f.showPhoto, name: f.ename, size: 'lg', width: 112 })
 	const both = f.purl !== '' && f.vurl !== ''
 	const links =
 		f.purl !== '' || f.vurl !== ''