naba-baseball · Twitch0125 · Sep 4, 2024 · Sep 5, 2024
diff --git a/app/app.vue b/app/app.vue
@@ -1,20 +1,22 @@
 <script lang="ts" setup>
 const { data: isOnboarding } = await useFetch('/api/preference', { params: { key: 'onboarding' }, key: 'onboarding' })
 const shouldRedirect = isOnboarding.value && useRoute().path !== '/onboarding'
-const id = useId()
-console.log('id', id)
 if (shouldRedirect)
   await navigateTo('/onboarding')
 </script>
 
 <template>
   <Head>
-    <Title>Naba data</Title>
+    <Title>Naba data app</Title>
     <Body class="dark:bg-gray-950 text-gray-800 dark:text-gray-200 mx-4" />
   </Head>
+  <NuxtPwaManifest />
   <NuxtLoadingIndicator />
+  <PwaPrompt />
   <NuxtLayout :name="isOnboarding ? 'onboarding' : 'default'">
-    <NuxtPage />
+    <ClientOnly>
+      <NuxtPage />
+    </ClientOnly>
   </NuxtLayout>
   <UNotifications />
 </template>
diff --git a/app/components/PwaPrompt.client.vue b/app/components/PwaPrompt.client.vue
@@ -0,0 +1,24 @@
+<script setup>
+// If you want to use it in setup, import from the nuxtApp.
+const { $pwa } = useNuxtApp()
+
+const toast = useToast()
+
+onMounted(() => {
+  if ($pwa.offlineReady)
+    toast.success('App ready to work offline')
+})
+</script>
+
+<template>
+  <!-- You can use $pwa directly in templates! -->
+  <div v-show="$pwa.needRefresh">
+    <span>
+      New content available, click on reload button to update.
+    </span>
+
+    <button @click="$pwa.updateServiceWorker()">
+      Reload
+    </button>
+  </div>
+</template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -5,7 +5,7 @@ async function logout() {
   location.reload()
 }
 const constantLinks = [{
-  to: '/teams',
+  to: '/',
   label: 'Home',
 }, {
   to: '/lineups',

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -1,7 +1,28 @@
 <script lang="ts" setup>
-navigateTo('/teams')
+const { teams } = useTeams()
+const sortedTeams = computed(() => teams.value.toSorted((a, b) => a.name.localeCompare(b.name)))
 </script>
 
 <template>
-  <div />
+  <div>
+    <h1>
+      Teams
+    </h1>
+    <ul class="grid sm:grid-cols-4 gap-4">
+      <li v-for="team in sortedTeams" :key="team.team_id">
+        <UCard>
+          <div class="flex flex-col gap-4 items-center">
+            <div>
+              <img class="size-16" width="64px" height="64px" placeholder :src="`https://nabaleague.com/images/team_logos/${team.logo_file_name}`">
+            </div>
+            <NuxtLink class="underline" :to="`/teams/${team.team_id}`">
+              <span> {{ team.name }} {{ team.nickname }} </span>
+            </NuxtLink>
+          </div>
+        </UCard>
+      </li>
+    </ul>
+  </div>
 </template>
+
+<style></style>
diff --git a/app/pages/teams/index.vue b/app/pages/teams/index.vue
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,9 +1,12 @@
+import { CacheFirst } from 'workbox-strategies'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   future: {
     compatibilityVersion: 4,
   },
   extends: 'github:naba-baseball/naba-base-layer/layer',
+  ssr: false,
   css: [
     '@/assets/css/main.css',
   ],
@@ -14,23 +17,14 @@ export default defineNuxtConfig({
     buildCache: true,
   },
   routeRules: {
-    '/api/teams/**': {
-      swr: 600,
-      cache: {
-        name: 'teams-cache',
-      },
+    '/teams': {
+      redirect: '/',
     },
-    '/api/players/**': {
-      swr: 600,
-      cache: {
-        name: 'players-cache',
-      },
+    '/': {
+      prerender: true,
     },
   },
   nitro: {
-    compressPublicAssets: {
-      brotli: true,
-    },
     experimental: {
       database: true,
     },
@@ -52,7 +46,55 @@ export default defineNuxtConfig({
       },
     },
   },
-  modules: [
-    '@formkit/auto-animate/nuxt',
-  ],
+  modules: ['@formkit/auto-animate/nuxt', '@vite-pwa/nuxt'],
+  pwa: {
+    registerType: 'prompt',
+    scope: '/',
+    workbox: {
+      globPatterns: ['**\/*.{js,json,css,html,png,jpg,jpeg,svg}'],
+      runtimeCaching: [{
+        urlPattern: ({ url }) => url.origin === 'http://localhost:3000' && (url.pathname.startsWith('/api/teams') || url.pathname.startsWith('/api/players')),
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'teams-players-cache',
+          cacheableResponse: {
+            statuses: [200],
+          },
+        },
+      }, {
+        urlPattern: ({ url }) => url.origin === 'https://api.iconify.design',
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'iconify-cache',
+          cacheableResponse: {
+            statuses: [200],
+          },
+        },
+      }],
+    },
+    manifest: {
+      name: 'NABA Data',
+      short_name: 'NABAData',
+      theme_color: '#ffffff',
+      icons: [
+        {
+          src: 'icon-black.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: 'icon-black.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+        {
+          src: 'icon-black.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable',
+        },
+      ],
+    },
+  },
+
 })
diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
     "@nuxt/ui": "^2.18.4",
     "@types/better-sqlite3": "^7.6.11",
     "@types/wicg-file-system-access": "^2023.10.5",
+    "@vite-pwa/assets-generator": "^0.2.5",
+    "@vite-pwa/nuxt": "^0.10.1",
     "@vueuse/core": "^11.0.3",
     "@vueuse/nuxt": "^11.0.3",
     "@vueuse/router": "^11.0.3",
@@ -39,4 +41,5 @@
     "typescript": "^5.5.4",
     "valibot": "^0.40.0"
   }
+
 }