Change prefetch settings

components/prose/ProseA.vue

@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
+    <NuxtLink class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
     :to="{ name: 'explore-path', params: { path: data[0].path }, hash: hash }" :class="class">
         <HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': data[0].type === 'canvas'}">
             <template #content>
@@ -20,7 +20,7 @@
             </template>
         </HoverCard>
     </NuxtLink>
-    <NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
+    <NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
         <slot v-bind="$attrs"></slot>
         <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'markdown'" :height="20" :width="20"
             :icon="`icons/link-${data[0].type.toLowerCase()}`" />

layouts/default.vue

@@ -8,7 +8,7 @@
 						<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
 					</Button>
 				</CollapsibleTrigger>
-				<NuxtLink no-prefetch class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
+				<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
 			</div>
 			<div class="flex items-center px-2">
 				<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
@@ -41,14 +41,14 @@
 				<div class="bg-light-0 md:py-11 dark:bg-dark-0 z-40 xl:w-96 md:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-md:absolute max-md:-top-0 max-md:-bottom-0 md:left-0 max-md:data-[state=closed]:-left-full max-md:transition-[left] py-8 max-md:z-40 max-md:data-[state=open]:left-0">
 					<div class="relative bottom-6 flex flex-col gap-4 xl:px-6 px-3">
 						<div class="flex justify-between items-center max-md:hidden">
-							<NuxtLink no-prefetch class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">
+							<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">
 								<Avatar src="/logo.dark.svg" class="dark:block hidden" />
         						<Avatar src="/logo.light.svg" class="block dark:hidden" />
 							</NuxtLink>
 							<div class="flex gap-4 items-center">
 								<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
 								<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
-									<NuxtLink no-prefetch :to="{ name: 'user-login' }">
+									<NuxtLink :to="{ name: 'user-login' }">
 										<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
 											<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
 										</div>
@@ -73,12 +73,12 @@
 						</div>
 					</div>
 					<div class="flex-1 xl:px-6 px-3 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
-						<NuxtLink :href="{ name: 'explore' }" no-prefetch class="flex flex-1 font-bold text-lg items-center border-light-35 dark:border-dark-35 hover:border-accent-blue" active-class="text-accent-blue border-s-2 !border-accent-blue">
+						<NuxtLink :href="{ name: 'explore' }" class="flex flex-1 font-bold text-lg items-center border-light-35 dark:border-dark-35 hover:border-accent-blue" active-class="text-accent-blue border-s-2 !border-accent-blue">
 							<div class="pl-3 py-1 flex-1 truncate">Projet</div>
 						</NuxtLink>
 						<Tree v-if="pages" v-model="pages" :getKey="(item) => item.path">
 							<template #default="{ item, isExpanded }">
