fix

public/index.html

@@ -19,7 +19,6 @@
 
 		<link href="https://syui.ai/js/comment/app.js" rel="preload" as="script">
 		<link href="https://syui.ai/js/comment/chunk-vendors.js" rel="preload" as="script">
-		<div id="comment"></div>
 		<script src="https://syui.ai/js/comment/chunk-vendors.js"></script>
 		<script src="https://syui.ai/js/comment/app.js"></script>
 

public/json/manga.json

@@ -3,12 +3,14 @@
 		"id": 0,
 		"end": 21,
 		"updated_at": "2021-07-11T00:00:00+09:00",
+		"comment": "特別編",
 		"dir": "0"
 	},
 	{
 		"id": 1,
 		"end": 6,
 		"updated_at": "2024-05-01T00:00:00+09:00",
+		"comment": "1話",
 		"dir": "1"
 	}
 ]

src/App.vue

@@ -2,6 +2,61 @@
 	<div id="app">
 		<link rel="stylesheet" href="https://syui.ai/bower_components/icomoon/style.css" />
 		<link rel="stylesheet" href="https://syui.ai/bower_components/font-awesome/css/all.min.css" />
+
+		<div class="page" v-if="m.data && loc_dir !== '' && m.data.find((v) => v.id == loc_dir) !== undefined">
+			<hooper :settings="hooperSettings">
+				<slide v-for="(n,index) in m.data.find((v) => v.id == loc_dir).end" :key="n">
+					<div v-if="loading" class="loading">
+						<i class="fa-solid fa-spinner fa-spin-pulse"></i>
+					</div>
+					<img :src="url + 'wa/' + loc_dir + '/' + (index) +'.png'" @load="load" />
+					<div class="page_n"><a href="/"><span class="icon-ai"></span></a>{{ index }}</div>
+				</slide>
+				<hooper-navigation slot="hooper-addons"></hooper-navigation>
+				<hooper-pagination slot="hooper-addons"></hooper-pagination>
+				<hooper-progress slot="hooper-addons"></hooper-progress>
+			</hooper>
+			<div id="comment"></div>
+			<div class="page_data">
+				<table>
+					<thead>
+						<tr>
+							<th scope="col">manga</th>
+							<th scope="col">ver</th>
+							<th scope="col">day</th>
+							<th scope="col">cmt</th>
+						</tr>
+					</thead>
+
+					<tbody v-for="i in m.data">
+						<tr v-if="i.id >= 1">
+							<th>
+								<a :href="'/' + i.id"><img :src="'/wa/' + i.dir + '/0.png'"></a>
+							</th>
+							<td>{{ i.id }}</td>
+							<td v-if="i.updated_at">{{ moment(i.updated_at) }}</td>
+							<td v-if="i.comment">{{ i.comment }}</td>
+							<td v-else>-</td>
+						</tr>
+					</tbody>
+
+					<tbody v-for="i in m.data">
+						<tr v-if="i.id == 0">
+							<th>
+								<a :href="'/' + i.id"><img :src="'/wa/' + i.dir + '/0.png'"></a>
+							</th>
+							<td>{{ i.id }}</td>
+							<td v-if="i.updated_at">{{ moment(i.updated_at) }}</td>
+							<td v-if="i.comment">{{ i.comment }}</td>
+							<td v-else>-</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+		</div>
+
+		<div class="page" v-if="loc === ''">
 			<hooper :settings="hooperSettings">
 				<slide v-for="(n,index) of products" :key="n">
 					<div v-if="loading" class="loading">
@@ -15,7 +70,6 @@
 				<hooper-progress slot="hooper-addons"></hooper-progress>
 			</hooper>
 
-		<div class="page" v-if="loc === ''">
 			<div class="page_data">
 				<table>
 					<thead>
@@ -23,27 +77,45 @@
 							<th scope="col">manga</th>
 							<th scope="col">ver</th>
 							<th scope="col">day</th>
+							<th scope="col">cmt</th>
 						</tr>
 					</thead>
 
 					<tbody v-for="i in m.data">
-						<tr>
+						<tr v-if="i.id >= 1">
 							<th>
-								<a :href="'?dir=' + i.dir + '&end=' + i.end"><img :src="'/wa/' + i.dir + '/0.png'"></a>
+								<a :href="'/' + i.id"><img :src="'/wa/' + i.dir + '/0.png'"></a>
 							</th>
 							<td>{{ i.id }}</td>
-							<td>{{ moment(i.updated_at) }}</td>
+							<td v-if="i.updated_at">{{ moment(i.updated_at) }}</td>
+							<td v-if="i.comment">{{ i.comment }}</td>
+							<td v-else>-</td>
+						</tr>
+					</tbody>
+
+					<tbody v-for="i in m.data">
+						<tr v-if="i.id == 0">
+							<th>
+								<a :href="'/' + i.id"><img :src="'/wa/' + i.dir + '/0.png'"></a>
+							</th>
+							<td>{{ i.id }}</td>
+							<td v-if="i.updated_at">{{ moment(i.updated_at) }}</td>
+							<td v-if="i.comment">{{ i.comment }}</td>
+							<td v-else>-</td>
 						</tr>
 					</tbody>
 				</table>
 			</div>
+
 		</div>
 
+		<!--
 		<div class="comment" v-if="loc === ''">
 			<div class="bsky_comment_embed">
 				<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:4hqjfn7m6n5hno3doamuhgef/app.bsky.feed.post/3kp5qn72s232q" data-bluesky-cid="bafyreiewdfyh6rywpkdzpmf5markqa6tavc5smc32q7cw2wpwbqik5hnfm"></blockquote>
 			</div>
 		</div>
+		-->
 
 	</div>
 </template>
@@ -62,8 +134,9 @@ import axios from 'axios'
 import moment from "moment";
 import fs from 'fs';
 
-var page = 21;
+var page = 6;
 var loc = window.location.pathname.split('/').slice(-1)[0];
+var loc_dir = window.location.pathname.split('/')[1];
 //let loc = window.location.pathname.split('/').slice(0)[3];
 
 const parameters = {}
@@ -85,33 +158,33 @@ export default {
 					loc: window.location.pathname.split('/').slice(-1)[0],
 					bsky_pds: "https://bsky.social/xrpc",
 					bsky_handle: "yui.syui.ai",
-					bsky_cursor: null,
+					bsky_cursor: "",
 					bsky_cid: "",
-					bsky_json: null,
+					bsky_json: "",
-					api_url: null,
+					api_url: "",
-					api_json: null,
+					api_json: "",
 					comment_open: false,
-					comment_first: null,
+					comment_first: "",
 					loading: true,
 					avatar_url: "",
-					f: null,
+					f: "",
 					url_check: true,
 					url: "/",
 					start: 0,
 					end: 21,
-					dir: "wa/0",
+					dir: "wa/1",
 					s_a: 0,
 					s_b: 2,
 					s_c: 41,
 					s_d: 51,
 					s_e: 60,
-					m: null,
+					m: "",
 					loc_manga: new URL(window.location.href),
+					loc_dir: window.location.pathname.split('/')[1],
       products: [...Array(Number(page)).keys()],
       hooperSettings: {
 							itemsToShow: 1,
 							centerMode: true,
-							initialSlide: loc,
 						}
     };
 		},
@@ -223,7 +296,7 @@ ul.hooper-track {
 }
 
 .hooper-list img {
-	width:400px;
+	width:500px;
 	border: solid 3px #313131;
 	margin: 20px;
 }