Merge pull request #275 from JonathanBout/master

Repair eslint, apply it's warnings and separate backend into a separate file

env.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="vite/client" />
-/// <reference path="module.d.ts" />
+
+import "module"
+

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import eslintPluginVue from 'eslint-plugin-vue'
+import ts from 'typescript-eslint'
+
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...eslintPluginVue.configs['flat/recommended'],
+  {
+    files: ['*.vue', '**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    },
+    rules: {
+        'vue/html-indent': ['warn', 4],
+        'vue/max-attributes-per-line': ['warn', {
+            singleline: {
+                max: 4
+            },
+            multiline: {
+                max: 1
+            }
+        }]
+    }
+  }
+)

module.d.ts

@@ -1,3 +1,6 @@
 declare module "virtual:gitrev" {
     export const rev: string
 }
+
+declare module "eslint-plugin-vue"
+declare module "@eslint/js"

package.json

@@ -9,37 +9,35 @@
         "preview": "vite preview",
         "build-only": "vite build",
         "type-check": "vue-tsc --noEmit",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+        "lint": "eslint 'src/**/*.{ts,js,vue}' --fix",
         "format": "prettier --write src/",
         "compose-up": "docker compose up --build"
     },
     "dependencies": {
+        "@typescript-eslint/parser": "^8.8.1",
         "bootstrap-icons": "^1.11.3",
+        "eslint-plugin-vue": "^9.28.0",
         "flag-icons": "^7.2.3",
         "npm-run-all": "^4.1.5",
         "parse-css-color": "^0.2.1",
         "read-last-lines": "^1.8.0",
+        "typescript-eslint": "^8.8.1",
         "vue": "^3.5.11",
+        "vue-eslint-parser": "^9.4.3",
         "vue-i18n": "^10.0.4",
         "vue-router": "^4.4.5"
     },
     "devDependencies": {
         "@babel/types": "^7.25.7",
-        "@eslint/object-schema": "^2.1.4",
-        "@rushstack/eslint-patch": "^1.10.4",
         "@tsconfig/node18": "^18.2.4",
         "@types/node": "^22.7.5",
         "@vitejs/plugin-vue": "^5.1.4",
-        "@vue/eslint-config-prettier": "^10.0.0",
-        "@vue/eslint-config-typescript": "^14.0.0",
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.20",
-        "eslint-plugin-vue": "^9.28.0",
         "less": "^4.2.0",
         "less-loader": "^12.2.0",
         "prettier": "^3.3.3",
         "typescript": "~5.6.3",
-        "typescript-eslint": "^8.8.1",
         "vite": "^5.4.8",
         "vite-plugin-vue-devtools": "^7.4.6",
         "vue-tsc": "^2.1.6"

src/App.vue

@@ -12,7 +12,7 @@ function getIsInert() {
 </script>
 
 <template>
-    <Header @menu-open-changed="(value : boolean) => (menuIsOpen = value)" />
+    <Header @menu-open-changed="(value: boolean) => (menuIsOpen = value)" />
     <main :inert="getIsInert()">
         <RouterView />
     </main>

src/backend/index.ts

@@ -0,0 +1,42 @@
+// empty, as it is on the same domain
+const productionUrl = ""
+export type Route = `/${string}`
+export type QueryParameters = { [key: string]: string }
+export type Body = { [key: string]: unknown }
+
+function getPath(route: Route = "/", query: QueryParameters) {
+    let url = import.meta.env.PROD
+        ? productionUrl
+        : (import.meta.env.VITE_BACKEND_URL as string) || "https://jonathanbout.com"
+
+    if (url.endsWith("/")) {
+        url = url.slice(0, -1)
+    }
+
+    let queryString = "?"
+
+    for (const key in query) {
+        queryString += `${key}=${query[key]}&`
+    }
+
+    queryString = queryString.slice(0, -1)
+
+    return url + route + queryString
+}
+
+
+export default {
+    async get(route: Route, query: QueryParameters = {}) {
+        const fullUrl = new URL(getPath(route, query))
+
+        return await fetch(fullUrl)
+    },
+    async post(route: Route, body: Body, query: QueryParameters = {}) {
+        const fullUrl = new URL(getPath(route, query))
+
+        return await fetch(fullUrl, {
+            method: "POST",
+            body: JSON.stringify(body)
+        })
+    },
+}

src/components/BurgerMenuIconComponent.vue

@@ -10,9 +10,9 @@ defineProps<{
         :style="'--animation-duration: ' + (animationDuration ?? '.3s')"
         :class="'toggle-root' + (open ? ' open' : '')"
     >
-        <div class="bar a"></div>
-        <div class="bar b"></div>
-        <div class="bar c"></div>
+        <div class="bar a" />
+        <div class="bar b" />
+        <div class="bar c" />
     </div>
 </template>
 <style lang="less" scoped>

src/components/FooterComponent.vue

@@ -16,12 +16,12 @@ const iconsByLocale: Localized<string> = {
     <footer class="monospace" :inert="inert">
         <div class="language-display" translate="no">
             <ul>
-                <li v-for="locale in LOCALES" v-bind:key="locale">
+                <li v-for="locale in LOCALES" :key="locale">
                     <button
                         :class="'link no-external-icon' + (currentLocale === locale ? ' current' : '')"
                         @click="changeLanguage(locale)"
                     >
-                        <i :class="'fi fi-' + iconsByLocale[locale]"></i>
+                        <i :class="'fi fi-' + iconsByLocale[locale]" />
                         {{ $t("language." + locale) }}
                     </button>
                 </li>

src/components/GitHubStatsComponent.vue

@@ -46,12 +46,13 @@ function getTotalSizeFriendly(size: number) {
 <template>
     <div class="github-stats" translate="no">
         <template v-if="stats.topLanguages.length > 0">
-            <div v-html="$t('projects.github-stats.top-languages.description')"></div>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div v-html="$t('projects.github-stats.top-languages.description')" />
             <div class="percentage-bar" :style="getTotalSizeCSS()">
                 <div
-                    :style="getCSS(stat)"
                     v-for="stat in stats.topLanguages"
                     :key="stat.name"
+                    :style="getCSS(stat)"
                     :data-lang-name="stat.name"
                     :data-lang-percentage="getPercentageString(stat)"
                     :data-total-lang-size="getTotalSizeFriendly(stat.size)"

src/components/LoaderComponent.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="spinner-root">
-        <template v-for="n in 10" v-bind:key="n">
-            <div :style="'--animation-delay: ' + (n - 1) * 0.06 + 's'" class="no-load-animation"></div>
+        <template v-for="n in 10" :key="n">
+            <div :style="'--animation-delay: ' + (n - 1) * 0.06 + 's'" class="no-load-animation" />
         </template>
     </div>
 </template>

src/components/PrivacyComponent.vue

@@ -12,7 +12,11 @@ function getParagraphs(paragraphs: string): string[] {
         <h1>
             {{ title }}
         </h1>
-        <div class="state">{{ $t("privacy.lastUpdated") }}: {{ lastUpdate }}</div>
-        <p v-for="paragraph in transformedParagraphs" :key="paragraph">{{ paragraph }}</p>
+        <div class="state">
+            {{ $t("privacy.lastUpdated") }}: {{ lastUpdate }}
+        </div>
+        <p v-for="paragraph in transformedParagraphs" :key="paragraph">
+            {{ paragraph }}
+        </p>
     </div>
 </template>

src/components/ProjectComponent.vue

@@ -34,7 +34,7 @@ const projectName = computed(() => {
         return props.project.name
     }
 
-    return (props.project.name as any)[lang.value]
+    return (props.project.name as [])[lang.value]
 })
 </script>
 
@@ -44,19 +44,21 @@ const projectName = computed(() => {
             class="image-wrapper"
             :style="'--image-count: ' + (project.image ? 1 : project.images ? project.images.length : 0).toString()"
         >
-            <img class="image" v-if="project.image" :src="project.image" alt="Project preview" />
+            <img v-if="project.image" class="image" :src="project.image" alt="Project preview">
             <img
-                class="image"
-                v-else
                 v-for="image in project.images"
-                v-bind:key="image"
+                v-else
+                :key="image"
+                class="image"
                 :src="image"
                 alt="Project preview"
-            />
+            >
         </div>
         <div class="vertical-stack">
-            <div class="name">{{ projectName }}</div>
-            <div class="description" v-if="project.description">
+            <div class="name">
+                {{ projectName }}
+            </div>
+            <div v-if="project.description" class="description">
                 {{ (project.description as any)[lang] }}
             </div>
             <ul class="links">
@@ -66,29 +68,29 @@ const projectName = computed(() => {
                         :aria-label="$t('projects.view-on-gh', { name: projectName })"
                         target="_blank"
                         class="bi bi-github big no-external-icon"
-                    ></a>
+                    />
                 </li>
                 <li v-if="project.demo">
                     <a
                         :href="project.demo"
                         :aria-label="$t('projects.view-demo', { name: projectName })"
                         target="_blank"
                         class="bi bi-box-arrow-up-right big no-external-icon"
-                    ></a>
+                    />
                 </li>
                 <li v-if="project.playStore">
                     <a
                         :href="project.playStore"
                         :aria-label="$t('projects.view-on-play-store', { name: projectName })"
                         target="_blank"
                         class="bi bi-google-play big no-external-icon"
-                    ></a>
+                    />
                 </li>
-                <li v-for="tag in project.tags" class="tag" v-bind:key="tag">
+                <li v-for="tag in project.tags" :key="tag" class="tag">
                     <TagComponent :tag="tag" />
                 </li>
             </ul>
-            <div class="timeframe" v-if="project.timeframe">
+            <div v-if="project.timeframe" class="timeframe">
                 {{ timeframeText }}
             </div>
         </div>

src/components/TagComponent.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import tagsData, { Tag } from "@/projects"
 
-const props = defineProps({
-    tag: String
-})
+const props = defineProps<{tag:string}>()
 
-const foundTag = (tagsData.tags as any)[props.tag || ""] as Tag
+const foundTag = (tagsData.tags as [])[props.tag || ""] as Tag
 
 let style: string | undefined = undefined
 
@@ -38,7 +36,7 @@ function getIconUrl() {
             :src="getIconUrl()"
             onerror="this.style.display = 'none';"
             alt="icon"
-        />
+        >
         <span>
             {{ foundTag?.name ?? tag }}
         </span>

src/components/forms/TextAreaInput.vue

@@ -38,11 +38,13 @@ updateCounter()
             :required="required"
             :minlength="minCharacters || undefined"
             :maxlength="maxCharacters || undefined"
-        ></textarea>
+        />
         <div :class="valid ? '' : 'invalid'">
             {{ characterCount }}
 
-            <template v-if="minCharacters && characterCount < minCharacters"> / {{ minCharacters }} </template>
+            <template v-if="minCharacters && characterCount < minCharacters">
+                / {{ minCharacters }}
+            </template>
 
             <template v-if="maxCharacters && !(minCharacters && characterCount < minCharacters)">
                 / {{ maxCharacters }}

src/components/forms/TextInput.vue

@@ -36,7 +36,7 @@ const isValid = ref(true)
 <template>
     <label>
         <span>{{ props.label }}</span>
-        <input :type="type" v-model="model" @input="validateInput" />
+        <input v-model="model" :type="type" @input="validateInput">
         <span class="error" :class="validateInput() ? 'hidden' : 'visible'">{{ props.error }}</span>
     </label>
 </template>

src/components/header/HeaderComponent.vue

@@ -5,7 +5,7 @@ import BurgerMenuIconComponent from "../BurgerMenuIconComponent.vue"
 import { useI18n } from "vue-i18n"
 
 const emit = defineEmits<{
-    (e: "menuOpenChanged", value: boolean): void,
+    (e: "menuOpenChanged", value: boolean): void
 }>()
 
 let headerOpen = ref(false)
@@ -70,15 +70,17 @@ function transformPathName(index: number, part: string) {
 
 <template>
     <div class="menu-wrapper" :style="'--animation-duration: ' + animationDuration">
-        <div :class="'header-backdrop' + (headerOpen ? '' : ' closed')" @click="close_menu"></div>
+        <div :class="'header-backdrop' + (headerOpen ? '' : ' closed')" @click="close_menu" />
         <button aria-label="menu" class="header-toggle" @click="toggle_menu">
             <BurgerMenuIconComponent :animation-duration="animationDuration" :open="headerOpen" />
-            <div class="header-toggle-backdrop"></div>
+            <div class="header-toggle-backdrop" />
         </button>
-        <div class="location-marker" v-if="fullPath() != '/'">
-            <router-link v-for="(part, index) in fullPathParts()" :to="{ path: basePath(index) }" v-bind:key="part">{{
-                transformPathName(index, part)
-            }}</router-link>
+        <div v-if="fullPath() != '/'" class="location-marker">
+            <router-link v-for="(part, index) in fullPathParts()" :key="part" :to="{ path: basePath(index) }">
+                {{
+                    transformPathName(index, part)
+                }}
+            </router-link>
         </div>
         <header :class="'monospace' + (headerOpen ? '' : ' closed')">
             <router-link to="/" active-class="active" class="site-title">
@@ -91,16 +93,16 @@ function transformPathName(index: number, part: string) {
                 <span>{{ $t("contact.title") }}</span>
             </router-link>
             <a href="https://github.com/JonathanBout" :aria-label="$t('header.github')" class="no-external-icon small">
-                <span><i class="bi bi-github"></i></span>
+                <span><i class="bi bi-github" /></span>
             </a>
             <a
                 href="https://linkedin.com/in/jonathanbout"
                 :aria-label="$t('header.linkedin')"
                 class="no-external-icon small"
             >
-                <span><i class="bi bi-linkedin"></i></span>
+                <span><i class="bi bi-linkedin" /></span>
             </a>
-            <div class="flex-filler"></div>
+            <div class="flex-filler" />
             <div class="version">
                 <a :href="'https://github.com/JonathanBout/portfolio/commit/' + versionHash">{{
                     $t("version") + " " + versionHash