add: restore colored tag chip

README.md

@@ -4,23 +4,27 @@ Content File Management Program.
 For study about nodejs, typescript and react.
 
 ### deployment
-```
-$ npm run app:build
+
+```bash
+pnpm run app:build
 ```
 
 ### test
-```
-$ npm run app
+
+```bash
+$ pnpm run app
 ```
 
 ### server build
-```
-$ npm run compile
+
+```bash
+$ pnpm run compile
 ```
 
 ### client build
-```
-$ npm run build
+
+```bash
+$ pnpm run build
 ```
 
 ## License

app.ts

@@ -1,13 +1,13 @@
-import { app, BrowserWindow, session, dialog } from "electron";
-import { get_setting } from "./src/SettingConfig";
-import { create_server } from "./src/server";
-import { getAdminAccessTokenValue,getAdminRefreshTokenValue, accessTokenName, refreshTokenName } from "./src/login";
+import { app, BrowserWindow, dialog, session } from "electron";
+import { ipcMain } from "electron";
 import { join } from "path";
-import { ipcMain } from 'electron';
+import { accessTokenName, getAdminAccessTokenValue, getAdminRefreshTokenValue, refreshTokenName } from "./src/login";
 import { UserAccessor } from "./src/model/mod";
+import { create_server } from "./src/server";
+import { get_setting } from "./src/SettingConfig";
 
 function registerChannel(cntr: UserAccessor) {
-  ipcMain.handle('reset_password', async(event,username:string,password:string)=>{
+    ipcMain.handle("reset_password", async (event, username: string, password: string) => {
         const user = await cntr.findUser(username);
         if (user === undefined) {
             return false;
@@ -27,11 +27,11 @@ if (!setting.cli) {
             center: true,
             useContentSize: true,
             webPreferences: {
-        preload:join(__dirname,'preload.js'),
+                preload: join(__dirname, "preload.js"),
                 contextIsolation: true,
-      }
+            },
         });
-    await wnd.loadURL(`data:text/html;base64,`+Buffer.from(loading_html).toString('base64'));
+        await wnd.loadURL(`data:text/html;base64,` + Buffer.from(loading_html).toString("base64"));
         // await wnd.loadURL('../loading.html');
         // set admin cookies.
         await session.defaultSession.cookies.set({
@@ -40,7 +40,7 @@ if (!setting.cli) {
             value: getAdminAccessTokenValue(),
             httpOnly: true,
             secure: false,
-      sameSite:"strict"
+            sameSite: "strict",
         });
         await session.defaultSession.cookies.set({
             url: `http://localhost:${setting.port}`,
@@ -48,23 +48,21 @@ if (!setting.cli) {
             value: getAdminRefreshTokenValue(),
             httpOnly: true,
             secure: false,
-      sameSite:"strict"
+            sameSite: "strict",
         });
         try {
             const server = await create_server();
             const app = server.start_server();
             registerChannel(server.userController);
             await wnd.loadURL(`http://localhost:${setting.port}`);
-    }
-    catch(e){
+        } catch (e) {
             if (e instanceof Error) {
                 await dialog.showMessageBox({
                     type: "error",
                     title: "error!",
                     message: e.message,
                 });
-      }
-      else{
+            } else {
                 await dialog.showMessageBox({
                     type: "error",
                     title: "error!",

dprint.json

@@ -0,0 +1,23 @@
+{
+  "incremental": true,
+  "typescript": {
+    "indentWidth": 2
+  },
+  "json": {
+  },
+  "markdown": {
+  },
+  "includes": ["**/*.{ts,tsx,js,jsx,cjs,mjs,json,md}"],
+  "excludes": [
+    "**/node_modules",
+    "**/*-lock.json",
+    "**/dist",
+    "build/",
+    "app/"
+  ],
+  "plugins": [
+    "https://plugins.dprint.dev/typescript-0.84.4.wasm",
+    "https://plugins.dprint.dev/json-0.17.2.wasm",
+    "https://plugins.dprint.dev/markdown-0.15.2.wasm"
+  ]
+}

gen_conf_schema.ts

@@ -1,13 +1,13 @@
-import { promises } from 'fs';
+import { promises } from "fs";
 const { readdir, writeFile } = promises;
-import {createGenerator} from 'ts-json-schema-generator';
-import {dirname,join} from 'path'; 
+import { dirname, join } from "path";
+import { createGenerator } from "ts-json-schema-generator";
 
 async function genSchema(path: string, typename: string) {
     const gen = createGenerator({
         path: path,
         type: typename,
-        tsconfig:"tsconfig.json"
+        tsconfig: "tsconfig.json",
     });
     const schema = gen.createSchema(typename);
     if (schema.definitions != undefined) {
@@ -16,8 +16,8 @@ async function genSchema(path:string,typename:string){
         if (typeof definition == "object") {
             let property = definition.properties;
             if (property) {
-                property['$schema'] = {
-                    type:"string"
+                property["$schema"] = {
+                    type: "string",
                 };
             }
         }
@@ -29,7 +29,7 @@ function capitalize(s:string){
     return s.charAt(0).toUpperCase() + s.slice(1);
 }
 async function setToALL(path: string) {
-    console.log(`scan ${path}`)
+    console.log(`scan ${path}`);
     const direntry = await readdir(path, { withFileTypes: true });
     const works = direntry.filter(x => x.isFile() && x.name.endsWith("Config.ts")).map(x => {
         const name = x.name;
@@ -38,11 +38,11 @@ async function setToALL(path:string) {
             const typename = m[1];
             return genSchema(join(path, typename), capitalize(typename));
         }
-    })
+    });
     await Promise.all(works);
     const subdir = direntry.filter(x => x.isDirectory()).map(x => x.name);
     for (const x of subdir) {
         await setToALL(join(path, x));
     }
 }
-setToALL("src")
+setToALL("src");

knexfile.js

@@ -1,5 +1,5 @@
-require('ts-node').register();
-const {Knex} = require('./src/config');
+require("ts-node").register();
+const { Knex } = require("./src/config");
 // Update with your config settings.
 
 module.exports = Knex.config;

migrations/initial.ts

@@ -1,4 +1,4 @@
-import {Knex} from 'knex';
+import { Knex } from "knex";
 
 export async function up(knex: Knex) {
     await knex.schema.createTable("schema_migration", (b) => {
@@ -36,19 +36,19 @@ export async function up(knex:Knex) {
         b.primary(["doc_id", "tag_name"]);
     });
     await knex.schema.createTable("permissions", b => {
-        b.string('username').notNullable();
+        b.string("username").notNullable();
         b.string("name").notNullable();
         b.primary(["username", "name"]);
-        b.foreign('username').references('users.username');
+        b.foreign("username").references("users.username");
     });
     // create admin account.
     await knex.insert({
         username: "admin",
         password_hash: "unchecked",
-        password_salt:"unchecked"
-    }).into('users');
-};
+        password_salt: "unchecked",
+    }).into("users");
+}
 
 export async function down(knex: Knex) {
-    throw new Error('Downward migrations are not supported. Restore from backup.');
-};
+    throw new Error("Downward migrations are not supported. Restore from backup.");
+}

package.json

@@ -6,8 +6,9 @@
   "scripts": {
     "compile": "tsc",
     "compile:watch": "tsc -w",
-    "build": "cd src/client && npm run build:prod",
-    "build:watch": "cd src/client && npm run build:watch",
+    "build": "cd src/client && pnpm run build:prod",
+    "build:watch": "cd src/client && pnpm run build:watch",
+    "fmt": "dprint fmt",
     "app": "electron build/app.js",
     "app:build": "electron-builder",
     "app:pack": "electron-builder --dir",
@@ -56,6 +57,7 @@
     "@louislam/sqlite3": "^6.0.1",
     "@types/koa-compose": "^3.2.5",
     "chokidar": "^3.5.3",
+    "dprint": "^0.36.1",
     "jsonschema": "^1.4.1",
     "jsonwebtoken": "^8.5.1",
     "knex": "^0.95.15",

plan.md

@@ -3,6 +3,7 @@
 ## Routing
 
 ### server routing
+
 - content
   - \d+
     - comic
@@ -31,6 +32,7 @@
 - profile
 
 ## TODO
+
 - server push
 - ~~permission~~
 - diff

preload.ts

@@ -1,7 +1,7 @@
-import {ipcRenderer, contextBridge} from 'electron';
+import { contextBridge, ipcRenderer } from "electron";
 
-contextBridge.exposeInMainWorld('electron',{
+contextBridge.exposeInMainWorld("electron", {
     passwordReset: async (username: string, toPw: string) => {
-        return await ipcRenderer.invoke('reset_password',username,toPw);
-}
+        return await ipcRenderer.invoke("reset_password", username, toPw);
+    },
 });

src/SettingConfig.ts

@@ -1,38 +1,38 @@
-import { randomBytes } from 'crypto';
-import { existsSync, readFileSync, writeFileSync } from 'fs';
-import { Permission } from './permission/permission';
+import { randomBytes } from "crypto";
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import { Permission } from "./permission/permission";
 
 export interface SettingConfig {
     /**
      * if true, server will bind on '127.0.0.1' rather than '0.0.0.0'
      */
-    localmode: boolean,
+    localmode: boolean;
     /**
      * secure only
      */
-    secure: boolean,
+    secure: boolean;
 
     /**
      * guest permission
      */
-    guest: (Permission)[],
+    guest: (Permission)[];
     /**
      * JWT secret key. if you change its value, all access tokens are invalidated.
      */
-    jwt_secretkey: string,
+    jwt_secretkey: string;
     /**
      * the port which running server is binding on.
      */
-    port:number,
+    port: number;
 
-    mode:"development"|"production",
+    mode: "development" | "production";
     /**
      * if true, do not show 'electron' window and show terminal only.
      */
-    cli:boolean,
+    cli: boolean;
     /** forbid to login admin from remote client. but, it do not invalidate access token.
      * if you want to invalidate access token, change 'jwt_secretkey'. */
-    forbid_remote_admin_login:boolean,
+    forbid_remote_admin_login: boolean;
 }
 const default_setting: SettingConfig = {
     localmode: true,
@@ -43,7 +43,7 @@ const default_setting:SettingConfig = {
     mode: "production",
     cli: false,
     forbid_remote_admin_login: true,
-}
+};
 let setting: null | SettingConfig = null;
 
 const setEmptyToDefault = (target: any, default_table: SettingConfig) => {
@@ -56,7 +56,7 @@ const setEmptyToDefault = (target:any,default_table:SettingConfig)=>{
         diff_occur = true;
     }
     return diff_occur;
-}
+};
 
 export const read_setting_from_file = () => {
     let ret = existsSync("settings.json") ? JSON.parse(readFileSync("settings.json", { encoding: "utf8" })) : {};
@@ -65,7 +65,7 @@ export const read_setting_from_file = ()=>{
         writeFileSync("settings.json", JSON.stringify(ret));
     }
     return ret as SettingConfig;
-}
+};
 export function get_setting(): SettingConfig {
     if (setting === null) {
         setting = read_setting_from_file();

src/client/accessor/document.ts

@@ -1,5 +1,5 @@
 import { Document, DocumentAccessor, DocumentBody, QueryListOption } from "../../model/doc";
-import {toQueryString} from './util';
+import { toQueryString } from "./util";
 const baseurl = "/api/doc";
 
 export * from "../../model/doc";
@@ -11,20 +11,20 @@ export class ClientDocumentAccessor implements DocumentAccessor{
     addList: (content_list: DocumentBody[]) => Promise<number[]>;
     async findByPath(basepath: string, filename?: string): Promise<Document[]> {
         throw new Error("not allowed");
-    };
+    }
     async findDeleted(content_type: string): Promise<Document[]> {
         throw new Error("not allowed");
-    };
+    }
     async findList(option?: QueryListOption | undefined): Promise<Document[]> {
         let res = await fetch(`${baseurl}/search?${option !== undefined ? toQueryString(option) : ""}`);
-        if(res.status == 401) throw new FetchFailError("Unauthorized")
+        if (res.status == 401) throw new FetchFailError("Unauthorized");
         if (res.status !== 200) throw new FetchFailError("findList Failed");
         let ret = await res.json();
         return ret;
     }
     async findById(id: number, tagload?: boolean | undefined): Promise<Document | undefined> {
         let res = await fetch(`${baseurl}/${id}`);
-        if(res.status !== 200) throw new FetchFailError("findById Failed");;
+        if (res.status !== 200) throw new FetchFailError("findById Failed");
         let ret = await res.json();
         return ret;
     }
@@ -35,14 +35,14 @@ export class ClientDocumentAccessor implements DocumentAccessor{
         throw new Error("not implement");
         return [];
     }
-    async update(c: Partial<Document> & { id: number; }): Promise<boolean>{
+    async update(c: Partial<Document> & { id: number }): Promise<boolean> {
         const { id, ...rest } = c;
         const res = await fetch(`${baseurl}/${id}`, {
             method: "POST",
             body: JSON.stringify(rest),
             headers: {
-                'content-type':"application/json"
-            }
+                "content-type": "application/json",
+            },
         });
         const ret = await res.json();
         return ret;
@@ -53,15 +53,15 @@ export class ClientDocumentAccessor implements DocumentAccessor{
             method: "POST",
             body: JSON.stringify(c),
             headers: {
-                'content-type':"application/json"
-            }
+                "content-type": "application/json",
+            },
         });
         const ret = await res.json();
         return ret;
     }
     async del(id: number): Promise<boolean> {
         const res = await fetch(`${baseurl}/${id}`, {
-            method: "DELETE"
+            method: "DELETE",
         });
         const ret = await res.json();
         return ret;
@@ -72,8 +72,8 @@ export class ClientDocumentAccessor implements DocumentAccessor{
             method: "POST",
             body: JSON.stringify(rest),
             headers: {
-                'content-type':"application/json"
-            }
+                "content-type": "application/json",
+            },
         });
         const ret = await res.json();
         return ret;
@@ -84,16 +84,16 @@ export class ClientDocumentAccessor implements DocumentAccessor{
             method: "DELETE",
             body: JSON.stringify(rest),
             headers: {
-                'content-type':"application/json"
-            }
+                "content-type": "application/json",
+            },
         });
         const ret = await res.json();
         return ret;
     }
 }
-export const CDocumentAccessor = new ClientDocumentAccessor;
+export const CDocumentAccessor = new ClientDocumentAccessor();
 export const makeThumbnailUrl = (x: Document) => {
     return `${baseurl}/${x.id}/${x.content_type}/thumbnail`;
-}
+};
 
 export default CDocumentAccessor;

src/client/accessor/util.ts

@@ -1,20 +1,19 @@
-
 type Representable = string | number | boolean;
 
 type ToQueryStringA = {
-    [name:string]:Representable|Representable[]|undefined
+    [name: string]: Representable | Representable[] | undefined;
 };
 
 export const toQueryString = (obj: ToQueryStringA) => {
     return Object.entries(obj)
-        .filter((e): e is [string,Representable|Representable[]] => 
-                e[1] !== undefined)
+        .filter((e): e is [string, Representable | Representable[]] => e[1] !== undefined)
         .map(e =>
             e[1] instanceof Array
-            ? e[1].map(f=>`${e[0]}=${(f)}`).join('&') 
-            : `${e[0]}=${(e[1])}`)
-        .join('&');
-}
+                ? e[1].map(f => `${e[0]}=${(f)}`).join("&")
+                : `${e[0]}=${(e[1])}`
+        )
+        .join("&");
+};
 export const QueryStringToMap = (query: string) => {
     const keyValue = query.slice(query.indexOf("?") + 1).split("&");
     const param: { [k: string]: string | string[] } = {};
@@ -23,13 +22,11 @@ export const QueryStringToMap = (query:string) =>{
         const pv = param[k];
         if (pv === undefined) {
             param[k] = v;
-        }
-        else if(typeof pv === "string"){
+        } else if (typeof pv === "string") {
             param[k] = [pv, v];
-        }
-        else{
+        } else {
             pv.push(v);
         }
     });
     return param;
-}
+};

src/client/app.tsx

@@ -1,21 +1,21 @@
-import React, { createContext, useEffect, useRef, useState } from 'react';
-import ReactDom from 'react-dom';
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { createTheme, ThemeProvider } from "@mui/material";
+import React, { createContext, useEffect, useRef, useState } from "react";
+import ReactDom from "react-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import {
-    Gallery,
+    DifferencePage,
     DocumentAbout,
+    Gallery,
     LoginPage,
     NotFoundPage,
     ProfilePage,
-    DifferencePage,
-    SettingPage,
     ReaderPage,
-    TagsPage
-} from './page/mod';
-import { getInitialValue, UserContext } from './state';
-import { ThemeProvider, createTheme } from '@mui/material';
+    SettingPage,
+    TagsPage,
+} from "./page/mod";
+import { getInitialValue, UserContext } from "./state";
 
-import './css/style.css';
+import "./css/style.css";
 
 const theme = createTheme();
 
@@ -31,16 +31,18 @@ const App = () => {
     })();
     // useEffect(()=>{});
     return (
-        <UserContext.Provider value={{
+        <UserContext.Provider
+            value={{
                 username: user,
                 setUsername: setUser,
                 permission: userPermission,
-            setPermission: setUserPermission
-        }}>
+                setPermission: setUserPermission,
+            }}
+        >
             <ThemeProvider theme={theme}>
                 <BrowserRouter>
                     <Routes>
-                        <Route path="/" element={<Navigate replace to='/search?' />} />
+                        <Route path="/" element={<Navigate replace to="/search?" />} />
                         <Route path="/search" element={<Gallery />} />
                         <Route path="/doc/:id" element={<DocumentAbout />}></Route>
                         <Route path="/doc/:id/reader" element={<ReaderPage />}></Route>
@@ -53,10 +55,11 @@ const App = () => {
                     </Routes>
                 </BrowserRouter>
             </ThemeProvider>
-        </UserContext.Provider>);
+        </UserContext.Provider>
+    );
 };
 
 ReactDom.render(
     <App />,
-    document.getElementById("root")
+    document.getElementById("root"),
 );

src/client/build.ts

@@ -1,25 +1,24 @@
-import esbuild from 'esbuild';
+import esbuild from "esbuild";
 
 async function main() {
     try {
         const result = await esbuild.build({
-            entryPoints: ['app.tsx'],
+            entryPoints: ["app.tsx"],
             bundle: true,
-            outfile: '../../dist/bundle.js',
-            platform: 'browser',
+            outfile: "../../dist/bundle.js",
+            platform: "browser",
             sourcemap: true,
             minify: true,
-            target: ['chrome100', 'firefox100'],
+            target: ["chrome100", "firefox100"],
             watch: {
                 onRebuild: async (err, _result) => {
                     if (err) {
-                        console.error('watch build failed: ',err);
-                    }
-                    else{
-                        console.log('watch build success');
-                    }
-                }
+                        console.error("watch build failed: ", err);
+                    } else {
+                        console.log("watch build success");
                     }
+                },
+            },
         });
         console.log("watching...");
         return result;

src/client/component/contentinfo.tsx

@@ -1,27 +1,27 @@
-import React, { } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Document } from '../accessor/document';
+import React, {} from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { Document } from "../accessor/document";
 
-import { Link, Paper, Theme, Box, useTheme, Typography, Grid, Button } from '@mui/material';
-import { ThumbnailContainer } from '../page/reader/reader';
-import { TagChip } from '../component/tagchip';
+import { Box, Button, Grid, Link, Paper, Theme, Typography, useTheme } from "@mui/material";
+import { TagChip } from "../component/tagchip";
+import { ThumbnailContainer } from "../page/reader/reader";
 
-import DocumentAccessor from '../accessor/document';
+import DocumentAccessor from "../accessor/document";
 
 export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
 export const makeContentReaderUrl = (id: number) => `/doc/${id}/reader`;
 
