ai/manga
1
0
Fork 0
Code Activity

update

Browse Source
This commit is contained in:
syui
2023-06-04 15:47:05 +09:00
parent e3410c9320
commit ea6b7dcf92
251 changed files with 472 additions and 8361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
src/App.vue
View File

@@ -1,25 +1,116 @@
<template>
<div id="app">
<a :href="this.url + this.s_a"><button v-on:click="page_run(s_a)">1</button></a>
<a :href="this.url + this.s_b"><button v-on:click="page_run(s_b)">2</button></a>
<a :href="this.url + this.s_c"><button v-on:click="page_run(s_c)">3</button></a>
<a :href="this.url + this.s_d"><button v-on:click="page_run(s_d)">4</button></a>
<a :href="this.url + this.s_e"><button v-on:click="page_run(s_e)">5</button></a>
<link rel="stylesheet" href="https://yui.syui.ai/pkg/icomoon/icomoon.css" />
<link rel="stylesheet" href="https://yui.syui.ai/pkg/font-awesome/css/all.min.css" />
<hooper :settings="hooperSettings">
<slide v-for="(n,index) of products" :key="n">
<img :src="'/manga/'+ (index) +'.png'" />
<div class="page_n">{{ n }}</div>
<div v-if="loading" class="loading">
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
</div>
<img :src="url + 'manga/'+ (index) +'.webp'" @load="load" />
<div class="page_n"><a href="/"><span class="icon-ai"></span></a> {{ n }}</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 class="page">
<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_b"><button v-on:click="page_run(s_b)">2</button></a>
<a :href="this.url + this.s_c"><button v-on:click="page_run(s_c)">3</button></a>
<a :href="this.url + this.s_d"><button v-on:click="page_run(s_d)">4</button></a>
<a :href="this.url + this.s_e"><button v-on:click="page_run(s_e)">5</button></a>
</div>
-->
<div class="page" v-if="loc === ''">
<div class="page_data">
<table>
<thead>
<tr>
<th scope="col">manga</th>
<th scope="col">ver</th>
<th scope="col">day</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a>
</th>
<td>0.0</td>
<td>2021-07-11</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">
<a :href="this.url + this.s_b"><img :src="url + 'manga/' + this.s_b + '.webp'" v-on:click="page_run(s_a)"></a>
</th>
<td>0.1</td>
<td>2021-07-11</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>
<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
</div>
</div>
<div class="comment" v-if="loc === ''">
<div class="bsky_comment" v-if="comment_open == false">
</div>
<div class="bsky_comment" v-else-if="api_json">
<span v-for="i in api_json.data" class="comment">
<!--
<blockquote class="bluesky-embed" :data-bluesky-uri="i.uri" :data-bluesky-cid="i.cid"></blockquote>
-->
<p class="comment-body" v-if="i">
<span v-if="i.did.replace('did:plc:', '') != ''">
{{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
</span>
<span v-if="url_check == true && i.did.replace('did:plc:', '') != ''">
<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" class="comment"/>
</span>
<span v-else-if="i.avatar">
<img :src="i.avatar" class="comment"/>
</span>
<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.replace('.bsky.social', '') }}</a></span>
<span class="comment-text" v-if="i.text">{{ i.text }}</span>
</p>
</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 class="page_title" v-if="loc === ''" >
<div class="page_data">
<table>
<tbody>
<tr>
<th class="row">
<a href="https://yui.syui.ai"><span class="icon-ai"></span></a>
</th>
<td>yui</td>
<td>不思議な力を持つアイの話</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import {
Hooper,
Hooper,
Slide,
Progress as HooperProgress,
Pagination as HooperPagination,
@@ -27,13 +118,18 @@ import {
} from 'hooper';
import 'hooper/dist/hooper.css';
var page = 107;
let loc = window.location.pathname.split('/').slice(-1)[0];
import axios from 'axios'
import moment from "moment";
import fs from 'fs';
var page = 21;
var loc = window.location.pathname.split('/').slice(-1)[0];
//let loc = window.location.pathname.split('/').slice(0)[3];
export default {
name: 'App',
components: {
Hooper,
Hooper,
Slide,
HooperProgress,
HooperPagination,
@@ -41,9 +137,23 @@ export default {
},
data() {
return {
loc: window.location.pathname.split('/').slice(-1)[0],
bsky_pds: "https://bsky.social/xrpc",
bsky_handle: "yui.syui.ai",
bsky_cursor: null,
bsky_cid: "",
bsky_json: null,
api_url: null,
api_json: null,
comment_open: false,
comment_first: null,
loading: true,
avatar_url: "",
f: null,
url_check: true,
url: "/",
s_a: 0,
s_b: 15,
s_b: 2,
s_c: 41,
s_d: 51,
s_e: 60,
@@ -56,18 +166,268 @@ export default {
};
},
methods: {
moment(date) {
return moment.utc(date).local().format("YYYY.MM.DD");
},
page_run(s) {
this.loc = s;
//this.loc = window.location.pathname.split('/').slice(0)[3];
this.hooperSettings.initialSlide = s;
},
load() {
this.loading = false;
},
axios_check(url) {
axios.get(url)
.then(response => {
this.avatar_url = url;
this.url_check = true
})
.catch(error => {
this.url_check = false;
this.avatar_url = "/icon/ai.jpg"
});
}
},
mounted() {
if (window.location.host === "localhost:8080") {
this.api_url = "/api/";
} else if (window.location.host === "192.168.11.12:8080"){
this.api_url = "/api/";
} else {
if (location.protocol !== "https:") {
location.replace("https:" + location.href.substring(location.protocol.length));
}
this.api_url = "https://api.syui.ai";
}
let url = this.api_url + "/users/2/ma?itemsPerPage=4000";
axios
.get(url,{ crossdomain: true })
.then(
response => {this.api_json = response
this.comment_first = this.api_json.data[0]
}
);
}
};
</script>
<style>
.hooper{height:100%}button.hooper-indicator{background-color:#000}img{width:100%}.page_n{text-align:center;height:50px}.hooper-pagination{position:fixed}.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
button {
padding: 10px;
margin: 5px;
body {
margin: 0px;
}
a {
text-decoration: none;
}
a span.icon-ai {
color: #ddd700;
}
.page_n{text-align:center;height:50px}
.hooper-pagination{position:fixed}
.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
.hooper-indicator{
background-color:#000;
display:none;
}
.hooper{
height:100%;
text-align:center;
}
.hooper-progress {
height: 12px;
}
.hooper-progress-inner {
background-color: #ddd700;
}
button {
padding: 10px;
margin: 5px;
background-color: #fff700;
color: #313131;
border: solid 2px;
}
ul.hooper-track {
padding: 0px;
}
.hooper-list img {
width:400px;
border: solid 3px #313131;
margin: 20px;
}
.page {
text-align:center;
background-color: #f1f1f1;
padding: 50px 0 50px 0;
}
.page a img {
border: solid 2px #313131;
width:100px;
margin: auto;
display: block;
}
.page_title {
text-align:center;
background-color: #313131;
padding: 100px 0 50px 0;
}
.page_title a img {
width:100px;
margin: auto;
display: block;
}
.page_title head, td, tr, th {
padding:10px;
background: #fff;
border: solid 1px #fff;
}
table {
text-align: center;
margin-left: auto;
margin-right: auto;
word-break: break-all;
}
.page_data table tbody > thead, td, tr, th {
background: #fff;
border: solid 1px #fff;
padding: 15px 25px 15px 25px;
}
th.row {
background: #313131;
border:none;
}
footer {
text-align: center;
background: #313131;
color: #fff;
padding:50px 0 30px 0;
}
.loading {
text-align: center;
font-size: 30px;
margin-top:100px;
}
span.comment-time {
float: right;
padding: 0 5px 0 5px;
color: #999;
}
span.comment-time a {
color: #999;
}
span.comment-time a:hover {
color: rgb(16, 131, 254);
}
span.comment-handle {
padding: 0 5px 0 5px;
position: absolute;
}
span.comment-handle a {
color: #313131;
}
img.comment {
width:60px;
}
p.comment-body {
padding: 5px 40px 15px 40px;
border-bottom: solid 1px #eee;
}
span.comment-text {
padding:10px;
}
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 {
background-color: #fff;
width: 600px;
margin: 0px auto;
border: solid 1px #eee;
}
.bsky_comment_embed {
background-color: #fff;
width: 600px;
margin: 0px auto;
border: none;
}
.comment {
background-color: #fff;
}
@media screen and (max-width:1000px) {
img {
width:100%;
}
.bsky_comment {
width:auto;
}
.bsky_comment_embed {
width:auto;
}
.page_title a img {
width:100%;
}
.page a img {
width:160px;
}
.hooper-list img {
border: solid 0px #fff;
margin:20px 0 0 0;
width:100%;
}
p.comment-body {
padding: 5px;
}
.page_data table tbody > thead, td, tr, th {
padding:10px;
}
}
@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>

74
src/App.vue.back
View File

@@ -1,74 +0,0 @@
<template>
<div id="app">
<hooper :settings="hooperSettings">
<slide v-for="(n,index) of products" :key="n">
<img :src="'/manga/'+ (index) +'.png'" />
<div class="page_n">{{ n }}</div>
</slide>
<hooper-navigation slot="hooper-addons"></hooper-navigation>
<hooper-pagination slot="hooper-addons"></hooper-pagination>
<hooper-progress slot="hooper-addons"></hooper-progress>
</hooper>
<button v-on:click="page_run">1</button>
<button v-on:click="page_run"><a :href="this.url + this.s_b">2</a></button>
<button v-on:click="page_run"><a :href="this.url + this.s_c">3</a></button>
<button v-on:click="page_run"><a :href="this.url + this.s_d">4</a></button>
<button v-on:click="page_run"><a :href="this.url + this.s_e"5</a></button>
</div>
</template>
<script>
import {
Hooper,
Slide,
Progress as HooperProgress,
Pagination as HooperPagination,
Navigation as HooperNavigation
} from 'hooper';
import 'hooper/dist/hooper.css';
let page = 107;
let loc = 0;
export default {
name: 'App',
components: {
Hooper,
Slide,
HooperProgress,
HooperPagination,
HooperNavigation
},
data() {
return {
url: "/",
s_a: 0,
s_b: 15,
s_c: 41,
s_d: 51,
s_e: 60,
loc: loc,
products: [...Array(Number(page)).keys()],
hooperSettings: {
itemsToShow: 1,
centerMode: true,
initialSlide: 0,
}
};
},
methods: {
page_run() {
this.loc = window.location.pathname.split('/').slice(0)[3];
}
}
};
</script>
<style>
.hooper{height:100%}button.hooper-indicator{background-color:#000}img{width:100%}.page_n{text-align:center;height:50px}.hooper-pagination{position:fixed}.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
button {
padding: 10px;
margin: 5px;
}
</style>

1
src/main.js
View File

@@ -7,4 +7,3 @@ new Vue({
render: h => h(App)
}).$mount('#app')