@certrev/cert-block 1.2.0-canary.0 → 1.2.0-canary.2

package/src/reader/render.ts

@@ -21,6 +21,11 @@
  *    its words are fixed. `illustrative` (a CertREV preview, never a live page) fills the cue's slot with the demo's
  *    "Illustrative example" label when the envelope has no cue; a real cue always wins the slot;
  *  - the scope line is never hideable: the card carries it when there is no memo, the memo card and the sidebar always;
+ *  - the text leaves are the demo's (what React server-renders): the memo name is the name, "," and the credential; the
+ *    profile link is "View", the first name and "’s profile"; the sidebar name is the name, "," and the credential in
+ *    one `<b>`; the certified date is direct text of its span beside the "Certified" cue (no `<time>`); the scope
+ *    sentence is direct text of the scope element, which carries `data-ftc-line` itself. 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.
  *
@@ -153,10 +158,14 @@ function sectionOpen(f: Facts, badge: boolean, aria: string): string {
 const anchor = (href: string, modal: string, label: string): string =>
 	`<a href="${esc(href)}" target="_blank" rel="${CERTREV_LINK_REL}" data-certrev-modal-open${modal}>${label}</a>`
 
-/** The words the memo-less banner and the memo link row use for the profile link. */
+/**
+ * The words the memo-less banner and the memo link row use for the profile link: the demo's three leaves ("View", the
+ * first name, "’s profile"), set apart by the `<!-- -->` React paints between adjacent text expressions. With no first
+ * name the wording stays one leaf.
+ */
 function profileLabel(f: Facts): string {
 	const first = cleaned(firstName(f.ename))
-	return first !== '' ? `View ${esc(first)}&rsquo;s profile` : 'View profile'
+	return first !== '' ? `View <!-- -->${esc(first)}<!-- -->&rsquo;s profile` : 'View profile'
 }
 
 const credentialAria = (f: Facts): string => `Content reviewed by ${f.ename}${f.creds !== '' ? `, ${f.creds}` : ''}`
@@ -168,15 +177,27 @@ function scopeLead(f: Facts): string {
 	return ''
 }
 
-const SCOPE = `<span data-ftc-line>${CERT_SCOPE_LINE}</span>`
+/**
+ * The scope sentence is DIRECT text of the scope element (the demo's `<span class="dg-scope">`), which carries the
+ * `data-ftc-line` marker itself: no inner span, so the element's `.certrev-r-scope em` cue and the sentence are leaves of
+ * one element, as the demo paints them. The marker is on exactly one element per render, as before.
+ */
+const SCOPE = CERT_SCOPE_LINE
 
-/** The "{credential} · Credential verified by CertREV[ on {date}]" muted line (the credential part is the caller's). */
+/**
+ * The muted credential line, empty when the reviewer has no displayed credential (so no "verified" claim prints).
+ *
+ * The banner's is the demo's three leaves in one `<em>`: the credential, " · ", and the attribution, which reads
+ * "Credential verified by CertREV on {date}" or, with no date, just "Credential verified by CertREV". The spans carry
+ * no style of their own. The sidebar names the credential in its bold line already, so its `<em>` is the attribution
+ * alone.
+ */
 function verifiedLine(f: Facts, withCredentials: boolean): string {
 	if (f.creds === '') return ''
 	const date = cleaned(isBlank(f.expert.credentialVerifiedAt) ? '' : longDate(f.expert.credentialVerifiedAt))
 	const on = date !== '' ? ` on ${esc(date)}` : ''
-	const lead = withCredentials ? `${esc(f.creds)} · ` : ''
-	return `<em>${lead}Credential verified by CertREV${on}</em>`
+	if (!withCredentials) return `<em>Credential verified by CertREV${on}</em>`
+	return `<em><span>${esc(f.creds)}</span> · <span>Credential verified by CertREV${on}</span></em>`
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -218,10 +239,9 @@ function bannerCard(f: Facts): string {
 
 	let foot = ''
 	if (hasFoot) {
-		const when =
-			certified !== ''
-				? `<span><em>Certified</em><time datetime="${esc(certifiedAt)}">${esc(certified)}</time></span>`
-				: '<span></span>'
+		// The demo's `<span><em>Certified</em>{date}</span>`: the date is direct text of the span (no `<time>`), so the
+		// span paints the mono cue and the date's own face.
+		const when = certified !== '' ? `<span><em>Certified</em>${esc(certified)}</span>` : '<span></span>'
 		let cue = ''
 		if (f.hasCue) {
 			cue = `<span>Compensated ${f.purl !== '' ? anchor(f.purl, '="expert"', 'expert') : 'expert'}</span>`
@@ -232,7 +252,7 @@ function bannerCard(f: Facts): string {
 	}
 
 	// POR-9317: the memo card carries the scope line when there is a memo; with none this card is the sole claim face.
-	const scope = f.noMemo ? `<div class="certrev-r-scope" data-ftc-disclosure>${SCOPE}</div>` : ''
+	const scope = f.noMemo ? `<div class="certrev-r-scope" data-ftc-disclosure data-ftc-line>${SCOPE}</div>` : ''
 
 	return (
 		`${sectionOpen(f, true, credentialAria(f))}\n  <div class="certrev-r-card">\n` +
@@ -256,11 +276,11 @@ function bannerMemo(f: Facts): string {
 		`${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' +
 		`    <div class="certrev-r-memo">${avatar}<div>\n` +
-		`        <div class="certrev-r-memo-name"><b>${esc(f.ename)}</b>${f.creds !== '' ? `, ${esc(f.creds)}` : ''}</div>\n` +
+		`        <div class="certrev-r-memo-name"><b>${esc(f.ename)}</b>${f.creds !== '' ? `, <!-- -->${esc(f.creds)}` : ''}</div>\n` +
 		`        <blockquote>${esc(f.content.memo)}</blockquote>${links}</div>\n    </div>\n` +
 		'    <div class="certrev-r-rule"></div>\n    <div class="certrev-r-vfoot">\n' +
 		`      <span class="certrev-r-verified">${readerLogo('mono', 17, '')}Verified by <b>CertREV</b></span>\n` +
-		`      <span class="certrev-r-scope" data-ftc-disclosure>${scopeLead(f)}${SCOPE}</span>\n    </div>\n  </div>\n</section>`
+		`      <span class="certrev-r-scope" data-ftc-disclosure data-ftc-line>${scopeLead(f)}${SCOPE}</span>\n    </div>\n  </div>\n</section>`
 	)
 }
 
@@ -284,10 +304,10 @@ function sidebar(f: Facts): string {
 		`${sectionOpen(f, true, credentialAria(f))}\n  <div class="certrev-r-side">\n` +
 		`    <div class="certrev-r-cap center">${readerLogo(f.fg === '#ffffff' ? 'white' : 'mono', 18, 'CertREV')}Expert reviewed</div>\n` +
 		`    <div class="certrev-r-side-body">\n      <div class="certrev-r-by">${avatar}<div>\n` +
-		`          <b>${esc(f.ename)}${f.creds !== '' ? `, ${esc(f.creds)}` : ''}</b>${verifiedLine(f, false)}</div>\n      </div>` +
+		`          <b>${esc(f.ename)}${f.creds !== '' ? `<!-- -->, <!-- -->${esc(f.creds)}` : ''}</b>${verifiedLine(f, false)}</div>\n      </div>` +
 		`${bio !== '' ? `<p>${esc(bio)}</p>` : ''}` +
 		`${isBlank(f.content.memo) ? '' : `<blockquote>${esc(f.content.memo)}</blockquote>`}` +
-		`<div class="certrev-r-scope" data-ftc-disclosure>${scopeLead(f)}${SCOPE}</div>\n    </div>` +
+		`<div class="certrev-r-scope" data-ftc-disclosure data-ftc-line>${scopeLead(f)}${SCOPE}</div>\n    </div>` +
 		`${links}</div>\n</section>`
 	)
 }

package/src/reader/tokens.ts

@@ -6,9 +6,12 @@
  *   --cr-br     the corner radius
  *   --cr-bf     the font stack for the brand's `fontSlot`
  *
- * The values land inside a double-quoted `style` attribute, so a colour or radius that could break out of it
- * (`; ( ) { } < > "` or a space) is dropped to its default rather than escaped into something half valid. The variable
- * names are the reader stylesheet's (`reader.css`), which `.certrev-reader` declares defaults for.
+ * The values land inside a double-quoted `style` attribute, and they are held to the allow-list the Liquid snippet and
+ * the PHP twin's def parser hold them to: a colour is `#RGB` or `#RRGGBB`, a radius one non-negative px / rem / em / %
+ * length or a bare `0`, and anything else paints the default (navy, 14px). A denylist of characters is not enough: a
+ * quote, a backslash, a comment opener or a bracket left in a value hides the `;` that ends it and swallows the
+ * declarations after it. The variable names are the reader stylesheet's (`reader.css`), which `.certrev-reader`
+ * declares defaults for.
  */
 import { asText } from '../components/escape.js'
 import { esc, rec, textOr } from './helpers.js'
@@ -21,16 +24,17 @@ const DARK_INK = '#141414'
 
 /**
  * The font stack per `fontSlot`, in one table so the Liquid `certrev-reader-tokens` snippet and this one are compared
- * on a single list. An unknown or missing slot is the sans stack, as in the snippet. The serif and grotesk stacks name
- * the reader's own `@font-face` aliases first ("CertREV Reader Serif" / "CertREV Reader Grotesk", declared in
- * `reader.css`), then the legacy family and the generic fallbacks, as the snippet's `--cr-bf` does.
+ * on a single list. An unknown or missing slot is the sans stack, as in the snippet. The stacks are the demo's own, byte
+ * for byte: the reader block of `reader.css` declares certrev.com's own faces under these family names (DM Sans,
+ * Playfair Display, Plus Jakarta Sans, JetBrains Mono) at `font-stretch: 101%`, which the reader root asks for, so the
+ * legacy faces a page may also load are untouched. `system` has no demo stack and keeps the legacy one.
  */
 function fontStack(slot: string): string {
 	switch (slot) {
 		case 'serif':
-			return "'CertREV Reader Serif', 'Playfair Display', ui-serif, Georgia, serif"
+			return "'Playfair Display', ui-serif, Georgia, serif"
 		case 'grotesk':
-			return "'CertREV Reader Grotesk', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif"
+			return "'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif"
 		case 'mono':
 			return "'JetBrains Mono', ui-monospace, monospace"
 		case 'system':
@@ -40,10 +44,24 @@ function fontStack(slot: string): string {
 	}
 }
 
-/** A token value that cannot leave the style attribute, or '' (which the caller defaults). */
-function guarded(value: unknown): string {
+/** A colour is `#` and then 3 or 6 hex digits (ASCII only, no trailing newline), else '' (which the caller defaults). */
+const HEX = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+/**
+ * A radius is a bare `0`, or digits with at most one `.` (not trailing) and then px, rem, em or %, else ''. `\d` is
+ * ASCII here (no `u` flag), as the snippet's `0123456789.` is; the unit is case-sensitive.
+ */
+const LENGTH = /^(?:\d+|\d+\.\d+|\.\d+)(?:px|rem|em|%)$/
+
+/** A colour token that is a hex colour, or '' (which the caller defaults). */
+function hexColour(value: unknown): string {
+	const text = textOr(value)
+	return HEX.test(text) ? text : ''
+}
+
+/** A radius token that is a bare 0 or a non-negative length, or '' (which the caller defaults). */
+function radius(value: unknown): string {
 	const text = textOr(value)
-	return /[;(){}<>" ]/.test(text) ? '' : text
+	return text === '0' || LENGTH.test(text) ? text : ''
 }
 
 export interface ReaderTokens {
@@ -57,8 +75,8 @@ export function readerTokens(def: unknown): ReaderTokens {
 	const rd = rec(def)
 	const tokens = rec(rd.tokens)
 
-	const barInk = guarded(tokens.barInk)
-	const accent = guarded(tokens.accentColor)
+	const barInk = hexColour(tokens.barInk)
+	const accent = hexColour(tokens.accentColor)
 	const ba = barInk || accent || DEFAULT_ACCENT
 
 	// The ink follows the value that painted the accent: a def with a bar ink takes the foreground baked for it
@@ -70,7 +88,7 @@ export function readerTokens(def: unknown): ReaderTokens {
 		fg = DARK_INK
 	}
 
-	const br = guarded(tokens.cornerRadius) || DEFAULT_RADIUS
+	const br = radius(tokens.cornerRadius) || DEFAULT_RADIUS
 	const bf = fontStack(asText(tokens.fontSlot))
 	return { style: `--cr-ba:${esc(ba)};--cr-ba-fg:${fg};--cr-br:${esc(br)};--cr-bf:${bf}`, fg }
 }