-const useStyles = ((theme: Theme) => ({
+const useStyles = (theme: Theme) => ({
     thumbnail_content: {
-        maxHeight: '400px',
-        maxWidth: 'min(400px, 100vw)',
+        maxHeight: "400px",
+        maxWidth: "min(400px, 100vw)",
     },
     tag_list: {
-        display: 'flex',
-        justifyContent: 'flex-start',
-        flexWrap: 'wrap',
-        overflowY: 'hidden',
-        '& > *': {
+        display: "flex",
+        justifyContent: "flex-start",
+        flexWrap: "wrap",
+        overflowY: "hidden",
+        "& > *": {
             margin: theme.spacing(0.5),
         },
     },
@@ -32,107 +32,125 @@ const useStyles = ((theme: Theme) => ({
         padding: theme.spacing(2),
     },
     subinfoContainer: {
-        display: 'grid',
-        gridTemplateColumns: '100px auto',
-        overflowY: 'hidden',
-        alignItems: 'baseline',
+        display: "grid",
+        gridTemplateColumns: "100px auto",
+        overflowY: "hidden",
+        alignItems: "baseline",
     },
     short_subinfoContainer: {
         [theme.breakpoints.down("md")]: {
-            display: 'none',
+            display: "none",
         },
     },
     short_root: {
-        overflowY: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
+        overflowY: "hidden",
+        display: "flex",
+        flexDirection: "column",
         [theme.breakpoints.up("sm")]: {
             height: 200,
-            flexDirection: 'row',
+            flexDirection: "row",
         },
     },
     short_thumbnail_anchor: {
-        background: '#272733',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        background: "#272733",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         [theme.breakpoints.up("sm")]: {
             width: theme.spacing(25),
             height: theme.spacing(25),
             flexShrink: 0,
-        }
+        },
     },
     short_thumbnail_content: {
-        maxWidth: '100%',
-        maxHeight: '100%',
+        maxWidth: "100%",
+        maxHeight: "100%",
     },
-}))
+});
 
 export const ContentInfo = (props: {
-    document: Document, children?: React.ReactNode, classes?: {
-        root?: string,
-        thumbnail_anchor?: string,
-        thumbnail_content?: string,
-        tag_list?: string,
-        title?: string,
-        infoContainer?: string,
-        subinfoContainer?: string
-    },
-    gallery?: string,
-    short?: boolean
+    document: Document;
+    children?: React.ReactNode;
+    classes?: {
+        root?: string;
+        thumbnail_anchor?: string;
+        thumbnail_content?: string;
+        tag_list?: string;
+        title?: string;
+        infoContainer?: string;
+        subinfoContainer?: string;
+    };
+    gallery?: string;
+    short?: boolean;
 }) => {
-    //const classes = useStyles();
     const theme = useTheme();
     const document = props.document;
-    /*const rootName = props.short ? classes.short_root : classes.root;
-    const thumbnail_anchor = props.short ? classes.short_thumbnail_anchor : "";
-    const thumbnail_content = props.short ? classes.short_thumbnail_content :
-        classes.thumbnail_content;
-    const subinfoContainer = props.short ? classes.short_subinfoContainer :
-        classes.subinfoContainer;*/
     const url = props.gallery === undefined ? makeContentReaderUrl(document.id) : makeContentInfoUrl(document.id);
-    return (<Paper sx={{
+    return (
+        <Paper
+            sx={{
                 display: "flex",
                 height: "400px",
                 [theme.breakpoints.down("sm")]: {
                     flexDirection: "column",
                     alignItems: "center",
-        }
-    }} elevation={4}>
-        <Link /*className={propclasses.thumbnail_anchor ?? thumbnail_anchor}*/ component={RouterLink} to={{
-            pathname: makeContentReaderUrl(document.id)
-        }}>
-            {document.deleted_at === null ?
-                (<ThumbnailContainer content={document}/>)
-                : (<Typography/* className={propclasses.thumbnail_content ?? thumbnail_content} */ variant='h4'>Deleted</Typography>)}
+                    height: "auto",
+                },
+            }}
+            elevation={4}
+        >
+            <Link
+                component={RouterLink}
+                to={{
+                    pathname: makeContentReaderUrl(document.id),
+                }}
+            >
+                {document.deleted_at === null
+                    ? <ThumbnailContainer content={document} />
+                    : <Typography variant="h4">Deleted</Typography>}
             </Link>
-        <Box /*className={propclasses.infoContainer ?? classes.infoContainer}*/>
-            <Link variant='h5' color='inherit' component={RouterLink} to={{pathname: url}}
-                /*className={propclasses.title ?? classes.title}*/>
+            <Box>
+                <Link variant="h5" color="inherit" component={RouterLink} to={{ pathname: url }}>
                     {document.title}
                 </Link>
-            <Box /*className={propclasses.subinfoContainer ?? subinfoContainer}*/>
-                {props.short ? (<Box /*className={propclasses.tag_list ?? classes.tag_list}*/>{document.tags.map(x =>
-                    (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)
-                )}</Box>) : (
-                    <ComicDetailTag tags={document.tags} path={document.basepath+"/"+document.filename}
+                <Box>
+                    {props.short
+                        ? (
+                            <Box>
+                                {document.tags.map(x => (
+                                    <TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>
+                                ))}
+                            </Box>
+                        )
+                        : (
+                            <ComicDetailTag
+                                tags={document.tags}
+                                path={document.basepath + "/" + document.filename}
                                 createdAt={document.created_at}
                                 deletedAt={document.deleted_at != null ? document.deleted_at : undefined}
-                    /* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
-                }
+                            >
+                            </ComicDetailTag>
+                        )}
                 </Box>
-            {document.deleted_at != null &&
-            <Button onClick={()=>{documentDelete(document.id);}}>Delete</Button>
-            }
+                {document.deleted_at != null
+                    && (
+                        <Button
+                            onClick={() => {
+                                documentDelete(document.id);
+                            }}
+                        >
+                            Delete
+                        </Button>
+                    )}
             </Box>
-    </Paper>);
-}
+        </Paper>
+    );
+};
 async function documentDelete(id: number) {
     const t = await DocumentAccessor.del(id);
     if (t) {
         alert("document deleted!");
-    }
-    else{
+    } else {
         alert("document already deleted.");
     }
 }
@@ -153,40 +171,54 @@ function ComicDetailTag(prop: {
         tagTable[kind] = tags;
         allTag = allTag.filter(x => !x.startsWith(kind + ":"));
     }
-    return (<Grid container>
+    return (
+        <Grid container>
             {tagKind.map(key => (
                 <React.Fragment key={key}>
                     <Grid item xs={3}>
-                    <Typography variant='subtitle1'>{key}</Typography>
+                        <Typography variant="subtitle1">{key}</Typography>
                     </Grid>
                     <Grid item xs={9}>
                         <Box>{tagTable[key].length !== 0 ? tagTable[key].join(", ") : "N/A"}</Box>
                     </Grid>
                 </React.Fragment>
             ))}
-        { prop.path != undefined && <><Grid item xs={3}>
-            <Typography variant='subtitle1'>Path</Typography>
-        </Grid><Grid item xs={9}>
-                <Box>{prop.path}</Box>
-            </Grid></>
-        }
-        { prop.createdAt != undefined && <><Grid item xs={3}>
-            <Typography variant='subtitle1'>CreatedAt</Typography>
-        </Grid><Grid item xs={9}>
-                <Box>{new Date(prop.createdAt).toUTCString()}</Box>
-            </Grid></>
-        }
-        { prop.deletedAt != undefined && <><Grid item xs={3}>
-            <Typography variant='subtitle1'>DeletedAt</Typography>
-        </Grid><Grid item xs={9}>
-                <Box>{new Date(prop.deletedAt).toUTCString()}</Box>
-            </Grid></>
-        }
+            {prop.path != undefined && (
+                <>
                     <Grid item xs={3}>
-        <Typography variant='subtitle1'>Tags</Typography>
+                        <Typography variant="subtitle1">Path</Typography>
                     </Grid>
                     <Grid item xs={9}>
-            {allTag.map(x => (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>))}
+                        <Box>{prop.path}</Box>
                     </Grid>
-    </Grid>);
+                </>
+            )}
+            {prop.createdAt != undefined && (
+                <>
+                    <Grid item xs={3}>
+                        <Typography variant="subtitle1">CreatedAt</Typography>
+                    </Grid>
+                    <Grid item xs={9}>
+                        <Box>{new Date(prop.createdAt).toUTCString()}</Box>
+                    </Grid>
+                </>
+            )}
+            {prop.deletedAt != undefined && (
+                <>
+                    <Grid item xs={3}>
+                        <Typography variant="subtitle1">DeletedAt</Typography>
+                    </Grid>
+                    <Grid item xs={9}>
+                        <Box>{new Date(prop.deletedAt).toUTCString()}</Box>
+                    </Grid>
+                </>
+            )}
+            <Grid item xs={3}>
+                <Typography variant="subtitle1">Tags</Typography>
+            </Grid>
+            <Grid item xs={9}>
+                {allTag.map(x => <TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)}
+            </Grid>
+        </Grid>
+    );
 }

src/client/component/headline.tsx

@@ -1,21 +1,35 @@
-import React, { useContext, useState } from 'react';
+import { AccountCircle, ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon } from "@mui/icons-material";
 import {
-    Button, CssBaseline, Divider, IconButton, List, ListItem, Drawer,
-    AppBar, Toolbar, Typography, InputBase, ListItemIcon, ListItemText, Menu, MenuItem,
-    Hidden, Tooltip, Link, styled
-} from '@mui/material';
-import { alpha, Theme, useTheme } from '@mui/material/styles';
-import {
-    ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon, AccountCircle
-} from '@mui/icons-material';
+    AppBar,
+    Button,
+    CssBaseline,
+    Divider,
+    Drawer,
+    Hidden,
+    IconButton,
+    InputBase,
+    Link,
+    List,
+    ListItem,
+    ListItemIcon,
+    ListItemText,
+    Menu,
+    MenuItem,
+    styled,
+    Toolbar,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import { alpha, Theme, useTheme } from "@mui/material/styles";
+import React, { useContext, useState } from "react";
 
-import { Link as RouterLink, useNavigate } from 'react-router-dom';
-import { doLogout, UserContext } from '../state';
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { doLogout, UserContext } from "../state";
 
 const drawerWidth = 270;
 
-const DrawerHeader = styled('div')(({ theme }) => ({
-    ...theme.mixins.toolbar
+const DrawerHeader = styled("div")(({ theme }) => ({
+    ...theme.mixins.toolbar,
 }));
 
 const StyledDrawer = styled(Drawer)(({ theme }) => ({
@@ -24,51 +38,56 @@ const StyledDrawer = styled(Drawer)(({ theme }) => ({
     [theme.breakpoints.up("sm")]: {
         width: drawerWidth,
     },
-}
-));
-const StyledSearchBar = styled('div')(({ theme }) => ({
-    position: 'relative',
+}));
+const StyledSearchBar = styled("div")(({ theme }) => ({
+    position: "relative",
     borderRadius: theme.shape.borderRadius,
     backgroundColor: alpha(theme.palette.common.white, 0.15),
-    '&:hover': {
+    "&:hover": {
         backgroundColor: alpha(theme.palette.common.white, 0.25),
     },
     marginLeft: 0,
-    width: '100%',
-    [theme.breakpoints.up('sm')]: {
+    width: "100%",
+    [theme.breakpoints.up("sm")]: {
         marginLeft: theme.spacing(1),
-        width: 'auto',
+        width: "auto",
     },
 }));
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
-    color: 'inherit',
-    '& .MuiInputBase-input': {
+    color: "inherit",
+    "& .MuiInputBase-input": {
         padding: theme.spacing(1, 1, 1, 0),
         // vertical padding + font size from searchIcon
         paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-        transition: theme.transitions.create('width'),
-        width: '100%',
-        [theme.breakpoints.up('sm')]: {
-            width: '12ch',
-            '&:focus': {
-                width: '20ch',
+        transition: theme.transitions.create("width"),
+        width: "100%",
+        [theme.breakpoints.up("sm")]: {
+            width: "12ch",
+            "&:focus": {
+                width: "20ch",
             },
         },
     },
 }));
 
+const StyledNav = styled("nav")(({ theme }) => ({
+    [theme.breakpoints.up("sm")]: {
+        width: theme.spacing(7),
+    },
+}));
+
 const closedMixin = (theme: Theme) => ({
-    overflowX: 'hidden',
+    overflowX: "hidden",
     width: `calc(${theme.spacing(7)} + 1px)`,
 });
 
 export const Headline = (prop: {
-    children?: React.ReactNode,
+    children?: React.ReactNode;
     classes?: {
-        content?: string,
-        toolbar?: string,
-    },
-    menu: React.ReactNode
+        content?: string;
+        toolbar?: string;
+    };
+    menu: React.ReactNode;
 }) => {
     const [v, setv] = useState(false);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -77,25 +96,36 @@ export const Headline = (prop: {
     const handleProfileMenuOpen = (e: React.MouseEvent<HTMLElement>) => setAnchorEl(e.currentTarget);
     const handleProfileMenuClose = () => setAnchorEl(null);
     const isProfileMenuOpened = Boolean(anchorEl);
-    const menuId = 'primary-search-account-menu';
+    const menuId = "primary-search-account-menu";
     const user_ctx = useContext(UserContext);
     const isLogin = user_ctx.username !== "";
     const navigate = useNavigate();
     const [search, setSearch] = useState("");
 
-    const renderProfileMenu = (<Menu
+    const renderProfileMenu = (
+        <Menu
             anchorEl={anchorEl}
-        anchorOrigin={{ horizontal: 'right', vertical: "top" }}
+            anchorOrigin={{ horizontal: "right", vertical: "top" }}
             id={menuId}
             open={isProfileMenuOpened}
             keepMounted
-        transformOrigin={{ horizontal: 'right', vertical: "top" }}
+            transformOrigin={{ horizontal: "right", vertical: "top" }}
             onClose={handleProfileMenuClose}
         >
-        <MenuItem component={RouterLink} to='/profile'>Profile</MenuItem>
-        <MenuItem onClick={async () => { handleProfileMenuClose(); await doLogout(); user_ctx.setUsername(""); }}>Logout</MenuItem>
-    </Menu>);
-    const drawer_contents = (<>
+            <MenuItem component={RouterLink} to="/profile">Profile</MenuItem>
+            <MenuItem
+                onClick={async () => {
+                    handleProfileMenuClose();
+                    await doLogout();
+                    user_ctx.setUsername("");
+                }}
+            >
+                Logout
+            </MenuItem>
+        </Menu>
+    );
+    const drawer_contents = (
+        <>
             <DrawerHeader>
                 <IconButton onClick={toggleV}>
                     {theme.direction === "ltr" ? <ChevronLeft /> : <ChevronRight />}
@@ -103,19 +133,25 @@ export const Headline = (prop: {
             </DrawerHeader>
             <Divider />
             {prop.menu}
-    </>);
+        </>
+    );
 
-    return (<div style={{ display: 'flex' }}>
+    return (
+        <div style={{ display: "flex" }}>
             <CssBaseline />
-        <AppBar position="fixed" sx={{
+            <AppBar
+                position="fixed"
+                sx={{
                     zIndex: theme.zIndex.drawer + 1,
-            transition: theme.transitions.create(['width', 'margin'], {
+                    transition: theme.transitions.create(["width", "margin"], {
                         easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.leavingScreen
-            })
-        }}>
+                        duration: theme.transitions.duration.leavingScreen,
+                    }),
+                }}
+            >
                 <Toolbar>
-                <IconButton color="inherit"
+                    <IconButton
+                        color="inherit"
                         aria-label="open drawer"
                         onClick={toggleV}
                         edge="start"
@@ -123,90 +159,114 @@ export const Headline = (prop: {
                     >
                         <MenuIcon></MenuIcon>
                     </IconButton>
-                <Link variant="h5" noWrap sx={{
-                    display: 'none',
+                    <Link
+                        variant="h5"
+                        noWrap
+                        sx={{
+                            display: "none",
                             [theme.breakpoints.up("sm")]: {
-                        display: 'block'
-                    }
-                }} color="inherit" component={RouterLink} to="/">
+                                display: "block",
+                            },
+                        }}
+                        color="inherit"
+                        component={RouterLink}
+                        to="/"
+                    >
                         Ionian
                     </Link>
                     <div style={{ flexGrow: 1 }}></div>
                     <StyledSearchBar>
-                    <div style={{
+                        <div
+                            style={{
                                 padding: theme.spacing(0, 2),
-                        height: '100%',
-                        position: 'absolute',
-                        pointerEvents: 'none',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                    }}>
+                                height: "100%",
+                                position: "absolute",
+                                pointerEvents: "none",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }}
+                        >
                             <SearchIcon onClick={() => navSearch(search)} />
                         </div>
-                    <StyledInputBase placeholder="search"
+                        <StyledInputBase
+                            placeholder="search"
                             onChange={(e) => setSearch(e.target.value)}
                             onKeyUp={(e) => {
                                 if (e.key === "Enter") {
                                     navSearch(search);
                                 }
                             }}
-                        value={search}></StyledInputBase>
+                            value={search}
+                        >
+                        </StyledInputBase>
                     </StyledSearchBar>
-                {
-                    isLogin ?
+                    {isLogin
+                        ? (
                             <IconButton
                                 edge="end"
                                 aria-label="account of current user"
                                 aria-controls={menuId}
                                 aria-haspopup="true"
                                 onClick={handleProfileMenuOpen}
-                            color="inherit">
+                                color="inherit"
+                            >
                                 <AccountCircle />
                             </IconButton>
-                        : <Button color="inherit" component={RouterLink} to="/login">Login</Button>
-                }
+                        )
+                        : <Button color="inherit" component={RouterLink} to="/login">Login</Button>}
                 </Toolbar>
             </AppBar>
             {renderProfileMenu}
-        <nav style={{ width: theme.spacing(7) }}>
+            <StyledNav>
                 <Hidden smUp implementation="css">
-                <StyledDrawer variant="temporary" anchor='left' open={v} onClose={toggleV}
+                    <StyledDrawer
+                        variant="temporary"
+                        anchor="left"
+                        open={v}
+                        onClose={toggleV}
                         sx={{
-                        width: drawerWidth
+                            width: drawerWidth,
                         }}
                     >
                         {drawer_contents}
                     </StyledDrawer>
                 </Hidden>
-            <Hidden xsDown implementation="css">
-                <StyledDrawer variant='permanent' anchor='left'
+                <Hidden smDown implementation="css">
+                    <StyledDrawer
+                        variant="permanent"
+                        anchor="left"
                         sx={{
                             ...closedMixin(theme),
-                        '& .MuiDrawer-paper': closedMixin(theme),
-                    }}>
+                            "& .MuiDrawer-paper": closedMixin(theme),
+                        }}
+                    >
                         {drawer_contents}
                     </StyledDrawer>
                 </Hidden>
-        </nav>
-        <main style={{
-            display: 'flex',
-            flexFlow: 'column',
+            </StyledNav>
+            <main
+                style={{
+                    display: "flex",
+                    flexFlow: "column",
                     flexGrow: 1,
                     padding: theme.spacing(3),
                     marginTop: theme.spacing(6),
-        }}>
-            <div style={{
-            }} ></div>
+                }}
+            >
+                <div style={{}}></div>
                 {prop.children}
             </main>
-    </div>);
+        </div>
+    );
     function navSearch(search: string) {
         let words = search.includes("&") ? search.split("&") : [search];
         words = words.map(w => w.trim())
-            .map(w => w.includes(":") ? 
-                `allow_tag=${w}` 
-                : `word=${encodeURIComponent(w)}`);
+            .map(w =>
+                w.includes(":")
+                    ? `allow_tag=${w}`
+                    : `word=${encodeURIComponent(w)}`
+            );
         navigate(`/search?${words.join("&")}`);
     }
 };

src/client/component/loading.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
-import {Box, CircularProgress} from '@mui/material';
+import { Box, CircularProgress } from "@mui/material";
+import React from "react";
 
 export const LoadingCircle = () => {
-    return (<Box style={{position:"absolute", top:"50%", left:"50%", transform:"translate(-50%,-50%)"}}>
+    return (
+        <Box style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }}>
             <CircularProgress title="loading" />
-        </Box>);
-}
+        </Box>
+    );
+};

src/client/component/mod.ts

@@ -1,5 +1,5 @@
-export * from './contentinfo';
-export * from './loading';
-export * from './tagchip';
-export * from './navlist';
-export * from './headline';
+export * from "./contentinfo";
+export * from "./headline";
+export * from "./loading";
+export * from "./navlist";
+export * from "./tagchip";

src/client/component/navlist.tsx

@@ -1,36 +1,50 @@
-import React from 'react';
-import {List, ListItem, ListItemIcon, Tooltip, ListItemText, Divider} from '@mui/material';
-import {ArrowBack as ArrowBackIcon, Settings as SettingIcon, 
-    Collections as CollectionIcon, VideoLibrary as VideoIcon, Home as HomeIcon,
+import {
+    ArrowBack as ArrowBackIcon,
+    Collections as CollectionIcon,
+    Folder as FolderIcon,
+    Home as HomeIcon,
     List as ListIcon,
-    Folder as FolderIcon } from '@mui/icons-material';
-import {Link as RouterLink} from 'react-router-dom';
+    Settings as SettingIcon,
+    VideoLibrary as VideoIcon,
+} from "@mui/icons-material";
+import { Divider, List, ListItem, ListItemIcon, ListItemText, Tooltip } from "@mui/material";
+import React from "react";
+import { Link as RouterLink } from "react-router-dom";
 
-export const NavItem = (props:{name:string,to:string, icon:React.ReactElement<any,any>})=>{
-    return (<ListItem button key={props.name} component={RouterLink} to={props.to}>
+export const NavItem = (props: { name: string; to: string; icon: React.ReactElement<any, any> }) => {
+    return (
+        <ListItem button key={props.name} component={RouterLink} to={props.to}>
             <ListItemIcon>
                 <Tooltip title={props.name.toLocaleLowerCase()} placement="bottom">
                     {props.icon}
                 </Tooltip>
             </ListItemIcon>
             <ListItemText primary={props.name}></ListItemText>
-</ListItem>);
-}
+        </ListItem>
+    );
+};
 
 export const NavList = (props: { children?: React.ReactNode }) => {
-    return (<List>
+    return (
+        <List>
             {props.children}
-        </List>);
-}
+        </List>
+    );
+};
 
 export const BackItem = (props: { to?: string }) => {
     return <NavItem name="Back" to={props.to ?? "/"} icon={<ArrowBackIcon></ArrowBackIcon>} />;
-}
+};
 
 export function CommonMenuList(props?: { url?: string }) {
     let url = props?.url ?? "";
-    return (<NavList>
-        {url !== "" && <><BackItem to={url} /> <Divider /></>}
+    return (
+        <NavList>
+            {url !== "" && (
+                <>
+                    <BackItem to={url} /> <Divider />
+                </>
+            )}
             <NavItem name="All" to="/" icon={<HomeIcon />} />
             <NavItem name="Comic" to="/search?content_type=comic" icon={<CollectionIcon />}></NavItem>
             <NavItem name="Video" to="/search?content_type=video" icon={<VideoIcon />} />
@@ -39,5 +53,6 @@ export function CommonMenuList(props?:{url?:string}) {
             <Divider />
             <NavItem name="Difference" to="/difference" icon={<FolderIcon />}></NavItem>
             <NavItem name="Settings" to="/setting" icon={<SettingIcon />} />
-    </NavList>);
+        </NavList>
+    );
 }

src/client/component/tagchip.tsx

@@ -1,86 +1,78 @@
-import React from 'react';
-import {ChipTypeMap} from '@mui/material/Chip';
-import { Chip, colors } from '@mui/material';
-import { Theme, emphasize} from '@mui/material/styles';
-import {Link as RouterLink} from 'react-router-dom';
+import * as colors from "@mui/material/colors";
+import Chip, { ChipTypeMap } from "@mui/material/Chip";
+import { emphasize, styled, Theme, useTheme } from "@mui/material/styles";
+import React from "react";
+import { Link as RouterLink } from "react-router-dom";
 
 type TagChipStyleProp = {
-    color: string
-}
-
-const useTagStyles = ((theme:Theme)=>({
-    root:(props:TagChipStyleProp)=>({
-        color: theme.palette.getContrastText(props.color),
-        backgroundColor: props.color,
-    }),
-    clickable:(props:TagChipStyleProp)=>({
-        '&:hover, &:focus':{
-            backgroundColor:emphasize(props.color,0.08)
-        }
-    }),
-    deletable: {
-        '&:focus': {
-            backgroundColor: (props:TagChipStyleProp)=>emphasize(props.color, 0.2),
-        }
-    },
-    outlined:{
-        color: (props:TagChipStyleProp)=>props.color,
-        border: (props:TagChipStyleProp)=> `1px solid ${props.color}`,
-        '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
-            //backgroundColor:(props:TagChipStyleProp)=> (props.color,theme.palette.action.hoverOpacity),
-        },
-    },
-    icon:{
-        color:"inherit",
-    },
-    deleteIcon:{
-        //color:(props:TagChipStyleProp)=> (theme.palette.getContrastText(props.color),0.7),
-        "&:hover, &:active":{
-            color:(props:TagChipStyleProp)=>theme.palette.getContrastText(props.color),
-        }
-    }
-}));
+    color: `rgba(${number},${number},${number},${number})` | `#${string}` | 'default';
+};
 
 const { blue, pink } = colors;
-const getTagColorName = (tagname :string):string=>{
+const getTagColorName = (tagname: string): TagChipStyleProp['color'] => {
     if (tagname.startsWith("female")) {
         return pink[600];
-    }
-    else if(tagname.startsWith("male")){
+    } else if (tagname.startsWith("male")) {
         return blue[600];
-    }
-    else return "default";
-}
+    } else return "default";
+};
 
-type ColorChipProp = Omit<ChipTypeMap['props'],"color"> & TagChipStyleProp & {
-    component?: React.ElementType,
-    to?: string
-}
+type ColorChipProp = Omit<ChipTypeMap["props"], "color"> & TagChipStyleProp & {
+    component?: React.ElementType;
+    to?: string;
+};
 
 export const ColorChip = (props: ColorChipProp) => {
     const { color, ...rest } = props;
-    //const classes = useTagStyles({color : color !== "default" ? color : "#000"});
-    return <Chip color="default" {...rest}></Chip>;
-}
+    const theme = useTheme();
 
-type TagChipProp = Omit<ChipTypeMap['props'],"color"> & {
-    tagname:string
+    let newcolor = color;
+    if (color === "default"){
+        newcolor = "#ebebeb";
     }
+    return <Chip 
+    sx={{
+        color: theme.palette.getContrastText(newcolor),
+        backgroundColor: newcolor,
+        ["&:hover, &:focus"]: {
+            backgroundColor: emphasize(newcolor, 0.08),
+        },
+    }} 
+    {...rest}></Chip>;
+};
+
+type TagChipProp = Omit<ChipTypeMap["props"], "color"> & {
+    tagname: string;
+};
 
 export const TagChip = (props: TagChipProp) => {
     const { tagname, label, clickable, ...rest } = props;
-    let newlabel:string|undefined = undefined;
+    const colorName = getTagColorName(tagname);
+
+    let newlabel: React.ReactNode = label;
     if (typeof label === "string") {
-        if(label.startsWith("female:")){
-            newlabel ="♀ "+label.slice(7);
-        }
-        else if(label.startsWith("male:")){
-            newlabel = "♂ "+label.slice(5);
+        const female = "female:";
+        const male = "male:";
+        if (label.startsWith(female)) {
+            newlabel = "♀ " + label.slice(female.length);
+        } else if (label.startsWith(male)) {
+            newlabel = "♂ " + label.slice(male.length);
         }
     }
-    const inner = clickable ? 
-    (<ColorChip color={getTagColorName(tagname)} clickable={clickable} label={newlabel??label} {...rest} 
-    component={RouterLink} to={`/search?allow_tag=${tagname}`}></ColorChip>):
-    (<ColorChip color={getTagColorName(tagname)} clickable={clickable} label={newlabel??label} {...rest}></ColorChip>);
+    
+    const inner = clickable
+        ? (
+            <ColorChip
+                color={colorName}
+                clickable={clickable}
+                label={newlabel ?? label}
+                {...rest}
+                component={RouterLink}
+                to={`/search?allow_tag=${tagname}`}
+            />
+        )
+        : (
+            <ColorChip color={colorName} clickable={clickable} label={newlabel ?? label} {...rest}/>
+        );
     return inner;
-}
+};

src/client/page/404.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import {Typography} from '@mui/material';
-import {ArrowBack as ArrowBackIcon} from '@mui/icons-material';
-import { Headline, BackItem, NavList, CommonMenuList } from '../component/mod';
+import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
+import { Typography } from "@mui/material";
+import React from "react";
+import { BackItem, CommonMenuList, Headline, NavList } from "../component/mod";
 
 export const NotFoundPage = () => {
     const menu = CommonMenuList();
-    return <Headline menu={menu}>
-        <Typography variant='h2'>404 Not Found</Typography>
+    return (
+        <Headline menu={menu}>
+            <Typography variant="h2">404 Not Found</Typography>
         </Headline>
+    );
 };

src/client/page/contentinfo.tsx

@@ -1,31 +1,31 @@
-import React, { useState, useEffect } from 'react';
-import { Route, Routes, useLocation, useParams } from 'react-router-dom';
-import DocumentAccessor, { Document } from '../accessor/document';
-import { LoadingCircle } from '../component/loading';
-import { Theme, Typography } from '@mui/material';
-import { getPresenter } from './reader/reader';
-import { CommonMenuList, ContentInfo, Headline } from '../component/mod';
-import { NotFoundPage } from './404';
+import { Theme, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Route, Routes, useLocation, useParams } from "react-router-dom";
+import DocumentAccessor, { Document } from "../accessor/document";
+import { LoadingCircle } from "../component/loading";
+import { CommonMenuList, ContentInfo, Headline } from "../component/mod";
+import { NotFoundPage } from "./404";
+import { getPresenter } from "./reader/reader";
 
 export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
 export const makeComicReaderUrl = (id: number) => `/doc/${id}/reader`;
 
 type DocumentState = {
-    doc: Document | undefined,
-    notfound: boolean,
-}
+    doc: Document | undefined;
+    notfound: boolean;
+};
 
-const styles = ((theme: Theme) => ({
+const styles = (theme: Theme) => ({
     noPaddingContent: {
-        display: 'flex',
-        flexDirection: 'column',
+        display: "flex",
+        flexDirection: "column",
         flexGrow: 1,
     },
     noPaddingToolbar: {
-        flex: '0 1 auto',
+        flex: "0 1 auto",
         ...theme.mixins.toolbar,
-    }
-}));
+    },
+});
 
 export function ReaderPage(props?: {}) {
     const location = useLocation();
@@ -49,28 +49,28 @@ export function ReaderPage(props?: {}) {
     if (isNaN(id)) {
         return (
             <Headline menu={menu_list()}>
-                <Typography variant='h2'>Oops. Invalid ID</Typography>
+                <Typography variant="h2">Oops. Invalid ID</Typography>
             </Headline>
         );
-    }
-    else if (info.notfound) {
+    } else if (info.notfound) {
         return (
             <Headline menu={menu_list()}>
-                <Typography variant='h2'>Content has been removed.</Typography>
+                <Typography variant="h2">Content has been removed.</Typography>
             </Headline>
-        )
-    }
-    else if (info.doc === undefined) {
-        return (<Headline menu={menu_list()}>
+        );
+    } else if (info.doc === undefined) {
+        return (
+            <Headline menu={menu_list()}>
                 <LoadingCircle />
             </Headline>
         );
-    }
-    else {
+    } else {
         const ReaderPage = getPresenter(info.doc);
-        return <Headline menu={menu_list(location.pathname)}>
+        return (
+            <Headline menu={menu_list(location.pathname)}>
                 <ReaderPage doc={info.doc}></ReaderPage>
             </Headline>
+        );
     }
 }
 
@@ -95,28 +95,26 @@ export const DocumentAbout = (prop?: {}) => {
     if (isNaN(id)) {
         return (
             <Headline menu={menu_list()}>
-                <Typography variant='h2'>Oops. Invalid ID</Typography>
+                <Typography variant="h2">Oops. Invalid ID</Typography>
             </Headline>
         );
-    }
-    else if (info.notfound) {
+    } else if (info.notfound) {
         return (
             <Headline menu={menu_list()}>
-                <Typography variant='h2'>Content has been removed.</Typography>
+                <Typography variant="h2">Content has been removed.</Typography>
             </Headline>
-        )
-    }
-    else if (info.doc === undefined) {
-        return (<Headline menu={menu_list()}>
+        );
+    } else if (info.doc === undefined) {
+        return (
+            <Headline menu={menu_list()}>
                 <LoadingCircle />
             </Headline>
         );
-    }
-    else {
+    } else {
         return (
             <Headline menu={menu_list()}>
                 <ContentInfo document={info.doc}></ContentInfo>
             </Headline>
         );
     }
-}
+};

src/client/page/difference.tsx

@@ -1,60 +1,72 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { Box, Button, Grid, Paper, Theme, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
+import React, { useContext, useEffect, useState } from "react";
 import { CommonMenuList, Headline } from "../component/mod";
 import { UserContext } from "../state";
-import { Box, Grid, Paper, Typography,Button, Theme } from "@mui/material";
-import {Stack} from '@mui/material';
 
-const useStyles = ((theme:Theme)=>({
+const useStyles = (theme: Theme) => ({
     paper: {
         padding: theme.spacing(2),
     },
     commitable: {
-        display:'grid',
+        display: "grid",
         gridTemplateColumns: `100px auto`,
     },
     contentTitle: {
-        marginLeft: theme.spacing(2)
-    }
-}));
+        marginLeft: theme.spacing(2),
+    },
+});
 type FileDifference = {
-    type:string,
+    type: string;
     value: {
-        type:string,
-        path:string,
-    }[]
-}
-
+        type: string;
+        path: string;
+    }[];
+};
 
 function TypeDifference(prop: {
-    content:FileDifference,
-    onCommit:(v:{type:string,path:string})=>void,
-    onCommitAll:(type:string) => void
+    content: FileDifference;
+    onCommit: (v: { type: string; path: string }) => void;
+    onCommitAll: (type: string) => void;
 }) {
     // const classes = useStyles();
     const x = prop.content;
     const [button_disable, set_disable] = useState(false);
 
-    return (<Paper /*className={classes.paper}*/>
+    return (
+        <Paper /*className={classes.paper}*/>
             <Box /*className={classes.contentTitle}*/>
-                    <Typography variant='h3' >{x.type}</Typography>
-                    <Button variant="contained" key={x.type} onClick={()=>{
+                <Typography variant="h3">{x.type}</Typography>
+                <Button
+                    variant="contained"
+                    key={x.type}
+                    onClick={() => {
                         set_disable(true);
                         prop.onCommitAll(x.type);
                         set_disable(false);
-                    }}>Commit all</Button>
+                    }}
+                >
+                    Commit all
+                </Button>
             </Box>
             {x.value.map(y => (
                 <Box sx={{ display: "flex" }} key={y.path}>
-                                <Button variant="contained" onClick={()=>{
+                    <Button
+                        variant="contained"
+                        onClick={() => {
                             set_disable(true);
                             prop.onCommit(y);
                             set_disable(false);
                         }}
-                                    disabled={button_disable}>Commit</Button>
-                                <Typography variant='h5'>{y.path}</Typography>
+                        disabled={button_disable}
+                    >
+                        Commit
+                    </Button>
+                    <Typography variant="h5">{y.path}</Typography>
                 </Box>
             ))}
-                </Paper>);
+        </Paper>
+    );
 }
 
 export function DifferencePage() {
@@ -64,64 +76,66 @@ export function DifferencePage(){
         FileDifference[]
     >([]);
     const doLoad = async () => {
-        const list = await fetch('/api/diff/list');
+        const list = await fetch("/api/diff/list");
         if (list.ok) {
             const inner = await list.json();
             setDiffList(inner);
-        }
-        else{
+        } else {
             // setDiffList([]);
         }
     };
-    const Commit = async(x:{type:string,path:string})=>{
-        const res = await fetch('/api/diff/commit',{
-            method:'POST',
+    const Commit = async (x: { type: string; path: string }) => {
+        const res = await fetch("/api/diff/commit", {
+            method: "POST",
             body: JSON.stringify([{ ...x }]),
             headers: {
-                'content-type':'application/json'
-            }
+                "content-type": "application/json",
+            },
         });
         const bb = await res.json();
         if (bb.ok) {
             doLoad();
-        }
-        else{
+        } else {
             console.error("fail to add document");
         }
-    }
+    };
     const CommitAll = async (type: string) => {
         const res = await fetch("/api/diff/commitall", {
             method: "POST",
             body: JSON.stringify({ type: type }),
             headers: {
-                'content-type':'application/json'
-            }
+                "content-type": "application/json",
+            },
         });
         const bb = await res.json();
         if (bb.ok) {
             doLoad();
-        }
-        else{
+        } else {
             console.error("fail to add document");
         }
-    }
+    };
     useEffect(
         () => {
             doLoad();
             const i = setInterval(doLoad, 5000);
             return () => {
                 clearInterval(i);
-            }
-        },[]
-    )
+            };
+        },
+        [],
+    );
     const menu = CommonMenuList();
-    return (<Headline menu={menu}>
-        {(ctx.username == "admin") ? (<div>
-            {(diffList.map(x=>
-                <TypeDifference key={x.type} content={x} onCommit={Commit} onCommitAll={CommitAll}/>))}
-        </div>)
-        :(<Typography variant='h2'>Not Allowed : please login as an admin</Typography>)
-        }
-    
-    </Headline>)
+    return (
+        <Headline menu={menu}>
+            {(ctx.username == "admin")
+                ? (
+                    <div>
+                        {diffList.map(x => (
+                            <TypeDifference key={x.type} content={x} onCommit={Commit} onCommitAll={CommitAll} />
+                        ))}
+                    </div>
+                )
+                : <Typography variant="h2">Not Allowed : please login as an admin</Typography>}
+        </Headline>
+    );
 }

src/client/page/gallery.tsx

@@ -1,15 +1,13 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Headline, CommonMenuList, LoadingCircle, ContentInfo, NavList, NavItem, TagChip } from '../component/mod';
-
-import { Box, Typography, Chip, Pagination, Button } from '@mui/material';
-import ContentAccessor, { QueryListOption, Document } from '../accessor/document';
-import { toQueryString } from '../accessor/util';
-
-import { useLocation } from 'react-router-dom';
-import { QueryStringToMap } from '../accessor/util';
-import { useIsElementInViewport } from './reader/reader';
+import React, { useContext, useEffect, useState } from "react";
+import { CommonMenuList, ContentInfo, Headline, LoadingCircle, NavItem, NavList, TagChip } from "../component/mod";
 
+import { Box, Button, Chip, Pagination, Typography } from "@mui/material";
+import ContentAccessor, { Document, QueryListOption } from "../accessor/document";
+import { toQueryString } from "../accessor/util";
 
+import { useLocation } from "react-router-dom";
+import { QueryStringToMap } from "../accessor/util";
+import { useIsElementInViewport } from "./reader/reader";
 
 export type GalleryProp = {
     option?: QueryListOption;
@@ -17,7 +15,7 @@ export type GalleryProp = {
 };
 type GalleryState = {
     documents: Document[] | undefined;
-}
+};
 
 export const GalleryInfo = (props: GalleryProp) => {
     const [state, setState] = useState<GalleryState>({ documents: undefined });
@@ -33,60 +31,72 @@ export const GalleryInfo = (props: GalleryProp) => {
 
     useEffect(() => {
         const abortController = new AbortController();
-        console.log('load first',props.option);
-        const load = (async () => {
+        console.log("load first", props.option);
+        const load = async () => {
             try {
                 const c = await ContentAccessor.findList(props.option);
                 // todo : if c is undefined, retry to fetch 3 times. and show error message.
                 setState({ documents: c });
                 setLoadAll(c.length == 0);
-            }
-            catch(e){
+            } catch (e) {
                 if (e instanceof Error) {
                     setError(e.message);
-                }
-                else{
+                } else {
                     setError("unknown error");
                 }
             }
-        });
+        };
         load();
     }, [props.diff]);
     const queryString = toQueryString(props.option ?? {});
     if (state.documents === undefined && error == null) {
-        return (<LoadingCircle />);
-    }
-    else {
+        return <LoadingCircle />;
+    } else {
         return (
-            <Box sx={{
-                display: 'grid',
-                gridRowGap: '1rem'
-            }}>
-                {props.option !== undefined && props.diff !== "" && <Box>
+            <Box
+                sx={{
+                    display: "grid",
+                    gridRowGap: "1rem",
+                }}
+            >
+                {props.option !== undefined && props.diff !== "" && (
+                    <Box>
                         <Typography variant="h6">search for</Typography>
-                    {props.option.word !== undefined && <Chip label={"search : " + decodeURIComponent(props.option.word)}></Chip>}
-                    {props.option.content_type !== undefined && <Chip label={"type : " + props.option.content_type}></Chip>}
-                    {props.option.allow_tag !== undefined && props.option.allow_tag.map(x => (
-                        <TagChip key={x} tagname={decodeURIComponent(x)} label={decodeURIComponent(x)}></TagChip>))}
-                </Box>}
-                {
-                    state.documents && state.documents.map(x => {
-                        return (<ContentInfo document={x} key={x.id}
-                            gallery={`/search?${queryString}`} short />);
-                    })
-                }
-                {(error && <Typography variant="h5">Error : {error}</Typography>)}
-                <Typography variant="body1" sx={{
+                        {props.option.word !== undefined && (
+                            <Chip label={"search : " + decodeURIComponent(props.option.word)}></Chip>
+                        )}
+                        {props.option.content_type !== undefined && (
+                            <Chip label={"type : " + props.option.content_type}></Chip>
+                        )}
+                        {props.option.allow_tag !== undefined
+                            && props.option.allow_tag.map(x => (
+                                <TagChip key={x} tagname={decodeURIComponent(x)} label={decodeURIComponent(x)}>
+                                </TagChip>
+                            ))}
+                    </Box>
+                )}
+                {state.documents && state.documents.map(x => {
+                    return <ContentInfo document={x} key={x.id} gallery={`/search?${queryString}`} short />;
+                })}
+                {error && <Typography variant="h5">Error : {error}</Typography>}
+                <Typography
+                    variant="body1"
+                    sx={{
                         justifyContent: "center",
-                    textAlign:"center"
-                }}>{state.documents ? state.documents.length : "null"} loaded...</Typography>
-                <Button onClick={()=>loadMore()} disabled={loadAll} ref={elementRef} >{loadAll ? "Load All" : "Load More"}</Button>
+                        textAlign: "center",
+                    }}
+                >
+                    {state.documents ? state.documents.length : "null"} loaded...
+                </Typography>
+                <Button onClick={() => loadMore()} disabled={loadAll} ref={elementRef}>
+                    {loadAll ? "Load All" : "Load More"}
+                </Button>
             </Box>
         );
     }
     function loadMore() {
         let option = { ...props.option };
-        console.log(elementRef)
+        console.log(elementRef);
         if (state.documents === undefined || state.documents.length === 0) {
             console.log("loadall");
             setLoadAll(true);
@@ -95,18 +105,17 @@ export const GalleryInfo = (props: GalleryProp) => {
         const prev_documents = state.documents;
         option.cursor = prev_documents[prev_documents.length - 1].id;
         console.log("load more", option);
-        const load = (async () => {
+        const load = async () => {
             const c = await ContentAccessor.findList(option);
             if (c.length === 0) {
                 setLoadAll(true);
-            }
-            else{
+            } else {
                 setState({ documents: [...prev_documents, ...c] });
             }
-        });
+        };
         load();
     }
-}
+};
 
 export const Gallery = () => {
     const location = useLocation();
@@ -114,8 +123,10 @@ export const Gallery = () => {
     const menu_list = CommonMenuList({ url: location.search });
     let option: QueryListOption = query;
     option.allow_tag = typeof option.allow_tag === "string" ? [option.allow_tag] : option.allow_tag;
-    option.limit = typeof query['limit'] === "string" ? parseInt(query['limit']) : undefined;
-    return (<Headline menu={menu_list}>
+    option.limit = typeof query["limit"] === "string" ? parseInt(query["limit"]) : undefined;
+    return (
+        <Headline menu={menu_list}>
             <GalleryInfo diff={location.search} option={query}></GalleryInfo>
-    </Headline>)
-}
+        </Headline>
+    );
+};

src/client/page/login.tsx

@@ -1,10 +1,21 @@
-import React, { useContext, useState } from 'react';
-import {CommonMenuList, Headline} from '../component/mod';
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText,
-     DialogTitle, MenuList, Paper, TextField, Typography, useTheme } from '@mui/material';
-import { UserContext } from '../state';
-import { useNavigate } from 'react-router-dom';
-import {doLogin as doSessionLogin} from '../state';
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    MenuList,
+    Paper,
+    TextField,
+    Typography,
+    useTheme,
+} from "@mui/material";
+import React, { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CommonMenuList, Headline } from "../component/mod";
+import { UserContext } from "../state";
+import { doLogin as doSessionLogin } from "../state";
 
 export const LoginPage = () => {
     const theme = useTheme();
@@ -14,7 +25,7 @@ export const LoginPage = ()=>{
     const navigate = useNavigate();
     const handleDialogClose = () => {
         setOpenDialog({ ...openDialog, open: false });
-    }
+    };
     const doLogin = async () => {
         try {
             const b = await doSessionLogin(userLoginInfo);
@@ -25,35 +36,43 @@ export const LoginPage = ()=>{
             console.log(`login as ${b.username}`);
             setUsername(b.username);
             setPermission(b.permission);
-        }
-        catch(e){
+        } catch (e) {
             if (e instanceof Error) {
                 console.error(e);
                 setOpenDialog({ open: true, message: e.message });
-            }
-            else console.error(e);
+            } else console.error(e);
             return;
         }
         navigate("/");
-    }
+    };
     const menu = CommonMenuList();
-    return <Headline menu={menu}>
-        <Paper style={{ width: theme.spacing(40), padding: theme.spacing(4), alignSelf:'center'}}>
+    return (
+        <Headline menu={menu}>
+            <Paper style={{ width: theme.spacing(40), padding: theme.spacing(4), alignSelf: "center" }}>
                 <Typography variant="h4">Login</Typography>
                 <div style={{ minHeight: theme.spacing(2) }}></div>
-        <form style={{display:'flex', flexFlow:'column', alignItems:'stretch'}}>
-            <TextField label="username" onChange={(e)=>setUserLoginInfo({...userLoginInfo,username:e.target.value ?? "",})}></TextField>
-            <TextField label="password" type="password"  onKeyDown={(e)=>{if(e.key === 'Enter') doLogin();}}
-                onChange={(e)=>setUserLoginInfo({...userLoginInfo,password:e.target.value ?? "",})}/>
+                <form style={{ display: "flex", flexFlow: "column", alignItems: "stretch" }}>
+                    <TextField
+                        label="username"
+                        onChange={(e) => setUserLoginInfo({ ...userLoginInfo, username: e.target.value ?? "" })}
+                    >
+                    </TextField>
+                    <TextField
+                        label="password"
+                        type="password"
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") doLogin();
+                        }}
+                        onChange={(e) => setUserLoginInfo({ ...userLoginInfo, password: e.target.value ?? "" })}
+                    />
                     <div style={{ minHeight: theme.spacing(2) }}></div>
-            <div style={{display:'flex'}}>
+                    <div style={{ display: "flex" }}>
                         <Button onClick={doLogin}>login</Button>
                         <Button>signin</Button>
                     </div>
                 </form>
             </Paper>
-        <Dialog open={openDialog.open}
-            onClose={handleDialogClose}>
+            <Dialog open={openDialog.open} onClose={handleDialogClose}>
                 <DialogTitle>Login Failed</DialogTitle>
                 <DialogContent>
                     <DialogContentText>detail : {openDialog.message}</DialogContentText>
@@ -63,4 +82,5 @@ export const LoginPage = ()=>{
                 </DialogActions>
             </Dialog>
         </Headline>
-}
+    );
+};

src/client/page/mod.ts

@@ -1,8 +1,8 @@
-export * from './contentinfo';
-export * from './gallery';
-export * from './login';
-export * from './404';
-export * from './profile';
-export * from './difference';
-export * from './setting';
-export * from './tags';
+export * from "./404";
+export * from "./contentinfo";
+export * from "./difference";
+export * from "./gallery";
+export * from "./login";
+export * from "./profile";
+export * from "./setting";
+export * from "./tags";

src/client/page/profile.tsx

@@ -1,19 +1,32 @@
+import {
+    Button,
+    Chip,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Divider,
+    Grid,
+    Paper,
+    TextField,
+    Theme,
+    Typography,
+} from "@mui/material";
+import React, { useContext, useState } from "react";
 import { CommonMenuList, Headline } from "../component/mod";
-import React, { useContext, useState } from 'react';
 import { UserContext } from "../state";
-import { Chip, Grid, Paper, Theme, Typography, Divider, Button,
-     Dialog, DialogTitle, DialogContentText, DialogContent, TextField, DialogActions } from "@mui/material";
 
-const useStyles = ((theme:Theme)=>({
+const useStyles = (theme: Theme) => ({
     paper: {
         alignSelf: "center",
         padding: theme.spacing(2),
     },
     formfield: {
-        display:'flex',
-        flexFlow:'column',
-    }
-}));
+        display: "flex",
+        flexFlow: "column",
+    },
+});
 
 export function ProfilePage() {
     const userctx = useContext(UserContext);
@@ -24,10 +37,8 @@ export function ProfilePage(){
     const [newpw, setNewpw] = useState("");
     const [newpwch, setNewpwch] = useState("");
     const [msg_dialog, set_msg_dialog] = useState({ opened: false, msg: "" });
-    const permission_list =userctx.permission.map(p=>(
-        <Chip key={p} label={p}></Chip>
-    ));
-    const isElectronContent = (((window['electron'] as any) !== undefined) as boolean);
+    const permission_list = userctx.permission.map(p => <Chip key={p} label={p}></Chip>);
+    const isElectronContent = ((window["electron"] as any) !== undefined) as boolean;
     const handle_open = () => set_pw_open(true);
     const handle_close = () => {
         set_pw_open(false);
@@ -41,35 +52,35 @@ export function ProfilePage(){
             return;
         }
         if (isElectronContent) {
-            const elec = window['electron'] as any;
+            const elec = window["electron"] as any;
             const success = elec.passwordReset(userctx.username, newpw);
             if (!success) {
                 set_msg_dialog({ opened: true, msg: "user not exist." });
             }
-        }
-        else{
+        } else {
             const res = await fetch("/user/reset", {
-                method: 'POST',
+                method: "POST",
                 body: JSON.stringify({
                     username: userctx.username,
                     oldpassword: oldpw,
                     newpassword: newpw,
                 }),
                 headers: {
-                    "content-type":"application/json"
-                }
+                    "content-type": "application/json",
+                },
             });
             if (res.status != 200) {
                 set_msg_dialog({ opened: true, msg: "failed to change password." });
             }
         }
         handle_close();
-    }
-    return (<Headline menu={menu}>
+    };
+    return (
+        <Headline menu={menu}>
             <Paper /*className={classes.paper}*/>
                 <Grid container direction="column" alignItems="center">
                     <Grid item>
-                    <Typography variant='h4'>{userctx.username}</Typography>
+                        <Typography variant="h4">{userctx.username}</Typography>
                     </Grid>
                     <Divider></Divider>
                     <Grid item>
@@ -88,12 +99,33 @@ export function ProfilePage(){
                 <DialogContent>
                     <Typography>type the old and new password</Typography>
                     <div /*className={classes.formfield}*/>
-                {(!isElectronContent) && (<TextField autoFocus margin='dense' type="password" label="old password"
-                 value={oldpw} onChange={(e)=>setOldpw(e.target.value)}></TextField>)}
-                <TextField margin='dense' type="password" label="new password" 
-                value={newpw} onChange={e=>setNewpw(e.target.value)}></TextField>
-                <TextField margin='dense' type="password" label="new password check"
-                value={newpwch} onChange={e=>setNewpwch(e.target.value)}></TextField>
+                        {(!isElectronContent) && (
+                            <TextField
+                                autoFocus
+                                margin="dense"
+                                type="password"
+                                label="old password"
+                                value={oldpw}
+                                onChange={(e) => setOldpw(e.target.value)}
+                            >
+                            </TextField>
+                        )}
+                        <TextField
+                            margin="dense"
+                            type="password"
+                            label="new password"
+                            value={newpw}
+                            onChange={e => setNewpw(e.target.value)}
+                        >
+                        </TextField>
+                        <TextField
+                            margin="dense"
+                            type="password"
+                            label="new password check"
+                            value={newpwch}
+                            onChange={e => setNewpwch(e.target.value)}
+                        >
+                        </TextField>
                     </div>
                 </DialogContent>
                 <DialogActions>
@@ -110,5 +142,6 @@ export function ProfilePage(){
                     <Button onClick={() => set_msg_dialog({ opened: false, msg: "" })} color="primary">Close</Button>
                 </DialogActions>
             </Dialog>
-    </Headline>)
+        </Headline>
+    );
 }

src/client/page/reader/comic.tsx

@@ -1,47 +1,52 @@
-import React, {useState, useEffect} from 'react';
-import {  Typography, useTheme } from '@mui/material';
-import { Document } from '../../accessor/document';
+import { Typography, useTheme } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Document } from "../../accessor/document";
 
 type ComicType = "comic" | "artist cg" | "donjinshi" | "western";
 
 export type PresentableTag = {
-    artist:string[],
-    group: string[],
-    series: string[],
-    type: ComicType,
-    character: string[],
-    tags: string[],
-}
+    artist: string[];
+    group: string[];
+    series: string[];
+    type: ComicType;
+    character: string[];
+    tags: string[];
+};
 
 export const ComicReader = (props: { doc: Document }) => {
     const additional = props.doc.additional;
     const [curPage, setCurPage] = useState(0);
-    if(!('page' in additional)){
+    if (!("page" in additional)) {
         console.error("invalid content : page read fail : " + JSON.stringify(additional));
-        return <Typography>Error. DB error. page restriction</Typography>
+        return <Typography>Error. DB error. page restriction</Typography>;
     }
     const PageDown = () => setCurPage(Math.max(curPage - 1, 0));
     const PageUP = () => setCurPage(Math.min(curPage + 1, page - 1));
-    const page:number = additional['page'] as number;
+    const page: number = additional["page"] as number;
     const onKeyUp = (e: KeyboardEvent) => {
         if (e.code === "ArrowLeft") {
             PageDown();
-        }
-        else if(e.code === "ArrowRight"){
+        } else if (e.code === "ArrowRight") {
             PageUP();
         }
-    }
+    };
     useEffect(() => {
         document.addEventListener("keydown", onKeyUp);
         return () => {
             document.removeEventListener("keydown", onKeyUp);
-        }
+        };
     });
     // theme.mixins.toolbar.minHeight;
