refactor: move Vuepress files in dedicated directory

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

content/.vuepress/.dir-locals.el

@@ -0,0 +1,4 @@
+;;; Directory Local Variables            -*- no-byte-compile: t -*-
+;;; For more information see (info "(emacs) Directory Variables")
+
+((typescript-mode . ((typescript-indent-level . 2))))

content/.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: [],
+});

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>

content/.vuepress/config.ts

@@ -0,0 +1,25 @@
+import { defineUserConfig, defaultTheme } from 'vuepress';
+import { removeHtmlExtensionPlugin } from 'vuepress-plugin-remove-html-extension';
+import head from './head';
+import locales from './locales';
+import themeLocales from './themeLocales';
+
+export default defineUserConfig({
+  lang: 'fr-FR',
+  title: 'Lucien Cartier-Tilet',
+  description: 'Site web personnel de Lucien Cartier-Tilet',
+  lastUpdated: true,
+  head: head,
+  markdown: {
+    html: true,
+    linkify: true,
+    typographer: true,
+  },
+  plugins: [removeHtmlExtensionPlugin()],
+  locales: locales,
+  theme: defaultTheme({
+    contributors: false,
+    locales: themeLocales,
+    repo: 'https://labs.phundrak.com/phundrak/phundrak.com',
+  }),
+});

content/.vuepress/head.ts

@@ -0,0 +1,128 @@
+interface SimplifiedHeader {
+  tag: string;
+  content: [any];
+}
+
+const simplifiedHead = [
+  {
+    tag: 'meta',
+    content: [
+      {
+        name: 'author',
+        content: 'Lucien Cartier-Tilet',
+      },
+      {
+        property: 'og:image',
+        content: 'https://cdn.phundrak.com/img/rich_preview.png',
+      },
+      {
+        property: 'org:title',
+        content: 'Lucien Cartier-Tilet',
+      },
+      {
+        property: 'og:description',
+        content: 'Site web personnel de Lucien Cartier-Tilet',
+      },
+      {
+        name: 'twitter:card',
+        content: 'summary',
+      },
+      {
+        name: 'twitter:site',
+        content: '@phundrak',
+      },
+      {
+        name: 'twitter:creator',
+        content: '@phundrak',
+      },
+      { name: 'msapplication-TileColor', content: '#3b4252' },
+      { name: 'msapplication-TileImage', content: '/ms-icon-144x144.png' },
+      { name: 'theme-color', content: '#3b4252' },
+    ],
+  },
+  {
+    tag: 'link',
+    content: [
+      {
+        rel: 'apple-touch-icon',
+        sizes: '57x57',
+        href: '/apple-icon-57x57.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '60x60',
+        href: '/apple-icon-60x60.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '72x72',
+        href: '/apple-icon-72x72.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '76x76',
+        href: '/apple-icon-76x76.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '114x114',
+        href: '/apple-icon-114x114.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '120x120',
+        href: '/apple-icon-120x120.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '144x144',
+        href: '/apple-icon-144x144.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '152x152',
+        href: '/apple-icon-152x152.png',
+      },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/apple-icon-180x180.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '192x192',
+        href: '/android-icon-192x192.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/favicon-32x32.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '96x96',
+        href: '/favicon-96x96.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/favicon-16x16.png',
+      },
+      { rel: 'manifest', href: '/manifest.json' },
+    ],
+  },
+];
+
+let head = [];
+simplifiedHead.map((tag: SimplifiedHeader) => {
+  let tagName = tag.tag;
+  tag.content.forEach((element) => {
+    head.push([tagName, element]);
+  });
+});
+
+export default head;

content/.vuepress/locales.ts

@@ -0,0 +1,19 @@
+const 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',
+  },
+  '/lfn/': {
+    lang: 'lfn',
+    title: 'Lucien Cartier-Tilet',
+    description: 'loca ueb de Lucien Cartier-Tilet',
+  },
+};
+
+export default locales;

