Add accordion and fix minor issues (#742)

* Add docs v0.0.1

* Add icon size warning

* Fix sourcenover caution

* Fix semver descriptions

* Filters fix

* Quickfix quickstart

* Add icon warning v2

* Fix typos

* Add NovelItem

* Update plugins host

* Update plugins host

* Remove unnecesarry .js and .dist

* Update plugins host

* Add host.ps1

* Fix readme.txt

* Fix READNE.txt, again

* Remove .js and .dist

* Add accordion

* Working pagination

* readme update with ost

* Add linux/windows hosting functions

* Add tswatch

* Fix fetch function

* Change plugin versions

* Fix chrome

* Fix workflows

* Fix search not showing results

* remove unnecesarry code

* Revert novelupdates changes

* Reverted NobleMTL instead of novelupdates, fixing that

* Revert nobleMTL to e346c7d0

* WTF NobleMTL?

index.ts

@@ -9,7 +9,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
 
 const app = express();
 const port = Number(process.argv[2]);
-if(!port){
+if (!port) {
     process.exit(0);
 }
 const host = "localhost";
@@ -23,7 +23,9 @@ export const getHeaders = () => {
 app.use((req, res, next) => {
     const xHeaders = req.headers["x-custom-headers"];
     if (xHeaders && typeof xHeaders === "string") {
-        for (const [headerName, headerValue] of Object.entries(pluginApi.fetchHeaders)) {
+        for (const [headerName, headerValue] of Object.entries(
+            pluginApi.fetchHeaders
+        )) {
             if (
                 typeof headerName === "string" &&
                 typeof headerValue === "string"
@@ -56,41 +58,68 @@ app.post("/filters", async (req, res) => {
     res.json(filters || []);
 });
 app.post("/popularNovels/", async (req, res) => {
-    const filters = req.body["filters"] || {};
+    const requirePath = req.body["pluginRequirePath"];
     const showLatestNovels = req.body["showLatestNovels"] || false;
-    const novels = await pluginApi.popularNovels(
+    const defaultFilters = await pluginApi.getFilter(requirePath);
-        req.body["pluginRequirePath"],
+    const filters = showLatestNovels
-        { showLatestNovels, filters }
+        ? defaultFilters
-    );
+        : req.body["filters"] || defaultFilters;
-    res.json(novels);
+    const page = parseInt(req.body["page"]);
+    try {
+        const novels = await pluginApi.popularNovels(requirePath, page || 1, {
+            showLatestNovels,
+            filters,
+        });
+        res.json(novels);
+    } catch (err) {
+        res.json({ error: err });
+    }
 });
 app.post("/searchNovels/", async (req, res) => {
-    const novels = await pluginApi.searchNovels(
+    const page = parseInt(req.body["page"]) || 1;
-        req.body["pluginRequirePath"],
+    try {
-        req.body["searchTerm"]
+        const novels = await pluginApi.searchNovels(
-    );
+            req.body["pluginRequirePath"],
-    res.json(novels);
+            page,
+            req.body["searchTerm"]
+        );
+        res.json(novels);
+    } catch (err) {
+        res.json({ error: err });
+    }
 });
 app.post("/parseNovelAndChapters/", async (req, res) => {
-    const sourceNovel = await pluginApi.parseNovelAndChapters(
+    try {
-        req.body["pluginRequirePath"],
+        const sourceNovel = await pluginApi.parseNovelAndChapters(
-        req.body["novelUrl"]
+            req.body["pluginRequirePath"],
-    );
+            req.body["novelUrl"]
-    res.json(sourceNovel);
+        );
+        res.json(sourceNovel);
+    } catch (err) {
+        res.json({ error: err });
+    }
 });
 app.post("/parseChapter/", async (req, res) => {
-    const chapterText = await pluginApi.parseChapter(
+    try {
-        req.body["pluginRequirePath"],
+        const chapterText = await pluginApi.parseChapter(
-        req.body["chapterUrl"]
+            req.body["pluginRequirePath"],
-    );
+            req.body["chapterUrl"]
-    res.send(chapterText);
+        );
+        res.send(chapterText);
+    } catch (err) {
+        res.json({ error: err });
+    }
 });
 app.post("/fetchImage/", async (req, res) => {
-    const base64 = await pluginApi.fetchImage(
+    try {
-        req.body["pluginRequirePath"],
+        const base64 = await pluginApi.fetchImage(
-        req.body["url"]
+            req.body["pluginRequirePath"],
-    );
+            req.body["url"]
-    res.send(base64);
+        );
+        res.send(base64);
+    } catch (err) {
+        res.json({ error: err });
+    }
 });
 
 app.get("/", (req, res) => {

libs/fetch.ts

@@ -1,8 +1,13 @@
 type FetchInit = {
-    headers?: Record<string, string> | Headers;
+    headers?: Record<string, string | undefined> | Headers;
     method?: string;
     body?: FormData | string;
-    [x: string]: string | Record<string, string> | undefined | FormData | Headers;
+    [x: string]:
+        | string
+        | Record<string, string | undefined>
+        | undefined
+        | FormData
+        | Headers;
 };
 
 const makeInit = async (init?: FetchInit) => {
@@ -31,7 +36,7 @@ const makeInit = async (init?: FetchInit) => {
         };
     }
     return init;
-}
+};
 
 /**
  * Fetch with (Android) User Agent
@@ -39,13 +44,11 @@ const makeInit = async (init?: FetchInit) => {
  * @param init
  * @returns response as normal fetch
  */
-export async function fetchApi(
+export async function fetchApi(url: string, init?: FetchInit) {
-    url: string,
-    init?: FetchInit
-) {
     init = await makeInit(init);
-    console.log(url, init);
+    // console.log(init.headers);
-    return await fetch(url, init);
+    // console.log(url, init);
+    return await fetch(url, init as RequestInit);
 }
 
 /**
@@ -59,12 +62,12 @@ export const fetchFile = async function (url: string, init?: FetchInit) {
     init = await makeInit(init);
     console.log(url, init);
     try {
-        const res = await fetch(url, init);
+        const res = await fetch(url, init as RequestInit);
-        if (!res.ok) return '';
+        if (!res.ok) return "";
         const arrayBuffer = await res.arrayBuffer();
         return Buffer.from(arrayBuffer).toString("base64");
     } catch (e) {
-        return '';
+        return "";
     }
 };
 
@@ -79,17 +82,17 @@ export const fetchFile = async function (url: string, init?: FetchInit) {
 export const fetchText = async function (
     url: string,
     init?: FetchInit,
-    encoding?: string,
+    encoding?: string
 ): Promise<string> {
     init = await makeInit(init);
     console.log(url, init);
     try {
-        const res = await fetch(url, init);
+        const res = await fetch(url, init as RequestInit);
-        if (!res.ok) return '';
+        if (!res.ok) return "";
         const arrayBuffer = await res.arrayBuffer();
         const decoder = new TextDecoder(encoding);
         return decoder.decode(arrayBuffer);
     } catch (e) {
-        return '';
+        return "";
     }
 };

package.json

@@ -4,7 +4,7 @@
     "description": "Plugins repo for LNReader",
     "main": "index.js",
     "scripts": {
-        "start": "tsc-watch --onSuccess \"node ./.js/index.js 3000\"",
+        "start": "ts-node ./tswatch.ts",
         "test": "exit 0",
         "json": "tsc && node ./.js/scripts/json_plugins.js",
         "generate": "ts-node ./scripts/multisrc/generate.ts",

plugins/english/nobleMTL.ts

@@ -124,10 +124,34 @@ class NobleMTL implements Plugin.PluginBase {
                     .trim(); // Feb 25, 2024
 
                 if (!releaseDate) return;
+                const months = [
+                    "jan",
+                    "feb",
+                    "mar",
+                    "apr",
+                    "may",
+                    "jun",
+                    "jul",
+                    "aug",
+                    "sep",
+                    "oct",
+                    "nov",
+                    "dec",
+                ];
+                const rx = new RegExp(
+                    `(${months.join("|")}).*? (\\d{2}).*?(\\d{4})`,
+                    "i"
+                ).exec(releaseDate);
+                if (!rx) return;
+                const year = +rx[3];
+                const month = months.indexOf(rx[1].toLowerCase());
+                const day = +rx[2];
+
+                if (month < 0) return;
 
                 chapter.push({
                     name: chapterName,
-                    releaseTime: new Date(releaseDate).toISOString(),
+                    releaseTime: new Date(year, month, day).toISOString(),
                     url: chapterUrl,
                 });
             });

plugins/japanese/Syosetu.ts

@@ -1,8 +1,9 @@
-import { load as loadCheerio } from "cheerio";
+import { load, load as loadCheerio } from "cheerio";
-import { fetchFile } from "@libs/fetch";
+import { fetchApi, fetchFile } from "@libs/fetch";
 import { Plugin } from "@typings/plugin";
 import { defaultCover } from "@libs/defaultCover";
-import { Filters } from "@libs/filterInputs";
+import { FilterTypes, Filters } from "@libs/filterInputs";
+import { NovelItem } from "../../test_web/static/js";
 // const novelStatus = require('@libs/novelStatus');
 // const isUrlAbsolute = require('@libs/isAbsoluteUrl');
 // const parseDate = require('@libs/parseDate');
@@ -12,11 +13,11 @@ class Syosetu implements Plugin.PluginBase {
     name = "Syosetu";
     icon = "src/jp/syosetu/icon.png";
     site = "https://yomou.syosetu.com/";
-    filters?: Filters | undefined;
+    version = "1.1.0";
-    version = "1.0.0";
     headers = {
-        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+        "User-Agent":
-    }
+            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    };
     searchUrl = (pagenum?: number, order?: string) => {
         return `https://yomou.syosetu.com/search.php?order=${order || "hyoka"}${
             pagenum !== undefined
@@ -24,37 +25,62 @@ class Syosetu implements Plugin.PluginBase {
                 : "" // if isn't don't set ?p
         }`;
     };
-    async popularNovels(pageNo: number, options: Plugin.PopularNovelsOptions<Filters>): Promise<Plugin.NovelItem[]> {
+    async popularNovels(
+        pageNo: number,
+        { filters }: Plugin.PopularNovelsOptions<typeof this.filters>
+    ): Promise<Plugin.NovelItem[]> {
         const getNovelsFromPage = async (pagenumber: number) => {
             // load page
+            let url = this.site;
 
-            const result = await fetch(this.searchUrl(pagenumber), {headers: this.headers});
+            if (!filters.genre.value) {
-            const body = await result.text();
+                url += `rank/list/type/${filters.ranking.value}_${filters.modifier.value}/?p=${pagenumber}`;
-            // Cheerio it!
+            } else {
-            const cheerioQuery = loadCheerio(body, { decodeEntities: false });
+                url += `rank/${
-            let pageNovels: Plugin.NovelItem[] = [];
+                    filters.genre.value.length === 1
-            // find class=searchkekka_box
+                        ? "isekailist"
-            cheerioQuery(".searchkekka_box").each(function (i, e) {
+                        : "genrelist"
-                // get div with link and name
+                }/type/${filters.ranking.value}_${filters.genre.value}${
-                const novelDIV = cheerioQuery(this).find(".novel_h");
+                    filters.modifier.value === "total"
-                // get link element
+                        ? ""
-                const novelA = novelDIV.children()[0];
+                        : `_${filters.modifier.value}`
-                // add new novel to array
+                }/?p=${pagenumber}`;
-                pageNovels.push({
+            }
-                    name: novelDIV.text(), // get the name
+            const html = await (await fetchApi(url)).text();
-                    url: novelA.attribs.href, // get last part of the link
+
-                    cover: defaultCover,
+            const loadedCheerio = loadCheerio(html, {
-                });
+                decodeEntities: false,
             });
-            // return all novels from this page
+
-            return pageNovels;
+            if (
-        }
+                parseInt(loadedCheerio(".is-current").html() || "1") !==
+                pagenumber
+            )
+                return [];
+
+            const novels: NovelItem[] = [];
+            loadedCheerio(".c-card").each((_, e) => {
+                const anchor = loadedCheerio(e).find(
+                    ".p-ranklist-item__title a"
+                );
+                const url = anchor.attr("href");
+                if (!url) return;
+                const name = anchor.text();
+                const novel: NovelItem = {
+                    url,
+                    name,
+                    cover: defaultCover,
+                };
+                novels.push(novel);
+            });
+            return novels;
+        };
         const novels = await getNovelsFromPage(pageNo);
         return novels;
     }
     async parseNovelAndChapters(novelUrl: string): Promise<Plugin.SourceNovel> {
         let chapters: Plugin.ChapterItem[] = [];
-        const result = await fetch(novelUrl, {headers: this.headers});
+        const result = await fetch(novelUrl, { headers: this.headers });
         const body = await result.text();
         const loadedCheerio = loadCheerio(body, { decodeEntities: false });
 
@@ -103,7 +129,7 @@ class Syosetu implements Plugin.PluginBase {
 
             const nameResult = await fetch(
                 this.searchUrl() + `&word=${novel.name}`,
-                {headers: this.headers}
+                { headers: this.headers }
             );
             const nameBody = await nameResult.text();
             const summaryQuery = loadCheerio(nameBody, {
@@ -129,7 +155,7 @@ class Syosetu implements Plugin.PluginBase {
         return novel;
     }
     async parseChapter(chapterUrl: string): Promise<string> {
-        const result = await fetch(chapterUrl, {headers: this.headers});
+        const result = await fetch(chapterUrl, { headers: this.headers });
         const body = await result.text();
 
         // create cheerioQuery
@@ -137,20 +163,23 @@ class Syosetu implements Plugin.PluginBase {
             decodeEntities: false,
         });
 
-        let chapterText = cheerioQuery("#novel_honbun") // get chapter text
+        let chapterText =
-            .html() || '';
+            cheerioQuery("#novel_honbun") // get chapter text
+                .html() || "";
         return chapterText;
     }
-    async searchNovels(searchTerm: string, pageNo: number): Promise<Plugin.NovelItem[]> {
+    async searchNovels(
+        searchTerm: string,
+        pageNo: number
+    ): Promise<Plugin.NovelItem[]> {
         let novels = [];
 
         // returns list of novels from given page
         const getNovelsFromPage = async (pagenumber: number) => {
             // load page
-            const result = await fetch(
+            const url = this.searchUrl(pagenumber) + `&word=${searchTerm}`;
-                this.searchUrl(pagenumber) + `&word=${searchTerm}`,
+            console.log(url);
-                {headers: this.headers}
+            const result = await fetch(url, { headers: this.headers });
-            );
             const body = await result.text();
             // Cheerio it!
             const cheerioQuery = loadCheerio(body, { decodeEntities: false });
@@ -171,7 +200,7 @@ class Syosetu implements Plugin.PluginBase {
             });
             // return all novels from this page
             return pageNovels;
-        }
+        };
 
         // counter of loaded pages
         // let pagesLoaded = 0;
@@ -181,7 +210,7 @@ class Syosetu implements Plugin.PluginBase {
         //     pagesLoaded++;
         // } while (pagesLoaded < maxPageLoad && isNext); // check if we should load more
 
-        novels = await getNovelsFromPage(1);
+        novels = await getNovelsFromPage(pageNo);
 
         /** Use
          * novels.push(...(await getNovelsFromPage(pageNumber)))
@@ -194,6 +223,62 @@ class Syosetu implements Plugin.PluginBase {
     async fetchImage(url: string): Promise<string | undefined> {
         return fetchFile(url);
     }
+    filters = {
+        ranking: {
+            type: FilterTypes.Picker,
+            label: "Ranked by",
+            options: [
+                { label: "日間", value: "daily" },
+                { label: "週間", value: "weekly" },
+                { label: "月間", value: "monthly" },
+                { label: "四半期", value: "quarter" },
+                { label: "年間", value: "yearly" },
+                { label: "累計", value: "total" },
+            ],
+            value: "total",
+        },
+        genre: {
+            type: FilterTypes.Picker,
+            label: "Ranking Genre",
+            options: [
+                { label: "総ジャンル", value: "" },
+                { label: "異世界転生/転移〔恋愛〕〕", value: "1" },
+                { label: "異世界転生/転移〔ファンタジー〕", value: "2" },
+                { label: "異世界転生/転移〔文芸・SF・その他〕", value: "o" },
+                { label: "異世界〔恋愛〕", value: "101" },
+                { label: "現実世界〔恋愛〕", value: "102" },
+                { label: "ハイファンタジー〔ファンタジー〕", value: "201" },
+                { label: "ローファンタジー〔ファンタジー〕", value: "202" },
+                { label: "純文学〔文芸〕", value: "301" },
+                { label: "ヒューマンドラマ〔文芸〕", value: "302" },
+                { label: "歴史〔文芸〕", value: "303" },
+                { label: "推理〔文芸〕", value: "304" },
+                { label: "ホラー〔文芸〕", value: "305" },
+                { label: "アクション〔文芸〕", value: "306" },
+                { label: "コメディー〔文芸〕", value: "307" },
+                { label: "VRゲーム〔SF〕", value: "401" },
+                { label: "宇宙〔SF〕", value: "402" },
+                { label: "空想科学〔SF〕", value: "403" },
+                { label: "パニック〔SF〕", value: "404" },
+                { label: "童話〔その他〕", value: "9901" },
+                { label: "詩〔その他〕", value: "9902" },
+                { label: "エッセイ〔その他〕", value: "9903" },
+                { label: "その他〔その他〕", value: "9999" },
+            ],
+            value: "",
+        },
+        modifier: {
+            type: FilterTypes.Picker,
+            label: "Modifier",
+            options: [
+                { label: "すべて", value: "total" },
+                { label: "連載中", value: "r" },
+                { label: "完結済", value: "er" },
+                { label: "短編", value: "t" },
+            ],
+            value: "total",
+        },
+    } satisfies Filters;
 }
 
 export default new Syosetu();

test_web/api/plugins.ts

@@ -6,7 +6,7 @@ import { Plugin, isPlugin } from "@typings/plugin";
 import { Filters } from "@libs/filterInputs";
 const root = path.dirname(require?.main?.filename || "");
 
-export const fetchHeaders: Record<string, string> = {}
+export const fetchHeaders: Record<string, string> = {};
 
 export const all_plugins = (): PluginList => {
     const res: PluginList = {};
@@ -48,9 +48,12 @@ const getPlugin = async (
 ): Promise<Plugin.PluginBase | null> => {
     console.log("loading plugin", requirePath);
     const plugin = await require(requirePath).default;
-    console.log(plugin);
+    // console.log(plugin);
-    if (isPlugin(plugin)) return plugin;
+    if (isPlugin(plugin)) {
-    console.log("Not a plugin!");
+        console.log("loaded plugin", plugin.name);
+        return plugin;
+    }
+    console.error("Not a plugin!");
     return null;
 };
 
@@ -59,13 +62,15 @@ export const getFilter = async (pluginRequirePath: string) =>
 
 export const popularNovels = async (
     pluginRequirePath: string,
+    page: number,
     options: Plugin.PopularNovelsOptions<Filters>
-) => (await getPlugin(pluginRequirePath))?.popularNovels(1, options);
+) => (await getPlugin(pluginRequirePath))?.popularNovels(page, options);
 
 export const searchNovels = async (
     pluginRequirePath: string,
+    page: number,
     searchTerm: string
-) => (await getPlugin(pluginRequirePath))?.searchNovels(searchTerm, 1);
+) => (await getPlugin(pluginRequirePath))?.searchNovels(searchTerm, page);
 
 export const parseNovelAndChapters = async (
     pluginRequirePath: string,

test_web/index.html

@@ -9,12 +9,14 @@
     <link rel="stylesheet" href="/static/css/bootstrap.min.css">
     <link rel="stylesheet" href="/static/css/mdb5.css">
     <link rel="stylesheet/less" type="text/css" href="/static/css/index.less" />
+    <link rel="stylesheet/less" type="text/css" href="/static/css/accordion.less" />
     <script src="/static/js/less.js"></script>
     <script src="static/md5Themes/themes.js"></script>
     <script src="/static/js/jquery.min.js"></script>
     <script src="/static/js/html-sanitize.js" defer></script>
     <script src="/static/js/bootstrap.min.js" defer></script>
     <script src="/static/js/mdb5.js" defer></script>
+    <script src="/static/js/accordion.js" defer></script>
     <script src="/static/js/index.js" defer></script>
     <title>Testing plugin</title>
 </head>
@@ -27,6 +29,7 @@
             <div id="search-results">
                 <div id="turnoff-catch"></div>
             </div>
+            <div id="loadedplugin"></div>
         </form>
         <div class="input-group">
             <div class="input-group-append">
@@ -36,7 +39,8 @@
                 <option value="">Any</option>
             </select>
         </div>
-        <button class="btn btn-secondary" id="darkstyletoggle" style="float:left;" onclick="toggleDarkMode(this)">Light mode</div>
+        <button class="btn btn-secondary" id="darkstyletoggle" style="float:left;" onclick="toggleDarkMode(this)">Light
+            mode</div>
             <script>
                 const toggleDarkMode = (btn) => {
                     if (document.body.classList.contains("darkmode")) {
@@ -50,211 +54,50 @@
             </script>
     </nav>
     <div id="test-container">
-        <div class="test-wrapper" id="headerChanger">
+        <main-accordion class="accordion tests-accordion">
-            <div class="form-group">
+            <accordion-box class="accordion-box" id="headerChanger" collapsed>
-                <div class="title">Headers</div>
+                <accordion-header>
-                <div id="headerinfos">
+                    Headers
-                    <div class="headerinfo" data-headername="User-Agent">
+                </accordion-header>
-                        <span class="headername" >User-Agent</span><b>:</b>
+                <accordion-content>
-                        <span class="headervalue"></span>
+                    <div id="headerinfos">
-                    </div>
+                        <div class="headerinfo" data-headername="User-Agent">
-                    <div class="headerinfo">
+                            <span class="headername">User-Agent</span><b>:</b>
-                        <span class="headername">Cookie</span><b>:&nbsp;</b>
+                            <span class="headervalue"></span>
-                        <span class="headervalue" contenteditable="true" ></span>
+                        </div>
-                    </div>
+                        <div class="headerinfo">
-                </div>
+                            <span class="headername">Cookie</span><b>:&nbsp;</b>
-                <button id="addheaderbtn" class="btn-secondary pl-1 pr-1">Add header</button>
+                            <span class="headervalue" contenteditable="true"></span>
-                <button id="copyascode" class="btn-secondary pl-1 pr-1">Copy as code</button>
-                <div id="headersnotcopied">Remember to copy the headers into the plugin file after changing them!</div>
-                <div id="headerscopied" display="none">Copied</div>
-            </div> 
-        </div>
-        <div class="test-wrapper" id="popularNovels">
-            <div class="title">
-                popularNovels
-            </div>
-            <div style="display: inline-block;" class="modal-container">
-                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#filtersModal">
-                    Filters
-                </button>
-                <div class="modal fade" id="filtersModal" tabindex="-1" role="dialog"
-                    aria-labelledby="filtersModalLabel" aria-hidden="true">
-                    <div class="modal-dialog" role="document">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="filterModalLabel">Filters</h5>
-                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
-                            </div>
-                            <div class="modal-body">
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                            </div>
                         </div>
                     </div>
-                </div>
+                    <button id="addheaderbtn" class="btn-secondary pl-1 pr-1">Add header</button>
-            </div>
+                    <button id="copyascode" class="btn-secondary pl-1 pr-1">Copy as code</button>
-            <button type="button" class="btn btn-primary popularNovels-btn">fetch</button>
+                    <div id="headersnotcopied">Remember to copy the headers into the plugin file after changing them!
-            <div class="spinner-border" role="status">
-                <span class="sr-only">Loading...</span>
-            </div>
-            <div class="novel-list">
-            </div>
-        </div>
-        <div class="test-wrapper" id="searchNovels">
-            <div class="title">
-                searchNovels
-                <div class="input-group">
-                    <input type="text" class="form-control" placeholder="searchTerm">
-                    <div class="input-group-append">
-                        <button class="btn btn-primary searchNovels-btn" type="button">search</button>
                     </div>
-                </div>
+                    <div id="headerscopied" display="none">Copied</div>
-                <div class="spinner-border" role="status">
+                </accordion-content>
-                    <span class="sr-only">Loading...</span>
+            </accordion-box>
-                </div>
+            <accordion-box id="popularNovels" collapsed>
-            </div>
+                <accordion-header>
-            <div class="novel-list">
+                    popularNovels
-            </div>
+                </accordion-header>
-        </div>
+                <accordion-content>
-        <div class="test-wrapper" id="parseNovelAndChapters">
+                    <div style="display: inline-block;" class="modal-container">
-            <div class="title">
+                        <button id="filters-btn" type="button" class="btn btn-primary" data-toggle="modal"
-                parseNovelAndChapters
+                            data-target="#filtersModal">
-                <div class="input-group">
+                            Filters
-                    <input type="text" class="form-control" placeholder="novel url" id="parse-novel-url">
-                    <div class="input-group-append">
-                        <button class="btn btn-primary parseNovelAndChapters-btn" type="button"
-                            id="parse-novel-btn">fetch</button>
-                    </div>
-                </div>
-                <div class="spinner-border" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-            </div>
-            <div class="novel-list">
-                <div class="novel-item">
-                </div>
-                <div class="chapter-list-container">
-                    <div class="chapter-list">
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="test-wrapper" id="parseChapter">
-            <div class="title">
-                parseChapter
-                <div class="input-group">
-                    <input type="text" class="form-control" placeholder="chapter url" id="chapter-parse-url">
-                    <div class="input-group-append">
-                        <button class="btn btn-primary parseChapter-btn" type="button"
-                            id="chapter-parse-btn">fetch</button>
-                    </div>
-                </div>
-                <div id="preview-toggler">
-                    <div class="slider-checkbox">
-                        <label>
-                            <input type="checkbox" id="raw-preview-switch" />
-                            <span>Raw</span>
-                        </label>
-                    </div>
-                    <div class="slider-checkbox">
-                        <label>
-                            <input type="checkbox" id="sanitize-preview-html" />
-                            <span>Sanitized HTML</span>
-                        </label>
-                    </div>
-                    <div id="scaled-info"></div>
-                    <div class="modal-container">
-                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#settingsModal">
-                            Preview settings
                         </button>
-                        <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog"
+                        <div class="modal fade" id="filtersModal" tabindex="-1" role="dialog"
-                            aria-labelledby="settingsModalLabel" aria-hidden="true">
+                            aria-labelledby="filtersModalLabel" aria-hidden="true">
                             <div class="modal-dialog" role="document">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
+                                        <h5 class="modal-title" id="filterModalLabel">Filters</h5>
                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                             <span aria-hidden="true">&times;</span>
                                         </button>
                                     </div>
                                     <div class="modal-body">
-                                        <div>
-                                            <label class="filter-label">Preview Size</label>
-                                            <div id="size-input">
-                                                <div>
-                                                    <select id="size-preset">
-                                                        <option value="800,1200">Default</option>
-                                                        <option value="2200,2480">8" Fold</option>
-                                                        <option value="1536,2048">Nexus 9 (Tablet)</option>
-                                                        <option value="1440,2560">Pixel XL</option>
-                                                        <option value="1440,3120">Pixel 6 Pro</option>
-                                                        <option value="1080,2400">Pixel 6</option>
-                                                        <option value="1080,2340">Pixel 5</option>
-                                                        <option value="1440,3040">Pixel 4 XL</option>
-                                                        <option value="1080,2280">Pixel 4</option>
-                                                        <option value="1080,2160">Pixel 3</option>
-                                                        <option value="1080,1920">Pixel 2</option>
-                                                        <option value="768,1280">Nexus 4</option>
-                                                        <option value="720,1280">720p</option>
-                                                        <option value="480,854">480p</option>
-                                                        <option value="480,800">Nexus One</option>
-                                                        <option value="320,480">320p</option>
-                                                    </select>
-                                                    <div class="btn btn-primary" id="load-preset-size">Load preset</div>
-                                                </div>
-                                                <div>
-                                                    <input type="number" id="width-input"
-                                                        style="display:inline-block" />
-                                                    <input type="number" id="height-input"
-                                                        style="display:inline-block" />
-                                                    <div class="btn btn-primary" id="swap-iframe-size">Rotate</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <label class="filter-label">Theme</label>
-                                            <div id="theme-picker">
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <label class="filter-label">Background Color</label>
-                                            <input type="text" id="bgc-input" />
-                                        </div>
-                                        <div>
-                                            <label class="filter-label">Text Color</label>
-                                            <input type="text" id="txt-input" />
-                                        </div>
-                                        <div>
-                                            <label class="filter-label">Text Align</label>
-                                            <select id="ta-input" class="custom-select">
-                                                <option value="left" selected>Left</option>
-                                                <option value="right">Right</option>
-                                                <option value="center">Center</option>
-                                                <option value="justify">Justify</option>
-                                            </select>
-                                        </div>
-                                        <div>
-                                            <label class="filter-label">Font Size</label>
-                                            <input type="number" id="fs-input" />
-                                        </div>
-                                        <div>
-                                            <label class="filter-label">Line Height</label>
-                                            <input step="0.1" type="number" id="lh-input" />
-                                        </div>
-                                        <hr />
-                                        <div>
-                                            <label class="filter-label">Custom CSS</label>
-                                            <textarea rows="5" id="css-ta"></textarea>
-                                        </div>
-                                        <hr />
-                                        <div>
-                                            <label class="filter-label">Custom JS</label>
-                                            <textarea rows="5" id="js-ta"></textarea>
-                                        </div>
-                                        <hr />
                                     </div>
                                     <div class="modal-footer">
                                         <button type="button" class="btn btn-secondary"
@@ -264,30 +107,231 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                    <div class="inline-container fetch-btn">
-                <div class="spinner-border" role="status">
+                        <button type="button" class="btn btn-primary popularNovels-btn">fetch</button>
-                    <span class="sr-only">Loading...</span>
-                </div>
-            </div>
-            <div class="form-group" id="chapter-viewer">
-            </div>
-        </div>
-        <div class="test-wrapper" id="fetchImage">
-            <div class="title">
-                fetchImage
-                <div class="input-group">
-                    <input type="text" class="form-control" placeholder="image url (should be in chapterText)">
-                    <div class="input-group-append">
-                        <button class="btn btn-primary fetchImage-btn" type="button">fetch</button>
                     </div>
-                </div>
+                    <div class="inline-container page-select">
-                <div class="spinner-border" role="status">
+                        <select>
-                    <span class="sr-only">Loading...</span>
+                            <option>1</option>
-                </div>
+                        </select>
-            </div>
+                        <span class="page-the-same-warn"></span>
-            <img src="" style="min-height: 300px; max-width: 450px;" alt="">
+                    </div>
-        </div>
+                    <div class="inline-slider-checkbox">
-    </div>
+                        <label>
+                            <input type="checkbox" id="latest-switch" />
+                            <span>Popular</span>
+                        </label>
+                    </div>
+                    <div class="spinner-border" role="status">
+                        <span class="sr-only">Loading...</span>
+                    </div>
+                    <div class="novel-list">
+                    </div>
+                </accordion-content>
+            </accordion-box>
+            <accordion-box id="searchNovels" collapsed>
+                <accordion-header>
+                    searchNovels
+                </accordion-header>
+                <accordion-content>
+                    <div class="searchbar">
+                        <div class="input-group">
+                            <input type="text" class="form-control" placeholder="searchTerm">
+                            <div class="input-group-append fetch-btn">
+                                <button class="btn btn-primary searchNovels-btn" type="button">search</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="inline-container page-select">
+                        <select>
+                            <option>1</option>
+                        </select>
+                        <span class="page-the-same-warn"></span>
+                    </div>
+                    <div class="spinner-border" role="status">
+                        <span class="sr-only">Loading...</span>
+                    </div>
+                    <div class="novel-list">
+                    </div>
+                </accordion-content>
+            </accordion-box>
+            <accordion-box id="parseNovelAndChapters" collapsed>
+                <accordion-header>
+                    parseNovelAndChapters
+                </accordion-header>
+                <accordion-content>
+                    <div class="input-group">
+                        <input type="text" class="form-control" placeholder="novel url" id="parse-novel-url">
+                        <div class="input-group-append">
+                            <button class="btn btn-primary parseNovelAndChapters-btn" type="button"
+                                id="parse-novel-btn">fetch</button>
+                        </div>
+                    </div>
+                    <div class="spinner-border" role="status">
+                        <span class="sr-only">Loading...</span>
+                    </div>
+                    <div class="parsed-novel-info">
+                        <div class="novel-item">
+                        </div>
+                        <div class="chapter-list-container">
+                            <div class="chapter-list">
+                            </div>
+                        </div>
+                    </div>
+                </accordion-content>
+            </accordion-box>
+            <accordion-box id="parseChapter" collapsed>
+                <accordion-header>
+                    parseChapter
+                </accordion-header>
+                <accordion-content>
+                    <div class="input-group">
+                        <input type="text" class="form-control" placeholder="chapter url" id="chapter-parse-url">
+                        <div class="input-group-append">
+                            <button class="btn btn-primary parseChapter-btn" type="button"
+                                id="chapter-parse-btn">fetch</button>
+                        </div>
+                    </div>
+                    <div id="preview-toggler">
+                        <div class="slider-checkbox">
+                            <label>
+                                <input type="checkbox" id="raw-preview-switch" />
+                                <span>Raw</span>
+                            </label>
+                        </div>
+                        <div class="slider-checkbox">
+                            <label>
+                                <input type="checkbox" id="sanitize-preview-html" />
+                                <span>Sanitized HTML</span>
+                            </label>
+                        </div>
+                        <div id="scaled-info"></div>
+                        <div class="modal-container">
+                            <button type="button" class="btn btn-primary" data-toggle="modal"
+                                data-target="#settingsModal">
+                                Preview settings
+                            </button>
+                            <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog"
+                                aria-labelledby="settingsModalLabel" aria-hidden="true">
+                                <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                <span aria-hidden="true">&times;</span>
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            <div>
+                                                <label class="filter-label">Preview Size</label>
+                                                <div id="size-input">
+                                                    <div>
+                                                        <select id="size-preset">
+                                                            <option value="800,1200">Default</option>
+                                                            <option value="2200,2480">8" Fold</option>
+                                                            <option value="1536,2048">Nexus 9 (Tablet)</option>
+                                                            <option value="1440,2560">Pixel XL</option>
+                                                            <option value="1440,3120">Pixel 6 Pro</option>
+                                                            <option value="1080,2400">Pixel 6</option>
+                                                            <option value="1080,2340">Pixel 5</option>
+                                                            <option value="1440,3040">Pixel 4 XL</option>
+                                                            <option value="1080,2280">Pixel 4</option>
+                                                            <option value="1080,2160">Pixel 3</option>
+                                                            <option value="1080,1920">Pixel 2</option>
+                                                            <option value="768,1280">Nexus 4</option>
+                                                            <option value="720,1280">720p</option>
+                                                            <option value="480,854">480p</option>
+                                                            <option value="480,800">Nexus One</option>
+                                                            <option value="320,480">320p</option>
+                                                        </select>
+                                                        <div class="btn btn-primary" id="load-preset-size">Load preset
+                                                        </div>
+                                                    </div>
+                                                    <div>
+                                                        <input type="number" id="width-input"
+                                                            style="display:inline-block" />
+                                                        <input type="number" id="height-input"
+                                                            style="display:inline-block" />
+                                                        <div class="btn btn-primary" id="swap-iframe-size">Rotate</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <label class="filter-label">Theme</label>
+                                                <div id="theme-picker">
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <label class="filter-label">Background Color</label>
+                                                <input type="text" id="bgc-input" />
+                                            </div>
+                                            <div>
+                                                <label class="filter-label">Text Color</label>
+                                                <input type="text" id="txt-input" />
+                                            </div>
+                                            <div>
+                                                <label class="filter-label">Text Align</label>
+                                                <select id="ta-input" class="custom-select">
+                                                    <option value="left" selected>Left</option>
+                                                    <option value="right">Right</option>
+                                                    <option value="center">Center</option>
+                                                    <option value="justify">Justify</option>
+                                                </select>
+                                            </div>
+                                            <div>
+                                                <label class="filter-label">Font Size</label>
+                                                <input type="number" id="fs-input" />
+                                            </div>
+                                            <div>
+                                                <label class="filter-label">Line Height</label>
+                                                <input step="0.1" type="number" id="lh-input" />
+                                            </div>
+                                            <hr />
+                                            <div>
+                                                <label class="filter-label">Custom CSS</label>
+                                                <textarea rows="5" id="css-ta"></textarea>
+                                            </div>
+                                            <hr />
+                                            <div>
+                                                <label class="filter-label">Custom JS</label>
+                                                <textarea rows="5" id="js-ta"></textarea>
+                                            </div>
+                                            <hr />
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" class="btn btn-secondary"
+                                                data-dismiss="modal">Close</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="spinner-border" role="status">
+                        <span class="sr-only">Loading...</span>
+                    </div>
+                    <div class="form-group" id="chapter-viewer">
+                    </div>
+                </accordion-content>
+            </accordion-box>
+            <accordion-box id="fetchImage" collapsed>
+                <accordion-header>
+                    fetchImage
+                </accordion-header>
+                <accordion-content>
+                    <div class="input-group">
+                        <input type="text" class="form-control" placeholder="image url (should be in chapterText)">
+                        <div class="input-group-append">
+                            <button class="btn btn-primary fetchImage-btn" type="button">fetch</button>
+                        </div>
+                    </div>
+                    <div class="spinner-border" role="status">
+                        <span class="sr-only">Loading...</span>
+                    </div>
+                    <img src="" style="min-height: 300px; max-width: 450px;" alt="">
+                </accordion-content>
+            </accordion-box>
+        </main-accordion>
 </body>
 
 </html>

test_web/static/css/accordion.less

@@ -0,0 +1,72 @@
+:root {
+    --accordion-animation: 0.4s ease;
+}
+
+/** Accordion header button styles */
+accordion-box {
+    display: grid;
+    margin: 0.2rem 1rem;
+    padding: 0.5rem;
+    background-color: aliceblue;
+    &:not([collapsed]) {
+        accordion-header {
+            button {
+                color: #000;
+                background-color: white;
+            }
+
+            button:after {
+                background-image: var(--mdb-accordion-btn-active-icon);
+                transform: var(--mdb-accordion-btn-icon-transform);
+            }
+        }
+        accordion-content {
+            grid-template-rows: 1fr;
+        }
+    }
+    accordion-content {
+        display: grid;
+        grid-template-rows: 0fr;
+        padding-inline: 5px;
+        transition: grid-template-rows var(--accordion-animation);
+        .accordion-animation-content {
+            overflow-y: hidden;
+        }
+    }
+    accordion-header {
+        display: block;
+        button {
+            font-weight: bolder;
+            position: relative;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding: 5px;
+            font-size: 1rem;
+            text-align: left;
+            background-color: white;
+            color: #aaaa;
+            border: 0;
+            border-radius: 0;
+            overflow-anchor: none;
+            &:after {
+                flex-shrink: 0;
+                width: var(--mdb-accordion-btn-icon-width);
+                height: var(--mdb-accordion-btn-icon-width);
+                margin-left: auto;
+                content: "";
+                background-image: var(--mdb-accordion-btn-icon);
+                background-repeat: no-repeat;
+                background-size: var(--mdb-accordion-btn-icon-width);
+                transition: var(--mdb-accordion-btn-icon-transition);
+            }
+            &:hover {
+                z-index: 2;
+            }
+            &:focus {
+                z-index: 3;
+                box-shadow: var(--mdb-accordion-btn-focus-box-shadow);
+            }
+        }
+    }
+}

test_web/static/css/darkmode.less

@@ -12,6 +12,33 @@
 .darkmode {
     color-scheme: dark;
     background-color: var(--main-bg);
+
+    main-accordion {
+        accordion-box {
+            &:not([collapsed]) {
+                accordion-header {
+                    button {
+                        color: white;
+                    }
+                }
+            }
+            accordion-header {
+                button {
+                    color: #cccc;
+                    background-color: var(--main-bg);
+                }
+            }
+            background-color: var(--highlight-bg);
+            color: var(--text-color);
+            input {
+                &[type="text"] {
+                    background-color: var(--main-bg);
+                    border-color: var(--dark-border-color);
+                }
+            }
+        }
+    }
+
     .headerinfo span[contenteditable="true"] {
         border: 1px solid #fff2;
     }
@@ -34,6 +61,15 @@
             color: var(--text-color);
             border-color: var(--dark-border-color);
         }
+        #search-results {
+            color: var(--text-color);
+            background-color: transparent;
+            button {
+                background-color: var(--hr-color);
+                color: var(--dark-label-color);
+                font-weight: bolder;
+            }
+        }
     }
     button.btn-secondary {
         background-color: var(--btn-secondary-color);
@@ -41,15 +77,6 @@
             box-shadow: none;
         }
     }
-    #search-results {
-        color: var(--text-color);
-        background-color: transparent;
-        button {
-            background-color: var(--hr-color);
-            color: var(--dark-label-color);
-            font-weight: bolder;
-        }
-    }
     #darkstyletoggle {
         color: var(--dark-label-color);
     }
@@ -80,16 +107,6 @@
         background-color: var(--main-bg);
         border-color: var(--dark-border-color);
     }
-    .test-wrapper {
-        background-color: var(--highlight-bg);
-        color: var(--text-color);
-        input {
-            &[type="text"] {
-                background-color: var(--main-bg);
-                border-color: var(--dark-border-color);
-            }
-        }
-    }
     .modal-content {
         background-color: var(--main-bg);
         .close {

test_web/static/css/index.less

@@ -6,6 +6,10 @@
     box-sizing: border-box;
 }
 
+#loadedplugin {
+    margin-left: 5px;
+}
+
 .navbar {
     width: 100vw;
     align-items: center;
@@ -18,25 +22,312 @@
     button.btn-secondary {
         padding-inline: 5px;
     }
-}
+    .input-group {
-
+        width: 20rem;
-#search-results {
+    }
-    position: absolute;
+    #search-results {
-    top: calc(100% - 0.5rem);
+        display: none;
-    width: fit-content;
+        position: absolute;
-    max-height: 500%;
+        top: calc(100% - 0.5rem);
-    overflow-y: scroll;
+        width: fit-content;
-    overflow-x: hidden;
+        max-height: 500%;
-    padding: 0.375rem 0;
+        overflow-y: scroll;
-    border-radius: 5px;
+        overflow-x: hidden;
-    background-color: transparent;
+        padding: 0.375rem 0;
-    z-index: 3;
+        border-radius: 5px;
-    button {
+        background-color: transparent;
-        background-color: white;
+        z-index: 3;
-        text-transform: capitalize;
+        button {
+            background-color: white;
+            text-transform: capitalize;
+        }
     }
 }
 
+.btn {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.25rem;
+    &.disabled,
+    &:disabled {
+        opacity: 1;
+    }
+}
+
+@keyframes spinner-border {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+.inline-container {
+    display: inline-block;
+}
+
+#popularNovels {
+    .page-select {
+        display: none;
+    }
+}
+
+#searchNovels {
+    .page-select {
+        display: none;
+    }
+    .searchbar {
+        width: fit-content;
+        display: inline-block;
+    }
+}
+.page-the-same-warn {
+    color: orange;
+}
+
+.fetch-btn button,
+#filters-btn {
+    &:disabled {
+        background-color: gray;
+        box-shadow: none;
+    }
+}
+
+.spinner-border {
+    display: none;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-bottom;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    -webkit-animation: spinner-border 0.75s linear infinite;
+    animation: spinner-border 0.75s linear infinite;
+}
+
+.headerinfo {
+    margin-bottom: 5px;
+    span[contenteditable="true"] {
+        border: 1px solid black;
+        padding: 3px 10px;
+        display: inline;
+    }
+    #headersnotcopied,
+    #headerscopied {
+        font-size: 1.3rem;
+    }
+
+    #headersnotcopied {
+        color: red;
+        display: none;
+    }
+
+    #headerscopied {
+        color: green;
+        display: none;
+    }
+
+    .headereditbutton {
+        margin-left: 5px;
+        border: none;
+        padding-inline: 5px;
+    }
+}
+
+.novel-list {
+    display: grid;
+    overflow-x: scroll;
+    width: 100%;
+    margin-top: 5px;
+    padding-bottom: 15px;
+    padding-left: 5px;
+    grid-auto-flow: column;
+    gap: 5px;
+    align-items: center;
+    .error {
+        color: red;
+        grid-row: 2;
+    }
+}
+.novel-item {
+    display: grid;
+    grid-auto-flow: column;
+    display: grid;
+    gap: 5px;
+}
+.novel-info {
+    display: flex;
+    flex-direction: column;
+}
+.novel-img {
+    display: grid;
+    width: fit-content;
+    justify-content: center;
+    align-content: center;
+    img {
+        max-width: 300px;
+        max-height: 300px;
+    }
+}
+/* comment */
+.info-item {
+    display: grid;
+    min-width: 300px;
+    grid-auto-columns: min-content auto 50px;
+    margin-top: 5px;
+    grid-auto-flow: column;
+    div {
+        display: grid;
+        align-items: center;
+    }
+}
+.parse-novel-btn {
+    width: 85%;
+    margin-inline: auto;
+    margin-top: 5px;
+}
+
+.parsed-novel-info {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 20px;
+    grid-auto-columns: 1.5fr 1fr;
+}
+
+.chapter-list-container {
+    max-height: 400px;
+    overflow-y: scroll;
+}
+
+.chapter-list {
+    column-count: 2;
+}
+
+.chapter-item {
+    margin-top: 5px;
+    break-inside: avoid;
+    display: grid;
+    grid-template-areas: "name btn1 btn2" "date btn1 btn2";
+}
+
+.ci-topleft {
+    grid-area: name;
+}
+
+.ci-bottomleft {
+    grid-area: date;
+}
+
+.ci-btn1 {
+    grid-area: btn1;
+}
+
+.ci-btn2 {
+    grid-area: btn2;
+}
+
+.select-option-text {
+    padding-left: 1rem;
+}
+
+/* Slider checkbox */
+
+.inline-slider-checkbox {
+    display: inline;
+}
+
+.inline-slider-checkbox,
+.slider-checkbox {
+    --ball-width: 15px;
+    --box-margin: 5px;
+    --box-width: calc(2 * var(--ball-width) + var(--box-margin));
+    input {
+        display: none;
+    }
+    label {
+        height: fit-content;
+        width: fit-content;
+        span {
+            position: relative;
+            left: calc(var(--box-margin) + var(--box-width));
+            user-select: none;
+            &::after {
+                transition: 0.2s ease-out;
+                position: absolute;
+                content: "";
+                top: calc((100% - var(--ball-width)) / 2);
+                width: var(--ball-width);
+                height: var(--ball-width);
+                left: calc(-1 * (var(--box-width) + var(--box-margin)) + 2px);
+                border-radius: 50%;
+                display: inline-block;
+                background-color: rgb(0, 60, 255);
+            }
+            &::before {
+                position: absolute;
+                top: 0;
+                left: calc(-1 * var(--box-width) - var(--box-margin));
+                content: "";
+                width: var(--box-width);
+                height: 100%;
+                border-radius: 10px;
+                background-color: red;
+                display: inline-block;
+            }
+        }
+        input:checked ~ span::after {
+            left: calc(-1 * (var(--box-margin) + var(--ball-width) + 3px));
+            background-color: rgb(0, 60, 255);
+        }
+        input:checked ~ span::before {
+            background-color: rgb(0, 255, 0);
+        }
+    }
+}
+
+iframe {
+    margin: 0 auto;
+    border: 1px solid black;
+    background-color: white;
+    display: block;
+    overflow: scroll;
+}
+#preview-toggler {
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+}
+#theme-picker {
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    gap: 10px;
+    justify-content: center;
+    .theme {
+        width: 50px;
+        height: 50px;
+        padding: 5px;
+        word-wrap: break-word;
+        word-break: break-all;
+        border-radius: 50%;
+        border: 1px solid gray;
+        transition-duration: 0.2s;
+        display: grid;
+        text-align: center;
+        justify-content: center;
+        align-content: center;
+        &:hover {
+            border: 1px solid blue;
+            cursor: pointer;
+            transform: translateY(-5px);
+        }
+    }
+}
+#size-input {
+    select {
+        padding: 5px;
+    }
+    & > div:first-child {
+        margin-bottom: 5px;
+    }
+}
 #turnoff-catch {
     width: 100vw;
     height: 100vh;
