/* ============================================================ EBTR — Article reader Progress bar · reading time · bookmark · author w/ role badge · related · premium paywall (free preview → unlock). ============================================================ */ const { Stat: EBStat, Badge: EBBadgeR, Button: EBButtonR, ThreeBar: EBThreeBarR, Eyebrow: EBEyebrowR } = window.EBTHubDesignSystem_ccdc9d; /* ---- Per-user watermark layer (faint, tiled, diagonal; non-interactive) ---- */ function ebtrWatermarkURI(text) { const svg = ``; return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`; } function EBTRWatermark({ viewer }) { const label = `Licensed to ${viewer.name} · ${viewer.company}`; return

; } /* ---- Watermarked PDF export (browser print-to-PDF; reader's name on every page) ---- */ function ebtrEscape(s) { return String(s).replace(/&/g, "&").replace(//g, ">"); } function ebtrBlockHTML(b) { if (b.t === "p") return `

${ebtrEscape(b.text)}

`; if (b.t === "h2") return `

${ebtrEscape(b.text)}

`; if (b.t === "quote") return `

${ebtrEscape(b.text)}${b.cite ? `— ${ebtrEscape(b.cite)}` : ""}

`; if (b.t === "stat") return `

${ebtrEscape(b.value)}${ebtrEscape(b.label)}${b.source ? `${ebtrEscape(b.source)}` : ""}

`; if (b.t === "list") return `

${ebtrEscape(it)}

`; if (b.t === "callout") return `

${ebtrEscape(b.label)}

${ebtrEscape(b.text)}

`; return ""; } function ebtrExportPdf(article, viewer) { const data = window.EBTR_DATA; const cat = data.categories[article.category]; const author = ebtrResolveAuthor(article); const stamp = `Licensed to ${viewer.name} · ${viewer.company}`; const date = new Date(article.date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" }); const wmSvg = ``; const wm = `url("data:image/svg+xml;utf8,${encodeURIComponent(wmSvg)}")`; const html = `${ebtrEscape(article.title)} — EBTR

EBTHub Review

${ebtrEscape(cat.label)}${article.premium ? " · Premium" : ""}

${ebtrEscape(article.title)}

${ebtrEscape(article.dek)}

${ebtrEscape(author.name)} · ${date} · ${article.readingMins} min read

${article.body.map(ebtrBlockHTML).join("")}

© 2026 EBTHub — European Business Transformation Hub · Vienna, AT.
This copy is licensed to ${ebtrEscape(viewer.name)} (${ebtrEscape(viewer.company)}) for personal use. Redistribution is traceable to this account.

${ebtrEscape(stamp)}

{ebtrInline(raw)}

; } // Walk lines: ## → heading, - → bullet (following lines become its description), else → paragraph. const lns = raw.split(/\n/).map((l) => l.trim()); const out = []; let para = [], cur = null; const flushPara = () => { if (para.length) { out.push({ k: "p", t: para.join(" ") }); para = []; } }; const flushList = () => { if (cur) { out.push({ k: "ul", items: cur }); cur = null; } }; lns.forEach((ln) => { if (!ln) { flushList(); flushPara(); return; } if (/^#{1,3}\s+/.test(ln)) { flushList(); flushPara(); out.push({ k: "h2", t: ln.replace(/^#{1,3}\s+/, "") }); } else if (/^[-*•]\s+/.test(ln)) { flushPara(); if (!cur) cur = []; cur.push({ head: ln.replace(/^[-*•]\s+/, ""), body: [] }); } else if (cur) { cur[cur.length - 1].body.push(ln); } else { para.push(ln); } }); flushList(); flushPara(); return ( {out.map((seg, i) => { if (seg.k === "h2") return

{ebtrInline(seg.t)}

; if (seg.k === "ul") return (

→

{ebtrInline(it.head)}
{it.body.map((bd, k) =>
{ebtrInline(bd)}
)}

); return

{ebtrInline(seg.t)}

; })} ); } if (b.t === "h2") return

{b.text}