-    return (<div style={{overflow: 'hidden', alignSelf:'center'}}>
-            <img onClick={PageUP} src={`/api/doc/${props.doc.id}/comic/${curPage}`}
-                style={{maxWidth:'100%', maxHeight:'calc(100vh - 64px)'}}></img>
-        </div>);
-}
+    return (
+        <div style={{ overflow: "hidden", alignSelf: "center" }}>
+            <img
+                onClick={PageUP}
+                src={`/api/doc/${props.doc.id}/comic/${curPage}`}
+                style={{ maxWidth: "100%", maxHeight: "calc(100vh - 64px)" }}
+            >
+            </img>
+        </div>
+    );
+};
 
 export default ComicReader;

src/client/page/reader/reader.tsx

@@ -1,15 +1,15 @@
-import { Typography, styled } from '@mui/material';
-import React from 'react';
-import { Document, makeThumbnailUrl } from '../../accessor/document';
-import {ComicReader} from './comic';
-import {VideoReader} from './video'
+import { styled, Typography } from "@mui/material";
+import React from "react";
+import { Document, makeThumbnailUrl } from "../../accessor/document";
+import { ComicReader } from "./comic";
+import { VideoReader } from "./video";
 
 export interface PagePresenterProp {
-    doc:Document,
-    className?:string
+    doc: Document;
+    className?: string;
 }
 interface PagePresenter {
-    (prop:PagePresenterProp):JSX.Element
+    (prop: PagePresenterProp): JSX.Element;
 }
 
 export const getPresenter = (content: Document): PagePresenter => {
@@ -19,20 +19,19 @@ export const getPresenter = (content:Document):PagePresenter => {
         case "video":
             return VideoReader;
     }
-    return ()=><Typography variant='h2'>Not implemented reader</Typography>;
-}
+    return () => <Typography variant="h2">Not implemented reader</Typography>;
+};
 const BackgroundDiv = styled("div")({
-    height: '400px',
-    width:'300px',
+    height: "400px",
+    width: "300px",
     backgroundColor: "#272733",
     display: "flex",
     alignItems: "center",
-    justifyContent:"center"}
-    );
+    justifyContent: "center",
+});
 