@@ -218,282 +509,3 @@
         margin-inline: auto;
     }
 }
-
-#test-container {
-    align-items: center;
-    height: max-content;
-    margin-bottom: 100px;
-}
-
-.test-wrapper {
-    margin: 1rem;
-    padding: 0.5rem;
-    background-color: aliceblue;
-}
-
-#popularNovels,
-#headerChanger,
-#searchNovels,
-#parseNovelAndChapters,
-#parseChapter,
-#fetchImage {
-    min-width: 95%;
-    max-width: 95%;
-    margin-inline: auto;
-}
-
-.headerinfo {
-    margin-bottom: 5px;
-    span[contenteditable="true"] {
-        border: 1px solid black;
-        padding: 3px 10px;
-        display: inline;
-    }
-}
-
-#headersnotcopied,
-#headerscopied {
-    font-size: 1.3rem;
-}
-
-#headersnotcopied {
-    color: red;
-    display: none;
-}
-
-#headerscopied {
-    color: green;
-    display: none;
-}
-
-.headereditbutton {
-    margin-left: 5px;
-    border: none;
-    padding-inline: 5px;
-}
-
-#popularNovels,
-#searchNovels {
-    height: 350px;
-    overflow-y: hidden;
-    overflow-x: scroll;
-}
-
-.novel_info {
-    display: grid;
-    grid-auto-flow: row;
-    grid-auto-rows: min-content;
-}
-
-.parse-novel-btn {
-    width: 85%;
-    margin-inline: auto;
-    margin-top: 5px;
-}
-
-#parseNovelAndChapters {
-    height: 380px;
-}
-
-.title {
-    font-weight: bold;
-}
-
-@keyframes spinner-border {
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-.spinner-border {
-    display: none;
-    width: 1rem;
-    height: 1rem;
-    vertical-align: text-bottom;
-    border: 0.25em solid currentColor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    -webkit-animation: spinner-border 0.75s linear infinite;
-    animation: spinner-border 0.75s linear infinite;
-}
-
-.novel-list {
-    display: flex;
-    margin-top: 0.5rem;
-    height: 300px;
-    width: 100%;
-}
-
-.novel-item {
-    display: flex;
-    padding: 0.5rem;
-    img {
-        max-height: 90%;
-    }
-}
-
-.novel-info {
-    width: 16rem;
-}
-/* comment */
-.info-item {
-    display: grid;
-    grid-auto-columns: min-content auto 50px;
-    margin-top: 5px;
-    grid-auto-flow: column;
-    div {
-        display: grid;
-        align-items: center;
-    }
-}
-
-.info-value {
-    width: 10rem;
-    padding-inline: 0.25rem;
-    font-size: 0.65rem;
-    word-wrap: break-word;
-}
-
-.info-copy {
-    display: grid;
-    align-content: center;
-}
-
-.btn {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.25rem;
-    &.disabled,
-    &:disabled {
-        opacity: 1;
-    }
-}
-
-.chapter-list-container {
-    max-height: 95%;
-    overflow-y: scroll;
-}
-
-.chapter-list {
-    column-count: 2;
-}
-
-.chapter-item {
-    display: grid;
-    grid-template-areas: "name btn1 btn2" "date btn1 btn2";
-}
-
-.ci-topleft {
-    grid-area: name;
-}
-
-.ci-bottomleft {
-    grid-area: date;
-}
-
-.ci-btn1 {
-    grid-area: btn1;
-}
-
-.ci-btn2 {
-    grid-area: btn2;
-}
-
-.select-option-text {
-    padding-left: 1rem;
-}
-
-/* Slider checkbox */
-.slider-checkbox {
-    --ball-width: 15px;
-    --box-margin: 5px;
-    --box-width: calc(2 * var(--ball-width) + var(--box-margin));
-    input {
-        display: none;
-    }
-    label {
-        height: fit-content;
-        width: fit-content;
-        span {
-            position: relative;
-            left: calc(var(--box-margin) + var(--box-width));
-            user-select: none;
-            &::after {
-                transition: 0.2s ease-out;
-                position: absolute;
-                content: "";
-                top: calc((100% - var(--ball-width)) / 2);
-                width: var(--ball-width);
-                height: var(--ball-width);
-                left: calc(-1 * (var(--box-width) + var(--box-margin)) + 2px);
-                border-radius: 50%;
-                display: inline-block;
-                background-color: rgb(0, 60, 255);
-            }
-            &::before {
-                position: absolute;
-                top: 0;
-                left: calc(-1 * var(--box-width) - var(--box-margin));
-                content: "";
-                width: var(--box-width);
-                height: 100%;
-                border-radius: 10px;
-                background-color: red;
-                display: inline-block;
-            }
-        }
-        input:checked ~ span::after {
-            left: calc(-1 * (var(--box-margin) + var(--ball-width) + 3px));
-            background-color: rgb(0, 60, 255);
-        }
-        input:checked ~ span::before {
-            background-color: rgb(0, 255, 0);
-        }
-    }
-}
-
-iframe {
-    margin: 0 auto;
-    border: 1px solid black;
-    background-color: white;
-    display: block;
-    overflow: scroll;
-}
-#preview-toggler {
-    display: flex;
-    flex-direction: row;
-    gap: 50px;
-}
-#theme-picker {
-    display: grid;
-    grid-template-columns: repeat(5, auto);
-    gap: 10px;
-    justify-content: center;
-    .theme {
-        width: 50px;
-        height: 50px;
-        padding: 5px;
-        word-wrap: break-word;
-        word-break: break-all;
-        border-radius: 50%;
-        border: 1px solid gray;
-        transition-duration: 0.2s;
-        display: grid;
-        text-align: center;
-        justify-content: center;
-        align-content: center;
-        &:hover {
-            border: 1px solid blue;
-            cursor: pointer;
-            transform: translateY(-5px);
-        }
-    }
-}
-#size-input {
-    select {
-        padding: 5px;
-    }
-    & > div:first-child {
-        margin-bottom: 5px;
-    }
-}

