docs: vuepress images

lmorg · Jun 25, 2024 · e102739 · e102739
1 parent 094dc7c
commit e102739
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/gen/user-guide/hint-text-overview.inc.md b/gen/user-guide/hint-text-overview.inc.md
@@ -7,11 +7,11 @@ to be used if you want it while keeping out of the way when you don't want it.
 <!-- markdownlint-disable -->
 <figure>
  <img src="/screenshot-hint-text-rsync.png?v={{ env "COMMITHASHSHORT" }}" class="centre-image"/>
- <figcaption>`rsync` flag, with example, pulled from `man` pages ({{link "read more" "man-pages"}})</figcaption>
+ <figcaption><code>rsync</code> flag, with example, pulled from <code>man</code> pages</figcaption>
 </figure>
 <figure>
  <img src="/screenshot-hint-text-egrep.png?v={{ env "COMMITHASHSHORT" }}" class="centre-image"/>
- <figcaption>`egrep` is an {{link "alias" "alias"}} so also show the destination command</figcaption>
+ <figcaption><code>egrep</code> is an alias, so also show the destination command</figcaption>
 </figure> 
 <!-- markdownlint-restore -->
 {{ end }}
diff --git a/gen/user-guide/interactive-shell.inc.md b/gen/user-guide/interactive-shell.inc.md
@@ -157,9 +157,14 @@ It can display:
 
 {{ if env "DOCGEN_TARGET=vuepress" }}
 <!-- markdownlint-disable -->
-<img src="/screenshot-preview-man-page.png?v={{ env "COMMITHASHSHORT" }}" class="centre-image"/>
-<br/>
-<img src="/screenshot-preview-image.png?v={{ env "COMMITHASHSHORT" }}" class="centre-image"/>
+<figure>
+ <img src="/screenshot-preview-man-page.png?v={{ env "COMMITHASHSHORT" }}" class="centre-image"/>
+ <figcaption>Previewing a command flag, from the commands <code>man</code> page</figcaption>
+</figure>
+<figure>
+ <img src="/screenshot-preview-image.png?v={{ env "COMMITHASHSHORT" }}" class="centre-image"/>
+ <figcaption>Previewing a file. In this specific instance it is an image</figcaption>
+</figure>
 <!-- markdownlint-restore -->
 {{ end }}
 

diff --git a/gen/user-guide/interactive-shell_doc.yaml b/gen/user-guide/interactive-shell_doc.yaml
@@ -24,5 +24,3 @@
  - terminal-keys
  - hint-text
  - onpreview
-
-
diff --git a/gen/vuepress/styles/index.scss b/gen/vuepress/styles/index.scss
@@ -53,6 +53,13 @@ h4 {
  font-family: 'Jura', sans-serif;
 }
 
+figcaption {
+ font-size: 12px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ color: #606060;
+}
+
 .centre-image {
  max-width: 100%;
  max-height: 400px;