DOC-799 | Graph Visualizer improvements and updated screenshots

README.md

@@ -429,6 +429,25 @@ Available attributes:
 - `class`: CSS classes to apply
 - `style`: CSS inline styles to apply
 
+#### Icons
+
+If a web interface uses icons, especially as buttons without labels, use
+the `icon` shortcode to inline an SVG file for a visual reference as
+demonstrated below:
+
+```markdown
+Select all nodes ({{< icon "select-all" >}}), then right-click.
+```
+
+Icons are supposed to supplement the text, i.e. not be embedded in sentences.
+They are hidden from screen readers.
+
+To add new icons to the toolchain, save them to `site/content/images/icons/`.
+They are referenced by file name (without extension) in the shortcode.
+
+SVG icon files should not define the attributes `width`, `height`, `aria-hidden`,
+and `focusable` on the `<svg>` tag.
+
 #### Keyboard shortcuts
 
 To document hotkeys and key combinations to press in a terminal or graphical

site/themes/arangodb-docs-theme/layouts/shortcodes/icon.html

@@ -0,0 +1,10 @@
+<span class="inline-icon" aria-hidden="true">
+  {{- $iconName := .Get 0 }}
+  {{- $iconPath := printf "/images/icons/%s.svg" $iconName }}
+  {{- $iconSvg := readFile $iconPath }}
+  {{- if $iconSvg }}
+    {{- $iconSvg | safeHTML }}
+  {{- else }}
+    {{- errorf "Icon '%v' not found for '%v'" $iconName .Page.File.Path }}
+  {{- end -}}
+</span>

site/themes/arangodb-docs-theme/static/css/theme.css

@@ -315,6 +315,19 @@ img {
     margin-bottom: 20px;
 }
 
+.inline-icon {
+    display: inline-block;
+    width: var(--TYPOGRAPHY-BODY-TEXT);
+    height: var(--TYPOGRAPHY-BODY-TEXT);
+    margin: 0 .1rem;
+    position: relative;
+    top: .2rem;
+}
+
+.inline-icon svg {
+    margin: 0;
+}
+
 /* end Images */
 
 /* Tables */