test_web/static/css/index_old.less

@@ -0,0 +1,445 @@
+@import "./darkmode";
+
+#search-results {
+    position: absolute;
+    top: calc(100% - 0.5rem);
+    width: fit-content;
+    max-height: 500%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 0.375rem 0;
+    border-radius: 5px;
+    background-color: transparent;
+    z-index: 3;
+    button {
+        background-color: white;
+        text-transform: capitalize;
+    }
+}
+
+#turnoff-catch {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+}
+
+.input-group {
+    width: 20rem;
+}
+
+.checkbox-groupbox {
+    border: 1px solid rgb(182, 176, 166);
+    padding: 5px;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(3, auto);
+    justify-content: center;
+}
+
+.xcheckbox-groupbox {
+    border: 1px solid rgb(182, 176, 166);
+    padding: 5px;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(3, auto);
+    justify-content: center;
+}
+
+.xcheckbox {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 22px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    /* Hide the browser's default checkbox */
+    input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+    span {
+        position: absolute;
+        top: 6px;
+        left: 5px;
+        height: 20px;
+        width: 20px;
+        background-color: #eee;
+        border: 1px solid white;
+        &::after {
+            content: "";
+            position: absolute;
+            display: none;
+        }
+    }
+    &[data-state="i"] {
+        span {
+            background-color: #2196f3;
+            &::after {
+                left: 6px;
+                top: 3px;
+                width: 6px;
+                height: 10px;
+                border: solid white;
+                border-width: 0 3px 3px 0;
+                -webkit-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
+                transform: rotate(45deg);
+            }
+        }
+        &:hover {
+            span {
+                background-color: #56a3ff;
+            }
+        }
+    }
+
+    &[dara-state="x"] {
+        span {
+            background-color: #f32196;
+            position: absolute;
+            height: 20px;
+            width: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            background-color: red;
+            &::after,
+            &::before {
+                position: absolute;
+                content: "";
+                width: 80%;
+                left: 10%;
+                height: 2px;
+                background-color: white;
+            }
+            &::before {
+                transform: rotate(45deg);
+            }
+
+            &::after {
+                transform: rotate(-45deg);
+            }
+        }
+        &:hover {
+            span {
+                background-color: #ff56a3;
+            }
+            input ~ span {
+                background-color: #ccc;
+            }
+        }
+    }
+    input:checked ~ span::after {
+        display: block;
+    }
+}
+
+.modal-body {
+    padding: 16px 50px 0 50px;
+}
+
+.checkbox-groupbox input {
+    margin-right: 5px;
+}
+
+.SwitchFilter {
+    display: flex;
+    justify-content: center;
+}
+
+.SwitchFilter input {
+    margin-left: 10px;
+}
+
+.PickerFilter select {
+    text-align: center;
+}
+
+.filter-label {
+    display: block;
+    text-align: center;
+    font-weight: bold;
+}
+
+#filtersModal {
+    .modal-body div {
+        display: grid;
+        align-content: center;
+    }
+    hr {
+        margin-bottom: 10px;
+        margin-top: 10px;
+        /* visibility: hidden; */
+    }
+}
+
+#settingsModal {
+    .modal-body > div {
+        display: grid;
+        align-content: center;
+    }
+    input {
+        text-align: center;
+    }
+    textarea {
+        display: block;
+        width: 100%;
+        margin-inline: auto;
+    }
+}
+
+#test-container {
+    align-items: center;
+    height: max-content;
+    margin-bottom: 100px;
+}
+
+.accordion-box {
+    margin: 1rem;
+    padding: 0.5rem;
+    background-color: aliceblue;
+}
+
+#popularNovels,
+#headerChanger,
+#searchNovels,
+#parseNovelAndChapters,
+#parseChapter,
+#fetchImage {
+    min-width: 95%;
+    max-width: 95%;
+    margin-inline: auto;
+}
+
+#popularNovels,
+#searchNovels {
+    overflow-x: scroll;
+}
+
+.novel_info {
+    display: grid;
+    grid-auto-flow: row;
+    grid-auto-rows: min-content;
+}
+
+.parse-novel-btn {
+    width: 85%;
+    margin-inline: auto;
+    margin-top: 5px;
+}
+
+.title {
+    font-weight: bold;
+}
+
+@keyframes spinner-border {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+.spinner-border {
+    display: none;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-bottom;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    -webkit-animation: spinner-border 0.75s linear infinite;
+    animation: spinner-border 0.75s linear infinite;
+}
+
+.novel-list {
+    display: flex;
+    overflow-x: scroll;
+    scrollbar-width: 5px;
+    margin-top: 0.5rem;
+    height: 300px;
+    width: 100%;
+}
+
+.novel-item {
+    display: flex;
+    padding: 0.5rem;
+    img {
+        max-height: 90%;
+    }
+}
+
+.novel-info {
+    width: 16rem;
+}
+/* comment */
+.info-item {
+    display: grid;
+    grid-auto-columns: min-content auto 50px;
+    margin-top: 5px;
+    grid-auto-flow: column;
+    div {
+        display: grid;
+        align-items: center;
+    }
+}
+
+.info-value {
+    width: 10rem;
+    padding-inline: 0.25rem;
+    font-size: 0.65rem;
+    word-wrap: break-word;
+}
+
+.info-copy {
+    display: grid;
+    align-content: center;
+}
+
+.btn {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.25rem;
+    &.disabled,
+    &:disabled {
+        opacity: 1;
+    }
+}
+
+.chapter-list-container {
+    max-height: 95%;
+    overflow-y: scroll;
+}
+
+.chapter-list {
+    column-count: 2;
+}
+
+.chapter-item {
+    display: grid;
+    grid-template-areas: "name btn1 btn2" "date btn1 btn2";
+}
+
+.ci-topleft {
+    grid-area: name;
+}
+
+.ci-bottomleft {
+    grid-area: date;
+}
+
+.ci-btn1 {
+    grid-area: btn1;
+}
+
+.ci-btn2 {
+    grid-area: btn2;
+}
+
+.select-option-text {
+    padding-left: 1rem;
+}
+
+/* Slider checkbox */
+.slider-checkbox {
+    --ball-width: 15px;
+    --box-margin: 5px;
+    --box-width: calc(2 * var(--ball-width) + var(--box-margin));
+    input {
+        display: none;
+    }
+    label {
+        height: fit-content;
+        width: fit-content;
+        span {
+            position: relative;
+            left: calc(var(--box-margin) + var(--box-width));
+            user-select: none;
+            &::after {
+                transition: 0.2s ease-out;
+                position: absolute;
+                content: "";
+                top: calc((100% - var(--ball-width)) / 2);
+                width: var(--ball-width);
+                height: var(--ball-width);
+                left: calc(-1 * (var(--box-width) + var(--box-margin)) + 2px);
+                border-radius: 50%;
+                display: inline-block;
+                background-color: rgb(0, 60, 255);
+            }
+            &::before {
+                position: absolute;
+                top: 0;
+                left: calc(-1 * var(--box-width) - var(--box-margin));
+                content: "";
+                width: var(--box-width);
+                height: 100%;
+                border-radius: 10px;
+                background-color: red;
+                display: inline-block;
+            }
+        }
+        input:checked ~ span::after {
+            left: calc(-1 * (var(--box-margin) + var(--ball-width) + 3px));
+            background-color: rgb(0, 60, 255);
+        }
+        input:checked ~ span::before {
+            background-color: rgb(0, 255, 0);
+        }
+    }
+}
+
+iframe {
+    margin: 0 auto;
+    border: 1px solid black;
+    background-color: white;
+    display: block;
+    overflow: scroll;
+}
+#preview-toggler {
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+}
+#theme-picker {
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    gap: 10px;
+    justify-content: center;
+    .theme {
+        width: 50px;
+        height: 50px;
+        padding: 5px;
+        word-wrap: break-word;
+        word-break: break-all;
+        border-radius: 50%;
+        border: 1px solid gray;
+        transition-duration: 0.2s;
+        display: grid;
+        text-align: center;
+        justify-content: center;
+        align-content: center;
+        &:hover {
+            border: 1px solid blue;
+            cursor: pointer;
+            transform: translateY(-5px);
+        }
+    }
+}
+#size-input {
+    select {
+        padding: 5px;
+    }
+    & > div:first-child {
+        margin-bottom: 5px;
+    }
+}

