feat: Update Tify component and page layout

- Update Tify component to use axios for fetching data
- Update page layout to display current page number and provide navigation buttons for previous and next pages

app.vue

@@ -1,7 +1,19 @@
 <template>
   <NuxtLayout>
-    <v-app>
-      <NuxtPage />
-    </v-app>
+    <v-responsive class="border rounded">
+      <v-app>
+        <v-app-bar>
+          <v-app-bar-title>東雲文庫/Shinonome Bunko</v-app-bar-title>
+          <v-btn
+            href="https://github.com/itsukikigoshi/shinonome-bunko"
+            icon="mdi-github"
+            target="_blank"
+          ></v-btn>
+        </v-app-bar>
+        <v-main>
+          <NuxtPage />
+        </v-main>
+      </v-app>
+    </v-responsive>
   </NuxtLayout>
 </template>

components/Tify.vue

@@ -7,9 +7,10 @@ export default {
       container: "#tify",
       manifestUrl: "https://www.dl.ndl.go.jp/api/iiif/1823865/manifest.json",
     });
+    // tify.setPage(5);
   },
 };
 </script>
 <template>
-  <div id="tify" style="height: 640px"></div>
+  <div id="tify" style="height: 80vh"></div>
 </template>

package.json

@@ -15,6 +15,7 @@
     "@nuxtjs/axios": "^5.13.6",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "axios": "^1.7.9",
     "core-js": "^3.40.0",
     "mirador": "^3.4.3",
     "mirador-image-tools": "^0.11.0",

pages/index.vue

@@ -1,44 +1,73 @@
-<script setup>
-const items = [
-  'Item 1',
-  'Item 2',
-  'Item 3',
-  'Item 4',
-]
+<script>
+import axios from 'axios';
+import "tify";
+import "tify/dist/tify.css";
+
+export default {
+data() {
+    return {
+      text: '',
+      items: ['master', 'develop'],
+      page: 1,
+      tify: null
+    };
+  },
+  methods: {
+    async fetchData() {
+      try {
+        // TODO - ページ更新ごとにfetchするのは非効率なので、キャッシュする
+        // APIのURLにGETリクエストを送信
+        const response = await axios.get('https://lab.ndl.go.jp/dl/api/book/fulltext-json/1823865');
+        const object = response.data.list.find(item => item.page === this.page);
+        console.log(JSON.stringify(object.contents));
+        // APIから返ってきたデータをtextにセット
+        // this.text = JSON.stringify(response.data);
+        this.text = object.contents;
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    },
+    changePage(page) {
+      this.fetchData();
+      this.tify.setPage(page);
+    },
+  },
+  mounted() {
+    this.fetchData();
+    this.tify = new Tify({
+      manifestUrl: "https://www.dl.ndl.go.jp/api/iiif/1823865/manifest.json",
+      viewer: {
+        immediateRender: false,
+      },
+    });
+    this.tify.mount('#tify');
+  }
+}
 </script>
 <template>
-  <v-responsive class="border rounded">
-    <v-app>
-      <v-app-bar>
-        <v-app-bar-title>東雲文庫/Shinonome Bunko</v-app-bar-title>
-        <v-btn
-        href="https://github.com/itsukikigoshi/shinonome-bunko"
-        icon="mdi-github"
-        target="_blank"
-        ></v-btn>
-      </v-app-bar>
-      <v-main>
-        <v-container>
-          <v-row>
-            <v-col cols="8">
-              <Tify />
-            </v-col>
-            <v-col cols="4">
-              <form>
-                <v-text-field label="DOI" model-value="10.11501/1823865" readonly></v-text-field>
-                <v-text-field label="Title" model-value="蝸牛考 (言語誌叢刊)" readonly></v-text-field>
-                <v-select
-                    :items="items"
-                    label="Branch"
-                ></v-select>
-                <v-textarea auto-grow label="Text"></v-textarea>
-                <v-text-field label="Commit Message"></v-text-field>
-                <v-btn>Commit</v-btn>
-              </form>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-main>
-    </v-app>
-  </v-responsive>
+
+  <v-container>
+    <v-row>
+      <v-col cols="8">
+        <p>Current Page: {{ this.page }}</p>
+          <div id="tify" style="height: 80vh"></div>                
+          <v-btn @click="page += 1; changePage(this.page);">Next</v-btn>
+        <v-btn @click="page -= 1; changePage(this.page);">Previous</v-btn>    
+      </v-col>
+      <v-col cols="4">
+        <form>
+          <v-text-field label="DOI" model-value="10.11501/1823865" readonly></v-text-field>
+          <v-text-field label="Title" model-value="蝸牛考 (言語誌叢刊)" readonly></v-text-field>
+          <v-select
+              :items="items"
+              label="Branch"
+          ></v-select>
+          <v-textarea label="Text" :model-value="text"
+          ></v-textarea>
+          <v-text-field label="Commit Message"></v-text-field>
+          <v-btn>Commit</v-btn>
+        </form>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>

yarn.lock

@@ -1938,6 +1938,11 @@ async@^3.2.4:
   resolved "https://registry.npmjs.org/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
   integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 autoprefixer@^10.4.20:
   version "10.4.20"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
@@ -1965,6 +1970,15 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^1.7.9:
+  version "1.7.9"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz#d7d071380c132a24accda1b2cfc1535b79ec650a"
+  integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 b4a@^1.6.4:
   version "1.6.7"
   resolved "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz#a99587d4ebbfbd5a6e3b21bdb5d5fa385767abe4"
@@ -2284,6 +2298,13 @@ colorette@^1.2.0:
   resolved "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
   integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 comma-separated-tokens@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
@@ -2629,6 +2650,11 @@ defu@^6.1.4:
   resolved "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
   integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 denque@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz#e93e1a6569fb5e66f16a3c2a2964617d349d6ab1"
@@ -3056,7 +3082,7 @@ flatted@^3.3.2:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
   integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.15.6:
   version "1.15.9"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
   integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
@@ -3069,6 +3095,15 @@ foreground-child@^3.1.0:
     cross-spawn "^7.0.0"
     signal-exit "^4.0.1"
 
+form-data@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
+  integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fraction.js@^4.3.7:
   version "4.3.7"
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
@@ -4643,6 +4678,18 @@ micromatch@^4.0.2, micromatch@^4.0.5, micromatch@^4.0.8:
     braces "^3.0.3"
     picomatch "^2.3.1"
 
+[email protected]:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 [email protected]:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@@ -5674,6 +5721,11 @@ protocols@^2.0.0, protocols@^2.0.1:
   resolved "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
   integrity sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 pump@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz#836f3edd6bc2ee599256c924ffe0d88573ddcbf8"