-								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" no-prefetch class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple" :class="{ 'font-medium': item.hasChildren }" active-class="text-accent-blue" :data-private="item.value.private">
+								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple" :class="{ 'font-medium': item.hasChildren }" active-class="text-accent-blue" :data-private="item.value.private">
 									<Icon v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level - 1}em` }" />
 									<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="w-5 h-5" />
 									<div class="pl-3 py-1 flex-1 truncate">
@@ -90,7 +90,7 @@
 						</Tree>
 					</div>
 					<div class="xl:px-12 px-6 text-start text-xs text-light-60 dark:text-dark-60 relative top-4">
-						<NuxtLink no-prefetch class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink no-prefetch class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
+						<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
 						<p>Copyright Peaceultime - 2024</p>
 					</div>
 				</div>

nuxt.config.ts

@@ -168,5 +168,15 @@ export default defineNuxtConfig({
   sitemap: {
     exclude: ['/admin/**', '/explore/edit/**', '/user/mailvalidated'],
     sources: ['/api/__sitemap__/urls']
+  },
+  experimental: {
+    defaults: {
+      nuxtLink: {
+        prefetchOn: {
+          interaction: true,
+          visibility: false,
+        }
+      }
+    }
   }
 })

pages/admin/index.vue

@@ -14,7 +14,7 @@ const { data: pages } = useFetch('/api/admin/pages');
     <div class="flex flex-1 flex-col p-4 justify-start">
         <div class="flex flex-row justify-between items-center">
             <ProseH2 class="text-center flex-1">Administration</ProseH2>
-            <Button><NuxtLink no-prefetch :to="{ name: 'admin-jobs' }">Jobs</NuxtLink></Button>
+            <Button><NuxtLink :to="{ name: 'admin-jobs' }">Jobs</NuxtLink></Button>
         </div>
         <div>
             <div>Utilisateurs ({{ users.length }})</div>

pages/explore/[...path].vue

@@ -13,7 +13,7 @@
             <div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
                 <div class="flex flex-1 flex-row justify-between items-center">
                     <ProseH1>{{ page.title }}</ProseH1>
-                    <NuxtLink no-prefetch :href="{ name: 'explore-edit-path', params: { path: path } }"><Button v-if="isOwner">Modifier</Button></NuxtLink>
+                    <NuxtLink :href="{ name: 'explore-edit-path', params: { path: path } }"><Button v-if="isOwner">Modifier</Button></NuxtLink>
                 </div>
                 <Markdown :content="page.content" />
             </div>

pages/explore/edit/[...path].vue

@@ -12,7 +12,7 @@
                 </div>
                 <div class="flex gap-4">
                     <Tooltip message="Ctrl+S" side="bottom"><Button @click="() => save(true)" :loading="saveStatus === 'pending'" class="border-light-blue dark:border-dark-blue hover:border-light-blue dark:hover:border-dark-blue focus:shadow-light-blue dark:focus:shadow-dark-blue">Enregistrer</Button></Tooltip>
-                    <Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink no-prefetch :href="{ name: 'explore-path', params: { path: path } }"><Button>Annuler</Button></NuxtLink></Tooltip>
+                    <Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink :href="{ name: 'explore-path', params: { path: path } }"><Button>Annuler</Button></NuxtLink></Tooltip>
                 </div>
             </div>
         </div>

pages/explore/edit/index.vue

@@ -67,7 +67,7 @@
 				</DropdownMenu>
 				<Button @click="navigation = tree.remove(navigation, getPath(selected))" v-if="selected" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer</Button>
                 <Tooltip message="Ctrl+S" side="bottom"><Button @click="() => save(true)" :loading="saveStatus === 'pending'" class="border-light-blue dark:border-dark-blue hover:border-light-blue dark:hover:border-dark-blue focus:shadow-light-blue dark:focus:shadow-dark-blue">Enregistrer</Button></Tooltip>
-                <Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink no-prefetch :href="{ name: 'explore' }"><Button>Annuler</Button></NuxtLink></Tooltip>
+                <Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink :href="{ name: 'explore' }"><Button>Annuler</Button></NuxtLink></Tooltip>
             </div>
             <div v-if="selected" class="flex-1 flex justify-start items-start">
                 <div class="flex flex-col flex-1 justify-start items-start">

pages/explore/index.vue

@@ -13,8 +13,8 @@
             <div class="flex flex-1 flex-row justify-between items-center">
                 <ProseH1>{{ page.title }}</ProseH1>
                 <div class="flex gap-4">
-                    <NuxtLink no-prefetch :href="{ name: 'explore-edit-path', params: { path: 'index' } }"><Button v-if="isOwner">Modifier la page</Button></NuxtLink>
+                    <NuxtLink :href="{ name: 'explore-edit-path', params: { path: 'index' } }"><Button v-if="isOwner">Modifier la page</Button></NuxtLink>
-                    <NuxtLink no-prefetch :href="{ name: 'explore-edit' }"><Button v-if="isOwner">Configurer le projet</Button></NuxtLink>
+                    <NuxtLink :href="{ name: 'explore-edit' }"><Button v-if="isOwner">Configurer le projet</Button></NuxtLink>
                 </div>
             </div>
             <Markdown :content="page.content" />

pages/roadmap.vue

@@ -5,15 +5,11 @@
     <div class="flex flex-col justify-start p-6">
         <ProseH2>Roadmap</ProseH2>
         <div class="grid grid-cols-4 gap-x-2 gap-y-4">
-            <div class="flex flex-col gap-2 justify-start">
+            <div v-if="loggedIn && user && hasPermissions(user.permissions, ['admin'])" class="flex flex-col gap-2 justify-start">
                 <ProseH3>Administration</ProseH3>
-                <Label class="flex flex-row gap-2 items-center"><CheckboxRoot class="border border-light-35 dark:border-dark-35 w-6 h-6 flex justify-center items-center"         disabled><CheckboxIndicator><Icon icon="radix-icons:check" /></CheckboxIndicator></CheckboxRoot><span class="                                                ">Statistiques de consultation</span></Label>
-                <Label class="flex flex-row gap-2 items-center"><CheckboxRoot class="border border-light-35 dark:border-dark-35 w-6 h-6 flex justify-center items-center"         disabled><CheckboxIndicator><Icon icon="radix-icons:check" /></CheckboxIndicator></CheckboxRoot><span class="                                                ">Statistiques de connexion</span></Label>
                 <Label class="flex flex-row gap-2 items-center"><CheckboxRoot class="border border-light-35 dark:border-dark-35 w-6 h-6 flex justify-center items-center"         disabled><CheckboxIndicator><Icon icon="radix-icons:check" /></CheckboxIndicator></CheckboxRoot><span class="                                                ">Dashboard de statistiques</span></Label>
                 <Label class="flex flex-row gap-2 items-center"><CheckboxRoot class="border border-light-35 dark:border-dark-35 w-6 h-6 flex justify-center items-center"         disabled><CheckboxIndicator><Icon icon="radix-icons:check" /></CheckboxIndicator></CheckboxRoot><span class="                                                ">Gestion de droits</span><ProseTag>prioritaire</ProseTag></Label>
                 <Label class="flex flex-row gap-2 items-center"><CheckboxRoot class="border border-light-35 dark:border-dark-35 w-6 h-6 flex justify-center items-center"         disabled><CheckboxIndicator><Icon icon="radix-icons:check" /></CheckboxIndicator></CheckboxRoot><span class="                                                ">Synchro project <-> GIT</span><ProseTag>prioritaire</ProseTag></Label>
-                <Label class="flex flex-row gap-2 items-center"><CheckboxRoot class="border border-light-35 dark:border-dark-35 w-6 h-6 flex justify-center items-center"         disabled><CheckboxIndicator><Icon icon="radix-icons:check" /></CheckboxIndicator></CheckboxRoot><span class="                                                ">Génération du fichier robots.txt</span></Label>
-                <Label class="flex flex-row gap-2 items-center"><CheckboxRoot class="border border-light-35 dark:border-dark-35 w-6 h-6 flex justify-center items-center"         disabled><CheckboxIndicator><Icon icon="radix-icons:check" /></CheckboxIndicator></CheckboxRoot><span class="                                                ">Génération dynamique de la sitemap</span></Label>
             </div>
             <div class="flex flex-col gap-2 justify-start">
                 <ProseH3>Editeur</ProseH3>
@@ -47,4 +43,7 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
+import { hasPermissions } from '~/shared/auth.util';
+
+const { loggedIn, user } = useUserSession();
 </script>

pages/user/login.vue

@@ -11,7 +11,7 @@
             <TextInput type="text" label="Utilisateur ou email" autocomplete="username" v-model="state.usernameOrEmail"/>
             <TextInput type="password" label="Mot de passe" autocomplete="current-password" v-model="state.password"/>
             <Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Se connecter</Button>
-            <NuxtLink no-prefetch class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-register' }">Pas de compte ?</NuxtLink>
+            <NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-register' }">Pas de compte ?</NuxtLink>
         </form>
     </div>
 </template>

pages/user/mailvalidated.vue

@@ -5,8 +5,8 @@
     <div class="flex flex-col justify-center items-center">
         <ProseH2>Votre compte a été validé ! 🎉</ProseH2>
         <div class="flex flex-row gap-8">
-            <Button class="bg-light-25 dark:bg-dark-25"><NuxtLink no-prefetch :to="{ name: 'user-login', replace: true }">Se connecter</NuxtLink></Button>
+            <Button class="bg-light-25 dark:bg-dark-25"><NuxtLink :to="{ name: 'user-login', replace: true }">Se connecter</NuxtLink></Button>
-            <Button class="bg-light-25 dark:bg-dark-25"><NuxtLink no-prefetch :to="{ name: 'index', replace: true }">Retourner à l'accueil</NuxtLink></Button>
+            <Button class="bg-light-25 dark:bg-dark-25"><NuxtLink :to="{ name: 'index', replace: true }">Retourner à l'accueil</NuxtLink></Button>
         </div>
     </div>
 </template>

pages/user/register.vue

@@ -21,7 +21,7 @@
             </div>
             <TextInput type="password" label="Confirmation du mot de passe" autocomplete="new-password" v-model="confirmPassword" class="w-full md:w-auto"/>
             <Button class="border border-light-35 dark:border-dark-35 max-w-48 w-full order-9 col-span-2 md:col-span-1 m-auto" :loading="status === 'pending'">S'inscrire</Button>
-            <span class="mt-4 order-10 flex justify-center items-center gap-4 col-span-2 md:col-span-1 m-auto">Vous avez déjà un compte ?<NuxtLink no-prefetch class="text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-login' }">Se connecter</NuxtLink></span>
+            <span class="mt-4 order-10 flex justify-center items-center gap-4 col-span-2 md:col-span-1 m-auto">Vous avez déjà un compte ?<NuxtLink class="text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-login' }">Se connecter</NuxtLink></span>
         </form>
     </div>
 </template>