switch to bun, also fetch reading list immediately

.github/workflows/deploy.yml

@@ -36,7 +36,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "18"
-          cache: "yarn"
+          cache: "bun"
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -49,10 +49,10 @@ jobs:
             ${{ runner.os }}-nuxt-build-
               
       - name: Install dependencies
-        run: yarn install
+        run: bun install
 
       - name: Static HTML export with Nuxt
-        run: yarn generate
+        run: bun generate
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2

components/BookShelfRenderer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Size, Info } from '~/components/BookCard.vue'
+import { Size, type Info } from '~/components/BookCard.vue'
 
 export interface Props {
     name: string,
@@ -19,9 +19,9 @@ function buildShelfURL(file: any) {
   return `${shelfBase}/${file}?limit=${limit}`
 }
 
-const { data, error, pending, refresh } = await useLazyFetch<any>(buildShelfURL(fileName))
+const data = await $fetch<any>(buildShelfURL(fileName))
 
-const infos: Info[] = data.value?.reading_log_entries.map((entry: any) => {
+const infos: Info[] = data?.reading_log_entries.map((entry: any) => {
     return {
         title: entry.work.title || "Unknown Title",
         cover_key: entry.work.cover_edition_key || undefined,
@@ -35,15 +35,8 @@ const infos: Info[] = data.value?.reading_log_entries.map((entry: any) => {
 
 <template>
     <section class="ring-2 p-4 rounded-md">
-        <h2 class="text-2xl mb-2">{{ name }} <span v-if="!pending && !error && infos">({{ infos.length }})</span></h2>
-        <div v-if="pending">
-            <p>Loading shelf...</p>
-        </div>
-        <div v-else-if="error">
-            <p>An error occurred loading the data for this shelf...</p>
-            <BodyLink to="#" @click="refresh" link-text="Try again" />
-        </div>
-        <div v-else :class="`grid grid-cols-${flooredColumnCount} gap-4`">
+        <h2 class="text-2xl mb-2">{{ name }} <span v-if="infos">({{ infos.length }})</span></h2>
+        <div :class="`grid grid-cols-${flooredColumnCount} gap-4`">
             <PaginatedBookCardRenderer :infos="infos" :image-size="imageSize" />
         </div>
     </section>

components/PaginatedBookCardRenderer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Size, Info } from '~/components/BookCard.vue'
+import { Size, type Info } from '~/components/BookCard.vue'
 
 export interface Props {
     infos: Info[],