Add the ability to add figure captions

.vitepress/theme/Figure.vue

@@ -0,0 +1,33 @@
+<script>
+export default {
+    props: {
+        imageSrc: {
+            type: String,
+            default: ''
+        },
+        caption: {
+            type: String,
+            required: true
+        }
+    },
+};
+</script>
+
+<template>
+    <p>
+    <figure>
+        <img v-if="imageSrc" :src="imageSrc" :alt="caption" />
+        <slot v-else></slot>
+        <figcaption>{{ caption }}</figcaption>
+    </figure>
+    </p>
+</template>
+
+<style scoped>
+figcaption {
+    color: grey;
+    padding-top: 0.5em;
+    font-size: 0.8em;
+    text-align: center;
+}
+</style>

.vitepress/theme/index.js

@@ -6,6 +6,7 @@ import Experiments from "./Experiments.vue";
 import Header from "./Header.vue";
 import vSelect from "vue-select";
 import PinnedExperiments from "./PinnedExperiments.vue";
+import Figure from "./Figure.vue";
 import "vue-select/dist/vue-select.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "./style.css";
@@ -22,6 +23,7 @@ export default {
     app.component("Experiments", Experiments);
     app.component("Header", Header);
     app.component("PinnedExperiments", PinnedExperiments);
+    app.component("Figure", Figure);
     app.component("v-select", vSelect);
   },
 };

contributing.md

@@ -291,4 +291,24 @@ Which will result in a view of the URL provided to the `src` property of the `if
   style="border:0; margin: 0 auto; display: block; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
 </iframe>
 
-You can simply copy this code and replace the URL with the URL to your website of choice.
+You can simply copy this code and replace the URL with the URL to your website of choice.
+
+### Adding figure captions
+
+If you want to add captions to images, iframes, or Altair plots, you can do so with the following syntax:
+
+For images, you specify either the path to the image or the image URL to the `imageSrc` argument. You specify the caption to the `caption` argument.
+
+```md
+<Figure imageSrc="./antibody_selection.png" caption="This is an example of  a caption for this image" />
+```
+
+<Figure imageSrc="./antibody_selection.png" caption="This is an example of  a caption for this image" />
+
+The only difference between Altair plots (and other HTML elements) and images is that you **don't** use the `imageSrc` argument. Instead, you *wrap* the element in the `Figure` element like below:
+
+```md
+<Figure caption="This is an example of  a caption for this image">
+    <Altair :spec-url="'https://raw.githubusercontent.com/dms-vep/SARS-CoV-2_Omicron_BA.2_spike_ACE2_binding/main/docs/htmls/monomeric_ACE2_mut_effect.html'"></Altair>
+</Figure>
+```