From a294f7d3a24546fb9d2c40ca3992ecdfc93039d8 Mon Sep 17 00:00:00 2001 From: Santo Cariotti Date: Wed, 19 Oct 2022 11:51:02 +0200 Subject: Add prefetching using `nuxt-link` (#1) --- components/AdminSidebar.vue | 12 ++++++------ components/ModelBoxCard.vue | 6 +++--- components/ModelReportsList.vue | 4 ++-- components/Pagination.vue | 12 ++++++------ components/VHeader.vue | 18 +++++++++--------- components/VTable.vue | 8 ++++---- pages/models/_id/edit.vue | 2 +- pages/models/_id/index.vue | 10 +++++----- pages/signin.vue | 2 +- pages/signup.vue | 2 +- 10 files changed, 38 insertions(+), 38 deletions(-) diff --git a/components/AdminSidebar.vue b/components/AdminSidebar.vue index 0ad19fd..ad8e162 100644 --- a/components/AdminSidebar.vue +++ b/components/AdminSidebar.vue @@ -1,21 +1,21 @@ diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue index 0bb4419..c022577 100644 --- a/components/ModelBoxCard.vue +++ b/components/ModelBoxCard.vue @@ -2,7 +2,7 @@ .model.shadow-sm.rounded-lg.bg-white.p-4.w-full.h-80.duration-300( class="hover:ease-out hover:shadow-md dark:bg-gray-800 dark:text-white" ) - a(:href="'/models/'+model.id") + nuxt-link(:to="'/models/'+model.id") .image.bg-gray-900.rounded-xl.w-full.h-48.overflow-hidden file-preview( :path="model.uploads[0].filepath" @@ -12,12 +12,12 @@ .space-y-3.mt-5 h1.truncate.text-xl.font-medium - a(:href="'/models/'+model.id" class="hover:underline") {{ model.name }} + nuxt-link(:to="'/models/'+model.id" class="hover:underline") {{ model.name }} div .mr-3.float-left user-avatar(:data="model.author") p.leading-8.truncate - a.text-green-800(class="hover:text-green-700 dark:text-green-300 dark:hover:text-green-200" :href="'/user/'+model.author_id") + nuxt-link.text-green-800(class="hover:text-green-700 dark:text-green-300 dark:hover:text-green-200" :to="'/user/'+model.author_id") | @ span.underline {{ model.author.username }} diff --git a/components/ModelReportsList.vue b/components/ModelReportsList.vue index 7da07b1..f26845b 100644 --- a/components/ModelReportsList.vue +++ b/components/ModelReportsList.vue @@ -62,7 +62,7 @@ .mr-3.float-left(style="flex-shrink: 0;" class="sm:float-none") user-avatar(:data="warning.user") p.leading-8.ml-2(class="sm:ml-0") - a.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :href="'/user/'+warning.user.id") + nuxt-link.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :to="'/user/'+warning.user.id") | @ span.underline {{ warning.user.username }} p.leading-8.ml-0(class="sm:ml-5") {{ warning.note }} @@ -87,7 +87,7 @@ .mr-3.float-left(style="flex-shrink: 0;" class="sm:float-none") user-avatar(:data="warning.resolved") p.leading-8.ml-2(class="sm:ml-0") - a.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :href="'/user/'+warning.user.id") + nuxt-link.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :to="'/user/'+warning.user.id") | @ span.underline {{ warning.resolved.username }} p.leading-8.ml-0(class="sm:ml-5") {{ warning.admin_note }} diff --git a/components/Pagination.vue b/components/Pagination.vue index 7925ab0..9910281 100644 --- a/components/Pagination.vue +++ b/components/Pagination.vue @@ -3,21 +3,21 @@ nav(aria-label="Pagination") ul.flex.list-style-none.items-center.justify-center li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page < 1}") - a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800( - :href="(page == 0) ? '#' : (path ?? '/')+'?page='+incrPage(-1)" + nuxt-link.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800( + :to="(page == 0) ? '#' : (path ?? '/')+'?page='+incrPage(-1)" class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white" ) span.sr-only Previous svg.h-5.w-5(xmlns="http://www.w3.org/2000/svg", viewbox="0 0 20 20", fill="currentColor", aria-hidden="true") path(fill-rule="evenodd", d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clip-rule="evenodd") li.page-item(v-for="i in pages") - a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800( - :href="(path ?? '/')+'?page='+(i-1)" aria-current="page" + nuxt-link.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800( + :to="(path ?? '/')+'?page='+(i-1)" aria-current="page" :class="{'hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white': true, 'bg-green-500 text-green-50 hover:text-green-50': page == (i-1)}" ) {{ i-1 }} li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page == pages-1}") - a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800( - :href="(page == (pages-1)) ? '#' : (path ?? '/')+'?page='+incrPage(1)" + nuxt-link.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800( + :to="(page == (pages-1)) ? '#' : (path ?? '/')+'?page='+incrPage(1)" class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white" ) span.sr-only Next diff --git a/components/VHeader.vue b/components/VHeader.vue index 0814352..0a0938b 100644 --- a/components/VHeader.vue +++ b/components/VHeader.vue @@ -21,9 +21,9 @@ .hidden(class="sm:ml-6 sm:block") .flex.space-x-4 - a.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" href="/" aria-current="page") Home + nuxt-link.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" to="/" aria-current="page") Home .absolute.inset-y-0.right-0.flex.items-center.pr-2(class="sm:static sm:inset-auto sm:ml-6 sm:pr-0" v-if="isLogged") - a.leading-6.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="['hidden sm:flex', routeName == 'create-model' ? 'bg-green-900': 'text-gray-300']" href="/create" aria-current="page") + nuxt-link.leading-6.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="['hidden sm:flex', routeName == 'create-model' ? 'bg-green-900': 'text-gray-300']" to="/create" aria-current="page") @@ -40,34 +40,34 @@ class="focus:outline-none dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" v-if="boxUserInfo && me" ) - a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white sm:hidden" href="/create" role="menuitem" tabindex="-1") + nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white sm:hidden" to="/create" role="menuitem" tabindex="-1") | Create - a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" :href="'/user/'+me.id" role="menuitem" tabindex="-1") + nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" :to="'/user/'+me.id" role="menuitem" tabindex="-1") | Your Profile - a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" href="/admin" role="menuitem" tabindex="-1" v-if="me.is_staff") + nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" to="/admin" role="menuitem" tabindex="-1" v-if="me.is_staff") | Admin - a.flex.leanding-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" href="/settings" role="menuitem" tabindex="-1") + nuxt-link.flex.leanding-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" to="/settings" role="menuitem" tabindex="-1") | Settings - a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" href="#" role="menuitem" tabindex="-1" @click="logout") + nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" to="#" role="menuitem" tabindex="-1" @click="logout") | Sign out .absolute.inset-y-0.right-0.flex.items-center.pr-2(class="sm:static sm:inset-auto sm:ml-6 sm:pr-0" v-else) - a(href="/signin") + nuxt-link(to="/signin") button.text-white.flex.leading-6 @@ -75,7 +75,7 @@ | Sign #mobile-menu(class="sm:hidden" v-if="boxInfo") .space-y-1.px-2.pt-2.pb-3 - a.text-white.block.px-3.py-2.rounded-md.text-base.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" href="/" aria-current="page") Home + nuxt-link.text-white.block.px-3.py-2.rounded-md.text-base.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" to="/" aria-current="page") Home header.bg-white.shadow(v-if="pageName") .mx-auto.max-w-7xl.py-6.px-4(class="sm:px-6 lg:px-8") diff --git a/components/VTable.vue b/components/VTable.vue index db7a9ae..ef06393 100644 --- a/components/VTable.vue +++ b/components/VTable.vue @@ -25,7 +25,7 @@ path(stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12") span(v-else-if="name == 'avatar'") .block(class="sm:flex") - a.inline-block(:href="'/user/'+field.id" target="_blank") + nuxt-link.inline-block(:to="'/user/'+field.id" target="_blank") user-avatar(:data="field") a.text-red-500.ml-2.cursor-pointer( title="Delete this avatar" @@ -37,20 +37,20 @@ span(v-else-if="['author', 'user', 'resolved'].includes(name)") - a.inline-block(:href="'/user/'+field[name].id" target="_blank") + nuxt-link.inline-block(:to="'/user/'+field[name].id" target="_blank") user-avatar(:data="field[name]" v-if="field[name].username") span(v-else-if="name == 'created' || name == 'updated'") | {{ field[name]|moment("DD/MM/YYYY HH:mm") }} span(v-else-if="name == 'likes'") | {{ field.likes ? field.likes.length : 0 }} span(v-else-if="name == 'model_id'") - a.underline.text-green-500(:href="'/models/'+field.model_id" target="_blank") + nuxt-link.underline.text-green-500(:to="'/models/'+field.model_id" target="_blank") | {{ field[name] }} span(v-else :title="field[name]") {{ field[name] }} td.px-6.py-4.whitespace-nowrap.text-sm.text-gray-900(class="dark:text-white") .flex .mr-1(v-if="path") - a(:href="path + field.id" target="_blank") + nuxt-link(:to="path + field.id" target="_blank") svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6") path(stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244") .mr-1(v-if="editrow") diff --git a/pages/models/_id/edit.vue b/pages/models/_id/edit.vue index 0d707b9..cfc5c0d 100644 --- a/pages/models/_id/edit.vue +++ b/pages/models/_id/edit.vue @@ -1,7 +1,7 @@ | Report - a.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-gray-600.py-2.px-4.mr-2.text-sm.font-medium.text-white.shadow-sm( + nuxt-link.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-gray-600.py-2.px-4.mr-2.text-sm.font-medium.text-white.shadow-sm( class="hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2" - :href="'/models/'+model.id+'/edit'" v-if="me && (me.is_staff || me.id == model.author_id)" + :to="'/models/'+model.id+'/edit'" v-if="me && (me.is_staff || me.id == model.author_id)" ) @@ -208,7 +208,7 @@ path(fill-rule="evenodd", d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z", clip-rule="evenodd") span.ml-2.w-0.flex-1.truncate {{ getFileName(upload.filepath) }} .ml-4.flex-shrink-0 - a.font-medium.text-black-700(:href="baseAPI + '' + upload.filepath" target="_new" download class="hover:underline") Download + nuxt-link.font-medium.text-black-700(:to="baseAPI + '' + upload.filepath" target="_new" download class="hover:underline") Download diff --git a/pages/signin.vue b/pages/signin.vue index 455ef68..9fe5047 100644 --- a/pages/signin.vue +++ b/pages/signin.vue @@ -5,7 +5,7 @@ div h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900(class="dark:text-white") Sign in p.mt-2.text-center.text-sm.text-gray-600 Or - a.font-medium.text-indigo-600(class="hover:text-indigo-500 dark:text-gray-100 dark:hover:text-white" href="/signup") create a new account + nuxt-link.font-medium.text-indigo-600(class="hover:text-indigo-500 dark:text-gray-100 dark:hover:text-white" to="/signup") create a new account form.mt-8.space-y-6(method="POST") input(type="hidden" name="remember" value="true") .-space-y-px.rounded-md.shadow-sm diff --git a/pages/signup.vue b/pages/signup.vue index 09c5e27..6cfe8ed 100644 --- a/pages/signup.vue +++ b/pages/signup.vue @@ -5,7 +5,7 @@ div h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900(class="dark:text-white") Create a new account p.mt-2.text-center.text-sm.text-gray-600 Or - a.font-medium.text-indigo-600(class="hover:text-indigo-500 dark:text-gray-100 dark:hover:text-white" href="/signin") signin + nuxt-link.font-medium.text-indigo-600(class="hover:text-indigo-500 dark:text-gray-100 dark:hover:text-white" to="/signin") signin form.mt-8.space-y-6(method="POST") input(type="hidden" name="remember" value="true") .-space-y-px.rounded-md.shadow-sm -- cgit v1.2.3-18-g5258