graphviz: support the alt attribute

Since we're generating `<img>` elements anyway, might just as well keep
that accessibility support.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

layouts/_default/baseof.html

@@ -33,6 +33,8 @@
           'src',
           `data:image/svg+xml;utf8,${encodeURIComponent(svg.substring(svg.indexOf('<svg')))}`
         )
+        const alt = x.getAttribute("alt")
+        if (alt) img.setAttribute("alt", alt)
         x.parentNode.insertBefore(img, x);
         x.style.display = 'none'
       })

layouts/_markup/render-codeblock-graphviz.html

@@ -1,4 +1,7 @@
-<pre class="graphviz"{{ if (and (isset "engine" .Attributes) (ne "" .Attributes.engine)) }} engine="{{ .Attributes.engine }}"{{ end }}>
+<pre class="graphviz"
+{{- if (and (isset "engine" .Attributes) (ne "" .Attributes.engine)) }} engine="{{ .Attributes.engine }}"{{ end -}}
+{{- if (and (isset "alt" .Attributes) (ne "" .Attributes.alt)) }} alt="{{ .Attributes.alt }}"{{ end -}}
+>
   {{- .Inner | htmlEscape | safeHTML -}}
 </pre>
 {{- .Page.Store.Set "hasGraphviz" true }}

script/graphviz-ssr.js

@@ -31,8 +31,10 @@ import Viz from "../static/js/viz-global.js"
         },
         engine,
       })
+      const alt = pre.getAttribute("alt")
+      const altAttr = !alt ? '' : ` alt='${alt.replaceAll("&", "&").replaceAll("'", "'")}'`
       const dataURL = `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`
-      pre.replaceWith(`<img src="${dataURL}" />`)
+      pre.replaceWith(`<img${altAttr} src="${dataURL}" />`)
     }
     console.log(`Rewriting ${path}`)
     writeFileSync(`${path}`, html.toString())