From 0682b24f27540e9ae943b5e8fefc605fdd44d1b5 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Tue, 16 Jun 2026 07:08:55 -0500 Subject: feat(theme-studio): realistic README preview for markdown-mode markdown-mode fell back to the generic preview (bare face names). I added renderMarkdownPreview, a realistic README that exercises the markdown faces in context: front matter, headers, bold/italic, inline and fenced code, links, lists and checkboxes, a blockquote with a footnote, a table, strikethrough, highlight, math, and inline HTML. A PREVIEW_KEYS map in app_inventory routes markdown-mode to the renderer, and the #mdtest gate checks every data-face it emits is a real markdown face. --- scripts/theme-studio/browser-gates.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'scripts/theme-studio/browser-gates.js') diff --git a/scripts/theme-studio/browser-gates.js b/scripts/theme-studio/browser-gates.js index b03ec6a47..87038552c 100644 --- a/scripts/theme-studio/browser-gates.js +++ b/scripts/theme-studio/browser-gates.js @@ -748,6 +748,23 @@ if(location.hash==='#navtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c) } document.title='NAVTEST '+(ok?'PASS':'FAIL'); const d=document.createElement('div');d.id='navtest';d.textContent='NAVTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);} +// Markdown-preview gate (open with #mdtest): markdown-mode has a dedicated README +// renderer, and every data-face it emits is a real markdown-mode face. +if(location.hash==='#mdtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}}; + A(APPS['markdown-mode']&&APPS['markdown-mode'].preview==='markdown','markdown-mode wired to the markdown preview'); + A(!!PACKAGE_PREVIEWS['markdown'],'markdown renderer registered'); + if(PACKAGE_PREVIEWS['markdown']&&APPS['markdown-mode']){ + const box=document.createElement('div');box.innerHTML=PACKAGE_PREVIEWS['markdown'](); + const valid=new Set(APPS['markdown-mode'].faces.map(r=>r[0])); + const used=[...box.querySelectorAll('[data-face]')].map(e=>e.dataset.face); + A(used.length>=15,'preview exercises many faces ('+used.length+')'); + const bad=used.filter(f=>!valid.has(f)); + A(bad.length===0,'every data-face is a real markdown face; bad='+bad.join(',')); + for(const f of ['markdown-header-face-1','markdown-bold-face','markdown-inline-code-face','markdown-blockquote-face','markdown-gfm-checkbox-face','markdown-table-face']) + A(used.includes(f),'preview includes '+f); + } + document.title='MDTEST '+(ok?'PASS':'FAIL'); + const d=document.createElement('div');d.id='mdtest';d.textContent='MDTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);} // Box-cluster gate (open with #boxtest): the box control is a 2x2 cluster of // four radio buttons (none / line / pressed / raised); the color swatch shows // only while a box style is active. -- cgit v1.2.3