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 ++++---- 6 files changed, 30 insertions(+), 30 deletions(-) (limited to 'components') 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") -- cgit v1.2.3-18-g5258