; if (b.t === "quote") return (

{b.text}
{b.cite && — {b.cite}}

); if (b.t === "stat") { const col = b.color === "blue" ? "var(--ebt-blue)" : b.color === "purple" ? "var(--ebt-purple)" : "var(--ebt-orange)"; return (

{b.value}

{b.label}

{b.source &&

{b.source}

}

); } if (b.t === "list") return (

→ {ebtrInline(it)}

); if (b.t === "callout") return (

{b.label}

{b.text}

); if (b.t === "figure") return (

{b.caption &&

{b.caption}

} ); return null; } /* ---- Author block ---- */ function EBTRAuthorCard({ article }) { const a = ebtrResolveAuthor(article); if (!a || !a.name) return null; const isStefi = !!(article.column || article.category === "digital-employee"); return (

{a.portrait &&

}

About the author

{a.name} {isStefi && AI persona} {(a.badges && a.badges.length ? a.badges : (a.badge ? [a.badge] : [])).filter((b) => b && b.label && b.label !== "— none").map((b, i) => {b.label})}

{isStefi &&

Written by an AI persona, not a human — disclosed by design.

} {a.title &&

{a.title}

} {a.bio &&

{a.bio}

} {a.orcid && ORCID {a.orcid}}

); } /* ---- References (APA, 2–5) ---- */ // Normalize a DOI value to its bare form (10.xxxx/…) so we never double-prefix // when an author/editor pastes a full https://doi.org/… URL into the field. function ebtrDoiBare(d) { return String(d == null ? "" : d).trim() .replace(/^\s*doi:\s*/i, "") .replace(/^https?:\/\/(dx\.)?doi\.org\//i, "") .replace(/^doi\.org\//i, ""); } function EBTRReferences({ refs, doi }) { if ((!refs || refs.length === 0) && !doi) return null; return (

