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

assets/js/application.js

@@ -800,6 +800,8 @@ var Graphviz = {
         '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/shortcodes/graphviz.html

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

script/graphviz-ssr.js

@@ -32,8 +32,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())