-
-import { useRef, useState, useEffect } from 'react';
-import "./thumbnail.css"
+import { useEffect, useRef, useState } from "react";
+import "./thumbnail.css";
 
 export function useIsElementInViewport<T extends HTMLElement>(options?: IntersectionObserverInit) {
     const elementRef = useRef<T>(null);
@@ -50,11 +49,11 @@ export function useIsElementInViewport<T extends HTMLElement>(options?: Intersec
     }, [elementRef, options]);
 
     return { elementRef, isVisible };
-};
+}
 
 export function ThumbnailContainer(props: {
-    content:Document,
-    className?:string,
+    content: Document;
+    className?: string;
 }) {
     const { elementRef, isVisible } = useIsElementInViewport<HTMLDivElement>({});
     const [loaded, setLoaded] = useState(false);
@@ -62,19 +61,17 @@ export function ThumbnailContainer(props:{
         if (isVisible) {
             setLoaded(true);
         }
-    },[isVisible])
+    }, [isVisible]);
     const style = {
-        maxHeight: '400px',
-        maxWidth: 'min(400px, 100vw)',
+        maxHeight: "400px",
+        maxWidth: "min(400px, 100vw)",
     };
     const thumbnailurl = makeThumbnailUrl(props.content);
     if (props.content.content_type === "video") {
-        return (<video src={thumbnailurl} muted autoPlay loop className={props.className} style={style}></video>)
-    }
-    else return (<BackgroundDiv ref={elementRef}>
-        {loaded && <img src={thumbnailurl} 
-        className={props.className + " thumbnail_img"}
-         
-          loading="lazy"></img>}
-        </BackgroundDiv>)
+        return <video src={thumbnailurl} muted autoPlay loop className={props.className} style={style}></video>;
+    } else {return (
+            <BackgroundDiv ref={elementRef}>
+                {loaded && <img src={thumbnailurl} className={props.className + " thumbnail_img"} loading="lazy"></img>}
+            </BackgroundDiv>
+        );}
 }

src/client/page/reader/video.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
-import { Document } from '../../accessor/document';
+import React from "react";
+import { Document } from "../../accessor/document";
 
 export const VideoReader = (props: { doc: Document }) => {
     const id = props.doc.id;
-    return <video controls autoPlay src={`/api/doc/${props.doc.id}/video`} style={{maxHeight:'100%',maxWidth:'100%'}}></video>;
-}
+    return (
+        <video controls autoPlay src={`/api/doc/${props.doc.id}/video`} style={{ maxHeight: "100%", maxWidth: "100%" }}>
+        </video>
+    );
+};

src/client/page/setting.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
-import {Typography, Paper} from '@mui/material';
-import {ArrowBack as ArrowBackIcon} from '@mui/icons-material';
-import { Headline, BackItem, NavList, CommonMenuList } from '../component/mod';
+import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
+import { Paper, Typography } from "@mui/material";
+import React from "react";
+import { BackItem, CommonMenuList, Headline, NavList } from "../component/mod";
 
 export const SettingPage = () => {
     const menu = CommonMenuList();
-    return (<Headline menu={menu}>
+    return (
+        <Headline menu={menu}>
             <Paper>
-                <Typography variant='h2'>Setting</Typography>
+                <Typography variant="h2">Setting</Typography>
             </Paper>
-    </Headline>);
+        </Headline>
+    );
 };

src/client/page/tags.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import {Typography, Box, Paper} from '@mui/material';
+import { Box, Paper, Typography } from "@mui/material";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import React, { useEffect, useState } from "react";
 import { LoadingCircle } from "../component/loading";