content/.vuepress/public/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#eceff4</TileColor></tile></msapplication></browserconfig>

content/.vuepress/styles/index.scss

@@ -0,0 +1,174 @@
+/*
+ * Nord Theme:
+ *   - Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
+ *   - Copyright (c) 2016-present Sven Greb <development@svengreb.de>
+ */
+
+:root {
+  --nord0: #2e3440;
+  --nord1: #3b4252;
+  --nord2: #434c5e;
+  --nord3: #4c566a;
+  --nord4: #d8dee9;
+  --nord5: #e5e9f0;
+  --nord6: #eceff4;
+  --nord7: #8fbcbb;
+  --nord8: #88c0d0;
+  --nord9: #81a1c1;
+  --nord10: #5e81ac;
+  --nord11: #bf616a;
+  --nord12: #d08770;
+  --nord13: #ebcb8b;
+  --nord14: #a3be8c;
+  --nord15: #b48ead;
+
+  scroll-behavior: smooth;
+
+  // brand colors
+  --c-brand: var(--nord14);
+  --c-brand-light: var(--nord14);
+
+  // background colors
+  --c-bg: var(--nord6);
+  --c-bg-light: var(--nord6);
+  --c-bg-lighter: var(--nord5);
+  --c-bg-dark: var(--nord5);
+  --c-bg-darker: var(--nord4);
+  --c-bg-navbar: var(--c-bg);
+  --c-bg-sidebar: var(--c-bg);
+  --c-bg-arrow: var(--nord4);
+
+  // text colors
+  --c-text: var(--nord1);
+  --c-text-accent: var(--c-brand);
+  --c-text-light: var(--nord2);
+  --c-text-lighter: var(--nord3);
+  --c-text-lightest: var(--nord4);
+  --c-text-quote: var(--nord2);
+
+  // border colors
+  --c-border: var(--nord4);
+  --c-border-dark: var(--nord4);
+
+  // custom container colors
+  --c-tip: var(--nord14);
+  --c-tip-bg: var(--c-bg);
+  --c-tip-title: var(--c-text);
+  --c-tip-text: var(--c-text);
+  --c-tip-text-accent: var(--c-text-accent);
+  --c-warning: var(--nord13);
+  --c-warning-bg: var(--c-bg);
+  --c-warning-bg-light: var(--c-bg-light);
+  --c-warning-bg-lighter: var(--c-bg-lighter);
+  --c-warning-border-dark: var(--nord3);
+  --c-warning-details-bg: var(--c-bg);
+  --c-warning-title: var(--nord12);
+  --c-warning-text: var(--nord12);
+  --c-warning-text-accent: var(--nord12);
+  --c-warning-text-light: var(--nord12);
+  --c-warning-text-quote: var(--nord12);
+
+  --c-danger: var(--nord11);
+  --c-danger-bg: var(--c-bg);
+  --c-danger-bg-light: var(--c-bg-light);
+  --c-danger-bg-lighter: var(--c-bg-light);
+  --c-danger-border-dark: var(--nord11);
+  --c-danger-details-bg: var(--nord2);
+  --c-danger-title: var(--nord11);
+  --c-danger-text: var(--nord11);
+  --c-danger-text-accent: var(--nord11);
+  --c-danger-text-light: var(--nord11);
+  --c-danger-text-quote: var(--nord11);
+
+  --c-details-bg: var(--c-bg-lighter);
+
+  // badge component colors
+  --c-badge-tip: var(--c-tip);
+  --c-badge-warning: var(--c-warning);
+  --c-badge-warning-text: var(--c-bg);
+  --c-badge-danger: var(--c-danger);
+  --c-badge-danger-text: var(--c-bg);
+
+  // transition vars
+  --t-color: 0.3s ease;
+  --t-transform: 0.3s ease;
+
+  // code blocks vars
+  --code-bg-color: var(--nord0);
+  --code-hl-bg-color: var(--nord1);
+  --code-ln-color: #9e9e9e;
+  --code-ln-wrapper-width: 3.5rem;
+
+  // font vars
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+
+  // layout vars
+  --navbar-height: 3.6rem;
+  --navbar-padding-v: 0.7rem;
+  --navbar-padding-h: 1.5rem;
+  --sidebar-width: 20rem;
+  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
+  --content-width: 740px;
+  --homepage-width: 960px;
+}
+
+html.dark {
+  // brand colors
+  --c-brand: var(--nord14);
+  --c-brand-light: var(--nord14);
+
+  // background colors
+  --c-bg: var(--nord1);
+  --c-bg-light: var(--nord2);
+  --c-bg-lighter: var(--nord2);
+  --c-bg-dark: var(--nord3);
+  --c-bg-darker: var(--nord3);
+
+  // text colors
+  --c-text: var(--nord4);
+  --c-text-light: var(--nord5);
+  --c-text-lighter: var(--nord5);
+  --c-text-lightest: var(--nord6);
+  --c-text-quote: var(--c-text);
+
+  // border colors
+  --c-border: var(--nord3);
+  --c-border-dark: var(--nord3);
+
+  // custom container colors
+  --c-tip: var(--nord14);
+  --c-warning: var(--nord13);
+  --c-warning-bg: var(--c-bg);
+  --c-warning-bg-light: var(--c-bg-light);
+  --c-warning-bg-lighter: var(--c-bg-lighter);
+  --c-warning-border-dark: var(--nord3);
+  --c-warning-details-bg: var(--c-bg);
+  --c-warning-title: var(--nord13);
+  --c-warning-text: var(--nord13);
+  --c-warning-text-accent: var(--nord13);
+  --c-warning-text-light: var(--nord13);
+  --c-warning-text-quote: var(--nord13);
+
+  --c-danger: var(--nord11);
+  --c-danger-bg: var(--c-bg);
+  --c-danger-bg-light: var(--c-bg-light);
+  --c-danger-bg-lighter: var(--c-bg-light);
+  --c-danger-border-dark: var(--nord11);
+  --c-danger-details-bg: var(--nord2);
+  --c-danger-title: var(--nord11);
+  --c-danger-text: var(--nord11);
+  --c-danger-text-accent: var(--nord11);
+  --c-danger-text-light: var(--nord11);
+  --c-danger-text-quote: var(--nord11);
+
+  --c-details-bg: var(--c-bg-light);
+
+  // badge component colors
+  --c-badge-warning-text: var(--nord0);
+  --c-badge-danger-text: var(--nord0);
+
+  // code blocks vars
+  --code-hl-bg-color: var(--nord2);
+}

