refactor: move Vuepress files in dedicated directory

Signed-off-by: Lucien Cartier-Tilet <lucien@phundrak.com>

content/.vuepress/components/PreviewImage.vue

@@ -0,0 +1,51 @@
+<template>
+  <a class="no-decoration" :href="src">
+    <figure class="img-prev" :style="style">
+      <ResponsiveImage
+        :source="props.src"
+        :size="props.width"
+        :preview="props.preview"
+        :previewWidth="props.previewWidth"
+        :previewTheshold="props.maxwidth"
+      />
+      <figcaption>
+        <slot />
+      </figcaption>
+    </figure>
+  </a>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  src: string;
+  width: number;
+  preview: string;
+  previewWidth: number;
+  maxwidth?: number;
+}>();
+
+const style = props.maxwidth ? `max-width: ${props.maxwidth}px` : '';
+</script>
+
+<style scoped lang="scss">
+img {
+  height: auto;
+  width: 100%;
+}
+
+figure {
+  float: left;
+  margin: 0.5rem 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  max-width: 400px;
+}
+
+@media only screen and (max-width: 800px) {
+  figure {
+    float: none;
+  }
+}
+</style>

content/.vuepress/components/ResponsiveImage.vue

@@ -0,0 +1,25 @@
+<template>
+  <img :srcset="srcset" :sizes="sizes" :alt="props.alt" :src="props.src" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  src: string;
+  width: number;
+  preview: string;
+  previewWidth: number;
+  previewThreshold?: number;
+  alt?: string;
+}>();
+
+const srcset = [
+  `${props.preview} ${props.previewWidth}w`,
+  `${props.src} ${props.width}w`,
+].join(', ');
+const sizes = [
+  `(max-width: ${props.previewThreshold || props.previewWidth}px) ${
+    props.previewWidth
+  }px`,
+  `${props.width}px`,
+].join(', ');
+</script>