README.md

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

app.ts

@@ -1,15 +1,15 @@
-import { app, BrowserWindow, dialog, session } from "electron";
-import { ipcMain } from "electron";
-import { join } from "path";
-import { accessTokenName, getAdminAccessTokenValue, getAdminRefreshTokenValue, refreshTokenName } from "./src/login";
-import { UserAccessor } from "./src/model/mod";
-import { create_server } from "./src/server";
+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 { join } from "path";
+import { ipcMain } from 'electron';
+import { UserAccessor } from "./src/model/mod";
 
-function registerChannel(cntr: UserAccessor) {
-    ipcMain.handle("reset_password", async (event, username: string, password: string) => {
+function registerChannel(cntr: UserAccessor){
+  ipcMain.handle('reset_password', async(event,username:string,password:string)=>{
     const user = await cntr.findUser(username);
-        if (user === undefined) {
+    if(user === undefined){
       return false;
     }
     user.reset_password(password);
@@ -26,47 +26,49 @@ if (!setting.cli) {
       height: 600,
       center: true,
       useContentSize: true,
-            webPreferences: {
-                preload: join(__dirname, "preload.js"),
-                contextIsolation: true,
-            },
+      webPreferences:{
+        preload:join(__dirname,'preload.js'),
+        contextIsolation:true,
+      }
     });
-        await wnd.loadURL(`data:text/html;base64,` + Buffer.from(loading_html).toString("base64"));
-        // await wnd.loadURL('../loading.html');
-        // set admin cookies.
+    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({
-            url: `http://localhost:${setting.port}`,
-            name: accessTokenName,
-            value: getAdminAccessTokenValue(),
+      url:`http://localhost:${setting.port}`,
+      name:accessTokenName,
+      value:getAdminAccessTokenValue(),
       httpOnly: true,
       secure: false,
-            sameSite: "strict",
+      sameSite:"strict"
     });
     await session.defaultSession.cookies.set({
-            url: `http://localhost:${setting.port}`,
-            name: refreshTokenName,
-            value: getAdminRefreshTokenValue(),
+      url:`http://localhost:${setting.port}`,
+      name:refreshTokenName,
+      value:getAdminRefreshTokenValue(),
       httpOnly: true,
       secure: false,
-            sameSite: "strict",
+      sameSite:"strict"
     });
-        try {
+    try{
       const server = await create_server();
       const app = server.start_server();
       registerChannel(server.userController);
       await wnd.loadURL(`http://localhost:${setting.port}`);
-        } catch (e) {
-            if (e instanceof Error) {
+    }
+    catch(e){
+      if(e instanceof Error){
         await dialog.showMessageBox({
           type: "error",
-                    title: "error!",
-                    message: e.message,
+          title:"error!",
+          message:e.message,
         });
-            } else {
+      }
+      else{
         await dialog.showMessageBox({
           type: "error",
-                    title: "error!",
-                    message: String(e),
+          title:"error!",
+          message:String(e),
         });
       }
     }
@@ -77,7 +79,7 @@ if (!setting.cli) {
 
   const isPrimary = app.requestSingleInstanceLock();
   if (!isPrimary) {
-        app.quit(); // exit window
+    app.quit(); //exit window
     app.exit();
   }
   app.on("second-instance", () => {

dprint.json

@@ -1,23 +0,0 @@
-{
-  "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,48 +1,48 @@
-import { promises } from "fs";
+import { promises } from 'fs';
 const { readdir, writeFile } = promises;
-import { dirname, join } from "path";
-import { createGenerator } from "ts-json-schema-generator";
+import {createGenerator} from 'ts-json-schema-generator';
+import {dirname,join} from 'path'; 
 
-async function genSchema(path: string, typename: string) {
+async function genSchema(path:string,typename:string){
     const gen = createGenerator({
-        path: path,
-        type: typename,
-        tsconfig: "tsconfig.json",
+        path:path,
+        type:typename,
+        tsconfig:"tsconfig.json"
     });
     const schema  = gen.createSchema(typename);
-    if (schema.definitions != undefined) {
+    if(schema.definitions != undefined){
         const definitions = schema.definitions;
         const definition = definitions[typename];
-        if (typeof definition == "object") {
+        if(typeof definition == "object" ){
             let property = definition.properties;
-            if (property) {
-                property["$schema"] = {
-                    type: "string",
+            if(property){
+                property['$schema'] = {
+                    type:"string"
                 };
             }
         }
     }
     const text = JSON.stringify(schema);
-    await writeFile(join(dirname(path), `${typename}.schema.json`), text);
+    await writeFile(join(dirname(path),`${typename}.schema.json`),text);
 }
-function capitalize(s: string) {
+function capitalize(s:string){
     return s.charAt(0).toUpperCase() + s.slice(1);
 }
-async function setToALL(path: string) {
-    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 => {
+async function setToALL(path:string) {
+    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;
         const m = /(.+)\.ts/.exec(name);
-        if (m !== null) {
+        if(m !== null){
             const typename = m[1];
-            return genSchema(join(path, typename), capitalize(typename));
+            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));
+    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,54 +1,54 @@
-import { Knex } from "knex";
+import {Knex} from 'knex';
 
-export async function up(knex: Knex) {
-    await knex.schema.createTable("schema_migration", (b) => {
+export async function up(knex:Knex) {
+    await knex.schema.createTable("schema_migration",(b)=>{
         b.string("version");
         b.boolean("dirty");
     });
 
-    await knex.schema.createTable("users", (b) => {
+    await knex.schema.createTable("users",(b)=>{
         b.string("username").primary().comment("user's login id");
-        b.string("password_hash", 64).notNullable();
-        b.string("password_salt", 64).notNullable();
+        b.string("password_hash",64).notNullable();
+        b.string("password_salt",64).notNullable();
     });
-    await knex.schema.createTable("document", (b) => {
+    await knex.schema.createTable("document",(b)=>{
         b.increments("id").primary();
         b.string("title").notNullable();
-        b.string("content_type", 16).notNullable();
-        b.string("basepath", 256).notNullable().comment("directory path for resource");
-        b.string("filename", 256).notNullable().comment("filename");
+        b.string("content_type",16).notNullable();
+        b.string("basepath",256).notNullable().comment("directory path for resource");
+        b.string("filename",256).notNullable().comment("filename");
         b.string("content_hash").nullable();
         b.json("additional").nullable();
         b.integer("created_at").notNullable();
         b.integer("modified_at").notNullable();
         b.integer("deleted_at");
-        b.index("content_type", "content_type_index");
+        b.index("content_type","content_type_index");
     });
-    await knex.schema.createTable("tags", (b) => {
+    await knex.schema.createTable("tags", (b)=>{
         b.string("name").primary();
         b.text("description");
     });
-    await knex.schema.createTable("doc_tag_relation", (b) => {
+    await knex.schema.createTable("doc_tag_relation",(b)=>{
         b.integer("doc_id").unsigned().notNullable();
         b.string("tag_name").notNullable();
         b.foreign("doc_id").references("document.id");
         b.foreign("tag_name").references("tags.name");
-        b.primary(["doc_id", "tag_name"]);
+        b.primary(["doc_id","tag_name"]);
     });
-    await knex.schema.createTable("permissions", b => {
-        b.string("username").notNullable();
+    await knex.schema.createTable("permissions",b=>{
+        b.string('username').notNullable();
         b.string("name").notNullable();
-        b.primary(["username", "name"]);
-        b.foreign("username").references("users.username");
+        b.primary(["username","name"]);
+        b.foreign('username').references('users.username');
     });
-    // create admin account.
+    //create admin account.
     await knex.insert({
-        username: "admin",
-        password_hash: "unchecked",
-        password_salt: "unchecked",
-    }).into("users");
-}
+        username:"admin",
+        password_hash:"unchecked",
+        password_salt:"unchecked"
+    }).into('users');
+};
 
-export async function down(knex: Knex) {
-    throw new Error("Downward migrations are not supported. Restore from backup.");
-}
+export async function down(knex:Knex) {
+    throw new Error('Downward migrations are not supported. Restore from backup.');
+};

package.json

@@ -6,9 +6,8 @@
   "scripts": {
     "compile": "tsc",
     "compile:watch": "tsc -w",
-    "build": "cd src/client && pnpm run build:prod",
-    "build:watch": "cd src/client && pnpm run build:watch",
-    "fmt": "dprint fmt",
+    "build": "cd src/client && npm run build:prod",
+    "build:watch": "cd src/client && npm run build:watch",
     "app": "electron build/app.js",
     "app:build": "electron-builder",
     "app:pack": "electron-builder --dir",
@@ -57,7 +56,6 @@
     "@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,7 +3,6 @@
 ## Routing
 
 ### server routing
-
 - content
   - \d+
     - comic
@@ -32,7 +31,6 @@
 - profile
 
 ## TODO
-
 - server push
 - ~~permission~~
 - diff

preload.ts

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

src/SettingConfig.ts

@@ -1,76 +1,76 @@
-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;
+     * if you want to invalidate access token, change 'jwt_secretkey'.*/
+    forbid_remote_admin_login:boolean,
 }
-const default_setting: SettingConfig = {
+const default_setting:SettingConfig = {
     localmode: true,
     secure: true,
-    guest: [],
-    jwt_secretkey: "itsRandom",
-    port: 8080,
-    mode: "production",
-    cli: false,
-    forbid_remote_admin_login: true,
-};
-let setting: null | SettingConfig = null;
+    guest:[],
+    jwt_secretkey:"itsRandom",
+    port:8080,
+    mode:"production",
+    cli:false,
+    forbid_remote_admin_login:true,
+}
+let setting: null|SettingConfig = null;
 
-const setEmptyToDefault = (target: any, default_table: SettingConfig) => {
+const setEmptyToDefault = (target:any,default_table:SettingConfig)=>{
     let diff_occur = false;
-    for (const key in default_table) {
-        if (key === undefined || key in target) {
+    for(const key in default_table){
+        if(key === undefined || key in target){
             continue;
         }
         target[key] = default_table[key as keyof 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" })) : {};
-    const partial_occur = setEmptyToDefault(ret, default_setting);
-    if (partial_occur) {
-        writeFileSync("settings.json", JSON.stringify(ret));
+export const read_setting_from_file = ()=>{
+    let ret =  existsSync("settings.json") ? JSON.parse(readFileSync("settings.json",{encoding:"utf8"})) : {};
+    const partial_occur = setEmptyToDefault(ret,default_setting);
+    if(partial_occur){
+        writeFileSync("settings.json",JSON.stringify(ret));
     }
     return ret as SettingConfig;
-};
-export function get_setting(): SettingConfig {
-    if (setting === null) {
+}
+export function get_setting():SettingConfig{
+    if(setting === null){
         setting = read_setting_from_file();
         const env = process.env.NODE_ENV;
-        if (env !== undefined && (env != "production" && env != "development")) {
+        if(env !== undefined && (env != "production" && env != "development")){
             throw new Error("process unknown value in NODE_ENV: must be either \"development\" or \"production\"");
         }
         setting.mode = env ?? setting.mode;

src/client/accessor/document.ts

@@ -1,99 +1,99 @@
-import { Document, DocumentAccessor, DocumentBody, QueryListOption } from "../../model/doc";
-import { toQueryString } from "./util";
+import {Document, DocumentAccessor, DocumentBody, QueryListOption} from "../../model/doc";
+import {toQueryString} from './util';
 const baseurl = "/api/doc";
 
 export * from "../../model/doc";
 
-export class FetchFailError extends Error {}
+export class FetchFailError extends Error{}
 
-export class ClientDocumentAccessor implements DocumentAccessor {
+export class ClientDocumentAccessor implements DocumentAccessor{
     search: (search_word: string) => Promise<Document[]>;
     addList: (content_list: DocumentBody[]) => Promise<number[]>;
-    async findByPath(basepath: string, filename?: string): Promise<Document[]> {
+    async findByPath(basepath: string, filename?: string): Promise<Document[]>{
         throw new Error("not allowed");
-    }
-    async findDeleted(content_type: string): Promise<Document[]> {
+    };
+    async findDeleted(content_type: string): Promise<Document[]>{
         throw new Error("not allowed");
-    }
-    async findList(option?: QueryListOption | undefined): Promise<Document[]> {
+    };
+    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 !== 200) throw new FetchFailError("findList Failed");
+        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> {
+    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;
     }
     /**
      * not implement
      */
-    async findListByBasePath(basepath: string): Promise<Document[]> {
+    async findListByBasePath(basepath: string): Promise<Document[]>{
         throw new Error("not implement");
         return [];
     }
-    async update(c: Partial<Document> & { id: number }): Promise<boolean> {
-        const { id, ...rest } = c;
-        const res = await fetch(`${baseurl}/${id}`, {
+    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",
-            },
+            headers:{
+                'content-type':"application/json"
+            }
         });
         const ret = await res.json();
         return ret;
     }
-    async add(c: DocumentBody): Promise<number> {
+    async add(c: DocumentBody): Promise<number>{
         throw new Error("not allow");
-        const res = await fetch(`${baseurl}`, {
+        const res = await fetch(`${baseurl}`,{
             method: "POST",
             body: JSON.stringify(c),
-            headers: {
-                "content-type": "application/json",
-            },
+            headers:{
+                '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",
+    async del(id: number): Promise<boolean>{
+        const res = await fetch(`${baseurl}/${id}`,{
+            method: "DELETE"
         });
         const ret = await res.json();
         return ret;
     }
-    async addTag(c: Document, tag_name: string): Promise<boolean> {
-        const { id, ...rest } = c;
-        const res = await fetch(`${baseurl}/${id}/tags/${tag_name}`, {
+    async addTag(c: Document, tag_name: string): Promise<boolean>{
+        const {id,...rest} = c;
+        const res = await fetch(`${baseurl}/${id}/tags/${tag_name}`,{
             method: "POST",
             body: JSON.stringify(rest),
-            headers: {
-                "content-type": "application/json",
-            },
+            headers:{
+                'content-type':"application/json"
+            }
         });
         const ret = await res.json();
         return ret;
     }
-    async delTag(c: Document, tag_name: string): Promise<boolean> {
-        const { id, ...rest } = c;
-        const res = await fetch(`${baseurl}/${id}/tags/${tag_name}`, {
+    async delTag(c: Document, tag_name: string): Promise<boolean>{
+        const {id,...rest} = c;
+        const res = await fetch(`${baseurl}/${id}/tags/${tag_name}`,{
             method: "DELETE",
             body: JSON.stringify(rest),
-            headers: {
-                "content-type": "application/json",
-            },
+            headers:{
+                'content-type':"application/json"
+            }
         });
         const ret = await res.json();
         return ret;
     }
 }
-export const CDocumentAccessor = new ClientDocumentAccessor();
-export const makeThumbnailUrl = (x: Document) => {
+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,32 +1,35 @@
-type Representable = string | number | boolean;
+
+type Representable = string|number|boolean;
 
 type ToQueryStringA = {
-    [name: string]: Representable | Representable[] | undefined;
+    [name:string]:Representable|Representable[]|undefined
 };
 
-export const toQueryString = (obj: ToQueryStringA) => {
+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("&");
-};
-export const QueryStringToMap = (query: string) => {
-    const keyValue = query.slice(query.indexOf("?") + 1).split("&");
-    const param: { [k: string]: string | string[] } = {};
-    keyValue.forEach((p) => {
-        const [k, v] = p.split("=");
+            ? 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[]} = {};
+    keyValue.forEach((p)=>{
+        const [k,v] = p.split("=");
         const pv = param[k];
-        if (pv === undefined) {
+        if(pv === undefined){
             param[k] = v;
-        } else if (typeof pv === "string") {
-            param[k] = [pv, v];
-        } else {
+        }
+        else if(typeof pv === "string"){
+            param[k] = [pv,v];
+        }
+        else{
             pv.push(v);
         }
     });
     return param;
-};
+}

src/client/app.tsx

@@ -1,21 +1,21 @@
-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 React, { createContext, useEffect, useRef, useState } from 'react';
+import ReactDom from 'react-dom';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import {
-    DifferencePage,
-    DocumentAbout,
     Gallery,
+    DocumentAbout,
     LoginPage,
     NotFoundPage,
     ProfilePage,
-    ReaderPage,
+    DifferencePage,
     SettingPage,
-    TagsPage,
-} from "./page/mod";
-import { getInitialValue, UserContext } from "./state";
+    ReaderPage,
+    TagsPage
+} from './page/mod';
+import { getInitialValue, UserContext } from './state';
+import { ThemeProvider, createTheme } from '@mui/material';
 
-import "./css/style.css";
+import './css/style.css';
 
 const theme = createTheme();
 
@@ -29,20 +29,18 @@ const App = () => {
             setUserPermission(permission);
         }
     })();
-    // useEffect(()=>{});
+    //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>
@@ -55,11 +53,10 @@ const App = () => {
                     </Routes>
                 </BrowserRouter>
             </ThemeProvider>
-        </UserContext.Provider>
-    );
+        </UserContext.Provider>);
 };
 
 ReactDom.render(
     <App />,
-    document.getElementById("root"),
+    document.getElementById("root")
 );

src/client/build.ts

@@ -1,24 +1,25 @@
-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 { Box, Button, Grid, Link, Paper, Theme, Typography, useTheme } from "@mui/material";
-import { TagChip } from "../component/tagchip";
-import { ThumbnailContainer } from "../page/reader/reader";
+import { Link, Paper, Theme, Box, useTheme, Typography, Grid, Button } from '@mui/material';
+import { ThumbnailContainer } from '../page/reader/reader';
+import { TagChip } from '../component/tagchip';
 
-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,131 +32,113 @@ 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",
-                    height: "auto",
-                },
-            }}
-            elevation={4}
-        >
-            <Link
-                component={RouterLink}
-                to={{
-                    pathname: makeContentReaderUrl(document.id),
-                }}
-            >
-                {document.deleted_at === null
-                    ? <ThumbnailContainer content={document} />
-                    : <Typography variant="h4">Deleted</Typography>}
+        }
+    }} 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>)}
         </Link>
-            <Box>
-                <Link variant="h5" color="inherit" component={RouterLink} to={{ pathname: url }}>
+        <Box /*className={propclasses.infoContainer ?? classes.infoContainer}*/>
+            <Link variant='h5' color='inherit' component={RouterLink} to={{pathname: url}}
+                /*className={propclasses.title ?? classes.title}*/>
                 {document.title}
             </Link>
-                <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}
+            <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}
                     createdAt={document.created_at}
                     deletedAt={document.deleted_at != null ? document.deleted_at : undefined}
-                            >
-                            </ComicDetailTag>
-                        )}
+                    /* classes={({tag_list:classes.tag_list})}*/ ></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>
-    );
-};
-async function documentDelete(id: number) {
+    </Paper>);
+}
+async function documentDelete(id: number){
     const t = await DocumentAccessor.del(id);
-    if (t) {
+    if(t){
         alert("document deleted!");
-    } else {
+    }
+    else{
         alert("document already deleted.");
     }
 }
 
 function ComicDetailTag(prop: {
-    tags: string[]; /*classes:{
+    tags: string[];/*classes:{
     tag_list:string
 }*/ 
     path?: string;
@@ -171,54 +153,40 @@ 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}>
+        { 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}>
+            </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}>
+            </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></>
+        }
         <Grid item xs={3}>
-                <Typography variant="subtitle1">Tags</Typography>
+        <Typography variant='subtitle1'>Tags</Typography>
         </Grid>
         <Grid item xs={9}>
-                {allTag.map(x => <TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)}
+            {allTag.map(x => (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>))}
         </Grid>
-        </Grid>
-    );
+    </Grid>);
 }

src/client/component/headline.tsx

@@ -1,35 +1,21 @@
-import { AccountCircle, ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon } from "@mui/icons-material";
+import React, { useContext, useState } from 'react';
 import {
-    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";
+    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';
 
-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 }) => ({
@@ -38,56 +24,51 @@ 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);
@@ -96,36 +77,25 @@ 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 />}
@@ -133,25 +103,19 @@ 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"
@@ -159,114 +123,90 @@ 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={{
+                <StyledSearchBar >
+                    <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}
-            <StyledNav>
+        <nav style={{ width: theme.spacing(7) }}>
             <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 smDown implementation="css">
-                    <StyledDrawer
-                        variant="permanent"
-                        anchor="left"
+            <Hidden xsDown implementation="css">
+                <StyledDrawer variant='permanent' anchor='left'
                     sx={{
                         ...closedMixin(theme),
-                            "& .MuiDrawer-paper": closedMixin(theme),
-                        }}
-                    >
+                        '& .MuiDrawer-paper': closedMixin(theme),
+                    }}>
                     {drawer_contents}
                 </StyledDrawer>
             </Hidden>
-            </StyledNav>
-            <main
-                style={{
-                    display: "flex",
-                    flexFlow: "column",
+        </nav>
+        <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>
-    );
-    function navSearch(search: string) {
+    </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,10 +1,8 @@
-import { Box, CircularProgress } from "@mui/material";
-import React from "react";
+import React from 'react';
+import {Box, CircularProgress} from '@mui/material';
 
-export const LoadingCircle = () => {
-    return (
-        <Box style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }}>
+export const LoadingCircle = ()=>{
+    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 "./headline";
-export * from "./loading";
-export * from "./navlist";
-export * from "./tagchip";
+export * from './contentinfo';
+export * from './loading';
+export * from './tagchip';
+export * from './navlist';
+export * from './headline';

src/client/component/navlist.tsx

@@ -1,58 +1,43 @@
-import {
-    ArrowBack as ArrowBackIcon,
-    Collections as CollectionIcon,
-    Folder as FolderIcon,
-    Home as HomeIcon,
+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,
     List as ListIcon,
-    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";
+    Folder as FolderIcon } from '@mui/icons-material';
+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>
+export const NavList = (props: {children?:React.ReactNode})=>{
+    return (<List>
             {props.children}
-        </List>
-    );
-};
+        </List>);
+}
 
-export const BackItem = (props: { to?: string }) => {
-    return <NavItem name="Back" to={props.to ?? "/"} icon={<ArrowBackIcon></ArrowBackIcon>} />;
-};
+export const BackItem = (props:{to?:string})=>{
+    return <NavItem name="Back" to={props.to ?? "/"} icon={<ArrowBackIcon></ArrowBackIcon>}/>;
+}
 
-export function CommonMenuList(props?: { url?: string }) {
+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 />} />
         <Divider />
-            <NavItem name="Tags" to="/tags" icon={<ListIcon />} />
+        <NavItem name="Tags" to="/tags" icon={<ListIcon/>}/>
         <Divider />
-            <NavItem name="Difference" to="/difference" icon={<FolderIcon />}></NavItem>
+        <NavItem name="Difference" to="/difference" icon={<FolderIcon/>}></NavItem>
         <NavItem name="Settings" to="/setting" icon={<SettingIcon />} />
-        </NavList>
-    );
+    </NavList>);
 }

src/client/component/tagchip.tsx

@@ -1,78 +1,86 @@
-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";
+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';
 
 type TagChipStyleProp = {
-    color: `rgba(${number},${number},${number},${number})` | `#${string}` | 'default';
-};
+    color: string
+}
 
-const { blue, pink } = colors;
-const getTagColorName = (tagname: string): TagChipStyleProp['color'] => {
-    if (tagname.startsWith("female")) {
-        return pink[600];
-    } else if (tagname.startsWith("male")) {
-        return blue[600];
-    } else return "default";
-};
-
-type ColorChipProp = Omit<ChipTypeMap["props"], "color"> & TagChipStyleProp & {
-    component?: React.ElementType;
-    to?: string;
-};
-
-export const ColorChip = (props: ColorChipProp) => {
-    const { color, ...rest } = props;
-    const theme = useTheme();
-
-    let newcolor = color;
-    if (color === "default"){
-        newcolor = "#ebebeb";
+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),
         }
-    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;
-    const colorName = getTagColorName(tagname);
-
-    let newlabel: React.ReactNode = label;
-    if (typeof label === "string") {
-        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);
+    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),
         }
     }
+}));
 
-    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}/>
-        );
+const {blue, pink} = colors;
+const getTagColorName = (tagname :string):string=>{
+    if(tagname.startsWith("female")){
+        return pink[600];
+    }
+    else if(tagname.startsWith("male")){
+        return blue[600];
+    }
+    else return "default";
+}
+
+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>;
+}
+
+type TagChipProp = Omit<ChipTypeMap['props'],"color"> & {
+    tagname:string
+}
+
+export const TagChip = (props:TagChipProp)=>{
+    const {tagname,label,clickable,...rest} = props;
+    let newlabel:string|undefined = undefined;
+    if(typeof label === "string"){
+        if(label.startsWith("female:")){
+            newlabel ="♀ "+label.slice(7);
+        }
+        else if(label.startsWith("male:")){
+            newlabel = "♂ "+label.slice(5);
+        }
+    }
+    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>);
     return inner;
-};
+}

src/client/page/404.tsx

@@ -1,13 +1,11 @@
-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";
+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';
 
-export const NotFoundPage = () => {
+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 { 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";
+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';
 
 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,26 +95,28 @@ 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,141 +1,127 @@
-import { Box, Button, Grid, Paper, Theme, Typography } from "@mui/material";
-import { Stack } from "@mui/material";
-import React, { useContext, useEffect, useState } from "react";
+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) => ({
-    paper: {
+const useStyles = ((theme:Theme)=>({
+    paper:{
         padding: theme.spacing(2),
     },
-    commitable: {
-        display: "grid",
+    commitable:{
+        display:'grid',
         gridTemplateColumns: `100px auto`,
     },
-    contentTitle: {
-        marginLeft: theme.spacing(2),
-    },
-});
+    contentTitle:{
+        marginLeft: theme.spacing(2)
+    }
+}));
 type FileDifference = {
-    type: string;
-    value: {
-        type: string;
-        path: string;
-    }[];
-};
+    type:string,
+    value:{
+        type:string,
+        path:string,
+    }[]
+}
 
-function TypeDifference(prop: {
-    content: FileDifference;
-    onCommit: (v: { type: string; path: string }) => void;
-    onCommitAll: (type: string) => void;
-}) {
-    // const classes = useStyles();
+
+function TypeDifference(prop:{
+    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);
+    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={() => {
+                        {x.value.map(y=>(
+                            <Box sx={{display:"flex"}} key={y.path}>
+                                <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() {
+export function DifferencePage(){
     const ctx = useContext(UserContext);
-    // const classes = useStyles();
-    const [diffList, setDiffList] = useState<
+    //const classes = useStyles();
+    const [diffList,setDiffList] = useState<
     FileDifference[]
     >([]);
-    const doLoad = async () => {
-        const list = await fetch("/api/diff/list");
-        if (list.ok) {
+    const doLoad = async ()=>{
+        const list = await fetch('/api/diff/list');
+        if(list.ok){
             const inner = await list.json();
             setDiffList(inner);
-        } else {
-            // setDiffList([]);
+        }
+        else{
+            //setDiffList([]);
         }
     };
-    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",
-            },
+    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'
+            }
         });
         const bb = await res.json();
-        if (bb.ok) {
+        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",
-            },
+    }
+    const CommitAll = async (type :string)=>{
+        const res = await fetch("/api/diff/commitall",{
+            method:"POST",
+            body: JSON.stringify({type:type}),
+            headers:{
+                'content-type':'application/json'
+            }
         });
         const bb = await res.json();
-        if (bb.ok) {
+        if(bb.ok){
             doLoad();
-        } else {
+        }
+        else{
             console.error("fail to add document");
         }
-    };
+    }
     useEffect(
-        () => {
+        ()=>{
             doLoad();
-            const i = setInterval(doLoad, 5000);
-            return () => {
+            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>
-    );
+    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>)
 }

src/client/page/gallery.tsx

@@ -1,13 +1,15 @@
-import React, { useContext, useEffect, useState } from "react";
-import { CommonMenuList, ContentInfo, Headline, LoadingCircle, NavItem, NavList, TagChip } from "../component/mod";
+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 { 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;
@@ -15,89 +17,77 @@ export type GalleryProp = {
 };
 type GalleryState = {
     documents: Document[] | undefined;
-};
+}
 
 export const GalleryInfo = (props: GalleryProp) => {
     const [state, setState] = useState<GalleryState>({ documents: undefined });
     const [error, setError] = useState<string | null>(null);
     const [loadAll, setLoadAll] = useState(false);
-    const { elementRef, isVisible: isLoadVisible } = useIsElementInViewport<HTMLButtonElement>({});
+    const {elementRef, isVisible: isLoadVisible} = useIsElementInViewport<HTMLButtonElement>({});
 
-    useEffect(() => {
-        if (isLoadVisible && (!loadAll) && (state.documents != undefined)) {
+    useEffect(()=>{
+        if(isLoadVisible && (!loadAll) && (state.documents != undefined)){
             loadMore();
         }
-    }, [isLoadVisible]);
+    },[isLoadVisible]);
 
     useEffect(() => {
         const abortController = new AbortController();
-        console.log("load first", props.option);
-        const load = async () => {
-            try {
+        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.
+                //todo : if c is undefined, retry to fetch 3 times. and show error message.
                 setState({ documents: c });
                 setLoadAll(c.length == 0);
-            } catch (e) {
-                if (e instanceof Error) {
+            }
+            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);
-        if (state.documents === undefined || state.documents.length === 0) {
+        let option = {...props.option};
+        console.log(elementRef)
+        if(state.documents === undefined || state.documents.length === 0){
             console.log("loadall");
             setLoadAll(true);
             return;
@@ -105,17 +95,18 @@ 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();
@@ -123,10 +114,8 @@ 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,78 +1,59 @@
-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";
+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';
 
-export const LoginPage = () => {
+export const LoginPage = ()=>{
     const theme = useTheme();
-    const [userLoginInfo, setUserLoginInfo] = useState({ username: "", password: "" });
-    const [openDialog, setOpenDialog] = useState({ open: false, message: "" });
-    const { setUsername, setPermission } = useContext(UserContext);
+    const [userLoginInfo,setUserLoginInfo]= useState({username:"",password:""});
+    const [openDialog,setOpenDialog] = useState({open:false,message:""});
+    const {setUsername,setPermission} = useContext(UserContext);
     const navigate = useNavigate();
-    const handleDialogClose = () => {
-        setOpenDialog({ ...openDialog, open: false });
-    };
-    const doLogin = async () => {
-        try {
+    const handleDialogClose = ()=>{
+        setOpenDialog({...openDialog,open:false});
+    }
+    const doLogin = async ()=>{
+        try{
             const b = await doSessionLogin(userLoginInfo);
-            if (typeof b === "string") {
-                setOpenDialog({ open: true, message: b });
+            if(typeof b === "string"){
+                setOpenDialog({open:true,message: b});
                 return;
             }
             console.log(`login as ${b.username}`);
             setUsername(b.username);
             setPermission(b.permission);
-        } catch (e) {
-            if (e instanceof Error) {
+        }
+        catch(e){
+            if(e instanceof Error){
                 console.error(e);
-                setOpenDialog({ open: true, message: e.message });
-            } else console.error(e);
+                setOpenDialog({open:true,message:e.message});
+            }
+            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 ?? "" })}
-                    />
-                    <div style={{ minHeight: theme.spacing(2) }}></div>
-                    <div style={{ display: "flex" }}>
+            <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 ?? "",})}/>
+            <div style={{minHeight:theme.spacing(2)}}></div>
+            <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>
@@ -82,5 +63,4 @@ export const LoginPage = () => {
             </DialogActions>
         </Dialog>
     </Headline>
-    );
-};
+}

src/client/page/mod.ts

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

src/client/page/profile.tsx

@@ -1,86 +1,75 @@
-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) => ({
-    paper: {
-        alignSelf: "center",
-        padding: theme.spacing(2),
+const useStyles = ((theme:Theme)=>({
+    paper:{
+        alignSelf:"center",
+        padding:theme.spacing(2),
     },
-    formfield: {
-        display: "flex",
-        flexFlow: "column",
-    },
-});
+    formfield:{
+        display:'flex',
+        flexFlow:'column',
+    }
+}));
 
-export function ProfilePage() {
+export function ProfilePage(){
     const userctx = useContext(UserContext);
-    // const classes = useStyles();
+    //const classes = useStyles();
     const menu = CommonMenuList();
-    const [pw_open, set_pw_open] = useState(false);
-    const [oldpw, setOldpw] = useState("");
-    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 handle_open = () => set_pw_open(true);
-    const handle_close = () => {
+    const [pw_open,set_pw_open] = useState(false);
+    const [oldpw,setOldpw] = useState("");
+    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 handle_open = ()=>set_pw_open(true);
+    const handle_close = ()=>{
         set_pw_open(false);
         setNewpw("");
         setNewpwch("");
     };
-    const handle_ok = async () => {
-        if (newpw != newpwch) {
-            set_msg_dialog({ opened: true, msg: "password and password check is not equal." });
+    const handle_ok= async ()=>{
+        if(newpw != newpwch){
+            set_msg_dialog({opened:true,msg:"password and password check is not equal."});
             handle_close();
             return;
         }
-        if (isElectronContent) {
-            const elec = window["electron"] as any;
-            const success = elec.passwordReset(userctx.username, newpw);
-            if (!success) {
-                set_msg_dialog({ opened: true, msg: "user not exist." });
+        if(isElectronContent){
+            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 {
-            const res = await fetch("/user/reset", {
-                method: "POST",
-                body: JSON.stringify({
-                    username: userctx.username,
-                    oldpassword: oldpw,
-                    newpassword: newpw,
+        }
+        else{
+            const res = await fetch("/user/reset",{
+                method: 'POST',
+                body:JSON.stringify({
+                    username:userctx.username,
+                    oldpassword:oldpw,
+                    newpassword:newpw,
                 }),
-                headers: {
-                    "content-type": "application/json",
-                },
+                headers:{
+                    "content-type":"application/json"
+                }
             });
-            if (res.status != 200) {
-                set_msg_dialog({ opened: true, msg: "failed to change password." });
+            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>
@@ -99,33 +88,12 @@ 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>
@@ -133,15 +101,14 @@ export function ProfilePage() {
                 <Button onClick={handle_ok} color="primary">Ok</Button>
             </DialogActions>
         </Dialog>
-            <Dialog open={msg_dialog.opened} onClose={() => set_msg_dialog({ opened: false, msg: "" })}>
+        <Dialog open={msg_dialog.opened} onClose={()=>set_msg_dialog({opened:false,msg:""})}>
             <DialogTitle>Alert!</DialogTitle>
             <DialogContent>
                 <DialogContentText>{msg_dialog.msg}</DialogContentText>
             </DialogContent>
             <DialogActions>
-                    <Button onClick={() => set_msg_dialog({ opened: false, msg: "" })} color="primary">Close</Button>
+                <Button onClick={()=>set_msg_dialog({opened:false,msg:""})} color="primary">Close</Button>
             </DialogActions>
         </Dialog>
-        </Headline>
-    );
+    </Headline>)
 }

src/client/page/reader/comic.tsx

@@ -1,52 +1,47 @@
-import { Typography, useTheme } from "@mui/material";
-import React, { useEffect, useState } from "react";
-import { Document } from "../../accessor/document";
+import React, {useState, useEffect} from 'react';
+import {  Typography, useTheme } from '@mui/material';
+import { Document } from '../../accessor/document';
 
-type ComicType = "comic" | "artist cg" | "donjinshi" | "western";
+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 }) => {
+export const ComicReader = (props:{doc:Document})=>{
     const additional = props.doc.additional;
-    const [curPage, setCurPage] = useState(0);
-    if (!("page" in additional)) {
-        console.error("invalid content : page read fail : " + JSON.stringify(additional));
-        return <Typography>Error. DB error. page restriction</Typography>;
+    const [curPage,setCurPage] = useState(0);
+    if(!('page' in additional)){
+        console.error("invalid content : page read fail : "+ JSON.stringify(additional));
+        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 onKeyUp = (e: KeyboardEvent) => {
-        if (e.code === "ArrowLeft") {
+    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 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);
-        };
+    }
+    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>
-    );
-};
+    //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>);
+}
 
 export default ComicReader;

src/client/page/reader/reader.tsx

@@ -1,37 +1,38 @@
-import { styled, Typography } from "@mui/material";
-import React from "react";
-import { Document, makeThumbnailUrl } from "../../accessor/document";
-import { ComicReader } from "./comic";
-import { VideoReader } from "./video";
+import { Typography, styled } 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;
+export interface PagePresenterProp{
+    doc:Document,
+    className?:string
 }
-interface PagePresenter {
-    (prop: PagePresenterProp): JSX.Element;
+interface PagePresenter{
+    (prop:PagePresenterProp):JSX.Element
 }
 
-export const getPresenter = (content: Document): PagePresenter => {
+export const getPresenter = (content:Document):PagePresenter => {
     switch (content.content_type) {
         case "comic":
             return ComicReader;
         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",
-    backgroundColor: "#272733",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-});
+    height: '400px',
+    width:'300px',
+    backgroundColor:"#272733",
+    display:"flex",
+    alignItems:"center",
+    justifyContent:"center"}
+    );
 
-import { useEffect, useRef, useState } from "react";
-import "./thumbnail.css";
+
+import { useRef, useState, useEffect } from 'react';
+import "./thumbnail.css"
 
 export function useIsElementInViewport<T extends HTMLElement>(options?: IntersectionObserverInit) {
     const elementRef = useRef<T>(null);
@@ -49,29 +50,31 @@ export function useIsElementInViewport<T extends HTMLElement>(options?: Intersec
     }, [elementRef, options]);
 
     return { elementRef, isVisible };
-}
+};
 
-export function ThumbnailContainer(props: {
-    content: Document;
-    className?: string;
-}) {
-    const { elementRef, isVisible } = useIsElementInViewport<HTMLDivElement>({});
+export function ThumbnailContainer(props:{
+    content:Document,
+    className?:string,
+}){
+    const {elementRef, isVisible} = useIsElementInViewport<HTMLDivElement>({});
     const [loaded, setLoaded] = useState(false);
-    useEffect(() => {
-        if (isVisible) {
+    useEffect(()=>{
+        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>
-        );}
+    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>)
 }

src/client/page/reader/video.tsx

@@ -1,10 +1,7 @@
-import React from "react";
-import { Document } from "../../accessor/document";
+import React from 'react';
+import { Document } from '../../accessor/document';
 
-export const VideoReader = (props: { doc: 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,15 +1,13 @@
-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";
+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';
 
-export const SettingPage = () => {
+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 { 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 { CommonMenuList, Headline } from "../component/mod";
+import React, { useEffect, useState } from 'react';
+import {Typography, Box, Paper} from '@mui/material';
+import {LoadingCircle} from "../component/loading";
+import { Headline, CommonMenuList } from '../component/mod';
+import {DataGrid, GridColDef} from "@mui/x-data-grid"
 
 type TagCount = {
     tag_name: string;
@@ -10,52 +10,52 @@ type TagCount = {
 };
 
 const tagTableColumn: GridColDef[] = [
-    {
-        field: "tag_name",
-        headerName: "Tag Name",
+{
+    field:"tag_name",
+    headerName:"Tag Name",
     width: 200,
-    },
-    {
-        field: "occurs",
-        headerName: "Occurs",
-        width: 100,
-        type: "number",
-    },
-];
+},
+{
+    field:"occurs",
+    headerName:"Occurs",
+    width:100,
+    type:"number"
+}
+]
 
-function TagTable() {
-    const [data, setData] = useState<TagCount[] | undefined>();
-    const [error, setErrorMsg] = useState<string | undefined>(undefined);
+function TagTable(){
+    const [data,setData] = useState<TagCount[] | undefined>();
+    const [error, setErrorMsg] = useState<string|undefined>(undefined);
     const isLoading = data === undefined;
 
-    useEffect(() => {
+    useEffect(()=>{
         loadData();
-    }, []);
+    },[]);
 
-    if (isLoading) {
-        return <LoadingCircle />;
+    if(isLoading){
+        return <LoadingCircle/>;
     }
-    if (error !== undefined) {
-        return <Typography variant="h3">{error}</Typography>;
+    if(error !== undefined){
+        return <Typography variant="h3">{error}</Typography>
     }
-    return (
-        <Box sx={{ height: "400px", width: "100%" }}>
-            <Paper sx={{ height: "100%" }} elevation={2}>
-                <DataGrid rows={data} columns={tagTableColumn} getRowId={(t) => t.tag_name}></DataGrid>
+    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 {
+    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) {
+            if(e instanceof Error){
                 setErrorMsg(e.message);
-            } else {
+            }
+            else{
                 console.log(e);
                 setErrorMsg("");
             }
@@ -63,11 +63,9 @@ function TagTable() {
     }
 }
 
-export const TagsPage = () => {
+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";
-export const BackLinkContext = createContext({ backLink: "", setBackLink: (s: string) => {} });
+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[]) => {},
+    setUsername: (s: string) => { },
+    setPermission: (permission: string[]) => { }
 });
 
 type LoginLocalStorage = {
-    username: string;
-    permission: string[];
-    accessExpired: number;
+    username: string,
+    permission: string[],
+    accessExpired: number
 };
 
 let localObj: LoginLocalStorage | null = null;
@@ -25,70 +25,71 @@ 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;
-}): Promise<string | LoginLocalStorage> => {
-    const res = await fetch("/user/login", {
-        method: "POST",
-        body: JSON.stringify(userLoginInfo),
-        headers: { "content-type": "application/json" },
+    }
+}
+export const doLogin = async (userLoginInfo:{
+    username:string,
+    password:string,
+}): Promise<string|LoginLocalStorage>=>{
+    const res = await fetch('/user/login',{
+        method:'POST',
+        body:JSON.stringify(userLoginInfo),
+        headers:{"content-type":"application/json"}
     });
     const b = await res.json();
-    if (res.status !== 200) {
+    if(res.status !== 200){
         return b.detail as string;
     }
     localObj = b;
     window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
     return b;
-};
+}

src/config.ts

@@ -1,22 +1,22 @@
-import { Knex as k } from "knex";
+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,66 +1,65 @@
-import { extname } from "path";
-import { DocumentBody } from "../model/doc";
-import { readAllFromZip, readZip } from "../util/zipwrap";
-import { ContentConstructOption, ContentFile, createDefaultClass, registerContentReferrer } from "./file";
+import {ContentFile, createDefaultClass,registerContentReferrer, ContentConstructOption} from './file';
+import {readZip, readAllFromZip} from '../util/zipwrap';
+import { DocumentBody } from '../model/doc';
+import {extname} from 'path';
 
-type ComicType = "doujinshi" | "artist cg" | "manga" | "western";
-interface ComicDesc {
-    title: string;
-    artist?: string[];
-    group?: string[];
-    series?: string[];
-    type: ComicType | [ComicType];
-    character?: string[];
-    tags?: string[];
+type ComicType = "doujinshi"|"artist cg"|"manga"|"western";
+interface ComicDesc{
+    title:string,
+    artist?:string[],
+    group?:string[],
+    series?:string[],
+    type:ComicType|[ComicType],
+    character?:string[],
+    tags?:string[]
 }
-const ImageExt = [".gif", ".png", ".jpeg", ".bmp", ".webp", ".jpg"];
-export class ComicReferrer extends createDefaultClass("comic") {
-    desc: ComicDesc | undefined;
+const ImageExt = ['.gif', '.png', '.jpeg', '.bmp', '.webp', '.jpg'];
+export class ComicReferrer extends createDefaultClass("comic"){
+    desc: ComicDesc|undefined;
     pagenum: number;
-    additional: ContentConstructOption | undefined;
-    constructor(path: string, option?: ContentConstructOption) {
+    additional: ContentConstructOption| undefined;
+    constructor(path:string,option?:ContentConstructOption){
         super(path);
         this.additional = option;
         this.pagenum = 0;
     }
-    async initDesc(): Promise<void> {
-        if (this.desc !== undefined) return;
+    async initDesc():Promise<void>{
+        if(this.desc !== undefined) return;
         const zip = await readZip(this.path);
         const entries = await zip.entries();
-        this.pagenum = Object.keys(entries).filter(x => ImageExt.includes(extname(x))).length;
+        this.pagenum = Object.keys(entries).filter(x=>ImageExt.includes(extname(x))).length;
         const entry =  entries["desc.json"];
-        if (entry === undefined) {
+        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> {
+    async createDocumentBody(): Promise<DocumentBody>{
         await this.initDesc();
         const basebody = await super.createDocumentBody();
         this.desc?.title;
-        if (this.desc === undefined) {
+        if(this.desc === undefined){
             return basebody;
         }
-        let tags: string[] = this.desc.tags ?? [];
-        tags = tags.concat(this.desc.artist?.map(x => `artist:${x}`) ?? []);
-        tags = tags.concat(this.desc.character?.map(x => `character:${x}`) ?? []);
-        tags = tags.concat(this.desc.group?.map(x => `group:${x}`) ?? []);
-        tags = tags.concat(this.desc.series?.map(x => `series:${x}`) ?? []);
-        const type = this.desc.type instanceof Array ? this.desc.type[0] : this.desc.type;
+        let tags:string[] = this.desc.tags ?? [];
+        tags = tags.concat(this.desc.artist?.map(x=>`artist:${x}`) ?? []);
+        tags = tags.concat(this.desc.character?.map(x=>`character:${x}`) ?? []);
+        tags = tags.concat(this.desc.group?.map(x=>`group:${x}`) ?? []);
+        tags = tags.concat(this.desc.series?.map(x=>`series:${x}`) ?? []);
+        const type = this.desc.type instanceof Array ? this.desc.type[0]: this.desc.type;
         tags.push(`type:${type}`);
         return {
             ...basebody,
-            title: this.desc.title,
-            additional: {
-                page: this.pagenum,
+            title:this.desc.title,
+            additional:{
+                page:this.pagenum
             },
-            tags: tags,
+            tags:tags
         };
     }
-}
+};
 registerContentReferrer(ComicReferrer);

src/content/file.ts

@@ -1,44 +1,42 @@
-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";
+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';
 /**
  * content file or directory referrer
  */
-export interface ContentFile {
-    getHash(): Promise<string>;
-    createDocumentBody(): Promise<DocumentBody>;
+export interface ContentFile{
+    getHash():Promise<string>;
+    createDocumentBody():Promise<DocumentBody>;
     readonly path: string;
     readonly type: string;
 }
 export type ContentConstructOption = {
-    hash: string;
-};
-type ContentFileConstructor = (new(path: string, option?: ContentConstructOption) => ContentFile) & {
-    content_type: string;
-};
-export const createDefaultClass = (type: string): ContentFileConstructor => {
-    let cons = class implements ContentFile {
+    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;
-        // type = type;
+        //type = type;
         static content_type = type;
-        protected hash: string | undefined;
-        protected stat: Stats | undefined;
+        protected hash: string| undefined;
+        protected stat: Stats| undefined;
 
-        constructor(path: string, option?: ContentConstructOption) {
+        constructor(path:string,option?:ContentConstructOption){
             this.path = path;
             this.hash = option?.hash;
             this.stat = undefined;
         }
         async createDocumentBody(): Promise<DocumentBody> {
-            const { base, dir, name } = path.parse(this.path);
+            const {base,dir, name} = path.parse(this.path);
             
             const ret = {
-                title: name,
-                basepath: dir,
+                title : name,
+                basepath : dir,
                 additional: {},
                 content_type: cons.content_type,
                 filename: base,
@@ -48,43 +46,43 @@ export const createDefaultClass = (type: string): ContentFileConstructor => {
             } as DocumentBody;
             return ret;
         }
-        get type(): string {
+        get type():string{
             return cons.content_type;
         }
-        async getHash(): Promise<string> {
-            if (this.hash !== undefined) return this.hash;
+        async getHash():Promise<string>{
+            if(this.hash !== undefined) return this.hash;
             this.stat = await promises.stat(this.path);
             const hash = createHash("sha512");
             hash.update(extname(this.path));
             hash.update(this.stat.mode.toString());
-            // if(this.desc !== undefined)
+            //if(this.desc !== undefined)
             //    hash.update(JSON.stringify(this.desc));
             hash.update(this.stat.size.toString());
             this.hash = hash.digest("base64");
             return this.hash;
         }
-        async getMtime(): Promise<number> {
-            if (this.stat !== undefined) return this.stat.mtimeMs;
+        async getMtime():Promise<number>{
+            if(this.stat !== undefined) return this.stat.mtimeMs;
             await this.getHash();
             return this.stat!.mtimeMs;
         }
     };
     return cons;
-};
-let ContstructorTable: { [k: string]: ContentFileConstructor } = {};
-export function registerContentReferrer(s: ContentFileConstructor) {
-    console.log(`registered content type: ${s.content_type}`);
+}
+let ContstructorTable:{[k:string]:ContentFileConstructor} = {};
+export function registerContentReferrer(s: ContentFileConstructor){
+    console.log(`registered content type: ${s.content_type}`)
     ContstructorTable[s.content_type] = s;
 }
-export function createContentFile(type: string, path: string, option?: ContentConstructOption) {
+export function createContentFile(type:string,path:string,option?:ContentConstructOption){
     const constructorMethod = ContstructorTable[type];
-    if (constructorMethod === undefined) {
+    if(constructorMethod === undefined){
         console.log(`${type} are not in ${JSON.stringify(ContstructorTable)}`);
         throw new Error("construction method of the content type is undefined");
     }
-    return new constructorMethod(path, option);
+    return new constructorMethod(path,option);
 }
-export function getContentFileConstructor(type: string): ContentFileConstructor | undefined {
+export function getContentFileConstructor(type:string): ContentFileConstructor|undefined{
     const ret = ContstructorTable[type];
     return ret;
 }

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,9 +1,9 @@
-import { ContentConstructOption, ContentFile, registerContentReferrer } from "./file";
-import { createDefaultClass } from "./file";
+import {ContentFile, registerContentReferrer, ContentConstructOption} from './file';
+import {createDefaultClass} from './file';
 
-export class VideoReferrer extends createDefaultClass("video") {
-    constructor(path: string, desc?: ContentConstructOption) {
-        super(path, desc);
+export class VideoReferrer extends createDefaultClass("video"){
+    constructor(path:string,desc?:ContentConstructOption){
+        super(path,desc);
     }
 }
 registerContentReferrer(VideoReferrer);

src/database.ts

@@ -1,44 +1,46 @@
-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() {
+export async function connectDB(){
     const env = get_setting().mode;
     const config = KnexConfig.config[env];
-    if (!config.connection) {
+    if(!config.connection){
         throw new Error("connection options required.");
     }
-    const connection = config.connection;
-    if (typeof connection === "string") {
+    const connection = config.connection
+    if(typeof connection === "string"){
         throw new Error("unknown connection options");
     }
-    if (typeof connection === "function") {
+    if(typeof connection === "function"){
         throw new Error("connection provider not supported...");
     }
-    if (!("filename" in connection)) {
+    if(!("filename" in connection) ){
         throw new Error("sqlite3 config need");
     }
     const init_need = !existsSync(connection.filename);
     const knex = Knex(config);
     let tries = 0;
-    for (;;) {
-        try {
+    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) {
-            if (tries < 3) {
+        }
+        catch(err){
+            if(tries < 3){
                 tries++;
                 console.error(`connection fail ${err} retry...`);
                 continue;
-            } else {
+            }
+            else{
                 throw err;
             }
         }
         break;
     }
-    if (init_need) {
+    if(init_need){
         console.log("first execute: initialize database...");
         const migrate = await import("../migrations/initial");
         await migrate.up(knex);

src/db/doc.ts

@@ -1,118 +1,118 @@
-import { Knex } from "knex";
-import { Document, DocumentAccessor, DocumentBody, QueryListOption } from "../model/doc";
-import { TagAccessor } from "../model/tag";
-import { createKnexTagController } from "./tag";
+import { Document, DocumentBody, DocumentAccessor, QueryListOption } from '../model/doc';
+import {Knex} from 'knex';
+import {createKnexTagController} from './tag';
+import { TagAccessor } from '../model/tag';
 
 export type DBTagContentRelation = {
-    doc_id: number;
-    tag_name: string;
-};
+    doc_id:number,
+    tag_name:string
+}
 
-class KnexDocumentAccessor implements DocumentAccessor {
-    knex: Knex;
+class KnexDocumentAccessor implements DocumentAccessor{
+    knex : Knex;
     tagController: TagAccessor;
-    constructor(knex: Knex) {
+    constructor(knex : Knex){
         this.knex = knex;
         this.tagController = createKnexTagController(knex);
     }
-    async search(search_word: string): Promise<Document[]> {
+    async search(search_word: string): Promise<Document[]>{
         throw new Error("Method not implemented.");
         const sw = `%${search_word}%`;
         const docs = await this.knex.select("*").from("document")
-            .where("title", "like", sw);
+            .where("title","like",sw);
         return docs;
     }
-    async addList(content_list: DocumentBody[]): Promise<number[]> {
-        return await this.knex.transaction(async (trx) => {
-            // add tags
+    async addList(content_list: DocumentBody[]):Promise<number[]>{
+        return await this.knex.transaction(async (trx)=>{
+            //add tags
             const tagCollected = new Set<string>();
-            content_list.map(x => x.tags).forEach((x) => {
-                x.forEach(x => {
+            content_list.map(x=>x.tags).forEach((x)=>{
+                x.forEach(x=>{
                     tagCollected.add(x);
                 });
             });
             const tagCollectPromiseList = [];
             const tagController = createKnexTagController(trx);
-            for (const it of tagCollected) {
-                const p = tagController.addTag({ name: it });
+            for (const it of tagCollected){
+                const p = tagController.addTag({name:it});
                 tagCollectPromiseList.push(p);
             }
             await Promise.all(tagCollectPromiseList);
-            // add for each contents
+            //add for each contents
             const ret = [];
             for (const content of content_list) {
-                const { tags, additional, ...rest } = content;
+                const {tags,additional, ...rest} = content;
                 const id_lst = await trx.insert({
-                    additional: JSON.stringify(additional),
-                    created_at: Date.now(),
-                    ...rest,
+                        additional:JSON.stringify(additional),
+                        created_at:Date.now(),
+                        ...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");
+                if(tags.length > 0){
+                    await trx.insert(tags.map(y=>({
+                        doc_id:id,
+                        tag_name:y
+                    }))).into('doc_tag_relation');
                 }
                 ret.push(id);
             }
             return ret;
         });
     }
-    async add(c: DocumentBody) {
-        const { tags, additional, ...rest } = c;
+    async add(c: DocumentBody){
+        const {tags,additional, ...rest} = c;
         const id_lst = await this.knex.insert({
-            additional: JSON.stringify(additional),
-            created_at: Date.now(),
-            ...rest,
-        }).into("document");
+            additional:JSON.stringify(additional),
+            created_at:Date.now(),
+            ...rest
+        }).into('document');
         const id = id_lst[0];
         for (const it of tags) {
-            this.tagController.addTag({ name: it });
+            this.tagController.addTag({name:it});
         }
-        if (tags.length > 0) {
+        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 });
-            await this.knex.delete().from("document").where({ id: id });
+    };
+    async del(id:number) {
+        if (await this.findById(id) !== undefined){
+            await this.knex.delete().from("doc_tag_relation").where({doc_id:id});
+            await this.knex.delete().from("document").where({id:id});
             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;
+    };
+    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[] = [];
-        if (tagload === true) {
-            const tags: DBTagContentRelation[] = await this.knex.select("*")
-                .from("doc_tag_relation").where({ doc_id: first.id });
-            ret_tags = tags.map(x => x.tag_name);
+        let ret_tags:string[] = []
+        if(tagload === true){
+            const tags : DBTagContentRelation[] = await this.knex.select("*")
+                .from("doc_tag_relation").where({doc_id:first.id});
+            ret_tags = tags.map(x=>x.tag_name);
         }
         return {
             ...first,
-            tags: ret_tags,
+            tags:ret_tags,
             additional: first.additional !== null ? JSON.parse(first.additional) : {},
         };
-    }
-    async findDeleted(content_type: string) {
+    };
+    async findDeleted(content_type:string){
         const s = await this.knex.select("*")
-            .where({ content_type: content_type })
+            .where({content_type:content_type})
             .whereNotNull("update_at")
             .from("document");
-        return s.map(x => ({
+        return s.map(x=>({
             ...x,
-            tags: [],
-            additional: {},
+            tags:[],
+            additional:{}
         }));
     }
-    async findList(option?: QueryListOption) {
+    async findList(option?:QueryListOption){
         option = option ?? {};
         const allow_tag = option.allow_tag ?? [];
         const eager_loading = option.eager_loading ?? true;
@@ -123,101 +123,98 @@ class KnexDocumentAccessor implements DocumentAccessor {
         const content_type = option.content_type;
         const cursor = option.cursor;
 
-        const buildquery = () => {
+        const buildquery = ()=>{
             let query = this.knex.select("document.*");
-            if (allow_tag.length > 0) {
+            if(allow_tag.length > 0){
                 query = query.from("doc_tag_relation as tags_0");
-                query = query.where("tags_0.tag_name", "=", allow_tag[0]);
+                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 {
+                query = query.innerJoin("document","tags_0.doc_id","document.id");
+            }
+            else{
                 query = query.from("document");
             }
-            if (word !== undefined) {
-                // don't worry about sql injection.
-                query = query.where("title", "like", `%${word}%`);
+            if(word !== undefined){
+                //don't worry about sql injection.
+                query = query.where('title','like',`%${word}%`);
             }
-            if (content_type !== undefined) {
-                query = query.where("content_type", "=", content_type);
+            if(content_type !== undefined){
+                query = query.where('content_type','=',content_type);
             }
-            if (use_offset) {
+            if(use_offset){
                 query = query.offset(offset);
-            } else {
-                if (cursor !== undefined) {
-                    query = query.where("id", "<", cursor);
+            }
+            else{
+                if(cursor !== undefined){
+                    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;
-        for (let i of result) {
+        //console.log(query.toSQL());
+        let result:Document[] = await query;
+        for(let i of result){
             i.additional = JSON.parse((i.additional as unknown) as string);
         }
-        if (eager_loading) {
-            let idmap: { [index: number]: Document } = {};
-            for (const r of result) {
+        if(eager_loading){
+            let idmap: {[index:number]:Document} = {};
+            for(const r of result){
                 idmap[r.id] = r;
                 r.tags = [];
             }
             let subquery = buildquery();
-            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;
-            for (const { id, tag_name } of tagresult) {
+            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;
+            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 results = await this.knex.select("*").from("document").where({ basepath: path, ...e });
-        return results.map(x => ({
+    };
+    async findByPath(path:string,filename?:string):Promise<Document[]>{
+        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: {},
-        }));
+            tags:[],
+            additional:{}
+        }))
     }
-    async update(c: Partial<Document> & { id: number }) {
-        const { id, tags, ...rest } = c;
-        if (await this.findById(id) !== undefined) {
-            await this.knex.update(rest).where({ id: id }).from("document");
+    async update(c:Partial<Document> & { id:number }){
+        const {id,tags,...rest} = c;
+        if (await this.findById(id) !== undefined){
+            await this.knex.update(rest).where({id: id}).from("document");
             return true;
         }
         return false;
     }
-    async addTag(c: Document, tag_name: string) {
+    async addTag(c: Document,tag_name:string){
         if (c.tags.includes(tag_name)) return false;
-        this.tagController.addTag({ name: tag_name });
-        await this.knex.insert<DBTagContentRelation>({ tag_name: tag_name, doc_id: c.id })
+        this.tagController.addTag({name:tag_name});
+        await this.knex.insert<DBTagContentRelation>({tag_name: tag_name, doc_id: c.id})
             .into("doc_tag_relation");
         c.tags.push(tag_name);
         return true;
     }
-    async delTag(c: Document, tag_name: string) {
+    async delTag(c: Document,tag_name:string){
         if (c.tags.includes(tag_name)) return false;
-        await this.knex.delete().where({ tag_name: tag_name, doc_id: c.id }).from("doc_tag_relation");
+        await this.knex.delete().where({tag_name: tag_name,doc_id: c.id}).from("doc_tag_relation");
         c.tags.push(tag_name);
         return true;
     }
 }
-export const createKnexDocumentAccessor = (knex: Knex): 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,57 +1,57 @@
-import { Knex } from "knex";
-import { Tag, TagAccessor, TagCount } from "../model/tag";
-import { DBTagContentRelation } from "./doc";
+import {Tag, TagAccessor, TagCount} from '../model/tag';
+import {Knex} from 'knex';
+import {DBTagContentRelation} from './doc';
 
 type DBTags = {
-    name: string;
-    description?: string;
-};
+    name: string,
+    description?: string
+}
 
-class KnexTagAccessor implements TagAccessor {
-    knex: Knex<DBTags>;
-    constructor(knex: Knex) {
+class KnexTagAccessor implements TagAccessor{
+    knex:Knex<DBTags>
+    constructor(knex:Knex){
         this.knex = knex;
     }
     async getAllTagCount(): Promise<TagCount[]> {
         const result = await this.knex<DBTagContentRelation>("doc_tag_relation").select("tag_name")
-            .count("*", { as: "occurs" }).groupBy<TagCount[]>("tag_name");
+            .count("*",{as:"occurs"}).groupBy<TagCount[]>("tag_name");
         return result;
     }
-    async getAllTagList(onlyname?: boolean) {
+    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 });
-        if (t.length === 0) return undefined;
+    async getTagByName(name:string){
+        const t:DBTags[] = await this.knex.select('*').from("tags").where({name: name});
+        if(t.length === 0) return undefined;
         return t[0];
     }
-    async addTag(tag: Tag) {
-        if (await this.getTagByName(tag.name) === undefined) {
+    async addTag(tag: Tag){
+        if(await this.getTagByName(tag.name) === undefined){
             await this.knex.insert<DBTags>({
-                name: tag.name,
-                description: tag.description === undefined ? "" : tag.description,
+                name:tag.name,
+                description:tag.description === undefined ? "" : tag.description
             }).into("tags");
             return true;
         }
         return false;
     }
-    async delTag(name: string) {
-        if (await this.getTagByName(name) !== undefined) {
-            await this.knex.delete().where({ name: name }).from("tags");
+    async delTag(name:string){
+        if(await this.getTagByName(name) !== undefined){
+            await this.knex.delete().where({name:name}).from("tags");
             return true;
         }
         return false;
     }
-    async updateTag(name: string, desc: string) {
-        if (await this.getTagByName(name) !== undefined) {
-            await this.knex.update({ description: desc }).where({ name: name }).from("tags");
+    async updateTag(name:string,desc:string){
+        if(await this.getTagByName(name) !== undefined){
+            await this.knex.update({description:desc}).where({name:name}).from("tags");
             return true;
         }
         return false;
     }
-}
-export const createKnexTagController = (knex: Knex): TagAccessor => {
-    return new KnexTagAccessor(knex);
 };
+export const createKnexTagController = (knex:Knex):TagAccessor=>{
+    return new KnexTagAccessor(knex);
+}

src/db/user.ts

@@ -1,41 +1,41 @@
-import { Knex } from "knex";
-import { IUser, Password, UserAccessor, UserCreateInput } from "../model/user";
+import {Knex} from 'knex';
+import {IUser,UserCreateInput, UserAccessor, Password} from '../model/user';
 
 type PermissionTable = {
-    username: string;
-    name: string;
+    username:string,
+    name:string
 };
 type DBUser = {
-    username: string;
-    password_hash: string;
-    password_salt: string;
-};
-class KnexUser implements IUser {
+    username : string,
+    password_hash: string,
+    password_salt: string
+}
+class KnexUser implements IUser{
     private knex: Knex;
     readonly username: string;
     readonly password: Password;
     
-    constructor(username: string, pw: Password, knex: Knex) {
+    constructor(username: string, pw: Password,knex:Knex){
         this.username = username;
         this.password = pw;
         this.knex = knex;
     }
-    async reset_password(password: string) {
+    async reset_password(password: string){
         this.password.set_password(password);
         await this.knex.from("users")
-            .where({ username: this.username })
-            .update({ password_hash: this.password.hash, password_salt: this.password.salt });
+            .where({username:this.username})
+            .update({password_hash:this.password.hash,password_salt:this.password.salt});
     }
-    async get_permissions() {
-        let b = (await this.knex.select("*").from("permissions")
-            .where({ username: this.username })) as PermissionTable[];
-        return b.map(x => x.name);
+    async get_permissions(){
+        let b = (await this.knex.select('*').from("permissions")
+            .where({username : this.username})) as PermissionTable[];
+        return b.map(x=>x.name);
     }
     async add(name: string) {
-        if (!(await this.get_permissions()).includes(name)) {
+        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,43 +45,38 @@ 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;
     }
 }
 
-export const createKnexUserController = (knex: Knex): UserAccessor => {
-    const createUserKnex = async (input: UserCreateInput) => {
-        if (undefined !== (await findUserKenx(input.username))) {
+export const createKnexUserController = (knex: Knex):UserAccessor=>{
+    const createUserKnex = async (input:UserCreateInput)=>{
+        if(undefined !== (await findUserKenx(input.username))){
             return undefined;
         }
-        const user = new KnexUser(input.username, new Password(input.password), knex);
+        const user = new KnexUser(input.username,new Password(input.password),knex);
         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 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,
-        );
-    };
-    const delUserKnex = async (id: string) => {
-        let r = await knex.delete().from("users").where({ username: id });
-        return r === 0;
-    };
+        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,15 +1,15 @@
-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";
+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';
 
-// refactoring needed.
+//refactoring needed.
 export class ContentDiffHandler {
     /** content file list waiting to add */
     waiting_list: ContentList;
     /** deleted contents */
-    tombstone: Map<string, Document>; // hash, contentfile
+    tombstone: Map<string, Document>;//hash, contentfile
     doc_cntr: DocumentAccessor;
     /** content type of handle */
     content_type: string;
@@ -26,21 +26,21 @@ 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);
         const filename = basename(cpath);
         console.log("deleted ", cpath);
-        // if it wait to add, delete it from waiting list.
+        //if it wait to add, delete it from waiting list.
         if (this.waiting_list.hasByPath(cpath)) {
             this.waiting_list.deleteByPath(cpath);
             return;
         }
         const dbc = await this.doc_cntr.findByPath(basepath, filename);
-        // when there is no related content in db, ignore.
+        //when there is no related content in db, ignore.
         if (dbc.length === 0) {
             console.log("its not in waiting_list and db!!!: ", cpath);
             return;
@@ -51,7 +51,7 @@ export class ContentDiffHandler {
         // the change event. 
         const cf = this.waiting_list.getByHash(content_hash);
         if (cf) {
-            // if a path is changed, update the changed path.
+            //if a path is changed, update the changed path.
             console.log("update path from", cpath, "to", cf.path);
             const newFilename = basename(cf.path);
             const newBasepath = dirname(cf.path);
@@ -64,7 +64,7 @@ export class ContentDiffHandler {
             });
             return;
         }
-        // invalidate db and add it to tombstone.
+        //invalidate db and add it to tombstone.
         await this.doc_cntr.update({
             id: dbc[0].id,
             deleted_at: Date.now(),
@@ -83,13 +83,14 @@ 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);
@@ -98,7 +99,7 @@ export class ContentDiffHandler {
         const cur_filename = basename(cur_path);
         console.log("modify", cur_path, "from", prev_path);
         const c = this.waiting_list.getByPath(prev_path);
-        if (c !== undefined) {
+        if(c !== undefined){
             await this.waiting_list.delete(c);
             const content = createContentFile(this.content_type, cur_path);
             await this.waiting_list.set(content);
@@ -106,7 +107,7 @@ export class ContentDiffHandler {
         }
         const doc = await this.doc_cntr.findByPath(prev_basepath, prev_filename);
 
-        if (doc.length === 0) {
+        if(doc.length === 0){
             await this.OnCreated(cur_path);
             return;
         }
@@ -114,7 +115,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,59 +1,59 @@
-import { ContentFile } from "../content/mod";
+import { ContentFile } from '../content/mod';
 
-export class ContentList {
+export class ContentList{
     /** path map */
-    private cl: Map<string, ContentFile>;
+    private cl:Map<string,ContentFile>;
     /** hash map */
-    private hl: Map<string, ContentFile>;
+    private hl:Map<string,ContentFile>;
     
-    constructor() {
-        this.cl = new Map();
-        this.hl = new Map();
+    constructor(){
+        this.cl = new Map;
+        this.hl = new Map;
     }
-    hasByHash(s: string) {
+    hasByHash(s:string){
         return this.hl.has(s);
     }
-    hasByPath(p: string) {
+    hasByPath(p:string){
         return this.cl.has(p);
     }
-    getByHash(s: string) {
-        return this.hl.get(s);
+    getByHash(s:string){
+        return this.hl.get(s)
     }
-    getByPath(p: string) {
+    getByPath(p:string){
         return this.cl.get(p);
     }
-    async set(c: ContentFile) {
+    async set(c:ContentFile){
         const path = c.path;
         const hash = await c.getHash();
-        this.cl.set(path, c);
-        this.hl.set(hash, c);
+        this.cl.set(path,c);
+        this.hl.set(hash,c);
     }
     /** delete content file */
-    async delete(c: ContentFile) {
+    async delete(c:ContentFile){
         const hash = await c.getHash();
         let r = true;
         r = this.cl.delete(c.path) && r;
         r = this.hl.delete(hash) && r;
         return r;
     }
-    async deleteByPath(p: string) {
+    async deleteByPath(p:string){
         const o = this.getByPath(p);
-        if (o === undefined) return false;
+        if(o === undefined) return false;
         return await this.delete(o);
     }
-    deleteByHash(s: string) {
+    deleteByHash(s:string){
         const o = this.getByHash(s);
-        if (o === undefined) return false;
+        if(o === undefined) return false;
         let r = true;
         r = this.cl.delete(o.path) && r;
         r = this.hl.delete(s) && r;
         return r;
     }
-    clear() {
+    clear(){
         this.cl.clear();
         this.hl.clear();
     }
-    getAll() {
+    getAll(){
         return [...this.cl.values()];
     }
 }

src/diff/diff.ts

@@ -1,26 +1,26 @@
-import asyncPool from "tiny-async-pool";
-import { DocumentAccessor } from "../model/doc";
-import { ContentDiffHandler } from "./content_handler";
-import { IDiffWatcher } from "./watcher";
+import { DocumentAccessor } from '../model/doc';
+import {ContentDiffHandler} from './content_handler';
+import { IDiffWatcher } from './watcher';
+import asyncPool from 'tiny-async-pool';
 
-export class DiffManager {
-    watching: { [content_type: string]: ContentDiffHandler };
+export class DiffManager{
+    watching: {[content_type:string]:ContentDiffHandler};
     doc_cntr: DocumentAccessor;
-    constructor(contorller: DocumentAccessor) {
+    constructor(contorller: DocumentAccessor){
         this.watching = {};
         this.doc_cntr = contorller;
     }
-    async register(content_type: string, watcher: IDiffWatcher) {
-        if (this.watching[content_type] === undefined) {
-            this.watching[content_type] = new ContentDiffHandler(this.doc_cntr, content_type);
+    async register(content_type:string,watcher:IDiffWatcher){
+        if(this.watching[content_type] === undefined){
+            this.watching[content_type] = new ContentDiffHandler(this.doc_cntr,content_type);
         }
         this.watching[content_type].register(watcher);
         await watcher.setup(this.doc_cntr);
     }
-    async commit(type: string, path: string) {
+    async commit(type:string,path:string){
         const list = this.watching[type].waiting_list;
         const c = list.getByPath(path);
-        if (c === undefined) {
+        if(c===undefined){
             throw new Error("path is not exist");
         }
         await list.delete(c);
@@ -28,18 +28,18 @@ export class DiffManager {
         const id = await this.doc_cntr.add(body);
         return id;
     }
-    async commitAll(type: string) {
+    async commitAll(type:string){
         const list = this.watching[type].waiting_list;
         const contentFiles = list.getAll();
         list.clear();
-        const bodies = await asyncPool(30, contentFiles, async (x) => await x.createDocumentBody());
+        const bodies = await asyncPool(30,contentFiles,async (x)=>await x.createDocumentBody());
         const ids = await this.doc_cntr.addList(bodies);
         return ids;
     }
-    getAdded() {
-        return Object.keys(this.watching).map(x => ({
-            type: x,
-            value: this.watching[x].waiting_list.getAll(),
+    getAdded(){
+        return Object.keys(this.watching).map(x=>({
+            type:x,
+            value:this.watching[x].waiting_list.getAll(),
         }));
     }
-}
+};

src/diff/mod.ts

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

src/diff/router.ts

@@ -1,70 +1,70 @@
-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";
+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';
 
-function content_file_to_return(x: ContentFile) {
-    return { path: x.path, type: x.type };
+function content_file_to_return(x:ContentFile){
+    return {path:x.path,type:x.type};
 }
 
-export const getAdded = (diffmgr: DiffManager) => (ctx: Koa.Context, next: Koa.Next) => {
+export const getAdded = (diffmgr:DiffManager)=> (ctx:Koa.Context,next:Koa.Next)=>{
     const ret = diffmgr.getAdded();
-    ctx.body = ret.map(x => ({
-        type: x.type,
-        value: x.value.map(x => ({ path: x.path, type: x.type })),
+    ctx.body = ret.map(x=>({
+        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);
+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 false;
 }
 
-export const postAdded = (diffmgr: DiffManager) => async (ctx: Router.IRouterContext, next: Koa.Next) => {
+export const postAdded = (diffmgr:DiffManager) => async (ctx:Router.IRouterContext,next:Koa.Next)=>{
     const reqbody = ctx.request.body;
-    if (!checkPostAddedBody(reqbody)) {
-        sendError(400, "format exception");
+    if(!checkPostAddedBody(reqbody)){
+        sendError(400,"format exception");
         return;
     }
-    const allWork = reqbody.map(op => diffmgr.commit(op.type, op.path));
+    const allWork = reqbody.map(op=>diffmgr.commit(op.type,op.path));
     const results = await Promise.all(allWork);
     ctx.body = {
-        ok: true,
-        docs: results,
-    };
-    ctx.type = "json";
-};
-export const postAddedAll = (diffmgr: DiffManager) => async (ctx: Router.IRouterContext, next: Koa.Next) => {
-    if (!ctx.is("json")) {
-        sendError(400, "format exception");
+        ok:true,
+        docs:results,
+    }
+    ctx.type = 'json';
+}
+export const postAddedAll = (diffmgr: DiffManager) => async (ctx:Router.IRouterContext,next:Koa.Next) => {
+    if (!ctx.is('json')){
+        sendError(400,"format exception");
         return;
     }
-    const reqbody = ctx.request.body as Record<string, unknown>;
-    if (!("type" in reqbody)) {
-        sendError(400, "format exception: there is no \"type\"");
+    const reqbody = ctx.request.body as Record<string,unknown>;
+    if(!("type" in reqbody)){
+        sendError(400,"format exception: there is no \"type\"");
         return;
     }
     const t = reqbody["type"];
-    if (typeof t !== "string") {
-        sendError(400, "format exception: invalid type of \"type\"");
+    if(typeof t !== "string"){
+        sendError(400,"format exception: invalid type of \"type\"");
         return;
     }
     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 = {
@@ -74,10 +74,10 @@ export const getNotWatched = (diffmgr : DiffManager)=> (ctx:Router.IRouterContex
     ctx.type = 'json';
 }*/
 
-export function createDiffRouter(diffmgr: DiffManager) {
+export function createDiffRouter(diffmgr: DiffManager){
     const ret = new Router();
-    ret.get("/list", AdminOnlyMiddleware, getAdded(diffmgr));
-    ret.post("/commit", AdminOnlyMiddleware, postAdded(diffmgr));
-    ret.post("/commitall", AdminOnlyMiddleware, postAddedAll(diffmgr));
+    ret.get("/list",AdminOnlyMiddleware,getAdded(diffmgr));
+    ret.post("/commit",AdminOnlyMiddleware,postAdded(diffmgr));
+    ret.post("/commitall",AdminOnlyMiddleware,postAddedAll(diffmgr));
     return ret;
 }

src/diff/watcher.ts

@@ -1,25 +1,25 @@
-import event from "events";
-import { FSWatcher, watch } from "fs";
-import { promises } from "fs";
-import { join } from "path";
-import { DocumentAccessor } from "../model/doc";
+import { FSWatcher, watch } from 'fs';
+import { promises } from 'fs';
+import event from 'events';
+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;
+export interface DiffWatcherEvent{
+    'create':(path:string)=>void,
+    'delete':(path:string)=>void,
+    'change':(prev_path:string,cur_path:string)=>void,
 }
 
 export interface IDiffWatcher extends event.EventEmitter {
-    on<U extends keyof DiffWatcherEvent>(event: U, listener: DiffWatcherEvent[U]): this;
-    emit<U extends keyof DiffWatcherEvent>(event: U, ...arg: Parameters<DiffWatcherEvent[U]>): boolean;
-    setup(cntr: DocumentAccessor): Promise<void>;
+    on<U extends keyof DiffWatcherEvent>(event:U,listener:DiffWatcherEvent[U]): this;
+    emit<U extends keyof DiffWatcherEvent>(event:U,...arg:Parameters<DiffWatcherEvent[U]>): boolean;
+    setup(cntr:DocumentAccessor):Promise<void>;
 }
 
-export function linkWatcher(fromWatcher: IDiffWatcher, toWatcher: IDiffWatcher) {
-    fromWatcher.on("create", p => toWatcher.emit("create", p));
-    fromWatcher.on("delete", p => toWatcher.emit("delete", p));
-    fromWatcher.on("change", (p, c) => toWatcher.emit("change", p, c));
+export function linkWatcher(fromWatcher :IDiffWatcher, toWatcher: IDiffWatcher){
+    fromWatcher.on("create",p=>toWatcher.emit("create",p));
+    fromWatcher.on("delete",p=>toWatcher.emit("delete",p));
+    fromWatcher.on("change",(p,c)=>toWatcher.emit("change",p,c));
 }

src/diff/watcher/ComicConfig.schema.json

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

src/diff/watcher/comic_watcher.ts

@@ -1,16 +1,17 @@
-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";
+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'
 
-const createComicWatcherBase = (path: string) => {
-    return new WatcherFilter(new RecursiveWatcher(path), (x) => x.endsWith(".zip"));
-};
-export const createComicWatcher = () => {
+
+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(",")}`);
-    return new WatcherCompositer(file.watch.map(path => createComicWatcherBase(path)));
-};
+    console.log(`register comic ${file.watch.join(",")}`)
+    return new WatcherCompositer(file.watch.map(path=>createComicWatcherBase(path)));
+}

src/diff/watcher/common_watcher.ts

@@ -1,44 +1,45 @@
-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";
+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';
 
-const { readdir } = promises;
+const {readdir} = promises;
 
-export class CommonDiffWatcher extends event.EventEmitter implements IDiffWatcher {
-    on<U extends keyof DiffWatcherEvent>(event: U, listener: DiffWatcherEvent[U]): this {
-        return super.on(event, listener);
+export class CommonDiffWatcher extends event.EventEmitter implements IDiffWatcher{
+    on<U extends keyof DiffWatcherEvent>(event:U,listener:DiffWatcherEvent[U]): this{
+        return super.on(event,listener);
     }
-    emit<U extends keyof DiffWatcherEvent>(event: U, ...arg: Parameters<DiffWatcherEvent[U]>): boolean {
-        return super.emit(event, ...arg);
+    emit<U extends keyof DiffWatcherEvent>(event:U,...arg:Parameters<DiffWatcherEvent[U]>): boolean{
+        return super.emit(event,...arg);
     }
-    private _path: string;
+    private _path:string;
     private _watcher: FSWatcher;
 
-    constructor(path: string) {
+    constructor(path:string){
         super();
         this._path = path;
-        this._watcher = watch(this._path, { persistent: true, recursive: false }, async (eventType, filename) => {
-            if (eventType === "rename") {
+        this._watcher = watch(this._path,{persistent: true, recursive:false},async (eventType,filename)=>{
+            if(eventType === "rename"){
                 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));
+                //add
+                if(cur.includes(filename)){
+                    this.emit('create',join(this.path,filename));
+                }
+                else{
+                    this.emit('delete',join(this.path,filename))
                 }
             }
         });
     }
     async setup(cntr: DocumentAccessor): Promise<void> {
-        await setupHelp(this, this.path, cntr);
+        await setupHelp(this,this.path,cntr);
     }
-    public get path() {
+    public get path(){
         return this._path;
     }
-    watchClose() {
-        this._watcher.close();
+    watchClose(){
+        this._watcher.close()
     }
 }

src/diff/watcher/compositer.ts

@@ -2,22 +2,23 @@ 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 {
-        return super.on(event, listener);
+
+export class WatcherCompositer extends EventEmitter implements IDiffWatcher{
+    refWatchers : IDiffWatcher[];
+    on<U extends keyof DiffWatcherEvent>(event:U,listener:DiffWatcherEvent[U]): this{
+        return super.on(event,listener);
     }
-    emit<U extends keyof DiffWatcherEvent>(event: U, ...arg: Parameters<DiffWatcherEvent[U]>): boolean {
-        return super.emit(event, ...arg);
+    emit<U extends keyof DiffWatcherEvent>(event:U,...arg:Parameters<DiffWatcherEvent[U]>): boolean{
+        return super.emit(event,...arg);
     }
-    constructor(refWatchers: IDiffWatcher[]) {
+    constructor(refWatchers:IDiffWatcher[]){
         super();
         this.refWatchers = refWatchers;
-        for (const refWatcher of this.refWatchers) {
-            linkWatcher(refWatcher, this);
+        for(const refWatcher of this.refWatchers){
+            linkWatcher(refWatcher,this);
         }
     }
     async setup(cntr: DocumentAccessor): Promise<void> {
-        await Promise.all(this.refWatchers.map(x => x.setup(cntr)));
+        await Promise.all(this.refWatchers.map(x=>x.setup(cntr)));
     }
 }

src/diff/watcher/recursive_watcher.ts

@@ -1,61 +1,61 @@
-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";
+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';
 
-type RecursiveWatcherOption = {
+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 {
-        return super.on(event, listener);
+    on<U extends keyof DiffWatcherEvent>(event:U,listener:DiffWatcherEvent[U]): this{
+        return super.on(event,listener);
     }
-    emit<U extends keyof DiffWatcherEvent>(event: U, ...arg: Parameters<DiffWatcherEvent[U]>): boolean {
-        return super.emit(event, ...arg);
+    emit<U extends keyof DiffWatcherEvent>(event:U,...arg:Parameters<DiffWatcherEvent[U]>): boolean{
+        return super.emit(event,...arg);
     }
     readonly path: string;
-    private watcher: FSWatcher;
+    private watcher: FSWatcher
 
-    constructor(path: string, option: RecursiveWatcherOption = {
-        watchDir: false,
-        watchFile: true,
-    }) {
+    constructor(path:string, option:RecursiveWatcherOption = {
+        watchDir:false,
+        watchFile:true,
+    }){
         super();
         this.path = path;
-        this.watcher = watch(path, {
-            persistent: true,
-            ignoreInitial: true,
-            depth: 100,
+        this.watcher = watch(path,{
+            persistent:true,
+            ignoreInitial:true,
+            depth:100,
         });
         option.watchFile ??= true;
-        if (option.watchFile) {
-            this.watcher.on("add", path => {
+        if(option.watchFile){
+            this.watcher.on("add",path=>{
                 const cpath = path;
-                // console.log("add ", cpath);
-                this.emit("create", cpath);
-            }).on("unlink", path => {
+                //console.log("add ", cpath);
+                this.emit("create",cpath);
+            }).on("unlink",path=>{
                 const cpath = path;
-                // console.log("unlink ", cpath);
-                this.emit("delete", cpath);
+                //console.log("unlink ", cpath);
+                this.emit("delete",cpath);
             });
         }
-        if (option.watchDir) {
-            this.watcher.on("addDir", path => {
+        if(option.watchDir){
+            this.watcher.on("addDir",path=>{
                 const cpath = path;
-                this.emit("create", cpath);
-            }).on("unlinkDir", path => {
+                this.emit("create",cpath);
+            }).on("unlinkDir",path=>{
                 const cpath = path;
-                this.emit("delete", cpath);
-            });
+                this.emit("delete",cpath);
+            })
         }
     }
     async setup(cntr: DocumentAccessor): Promise<void> {
-        await setupRecursive(this, this.path, cntr);
+        await setupRecursive(this,this.path,cntr);
     }
 }

src/diff/watcher/util.ts

@@ -1,36 +1,35 @@
 import { EventEmitter } from "events";
 import { promises } from "fs";
 import { join } from "path";
-const { readdir } = promises;
+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.
+
+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));
+    let deleted = initial_filenames.filter(x=>!cur.includes(x));
     for (const it of added) {
-        const cpath = join(basepath, it);
-        watcher.emit("create", cpath);
+        const cpath = join(basepath,it);
+        watcher.emit('create',cpath);
     }
-    for (const it of deleted) {
-        const cpath = join(basepath, it);
-        watcher.emit("delete", cpath);
+    for (const it of deleted){
+        const cpath = join(basepath,it);
+        watcher.emit('delete',cpath);
     }
 }
-export async function setupHelp(watcher: IDiffWatcher, basepath: string, cntr: DocumentAccessor) {
+export async function setupHelp(watcher:IDiffWatcher,basepath:string,cntr:DocumentAccessor){
     const initial_document = await cntr.findByPath(basepath);
-    const initial_filenames = initial_document.map(x => x.filename);
+    const initial_filenames = initial_document.map(x=>x.filename);
     const cur = await readdir(basepath);
-    setupCommon(watcher, basepath, initial_filenames, cur);
+    setupCommon(watcher,basepath,initial_filenames,cur);
 }
-export async function setupRecursive(watcher: IDiffWatcher, basepath: string, cntr: DocumentAccessor) {
+export async function setupRecursive(watcher:IDiffWatcher,basepath:string,cntr:DocumentAccessor){
     const initial_document = await cntr.findByPath(basepath);
-    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)),
-    ]);
+    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))]);
 }

src/diff/watcher/watcher_filter.ts

@@ -2,11 +2,12 @@ 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;
-    on<U extends keyof DiffWatcherEvent>(event: U, listener: DiffWatcherEvent[U]): this {
-        return super.on(event, listener);
+
+export class WatcherFilter extends EventEmitter implements IDiffWatcher{
+    refWatcher : IDiffWatcher;
+    filter : (filename:string)=>boolean;;
+    on<U extends keyof DiffWatcherEvent>(event:U,listener:DiffWatcherEvent[U]): this{
+        return super.on(event,listener);
     }
     /**
      * emit event
@@ -14,33 +15,37 @@ export class WatcherFilter extends EventEmitter implements IDiffWatcher {
      * @param arg 
      * @returns `true` if the event had listeners, `false` otherwise.
      */
-    emit<U extends keyof DiffWatcherEvent>(event: U, ...arg: Parameters<DiffWatcherEvent[U]>): boolean {
-        if (event === "change") {
+    emit<U extends keyof DiffWatcherEvent>(event:U,...arg:Parameters<DiffWatcherEvent[U]>): boolean{
+        if(event === "change"){
             const prev = arg[0];
             const cur = arg[1] as string;
-            if (this.filter(prev)) {
-                if (this.filter(cur)) {
-                    return super.emit("change", prev, cur);
-                } else {
-                    return super.emit("delete", cur);
+            if(this.filter(prev)){
+                if(this.filter(cur)){
+                    return super.emit("change",prev,cur);
                 }
-            } else {
-                if (this.filter(cur)) {
-                    return super.emit("create", cur);
+                else{
+                    return super.emit("delete",cur);
+                }
+            }
+            else{
+                if(this.filter(cur)){
+                    return super.emit("create",cur);
                 }
             }
             return false;
-        } else if (!this.filter(arg[0])) {
-            return false;
-        } else return super.emit(event, ...arg);
         }
-    constructor(refWatcher: IDiffWatcher, filter: (filename: string) => boolean) {
+        else if(!this.filter(arg[0])){
+            return false;
+        }
+        else return super.emit(event,...arg);
+    }
+    constructor(refWatcher:IDiffWatcher, filter:(filename:string)=>boolean){
         super();
         this.refWatcher = refWatcher;
         this.filter = filter;
-        linkWatcher(refWatcher, this);
+        linkWatcher(refWatcher,this);
     }
-    setup(cntr: DocumentAccessor): Promise<void> {
+    setup(cntr:DocumentAccessor): Promise<void> {
         return this.refWatcher.setup(cntr);
     }
 }

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 { createKnexUserController } from "./db/mod";
-import { IUser, UserAccessor } from "./model/mod";
 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";
 
 type PayloadInfo = {
   username: string;
@@ -19,19 +19,19 @@ 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";
 export const refreshTokenName = "refresh_token";
-const accessExpiredTime = 60 * 60; // 1 hour
+const accessExpiredTime = 60 * 60; //1 hour
 const refreshExpiredTime = 60 * 60 * 24 * 14; // 14 day;
 
 export const getAdminAccessTokenValue = () => {
@@ -86,12 +86,13 @@ 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;
-    // check format
+    //check format
     if (typeof body == "string" || !("username" in body) || !("password" in body)) {
       return sendError(
         400,
@@ -100,25 +101,25 @@ export const createLoginMiddleware = (userController: UserAccessor) => async (ct
     }
     const username = body["username"];
     const password = body["password"];
-    // check type
+    //check type
     if (typeof username !== "string" || typeof password !== "string") {
       return sendError(
         400,
         "invalid form : username or password is not string",
       );
     }
-    // if admin login is forbidden?
+    //if admin login is forbidden?
     if (username === "admin" && setting.forbid_remote_admin_login) {
       return sendError(403, "forbidden remote admin login");
     }
     const user = await userController.findUser(username);
-    // username not exist
+    //username not exist
     if (user === undefined) return sendError(401, "not authorized");
-    // password not matched
+    //password not matched
     if (!user.password.check_password(password)) {
       return sendError(401, "not authorized");
     }
-    // create token
+    //create token
     const userPermission = await user.get_permissions();
     const payload = publishAccessToken(
       secretKey,
@@ -140,21 +141,21 @@ export const createLoginMiddleware = (userController: UserAccessor) => async (ct
     };
     console.log(`${username} logined`);
     return;
-};
+  };
 
 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 () => {
@@ -165,7 +166,8 @@ export const createUserMiddleWare =
     };
     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;
@@ -195,7 +197,7 @@ const refreshTokenHandler = (cntr: UserAccessor) => async (ctx: Koa.Context, fai
           const o = verify(refreshPayload, secretKey);
           if (isRefreshToken(o)) {
             const user = await cntr.findUser(o.username);
-                    if (user === undefined) return await fail(); // already non-existence user
+            if (user === undefined) return await fail(); //already non-existence user
             const perm = await user.get_permissions();
             const payload = publishAccessToken(
               secretKey,
@@ -216,9 +218,10 @@ const refreshTokenHandler = (cntr: UserAccessor) => async (ctx: Koa.Context, fai
         }
       }
       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() {
@@ -228,7 +231,7 @@ export const createRefreshTokenMiddleware = (cntr: UserAccessor) => async (ctx:
         ...user,
       };
       ctx.type = "json";
-    }
+    };
     async function success() {
       const user = ctx.state.user as PayloadInfo;
       ctx.body = {
@@ -237,16 +240,17 @@ export const createRefreshTokenMiddleware = (cntr: UserAccessor) => async (ctx:
         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");
     }
@@ -258,28 +262,28 @@ export const resetPasswordMiddleware = (cntr: UserAccessor) => async (ctx: Koa.C
       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;
 }
 
 export const getAdmin = async (cntr: UserAccessor) => {
   const admin = await cntr.findUser("admin");
   if (admin === undefined) {
-        throw new Error("initial process failed!"); // ???
+    throw new Error("initial process failed!"); //???
   }
   return admin;
 };
 
 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,129 +1,129 @@
-import { JSONMap } from "../types/json";
-import { check_type } from "../util/type_check";
-import { TagAccessor } from "./tag";
+import {TagAccessor} from './tag';
+import {check_type} from '../util/type_check'
+import {JSONMap} from '../types/json';
 
-export interface DocumentBody {
-    title: string;
-    content_type: string;
-    basepath: string;
-    filename: string;
-    modified_at: number;
-    content_hash: string;
-    additional: JSONMap;
-    tags: string[]; // eager loading
+export interface DocumentBody{
+    title           : string,
+    content_type    : string,
+    basepath        : string,
+    filename        : string,
+    modified_at     : number,
+    content_hash    : string,
+    additional      : JSONMap,
+    tags            : string[],//eager loading 
 }
 
 export const MetaContentBody = {
-    title: "string",
-    content_type: "string",
-    basepath: "string",
-    filename: "string",
-    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;
+    title         : "string",
+    content_type  : "string",
+    basepath      : "string",
+    filename      : "string",
+    content_hash  : "string",
+    additional    : "object",
+    tags          : "string[]",
 }
 
-export const isDoc = (c: any): c is Document => {
-    if ("id" in c && typeof c["id"] === "number") {
-        const { id, ...rest } = c;
+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"){
+        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 {
+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.
      */
-    findByPath: (basepath: string, filename?: string) => Promise<Document[]>;
+    findByPath:(basepath: string,filename?:string)=>Promise<Document[]>;
     /**
      * find deleted content
      */
-    findDeleted: (content_type: string) => Promise<Document[]>;
+    findDeleted:(content_type:string)=>Promise<Document[]>;
     /**
      * search by in document
      */
-    search: (search_word: string) => Promise<Document[]>;
+    search:(search_word:string)=>Promise<Document[]>
     /**
      * update document except tag.
      */
-    update: (c: Partial<Document> & { id: number }) => Promise<boolean>;
+    update:(c:Partial<Document> & { id:number })=>Promise<boolean>;
     /**
      * add document
      */
-    add: (c: DocumentBody) => Promise<number>;
+    add:(c:DocumentBody)=>Promise<number>;
     /**
      * add document list
      */
-    addList: (content_list: DocumentBody[]) => Promise<number[]>;
+    addList:(content_list:DocumentBody[]) => Promise<number[]>;
     /**
      * delete document
      * @returns if it exists, return true.
      */
-    del: (id: number) => Promise<boolean>;
+    del:(id:number)=>Promise<boolean>;
     /**
      * @param c Valid Document
      * @param tagname tag name to add
      * @returns if success, return true
      */
-    addTag: (c: Document, tag_name: string) => Promise<boolean>;
+    addTag:(c:Document,tag_name:string)=>Promise<boolean>;
     /**
      * @returns if success, return true
      */
-    delTag: (c: Document, tag_name: string) => Promise<boolean>;
-}
+    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,18 +1,18 @@
-export interface Tag {
-    readonly name: string;
-    description?: string;
+export interface Tag{
+    readonly name: string,
+    description?: string
 }
 
-export interface TagCount {
+export interface TagCount{
     tag_name: string;
     occurs: number;
 }
 
-export interface TagAccessor {
-    getAllTagList: (onlyname?: boolean) => Promise<Tag[]>;
+export interface TagAccessor{
+    getAllTagList: (onlyname?:boolean)=> Promise<Tag[]>;
     getAllTagCount(): Promise<TagCount[]>;
-    getTagByName: (name: string) => Promise<Tag | undefined>;
-    addTag: (tag: Tag) => Promise<boolean>;
-    delTag: (name: string) => Promise<boolean>;
-    updateTag: (name: string, tag: string) => Promise<boolean>;
+    getTagByName: (name:string)=>Promise<Tag|undefined>;
+    addTag: (tag:Tag)=>Promise<boolean>;
+    delTag: (name:string) => Promise<boolean>;
+    updateTag: (name:string,tag:string) => Promise<boolean>;
 }

src/model/user.ts

@@ -1,84 +1,80 @@
-import { createHmac, randomBytes } from "crypto";
+import { createHmac, randomBytes } from 'crypto';
 
-function hashForPassword(salt: string, password: string) {
-    return createHmac("sha256", salt).update(password).digest("hex");
+function hashForPassword(salt: string,password:string){
+    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 }) {
-        const { salt, hash } = typeof pw === "string" ? createPasswordHashAndSalt(pw) : pw;
+export class Password{
+    private _salt:string;
+    private _hash:string;
+    constructor(pw : string|{salt:string,hash:string}){
+        const {salt,hash} = typeof pw === "string" ? createPasswordHashAndSalt(pw) : pw;
         this._hash = hash;
         this._salt = salt;
     }
-    set_password(password: string) {
-        const { salt, hash } = createPasswordHashAndSalt(password);
+    set_password(password: string){
+        const {salt,hash} = createPasswordHashAndSalt(password);
         this._hash = hash;
         this._salt = salt;
     }
-    check_password(password: string): boolean {
-        return this._hash === hashForPassword(this._salt, password);
-    }
-    get salt() {
-        return this._salt;
-    }
-    get hash() {
-        return this._hash;
+    check_password(password: string):boolean{
+        return this._hash === hashForPassword(this._salt,password);
     }
+    get salt(){return this._salt;}
+    get hash(){return this._hash;}
 }
 
-export interface UserCreateInput {
-    username: string;
-    password: string;
+export interface UserCreateInput{
+    username: string,
+    password: string
 }
 
-export interface IUser {
-    readonly username: string;
-    readonly password: Password;
+export interface IUser{
+    readonly username : string;
+    readonly password : Password;
     /**
      * return user's permission list.
      */
-    get_permissions(): Promise<string[]>;
+    get_permissions():Promise<string[]>;
     /**
      * add permission
      * @param name permission name to add
      * @returns if `name` doesn't exist, return true
      */
-    add(name: string): Promise<boolean>;
+    add(name :string):Promise<boolean>;
     /**
      * remove permission
      * @param name permission name to remove
      * @returns if `name` exist, return true
      */
-    remove(name: string): Promise<boolean>;
+    remove(name :string):Promise<boolean>;
     /**
      * reset password.
      * @param password password to set
      */
-    reset_password(password: string): Promise<void>;
-}
+    reset_password(password: string):Promise<void>;
+};
 
-export interface UserAccessor {
+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,58 +1,60 @@
-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 {
-    // ========
-    // not implemented
-    // admin only
+
+export enum Permission{
+    //========
+    //not implemented
+    //admin only
     /** remove document */
-    // removeContent = 'removeContent',
+    //removeContent = 'removeContent',
 
     /** upload document */
-    // uploadContent = 'uploadContent',
+    //uploadContent = 'uploadContent',
 
     /** modify document except base path, filename, content_hash. but admin can modify all. */
-    // modifyContent = 'modifyContent',
+    //modifyContent = 'modifyContent',
     
     /** add tag into document */
-    // addTagContent = 'addTagContent',
+    //addTagContent = 'addTagContent',
     /** remove tag from document */
-    // removeTagContent = 'removeTagContent',
+    //removeTagContent = 'removeTagContent',
     /** ModifyTagInDoc */
-    ModifyTag = "ModifyTag",
+    ModifyTag = 'ModifyTag',
 
     /** find documents with query */
-    // findAllContent = 'findAllContent',
+    //findAllContent = 'findAllContent',
     /** find one document. */
-    // findOneContent = 'findOneContent',
+    //findOneContent = 'findOneContent',
     /** view content*/
-    // viewContent = 'viewContent',
-    QueryContent = "QueryContent",
+    //viewContent = 'viewContent',
+    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"];
-        if (user.username === "admin") {
+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();    
     }
     const user_permission = user.permission;
-        // if permissions is not subset of user permission
-        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");
+    //if permissions is not subset of user permission
+    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");
     }
     await next();
-    };
-export const AdminOnlyMiddleware = async (ctx: Koa.ParameterizedContext<UserState>, next: Koa.Next) => {
-    const user = ctx.state["user"];
-    if (user.username !== "admin") {
-        return sendError(403, "admin only");
+}
+export const AdminOnlyMiddleware = async (ctx: Koa.ParameterizedContext<UserState>,next:Koa.Next)=>{
+    const user = ctx.state['user'];
+    if(user.username !== "admin"){
+        return sendError(403,"admin only");
     }
     await next();    
-};
+}

src/route/all.ts

@@ -1,57 +1,55 @@
-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";
+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';
 
-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) => {
-        if (cont == undefined) {
+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)=>{
+    if(cont == undefined){
         ctx.status = 404;
         return;
     }
-        if (ctx.state.location.type != cont) {
-            console.error("not matched");
+    if(ctx.state.location.type != cont){
+        console.error("not matched")
         ctx.status = 404;
         return;
     }
     const router = table[cont];
-        if (router == undefined) {
+    if(router == undefined){
         ctx.status = 404;
         return;
     }
-        const rest = "/" + (restarg ?? "");
-        const result = router.match(rest, "GET");
-        if (!result.route) {
+    const rest = "/"+(restarg ?? "");
+    const result = router.match(rest,"GET");
+    if(!result.route){
         return await next();
     }
-        const chain = result.pathAndMethod.reduce((combination: Middleware<any & DefaultContext, any>[], cur) => {
-            combination.push(async (ctx, next) => {
+    const chain = result.pathAndMethod.reduce((combination : Middleware<any& DefaultContext,any>[],cur)=>{
+        combination.push(async (ctx,next)=>{
             const captures = cur.captures(rest);
-                ctx.params = cur.params(rest, captures);
+            ctx.params = cur.params(rest,captures);
             ctx.request.params = ctx.params;
             ctx.routerPath = cur.path;
             return await next();
         });
         return combination.concat(cur.stack);
-        }, []);
-        return await compose(chain)(ctx, next);
-    };
-export class AllContentRouter extends Router<ContentContext> {
-    constructor() {
+    },[]);
+    return await compose(chain)(ctx,next);
+};
+export class AllContentRouter extends Router<ContentContext>{
+    constructor(){
         super();
-        this.get("/:content_type", async (ctx, next) => {
-            return await (all_middleware(ctx.params["content_type"], undefined))(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);
+            return await (all_middleware(cont,ctx.params["rest"]))(ctx,next);
         });
     }
-}
+};

src/route/comic.ts

@@ -1,8 +1,13 @@
 import { Context, DefaultContext, DefaultState, Next } from "koa";
-import Router from "koa-router";
-import { createReadableStreamFromZip, entriesByNaturalOrder, readZip, ZipAsync } from "../util/zipwrap";
-import { ContentContext } from "./context";
+import {
+  createReadableStreamFromZip,
+  entriesByNaturalOrder,
+  readZip,
+  ZipAsync,
+} from "../util/zipwrap";
 import { since_last_modified } from "./util";
+import { ContentContext } from "./context";
+import Router from "koa-router";
 
 /**
  * zip stream cache.
@@ -14,12 +19,13 @@ async function acquireZip(path: string) {
   if (!(path in ZipStreamCache)) {
     const ret = await readZip(path);
     ZipStreamCache[path] = [ret, 1];
-        // console.log(`acquire ${path} 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}`);
+    //console.log(`acquire ${path} ${refCount + 1}`);
     return ret;
   }
 }
@@ -28,18 +34,19 @@ function releaseZip(path: string) {
   const obj = ZipStreamCache[path];
   if (obj === undefined) throw new Error("error! key invalid");
   const [ref, refCount] = obj;
-    // console.log(`release ${path} : ${refCount}`);
+  //console.log(`release ${path} : ${refCount}`);
   if (refCount === 1) {
     ref.close();
     delete ZipStreamCache[path];
-    } else {
+  }
+  else{
     ZipStreamCache[path] = [ref, refCount - 1];
   }
 }
 
 async function renderZipImage(ctx: Context, path: string, page: number) {
   const image_ext = ["gif", "png", "jpeg", "bmp", "webp", "jpg"];
-    // console.log(`opened ${page}`);
+  //console.log(`opened ${page}`);
   let zip = await acquireZip(path);
   const entries = (await entriesByNaturalOrder(zip)).filter((x) => {
     const ext = x.name.split(".").pop();
@@ -51,14 +58,14 @@ async function renderZipImage(ctx: Context, path: string, page: number) {
     if (since_last_modified(ctx, last_modified)) {
       return;
     }
-        const read_stream = await createReadableStreamFromZip(zip, entry);
-        /** Exceptions (ECONNRESET, ECONNABORTED) may be thrown when processing this request
+    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, 
      * so there is a problem with the zlib stream being accessed even after the stream is closed.
      * So it waits for 100 ms and releases it.
      * Additionaly, there is a risk of memory leak becuase zlib stream is not properly destroyed.
-         * @todo modify function 'stream' in 'node-stream-zip' library to prevent memory leak */
+     * @todo modify function 'stream' in 'node-stream-zip' library to prevent memory leak*/
     read_stream.once("close", () => {
       setTimeout(() => {
         releaseZip(path);
@@ -67,7 +74,7 @@ async function renderZipImage(ctx: Context, path: string, page: number) {
 
     ctx.body = read_stream;
     ctx.response.length = entry.size;
-        // console.log(`${entry.name}'s ${page}:${entry.size}`);
+    //console.log(`${entry.name}'s ${page}:${entry.size}`);
     ctx.response.type = entry.name.split(".").pop() as string;
     ctx.status = 200;
     ctx.set("Date", new Date().toUTCString());

src/route/contents.ts

@@ -1,68 +1,63 @@
-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";
+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'
 
-const ContentIDHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params["num"]);
-    let document = await controller.findById(num, true);
-    if (document == undefined) {
-        return sendError(404, "document does not exist.");
+const ContentIDHandler = (controller: DocumentAccessor) => async (ctx: Context,next: Next)=>{
+    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"]);
-    let document = await controller.findById(num, true);
-    if (document == undefined) {
-        return sendError(404, "document does not exist.");
+const ContentTagIDHandler = (controller: DocumentAccessor) => async (ctx: Context,next: Next)=>{
+    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
+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 
         || query_cursor instanceof Array 
         || query_word instanceof Array 
         || query_content_type instanceof Array
         || query_offset instanceof Array
-        || query_use_offset instanceof Array
-    ) {
-        return sendError(400, "paramter can not be array");
+        || query_use_offset instanceof Array){
+        return sendError(400,"paramter can not be array");
     }
     const limit = ParseQueryNumber(query_limit);
     const cursor = ParseQueryNumber(query_cursor);
     const word = ParseQueryArgString(query_word);
     const content_type = ParseQueryArgString(query_content_type);
     const offset = ParseQueryNumber(query_offset);
-    if (limit === NaN || cursor === NaN || offset === NaN) {
-        return sendError(400, "parameter limit, cursor or offset is not a number");
+    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 [ok, use_offset] = ParseQueryBoolean(query_use_offset);
-    if (!ok) {
-        return sendError(400, "use_offset must be true or false.");
+    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.");
     }
-    const option: QueryListOption = {
+    const option :QueryListOption = {
         limit: limit,
         allow_tag: allow_tag,
         word: word,
@@ -74,94 +69,93 @@ const ContentQueryHandler = (controller: DocumentAccessor) => async (ctx: Contex
     };
     let document = await controller.findList(option);
     ctx.body = document;
-    ctx.type = "json";
-};
-const UpdateContentHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params["num"]);
+    ctx.type = 'json';
+}
+const UpdateContentHandler = (controller : DocumentAccessor) => async (ctx: Context, next: Next) => {
+    const num = Number.parseInt(ctx.params['num']);
 
-    if (ctx.request.type !== "json") {
-        return sendError(400, "update fail. invalid document type: it is not 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");
+    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,
+    const content_desc: Partial<Document> & {id: number} = {
+        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"]);
-    if (typeof tag_name === undefined) {
-        return sendError(400, "??? Unreachable");
+const AddTagHandler = (controller: DocumentAccessor)=>async (ctx: Context, next: Next)=>{
+    let tag_name = ctx.params['tag'];
+    const num = Number.parseInt(ctx.params['num']);
+    if(typeof tag_name === undefined){
+        return sendError(400,"??? Unreachable");
     }
     tag_name = String(tag_name);
     const c = await controller.findById(num);
-    if (c === undefined) {
+    if(c === undefined){
         return sendError(404);
     }
-    const r = await controller.addTag(c, tag_name);
+    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"]);
-    if (typeof tag_name === undefined) {
-        return sendError(400, "?? Unreachable");
+const DelTagHandler = (controller: DocumentAccessor)=>async (ctx: Context, next: Next)=>{
+    let tag_name = ctx.params['tag'];
+    const num = Number.parseInt(ctx.params['num']);
+    if(typeof tag_name === undefined){
+        return sendError(400,"?? Unreachable");
     }
     tag_name = String(tag_name);
     const c = await controller.findById(num);
-    if (c === undefined) {
+    if(c === undefined){
         return sendError(404);
     }
-    const r = await controller.delTag(c, tag_name);
+    const r = await controller.delTag(c,tag_name);
     ctx.body = JSON.stringify(r);
-    ctx.type = "json";
-};
-const DeleteContentHandler = (controller: DocumentAccessor) => async (ctx: Context, next: Next) => {
-    const num = Number.parseInt(ctx.params["num"]);
+    ctx.type = 'json';
+}
+const DeleteContentHandler = (controller : DocumentAccessor) => async (ctx: Context, next: Next) => {
+    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"]);
-    let document = await controller.findById(num, true);
-    if (document == undefined) {
-        return sendError(404, "document does not exist.");
+const ContentHandler = (controller : DocumentAccessor) => async (ctx:Context, next:Next) => {
+    const num = Number.parseInt(ctx.params['num']);
+    let document = await controller.findById(num,true);
+    if (document == undefined){
+        return sendError(404,"document does not exist.");
     }
-    if (document.deleted_at !== null) {
-        return sendError(404, "document has been removed.");
+    if(document.deleted_at !== null){
+        return sendError(404,"document has been removed.");
     }
-    const path = join(document.basepath, document.filename);
-    ctx.state["location"] = {
-        path: path,
-        type: document.content_type,
-        additional: document.additional,
+    const path = join(document.basepath,document.filename);
+    ctx.state['location'] = {
+        path:path,
+        type:document.content_type,
+        additional:document.additional,
     } as ContentLocation;
     await next();
 };
 
-export const getContentRouter = (controller: DocumentAccessor) => {
+export const getContentRouter = (controller: DocumentAccessor)=>{
     const ret = new Router();
-    ret.get("/search", PerCheck(Per.QueryContent), ContentQueryHandler(controller));
-    ret.get("/:num(\\d+)", PerCheck(Per.QueryContent), ContentIDHandler(controller));
-    ret.post("/:num(\\d+)", AdminOnly, UpdateContentHandler(controller));
-    // ret.use("/:num(\\d+)/:content_type");
-    // ret.post("/",AdminOnly,CreateContentHandler(controller));
-    ret.get("/:num(\\d+)/tags", PerCheck(Per.QueryContent), ContentTagIDHandler(controller));
-    ret.post("/:num(\\d+)/tags/:tag", PerCheck(Per.ModifyTag), AddTagHandler(controller));
-    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.get("/search",PerCheck(Per.QueryContent),ContentQueryHandler(controller));
+    ret.get("/:num(\\d+)",PerCheck(Per.QueryContent),ContentIDHandler(controller));
+    ret.post("/:num(\\d+)",AdminOnly,UpdateContentHandler(controller));
+    //ret.use("/:num(\\d+)/:content_type");
+    //ret.post("/",AdminOnly,CreateContentHandler(controller));
+    ret.get("/:num(\\d+)/tags",PerCheck(Per.QueryContent),ContentTagIDHandler(controller));
+    ret.post("/:num(\\d+)/tags/:tag",PerCheck(Per.ModifyTag),AddTagHandler(controller));
+    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());
     return ret;
-};
+}
 
 export default getContentRouter;

src/route/context.ts

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

src/route/error_handler.ts

@@ -1,49 +1,50 @@
-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 {
+class ClientRequestError implements Error{
     name: string;
     message: string;
     stack?: string | undefined;
     code: number;
 
-    constructor(code: number, message: string) {
+    constructor(code : number,message: string){
         this.name = "client request error";
         this.message = message;
         this.code = code;
     }
 }
 
-const code_to_message_table: { [key: number]: string | undefined } = {
-    400: "BadRequest",
-    404: "NotFound",
-};
+const code_to_message_table:{[key:number]:string|undefined} = {
+    400:"BadRequest",
+    404:"NotFound"
+}
 
-export const error_handler = async (ctx: Context, next: Next) => {
+export const error_handler = async (ctx:Context,next: Next)=>{
     try {
         await next();
     } catch (err) {
-        if (err instanceof ClientRequestError) {
-            const body: ErrorFormat = {
+        if(err instanceof ClientRequestError){
+            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 const sendError = (code:number,message?:string) =>{
+    throw new ClientRequestError(code,message ?? "");
+}
 
 export default error_handler;

src/route/tags.ts

@@ -1,25 +1,28 @@
-import { Context, Next } from "koa";
-import Router, { RouterContext } from "koa-router";
+import {Context, Next} from "koa";
+import Router,{RouterContext} from "koa-router";
 import { TagAccessor } from "../model/tag";
-import { createPermissionCheckMiddleware as PerCheck, Permission } from "../permission/permission";
 import { sendError } from "./error_handler";
+import { createPermissionCheckMiddleware as PerCheck, Permission } from "../permission/permission";
 
-export function getTagRounter(tagController: TagAccessor) {
+export function getTagRounter(tagController: TagAccessor){
     let router = new Router();
-    router.get("/", PerCheck(Permission.QueryContent), async (ctx: Context) => {
-        if (ctx.query["withCount"]) {
+    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) {
+            if (!c){
                 sendError(404, "tags not found");
             }
             ctx.body = c;

src/route/util.ts

@@ -1,37 +1,39 @@
-import { Context } from "koa";
 
-export function ParseQueryNumber(s: string[] | string | undefined): number | undefined {
-    if (s === undefined) return undefined;
-    else if (typeof s === "object") return undefined;
+import {Context} from 'koa';
+
+
+export function ParseQueryNumber(s: string[] | string|undefined): number| undefined{
+    if(s === undefined) return undefined;
+    else if(typeof s === "object") return undefined;
     else return Number.parseInt(s);
 }
-export function ParseQueryArray(s: string[] | string | undefined) {
+export function ParseQueryArray(s: string[]|string|undefined){
     s = s ?? [];
     const r = s instanceof Array ? s : [s];
-    return r.map(x => decodeURIComponent(x));
+    return r.map(x=>decodeURIComponent(x));
 }
-export function ParseQueryArgString(s: string[] | string | undefined) {
-    if (typeof s === "object") return undefined;
+export function ParseQueryArgString(s: string[]|string|undefined){
+    if(typeof s === "object") return undefined;
     return s === undefined ? s : decodeURIComponent(s);
 }
-export function ParseQueryBoolean(s: string[] | string | undefined): [boolean, boolean | undefined] {
-    let value: boolean | 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 {
+export function since_last_modified(ctx: Context, last_modified: Date): boolean{
     const con = ctx.get("If-Modified-Since");
-    if (con === "") return false;
+    if(con === "") return false;
     const mdate = new Date(con);
-    if (last_modified > mdate) return false;
+    if(last_modified > mdate) return false;
     ctx.status = 304;
     return true;
 }

src/route/video.ts

@@ -1,13 +1,13 @@
-import { createReadStream, promises } from "fs";
-import { Context } from "koa";
-import Router from "koa-router";
-import { ContentContext } from "./context";
+import {Context } from 'koa';
+import {promises, createReadStream} from "fs";
+import {ContentContext} from './context';
+import Router from 'koa-router';
 
-export async function renderVideo(ctx: Context, path: string) {
-    const ext = path.trim().split(".").pop();
-    if (ext === undefined) {
-        // ctx.status = 404;
-        console.error(`${path}:${ext}`);
+export async function renderVideo(ctx: Context,path : string){
+    const ext = path.trim().split('.').pop();
+    if(ext === undefined) { 
+        //ctx.status = 404;
+        console.error(`${path}:${ext}`)
         return;
     }
     ctx.response.type = ext;
@@ -15,13 +15,13 @@ 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 === "") {
-        end = 1024 * 512;
-        end = Math.min(end, stat.size - 1);
-        if (start > end) {
+    if(range_text === ''){
+        end = 1024*512;
+        end = Math.min(end,stat.size-1);
+        if(start > end){
             ctx.status = 416;
             return;
         }
@@ -29,38 +29,39 @@ 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) {
+        if(m === null){
             ctx.status = 416;
             return;
         }
         start = parseInt(m[1]);
-        end = m[2].length > 0 ? parseInt(m[2]) : start + 1024 * 1024;
-        end = Math.min(end, stat.size - 1);
-        if (start > end) {
+        end = m[2].length > 0 ? parseInt(m[2]) : start + 1024*1024;
+        end = Math.min(end,stat.size-1);
+        if(start > end){
             ctx.status = 416;
             return;
         }
         ctx.status = 206;
         ctx.length = end - start + 1;
-        ctx.response.set("Content-Range", `bytes ${start}-${end}/${stat.size}`);
-        ctx.body = createReadStream(path, {
-            start: start,
-            end: end,
-        }); // inclusive range.
+        ctx.response.set("Content-Range",`bytes ${start}-${end}/${stat.size}`);
+        ctx.body = createReadStream(path,{
+            start:start,
+            end:end
+        });//inclusive range.
     }
 }
 
-export class VideoRouter extends Router<ContentContext> {
-    constructor() {
+export class VideoRouter extends Router<ContentContext>{
+    constructor(){
         super();
-        this.get("/", async (ctx, next) => {
-            await renderVideo(ctx, ctx.state.location.path);
-        });
-        this.get("/thumbnail", async (ctx, next) => {
-            await renderVideo(ctx, ctx.state.location.path);
+        this.get("/", async (ctx,next)=>{
+            await renderVideo(ctx,ctx.state.location.path);
         });
+        this.get("/thumbnail", async (ctx,next)=>{
+            await renderVideo(ctx,ctx.state.location.path);
+        })
     }
 }
 

src/search/indexer.ts

@@ -1,12 +1,13 @@
-export interface PaginationOption {
-    cursor: number;
-    limit: number;
+
+export interface PaginationOption{
+    cursor:number;
+    limit:number;
 }
 
-export interface IIndexer {
-    indexDoc(word: string, doc_id: number): boolean;
-    indexDoc(word: string[], doc_id: number): boolean;
+export interface IIndexer{
+    indexDoc(word:string,doc_id:number):boolean;
+    indexDoc(word:string[],doc_id:number):boolean;
 
-    getDoc(word: string, option?: PaginationOption): number[];
-    getDoc(word: string[], option?: PaginationOption): number[];
+    getDoc(word:string,option?:PaginationOption):number[];
+    getDoc(word:string[],option?:PaginationOption):number[];
 }

src/search/tokenizer.ts

@@ -1,8 +1,9 @@
-export interface ITokenizer {
-    tokenize(s: string): string[];
+
+export interface ITokenizer{
+    tokenize(s:string):string[];
 }
 
-export class DefaultTokenizer implements ITokenizer {
+export class DefaultTokenizer implements ITokenizer{
     tokenize(s: string): string[] {
         return s.split(" ");
     }

src/server.ts

@@ -1,55 +1,55 @@
-import Koa from "koa";
-import Router from "koa-router";
+import Koa from 'koa';
+import Router from 'koa-router';
 
-import { connectDB } from "./database";
-import { createDiffRouter, DiffManager } from "./diff/mod";
-import { get_setting, SettingConfig } from "./SettingConfig";
+import {get_setting, SettingConfig} from './SettingConfig';
+import {connectDB} from './database';
+import {DiffManager, createDiffRouter} from './diff/mod';
 
-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 { 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 { createComicWatcher } from "./diff/watcher/comic_watcher";
-import { DocumentAccessor, TagAccessor, UserAccessor } from "./model/mod";
-import { getTagRounter } from "./route/tags";
+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';
 
-class ServerApplication {
+
+class ServerApplication{
     readonly userController: UserAccessor;
     readonly documentController: DocumentAccessor;
     readonly tagController: TagAccessor;
     readonly diffManger: DiffManager;
     readonly app: Koa;
-    private index_html: string;
-    private constructor(controller: {
-        userController: UserAccessor;
-        documentController: DocumentAccessor;
-        tagController: TagAccessor;
-    }) {
+    private index_html:string;
+    private constructor(controller:{
+            userController: UserAccessor,
+            documentController:DocumentAccessor,
+            tagController: TagAccessor}){
         this.userController = controller.userController;
         this.documentController = controller.documentController;
         this.tagController = controller.tagController;
         
         this.diffManger = new DiffManager(this.documentController);
         this.app = new Koa();
-        this.index_html = readFileSync("index.html", "utf-8");
+        this.index_html = readFileSync("index.html","utf-8");
     }
-    private async setup() {
+    private async setup(){
         const setting = get_setting();
         const app = this.app;
 
-        if (setting.cli) {
+        if(setting.cli){
             const userAdmin = await getAdmin(this.userController);
-            if (await isAdminFirst(userAdmin)) {
+            if(await isAdminFirst(userAdmin)){
                 const rl = createReadlineInterface({
-                    input: process.stdin,
-                    output: process.stdout,
+                    input:process.stdin,
+                    output:process.stdout
                 });
-                const pw = await new Promise((res: (data: string) => void, err) => {
-                    rl.question("put admin password :", (data) => {
+                const pw = await new Promise((res:(data:string)=>void,err)=>{
+                    rl.question("put admin password :",(data)=>{
                         res(data);
                     });
                 });
@@ -62,166 +62,158 @@ class ServerApplication {
         app.use(createUserMiddleWare(this.userController));
         
         let diff_router = createDiffRouter(this.diffManger);
-        this.diffManger.register("comic", createComicWatcher());
-
-        console.log("setup router");
-
+        this.diffManger.register("comic",createComicWatcher());
         let router = new Router();
-        router.use("/api/(.*)", async (ctx, next) => {
-            // For CORS
+        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());
-
-        const content_router = getContentRouter(this.documentController);
-        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());
+        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);
     
-        const login_router = createLoginRouter(this.userController);
-        router.use("/user", login_router.routes());
-        router.use("/user", login_router.allowedMethods());
+        const content_router = getContentRouter(this.documentController);
+        router.use('/api/doc',content_router.routes());
+        router.use('/api/doc',content_router.allowedMethods());
 
-        if (setting.mode == "development") {
+        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());
+        
+        
+        if(setting.mode == "development"){
         let mm_count = 0;
-            app.use(async (ctx, next) => {
+        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`);
-            });
-        }
+            //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;
+    private serve_index(router:Router){
+        const serveindex = (url:string)=>{
+            router.get(url, (ctx)=>{
+                ctx.type = 'html'; ctx.body = this.index_html;
                 const setting = get_setting();
-                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('x-content-type-options','no-sniff');
+                if(setting.mode === "development"){
+                    ctx.set('cache-control','no-cache'); 
                 }
-            });
-        };
-        serveindex("/");
-        serveindex("/doc/:rest(.*)");
-        serveindex("/search");
-        serveindex("/login");
-        serveindex("/profile");
-        serveindex("/difference");
-        serveindex("/setting");
-        serveindex("/tags");
+                else{
+                    ctx.set('cache-control','public, max-age=3600');
                 }
-    private serve_with_meta_index(router: Router) {
-        const DocMiddleware = async (ctx: Koa.ParameterizedContext) => {
+            })
+        }
+        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)=>{
             const docId = Number.parseInt(ctx.params["id"]);
-            const doc = await this.documentController.findById(docId, true);
+            const doc = await this.documentController.findById(docId,true);
             let meta;
-            if (doc === undefined) {
+            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);
+            const html = makeMetaTagInjectedHTML(this.index_html,meta);
+            serveHTML(ctx,html);
+        }
+        router.get('/doc/:id(\\d+)',DocMiddleware);
         
-        function NotFoundContent() {
-            return createOgTagContent("Not Found Doc", "Not Found", "");
+        function NotFoundContent(){
+            return createOgTagContent("Not Found Doc","Not Found","");
         }
-        function makeMetaTagInjectedHTML(html: string, tagContent: string) {
-            return html.replace("<!--MetaTag-Outlet-->", tagContent);
+        function makeMetaTagInjectedHTML(html:string,tagContent:string){
+            return html.replace("<!--MetaTag-Outlet-->",tagContent);
         }
-        function serveHTML(ctx: Koa.Context, file: string) {
-            ctx.type = "html";
-            ctx.body = file;
+        function serveHTML(ctx: Koa.Context, file: string){
+            ctx.type = 'html'; ctx.body = file;
             const setting = get_setting();
-            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('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');
             }
         }
         
-        function createMetaTagContent(key: string, value: string) {
+        function createMetaTagContent(key: string, value:string){
             return `<meta property="${key}" content="${value}">`;
         }
-        function createOgTagContent(title: string, description: string, image: string) {
-            return [
-                createMetaTagContent("og:title", title),
-                createMetaTagContent("og:type", "website"),
-                createMetaTagContent("og:description", description),
-                createMetaTagContent("og:image", image),
-                // createMetaTagContent("og:image:width","480"),
-                // createMetaTagContent("og:image","480"),
-                // createMetaTagContent("og:image:type","image/png"),
-                createMetaTagContent("twitter:card", "summary_large_image"),
-                createMetaTagContent("twitter:title", title),
-                createMetaTagContent("twitter:description", description),
-                createMetaTagContent("twitter:image", image),
+        function createOgTagContent(title:string,description: string, image: string){
+            return [createMetaTagContent("og:title",title),
+                    createMetaTagContent("og:type","website"),
+                    createMetaTagContent("og:description",description),
+                    createMetaTagContent("og:image",image),
+                    //createMetaTagContent("og:image:width","480"),
+                    //createMetaTagContent("og:image","480"),
+                    //createMetaTagContent("og:image:type","image/png"),
+                    createMetaTagContent("twitter:card","summary_large_image"),
+                    createMetaTagContent("twitter:title",title),
+                    createMetaTagContent("twitter:description",description),
+                    createMetaTagContent("twitter:image",image),
                 ].join("\n");
         }
     }
-    private serve_static_file(router: Router) {
-        const static_file_server = (path: string, type: string) => {
-            router.get("/" + path, async (ctx, next) => {
+    private serve_static_file(router: Router){
+        const static_file_server = (path:string,type:string) => {
+            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");
-                if (setting.mode === "development") {
-                    ctx.set("cache-control", "no-cache");
-                } else {
-                    ctx.set("cache-control", "public, max-age=3600");
+                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'); 
                 }
-            });
-        };
+                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");
-        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.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');
         }
     }
-    start_server() {
+    start_server(){
         let setting = get_setting();
-        // 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");
+        console.log("start server");
+        //todo : support https
+        return this.app.listen(setting.port,setting.localmode ? "127.0.0.1" : "0.0.0.0");
     }
-    static async createServer() {
+    static async createServer(){
         const setting = get_setting();
         let db = await connectDB();
 
         const app = new ServerApplication({
-            userController: createKnexUserController(db),
+            userController:createKnexUserController(db),
             documentController: createKnexDocumentAccessor(db),
             tagController: createKnexTagController(db),
         });
@@ -229,9 +221,10 @@ class ServerApplication {
         return app;
     }
 }
+//let Koa = require("koa");
 
-export async function create_server() {
+export async function create_server(){
     return await ServerApplication.createServer();
 }
 
-export default { create_server };
+export default {create_server};

src/types/db.d.ts

@@ -1,4 +1,4 @@
-import { Knex } from "knex";
+import {Knex} from "knex";
 
 declare module "knex" {
   interface Tables {
@@ -18,9 +18,9 @@ declare module "knex" {
       basepath: string;
       filename: string;
       created_at: number;
-            deleted_at: number | null;
+      deleted_at: number|null;
       content_hash: string;
-            additional: string | null;
+      additional: string|null;
     };
     doc_tag_relation: {
       doc_id: number;

src/types/json.ts

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

src/util/configRW.ts

@@ -1,26 +1,26 @@
-import { existsSync, promises as fs, readFileSync, writeFileSync } from "fs";
-import { validate } from "jsonschema";
+import {readFileSync, existsSync, writeFileSync, promises as fs} from 'fs';
+import {validate} from 'jsonschema';
 
-export class ConfigManager<T> {
-    path: string;
+export class ConfigManager<T>{
+    path:string;
     default_config: T;
-    config: T | null;
-    schema: object;
-    constructor(path: string, default_config: T, schema: object) {
+    config: T| null;
+    schema:object;
+    constructor(path:string,default_config:T,schema:object){
         this.path = path;
         this.default_config = default_config;
         this.config = null;
         this.schema = schema;
     }
-    get_config_file(): T {
-        if (this.config !== null) return this.config;
-        this.config = { ...this.read_config_file() };
+    get_config_file(): T{
+        if(this.config !== null) return this.config;
+        this.config = {...this.read_config_file()};
         return this.config;
     }
-    private emptyToDefault(target: T) {
+    private emptyToDefault(target:T){
         let occur = false;
-        for (const key in this.default_config) {
-            if (key === undefined || key in target) {
+        for(const key in this.default_config){
+            if(key === undefined || key in target){
                 continue;
             }
             target[key] = this.default_config[key];
@@ -28,24 +28,24 @@ export class ConfigManager<T> {
         }
         return occur;
     }
-    read_config_file(): T {
-        if (!existsSync(this.path)) {
-            writeFileSync(this.path, JSON.stringify(this.default_config));
+    read_config_file():T{
+        if(!existsSync(this.path)){
+            writeFileSync(this.path,JSON.stringify(this.default_config));
             return this.default_config;
         }
-        const ret = JSON.parse(readFileSync(this.path, { encoding: "utf8" }));
-        if (this.emptyToDefault(ret)) {
-            writeFileSync(this.path, JSON.stringify(ret));
+        const ret = JSON.parse(readFileSync(this.path,{encoding:"utf8"}));
+        if(this.emptyToDefault(ret)){
+            writeFileSync(this.path,JSON.stringify(ret));
         }
-        const result = validate(ret, this.schema);
-        if (!result.valid) {
+        const result = validate(ret,this.schema);
+        if(!result.valid){
             throw new Error(result.toString());
         }
         return ret;
     }
-    async write_config_file(new_config: T) {
+    async write_config_file(new_config:T){
         this.config = new_config;
-        await fs.writeFile(`${this.path}.temp`, JSON.stringify(new_config));
-        await fs.rename(`${this.path}.temp`, this.path);
+        await fs.writeFile(`${this.path}.temp`,JSON.stringify(new_config));
+        await fs.rename(`${this.path}.temp`,this.path);
     }
 }

src/util/type_check.ts

@@ -1,15 +1,16 @@
-export function check_type<T>(obj: any, check_proto: Record<string, string | undefined>): obj is T {
+export function check_type<T>(obj: any,check_proto:Record<string,string|undefined>):obj is T{
     for (const it in check_proto) {
         let defined = check_proto[it];
-        if (defined === undefined) return false;
+        if(defined === undefined) return false;
         defined = defined.trim();
-        if (defined.endsWith("[]")) {
-            if (!(obj[it] instanceof Array)) {
+        if(defined.endsWith("[]")){
+            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,33 +1,31 @@
-import { ZipEntry } from "node-stream-zip";
+import { ZipEntry } from 'node-stream-zip';
 
-import { ReadStream } from "fs";
-import { orderBy } from "natural-orderby";
-import StreamZip from "node-stream-zip";
+import {orderBy} from 'natural-orderby';
+import { ReadStream } from 'fs';
+import StreamZip from 'node-stream-zip';
 
 export type ZipAsync = InstanceType<typeof StreamZip.async>;
-export async function readZip(path: string): Promise<ZipAsync> {
+export async function readZip(path : string): Promise<ZipAsync>{
     return new StreamZip.async({
-        file: path,
-        storeEntries: true,
+        file:path,
+        storeEntries: true
     });
 }
-export async function entriesByNaturalOrder(zip: ZipAsync) {
+export async function entriesByNaturalOrder(zip: ZipAsync){
     const entries = await zip.entries();
-    const ret = orderBy(Object.values(entries), v => v.name);
+    const ret = orderBy(Object.values(entries),v=>v.name);
     return ret;
 }
 
-export async function createReadableStreamFromZip(zip: ZipAsync, entry: ZipEntry): Promise<NodeJS.ReadableStream> {
+export async function createReadableStreamFromZip(zip:ZipAsync,entry: ZipEntry):Promise<NodeJS.ReadableStream>{
     return await zip.stream(entry);
 }
-export async function readAllFromZip(zip: ZipAsync, entry: ZipEntry): Promise<Buffer> {
-    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)));
+export async function readAllFromZip(zip:ZipAsync,entry: ZipEntry):Promise<Buffer>{
+    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)));
     });
 }

tsconfig.json

@@ -6,8 +6,8 @@
     // "incremental": true,                   /* Enable incremental compilation */
     "target": "esnext",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    "lib": ["DOM", "ES6"], /* Specify library files to be included in the compilation. */
-    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    "lib": ["DOM","ES6"],                             /* Specify library files to be included in the compilation. */
+    //"allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
@@ -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"],
 }