@certrev/cert-block 1.2.0-canary.1 → 1.2.0-canary.3

package/src/reader/render.ts

@@ -21,6 +21,12 @@
  *    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 (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.
  *
@@ -153,22 +159,36 @@ 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}` : ''}`
 
-/** The compensation cue's slot at the head of the scope line (memo footer, sidebar). */
+/**
+ * The compensation cue's slot at the head of the scope line (memo footer, sidebar). The separator is followed by an
+ * empty `<!-- -->`, as React's server render puts between the demo's two adjacent text children: the element's DOM
+ * holds " · " and the sentence as two text nodes. The comment is not text, so the `data-ftc-line` element still
+ * reads `{cue} · {sentence}`. With no cue there is no separator and no comment.
+ */
 function scopeLead(f: Facts): string {
-	if (f.hasCue) return `<em>${COMPENSATED_EXPERT_CUE}</em> · `
-	if (f.illus) return '<em>Illustrative example</em> · '
+	if (f.hasCue) return `<em>${COMPENSATED_EXPERT_CUE}</em> · <!-- -->`
+	if (f.illus) return '<em>Illustrative example</em> · <!-- -->'
 	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 muted credential line, empty when the reviewer has no displayed credential (so no "verified" claim prints).
@@ -225,10 +245,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>`
@@ -239,7 +258,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` +
@@ -263,11 +282,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>`
 	)
 }
 
@@ -291,10 +310,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

@@ -24,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':