-import { Headline, CommonMenuList } from '../component/mod';
-import {DataGrid, GridColDef} from "@mui/x-data-grid"
+import { CommonMenuList, Headline } from "../component/mod";
 
 type TagCount = {
     tag_name: string;
@@ -19,9 +19,9 @@ const tagTableColumn: GridColDef[] = [
         field: "occurs",
         headerName: "Occurs",
         width: 100,
-    type:"number"
-}
-]
+        type: "number",
+    },
+];
 
 function TagTable() {
     const [data, setData] = useState<TagCount[] | undefined>();
@@ -36,26 +36,26 @@ function TagTable(){
         return <LoadingCircle />;
     }
     if (error !== undefined) {
-        return <Typography variant="h3">{error}</Typography>
+        return <Typography variant="h3">{error}</Typography>;
     }
-    return <Box sx={{height:"400px",width:"100%"}}>
+    return (
+        <Box sx={{ height: "400px", width: "100%" }}>
             <Paper sx={{ height: "100%" }} elevation={2}>
                 <DataGrid rows={data} columns={tagTableColumn} getRowId={(t) => t.tag_name}></DataGrid>
             </Paper>
         </Box>
+    );
 
     async function loadData() {
         try {
             const res = await fetch("/api/tags?withCount=true");
             const data = await res.json();
             setData(data);
-        }
-        catch(e){
+        } catch (e) {
             setData([]);
             if (e instanceof Error) {
                 setErrorMsg(e.message);
-            }
-            else{
+            } else {
                 console.log(e);
                 setErrorMsg("");
             }
@@ -65,7 +65,9 @@ function TagTable(){
 
 export const TagsPage = () => {
     const menu = CommonMenuList();
-    return <Headline menu={menu}>
+    return (
+        <Headline menu={menu}>
             <TagTable></TagTable>
         </Headline>
+    );
 };

src/client/state.tsx

@@ -1,16 +1,16 @@
-import React, { createContext, useRef, useState } from 'react';
+import React, { createContext, useRef, useState } from "react";
 export const BackLinkContext = createContext({ backLink: "", setBackLink: (s: string) => {} });
 export const UserContext = createContext({
     username: "",
     permission: [] as string[],
     setUsername: (s: string) => {},
-    setPermission: (permission: string[]) => { }
+    setPermission: (permission: string[]) => {},
 });
 
 type LoginLocalStorage = {
-    username: string,
-    permission: string[],
-    accessExpired: number
+    username: string;
+    permission: string[];
+    accessExpired: number;
 };
 
 let localObj: LoginLocalStorage | null = null;
@@ -25,65 +25,64 @@ export const getInitialValue = async () => {
         return {
             username: localObj.username,
             permission: localObj.permission,
+        };
     }
-    }
-    const res = await fetch('/user/refresh', {
-        method: 'POST',
+    const res = await fetch("/user/refresh", {
+        method: "POST",
     });
-    if (res.status !== 200) throw new Error("Maybe Network Error")
+    if (res.status !== 200) throw new Error("Maybe Network Error");
     const r = await res.json() as LoginLocalStorage & { refresh: boolean };
     if (r.refresh) {
         localObj = {
             username: r.username,
             permission: r.permission,
-            accessExpired: r.accessExpired
-        }
-    }
-    else {
+            accessExpired: r.accessExpired,
+        };
+    } else {
         localObj = {
             accessExpired: 0,
             username: "",
-            permission: r.permission
-        }
+            permission: r.permission,
+        };
     }
     window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
     return {
         username: r.username,
-        permission: r.permission
-    }
-}
+        permission: r.permission,
+    };
+};
 export const doLogout = async () => {
-    const req = await fetch('/user/logout', {
-        method: 'POST'
+    const req = await fetch("/user/logout", {
+        method: "POST",
     });
     try {
         const res = await req.json();
         localObj = {
             accessExpired: 0,
             username: "",
-            permission: res["permission"]
-        }
+            permission: res["permission"],
+        };
         window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
         return {
             username: localObj.username,
             permission: localObj.permission,
-        }
+        };
     } catch (error) {
         console.error(`Server Error ${error}`);
         return {
             username: "",
             permission: [],
+        };
     }
-    }
-}
+};
 export const doLogin = async (userLoginInfo: {
-    username:string,
-    password:string,
+    username: string;
+    password: string;
 }): Promise<string | LoginLocalStorage> => {
-    const res = await fetch('/user/login',{
-        method:'POST',
+    const res = await fetch("/user/login", {
+        method: "POST",
         body: JSON.stringify(userLoginInfo),
-        headers:{"content-type":"application/json"}
+        headers: { "content-type": "application/json" },
     });
     const b = await res.json();
     if (res.status !== 200) {
@@ -92,4 +91,4 @@ export const doLogin = async (userLoginInfo:{
     localObj = b;
     window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
     return b;
-}
+};

src/config.ts

@@ -2,21 +2,21 @@ import {Knex as k} from "knex";
 
 export namespace Knex {
     export const config: {
-    development: k.Config,
-    production: k.Config
+        development: k.Config;
+        production: k.Config;
     } = {
         development: {
-        client: 'sqlite3',
+            client: "sqlite3",
             connection: {
-          filename: './devdb.sqlite3'
+                filename: "./devdb.sqlite3",
             },
             debug: true,
         },
         production: {
-        client: 'sqlite3',
+            client: "sqlite3",
             connection: {
-          filename: './db.sqlite3',
+                filename: "./db.sqlite3",
+            },
         },
-      }
     };
 }

src/content/comic.ts

@@ -1,19 +1,19 @@
-import {ContentFile, createDefaultClass,registerContentReferrer, ContentConstructOption} from './file';
-import {readZip, readAllFromZip} from '../util/zipwrap';
-import { DocumentBody } from '../model/doc';
-import {extname} from 'path';
+import { extname } from "path";
+import { DocumentBody } from "../model/doc";
+import { readAllFromZip, readZip } from "../util/zipwrap";
+import { ContentConstructOption, ContentFile, createDefaultClass, registerContentReferrer } from "./file";
 
 type ComicType = "doujinshi" | "artist cg" | "manga" | "western";
 interface ComicDesc {
-    title:string,
-    artist?:string[],
-    group?:string[],
-    series?:string[],
-    type:ComicType|[ComicType],
-    character?:string[],
-    tags?:string[]
+    title: string;
+    artist?: string[];
+    group?: string[];
+    series?: string[];
+    type: ComicType | [ComicType];
+    character?: string[];
+    tags?: string[];
 }
-const ImageExt = ['.gif', '.png', '.jpeg', '.bmp', '.webp', '.jpg'];
+const ImageExt = [".gif", ".png", ".jpeg", ".bmp", ".webp", ".jpg"];
 export class ComicReferrer extends createDefaultClass("comic") {
     desc: ComicDesc | undefined;
     pagenum: number;
@@ -32,11 +32,12 @@ export class ComicReferrer extends createDefaultClass("comic"){
         if (entry === undefined) {
             return;
         }
-        const data = (await readAllFromZip(zip,entry)).toString('utf-8');
+        const data = (await readAllFromZip(zip, entry)).toString("utf-8");
         this.desc = JSON.parse(data);
-        if(this.desc === undefined)
+        if (this.desc === undefined) {
             throw new Error(`JSON.parse is returning undefined. ${this.path} desc.json format error`);
         }
+    }
 
     async createDocumentBody(): Promise<DocumentBody> {
         await this.initDesc();
@@ -56,10 +57,10 @@ export class ComicReferrer extends createDefaultClass("comic"){
             ...basebody,
             title: this.desc.title,
             additional: {
-                page:this.pagenum
+                page: this.pagenum,
             },
-            tags:tags
+            tags: tags,
         };
     }
-};
+}
 registerContentReferrer(ComicReferrer);

src/content/file.ts

@@ -1,10 +1,10 @@
-import {Context, DefaultState, DefaultContext, Middleware, Next} from 'koa';
-import Router from 'koa-router';
-import {createHash} from 'crypto';
-import {promises, Stats} from 'fs'
-import {extname} from 'path';
-import { DocumentBody } from '../model/mod';
-import path from 'path';
+import { createHash } from "crypto";
+import { promises, Stats } from "fs";
+import { Context, DefaultContext, DefaultState, Middleware, Next } from "koa";
+import Router from "koa-router";
+import { extname } from "path";
+import path from "path";
+import { DocumentBody } from "../model/mod";
 /**
  * content file or directory referrer
  */
@@ -15,9 +15,11 @@ export interface ContentFile{
     readonly type: string;
 }
 export type ContentConstructOption = {
-    hash: string,
-}
-type ContentFileConstructor =  (new (path:string,option?:ContentConstructOption) => ContentFile)&{content_type:string};
+    hash: string;
+};
+type ContentFileConstructor = (new(path: string, option?: ContentConstructOption) => ContentFile) & {
+    content_type: string;
+};
 export const createDefaultClass = (type: string): ContentFileConstructor => {
     let cons = class implements ContentFile {
         readonly path: string;
@@ -68,10 +70,10 @@ export const createDefaultClass = (type:string):ContentFileConstructor=>{
         }
     };
     return cons;
-}
+};
 let ContstructorTable: { [k: string]: ContentFileConstructor } = {};
 export function registerContentReferrer(s: ContentFileConstructor) {
-    console.log(`registered content type: ${s.content_type}`)
+    console.log(`registered content type: ${s.content_type}`);
     ContstructorTable[s.content_type] = s;
 }
 export function createContentFile(type: string, path: string, option?: ContentConstructOption) {

src/content/mod.ts

@@ -1,3 +1,3 @@
-import './comic';
-import './video';
-export {ContentFile, createContentFile} from './file';
+import "./comic";
+import "./video";
+export { ContentFile, createContentFile } from "./file";

src/content/video.ts

@@ -1,5 +1,5 @@
-import {ContentFile, registerContentReferrer, ContentConstructOption} from './file';
-import {createDefaultClass} from './file';
+import { ContentConstructOption, ContentFile, registerContentReferrer } from "./file";
+import { createDefaultClass } from "./file";
 
 export class VideoReferrer extends createDefaultClass("video") {
     constructor(path: string, desc?: ContentConstructOption) {

src/database.ts

@@ -1,7 +1,7 @@
-import { existsSync } from 'fs';
-import Knex from 'knex';
-import {Knex as KnexConfig} from './config';
-import { get_setting } from './SettingConfig';
+import { existsSync } from "fs";
+import Knex from "knex";
+import { Knex as KnexConfig } from "./config";
+import { get_setting } from "./SettingConfig";
 
 export async function connectDB() {
     const env = get_setting().mode;
@@ -9,7 +9,7 @@ export async function connectDB(){
     if (!config.connection) {
         throw new Error("connection options required.");
     }
-    const connection = config.connection
+    const connection = config.connection;
     if (typeof connection === "string") {
         throw new Error("unknown connection options");
     }
@@ -25,16 +25,14 @@ export async function connectDB(){
     for (;;) {
         try {
             console.log("try to connect db");
-            await knex.raw('select 1 + 1;');
+            await knex.raw("select 1 + 1;");
             console.log("connect success");
-        }
-        catch(err){
+        } catch (err) {
             if (tries < 3) {
                 tries++;
                 console.error(`connection fail ${err} retry...`);
                 continue;
-            }
-            else{
+            } else {
                 throw err;
             }
         }

src/db/doc.ts

@@ -1,12 +1,12 @@
-import { Document, DocumentBody, DocumentAccessor, QueryListOption } from '../model/doc';
-import {Knex} from 'knex';
-import {createKnexTagController} from './tag';
-import { TagAccessor } from '../model/tag';
+import { Knex } from "knex";
+import { Document, DocumentAccessor, DocumentBody, QueryListOption } from "../model/doc";
+import { TagAccessor } from "../model/tag";
+import { createKnexTagController } from "./tag";
 
 export type DBTagContentRelation = {
-    doc_id:number,
-    tag_name:string
-}
+    doc_id: number;
+    tag_name: string;
+};
 
 class KnexDocumentAccessor implements DocumentAccessor {
     knex: Knex;
@@ -45,14 +45,14 @@ class KnexDocumentAccessor implements DocumentAccessor{
                 const id_lst = await trx.insert({
                     additional: JSON.stringify(additional),
                     created_at: Date.now(),
-                        ...rest
+                    ...rest,
                 }).into("document");
                 const id = id_lst[0];
                 if (tags.length > 0) {
                     await trx.insert(tags.map(y => ({
                         doc_id: id,
-                        tag_name:y
-                    }))).into('doc_tag_relation');
+                        tag_name: y,
+                    }))).into("doc_tag_relation");
                 }
                 ret.push(id);
             }
@@ -64,19 +64,19 @@ class KnexDocumentAccessor implements DocumentAccessor{
         const id_lst = await this.knex.insert({
             additional: JSON.stringify(additional),
             created_at: Date.now(),
-            ...rest
-        }).into('document');
+            ...rest,
+        }).into("document");
         const id = id_lst[0];
         for (const it of tags) {
             this.tagController.addTag({ name: it });
         }
         if (tags.length > 0) {
             await this.knex.insert<DBTagContentRelation>(
-                tags.map(x=>({doc_id:id,tag_name:x}))
+                tags.map(x => ({ doc_id: id, tag_name: x })),
             ).into("doc_tag_relation");
         }
         return id;
-    };
+    }
     async del(id: number) {
         if (await this.findById(id) !== undefined) {
             await this.knex.delete().from("doc_tag_relation").where({ doc_id: id });
@@ -84,12 +84,12 @@ class KnexDocumentAccessor implements DocumentAccessor{
             return true;
         }
         return false;
-    };
+    }
     async findById(id: number, tagload?: boolean): Promise<Document | undefined> {
         const s = await this.knex.select("*").from("document").where({ id: id });
         if (s.length === 0) return undefined;
         const first = s[0];
-        let ret_tags:string[] = []
+        let ret_tags: string[] = [];
         if (tagload === true) {
             const tags: DBTagContentRelation[] = await this.knex.select("*")
                 .from("doc_tag_relation").where({ doc_id: first.id });
@@ -100,7 +100,7 @@ class KnexDocumentAccessor implements DocumentAccessor{
             tags: ret_tags,
             additional: first.additional !== null ? JSON.parse(first.additional) : {},
         };
-    };
+    }
     async findDeleted(content_type: string) {
         const s = await this.knex.select("*")
             .where({ content_type: content_type })
@@ -109,7 +109,7 @@ class KnexDocumentAccessor implements DocumentAccessor{
         return s.map(x => ({
             ...x,
             tags: [],
-            additional:{}
+            additional: {},
         }));
     }
     async findList(option?: QueryListOption) {
@@ -130,33 +130,35 @@ class KnexDocumentAccessor implements DocumentAccessor{
                 query = query.where("tags_0.tag_name", "=", allow_tag[0]);
                 for (let index = 1; index < allow_tag.length; index++) {
                     const element = allow_tag[index];
-                    query = query.innerJoin(`doc_tag_relation as tags_${index}`,`tags_${index}.doc_id`,"tags_0.doc_id");
-                    query = query.where(`tags_${index}.tag_name`,'=',element);
+                    query = query.innerJoin(
+                        `doc_tag_relation as tags_${index}`,
+                        `tags_${index}.doc_id`,
+                        "tags_0.doc_id",
+                    );
+                    query = query.where(`tags_${index}.tag_name`, "=", element);
                 }
                 query = query.innerJoin("document", "tags_0.doc_id", "document.id");
-            }
-            else{
+            } else {
                 query = query.from("document");
             }
             if (word !== undefined) {
                 // don't worry about sql injection.
-                query = query.where('title','like',`%${word}%`);
+                query = query.where("title", "like", `%${word}%`);
             }
             if (content_type !== undefined) {
-                query = query.where('content_type','=',content_type);
+                query = query.where("content_type", "=", content_type);
             }
             if (use_offset) {
                 query = query.offset(offset);
-            }
-            else{
+            } else {
                 if (cursor !== undefined) {
-                    query = query.where('id','<',cursor);
+                    query = query.where("id", "<", cursor);
                 }
             }
             query = query.limit(limit);
-            query = query.orderBy('id',"desc");
+            query = query.orderBy("id", "desc");
             return query;
-        }
+        };
         let query = buildquery();
         // console.log(query.toSQL());
         let result: Document[] = await query;
@@ -173,24 +175,25 @@ class KnexDocumentAccessor implements DocumentAccessor{
             let tagquery = this.knex.select("id", "doc_tag_relation.tag_name").from(subquery)
                 .innerJoin("doc_tag_relation", "doc_tag_relation.doc_id", "id");
             // console.log(tagquery.toSQL());
-            let tagresult:{id:number,tag_name:string}[] = await tagquery;
+            let tagresult: { id: number; tag_name: string }[] = await tagquery;
             for (const { id, tag_name } of tagresult) {
                 idmap[id].tags.push(tag_name);
             }
-        }
-        else{
-            result.forEach(v=>{v.tags = [];});
+        } else {
+            result.forEach(v => {
+                v.tags = [];
+            });
         }
         return result;
-    };
+    }
     async findByPath(path: string, filename?: string): Promise<Document[]> {
-        const e = filename == undefined ? {} : {filename:filename}
+        const e = filename == undefined ? {} : { filename: filename };
         const results = await this.knex.select("*").from("document").where({ basepath: path, ...e });
         return results.map(x => ({
             ...x,
             tags: [],
-            additional:{}
-        }))
+            additional: {},
+        }));
     }
     async update(c: Partial<Document> & { id: number }) {
         const { id, tags, ...rest } = c;
@@ -217,4 +220,4 @@ class KnexDocumentAccessor implements DocumentAccessor{
 }
 export const createKnexDocumentAccessor = (knex: Knex): DocumentAccessor => {
     return new KnexDocumentAccessor(knex);
-}
+};

src/db/mod.ts

@@ -1,3 +1,3 @@
-export * from './doc';
-export * from './tag';
-export * from './user';
+export * from "./doc";
+export * from "./tag";
+export * from "./user";

src/db/tag.ts

@@ -1,14 +1,14 @@
-import {Tag, TagAccessor, TagCount} from '../model/tag';
-import {Knex} from 'knex';
-import {DBTagContentRelation} from './doc';
+import { Knex } from "knex";
+import { Tag, TagAccessor, TagCount } from "../model/tag";
+import { DBTagContentRelation } from "./doc";
 
 type DBTags = {
-    name: string,
-    description?: string
-}
+    name: string;
+    description?: string;
+};
 
 class KnexTagAccessor implements TagAccessor {
-    knex:Knex<DBTags>
+    knex: Knex<DBTags>;
     constructor(knex: Knex) {
         this.knex = knex;
     }
@@ -19,11 +19,11 @@ class KnexTagAccessor implements TagAccessor{
     }
     async getAllTagList(onlyname?: boolean) {
         onlyname = onlyname ?? false;
-        const t:DBTags[] = await this.knex.select(onlyname ? "*" : "name").from("tags")
+        const t: DBTags[] = await this.knex.select(onlyname ? "*" : "name").from("tags");
         return t;
     }
     async getTagByName(name: string) {
-        const t:DBTags[] = await this.knex.select('*').from("tags").where({name: name});
+        const t: DBTags[] = await this.knex.select("*").from("tags").where({ name: name });
         if (t.length === 0) return undefined;
         return t[0];
     }
@@ -31,7 +31,7 @@ class KnexTagAccessor implements TagAccessor{
         if (await this.getTagByName(tag.name) === undefined) {
             await this.knex.insert<DBTags>({
                 name: tag.name,
-                description:tag.description === undefined ? "" : tag.description
+                description: tag.description === undefined ? "" : tag.description,
             }).into("tags");
             return true;
         }
@@ -51,7 +51,7 @@ class KnexTagAccessor implements TagAccessor{
         }
         return false;
     }
-};
+}
 export const createKnexTagController = (knex: Knex): TagAccessor => {
     return new KnexTagAccessor(knex);
-}
+};

src/db/user.ts

@@ -1,15 +1,15 @@
-import {Knex} from 'knex';
-import {IUser,UserCreateInput, UserAccessor, Password} from '../model/user';
+import { Knex } from "knex";
+import { IUser, Password, UserAccessor, UserCreateInput } from "../model/user";
 
 type PermissionTable = {
-    username:string,
-    name:string
+    username: string;
+    name: string;
 };
 type DBUser = {
-    username : string,
-    password_hash: string,
-    password_salt: string
-}
+    username: string;
+    password_hash: string;
+    password_salt: string;
+};
 class KnexUser implements IUser {
     private knex: Knex;
     readonly username: string;
@@ -27,7 +27,7 @@ class KnexUser implements IUser{
             .update({ password_hash: this.password.hash, password_salt: this.password.salt });
     }
     async get_permissions() {
-        let b = (await this.knex.select('*').from("permissions")
+        let b = (await this.knex.select("*").from("permissions")
             .where({ username: this.username })) as PermissionTable[];
         return b.map(x => x.name);
     }
@@ -35,7 +35,7 @@ class KnexUser implements IUser{
         if (!(await this.get_permissions()).includes(name)) {
             const r = await this.knex.insert({
                 username: this.username,
-                name: name
+                name: name,
             }).into("permissions");
             return true;
         }
@@ -45,7 +45,8 @@ class KnexUser implements IUser{
         const r = await this.knex
             .from("permissions")
             .where({
-                username:this.username, name:name
+                username: this.username,
+                name: name,
             }).delete();
         return r !== 0;
     }
@@ -60,23 +61,27 @@ export const createKnexUserController = (knex: Knex):UserAccessor=>{
         await knex.insert<DBUser>({
             username: user.username,
             password_hash: user.password.hash,
-            password_salt: user.password.salt}).into("users");
+            password_salt: user.password.salt,
+        }).into("users");
         return user;
     };
     const findUserKenx = async (id: string) => {
         let user: DBUser[] = await knex.select("*").from("users").where({ username: id });
         if (user.length == 0) return undefined;
         const first = user[0];
-        return new KnexUser(first.username,
-            new Password({hash: first.password_hash, salt: first.password_salt}), knex);
-    }
+        return new KnexUser(
+            first.username,
+            new Password({ hash: first.password_hash, salt: first.password_salt }),
+            knex,
+        );
+    };
     const delUserKnex = async (id: string) => {
         let r = await knex.delete().from("users").where({ username: id });
         return r === 0;
-    }
+    };
     return {
         createUser: createUserKnex,
         findUser: findUserKenx,
         delUser: delUserKnex,
     };
