✨ Support keyboard navigation

nuxt.config.ts

@@ -10,5 +10,5 @@ export default defineNuxtConfig({
     sessionSecret: process.env.SESSION_SECRET || "00000000-0000-0000-0000-000000000000",
   },
   devtools: { enabled: true },
-  modules: ["@nuxt/ui", "@nuxt/eslint", "@pinia/nuxt", "@wagmi/vue/nuxt"],
+  modules: ["@nuxt/ui", "@nuxt/eslint", "@pinia/nuxt", "@wagmi/vue/nuxt", "@vueuse/nuxt"],
 })

package.json

@@ -15,6 +15,8 @@
     "@nuxt/ui": "^2.17.0",
     "@pinia/nuxt": "^0.5.3",
     "@tanstack/vue-query": "^5.51.9",
+    "@vueuse/core": "^11.0.0",
+    "@vueuse/nuxt": "^11.0.0",
     "@wagmi/vue": "^0.0.32",
     "epubjs": "^0.3.93",
     "ethers": "^6.13.2",

pages/index.vue

@@ -51,10 +51,10 @@
         </template>
       </AppPageHeader>
 
-      <div class="relative flex-grow">
+      <div class="relative flex-grow bg-white">
         <div
           ref="renditionEl"
-          class="absolute inset-0"
+          class="absolute inset-6"
         />
 
         <div
@@ -74,15 +74,15 @@
             icon="i-heroicons-chevron-left"
             variant="soft"
             size="sm"
-            :ui="{ base: 'h-full lg:h-auto' }"
+            :ui="{ base: 'max-lg:w-6 max-lg:h-full' }"
             @click="prevPage"
           />
           <UButton
             class="pointer-events-auto"
             icon="i-heroicons-chevron-right"
             variant="soft"
             size="sm"
-            :ui="{ base: 'h-full lg:h-auto' }"
+            :ui="{ base: 'max-lg:w-6 max-lg:h-full' }"
             @click="nextPage"
           />
         </div>
@@ -202,4 +202,29 @@ function nextPage() {
 function prevPage() {
   rendition.value?.prev();
 }
+
+useEventListener("keydown", (event) => {
+  switch (event.key) {
+    case "ArrowRight":
+    case "ArrowDown":
+      nextPage();
+      break;
+
+    case "ArrowLeft":
+    case "ArrowUp":
+      prevPage();
+      break;
+    
+    case "Space":
+      if (event.shiftKey) {
+        prevPage();
+      } else {
+        nextPage();
+      }
+      break;
+
+    default:
+      break;
+  }
+});
 </script>

yarn.lock

@@ -2789,6 +2789,16 @@
     "@vueuse/shared" "10.11.0"
     vue-demi ">=0.14.8"
 
+"@vueuse/[email protected]", "@vueuse/core@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-11.0.0.tgz#bdbbc22dfec1026c4538aec5caa44f9babce5faf"
+  integrity sha512-shibzNGjmRjZucEm97B8V0NO5J3vPHMCE/mltxQ3vHezbDoFQBMtK11XsfwfPionxSbo+buqPmsCljtYuXIBpw==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "11.0.0"
+    "@vueuse/shared" "11.0.0"
+    vue-demi ">=0.14.10"
+
 "@vueuse/integrations@^10.11.0":
   version "10.11.0"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.11.0.tgz#ce2746587172af9ab8faa713f42e619609ed0de1"
@@ -2811,13 +2821,36 @@
   resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.11.0.tgz#27be47cf115ee98e947a1bfcd0b1b5b35d785fb6"
   integrity sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==
 
+"@vueuse/[email protected]":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-11.0.0.tgz#a23cd3ce64c9b7b3575b7b900c209234f5e37c6c"
+  integrity sha512-0TKsAVT0iUOAPWyc9N79xWYfovJVPATiOPVKByG6jmAYdDiwvMVm9xXJ5hp4I8nZDxpCcYlLq/Rg9w1Z/jrGcg==
+
+"@vueuse/nuxt@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/nuxt/-/nuxt-11.0.0.tgz#96ce8319d676503aacc2f0edfc362c0049f574d2"
+  integrity sha512-mkfB2ZCMQqkMvMm2apV9K0stU937b3rC7/S5dw9i4b87e5mTLbGshKLa7ASP+55mRxbbKp7YkU1Y5+P8zFWhuQ==
+  dependencies:
+    "@nuxt/kit" "^3.12.4"
+    "@vueuse/core" "11.0.0"
+    "@vueuse/metadata" "11.0.0"
+    local-pkg "^0.5.0"
+    vue-demi ">=0.14.10"
+
 "@vueuse/[email protected]":
   version "10.11.0"
   resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.11.0.tgz#be09262b2c5857069ed3dadd1680f22c4cb6f984"
   integrity sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==
   dependencies:
     vue-demi ">=0.14.8"
 
+"@vueuse/[email protected]":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-11.0.0.tgz#fef37f3fe5366b3ffd272c5012d07faf48f52c87"
+  integrity sha512-i4ZmOrIEjSsL94uAEt3hz88UCz93fMyP/fba9S+vypX90fKg3uYX9cThqvWc9aXxuTzR0UGhOKOTQd//Goh1nQ==
+  dependencies:
+    vue-demi ">=0.14.10"
+
 "@wagmi/[email protected]":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@wagmi/connectors/-/connectors-5.1.0.tgz#2d5135a628cb992196cda8afd42a3aed23cece30"
@@ -9175,16 +9208,16 @@ vue-bundle-renderer@^2.1.0:
   dependencies:
     ufo "^1.5.3"
 
+vue-demi@>=0.14.10, vue-demi@^0.14.10:
+  version "0.14.10"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
+
 vue-demi@>=0.14.8:
   version "0.14.8"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a"
   integrity sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==
 
-vue-demi@^0.14.10:
-  version "0.14.10"
-  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
-  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
-
 vue-demi@^0.14.7:
   version "0.14.9"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.9.tgz#db2be43705e2bc8501f01ca6163e34ada2f2eb21"