add components to show thumbnail and section text

.vitepress/theme/index.js

@@ -60,11 +60,13 @@ import Disqus from "../../src/vue-components/Disqus.vue";
 import FeatureComponent from "../../src/vue-components/Feature.vue";
 import FooterComponent from "../../src/vue-components/Footer.vue";
 import ImageComponent from "../../src/vue-components/Image.vue";
+import ThumbnailComponent from "../../src/vue-components/Thumbnail.vue";
 import InfoPanelComponent from "../../src/vue-components/InfoPanel.vue";
 import LinkComponent from "../../src/vue-components/Link.vue";
 import RedirectComponent from "../../src/vue-components/Redirect.vue";
 import StackComponent from "../../src/vue-components/Stack.vue";
 import TipComponent from "../../src/vue-components/Tip.vue";
+import SectionComponent from "../../src/vue-components/Section.vue";
 
 import { onMounted, watch, nextTick } from "vue";
 import mediumZoom from "medium-zoom";
@@ -81,12 +83,14 @@ export default {
         app.component("FeatureComponent", FeatureComponent);
         app.component("FooterComponent", FooterComponent);
         app.component("ImageComponent", ImageComponent);
+        app.component("ThumbnailComponent", ThumbnailComponent);
         app.component("InfoPanelComponent", InfoPanelComponent);
         app.component("LinkComponent", LinkComponent);
         app.component("RedirectComponent", RedirectComponent);
         app.component("StackComponent", StackComponent);
         app.component("TipComponent", TipComponent);
         app.component("FontAwesomeIcon", FontAwesomeIcon);
+        app.component("SectionComponent", SectionComponent);
     },
     setup() {
         const route = useRoute();

src/vue-components/FeatureArticles.vue

@@ -39,12 +39,12 @@ import uniq from "lodash-es/uniq.js";
 import flattenDeep from "lodash-es/flattenDeep.js";
 
 const articles = [
-    // {
-    //     title: "Why Describo? Where does it fit?",
-    //     link: "/docs/articles/why-use-it",
-    //     text: "Start with Why!",
-    //     keywords: ["purpose"],
-    // },
+    {
+        title: "Why Describo? Where does it fit?",
+        link: "/docs/articles/why-use-it",
+        text: "Start with Why!",
+        keywords: ["purpose"],
+    },
     {
         title: "How is data handled inside Describo?",
         link: "/docs/articles/how-your-data-is-handled",

src/vue-components/Image.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col">
+    <div class="flex flex-col items-center">
         <div v-if="enableZoom">
             <img :src="src" data-zoomable />
             <TipComponent>Click the image for a closer look!</TipComponent>

src/vue-components/Section.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="flex flex-row space-x-2">
+        <Thumbnail :src="props.imageSrc" :width="props.imageWidth" class="p-10"></Thumbnail>
+        <div>
+            <slot name="text"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Thumbnail from "./Thumbnail.vue";
+
+const props = defineProps({
+    imageSrc: { type: String, required: true },
+    imageWidth: { type: Number },
+});
+</script>

src/vue-components/Thumbnail.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="flex flex-col items-center">
+        <img :src="src" :style="style" class="h-auto" />
+    </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+    src: { type: String, required: true },
+    width: { type: Number },
+});
+
+let style = computed(() => {
+    if (props.width) return `min-width: ${props.width}px`;
+    return `min-width: 100px`;
+});
+</script>