-}
+};

src/diff/content_handler.ts

@@ -1,8 +1,8 @@
-import { basename, dirname, join as pathjoin } from 'path';
-import { Document, DocumentAccessor } from '../model/mod';
-import { ContentFile, createContentFile } from '../content/mod';
-import { IDiffWatcher } from './watcher';
-import { ContentList } from './content_list';
+import { basename, dirname, join as pathjoin } from "path";
+import { ContentFile, createContentFile } from "../content/mod";
+import { Document, DocumentAccessor } from "../model/mod";
+import { ContentList } from "./content_list";
+import { IDiffWatcher } from "./watcher";
 
 // refactoring needed.
 export class ContentDiffHandler {
@@ -26,9 +26,9 @@ export class ContentDiffHandler {
         }
     }
     register(diff: IDiffWatcher) {
-        diff.on('create', (path) => this.OnCreated(path))
-            .on('delete', (path) => this.OnDeleted(path))
-            .on('change', (prev, cur) => this.OnChanged(prev, cur));
+        diff.on("create", (path) => this.OnCreated(path))
+            .on("delete", (path) => this.OnDeleted(path))
+            .on("change", (prev, cur) => this.OnChanged(prev, cur));
     }
     private async OnDeleted(cpath: string) {
         const basepath = dirname(cpath);
@@ -83,14 +83,13 @@ export class ContentDiffHandler {
                 id: c.id,
                 deleted_at: null,
                 filename: filename,
-                basepath: basepath
+                basepath: basepath,
             });
         }
         if (this.waiting_list.hasByHash(hash)) {
             console.log("Hash Conflict!!!");
         }
         this.waiting_list.set(content);
-
     }
     private async OnChanged(prev_path: string, cur_path: string) {
         const prev_basepath = dirname(prev_path);
@@ -115,7 +114,7 @@ export class ContentDiffHandler {
         await this.doc_cntr.update({
             ...doc[0],
             basepath: cur_basepath,
-            filename: cur_filename
+            filename: cur_filename,
         });
     }
 }

src/diff/content_list.ts

@@ -1,4 +1,4 @@
-import { ContentFile } from '../content/mod';
+import { ContentFile } from "../content/mod";
 
 export class ContentList {
     /** path map */
@@ -7,8 +7,8 @@ export class ContentList{
     private hl: Map<string, ContentFile>;
 
     constructor() {
-        this.cl = new Map;
-        this.hl = new Map;
+        this.cl = new Map();
+        this.hl = new Map();
     }
     hasByHash(s: string) {
         return this.hl.has(s);
@@ -17,7 +17,7 @@ export class ContentList{
         return this.cl.has(p);
     }
     getByHash(s: string) {
-        return this.hl.get(s)
+        return this.hl.get(s);
     }
     getByPath(p: string) {
         return this.cl.get(p);

src/diff/diff.ts

@@ -1,7 +1,7 @@
-import { DocumentAccessor } from '../model/doc';
-import {ContentDiffHandler} from './content_handler';
-import { IDiffWatcher } from './watcher';
-import asyncPool from 'tiny-async-pool';
+import asyncPool from "tiny-async-pool";
+import { DocumentAccessor } from "../model/doc";
+import { ContentDiffHandler } from "./content_handler";
+import { IDiffWatcher } from "./watcher";
 
 export class DiffManager {
     watching: { [content_type: string]: ContentDiffHandler };
@@ -42,4 +42,4 @@ export class DiffManager{
             value: this.watching[x].waiting_list.getAll(),
         }));
     }
-};
+}

src/diff/mod.ts

@@ -1,2 +1,2 @@
-export * from './router';
-export * from './diff';
+export * from "./diff";
+export * from "./router";

src/diff/router.ts

@@ -1,9 +1,9 @@
-import Koa from 'koa';
-import Router from 'koa-router';
-import { ContentFile } from '../content/mod';
-import { sendError } from '../route/error_handler';
-import {DiffManager} from './diff';
-import {AdminOnlyMiddleware} from '../permission/permission';
+import Koa from "koa";
+import Router from "koa-router";
+import { ContentFile } from "../content/mod";
+import { AdminOnlyMiddleware } from "../permission/permission";
+import { sendError } from "../route/error_handler";
+import { DiffManager } from "./diff";
 
 function content_file_to_return(x: ContentFile) {
     return { path: x.path, type: x.type };
@@ -15,17 +15,17 @@ export const getAdded = (diffmgr:DiffManager)=> (ctx:Koa.Context,next:Koa.Next)=
         type: x.type,
         value: x.value.map(x => ({ path: x.path, type: x.type })),
     }));
-    ctx.type = 'json';
-}
+    ctx.type = "json";
+};
 
 type PostAddedBody = {
-    type:string,
-    path:string,
+    type: string;
+    path: string;
 }[];
 
 function checkPostAddedBody(body: any): body is PostAddedBody {
     if (body instanceof Array) {
-        return body.map(x=> 'type' in x && 'path' in x).every(x=>x);
+        return body.map(x => "type" in x && "path" in x).every(x => x);
     }
     return false;
 }
@@ -41,11 +41,11 @@ export const postAdded = (diffmgr:DiffManager) => async (ctx:Router.IRouterConte
     ctx.body = {
         ok: true,
         docs: results,
-    }
-    ctx.type = 'json';
-}
+    };
+    ctx.type = "json";
+};
 export const postAddedAll = (diffmgr: DiffManager) => async (ctx: Router.IRouterContext, next: Koa.Next) => {
-    if (!ctx.is('json')){
+    if (!ctx.is("json")) {
         sendError(400, "format exception");
         return;
     }
@@ -61,10 +61,10 @@ export const postAddedAll = (diffmgr: DiffManager) => async (ctx:Router.IRouterC
     }
     await diffmgr.commitAll(t);
     ctx.body = {
-        ok:true
+        ok: true,
+    };
+    ctx.type = "json";
 };
-    ctx.type = 'json';
-}
 /*
 export const getNotWatched = (diffmgr : DiffManager)=> (ctx:Router.IRouterContext,next:Koa.Next)=>{
     ctx.body = {

src/diff/watcher.ts

@@ -1,15 +1,15 @@
-import { FSWatcher, watch } from 'fs';
-import { promises } from 'fs';
-import event from 'events';
-import { join } from 'path';
-import { DocumentAccessor } from '../model/doc';
+import event from "events";
+import { FSWatcher, watch } from "fs";
+import { promises } from "fs";
+import { join } from "path";
+import { DocumentAccessor } from "../model/doc";
 
 const readdir = promises.readdir;
 
 export interface DiffWatcherEvent {
-    'create':(path:string)=>void,
-    'delete':(path:string)=>void,
-    'change':(prev_path:string,cur_path:string)=>void,
+    "create": (path: string) => void;
+    "delete": (path: string) => void;
+    "change": (prev_path: string, cur_path: string) => void;
 }
 
 export interface IDiffWatcher extends event.EventEmitter {

src/diff/watcher/ComicConfig.schema.json

@@ -1 +1,12 @@
-{"$schema":"http://json-schema.org/draft-07/schema#","$ref":"#/definitions/ComicConfig","definitions":{"ComicConfig":{"type":"object","properties":{"watch":{"type":"array","items":{"type":"string"}},"$schema":{"type":"string"}},"required":["watch"],"additionalProperties":false}}}
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$ref": "#/definitions/ComicConfig",
+  "definitions": {
+    "ComicConfig": {
+      "type": "object",
+      "properties": { "watch": { "type": "array", "items": { "type": "string" } }, "$schema": { "type": "string" } },
+      "required": ["watch"],
+      "additionalProperties": false
+    }
+  }
+}

src/diff/watcher/ComicConfig.ts

@@ -1,8 +1,7 @@
-import {ConfigManager} from '../../util/configRW';
-import ComicSchema from "./ComicConfig.schema.json"
+import { ConfigManager } from "../../util/configRW";
+import ComicSchema from "./ComicConfig.schema.json";
 export interface ComicConfig {
-    watch:string[]
+    watch: string[];
 }
 
 export const ComicConfig = new ConfigManager<ComicConfig>("comic_config.json", { watch: [] }, ComicSchema);
-

src/diff/watcher/comic_watcher.ts

@@ -1,17 +1,16 @@
-import {IDiffWatcher, DiffWatcherEvent} from '../watcher';
-import {EventEmitter} from 'events';
-import { DocumentAccessor } from '../../model/doc';
-import { WatcherFilter } from './watcher_filter';
-import { RecursiveWatcher } from './recursive_watcher';
-import { ComicConfig } from './ComicConfig';
-import {WatcherCompositer} from './compositer'
-
+import { EventEmitter } from "events";
+import { DocumentAccessor } from "../../model/doc";
+import { DiffWatcherEvent, IDiffWatcher } from "../watcher";
+import { ComicConfig } from "./ComicConfig";
+import { WatcherCompositer } from "./compositer";
+import { RecursiveWatcher } from "./recursive_watcher";
+import { WatcherFilter } from "./watcher_filter";
 
 const createComicWatcherBase = (path: string) => {
     return new WatcherFilter(new RecursiveWatcher(path), (x) => x.endsWith(".zip"));
-}
+};
 export const createComicWatcher = () => {
     const file = ComicConfig.get_config_file();
-    console.log(`register comic ${file.watch.join(",")}`)
+    console.log(`register comic ${file.watch.join(",")}`);
     return new WatcherCompositer(file.watch.map(path => createComicWatcherBase(path)));
-}
+};

src/diff/watcher/common_watcher.ts

@@ -1,9 +1,9 @@
-import event from 'events';
-import {FSWatcher,watch,promises} from 'fs';
-import {IDiffWatcher, DiffWatcherEvent} from '../watcher';
-import {join} from 'path';
-import { DocumentAccessor } from '../../model/doc';
-import { setupHelp } from './util';
+import event from "events";
+import { FSWatcher, promises, watch } from "fs";
+import { join } from "path";
+import { DocumentAccessor } from "../../model/doc";
+import { DiffWatcherEvent, IDiffWatcher } from "../watcher";
+import { setupHelp } from "./util";
 
 const { readdir } = promises;
 
@@ -25,10 +25,9 @@ export class CommonDiffWatcher extends event.EventEmitter implements IDiffWatche
                 const cur = await readdir(this._path);
                 // add
                 if (cur.includes(filename)) {
-                    this.emit('create',join(this.path,filename));
-                }
-                else{
-                    this.emit('delete',join(this.path,filename))
+                    this.emit("create", join(this.path, filename));
+                } else {
+                    this.emit("delete", join(this.path, filename));
                 }
             }
         });
@@ -40,6 +39,6 @@ export class CommonDiffWatcher extends event.EventEmitter implements IDiffWatche
         return this._path;
     }
     watchClose() {
-        this._watcher.close()
+        this._watcher.close();
     }
 }

src/diff/watcher/compositer.ts

@@ -2,7 +2,6 @@ import { EventEmitter } from "events";
 import { DocumentAccessor } from "../../model/doc";
 import { DiffWatcherEvent, IDiffWatcher, linkWatcher } from "../watcher";
 
-
 export class WatcherCompositer extends EventEmitter implements IDiffWatcher {
     refWatchers: IDiffWatcher[];
     on<U extends keyof DiffWatcherEvent>(event: U, listener: DiffWatcherEvent[U]): this {

src/diff/watcher/recursive_watcher.ts

@@ -1,16 +1,16 @@
-import {watch, FSWatcher} from 'chokidar';
-import { EventEmitter } from 'events';
-import { join } from 'path';
-import { DocumentAccessor } from '../../model/doc';
-import { DiffWatcherEvent, IDiffWatcher } from '../watcher';
-import { setupHelp, setupRecursive } from './util';
+import { FSWatcher, watch } from "chokidar";
+import { EventEmitter } from "events";
+import { join } from "path";
+import { DocumentAccessor } from "../../model/doc";
+import { DiffWatcherEvent, IDiffWatcher } from "../watcher";
+import { setupHelp, setupRecursive } from "./util";
 
 type RecursiveWatcherOption = {
     /** @default true */
-    watchFile?:boolean,
+    watchFile?: boolean;
     /** @default false */
-    watchDir?:boolean,
-}
+    watchDir?: boolean;
+};
 
 export class RecursiveWatcher extends EventEmitter implements IDiffWatcher {
     on<U extends keyof DiffWatcherEvent>(event: U, listener: DiffWatcherEvent[U]): this {
@@ -20,7 +20,7 @@ export class RecursiveWatcher extends EventEmitter implements IDiffWatcher  {
         return super.emit(event, ...arg);
     }
     readonly path: string;
-    private watcher: FSWatcher
+    private watcher: FSWatcher;
 
     constructor(path: string, option: RecursiveWatcherOption = {
         watchDir: false,
@@ -52,7 +52,7 @@ export class RecursiveWatcher extends EventEmitter implements IDiffWatcher  {
             }).on("unlinkDir", path => {
                 const cpath = path;
                 this.emit("delete", cpath);
-            })
+            });
         }
     }
     async setup(cntr: DocumentAccessor): Promise<void> {

src/diff/watcher/util.ts

@@ -5,18 +5,17 @@ const {readdir} = promises;
 import { DocumentAccessor } from "../../model/doc";
 import { IDiffWatcher } from "../watcher";
 
-
 function setupCommon(watcher: IDiffWatcher, basepath: string, initial_filenames: string[], cur: string[]) {
     // Todo : reduce O(nm) to O(n+m) using hash map.
     let added = cur.filter(x => !initial_filenames.includes(x));
     let deleted = initial_filenames.filter(x => !cur.includes(x));
     for (const it of added) {
         const cpath = join(basepath, it);
-        watcher.emit('create',cpath);
+        watcher.emit("create", cpath);
     }
     for (const it of deleted) {
         const cpath = join(basepath, it);
-        watcher.emit('delete',cpath);
+        watcher.emit("delete", cpath);
     }
 }
 export async function setupHelp(watcher: IDiffWatcher, basepath: string, cntr: DocumentAccessor) {
@@ -30,6 +29,8 @@ export async function setupRecursive(watcher:IDiffWatcher,basepath:string,cntr:D
     const initial_filenames = initial_document.map(x => x.filename);
     const cur = await readdir(basepath, { withFileTypes: true });
     setupCommon(watcher, basepath, initial_filenames, cur.map(x => x.name));
-    await Promise.all([cur.filter(x=>x.isDirectory())
-        .map(x=>setupHelp(watcher,join(basepath,x.name),cntr))]);
+    await Promise.all([
+        cur.filter(x => x.isDirectory())
+            .map(x => setupHelp(watcher, join(basepath, x.name), cntr)),
+    ]);
 }

src/diff/watcher/watcher_filter.ts

@@ -2,10 +2,9 @@ import { EventEmitter } from "events";
 import { DocumentAccessor } from "../../model/doc";
 import { DiffWatcherEvent, IDiffWatcher, linkWatcher } from "../watcher";
 
-
 export class WatcherFilter extends EventEmitter implements IDiffWatcher {
     refWatcher: IDiffWatcher;
-    filter : (filename:string)=>boolean;;
+    filter: (filename: string) => boolean;
     on<U extends keyof DiffWatcherEvent>(event: U, listener: DiffWatcherEvent[U]): this {
         return super.on(event, listener);
     }
@@ -22,22 +21,18 @@ export class WatcherFilter extends EventEmitter implements IDiffWatcher{
             if (this.filter(prev)) {
                 if (this.filter(cur)) {
                     return super.emit("change", prev, cur);
-                }
-                else{
+                } else {
                     return super.emit("delete", cur);
                 }
-            }
-            else{
+            } else {
                 if (this.filter(cur)) {
                     return super.emit("create", cur);
                 }
             }
             return false;
-        }
-        else if(!this.filter(arg[0])){
+        } else if (!this.filter(arg[0])) {
             return false;
-        }
-        else return super.emit(event,...arg);
+        } else return super.emit(event, ...arg);
     }
     constructor(refWatcher: IDiffWatcher, filter: (filename: string) => boolean) {
         super();

src/login.ts

@@ -1,12 +1,12 @@
+import { request } from "http";
 import { decode, sign, TokenExpiredError, verify } from "jsonwebtoken";
+import Knex from "knex";
 import Koa from "koa";
 import Router from "koa-router";
-import { sendError } from "./route/error_handler";
-import Knex from "knex";
 import { createKnexUserController } from "./db/mod";
-import { request } from "http";
-import { get_setting } from "./SettingConfig";
 import { IUser, UserAccessor } from "./model/mod";
+import { sendError } from "./route/error_handler";
+import { get_setting } from "./SettingConfig";
 
 type PayloadInfo = {
     username: string;
@@ -19,14 +19,14 @@ export type UserState = {
 
 const isUserState = (obj: object | string): obj is PayloadInfo => {
     if (typeof obj === "string") return false;
-  return "username" in obj && "permission" in obj &&
-    (obj as { permission: unknown }).permission instanceof Array;
+    return "username" in obj && "permission" in obj
+        && (obj as { permission: unknown }).permission instanceof Array;
 };
 type RefreshPayloadInfo = { username: string };
 const isRefreshToken = (obj: object | string): obj is RefreshPayloadInfo => {
     if (typeof obj === "string") return false;
-  return "username" in obj &&
-    typeof (obj as { username: unknown }).username === "string";
+    return "username" in obj
+        && typeof (obj as { username: unknown }).username === "string";
 };
 
 export const accessTokenName = "access_token";
@@ -86,9 +86,8 @@ function setToken(
         sameSite: "strict",
         expires: new Date(Date.now() + expiredtime * 1000),
     });
-};
-export const createLoginMiddleware = (userController: UserAccessor) =>
-  async (ctx: Koa.Context, _next: Koa.Next) => {
+}
+export const createLoginMiddleware = (userController: UserAccessor) => async (ctx: Koa.Context, _next: Koa.Next) => {
     const setting = get_setting();
     const secretKey = setting.jwt_secretkey;
     const body = ctx.request.body;
@@ -144,18 +143,18 @@ export const createLoginMiddleware = (userController: UserAccessor) =>
 };
 
 export const LogoutMiddleware = (ctx: Koa.Context, next: Koa.Next) => {
-  const setting = get_setting()
+    const setting = get_setting();
     ctx.cookies.set(accessTokenName, null);
     ctx.cookies.set(refreshTokenName, null);
     ctx.body = {
         ok: true,
         username: "",
-    permission: setting.guest
+        permission: setting.guest,
     };
     return;
 };
-export const createUserMiddleWare = (userController: UserAccessor) =>
-  async (ctx: Koa.ParameterizedContext<UserState>, next: Koa.Next) => {
+export const createUserMiddleWare =
+    (userController: UserAccessor) => async (ctx: Koa.ParameterizedContext<UserState>, next: Koa.Next) => {
         const refreshToken = refreshTokenHandler(userController);
         const setting = get_setting();
         const setGuest = async () => {
@@ -166,8 +165,7 @@ export const createUserMiddleWare = (userController: UserAccessor) =>
         };
         return await refreshToken(ctx, setGuest, next);
     };
-const refreshTokenHandler = (cntr: UserAccessor) =>
-  async (ctx: Koa.Context, fail: Koa.Next, next: Koa.Next) => {
+const refreshTokenHandler = (cntr: UserAccessor) => async (ctx: Koa.Context, fail: Koa.Next, next: Koa.Next) => {
     const accessPayload = ctx.cookies.get(accessTokenName);
     const setting = get_setting();
     const secretKey = setting.jwt_secretkey;
@@ -218,10 +216,9 @@ const refreshTokenHandler = (cntr: UserAccessor) =>
             }
         }
         return await next();
+    }
 };
-  };
-export const createRefreshTokenMiddleware = (cntr: UserAccessor) =>
-  async (ctx: Koa.Context, next: Koa.Next) => {
+export const createRefreshTokenMiddleware = (cntr: UserAccessor) => async (ctx: Koa.Context, next: Koa.Next) => {
     const handler = refreshTokenHandler(cntr);
     await handler(ctx, fail, success);
     async function fail() {
@@ -231,7 +228,7 @@ export const createRefreshTokenMiddleware = (cntr: UserAccessor) =>
             ...user,
         };
         ctx.type = "json";
-    };
+    }
     async function success() {
         const user = ctx.state.user as PayloadInfo;
         ctx.body = {
@@ -240,17 +237,16 @@ export const createRefreshTokenMiddleware = (cntr: UserAccessor) =>
             refreshExpired: Math.floor(Date.now() / 1000 + accessExpiredTime),
         };
         ctx.type = "json";
+    }
 };
