ssh git@grit.deadkey.org man

Commit 365cd19 h

Pat Ambrosio · 26-08-26 17:27

Match both mermaid dialects in the renderer

Changes: 3 files +22 -5

Changes (Side-by-Side)

share/jenny/layout/page.sh +6 -2

diagram_script() {
127 // one particular renderer. Point it at what is actually on the 127 // one particular renderer. Point it at what is actually on the
128 // page; startOnLoad is off because this script runs at the end 128 // page; startOnLoad is off because this script runs at the end
129 // of the body, after the load event it would wait for. 129 // of the body, after the load event it would wait for.
130 querySelector: '.diagram-mermaid',
130 // Both mermaid dialects: a class selector matches whole class
131 // names, so '.diagram-mermaid' never matched
132 // 'diagram-mermaid-legend' and a legend block sat unrendered,
133 // showing its own source and overflowing the page by 3px.
134 querySelector: '[class*="diagram-mermaid"]',
131 startOnLoad: false, 135 startOnLoad: false,
132 securityLevel: 'strict', 136 securityLevel: 'strict',
133 theme: 'base', 137 theme: 'base',
diagram_script() {
140 fontFamily: 'Roboto, sans-serif' 144 fontFamily: 'Roboto, sans-serif'
141 } 145 }
142 }); 146 });
143 mermaid.run({ querySelector: '.diagram-mermaid' });
147 mermaid.run({ querySelector: '[class*="diagram-mermaid"]' });
144 })(); 148 })();
145 </script> 149 </script>
146 _DIAGRAM_ 150 _DIAGRAM_

share/jenny/layout/post.sh +6 -2

diagram_script() {
43 // one particular renderer. Point it at what is actually on the 43 // one particular renderer. Point it at what is actually on the
44 // page; startOnLoad is off because this script runs at the end 44 // page; startOnLoad is off because this script runs at the end
45 // of the body, after the load event it would wait for. 45 // of the body, after the load event it would wait for.
46 querySelector: '.diagram-mermaid',
46 // Both mermaid dialects: a class selector matches whole class
47 // names, so '.diagram-mermaid' never matched
48 // 'diagram-mermaid-legend' and a legend block sat unrendered,
49 // showing its own source and overflowing the page by 3px.
50 querySelector: '[class*="diagram-mermaid"]',
47 startOnLoad: false, 51 startOnLoad: false,
48 securityLevel: 'strict', 52 securityLevel: 'strict',
49 theme: 'base', 53 theme: 'base',
diagram_script() {
56 fontFamily: 'Roboto, sans-serif' 60 fontFamily: 'Roboto, sans-serif'
57 } 61 }
58 }); 62 });
59 mermaid.run({ querySelector: '.diagram-mermaid' });
63 mermaid.run({ querySelector: '[class*="diagram-mermaid"]' });
60 })(); 64 })();
61 </script> 65 </script>
62 _DIAGRAM_ 66 _DIAGRAM_

test/regressions.sh +10 -1

it "the script is not emitted on a page without one"
1167 # few work would be the wrong trade. 1167 # few work would be the wrong trade.
1168 assert_file_not_contains "$dg/.dist/plain.html" 'js/renderer.js' 1168 assert_file_not_contains "$dg/.dist/plain.html" 'js/renderer.js'
1169 1169
1170 it "the renderer matches both mermaid dialects"
1171 # A class selector matches whole class names, so '.diagram-mermaid' never
1172 # matched 'diagram-mermaid-legend'. A legend block sat unrendered, showing its
1173 # own source text and pushing the page 3px wider than the viewport -- found
1174 # when a real document with a legend was published.
1175 assert_file_contains "$dg/.dist/chart.html" "querySelector: '[class*=\"diagram-mermaid\"]'"
1176 assert_file_not_contains "$dg/.dist/chart.html" "querySelector: '.diagram-mermaid'"
1177
1170 it "the renderer is pointed at the class the parser emits" 1178 it "the renderer is pointed at the class the parser emits"
1171 # The markup uses a neutral "diagram" class rather than naming one renderer, 1179 # The markup uses a neutral "diagram" class rather than naming one renderer,
1172 # so the renderer has to be told what to look for. Left at its own default it 1180 # so the renderer has to be told what to look for. Left at its own default it
1173 # matched nothing and silently drew no diagram. 1181 # matched nothing and silently drew no diagram.
1174 assert_file_contains "$dg/.dist/chart.html" "querySelector: '.diagram-mermaid'"
1182 assert_file_contains "$dg/.dist/chart.html" 'querySelector:'
1183 assert_file_contains "$dg/.dist/chart.html" 'diagram-mermaid'
1175 1184
1176 it "the script path is resolved relative to the page" 1185 it "the script path is resolved relative to the page"
1177 mkdir -p "$dg/pages/deep" 1186 mkdir -p "$dg/pages/deep"

