chore(deps): update nuxt

.github/workflows/playwright.yml

@@ -17,8 +17,8 @@ jobs:
     #   run:
     #     shell: bash
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4.2.2
+    - uses: actions/setup-node@v4.1.0
     - name: Install dependencies
       run: yarn install
     - name: Build
@@ -27,7 +27,7 @@ jobs:
       run: yarn playwright install --with-deps
     - name: Run Playwright tests
       run: yarn playwright test
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4.4.3
       if: always()
       with:
         name: playwright-report

.yarnrc.yml

@@ -1,7 +1,7 @@
+checksumBehavior: update
+
 defaultSemverRangePrefix: ""
 
 nodeLinker: node-modules
 
-checksumBehavior: update
-
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

app.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <!-- <VitePwaManifest /> -->
+    <NuxtPwaAssets />
     <!-- <OgImageStatic /> -->
     <NuxtLoadingIndicator />
     <NuxtPage />
@@ -16,6 +16,7 @@ const i18nHead = useLocaleHead({
 useHead({
   htmlAttrs: {
     lang: i18nHead.value.htmlAttrs!.lang,
+    class: 'font-sans',
   },
   link: [...(i18nHead.value.link ?? [])],
   meta: [...(i18nHead.value.meta ?? [])],

assets/scss/vuetify.scss → assets/css/main.css

@@ -1,69 +1,25 @@
-$body-font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-  Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-
-$code-font-family: Consolas, Roboto Mono, monospace;
-
-@import '~vuetify/src/styles/styles.sass';
 @import '~/assets/css/print.css' print;
 
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-bottom: 0.5rem;
-  font-family: inherit;
-  font-weight: 500;
-  line-height: 1.2;
-  color: inherit;
-
-  text-transform: uppercase;
-  letter-spacing: 3px;
-}
-
 .h1,
 h1 {
-  font-size: 2.5rem;
+  font-size: 2em;
+  line-height: 1;
 }
 .h2,
 h2 {
-  font-size: 2rem;
-}
-.h3,
-h3 {
-  font-size: 1.5rem;
-}
-
-.h4,
-h4 {
-  font-size: 1.5rem;
+  font-size: 1.5em;
 }
 
 /*
  *  Scroll bar
  */
 
-// ::-webkit-scrollbar-track {
-//   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-//   // border-radius: 10px;
-//   background-color: #f5f5f5;
-// }
-
 ::-webkit-scrollbar {
   width: 12px;
   background-color: #f5f5f5;
 }
 
 ::-webkit-scrollbar-thumb {
-  // border-radius: 10px;
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #555;
 }
@@ -73,6 +29,11 @@ h4 {
   all: unset;
 }
 
+.v-list-item-subtitle,
+.v-card-subtitle {
+  opacity: 90% !important;
+}
+
 .nuxt-content-highlight {
   font-size: 16px;
   position: relative;
@@ -119,7 +80,7 @@ h4 {
   list-style-type: disc;
   margin-block-start: 1em;
   margin-block-end: 1em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   padding-inline-start: 40px;
 }

components/Pagination.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="pages > 1"
+    className="flex justify-center gap-6 pb-16 items-center w-full"
+  >
+    <Component
+      :is="page <= 1 ? 'div' : NuxtLink"
+      :custom="page <= 1"
+      :to="page > 1 ? { query: { page: page - 1 } } : undefined"
+      :aria-label="page > 1 ? 'Previous page' : undefined"
+      class="relative mr-2 no-underline w-12 h-12 flex items-center m-1 group justify-center text-black"
+      :class="[page <= 1 ? 'opacity-30' : 'hover:-translate-x-1']"
+    >
+      <div
+        class="absolute inset-0 opacity-0 !group-hover:opacity-5 bg-current pointer-events-none rounded"
+      ></div>
+      <Icon name="material-symbols:chevron-left" class="w-6 h-6" />
+    </Component>
+    <NuxtLink
+      v-for="n in pages"
+      :key="n"
+      :to="{ query: { page: n } }"
+      class="relative no-underline w-12 h-12 flex items-center justify-center group m-1 text-black"
+      :class="{
+        'opacity-30 !hover:opacity-100': page !== n,
+      }"
+    >
+      <div
+        class="absolute inset-0 opacity-0 !group-hover:opacity-5 bg-current pointer-events-none rounded"
+      ></div>
+      {{ n }}
+      <hr
+        v-if="page === n"
+        className="absolute bottom-3 left-1/2 w-6 -translate-x-1/2 transform"
+      />
+    </NuxtLink>
+    <Component
+      :is="page >= pages ? 'div' : NuxtLink"
+      :custom="page >= pages"
+      :to="page <= pages ? { query: { page: page + 1 } } : undefined"
+      :aria-label="page <= pages ? 'Next page' : undefined"
+      class="relative ml-2 no-underline w-12 h-12 flex items-center group m-1 justify-center text-black"
+      :class="[page >= pages ? 'opacity-30' : 'hover:translate-x-1']"
+    >
+      <div
+        class="absolute inset-0 opacity-0 !group-hover:opacity-5 bg-current pointer-events-none rounded"
+      ></div>
+      <Icon name="material-symbols:chevron-right" class="w-6 h-6" />
+    </Component>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NuxtLink } from '#components';
+const { page, pages } = defineProps({
+  pages: {
+    type: Number,
+    default: 0,
+  },
+  page: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>

components/base/BusinessContact.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-theme-provider :dark="dark">
+  <v-theme-provider>
     <div>
       <BaseInfoCard :title="title" align="left" color="primary" :level="2">
         <slot></slot>

components/base/BusinessInfo.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-theme-provider :dark="dark">
-    <base-business-contact title="Get in Touch" pace="6">
+  <v-theme-provider>
+    <base-business-contact title="Get in Touch">
       Please feel free to reach out to us with your questions and comments.
     </base-business-contact>
   </v-theme-provider>

components/base/Icon.vue

@@ -3,6 +3,7 @@
     style="font-size: 2em; width: 32px; height: 32px"
     :style="{ color: color }"
     :name="icon"
+    mode="svg"
   ></Icon>
 </template>
 

components/base/InfoCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-theme-provider :dark="dark">
+  <v-theme-provider>
     <v-container class="pa-0" v-bind="$attrs">
       <v-row :justify="justify" no-gutters>
         <v-col v-if="icon" :class="`text-${align}`" cols="12" class="mb-4">

components/base/Links.vue

@@ -10,6 +10,7 @@
       :data-domain="domain(item.href)"
       :data-tel="tel(item.href)"
       :active="false"
+      :aria-selected="undefined"
       class="text-decoration-none"
     >
       <template #prepend>

components/base/TooltipButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tooltip location="top">
+  <v-tooltip location="top" :aria-label="tooltip">
     <template #activator="{ props }">
       <v-btn
         icon

components/blog-card.vue

@@ -18,6 +18,7 @@
       fit="cover"
       loading="lazy"
       sizes="xs:100vw sm:50vw md:33vw lg:33vw xl:33vw"
+      :alt="name"
       :img-attrs="{
         style: {
           'object-fit': 'cover',

components/data-iterator.vue

@@ -23,6 +23,12 @@
       v-if="loading && !items?.length"
       class="mx-auto h-64px w-64px block"
     ></Spinner>
+    <div
+      v-else-if="!loading && !items?.length"
+      class="flex items-center justify-center"
+    >
+      No items found
+    </div>
     <v-container v-else fluid>
       <v-row>
         <v-col
@@ -39,7 +45,7 @@
         </v-col>
       </v-row>
       <v-row>
-        <v-card v-intersect="infiniteScrolling"></v-card>
+        <Pagination :page="page" :pages="numberOfPages"></Pagination>
       </v-row>
     </v-container>
   </div>
@@ -51,6 +57,7 @@ export default {
   props: {
     items: { type: Array, default: () => [] },
     loading: { type: Boolean, default: null },
+    total: { type: Number, default: 0 },
   },
   data() {
     return {
@@ -68,7 +75,17 @@ export default {
   },
   computed: {
     numberOfPages() {
-      return Math.ceil(this.items.length / this.query.itemsPerPage);
+      return Math.ceil(this.total / this.query.itemsPerPage);
+    },
+    page: {
+      get() {
+        return this.query.page ?? 1;
+      },
+      set(page) {
+        if (page <= this.numberOfPages && page >= 0) {
+          this.query = { ...this.query, page };
+        }
+      },
     },
     query: {
       get() {
@@ -105,7 +122,7 @@ export default {
         if (
           (_value.itemsPerPage && !Number.isInteger(_value.itemsPerPage)) ||
           (_value.itemsPerPage === -1 &&
-            this.items.length < this.defaultQuery.itemsPerPage)
+            this.total < this.defaultQuery.itemsPerPage)
         ) {
           _value.itemsPerPage = this.defaultQuery.itemsPerPage;
         }
@@ -148,7 +165,7 @@ export default {
           this.query.itemsPerPage !== -1
             ? this.query.itemsPerPage + 24
             : this.query.itemsPerPage;
-        const itemsPerPage = next >= this.items.length ? -1 : next;
+        const itemsPerPage = next >= this.total ? -1 : next;
         if (this.query.itemsPerPage !== itemsPerPage) {
           this.query = {
             ...this.query,

components/feature.vue

@@ -8,12 +8,14 @@
       :src="image"
       :width="imageWidth"
       :height="imageHeight"
+      :alt="name"
       class="flex-grow-0 max-w-full h-auto"
       crossorigin="anonymous"
       itemprop="image"
       :fit="imageFit"
       loading="lazy"
-      sizes="xs:100vw sm:50vw md:33vw lg:33vw xl:33vw"
+      sizes="xs:100vw sm:50vw md:33vw lg:33vw xl:25vw"
+      :style="{ aspectRatio: `${imageWidth}/${imageHeight}` }"
       :img-attrs="{
         style: {
           'object-fit': 'cover',

components/hero.vue

@@ -115,7 +115,7 @@ export default {
       ogImageHeight: props.height,
       ogImageWidth: props.width,
     });
-    defineOgImageStatic({
+    defineOgImage({
       component: 'CustomBanner',
       backgroundImage: ogImage,
     });

components/layout/the-footer.vue

@@ -31,6 +31,7 @@
               :key="item.name"
               :to="localePath(item.route)"
               :active="false"
+              :aria-selected="undefined"
               class="text-decoration-none"
             >
               <template #prepend>
@@ -54,6 +55,7 @@
               :key="item.name"
               :to="localePath(item.route)"
               :active="false"
+              :aria-selected="undefined"
               class="text-decoration-none"
             >
               <template #prepend>

components/price-range.vue

@@ -9,8 +9,7 @@
     <template
       v-if="(priceSame || priceMin.price === 0) && priceMax.price !== 0"
     >
-      <!-- eslint-disable-next-line vue/no-lone-template -->
-      <template>&nbsp;</template>
+      &nbsp;
       {{ priceMax.currency || 'USD' }}
 
       <template v-if="priceMax.interval">/ {{ priceMax.interval }}</template>