Feat: optimize "other" things

frontend/app/app.vue

@@ -9,6 +9,16 @@ useHead({
     bodyAttrs: {
         class: 'antialiased',
     },
+    script: !import.meta.dev
+        ? [
+              {
+                  src: 'https://static.cloudflareinsights.com/beacon.min.js',
+                  'data-cf-beacon':
+                      '{"token": "bc00d4fde6fa404688e917b8ab6f6c3b"}',
+                  defer: true,
+              },
+          ]
+        : [],
 })
 useSeoMeta({
     title: 'Stream Finder - Discover Your Favorite Streams',
@@ -28,12 +38,8 @@ useSeoMeta({
 </script>
 <template>
     <UApp>
-        <Header />
-        <UMain>
-            <NuxtLayout>
-                <NuxtPage />
-            </NuxtLayout>
-        </UMain>
-        <UFooter />
+        <NuxtLayout>
+            <NuxtPage />
+        </NuxtLayout>
     </UApp>
 </template>

frontend/app/components/Header.vue

@@ -24,7 +24,7 @@ const items = computed(() => [
             <UButton
                 color="neutral"
                 variant="ghost"
-                to="https://github.com/KrystianOg/movie-multiplexer"
+                to="https://github.com/KrystianOg/stream-finder"
                 target="_blank"
                 icon="i-simple-icons-github"
                 aria-label="Github"

frontend/app/components/ShowCard.vue

@@ -66,9 +66,9 @@ const rating = computed(() => (props.rating / 10).toFixed(1))
                     alt=""
                     class="w-full h-full object-cover"
                     densities="x1 x2"
-                    format="webp"
                     :preload="isAboveFold"
                     :loading="isAboveFold ? 'eager' : 'lazy'"
+                    :fetchpriority="isAboveFold ? 'high' : 'low'"
                     @load="imageLoaded = true"
                 />
             </div>

frontend/app/components/ShowCardGrid.vue

@@ -34,14 +34,16 @@ watch(
         placeholder="Search..."
         class="my-4 w-full md:w-1/2"
     />
-    <UPageGrid>
-        <ShowCard
-            v-for="(show, index) in shows"
-            :key="show.id"
-            v-bind="show"
-            :index
-        />
-    </UPageGrid>
+    <main>
+        <UPageGrid>
+            <ShowCard
+                v-for="(show, index) in shows"
+                :key="show.id"
+                v-bind="show"
+                :index
+            />
+        </UPageGrid>
+    </main>
     <UButton
         v-if="data?.nextCursor"
         class="mt-6 bg-transparent border border-primary text-white w-full md:w-1/2 inline-block"

frontend/app/components/ShowDetail.vue

@@ -76,7 +76,7 @@ const episodeInfo = computed(() => {
                                 class="flex items-center gap-1"
                             >
                                 <UIcon
-                                    name="i-heroicons-star-solid"
+                                    name="i-lucide-star"
                                     class="text-yellow-400"
                                 />
                                 <span class="font-semibold"

frontend/app/layouts/default.vue

@@ -1,5 +1,9 @@
 <template>
-    <UContainer>
-        <slot />
-    </UContainer>
+    <Header />
+    <UMain>
+        <UContainer>
+            <slot />
+        </UContainer>
+    </UMain>
+    <UFooter />
 </template>

frontend/nuxt.config.ts

@@ -15,6 +15,7 @@ export default defineNuxtConfig({
         '@vueuse/nuxt',
         '@nuxt/icon',
         '@nuxt/image',
+        '@vite-pwa/nuxt',
     ],
     css: ['~/assets/main.css'],
     devtools: { enabled: true },
@@ -33,7 +34,12 @@ export default defineNuxtConfig({
                     type: 'image/svg+xml',
                     href: '/favicon.svg',
                 },
+                {
+                    rel: 'manifest',
+                    href: '/manifest.webmanifest',
+                },
             ],
+            meta: [{ name: 'theme-color', content: '#8b5cf6' }],
         },
     },
     sourcemap: true,
@@ -62,15 +68,15 @@ export default defineNuxtConfig({
             headers: {
                 'Content-Security-Policy': [
                     "default-src 'self'",
-                    "script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com",
+                    "script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://static.cloudflareinsights.com",
                     "style-src 'self' 'unsafe-inline'",
                     "img-src 'self' data: blob: https:",
                     "font-src 'self' data:",
-                    "connect-src 'self' https://streaming-availability.p.rapidapi.com",
+                    "connect-src 'self' https://streaming-availability.p.rapidapi.com https://cloudflareinsights.com",
+                    "manifest-src 'self'",
                     "frame-ancestors 'none'",
                     "base-uri 'self'",
                     "form-action 'self'",
-                    "require-trusted-types-for 'script'",
                 ].join('; '),
                 'Strict-Transport-Security':
                     'max-age=63072000; includeSubDomains; preload',
@@ -83,6 +89,21 @@ export default defineNuxtConfig({
             },
         },
     },
+    vite: {
+        build: {
+            rollupOptions: {
+                output: {
+                    manualChunks: {
+                        'floating-ui': [
+                            '@floating-ui/core',
+                            '@floating-ui/dom',
+                        ],
+                        'vue-runtime': ['@vue/runtime-core'],
+                    },
+                },
+            },
+        },
+    },
     nitro: {
         preset: 'cloudflare-pages',
         prerender: {
@@ -104,11 +125,74 @@ export default defineNuxtConfig({
                 ],
             },
         },
+        compressPublicAssets: true,
     },
     image: {
         domains: ['www.movieofthenight.com', 'cdn.movieofthenight.com'],
         cloudflare: {
             baseUrl: process.env.CLOUDFLARE_IMAGE_BASE_URL,
         },
     },
+    pwa: {
+        registerType: 'autoUpdate',
+        manifest: {
+            name: 'Stream Finder',
+            short_name: 'StreamFinder',
+            description: 'Find where to stream your favorite movies and series',
+            theme_color: '#8b5cf6',
+            background_color: '#1e1e2f',
+            display: 'standalone',
+            lang: 'en',
+            start_url: '/',
+            icons: [
+                // Android/Chrome
+                {
+                    src: '/android/android-launchericon-192-192.png',
+                    sizes: '192x192',
+                    type: 'image/png',
+                },
+                {
+                    src: '/android/android-launchericon-512-512.png',
+                    sizes: '512x512',
+                    type: 'image/png',
+                },
+                {
+                    src: '/android/android-launchericon-512-512.png',
+                    sizes: '512x512',
+                    type: 'image/png',
+                    purpose: 'maskable',
+                },
+                // iOS (Safari)
+                {
+                    src: '/ios/180.png',
+                    sizes: '180x180',
+                    type: 'image/png',
+                },
+            ],
+        },
+        workbox: {
+            navigateFallback: '/',
+            globPatterns: ['**/*.{js,css,html,png,jpg,jpeg,svg,ico,gif,woff2}'],
+            runtimeCaching: [
+                {
+                    urlPattern: /^https:\/\/api\..*/i,
+                    handler: 'NetworkFirst',
+                    options: {
+                        cacheName: 'api-cache',
+                        expiration: {
+                            maxEntries: 50,
+                            maxAgeSeconds: 60 * 60 * 24,
+                        },
+                    },
+                },
+            ],
+        },
+        devOptions: {
+            enabled: true,
+            type: 'module',
+        },
+    },
+    features: {
+        inlineStyles: true,
+    },
 })