-  };
-export const resetPasswordMiddleware = (cntr: UserAccessor) =>
-  async (ctx: Koa.Context, next: Koa.Next) => {
+export const resetPasswordMiddleware = (cntr: UserAccessor) => async (ctx: Koa.Context, next: Koa.Next) => {
     const body = ctx.request.body;
-    if (typeof body !== "object" || !('username' in body) || !('oldpassword' in body) || !('newpassword' in body)) {
+    if (typeof body !== "object" || !("username" in body) || !("oldpassword" in body) || !("newpassword" in body)) {
         return sendError(400, "request body is invalid format");
     }
-    const username = body['username'];
-    const oldpw = body['oldpassword'];
-    const newpw = body['newpassword'];
+    const username = body["username"];
+    const oldpw = body["oldpassword"];
+    const newpw = body["newpassword"];
     if (typeof username !== "string" || typeof oldpw !== "string" || typeof newpw !== "string") {
         return sendError(400, "request body is invalid format");
     }
@@ -262,16 +258,16 @@ export const resetPasswordMiddleware = (cntr: UserAccessor) =>
         return sendError(403, "not authorized");
     }
     user.reset_password(newpw);
-    ctx.body = { ok: true }
-    ctx.type = 'json';
-  }
+    ctx.body = { ok: true };
+    ctx.type = "json";
+};
 
 export function createLoginRouter(userController: UserAccessor) {
     const router = new Router();
-  router.post('/login', createLoginMiddleware(userController));
-  router.post('/logout', LogoutMiddleware);
-  router.post('/refresh', createRefreshTokenMiddleware(userController));
-  router.post('/reset', resetPasswordMiddleware(userController));
+    router.post("/login", createLoginMiddleware(userController));
+    router.post("/logout", LogoutMiddleware);
+    router.post("/refresh", createRefreshTokenMiddleware(userController));
+    router.post("/reset", resetPasswordMiddleware(userController));
     return router;
 }
 
@@ -284,6 +280,6 @@ export const getAdmin = async (cntr: UserAccessor) => {
 };
 
 export const isAdminFirst = (admin: IUser) => {
-  return admin.password.hash === "unchecked" &&
-    admin.password.salt === "unchecked";
+    return admin.password.hash === "unchecked"
+        && admin.password.salt === "unchecked";
 };

src/model/doc.ts

@@ -1,16 +1,16 @@
-import {TagAccessor} from './tag';
-import {check_type} from '../util/type_check'
-import {JSONMap} from '../types/json';
+import { JSONMap } from "../types/json";
+import { check_type } from "../util/type_check";
+import { TagAccessor } from "./tag";
 
 export interface DocumentBody {
-    title           : string,
-    content_type    : string,
-    basepath        : string,
-    filename        : string,
-    modified_at     : number,
-    content_hash    : string,
-    additional      : JSONMap,
-    tags            : string[],//eager loading 
+    title: string;
+    content_type: string;
+    basepath: string;
+    filename: string;
+    modified_at: number;
+    content_hash: string;
+    additional: JSONMap;
+    tags: string[]; // eager loading
 }
 
 export const MetaContentBody = {
@@ -21,71 +21,71 @@ export const MetaContentBody = {
     content_hash: "string",
     additional: "object",
     tags: "string[]",
-}
+};
 
 export const isDocBody = (c: any): c is DocumentBody => {
     return check_type<DocumentBody>(c, MetaContentBody);
-}
+};
 
 export interface Document extends DocumentBody {
     readonly id: number;
     readonly created_at: number;
     readonly deleted_at: number | null;
-};
+}
 
 export const isDoc = (c: any): c is Document => {
-    if('id' in c && typeof c['id'] === "number"){
+    if ("id" in c && typeof c["id"] === "number") {
         const { id, ...rest } = c;
         return isDocBody(rest);
     }
     return false;
-}
+};
 
 export type QueryListOption = {
     /**
      * search word
      */
-    word?:string,
-    allow_tag?:string[],
+    word?: string;
+    allow_tag?: string[];
     /**
      * limit of list
      * @default 20
      */
-    limit?:number,
+    limit?: number;
     /**
      * use offset if true, otherwise
      * @default false
      */
-    use_offset?:boolean,
+    use_offset?: boolean;
     /**
      * cursor of documents
      */
-    cursor?:number,
+    cursor?: number;
     /**
      * offset of documents
      */
-    offset?:number,
+    offset?: number;
     /**
      * tag eager loading
      * @default true
      */
-    eager_loading?:boolean,
+    eager_loading?: boolean;
     /**
      * content type
      */
-    content_type?:string
-}
+    content_type?: string;
+};
 
 export interface DocumentAccessor {
     /**
      * find list by option
      * @returns documents list
      */
-    findList: (option?:QueryListOption)=>Promise<Document[]>,
+    findList: (option?: QueryListOption) => Promise<Document[]>;
     /**
      * @returns document if exist, otherwise undefined
      */
-    findById: (id:number,tagload?:boolean)=> Promise<Document| undefined>,
+    findById: (id: number, tagload?: boolean) => Promise<Document | undefined>;
     /**
      * find by base path and filename.
      * if you call this function with filename, its return array length is 0 or 1.
@@ -98,7 +98,7 @@ export interface DocumentAccessor{
     /**
      * search by in document
      */
-    search:(search_word:string)=>Promise<Document[]>
+    search: (search_word: string) => Promise<Document[]>;
     /**
      * update document except tag.
      */
@@ -126,4 +126,4 @@ export interface DocumentAccessor{
      * @returns if success, return true
      */
     delTag: (c: Document, tag_name: string) => Promise<boolean>;
-};
+}

src/model/mod.ts

@@ -1,3 +1,3 @@
-export * from './doc';
-export * from './tag';
-export * from './user';
+export * from "./doc";
+export * from "./tag";
+export * from "./user";

src/model/tag.ts

