ai/manga
1
0
Fork 0
Code Activity

fix

Browse Source
This commit is contained in:
syui
2024-04-03 05:37:41 +09:00
parent 6ffe2d69a8
commit 631c9ca57b
2 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -2,8 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>yui | manga</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="app.css" rel="preload" as="style"><link href="app.js" rel="preload" as="script"><link href="chunk-vendors.js" rel="preload" as="script"><link href="app.css" rel="stylesheet"> <title>yui | manga</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="app.css" rel="preload" as="style"><link href="app.js" rel="preload" as="script"><link href="chunk-vendors.js" rel="preload" as="script"><link href="app.css" rel="stylesheet">
<link rel="stylesheet" href="https://yui.syui.ai/bower_components/icomoon/css/icomoon.css" />
<link rel="stylesheet" href="https://yui.syui.ai/bower_components/font-awesome/css/all.min.css" />
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary">
<meta property="og:url" content="https://manga.syui.ai"> <meta property="og:url" content="https://manga.syui.ai">
<meta property="og:title" content="yui"> <meta property="og:title" content="yui">

135
src/App.vue
View File

@@ -1,5 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
<link rel="stylesheet" href="https://yui.syui.ai/bower_components/icomoon/css/icomoon.css" />
<link rel="stylesheet" href="https://yui.syui.ai/bower_components/font-awesome/css/all.min.css" />
<hooper :settings="hooperSettings"> <hooper :settings="hooperSettings">
<slide v-for="(n,index) of products" :key="n"> <slide v-for="(n,index) of products" :key="n">
<div v-if="loading" class="loading"> <div v-if="loading" class="loading">
@@ -28,8 +30,9 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th scope="col">yui</th> <th scope="col">manga</th>
<th scope="col">巻</th> <th scope="col">ver</th>
<th scope="col">day</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -38,6 +41,7 @@
<a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a> <a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a>
</th> </th>
<td>0.0</td> <td>0.0</td>
<td>2021-07-11</td>
</tr> </tr>
</tbody> </tbody>
<tbody> <tbody>
@@ -46,43 +50,52 @@
<a :href="this.url + this.s_b"><img :src="url + 'manga/' + this.s_b + '.webp'" v-on:click="page_run(s_a)"></a> <a :href="this.url + this.s_b"><img :src="url + 'manga/' + this.s_b + '.webp'" v-on:click="page_run(s_a)"></a>
</th> </th>
<td>0.1</td> <td>0.1</td>
<td>2021-07-11</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="bsky_comment"> <div class="comment">
<div class="bsky_comment" v-if="comment_open == false">
<span class="comment">
<p class="comment-body" v-if="comment_first">
<img :src="'/icon/' + comment_first.did.replace('did:plc:', '') + '.jpg'" v-if="comment_first.avatar" class="comment"/> <span class="comment-time" v-if="comment_first.updated_at"><a :href="comment_first.bsky_url" v-if="comment_first.bsky_url">{{ moment(comment_first.updated_at) }}</a></span> <span class="comment-handle" v-if="comment_first.handle"><a :href="'https://' + comment_first.bsky_url.split('/').slice(2,5).join('/')" v-if="comment_first.bsky_url">@{{ comment_first.handle }}</a></span>
<span class="comment-text" v-if="comment_first.text">{{ comment_first.text }}</span>
</p>
</span>
<div class="comment_open">
<p>
<a :href="comment_first.bsky_url" target="_blank">post</a>
</p>
<p>
<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
</p>
</div>
</div>
<div class="bsky_comment" v-else>
<span v-for="i in api_json.data" class="comment"> <span v-for="i in api_json.data" class="comment">
<p class="comment-body" v-if="i.text"> <p class="comment-body" v-if="i">
<!-- {{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
<img :src="i.avatar" v-if="i.avatar" class="comment"/> <span class="comment-time" v-if="i.handle">{{ moment(i.updated_at) }}</span> <span class="comment-handle" v-if="i.handle"><a :href="i.bsky_url">@{{ i.handle }}</a></span> <img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/> <span class="comment-time" v-if="i.updated_at"><a :href="i.bsky_url" v-if="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle"><a :href="'https://' + i.bsky_url.split('/').slice(2,5).join('/')" v-if="i.bsky_url">@{{ i.handle }}</a></span>
--> <span class="comment-text" v-if="i.text">{{ i.text }}</span>
<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="i.avatar" class="comment"/> <span class="comment-time" v-if="i.handle">{{ moment(i.updated_at) }}</span> <span class="comment-handle" v-if="i.handle"><a :href="i.bsky_url">@{{ i.handle }}</a></span>
<span class="comment-text">{{ i.text }}</span>
</p> </p>
</span> </span>
<div class="comment_open"><button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-up"></i></button></div>
</div>
</div> </div>
<div class="page_title"> <div class="page_title">
<div class="page_data"> <div class="page_data">
<table> <table>
<thead>
<tr>
<th scope="col"><span class="icon-ai"></span></th>
<th scope="col">title</th>
<th scope="col">body</th>
<th scope="col">author</th>
</tr>
</thead>
<tbody> <tbody>
<tr> <tr>
<th scope="row"> <th class="row">
<a href="https://yui.syui.ai"><img src="https://syui.ai/ai.png" v-on:click="page_run(s_a)"></a> <a href="https://yui.syui.ai"><img src="https://syui.ai/ai.png" v-on:click="page_run(s_a)"></a>
</th> </th>
<td>yui</td> <td>yui</td>
<td>不思議な力を持つアイのお話</td> <td>不思議な力を持つアイの話</td>
<td>syui</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -104,6 +117,7 @@ import {
import 'hooper/dist/hooper.css'; import 'hooper/dist/hooper.css';
import axios from 'axios' import axios from 'axios'
import moment from "moment"; import moment from "moment";
import fs from 'fs';
var page = 21; var page = 21;
var loc = window.location.pathname.split('/').slice(-1)[0]; var loc = window.location.pathname.split('/').slice(-1)[0];
@@ -125,9 +139,14 @@ export default {
bsky_cursor: null, bsky_cursor: null,
bsky_cid: "", bsky_cid: "",
bsky_json: null, bsky_json: null,
bsky_url: null,
api_url: null, api_url: null,
api_json: null, api_json: null,
comment_open: false,
comment_first: null,
loading: true, loading: true,
f: null,
url_check: true,
url: "/", url: "/",
s_a: 0, s_a: 0,
s_b: 2, s_b: 2,
@@ -152,6 +171,12 @@ export default {
}, },
load() { load() {
this.loading = false; this.loading = false;
},
axios_check(url) {
axios.get(url)
.catch(error => {
this.url_check = false;
});
} }
}, },
mounted() { mounted() {
@@ -175,7 +200,11 @@ export default {
let url = this.api_url + "/users/2/ma?itemsPerPage=4000"; let url = this.api_url + "/users/2/ma?itemsPerPage=4000";
axios axios
.get(url,{ crossdomain: true }) .get(url,{ crossdomain: true })
.then(response => (this.api_json = response)); .then(
response => {this.api_json = response
this.comment_first = this.api_json.data[0]
}
);
} }
}; };
</script> </script>
@@ -190,7 +219,7 @@ a {
} }
a span.icon-ai { a span.icon-ai {
color: #fff700; color: #ddd700;
} }
.page_n{text-align:center;height:50px} .page_n{text-align:center;height:50px}
@@ -211,7 +240,7 @@ a span.icon-ai {
} }
.hooper-progress-inner { .hooper-progress-inner {
background-color: #dcd500; background-color: #ddd700;
} }
button { button {
@@ -227,14 +256,14 @@ ul.hooper-track {
} }
.hooper-list img { .hooper-list img {
width:500px; width:400px;
border: solid 3px #313131; border: solid 3px #313131;
margin: 20px; margin: 20px;
} }
.page { .page {
text-align:center; text-align:center;
background-color: rgba(184, 207, 224, .24); background-color: #f1f1f1;
padding: 50px 0 50px 0; padding: 50px 0 50px 0;
} }
@@ -267,12 +296,19 @@ table {
text-align: center; text-align: center;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
word-break: break-all;
} }
thead, td, tr, th { thead, td, tr, th {
padding:10px; padding:10px;
background: #fff; background: #fff;
border: solid 1px #fff; border: solid 1px #fff;
padding: 15px 25px 15px 25px;
}
th.row {
background: #313131;
border:none;
} }
footer { footer {
@@ -294,13 +330,21 @@ span.comment-time {
color: #999; color: #999;
} }
span.comment-time a {
color: #999;
}
span.comment-time a:hover {
color: rgb(16, 131, 254);
}
span.comment-handle { span.comment-handle {
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
position: absolute; position: absolute;
} }
span.comment-handle a { span.comment-handle a {
color: rgb(16, 131, 254); color: #313131;
} }
img.comment { img.comment {
@@ -308,7 +352,7 @@ img.comment {
} }
p.comment-body { p.comment-body {
padding: 5px 70px 5px 70px; padding: 5px 40px 15px 40px;
border-bottom: solid 1px #eee; border-bottom: solid 1px #eee;
} }
@@ -316,14 +360,43 @@ span.comment-text {
padding:10px; padding:10px;
} }
span.comment { button.comment_open {
padding:20px 40px 20px 40px;
background-color: rgba(184,207,224,.24);
border: none;
margin:0;
}
button.comment_open:hover {
color: rgb(16, 131, 254);
}
.comment_open {
text-align: center;
width: 100%;
}
.comment_open p a {
color: rgb(16, 131, 254);
} }
.bsky_comment { .bsky_comment {
background-color: #fff;
width: 600px;
margin: 0px auto;
border: solid 1px #eee;
}
.comment {
background-color: #fff;
} }
@media screen and (max-width:1000px) { @media screen and (max-width:1000px) {
img{ width:100%; } img{
width:100%;
}
.bsky_comment {
width:100%;
}
.page_title a img { .page_title a img {
width:100%; width:100%;
} }
@@ -339,4 +412,8 @@ span.comment {
padding: 5px; padding: 5px;
} }
} }
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
/* color: #aba700 #fff700 #313131 rgba(184, 207, 224, .24) rgb(16, 131, 254) #ddd700 */
</style> </style>