update

.github/workflows/gh-pages.yml

@@ -0,0 +1,33 @@
+name: github pages
+
+on:
+  push:
+    branches:
+    - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 16
+        ref: main
+        submodules: true
+        fetch-depth: 0
+    - run: yarn install
+
+    - name: Build
+      env: 
+        TZ: "Asia/Tokyo"
+      run: |
+           yarn build
+
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist
+        user_name: 'ai[bot]'
+        user_email: '138105980+yui-syui-ai[bot]@users.noreply.github.com'

.gitignore

@@ -0,0 +1,30 @@
+.DS_Store
+node_modules
+/dist
+*.lock
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store
+*/.DS_Store
+*/*/.DS_Store
+*/*/*/.DS_Store
+*/*/*/*/.DS_Store
+*/*/*/*/*/.DS_Store
+*/*/*/*/*/*/.DS_Store
+*/*/*/*/*/*/*/.DS_Store
+*/*/*/*/*/*/*/*/.DS_Store

README.md

@@ -0,0 +1,27 @@
+# <img src="./public/icon/bluesky.jpg" width="30"> ai `cmt`
+
+bluesky blog comment system.
+
+display posts from bluesky account on blog etc.
+
+below, the bot will open the blog comment system.
+
+```sh
+# admin slash command
+@yui.syui.ai /comment https://syui.ai/blog/post/2024/04/25/bluesky/
+```
+
+display posts on a specific blog path by replying to the opened bot post.
+
+<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:4hqjfn7m6n5hno3doamuhgef/app.bsky.feed.post/3kqxbtmwlje2h" data-bluesky-cid="bafyreiasxp5g3nkkd6g7lxh55qaxcc7ylefaljmbcp627nu2geks62c57m"><p lang="">please reply with your comments here ↓ 
+</p>&mdash; ai (<a href="https://bsky.app/profile/did:plc:4hqjfn7m6n5hno3doamuhgef?ref_src=embed">@yui.syui.ai</a>) <a href="https://bsky.app/profile/did:plc:4hqjfn7m6n5hno3doamuhgef/post/3kqxbtmwlje2h?ref_src=embed">Apr 25, 2024 at 20:18</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+
+```ts
+<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 async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+<script src="https://syui.ai/js/comment/chunk-vendors.js"></script>
+<script src="https://syui.ai/js/comment/app.js"></script>
+```
+

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "manga",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.6.8",
+    "core-js": "^3.6.4",
+    "hooper": "^0.3.4",
+    "moment": "^2.30.1",
+    "vue": "^2.6.11",
+    "vue-loading-template": "^1.3.2",
+    "vue-meta": "^2.4.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "devDependencies": {
+    "@vue/cli-service": "~4.5.15"
+  }
+}

public/icon/bluesky.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/></svg>

public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>ai/comment</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">
+		<meta name="twitter:card" content="summary">
+		<meta property="og:url" content="https://manga.syui.ai">
+		<meta property="og:title" content="yui">
+		<meta property="og:description" content="©syui">
+		<meta property="og:image" content="https://manga.syui.ai/manga/og.png">
+		<link rel="icon" href="/favicon.ico" />
+		<link rel="shortcut icon" href="/favicon.ico">
+		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+	</head>
+	<body>
+		<div id="comment"></div>
+		<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+	</body>
+	<footer>© syui</footer>
+</html>

scpt/convert.zsh

@@ -0,0 +1,21 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=manga.syui.ai
+
+case $OSTYPE in
+	darwin*)
+		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
+	linux*)
+		path_nvm_sh="";;
+esac
+
+dir=$dd/public/manga
+cd $dir
+export NVM_DIR="$HOME/.nvm"
+[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
+nvm use 17
+nvm i squoosh-cli
+squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' *.png
+#1620 × 2160

scpt/icon.zsh

@@ -0,0 +1,24 @@
+#!/bin/zsh
+
+d=${0:a:h}
+dd=${0:a:h:h}
+icon=$dd/public/icon
+
+echo $d
+echo $dd
+echo ---
+api=api.syui.ai
+avatar=`curl -sL $api/users/2/ma|jq -r ".[].avatar"`
+n=`echo $avatar|wc -l`
+for ((i=1;i<=$n;i++))
+do
+	img=`echo $avatar|awk "NR==$i"`
+	did=`echo $img|cut -d / -f 7|cut -d : -f 3`
+	echo $i
+	echo $img
+	echo $did
+	f=$icon/$did.jpg
+	if [ ! -f $f ];then
+		curl -sL $img -o $icon/$did.jpg
+	fi
+done

src/App.vue

@@ -0,0 +1,355 @@
+<template>
+	<div id="comment">
+		<div class="comment-root">
+			<div class="loading" v-if="loading && cid_root">
+				<vue-loading type="cylon" color="#fff700" :size="{ width: '50px', height: '50px' }"></vue-loading>
+			</div>
+			<div class="loading_none" v-else>
+			</div>
+			<div class="bsky_comment" v-if="cid_root">
+				<span v-for="(i,index) in api_json_record" class="comment">
+					<p class="comment-body" v-if="i.cid_root == cid_root">
+						<span v-if="i.did.replace('did:plc:', '') != ''">
+							<img src="/icon/null.jpg" v-if="loading" class="comment" >
+							<img :src="'https://git.syui.ai/ai/comment/raw/branch/main/public/icon/' + i.did.replace('did:plc:', '') + '.jpg'" class="comment" @load="load" v-if="api_json_record.length - 1 == index">
+							<img :src="'https://git.syui.ai/ai/comment/raw/branch/main/public/icon/' + i.did.replace('did:plc:', '') + '.jpg'" class="comment" v-else>
+						</span>
+						<span class="comment-time" v-if="i.updated_at && !loading"><a :href="i.bsky_url" v-if="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle && !loading"><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 && !loading">{{ i.text }}</span>
+					</p>
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { VueLoading } from 'vue-loading-template'
+import {
+	Hooper,
+  Slide,
+  Progress as HooperProgress,
+  Pagination as HooperPagination,
+  Navigation as HooperNavigation
+} from 'hooper';
+
+import 'hooper/dist/hooper.css';
+import axios from 'axios'
+import moment from "moment";
+import fs from 'fs';
+
+var page = 21;
+var loc = window.location.pathname;
+
+export default {
+  name: 'App',
+  components: {
+			VueLoading,
+			Hooper,
+    Slide,
+    HooperProgress,
+    HooperPagination,
+    HooperNavigation
+  },
+  data() {
+    return {
+					host: window.location.host,
+					loc: window.location.pathname,
+					bsky_pds: "https://bsky.social/xrpc",
+					bsky_handle: "yui.syui.ai",
+					bsky_cursor: "",
+					bsky_cid: "",
+					bsky_json: "",
+					api_url: "",
+					api_json: "",
+					api_json_record: "",
+					blog: "",
+					cid_root: "",
+					uri_root: "",
+					comment_open: false,
+					comment_first: "",
+					loading: true,
+					avatar_url: "",
+					f: "",
+					url_check: true,
+					url: "/",
+					products: [...Array(Number(page)).keys()],
+				};
+		},
+		methods: {
+			moment(date) {
+				return moment.utc(date).local().format("YYYY.MM.DD");
+			},
+			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 (this.host === "localhost:8080") {
+				this.host = "manga.syui.ai";
+				this.api_url = "/api/";
+			} else if (this.host === "localhost:1313"){
+				this.host = "syui.ai";
+				this.api_url = "https://api.syui.ai";
+			} else if (this.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
+							const tmp = this.api_json.data.find((v) => v.blog_url == 'https://' + v.blog + loc);
+							if (tmp !== undefined) {
+								this.cid_root = this.api_json.data.find((v) => v.blog_url == 'https://' + v.blog + loc && v.blog === this.host).cid;
+								this.uri_root = this.api_json.data.find((v) => v.blog_url == 'https://' + v.blog + loc && v.blog === this.host).uri;
+								this.api_json_record = this.api_json.data.filter((v) => v.cid_root == this.cid_root && v.blog === this.host);
+							}
+						}
+					);
+		}
+};
+</script>
+
+<style>
+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;
+}
+
+.comment {
+	background-color: #fff;
+}
+
+.loading {
+	padding:25px;
+	background:#f1f1f1;
+}
+
+.loading_none {
+	padding:50px;
+	background:#f1f1f1;
+}
+
+@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;
+	}
+}
+
+</style>

src/main.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#comment')
+

vue.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+	devServer: {
+		proxy: {
+			"^/api*": {
+				target: "https://api.syui.ai",
+				pathRewrite: { "^/api": "" },
+			}
+		}
+	},
+	publicPath: "/",
+	configureWebpack: {
+		output: {
+			filename: '[name].js',
+			chunkFilename: '[name].js'
+		}
+	},
+	css: {
+		extract: {
+			filename: '[name].css',
+			chunkFilename: '[name].css'
+		},
+	},
+}