chore: lint + add prettierignore + prettier json rules

.prettierignore

@@ -0,0 +1,2 @@
+.mypy_cache
+README.md

.prettierrc

@@ -1,5 +1,19 @@
 {
   "semi": false,
   "tabWidth": 2,
-  "singleQuote": true
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "**/*.json",
+      "options": {
+        "tabWidth": 4
+      }
+    },
+    {
+      "files": "./*.json",
+      "options": {
+        "tabWidth": 2
+      }
+    }
+  ]
 }

components/CustomLogo.vue

@@ -17,7 +17,7 @@ try {
     v-html="customLogo.src"
   />
   <img
-    v-else-if="customLogo?.is === 'svg'"
+    v-else-if="customLogo?.is === 'img'"
     :src="customLogo.src"
     alt=""
     aria-hidden="true"

components/PageTitle.vue

@@ -15,7 +15,7 @@ withDefaults(
 
 <template>
   <component
-    :tag="tag"
+    :is="tag"
     id="main-target"
     tabindex="-1"
     class="inline-block text-4xl font-bold"

composables/states.ts

@@ -78,10 +78,20 @@ export const useQueryMsg = () => useState<string | null>('queryMsg', () => null)
 
 // SETTINGS
 
+type AppsSettings = Record<
+  string,
+  {
+    label: string
+    url: string
+    description?: Record<string, string>
+    logo?: string
+  }
+>
+
 export interface Settings {
   domain: string
   public: boolean
-  portal_logo?: { is: 'img' | 'svg', src: string }
+  portal_logo?: { is: 'img' | 'svg'; src: string }
   portal_theme: string
   portal_title?: string
   search_engine?: string
@@ -89,7 +99,7 @@ export interface Settings {
   show_other_domains_apps: 0 | 1
   portal_user_intro: string
   portal_public_intro: string
-  apps: Record<string, { label: string; url: string, description?: Record<string, string>, logo?: string }>
+  apps: AppsSettings
 }
 
 const useSettingsState = () => useState<Settings>('settings')
@@ -100,17 +110,22 @@ export const useSettings = async () => {
   if (!settings.value) {
     const { data } = await useApi<Settings>('/public')
 
-    const logo = data.value.portal_logo
+    const logo = data.value!.portal_logo as unknown as string | undefined
     if (logo) {
       const src = `https://${data.value.domain}/yunohost/sso/customassets/${logo}`
-      const is = data.value.portal_logo.substr(-4) === '.svg' ? 'svg' : 'img'
-      data.value.portal_logo = { is, src: is === 'svg' ? '' : src }
+      const is = logo.slice(-4) === '.svg' ? 'svg' : 'img'
+      data.value!.portal_logo = { is, src: is === 'svg' ? '' : src }
 
       if (is === 'svg') {
         // Query file content to inject inline SVG so that CSS "currentColor" can cascade to it
-        $fetch(src).then((blob) => blob.text()).then((text) => {
-          data.value.portal_logo.src = text.replace('<?xml version="1.0" encoding="utf-8"?>', '')
-        })
+        $fetch<Blob>(src)
+          .then((blob) => blob.text())
+          .then((text) => {
+            data.value!.portal_logo!.src = text.replace(
+              '<?xml version="1.0" encoding="utf-8"?>',
+              '',
+            )
+          })
       }
     }
 
@@ -132,7 +147,7 @@ export interface User {
   mailalias: string[]
   mailforward: string[]
   groups: string[]
-  apps: Record<string, { label: string; url: string }>
+  apps: AppsSettings
 }
 
 export const useUserState = () => useState<User | null>('user', () => null)

docker-compose.yml

@@ -1,5 +1,4 @@
 services:
-
   portal:
     build: .
     ports:

layouts/default.vue

@@ -71,9 +71,12 @@ async function logout() {
           <div
             class="flex flex-grow flex-wrap min-[500px]:w-full max-[500px]:flex-col max-[500px]:ms-auto"
           >
-            <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events vuejs-accessibility/no-static-element-interactions -->
             <div v-if="user" class="flex-grow">
-              <div class="profile cursor-pointer flex flex-col" @click="navigateTo('/edit')">
+              <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events vuejs-accessibility/no-static-element-interactions -->
+              <div
+                class="profile cursor-pointer flex flex-col"
+                @click="navigateTo('/edit')"
+              >
                 <span>
                   <span
                     class="text-2xl font-extrabold tracking-tight leading-none"
@@ -89,7 +92,10 @@ async function logout() {
                 </NuxtLink>
               </div>
             </div>
-            <p v-else-if="settings.portal_title" class="text-3xl font-bold flex-grow min-[800px]:text-center mb-3">
+            <p
+              v-else-if="settings.portal_title"
+              class="text-3xl font-bold flex-grow min-[800px]:text-center mb-3"
+            >
               {{ settings.portal_title }}
             </p>
 

maintenance/locales.json

@@ -18,9 +18,7 @@
     {
         "code": "br",
         "dir": "ltr",
-        "fallback": [
-            "fr"
-        ],
+        "fallback": ["fr"],
         "file": "br.json",
         "iso": "br",
         "name": "Brezhoneg"

middleware/auth.global.ts

@@ -5,7 +5,7 @@ import {
   useSettings,
 } from '@/composables/states'
 
-export default defineNuxtRouteMiddleware(async (to, from) => {
+export default defineNuxtRouteMiddleware(async (to) => {
   const isLoggedIn = useIsLoggedIn()
   const settings = await useSettings()
 

pages/index.vue

@@ -21,25 +21,22 @@ const intro = computed(() => {
   return isLoggedIn.value ? userIntro : isPublic ? publicIntro : null
 })
 
-const apps = Object.entries(appsData.value).map(([id, app]) => {
+const apps = Object.values(appsData.value).map((app) => {
   return {
     ...app,
     url: '//' + app.url,
-    description: app.description[locale.value] || app.description.en
+    description: app.description?.[locale.value] || app.description?.en,
   }
 })
 
 const search = ref('')
 
 async function onSearchSubmit() {
-  await navigateTo(
-    settings.value.search_engine + search.value,
-    {
-      open: {
-        target: '_blank',
-      }
-    }
-  )
+  await navigateTo(settings.value.search_engine + search.value, {
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
@@ -49,14 +46,31 @@ async function onSearchSubmit() {
 
     <form v-if="settings.search_engine" class="flex my-16" @submit.prevent>
       <div class="join w-full max-w-xl mx-auto">
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label for="search" class="sr-only">
+          {{
+            t('search_engine_placeholder', {
+              engine: settings.search_engine_name,
+            })
+          }}
+        </label>
         <input
+          id="search"
           v-model="search"
           type="search"
           class="input input-bordered join-item w-full"
           name="search"
-          :placeholder="t('search_engine_placeholder', { engine: settings.search_engine_name })"
+          :placeholder="
+            t('search_engine_placeholder', {
+              engine: settings.search_engine_name,
+            })
+          "
+        />
+        <button
+          type="submit"
+          class="btn btn-primary join-item px-2"
+          @click="onSearchSubmit"
         >
-        <button type="submit" class="btn btn-primary join-item px-2" @click="onSearchSubmit">
           <YIcon name="magnify" aria-hidden="true" class="m-0" />
           <span class="sr-only">{{ t('search') }}</span>
         </button>
@@ -77,9 +91,10 @@ async function onSearchSubmit() {
         >
           <img
             v-if="app.logo"
-            aria-hidden="true"
+            aria-hidden
             :src="app.logo"
             class="w-24 h-24 rounded me-4 bg-white"
+            alt=""
           />
           <div>
             <h4 class="text-xl font-bold">

spa-loading-template.html

@@ -13,8 +13,8 @@
     justify-content: center;
 
     @media (prefers-color-scheme: dark) {
-        background-color: rgb(29, 35, 42);
-        color: rgb(166, 173, 186);
+      background-color: rgb(29, 35, 42);
+      color: rgb(166, 173, 186);
     }
   }