test_web/static/js/accordion.js

@@ -0,0 +1,92 @@
+/** @ts-check */
+
+class AccordionContent extends HTMLElement {
+    constructor() {
+        super();
+        this.gridElement = document.createElement("div");
+    }
+    get content() {
+        return this.gridElement;
+    }
+    connectedCallback() {
+        // create a div that'll animate the collapsing
+        this.gridElement.append(...Array.from(this.childNodes));
+        this.gridElement.classList.add("accordion-animation-content");
+        this.innerHTML = "";
+        this.append(this.gridElement);
+    }
+}
+
+class AccordionHeader extends HTMLElement {
+    constructor() {
+        super();
+        console.log("contructor?");
+        this.btn = document.createElement("button");
+    }
+    get html() {
+        return this.btn.innerHTML;
+    }
+    set html(val) {
+        this.btn.innerHTML = val;
+    }
+    get text() {
+        return this.btn.innerText;
+    }
+    set text(val) {
+        this.btn.innerText = val;
+    }
+    get parentBox() {
+        return this.parentElement;
+    }
+    connectedCallback() {
+        console.log("I AM ON THE SCREEN, DO YOUR FUCKING JOB");
+        const childNodes = Array.from(this.childNodes);
+        this.innerHTML = "";
+        this.btn.append(...childNodes);
+        this.append(this.btn);
+        this.btn.addEventListener("click", this._btnClicked.bind(this));
+    }
+    _btnClicked() {
+        this.parentBox?.toggle();
+    }
+}
+
+class AccordionBox extends HTMLElement {
+    constructor() {
+        super();
+    }
+    get collapsed() {
+        return this.hasAttribute("collapsed");
+    }
+    set collapsed(val) {
+        if (val) {
+            this.setAttribute("collapsed", "");
+        } else {
+            this.removeAttribute("collapsed");
+        }
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+}
+
+class Accordion extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+window.customElements.define("main-accordion", Accordion);
+window.customElements.define("accordion-box", AccordionBox);
+window.customElements.define("accordion-header", AccordionHeader);
+window.customElements.define("accordion-content", AccordionContent);
+
+// Export types for use in index.js
+const module = {};
+
+module.exports = {
+    AccordionBox,
+    Accordion,
+    AccordionContent,
+    AccordionHeader,
+};

test_web/static/js/types.d.ts

@@ -1,4 +1,5 @@
 interface Window {
     themes: Record<string, ThemeType>;
     sanitizeChapterText(html: string, options?: Options);
+    encodeHTML5(html: string, options?: Options);
 }

tswatch.ts

@@ -0,0 +1,18 @@
+import { TscWatchClient } from "tsc-watch/client";
+
+const watch = new TscWatchClient();
+
+let port = Number(process.argv[2]);
+if (!port) {
+    console.log(`Port not specified! Setting default 3000!
+Run \`npm start -- <port>\` to change it
+`);
+    port = 3000;
+}
+
+watch.start("--onSuccess", `node ./.js/index.js ${port}`);
+
+try {
+} catch (e) {
+    watch.kill(); // Fatal error, kill the compiler instance.
+}