@@ -1,6 +1,6 @@
 export interface Tag {
-    readonly name: string,
-    description?: string
+    readonly name: string;
+    description?: string;
 }
 
 export interface TagCount {

src/model/user.ts

@@ -1,20 +1,20 @@
-import { createHmac, randomBytes } from 'crypto';
+import { createHmac, randomBytes } from "crypto";
 
 function hashForPassword(salt: string, password: string) {
-    return createHmac('sha256', salt).update(password).digest('hex')
+    return createHmac("sha256", salt).update(password).digest("hex");
 }
-function createPasswordHashAndSalt(password: string):{salt:string,hash:string}{
-    const secret = randomBytes(32).toString('hex');
+function createPasswordHashAndSalt(password: string): { salt: string; hash: string } {
+    const secret = randomBytes(32).toString("hex");
     return {
         salt: secret,
-        hash: hashForPassword(secret,password)
+        hash: hashForPassword(secret, password),
     };
 }
 
 export class Password {
     private _salt: string;
     private _hash: string;
-    constructor(pw : string|{salt:string,hash:string}){
+    constructor(pw: string | { salt: string; hash: string }) {
         const { salt, hash } = typeof pw === "string" ? createPasswordHashAndSalt(pw) : pw;
         this._hash = hash;
         this._salt = salt;
@@ -27,13 +27,17 @@ export class Password{
     check_password(password: string): boolean {
         return this._hash === hashForPassword(this._salt, password);
     }
-    get salt(){return this._salt;}
-    get hash(){return this._hash;}
+    get salt() {
+        return this._salt;
+    }
+    get hash() {
+        return this._hash;
+    }
 }
 
 export interface UserCreateInput {
-    username: string,
-    password: string
+    username: string;
+    password: string;
 }
 
 export interface IUser {
@@ -60,21 +64,21 @@ export interface IUser{
      * @param password password to set
      */
     reset_password(password: string): Promise<void>;
-};
+}
 
 export interface UserAccessor {
     /**
      * create user
      * @returns if user exist, return undefined
      */
-    createUser: (input :UserCreateInput)=> Promise<IUser|undefined>,
+    createUser: (input: UserCreateInput) => Promise<IUser | undefined>;
     /**
      * find user
      */
-    findUser: (username: string)=> Promise<IUser|undefined>,
+    findUser: (username: string) => Promise<IUser | undefined>;
     /**
      * remove user
      * @returns if user exist, true
      */
-    delUser: (username: string)=>Promise<boolean>
-};
+    delUser: (username: string) => Promise<boolean>;
+}

src/permission/permission.ts

@@ -1,7 +1,6 @@
-import Koa from 'koa';
-import { UserState } from '../login';
-import { sendError } from '../route/error_handler';
-
+import Koa from "koa";
+import { UserState } from "../login";
+import { sendError } from "../route/error_handler";
 
 export enum Permission {
     // ========
@@ -21,7 +20,7 @@ export enum Permission{
     /** remove tag from document */
     // removeTagContent = 'removeTagContent',
     /** ModifyTagInDoc */
-    ModifyTag = 'ModifyTag',
+    ModifyTag = "ModifyTag",
 
     /** find documents with query */
     // findAllContent = 'findAllContent',
@@ -29,15 +28,15 @@ export enum Permission{
     // findOneContent = 'findOneContent',
     /** view content*/
     // viewContent = 'viewContent',
-    QueryContent = 'QueryContent',
+    QueryContent = "QueryContent",
 
     /** modify description about the one tag. */
-    modifyTagDesc = 'ModifyTagDesc',
+    modifyTagDesc = "ModifyTagDesc",
 }
 
-export const createPermissionCheckMiddleware = (...permissions:string[]) => 
-    async (ctx: Koa.ParameterizedContext<UserState>,next:Koa.Next) => {
-    const user = ctx.state['user'];
+export const createPermissionCheckMiddleware =
+    (...permissions: string[]) => async (ctx: Koa.ParameterizedContext<UserState>, next: Koa.Next) => {
+        const user = ctx.state["user"];
         if (user.username === "admin") {
             return await next();
         }
@@ -46,15 +45,14 @@ export const createPermissionCheckMiddleware = (...permissions:string[]) =>
         if (!permissions.map(p => user_permission.includes(p)).every(x => x)) {
             if (user.username === "") {
                 return sendError(401, "you are guest. login needed.");
-        }
-        else return sendError(403,"do not have permission");
+            } else return sendError(403, "do not have permission");
         }
         await next();
-}
+    };
 export const AdminOnlyMiddleware = async (ctx: Koa.ParameterizedContext<UserState>, next: Koa.Next) => {
-    const user = ctx.state['user'];
+    const user = ctx.state["user"];
     if (user.username !== "admin") {
         return sendError(403, "admin only");
     }
     await next();
-}
+};

src/route/all.ts

@@ -1,21 +1,23 @@
-import { DefaultContext, Middleware, Next, ParameterizedContext } from 'koa';
-import compose from 'koa-compose';
-import Router, { IParamMiddleware } from 'koa-router';
-import { ContentContext } from './context';
-import ComicRouter from './comic';
-import VideoRouter from './video';
+import { DefaultContext, Middleware, Next, ParameterizedContext } from "koa";
+import compose from "koa-compose";
+import Router, { IParamMiddleware } from "koa-router";
+import ComicRouter from "./comic";
+import { ContentContext } from "./context";
+import VideoRouter from "./video";
 
 const table: { [s: string]: Router | undefined } = {
-    "comic": new ComicRouter,
-    "video": new VideoRouter
-}
-const all_middleware = (cont: string|undefined, restarg: string|undefined)=>async (ctx:ParameterizedContext<ContentContext,DefaultContext>,next:Next)=>{
+    "comic": new ComicRouter(),
+    "video": new VideoRouter(),
+};
+const all_middleware =
+    (cont: string | undefined, restarg: string | undefined) =>
+    async (ctx: ParameterizedContext<ContentContext, DefaultContext>, next: Next) => {
         if (cont == undefined) {
             ctx.status = 404;
             return;
         }
         if (ctx.state.location.type != cont) {
-        console.error("not matched")
+            console.error("not matched");
             ctx.status = 404;
             return;
         }
@@ -44,12 +46,12 @@ const all_middleware = (cont: string|undefined, restarg: string|undefined)=>asyn
 export class AllContentRouter extends Router<ContentContext> {
     constructor() {
         super();
-        this.get('/:content_type',async (ctx,next)=>{
+        this.get("/:content_type", async (ctx, next) => {
             return await (all_middleware(ctx.params["content_type"], undefined))(ctx, next);
         });
-        this.get('/:content_type/:rest(.*)', async (ctx,next) => {
+        this.get("/:content_type/:rest(.*)", async (ctx, next) => {
             const cont = ctx.params["content_type"] as string;
             return await (all_middleware(cont, ctx.params["rest"]))(ctx, next);
         });
     }
-};
+}

src/route/comic.ts

@@ -1,13 +1,8 @@
 import { Context, DefaultContext, DefaultState, Next } from "koa";
-import {
-  createReadableStreamFromZip,
-  entriesByNaturalOrder,
-  readZip,
-  ZipAsync,
-} from "../util/zipwrap";
-import { since_last_modified } from "./util";
-import { ContentContext } from "./context";
 import Router from "koa-router";
+import { createReadableStreamFromZip, entriesByNaturalOrder, readZip, ZipAsync } from "../util/zipwrap";
+import { ContentContext } from "./context";
+import { since_last_modified } from "./util";
 
 /**
  * zip stream cache.
@@ -21,8 +16,7 @@ async function acquireZip(path: string) {
         ZipStreamCache[path] = [ret, 1];
         // console.log(`acquire ${path} 1`);
         return ret;
-  }
-  else {
+    } else {
         const [ret, refCount] = ZipStreamCache[path];
         ZipStreamCache[path] = [ret, refCount + 1];
         // console.log(`acquire ${path} ${refCount + 1}`);
@@ -38,8 +32,7 @@ function releaseZip(path: string) {
     if (refCount === 1) {
         ref.close();
         delete ZipStreamCache[path];
-  }
-  else{
+    } else {
         ZipStreamCache[path] = [ref, refCount - 1];
     }
 }
@@ -58,7 +51,7 @@ async function renderZipImage(ctx: Context, path: string, page: number) {
         if (since_last_modified(ctx, last_modified)) {
             return;
         }
-    const read_stream = (await createReadableStreamFromZip(zip, entry));
+        const read_stream = await createReadableStreamFromZip(zip, entry);
         /** Exceptions (ECONNRESET, ECONNABORTED) may be thrown when processing this request
          * for reasons such as when the browser unexpectedly closes the connection.
          * Once such an exception is raised, the stream is not properly destroyed,

src/route/contents.ts

@@ -1,47 +1,52 @@
-import { Context, Next } from 'koa';
-import Router from 'koa-router';
-import {Document, DocumentAccessor, isDocBody} from '../model/doc';
-import {QueryListOption} from '../model/doc';
-import {ParseQueryNumber, ParseQueryArray, ParseQueryBoolean, ParseQueryArgString} from './util'
-import {sendError} from './error_handler';
-import { join } from 'path';
-import {AllContentRouter} from './all';
-import {createPermissionCheckMiddleware as PerCheck, Permission as Per, AdminOnlyMiddleware as AdminOnly} from '../permission/permission';
-import {ContentLocation} from './context'
+import { Context, Next } from "koa";
+import Router from "koa-router";
+import { join } from "path";
+import { Document, DocumentAccessor, isDocBody } from "../model/doc";
+import { QueryListOption } from "../model/doc";
+import {
+    AdminOnlyMiddleware as AdminOnly,
+    createPermissionCheckMiddleware as PerCheck,
+    Permission as Per,
+} from "../permission/permission";
+import { AllContentRouter } from "./all";
+import { ContentLocation } from "./context";
+import { sendError } from "./error_handler";
+import { ParseQueryArgString, ParseQueryArray, ParseQueryBoolean, ParseQueryNumber } from "./util";
 
 const ContentIDHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params['num']);
+    const num = Number.parseInt(ctx.params["num"]);
     let document = await controller.findById(num, true);
     if (document == undefined) {
         return sendError(404, "document does not exist.");
     }
     ctx.body = document;
-    ctx.type = 'json';
+    ctx.type = "json";
     console.log(document.additional);
 };
 const ContentTagIDHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params['num']);
+    const num = Number.parseInt(ctx.params["num"]);
     let document = await controller.findById(num, true);
     if (document == undefined) {
         return sendError(404, "document does not exist.");
     }
     ctx.body = document.tags;
-    ctx.type = 'json';
+    ctx.type = "json";
 };
 const ContentQueryHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-
-    let query_limit = (ctx.query['limit']);
-    let query_cursor = (ctx.query['cursor']);
-    let query_word = (ctx.query['word']);
-    let query_content_type = (ctx.query['content_type']);
-    let query_offset = (ctx.query['offset']);
-    let query_use_offset = ctx.query['use_offset'];
-    if(query_limit instanceof Array 
+    let query_limit = ctx.query["limit"];
+    let query_cursor = ctx.query["cursor"];
+    let query_word = ctx.query["word"];
+    let query_content_type = ctx.query["content_type"];
+    let query_offset = ctx.query["offset"];
+    let query_use_offset = ctx.query["use_offset"];
+    if (
+        query_limit instanceof Array
         || query_cursor instanceof Array
         || query_word instanceof Array
         || query_content_type instanceof Array
         || query_offset instanceof Array
-        || query_use_offset instanceof Array){
+        || query_use_offset instanceof Array
+    ) {
         return sendError(400, "paramter can not be array");
     }
     const limit = ParseQueryNumber(query_limit);
@@ -52,7 +57,7 @@ const ContentQueryHandler = (controller : DocumentAccessor) => async (ctx: Conte
     if (limit === NaN || cursor === NaN || offset === NaN) {
         return sendError(400, "parameter limit, cursor or offset is not a number");
     }
-    const allow_tag = ParseQueryArray(ctx.query['allow_tag']);
+    const allow_tag = ParseQueryArray(ctx.query["allow_tag"]);
     const [ok, use_offset] = ParseQueryBoolean(query_use_offset);
     if (!ok) {
         return sendError(400, "use_offset must be true or false.");
@@ -69,28 +74,29 @@ const ContentQueryHandler = (controller : DocumentAccessor) => async (ctx: Conte
     };
     let document = await controller.findList(option);
     ctx.body = document;
-    ctx.type = 'json';
-}
+    ctx.type = "json";
+};
 const UpdateContentHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params['num']);
+    const num = Number.parseInt(ctx.params["num"]);
 
-    if(ctx.request.type !== 'json'){
+    if (ctx.request.type !== "json") {
         return sendError(400, "update fail. invalid document type: it is not json.");
     }
     if (typeof ctx.request.body !== "object") {
         return sendError(400, "update fail. invalid argument: not");
     }
     const content_desc: Partial<Document> & { id: number } = {
-        id:num,...ctx.request.body
+        id: num,
+        ...ctx.request.body,
     };
     const success = await controller.update(content_desc);
     ctx.body = JSON.stringify(success);
-    ctx.type = 'json';
-}
+    ctx.type = "json";
+};
 
 const AddTagHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    let tag_name = ctx.params['tag'];
-    const num = Number.parseInt(ctx.params['num']);
+    let tag_name = ctx.params["tag"];
+    const num = Number.parseInt(ctx.params["num"]);
     if (typeof tag_name === undefined) {
         return sendError(400, "??? Unreachable");
     }
@@ -101,11 +107,11 @@ const AddTagHandler = (controller: DocumentAccessor)=>async (ctx: Context, next:
     }
     const r = await controller.addTag(c, tag_name);
     ctx.body = JSON.stringify(r);
-    ctx.type = 'json';
+    ctx.type = "json";
 };
 const DelTagHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    let tag_name = ctx.params['tag'];
-    const num = Number.parseInt(ctx.params['num']);
+    let tag_name = ctx.params["tag"];
+    const num = Number.parseInt(ctx.params["num"]);
     if (typeof tag_name === undefined) {
         return sendError(400, "?? Unreachable");
     }
@@ -116,16 +122,16 @@ const DelTagHandler = (controller: DocumentAccessor)=>async (ctx: Context, next:
     }
     const r = await controller.delTag(c, tag_name);
     ctx.body = JSON.stringify(r);
-    ctx.type = 'json';
-}
+    ctx.type = "json";
+};
 const DeleteContentHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params['num']);
+    const num = Number.parseInt(ctx.params["num"]);
     const r = await controller.del(num);
     ctx.body = JSON.stringify(r);
-    ctx.type = 'json';
+    ctx.type = "json";
 };
 const ContentHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params['num']);
+    const num = Number.parseInt(ctx.params["num"]);
     let document = await controller.findById(num, true);
     if (document == undefined) {
         return sendError(404, "document does not exist.");
@@ -134,7 +140,7 @@ const ContentHandler = (controller : DocumentAccessor) => async (ctx:Context, ne
         return sendError(404, "document has been removed.");
     }
     const path = join(document.basepath, document.filename);
-    ctx.state['location'] = {
+    ctx.state["location"] = {
         path: path,
         type: document.content_type,
         additional: document.additional,
@@ -154,8 +160,8 @@ export const getContentRouter = (controller: DocumentAccessor)=>{
     ret.del("/:num(\\d+)/tags/:tag", PerCheck(Per.ModifyTag), DelTagHandler(controller));
     ret.del("/:num(\\d+)", AdminOnly, DeleteContentHandler(controller));
     ret.all("/:num(\\d+)/(.*)", PerCheck(Per.QueryContent), ContentHandler(controller));
-    ret.use("/:num(\\d+)",PerCheck(Per.QueryContent),(new AllContentRouter).routes());
+    ret.use("/:num(\\d+)", PerCheck(Per.QueryContent), (new AllContentRouter()).routes());
     return ret;
-}
+};
 
 export default getContentRouter;

src/route/context.ts

@@ -1,8 +1,8 @@
 export type ContentLocation = {
-    path:string,
-    type:string,
-    additional:object|undefined,
-}
+    path: string;
+    type: string;
+    additional: object | undefined;
+};
 export interface ContentContext {
-    location:ContentLocation
+    location: ContentLocation;
 }

src/route/error_handler.ts

@@ -1,9 +1,9 @@
-import {Context, Next} from 'koa';
+import { Context, Next } from "koa";
 
 export interface ErrorFormat {
-    code: number,
-    message: string,
-    detail?: string
+    code: number;
+    message: string;
+    detail?: string;
 }
 
 class ClientRequestError implements Error {
@@ -21,8 +21,8 @@ class ClientRequestError implements Error{
 
 const code_to_message_table: { [key: number]: string | undefined } = {
     400: "BadRequest",
-    404:"NotFound"
-}
+    404: "NotFound",
+};
 
 export const error_handler = async (ctx: Context, next: Next) => {
     try {
@@ -32,19 +32,18 @@ export const error_handler = async (ctx:Context,next: Next)=>{
             const body: ErrorFormat = {
                 code: err.code,
                 message: code_to_message_table[err.code] ?? "",
-                detail: err.message
-            }
+                detail: err.message,
+            };
             ctx.status = err.code;
             ctx.body = body;
-        }
-        else{
+        } else {
             throw err;
         }
     }
-}
+};
 
 export const sendError = (code: number, message?: string) => {
     throw new ClientRequestError(code, message ?? "");
-}
+};
 
 export default error_handler;

src/route/tags.ts

@@ -1,25 +1,22 @@
 import { Context, Next } from "koa";
 import Router, { RouterContext } from "koa-router";
 import { TagAccessor } from "../model/tag";
-import { sendError } from "./error_handler";
 import { createPermissionCheckMiddleware as PerCheck, Permission } from "../permission/permission";
+import { sendError } from "./error_handler";
 
 export function getTagRounter(tagController: TagAccessor) {
     let router = new Router();
-    router.get("/",PerCheck(Permission.QueryContent),
-        async (ctx: Context)=>{
+    router.get("/", PerCheck(Permission.QueryContent), async (ctx: Context) => {
         if (ctx.query["withCount"]) {
             const c = await tagController.getAllTagCount();
             ctx.body = c;
-            }
-            else {
+        } else {
             const c = await tagController.getAllTagList();
             ctx.body = c;
         }
         ctx.type = "json";
     });
-    router.get("/:tag_name", PerCheck(Permission.QueryContent),
-        async (ctx: RouterContext)=>{
+    router.get("/:tag_name", PerCheck(Permission.QueryContent), async (ctx: RouterContext) => {
         const tag_name = ctx.params["tag_name"];
         const c = await tagController.getTagByName(tag_name);
         if (!c) {

src/route/util.ts

@@ -1,6 +1,4 @@
-
-import {Context} from 'koa';
-
+import { Context } from "koa";
 
 export function ParseQueryNumber(s: string[] | string | undefined): number | undefined {
     if (s === undefined) return undefined;
@@ -19,14 +17,14 @@ export function ParseQueryArgString(s: string[]|string|undefined){
 export function ParseQueryBoolean(s: string[] | string | undefined): [boolean, boolean | undefined] {
     let value: boolean | undefined;
 
-    if(s === "true")
+    if (s === "true") {
         value = true;
-    else if(s === "false")
+    } else if (s === "false") {
         value = false;
-    else if(s === undefined)
+    } else if (s === undefined) {
         value = undefined;
-    else return [false,undefined]
-    return [true,value]
+    } else return [false, undefined];
+    return [true, value];
 }
 
 export function since_last_modified(ctx: Context, last_modified: Date): boolean {

src/route/video.ts

@@ -1,13 +1,13 @@
-import {Context } from 'koa';
-import {promises, createReadStream} from "fs";
-import {ContentContext} from './context';
-import Router from 'koa-router';
+import { createReadStream, promises } from "fs";
+import { Context } from "koa";
+import Router from "koa-router";
+import { ContentContext } from "./context";
 
 export async function renderVideo(ctx: Context, path: string) {
-    const ext = path.trim().split('.').pop();
+    const ext = path.trim().split(".").pop();
     if (ext === undefined) {
         // ctx.status = 404;
-        console.error(`${path}:${ext}`)
+        console.error(`${path}:${ext}`);
         return;
     }
     ctx.response.type = ext;
@@ -15,10 +15,10 @@ export async function renderVideo(ctx: Context,path : string){
     const stat = await promises.stat(path);
     let start = 0;
     let end = 0;
-    ctx.set('Last-Modified',(new Date(stat.mtime).toUTCString()));
-    ctx.set('Date', new Date().toUTCString());
+    ctx.set("Last-Modified", new Date(stat.mtime).toUTCString());
+    ctx.set("Date", new Date().toUTCString());
     ctx.set("Accept-Ranges", "bytes");
-    if(range_text === ''){
+    if (range_text === "") {
         end = 1024 * 512;
         end = Math.min(end, stat.size - 1);
         if (start > end) {
@@ -29,8 +29,7 @@ export async function renderVideo(ctx: Context,path : string){
         ctx.length = stat.size;
         let stream = createReadStream(path);
         ctx.body = stream;
-    }
-    else{
+    } else {
         const m = range_text.match(/^bytes=(\d+)-(\d*)/);
         if (m === null) {
             ctx.status = 416;
@@ -48,7 +47,7 @@ export async function renderVideo(ctx: Context,path : string){
         ctx.response.set("Content-Range", `bytes ${start}-${end}/${stat.size}`);
         ctx.body = createReadStream(path, {
             start: start,
-            end:end
+            end: end,
         }); // inclusive range.
     }
 }
@@ -61,7 +60,7 @@ export class VideoRouter extends Router<ContentContext>{
         });
         this.get("/thumbnail", async (ctx, next) => {
             await renderVideo(ctx, ctx.state.location.path);
-        })
+        });
     }
 }
 

src/search/indexer.ts

@@ -1,4 +1,3 @@
-
 export interface PaginationOption {
     cursor: number;
     limit: number;

src/search/tokenizer.ts

@@ -1,4 +1,3 @@
-
 export interface ITokenizer {
     tokenize(s: string): string[];
 }

src/server.ts

@@ -1,22 +1,21 @@
-import Koa from 'koa';
-import Router from 'koa-router';
+import Koa from "koa";
+import Router from "koa-router";
 
-import {get_setting, SettingConfig} from './SettingConfig';
-import {connectDB} from './database';
-import {DiffManager, createDiffRouter} from './diff/mod';
+import { connectDB } from "./database";
+import { createDiffRouter, DiffManager } from "./diff/mod";
+import { get_setting, SettingConfig } from "./SettingConfig";
 
-import { createReadStream, readFileSync } from 'fs';
-import getContentRouter from './route/contents';
-import { createKnexDocumentAccessor, createKnexTagController, createKnexUserController } from './db/mod';
-import bodyparser from 'koa-bodyparser';
-import {error_handler} from './route/error_handler';
-import {createUserMiddleWare, createLoginRouter, isAdminFirst, getAdmin} from './login';
-
-import {createInterface as createReadlineInterface} from 'readline';
-import { DocumentAccessor, UserAccessor, TagAccessor } from './model/mod';
-import { createComicWatcher } from './diff/watcher/comic_watcher';
-import { getTagRounter } from './route/tags';
+import { createReadStream, readFileSync } from "fs";
+import bodyparser from "koa-bodyparser";
+import { createKnexDocumentAccessor, createKnexTagController, createKnexUserController } from "./db/mod";
+import { createLoginRouter, createUserMiddleWare, getAdmin, isAdminFirst } from "./login";
+import getContentRouter from "./route/contents";
+import { error_handler } from "./route/error_handler";
 
+import { createInterface as createReadlineInterface } from "readline";
+import { createComicWatcher } from "./diff/watcher/comic_watcher";
+import { DocumentAccessor, TagAccessor, UserAccessor } from "./model/mod";
+import { getTagRounter } from "./route/tags";
 
 class ServerApplication {
     readonly userController: UserAccessor;
@@ -26,9 +25,10 @@ class ServerApplication{
     readonly app: Koa;
     private index_html: string;
     private constructor(controller: {
-            userController: UserAccessor,
-            documentController:DocumentAccessor,
-            tagController: TagAccessor}){
+        userController: UserAccessor;
+        documentController: DocumentAccessor;
+        tagController: TagAccessor;
+    }) {
         this.userController = controller.userController;
         this.documentController = controller.documentController;
         this.tagController = controller.tagController;
@@ -46,7 +46,7 @@ class ServerApplication{
             if (await isAdminFirst(userAdmin)) {
                 const rl = createReadlineInterface({
                     input: process.stdin,
-                    output:process.stdout
+                    output: process.stdout,
                 });
                 const pw = await new Promise((res: (data: string) => void, err) => {
                     rl.question("put admin password :", (data) => {
@@ -63,68 +63,72 @@ class ServerApplication{
 
         let diff_router = createDiffRouter(this.diffManger);
         this.diffManger.register("comic", createComicWatcher());
+
+        console.log("setup router");
+
         let router = new Router();
-        router.use("/api/*", async (ctx,next)=>{
+        router.use("/api/(.*)", async (ctx, next) => {
             // For CORS
             ctx.res.setHeader("access-control-allow-origin", "*");
             await next();
         });
 
-        router.use('/api/diff',diff_router.routes());
-        router.use('/api/diff',diff_router.allowedMethods());
-        
-        this.serve_with_meta_index(router);
-        this.serve_index(router);
-        this.serve_static_file(router);
+        router.use("/api/diff", diff_router.routes());
+        router.use("/api/diff", diff_router.allowedMethods());
 
         const content_router = getContentRouter(this.documentController);
-        router.use('/api/doc',content_router.routes());
-        router.use('/api/doc',content_router.allowedMethods());
+        router.use("/api/doc", content_router.routes());
+        router.use("/api/doc", content_router.allowedMethods());
 
         const tags_router = getTagRounter(this.tagController);
         router.use("/api/tags", tags_router.allowedMethods());
         router.use("/api/tags", tags_router.routes());
 
-        const login_router = createLoginRouter(this.userController);
-        router.use('/user',login_router.routes());
-        router.use('/user',login_router.allowedMethods());
+        this.serve_with_meta_index(router);
+        this.serve_index(router);
+        this.serve_static_file(router);
 
+        const login_router = createLoginRouter(this.userController);
+        router.use("/user", login_router.routes());
+        router.use("/user", login_router.allowedMethods());
 
         if (setting.mode == "development") {
             let mm_count = 0;
             app.use(async (ctx, next) => {
                 console.log(`==========================${mm_count++}`);
                 const ip = (ctx.get("X-Real-IP")) ?? ctx.ip;
-            const fromClient = ctx.state['user'].username === "" ? ip : ctx.state['user'].username;
+                const fromClient = ctx.state["user"].username === "" ? ip : ctx.state["user"].username;
                 console.log(`${fromClient} : ${ctx.method} ${ctx.url}`);
                 await next();
                 // console.log(`404`);
-        });}
+            });
+        }
         app.use(router.routes());
         app.use(router.allowedMethods());
+        console.log("setup done");
     }
     private serve_index(router: Router) {
         const serveindex = (url: string) => {
             router.get(url, (ctx) => {
-                ctx.type = 'html'; ctx.body = this.index_html;
+                ctx.type = "html";
+                ctx.body = this.index_html;
                 const setting = get_setting();
-                ctx.set('x-content-type-options','no-sniff');
+                ctx.set("x-content-type-options", "no-sniff");
                 if (setting.mode === "development") {
-                    ctx.set('cache-control','no-cache'); 
+                    ctx.set("cache-control", "no-cache");
+                } else {
+                    ctx.set("cache-control", "public, max-age=3600");
                 }
-                else{
-                    ctx.set('cache-control','public, max-age=3600');
-                }
-            })
-        }
-        serveindex('/');
-        serveindex('/doc/:rest(.*)');
-        serveindex('/search');
-        serveindex('/login');
-        serveindex('/profile');
-        serveindex('/difference');
-        serveindex('/setting');
-        serveindex('/tags');
+            });
+        };
+        serveindex("/");
+        serveindex("/doc/:rest(.*)");
+        serveindex("/search");
+        serveindex("/login");
+        serveindex("/profile");
+        serveindex("/difference");
+        serveindex("/setting");
+        serveindex("/tags");
     }
     private serve_with_meta_index(router: Router) {
         const DocMiddleware = async (ctx: Koa.ParameterizedContext) => {
@@ -134,16 +138,18 @@ class ServerApplication{
             if (doc === undefined) {
                 ctx.status = 404;
                 meta = NotFoundContent();
-            }
-            else {
+            } else {
                 ctx.status = 200;
-                meta = createOgTagContent(doc.title,doc.tags.join(", "),
-                `https://aeolian.prelude.duckdns.org/api/doc/${docId}/comic/thumbnail`);
+                meta = createOgTagContent(
+                    doc.title,
+                    doc.tags.join(", "),
+                    `https://aeolian.prelude.duckdns.org/api/doc/${docId}/comic/thumbnail`,
+                );
             }
             const html = makeMetaTagInjectedHTML(this.index_html, meta);
             serveHTML(ctx, html);
-        }
-        router.get('/doc/:id(\\d+)',DocMiddleware);
+        };
+        router.get("/doc/:id(\\d+)", DocMiddleware);
 
         function NotFoundContent() {
             return createOgTagContent("Not Found Doc", "Not Found", "");
@@ -152,14 +158,14 @@ class ServerApplication{
             return html.replace("<!--MetaTag-Outlet-->", tagContent);
         }
         function serveHTML(ctx: Koa.Context, file: string) {
-            ctx.type = 'html'; ctx.body = file;
+            ctx.type = "html";
+            ctx.body = file;
             const setting = get_setting();
-            ctx.set('x-content-type-options','no-sniff');
+            ctx.set("x-content-type-options", "no-sniff");
             if (setting.mode === "development") {
-                ctx.set('cache-control','no-cache'); 
-            }
-            else{
-                ctx.set('cache-control','public, max-age=3600');
+                ctx.set("cache-control", "no-cache");
+            } else {
+                ctx.set("cache-control", "public, max-age=3600");
             }
         }
 
@@ -167,7 +173,8 @@ class ServerApplication{
             return `<meta property="${key}" content="${value}">`;
         }
         function createOgTagContent(title: string, description: string, image: string) {
-            return [createMetaTagContent("og:title",title),
+            return [
+                createMetaTagContent("og:title", title),
                 createMetaTagContent("og:type", "website"),
                 createMetaTagContent("og:description", description),
                 createMetaTagContent("og:image", image),
@@ -183,29 +190,30 @@ class ServerApplication{
     }
     private serve_static_file(router: Router) {
         const static_file_server = (path: string, type: string) => {
-            router.get('/'+path,async (ctx,next)=>{
+            router.get("/" + path, async (ctx, next) => {
                 const setting = get_setting();
-                ctx.type = type; ctx.body = createReadStream(path);
-                ctx.set('x-content-type-options','no-sniff');
+                ctx.type = type;
+                ctx.body = createReadStream(path);
+                ctx.set("x-content-type-options", "no-sniff");
                 if (setting.mode === "development") {
-                    ctx.set('cache-control','no-cache'); 
+                    ctx.set("cache-control", "no-cache");
+                } else {
+                    ctx.set("cache-control", "public, max-age=3600");
                 }
-                else{
-                    ctx.set('cache-control','public, max-age=3600');
-                }
-            })};
+            });
+        };
         const setting = get_setting();
-        static_file_server('dist/bundle.css','css');
-        static_file_server('dist/bundle.js','js');
+        static_file_server("dist/bundle.css", "css");
+        static_file_server("dist/bundle.js", "js");
         if (setting.mode === "development") {
-            static_file_server('dist/bundle.js.map','text');        
-            static_file_server('dist/bundle.css.map','text');
+            static_file_server("dist/bundle.js.map", "text");
+            static_file_server("dist/bundle.css.map", "text");
         }
     }
     start_server() {
         let setting = get_setting();
-        console.log("start server");
         // todo : support https
+        console.log(`listen on http://${setting.localmode ? "localhost" : "0.0.0.0"}:${setting.port}`);
         return this.app.listen(setting.port, setting.localmode ? "127.0.0.1" : "0.0.0.0");
     }
     static async createServer() {
@@ -221,7 +229,6 @@ class ServerApplication{
         return app;
     }
 }
-//let Koa = require("koa");
 
 export async function create_server() {
     return await ServerApplication.createServer();

src/types/json.ts

@@ -1,5 +1,4 @@
-
 export type JSONPrimitive = null | boolean | number | string;
 export interface JSONMap extends Record<string, JSONType> {}
-export interface JSONArray extends Array<JSONType>{};
+export interface JSONArray extends Array<JSONType> {}
 export type JSONType = JSONMap | JSONPrimitive | JSONArray;

src/util/configRW.ts

@@ -1,5 +1,5 @@
-import {readFileSync, existsSync, writeFileSync, promises as fs} from 'fs';
-import {validate} from 'jsonschema';
+import { existsSync, promises as fs, readFileSync, writeFileSync } from "fs";
+import { validate } from "jsonschema";
 
 export class ConfigManager<T> {
     path: string;

src/util/type_check.ts

@@ -7,10 +7,9 @@ export function check_type<T>(obj: any,check_proto:Record<string,string|undefine
             if (!(obj[it] instanceof Array)) {
                 return false;
             }
-        }
-        else if(defined !== typeof obj[it]){
+        } else if (defined !== typeof obj[it]) {
             return false;
         }
     }
     return true;
-};
+}

src/util/zipwrap.ts

@@ -1,14 +1,14 @@
-import { ZipEntry } from 'node-stream-zip';
+import { ZipEntry } from "node-stream-zip";
 
-import {orderBy} from 'natural-orderby';
-import { ReadStream } from 'fs';
-import StreamZip from 'node-stream-zip';
+import { ReadStream } from "fs";
+import { orderBy } from "natural-orderby";
+import StreamZip from "node-stream-zip";
 
 export type ZipAsync = InstanceType<typeof StreamZip.async>;
 export async function readZip(path: string): Promise<ZipAsync> {
     return new StreamZip.async({
         file: path,
-        storeEntries: true
+        storeEntries: true,
     });
 }
 export async function entriesByNaturalOrder(zip: ZipAsync) {
@@ -24,8 +24,10 @@ export async function readAllFromZip(zip:ZipAsync,entry: ZipEntry):Promise<Buffe
     const stream = await createReadableStreamFromZip(zip, entry);
     const chunks: Uint8Array[] = [];
     return new Promise((resolve, reject) => {
-        stream.on('data',(data)=>{chunks.push(data)});
-        stream.on('error', (err)=>reject(err));
-        stream.on('end',()=>resolve(Buffer.concat(chunks)));
+        stream.on("data", (data) => {
+            chunks.push(data);
+        });
+        stream.on("error", (err) => reject(err));
+        stream.on("end", () => resolve(Buffer.concat(chunks)));
     });
 }

tsconfig.json

@@ -65,8 +65,8 @@
 
     /* Advanced Options */
     "skipLibCheck": true, /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   },
   "include": ["./"],
-  "exclude": ["src/client","app","seeds"],
+  "exclude": ["src/client", "app", "seeds"]
 }