Add some page caching to the frontend

frontend/base/components/layout/LayoutHeaderMenu.vue

@@ -3,10 +3,11 @@ import type { MenuAvailable } from '#build/graphql-operations'
 
 const { locale } = useI18n()
 const localePath = useLocalePath()
+const user = await useAuth()
 
 const route = useRoute()
 
-const { data: menu, refresh } = await useAsyncData(
+const { data: menu } = await useAsyncData(
   'menu',
   async () => await useGraphqlQuery(
     'menu',
@@ -15,12 +16,8 @@ const { data: menu, refresh } = await useAsyncData(
       langcode: locale.value,
     },
   ),
-)
-
-watch(
-  () => locale.value,
-  async () => {
-    await refresh()
+  {
+    watch: [locale, () => user],
   },
 )
 

frontend/base/nuxt.config.ts

@@ -35,9 +35,15 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
+    '/**': {
+      cache: {
+        maxAge: process.env.NODE_ENV === 'development' ? 0 : 60,
+      },
+    },
     '/api/**': {
       robots: false,
       sitemap: false,
+      cache: false,
       cors: true,
     },
     '/preview/**': {

frontend/themes/default/components/base/BaseSelect.vue

@@ -25,19 +25,28 @@ const model = defineModel()
 </script>
 
 <template>
-  <select
-    :id="id"
-    v-model="model"
-    :aria-label="label"
-    class="bg-white dark:bg-stone-950"
+  <div
+    class="relative flex items-center"
   >
-    <option
-      v-for="option in options"
-      :key="option.value"
-      :value="option.value"
-      :selected="model === option.value"
+    <select
+      :id="id"
+      v-model="model"
+      :aria-label="label"
+      class="px-2 py-1 pr-6 bg-white rounded-lg appearance-none dark:bg-stone-950"
     >
-      {{ option.label }}
-    </option>
-  </select>
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        :selected="model === option.value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+
+    <Icon
+      name="mdi:chevron-up-down"
+      class="absolute w-4 h-4 right-1"
+    />
+  </div>
 </template>

frontend/themes/default/components/layout/LayoutFooter.vue

@@ -4,7 +4,7 @@ const config = useRuntimeConfig()
 
 <template>
   <footer class="bg-white dark:bg-stone-950">
-    <div class="flex justify-between max-w-6xl px-4 py-8 m-auto text-gray-600 dark:text-gray-400 md:px-8">
+    <div class="flex items-center justify-between max-w-6xl px-4 py-8 m-auto text-gray-600 dark:text-gray-400 md:px-8">
       <span class="text-sm">
         {{ config.public.siteName }} &copy; {{ new Date().getFullYear() }}
       </span>

frontend/themes/default/components/layout/LayoutHeader.vue

@@ -12,7 +12,7 @@ const localePath = useLocalePath()
     >
       <div class="flex items-center gap-6">
         <NuxtLink
-          class="flex items-center gap-2 text-xl md:text-2xl"
+          class="flex items-center gap-4 text-xl md:gap-6 md:text-2xl"
           :to="localePath('/')"
         >
           <NuxtImg

frontend/themes/default/components/layout/LayoutHeaderMenu.vue

@@ -3,10 +3,11 @@ import type { MenuAvailable } from '#build/graphql-operations'
 
 const { locale } = useI18n()
 const localePath = useLocalePath()
+const user = await useAuth()
 
 const route = useRoute()
 
-const { data: menu, refresh } = await useAsyncData(
+const { data: menu } = await useAsyncData(
   'menu',
   async () => await useGraphqlQuery(
     'menu',
@@ -15,12 +16,8 @@ const { data: menu, refresh } = await useAsyncData(
       langcode: locale.value,
     },
   ),
-)
-
-watch(
-  () => locale.value,
-  async () => {
-    await refresh()
+  {
+    watch: [locale, () => user],
   },
 )