feat: mostly reproduce old Nuxt website's content

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

.vuepress/client.ts

@@ -0,0 +1,13 @@
+import { defineClientConfig } from '@vuepress/client';
+import PreviewImage from './components/PreviewImage.vue';
+import ResponsiveImage from './components/ResponsiveImage.vue';
+
+export default defineClientConfig({
+  enhance({ app, router, siteData }) {
+    app.component('PreviewImage', PreviewImage);
+    app.component('ResponsiveImage', ResponsiveImage);
+  },
+  setup() {},
+  layouts: {},
+  rootComponents: [],
+});

.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>

.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>

.vuepress/config.ts

@@ -0,0 +1,121 @@
+import { defineUserConfig, defaultTheme } from 'vuepress';
+
+export default defineUserConfig({
+  lang: 'fr-FR',
+  title: 'Lucien Cartier-Tilet',
+  description: 'Site web personnel de Lucien Cartier-Tilet',
+  head: [
+    [
+      'link',
+      {
+        rel: 'icon',
+        href: 'https://cdn.phundrak.com/img/mahakala-128x128.png',
+      },
+    ],
+    [
+      'meta',
+      {
+        name: 'author',
+        content: 'Lucien Cartier-Tilet',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'og:image',
+        content: 'https://cdn.phundrak.com/img/rich_preview.png',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'org:title',
+        content: 'Lucien Cartier-Tilet',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'og:description',
+        content: 'Site web personnel de Lucien Cartier-Tilet',
+      },
+    ],
+    [
+      'meta',
+      {
+        name: 'twitter:card',
+        content: 'summary',
+      },
+    ],
+    [
+      'meta',
+      {
+        name: 'twitter:site',
+        content: '@phundrak',
+      },
+    ],
+    [
+      'meta',
+      {
+        name: 'twitter:creator',
+        content: '@phundrak',
+      },
+    ],
+  ],
+  markdown: {
+    html: true,
+    linkify: true,
+    typographer: true,
+  },
+  locales: {
+    '/': {
+      lang: 'fr-FR',
+      title: 'Lucien Cartier-Tilet',
+      description: 'Site web personnel de Lucien Cartier-Tilet',
+    },
+    '/en/': {
+      lang: 'en-US',
+      title: 'Lucien Cartier-Tilet',
+      description: 'Personal website of Lucien Cartier-Tilet',
+    },
+  },
+  theme: defaultTheme({
+    locales: {
+      '/': {
+        selectLanguageName: 'Français',
+        tip: 'nota bene',
+        warning: 'attention',
+        sidebar: [
+          '/README.md',
+          '/about.md',
+          '/resume.md',
+          '/projects.md',
+          '/conlanging.md',
+          '/vocal-synthesis.md',
+        ],
+        notFound: [
+          'C’est bien vide ici',
+          'Pourquoi sommes-nous ici?',
+          'Erreur 404',
+          'Le lien ne semble pas être correct',
+        ],
+        backToHome: 'Retour accueil',
+        openInNewWindow: 'Ouvrir dans une nouvelle fenêtre',
+        toggleColorMode: 'Changer de thème',
+        toggleSidebar: 'Barre latérale',
+      },
+      '/en/': {
+        selectLanguageName: 'English',
+        selectLanguageText: 'Langues',
+        sidebar: [
+          '/en/index.md',
+          '/en/about.md',
+          '/en/resume.md',
+          '/en/projects.md',
+          '/en/conlanging.md',
+          '/en/vocal-synthesis.md',
+        ],
+      },
+    },
+  }),
+});