{refs && refs.length > 0 && (

References

{i + 1}. {r.authors} ({r.year}). {r.title}. {r.source}.{r.doi && https://doi.org/{ebtrDoiBare(r.doi)}}

)} {doi && (

https://doi.org/{ebtrDoiBare(doi)}

)}

); } /* ---- Premium wall: the piece describes a deployable instrument + the research behind it. The tool itself ships separately. Lab contributors and partner companies read it in full — access is tied to their account, not a paywall. ---- */ function EBTRPremiumWall({ article, loggedIn, onSignIn, onRequest }) { return (

Premium

The instrument behind the piece

This paper sets out the deployable instrument and the research behind it. Lab contributors and partner companies read it in full — access is tied to your account, not a paywall. The tool itself ships separately.

{!loggedIn && Sign in} Request access

Worked in this Lab, or a partner company? Request access.

); } /* ---- LinkedIn share image (downloadable / shareable, 1200×1200 square) ---- Members get better reach posting a native image than a link. This bakes the article's own cover + title + author + date + the three-bar mark into the LinkedIn-optimal SQUARE frame, so even non-designers post something on-brand. */ function ebtrBuildShareBlob(article, cb) { const W = 1200, H = 1200; const cv = document.createElement("canvas"); cv.width = W; cv.height = H; const x = cv.getContext("2d"); const author = ebtrResolveAuthor(article); const date = article.date ? new Date(article.date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" }) : ""; const pad = 84; function paint(coverImg) { x.fillStyle = "#141212"; x.fillRect(0, 0, W, H); if (coverImg) { const ir = coverImg.width / coverImg.height, fr = W / H; let dw, dh, dx, dy; if (ir > fr) { dh = H; dw = H * ir; dx = (W - dw) / 2; dy = 0; } else { dw = W; dh = W / ir; dx = 0; dy = (H - dh) / 2; } try { x.drawImage(coverImg, dx, dy, dw, dh); } catch (e) {} const g = x.createLinearGradient(0, 0, 0, H); g.addColorStop(0, "rgba(15,13,13,0.30)"); g.addColorStop(0.42, "rgba(15,13,13,0.55)"); g.addColorStop(0.72, "rgba(15,13,13,0.88)"); g.addColorStop(1, "rgba(15,13,13,0.97)"); x.fillStyle = g; x.fillRect(0, 0, W, H); } else { const g = x.createRadialGradient(W * 0.75, 180, 100, W * 0.75, 180, 900); g.addColorStop(0, "rgba(29,56,220,0.22)"); g.addColorStop(1, "rgba(20,18,18,0)"); x.fillStyle = g; x.fillRect(0, 0, W, H); } // horizontal three-bar mark (like the EBTR divider) + wordmark, top-left const bw = 50, bh = 11, bgap = 7; x.fillStyle = "#FF8C03"; x.fillRect(pad, 90, bw, bh); x.fillStyle = "#5D5DBF"; x.fillRect(pad + bw + bgap, 90, bw, bh); x.fillStyle = "#1D38DC"; x.fillRect(pad + 2 * (bw + bgap), 90, bw, bh); x.textBaseline = "alphabetic"; x.font = "600 23px Michroma, Arial, sans-serif"; x.fillStyle = "#fff"; x.fillText("EBT·HUB", pad, 150); const wmW = x.measureText("EBT·HUB ").width; x.fillStyle = "#FF8C03"; x.fillText("REVIEW", pad + wmW, 150); // ---- bottom-anchored text block: category → (gap) → title → author ---- const cat = ((window.EBTR_DATA.categories[article.category] || {}).label || "").toUpperCase(); const maxW = Math.round(W * 0.74); // narrower wrap → breaks earlier x.font = "700 62px 'Helvetica Neue', Arial, sans-serif"; const words = String(article.title || "").split(/\s+/); const lines = []; let line = ""; for (let i = 0; i < words.length; i++) { const t = line ? line + " " + words[i] : words[i]; if (x.measureText(t).width > maxW && line) { lines.push(line); line = words[i]; } else line = t; } if (line) lines.push(line); const titleLines = lines.slice(0, 5); const lineH = 74; const catH = cat ? 26 : 0; const gapCatTitle = cat ? 40 : 0; // more breathing room between category and title const titleH = titleLines.length * lineH; const meta = [author && author.name, date].filter(Boolean).join(" · "); const gapTitleAuthor = meta ? 30 : 0; const authorH = meta ? 26 : 0; const total = catH + gapCatTitle + titleH + gapTitleAuthor + authorH; let y = H - 96 - total; if (cat) { x.font = "600 21px Michroma, Arial, sans-serif"; x.fillStyle = "#FF8C03"; y += catH; x.fillText(cat, pad, y); } y += gapCatTitle; x.font = "700 62px 'Helvetica Neue', Arial, sans-serif"; x.fillStyle = "#ffffff"; titleLines.forEach((ln, i) => x.fillText(ln, pad, y + lineH * 0.78 + i * lineH)); y += titleH; if (meta) { y += gapTitleAuthor; x.font = "600 21px Michroma, Arial, sans-serif"; x.fillStyle = "#FF8C03"; x.fillText(meta, pad, y); } cv.toBlob(function (blob) { cb && cb(blob); }, "image/png"); } const ready = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve(); ready.then(function () { if (article.coverUrl) { const img = new Image(); img.crossOrigin = "anonymous"; img.onload = function () { paint(img); }; img.onerror = function () { paint(null); }; img.src = (typeof window !== "undefined" ? window.location.origin : "https://review.ebthub.com") + "/a/" + article.id + "?img=1"; } else { paint(null); } }); } /* ---- Share row (LinkedIn · WhatsApp · copy · PDF · image) ---- */ function EBTRShare({ article, onPdf }) { const [copied, setCopied] = React.useState(false); const [shared, setShared] = React.useState(false); const [imaging, setImaging] = React.useState(false); const [liOpen, setLiOpen] = React.useState(false); const imgBlobRef = React.useRef(null); React.useEffect(function () { imgBlobRef.current = null; try { ebtrBuildShareBlob(article, function (b) { imgBlobRef.current = b; }); } catch (e) {} }, [article.id]); const base = typeof window !== "undefined" ? window.location.origin : "https://review.ebthub.com"; // Share URL: /a/ID is served per-article by the Cloud Function — it returns this // article's own og:image/title to crawlers (LinkedIn, etc.) and redirects humans into the app. const url = base + "/a/" + (article.id || ""); // Per-article LinkedIn hook (editor-written) — the line that opens the post and stops the // scroll. Falls back to the dek-based template when no bespoke teaser is set. const hook = (article.linkedinTeaser || "").trim(); const postBody = hook ? `${hook}\n\n"${article.title}" — the latest from EBTHub Review.\n\n#BusinessTransformation #AI #Leadership` : `${article.dek}\n\n"${article.title}" — the latest from EBTHub Review, the publication of the European Business Transformation Hub.\n\n#BusinessTransformation #AI #Leadership`; // Clipboard text carries NO url — the share-offsite card already provides the link // (image + title). Including the url here would duplicate the link in the post. const post = postBody; const ln = () => { // LinkedIn blocks pre-filling post text via any public URL. So we copy the editor's // text and show a quick 3-step modal teaching the user to paste — THEN open LinkedIn. // (A toast alone is invisible once the user is inside LinkedIn.) try { navigator.clipboard.writeText(post); } catch (e) {} setLiOpen(true); }; const openLinkedIn = () => { try { navigator.clipboard.writeText(post); } catch (e) {} window.open("https://www.linkedin.com/sharing/share-offsite/?url=" + encodeURIComponent(url), "_blank", "noopener,width=640,height=720"); setLiOpen(false); }; const wa = () => { var txt = (hook || article.dek || article.title) + "\n\n" + url; window.open("https://wa.me/?text=" + encodeURIComponent(txt), "_blank", "noopener"); }; const copy = () => { try { navigator.clipboard.writeText(url); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1800); }; // Image: mobile → native share sheet (Save to Photos / WhatsApp Status); desktop → download. const deliverImage = (blob) => { if (!blob) return; var fname = (article.id || "ebtr") + "-linkedin.png"; var isMobile = /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent || ""); var file = null; try { file = new File([blob], fname, { type: "image/png" }); } catch (e) {} if (isMobile && file && navigator.canShare && navigator.canShare({ files: [file] })) { navigator.share({ files: [file], title: article.title }).catch(function () {}); return; } var u = URL.createObjectURL(blob); if (isMobile) { // fallback: open the image so the user can long-press → Save to Photos window.open(u, "_blank"); } else { var a = document.createElement("a"); a.href = u; a.download = fname; document.body.appendChild(a); a.click(); a.remove(); } setTimeout(function () { URL.revokeObjectURL(u); }, 30000); }; const onImage = () => { if (imgBlobRef.current) { deliverImage(imgBlobRef.current); return; } setImaging(true); ebtrBuildShareBlob(article, function (b) { imgBlobRef.current = b; setImaging(false); deliverImage(b); }); }; const btn = { width: 38, height: 38, borderRadius: "50%", border: "1px solid var(--border-strong)", background: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)", transition: "border-color var(--dur-base), color var(--dur-base)" }; return (

{onPdf && } {copied && Link copied} {liOpen && setLiOpen(false)} />}

); } /* Teach-modal in Stefi's voice. Honest about copy state per platform: desktop auto-copies ("done for you"); mobile makes "Tap to copy" the primary action (auto-copy is unreliable in in-app browsers — don't claim what isn't true). */ function EBTRLinkedInHelp({ post, onOpen, onClose }) { const [copiedOK, setCopiedOK] = React.useState(false); const isMobile = /Android|iPhone|iPad|iPod|Mobile/i.test((typeof navigator !== "undefined" && navigator.userAgent) || ""); const doCopy = () => { try { navigator.clipboard.writeText(post); } catch (e) {} setCopiedOK(true); setTimeout(() => setCopiedOK(false), 2000); }; // Text is auto-copied when the modal opens (works ~80% of the time). So the primary // action is just Open LinkedIn; an explicit copy is a small fallback at the bottom. const lines = isMobile ? ["Stefi here. LinkedIn changed the rules — sharing takes one extra step now. Their wall, not ours.", "I've copied your post and I'll open LinkedIn. Then long-press → Paste, and post. The card builds itself."] : ["Stefi here. LinkedIn changed the rules — no more one-click sharing for outside pages. Not my call.", "I've copied your post and I'll open LinkedIn for you. Then paste (Ctrl/Cmd+V), and post. The card builds itself."]; return (

e.stopPropagation()} style={{ position: "relative", width: "100%", maxWidth: 450, background: "var(--surface-raised)", border: "1px solid var(--border-hairline)", borderTop: "3px solid var(--ebt-purple)", padding: "clamp(24px,5vw,34px)", boxShadow: "0 30px 80px rgba(0,0,0,0.5)" }}>