Raw

commit 365cd1973757b5aaf3e679ae19f6dfc0305cdf97
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Wed Aug 26 17:27:59 2026 +0800

    Match both mermaid dialects in the renderer
    
    A class selector matches whole class names, so '.diagram-mermaid' never
    matched 'diagram-mermaid-legend'. A legend block sat unrendered, showing
    its own source text and pushing the page three pixels wider than the
    viewport.
    
    Found by publishing a real document: the MDD flow page carries two
    diagrams and a legend, and only the two rendered. The check that passed
    this originally used a fixture with no legend in it.
    
    Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01WnSAstgnDYdKPwLGv1YZE5

diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index 629ca88..9edbbac 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -127,7 +127,11 @@ diagram_script() {
 	            // one particular renderer. Point it at what is actually on the
 	            // page; startOnLoad is off because this script runs at the end
 	            // of the body, after the load event it would wait for.
-	            querySelector: '.diagram-mermaid',
+	            // Both mermaid dialects: a class selector matches whole class
+	            // names, so '.diagram-mermaid' never matched
+	            // 'diagram-mermaid-legend' and a legend block sat unrendered,
+	            // showing its own source and overflowing the page by 3px.
+	            querySelector: '[class*="diagram-mermaid"]',
 	            startOnLoad: false,
 	            securityLevel: 'strict',
 	            theme: 'base',
@@ -140,7 +144,7 @@ diagram_script() {
 	              fontFamily:      'Roboto, sans-serif'
 	            }
 	          });
-	          mermaid.run({ querySelector: '.diagram-mermaid' });
+	          mermaid.run({ querySelector: '[class*="diagram-mermaid"]' });
 	        })();
 	      </script>
 	_DIAGRAM_
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 396c355..35cda3d 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -43,7 +43,11 @@ diagram_script() {
 	            // one particular renderer. Point it at what is actually on the
 	            // page; startOnLoad is off because this script runs at the end
 	            // of the body, after the load event it would wait for.
-	            querySelector: '.diagram-mermaid',
+	            // Both mermaid dialects: a class selector matches whole class
+	            // names, so '.diagram-mermaid' never matched
+	            // 'diagram-mermaid-legend' and a legend block sat unrendered,
+	            // showing its own source and overflowing the page by 3px.
+	            querySelector: '[class*="diagram-mermaid"]',
 	            startOnLoad: false,
 	            securityLevel: 'strict',
 	            theme: 'base',
@@ -56,7 +60,7 @@ diagram_script() {
 	              fontFamily:      'Roboto, sans-serif'
 	            }
 	          });
-	          mermaid.run({ querySelector: '.diagram-mermaid' });
+	          mermaid.run({ querySelector: '[class*="diagram-mermaid"]' });
 	        })();
 	      </script>
 	_DIAGRAM_
diff --git a/test/regressions.sh b/test/regressions.sh
index 98cc3ab..16dc027 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -1167,11 +1167,20 @@ it "the script is not emitted on a page without one"
 # few work would be the wrong trade.
 assert_file_not_contains "$dg/.dist/plain.html" 'js/renderer.js'
 
+it "the renderer matches both mermaid dialects"
+# A class selector matches whole class names, so '.diagram-mermaid' never
+# matched 'diagram-mermaid-legend'. A legend block sat unrendered, showing its
+# own source text and pushing the page 3px wider than the viewport -- found
+# when a real document with a legend was published.
+assert_file_contains "$dg/.dist/chart.html" "querySelector: '[class*=\"diagram-mermaid\"]'"
+assert_file_not_contains "$dg/.dist/chart.html" "querySelector: '.diagram-mermaid'"
+
 it "the renderer is pointed at the class the parser emits"
 # The markup uses a neutral "diagram" class rather than naming one renderer,
 # so the renderer has to be told what to look for. Left at its own default it
 # matched nothing and silently drew no diagram.
-assert_file_contains "$dg/.dist/chart.html" "querySelector: '.diagram-mermaid'"
+assert_file_contains "$dg/.dist/chart.html" 'querySelector:'
+assert_file_contains "$dg/.dist/chart.html" 'diagram-mermaid'
 
 it "the script path is resolved relative to the page"
 mkdir -p "$dg/pages/deep"