content/.vuepress/themeLocales.ts

@@ -0,0 +1,64 @@
+const themeLocales = {
+  '/': {
+    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',
+    lastUpdatedText: 'Dernière mise à jour',
+  },
+  '/lfn/': {
+    selectLanguageName: 'Elefen',
+    tip: 'avisa',
+    warning: 'averti',
+    danger: 'peril',
+    sidebar: [
+      '/lfn/index.md',
+      '/lfn/about.md',
+      '/lfn/resume.md',
+      '/lfn/projects.md',
+      '/lfn/conlanging.md',
+      '/lfn/vocal-synthesis.md',
+    ],
+    notFound: [
+      'Ce? Se no ave no cosa asi',
+      'A do vade tu?',
+      'Era 404',
+      'La lia no es coreta',
+    ],
+    backToHome: 'reversa a la paja prima',
+    openInNewWindow: 'abri en un nova fenetra',
+    toggleColorMode: 'cambia la colores',
+    toggleSidebar: 'bara ladal',
+    lastUpdatedText: 'Ultima refresci',
+  },
+  '/en/': {
+    selectLanguageName: 'English',
+    sidebar: [
+      '/en/index.md',
+      '/en/about.md',
+      '/en/resume.md',
+      '/en/projects.md',
+      '/en/conlanging.md',
+      '/en/vocal-synthesis.md',
+    ],
+  },
+};
+
+export default themeLocales;