AI Stefi · The Digital Employee

{lines.map((l, i) => (

{l}

))}

); } /* ---- Reader ---- */ function EBTRReader({ articleId, onOpen, onBack, onCategory, loggedIn, allAccess, viewerLabs, isUnlocked, onUnlock, onSignIn, onApply, onRequestAccess, protect, watermark, viewer, motion }) { const data = window.EBTR_DATA; const article = data.articles.find((a) => a.id === articleId); const scrollRef = React.useRef(null); const [progress, setProgress] = React.useState(0); React.useEffect(() => { window.scrollTo(0, 0); }, [articleId]); React.useEffect(() => { if (!protect) return; const block = (e) => { e.preventDefault(); return false; }; const root = scrollRef.current; if (root) { root.addEventListener("copy", block); root.addEventListener("cut", block); root.addEventListener("contextmenu", block); root.addEventListener("dragstart", block); } return () => { if (root) { root.removeEventListener("copy", block); root.removeEventListener("cut", block); root.removeEventListener("contextmenu", block); root.removeEventListener("dragstart", block); } }; }, [protect, articleId]); React.useEffect(() => { const onScroll = () => { const el = scrollRef.current; if (!el) return; const start = el.offsetTop, total = el.offsetHeight - window.innerHeight; const p = total > 0 ? (window.scrollY - start + 120) / total : 0; setProgress(Math.max(0, Math.min(1, p))); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [articleId]); if (!article) return (

Not available

This piece isn't published

It may have been unpublished or moved. Head back to the latest from the Review.

); const cat = data.categories[article.category]; const author = ebtrResolveAuthor(article); const isStefi = !!(article.column || article.category === "digital-employee"); // Access model: free articles are open to everyone — no login wall, no meter. // Premium papers preview, then a teaser wall. They're unlocked for all-access // (editor / comped), a Lab match (the reader's labs include the article's lab), // or a manual grant — never a paywall purchase inside EBTR. const labMatch = !!(article.lab && (viewerLabs || []).indexOf(article.lab) >= 0); const locked = !!article.premium && !allAccess && !labMatch; const previewCount = article.freeUntil == null ? 3 : article.freeUntil; const blocks = locked ? article.body.slice(0, previewCount) : article.body; var related = (article.related || []).map((id) => data.articles.find((a) => a.id === id)).filter(Boolean); if (related.length < 4) { var pool = data.articles.filter((a) => a.id !== article.id && (a.status == null || a.status === "published") && related.indexOf(a) < 0); var flagged = pool.filter((a) => a.readNext); // editor-curated, same as the homepage var sameCat = pool.filter((a) => !a.readNext && a.category === article.category); var rest = pool.filter((a) => !a.readNext && a.category !== article.category); related = related.concat(flagged, sameCat, rest); } related = related.slice(0, 4); return ( {/* progress */}

{/* LEFT RAIL — Topics */} {/* CENTER — article (hero + body share this width) */}

{isStefi && (

AI persona Stefi — EBTHub's first digital employee

This column is written by an AI persona, not a human. Disclosed by design.

)} {!isStefi && (

{article.premium && }

)}

{article.title}

{article.dek}

{/* byline */}

{author.name}{isStefi && AI}

{new Date(article.date).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" })} · {article.readingMins} MIN READ

{/* share */} ebtrExportPdf(article, viewer || { name: "EBTR Reader", company: "EBTHub" })} /> {/* hero — her portrait for columns, generated cover otherwise */} {isStefi && author.portraitUrl ? (

The Digital Employee

{author.name}

{author.bio}

) : (

)} {/* body */}

{watermark && viewer && } {blocks.map((b, i) => )}

{locked ? onRequestAccess && onRequestAccess(article)} /> : {typeof EBTRInlineCTA !== "undefined" && }}

{/* RIGHT RAIL — What to Read Next */}

); } Object.assign(window, { EBTRReader });