From e1207c172a89f6578411b39813575d26ce90ef27 Mon Sep 17 00:00:00 2001 From: Marcin Majewski Date: Sun, 4 Feb 2024 17:39:07 +0100 Subject: [PATCH] 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 | 85 +- libs/fetch.ts | 39 +- package.json | 2 +- plugins/english/nobleMTL.ts | 26 +- plugins/japanese/Syosetu.ts | 165 +- test_web/api/plugins.ts | 17 +- test_web/index.html | 478 ++--- test_web/static/css/accordion.less | 72 + test_web/static/css/darkmode.less | 55 +- test_web/static/css/index.less | 602 +++--- test_web/static/css/index_old.less | 445 +++++ test_web/static/js/accordion.js | 92 + test_web/static/js/index.js | 2799 +++++++++++++++------------- test_web/static/js/index_old.js | 1315 +++++++++++++ test_web/static/js/types.d.ts | 1 + tswatch.ts | 18 + 16 files changed, 4339 insertions(+), 1872 deletions(-) create mode 100644 test_web/static/css/accordion.less create mode 100644 test_web/static/css/index_old.less create mode 100644 test_web/static/js/accordion.js create mode 100644 test_web/static/js/index_old.js create mode 100644 tswatch.ts diff --git a/index.ts b/index.ts index 29d14e1..89f47b6 100644 --- a/index.ts +++ b/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( - req.body["pluginRequirePath"], - { showLatestNovels, filters } - ); - res.json(novels); + const defaultFilters = await pluginApi.getFilter(requirePath); + const filters = showLatestNovels + ? defaultFilters + : req.body["filters"] || defaultFilters; + 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( - req.body["pluginRequirePath"], - req.body["searchTerm"] - ); - res.json(novels); + const page = parseInt(req.body["page"]) || 1; + try { + const novels = await pluginApi.searchNovels( + req.body["pluginRequirePath"], + page, + req.body["searchTerm"] + ); + res.json(novels); + } catch (err) { + res.json({ error: err }); + } }); app.post("/parseNovelAndChapters/", async (req, res) => { - const sourceNovel = await pluginApi.parseNovelAndChapters( - req.body["pluginRequirePath"], - req.body["novelUrl"] - ); - res.json(sourceNovel); + try { + const sourceNovel = await pluginApi.parseNovelAndChapters( + req.body["pluginRequirePath"], + req.body["novelUrl"] + ); + res.json(sourceNovel); + } catch (err) { + res.json({ error: err }); + } }); app.post("/parseChapter/", async (req, res) => { - const chapterText = await pluginApi.parseChapter( - req.body["pluginRequirePath"], - req.body["chapterUrl"] - ); - res.send(chapterText); + try { + const chapterText = await pluginApi.parseChapter( + req.body["pluginRequirePath"], + req.body["chapterUrl"] + ); + res.send(chapterText); + } catch (err) { + res.json({ error: err }); + } }); app.post("/fetchImage/", async (req, res) => { - const base64 = await pluginApi.fetchImage( - req.body["pluginRequirePath"], - req.body["url"] - ); - res.send(base64); + try { + const base64 = await pluginApi.fetchImage( + req.body["pluginRequirePath"], + req.body["url"] + ); + res.send(base64); + } catch (err) { + res.json({ error: err }); + } }); app.get("/", (req, res) => { diff --git a/libs/fetch.ts b/libs/fetch.ts index 4a58abb..d829019 100644 --- a/libs/fetch.ts +++ b/libs/fetch.ts @@ -1,8 +1,13 @@ type FetchInit = { - headers?: Record | Headers; + headers?: Record | Headers; method?: string; body?: FormData | string; - [x: string]: string | Record | undefined | FormData | Headers; + [x: string]: + | string + | Record + | undefined + | FormData + | Headers; }; const makeInit = async (init?: FetchInit) => { @@ -31,21 +36,19 @@ const makeInit = async (init?: FetchInit) => { }; } return init; -} +}; /** * Fetch with (Android) User Agent - * @param url - * @param init + * @param url + * @param init * @returns response as normal fetch */ -export async function fetchApi( - url: string, - init?: FetchInit -) { +export async function fetchApi(url: string, init?: FetchInit) { init = await makeInit(init); - console.log(url, init); - return await fetch(url, init); + // console.log(init.headers); + // 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); - if (!res.ok) return ''; + const res = await fetch(url, init as RequestInit); + 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 { init = await makeInit(init); console.log(url, init); try { - const res = await fetch(url, init); - if (!res.ok) return ''; + const res = await fetch(url, init as RequestInit); + if (!res.ok) return ""; const arrayBuffer = await res.arrayBuffer(); const decoder = new TextDecoder(encoding); return decoder.decode(arrayBuffer); } catch (e) { - return ''; + return ""; } }; diff --git a/package.json b/package.json index 001b213..11c79c3 100644 --- a/package.json +++ b/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", diff --git a/plugins/english/nobleMTL.ts b/plugins/english/nobleMTL.ts index bfdc506..bb7c295 100644 --- a/plugins/english/nobleMTL.ts +++ b/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, }); }); diff --git a/plugins/japanese/Syosetu.ts b/plugins/japanese/Syosetu.ts index 0ba973a..5bf1abc 100644 --- a/plugins/japanese/Syosetu.ts +++ b/plugins/japanese/Syosetu.ts @@ -1,8 +1,9 @@ -import { load as loadCheerio } from "cheerio"; -import { fetchFile } from "@libs/fetch"; +import { load, load as loadCheerio } from "cheerio"; +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.0.0"; + version = "1.1.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): Promise { + async popularNovels( + pageNo: number, + { filters }: Plugin.PopularNovelsOptions + ): Promise { const getNovelsFromPage = async (pagenumber: number) => { // load page + let url = this.site; - const result = await fetch(this.searchUrl(pagenumber), {headers: this.headers}); - const body = await result.text(); - // Cheerio it! - const cheerioQuery = loadCheerio(body, { decodeEntities: false }); - let pageNovels: Plugin.NovelItem[] = []; - // find class=searchkekka_box - cheerioQuery(".searchkekka_box").each(function (i, e) { - // get div with link and name - const novelDIV = cheerioQuery(this).find(".novel_h"); - // get link element - const novelA = novelDIV.children()[0]; - // add new novel to array - pageNovels.push({ - name: novelDIV.text(), // get the name - url: novelA.attribs.href, // get last part of the link - cover: defaultCover, - }); + if (!filters.genre.value) { + url += `rank/list/type/${filters.ranking.value}_${filters.modifier.value}/?p=${pagenumber}`; + } else { + url += `rank/${ + filters.genre.value.length === 1 + ? "isekailist" + : "genrelist" + }/type/${filters.ranking.value}_${filters.genre.value}${ + filters.modifier.value === "total" + ? "" + : `_${filters.modifier.value}` + }/?p=${pagenumber}`; + } + const html = await (await fetchApi(url)).text(); + + 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 { 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 { - 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 - .html() || ''; + let chapterText = + cheerioQuery("#novel_honbun") // get chapter text + .html() || ""; return chapterText; } - async searchNovels(searchTerm: string, pageNo: number): Promise { + async searchNovels( + searchTerm: string, + pageNo: number + ): Promise { let novels = []; // returns list of novels from given page const getNovelsFromPage = async (pagenumber: number) => { // load page - const result = await fetch( - this.searchUrl(pagenumber) + `&word=${searchTerm}`, - {headers: this.headers} - ); + const url = this.searchUrl(pagenumber) + `&word=${searchTerm}`; + console.log(url); + 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 { 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(); diff --git a/test_web/api/plugins.ts b/test_web/api/plugins.ts index 49d4520..3976d09 100644 --- a/test_web/api/plugins.ts +++ b/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 = {} +export const fetchHeaders: Record = {}; export const all_plugins = (): PluginList => { const res: PluginList = {}; @@ -48,9 +48,12 @@ const getPlugin = async ( ): Promise => { console.log("loading plugin", requirePath); const plugin = await require(requirePath).default; - console.log(plugin); - if (isPlugin(plugin)) return plugin; - console.log("Not a plugin!"); + // console.log(plugin); + if (isPlugin(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 -) => (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, diff --git a/test_web/index.html b/test_web/index.html index 2f97299..a14d646 100644 --- a/test_web/index.html +++ b/test_web/index.html @@ -9,12 +9,14 @@ + + Testing plugin @@ -27,6 +29,7 @@
+
@@ -36,7 +39,8 @@
-
+ - -
Remember to copy the headers into the plugin file after changing them!
-
Copied
- - -
-
- popularNovels -
-
- - -
-
- searchNovels -
- -
- + + +
Remember to copy the headers into the plugin file after changing them!
-
- -
-
-
-
-
-
- parseNovelAndChapters -
- -
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
- parseChapter -
- -
- -
-
-
-
- -
-
- -
-
-
- - -
-
- fetchImage -
- -
- +
+
-
- -
- -
-
+
+ + +
+
+ +
+ +
+
+ + + + + searchNovels + + +
+
+ +
+ +
+
+
+
+ + +
+ +
+
+ + + + + parseNovelAndChapters + + +
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+ + + + + parseChapter + + +
+ +
+ +
+
+
+
+ +
+
+ +
+
+
+ + +
+
+ +
+
+ + + + + fetchImage + + +
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/test_web/static/css/accordion.less b/test_web/static/css/accordion.less new file mode 100644 index 0000000..907532e --- /dev/null +++ b/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); + } + } + } +} diff --git a/test_web/static/css/darkmode.less b/test_web/static/css/darkmode.less index e749e79..2e74d09 100644 --- a/test_web/static/css/darkmode.less +++ b/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 { diff --git a/test_web/static/css/index.less b/test_web/static/css/index.less index 13ddabd..da24637 100644 --- a/test_web/static/css/index.less +++ b/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; } -} - -#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; + .input-group { + width: 20rem; + } + #search-results { + display: none; + 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; + } } } +.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; - } -} diff --git a/test_web/static/css/index_old.less b/test_web/static/css/index_old.less new file mode 100644 index 0000000..a3cec91 --- /dev/null +++ b/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; + } +} diff --git a/test_web/static/js/accordion.js b/test_web/static/js/accordion.js new file mode 100644 index 0000000..9cd063a --- /dev/null +++ b/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, +}; diff --git a/test_web/static/js/index.js b/test_web/static/js/index.js index b24804e..e938800 100644 --- a/test_web/static/js/index.js +++ b/test_web/static/js/index.js @@ -1,1247 +1,1552 @@ -// @ts-check -/* Imports */ -/** @typedef {import("@libs/filterInputs").Filters} Filters */ -/** @typedef {import("@typings/types").PluginList} PluginList */ -/** @typedef {import("@typings/plugin").Plugin.PluginItem} PluginItem */ -/** @typedef {import("@typings/plugin").Plugin.ChapterItem} ChapterItem */ -/** @typedef {import("@typings/plugin").Plugin.NovelItem} NovelItem */ -/** @typedef {import("@typings/plugin").Plugin.SourceNovel} SourceNovel */ -/** @typedef {import("@libs/filterInputs").FilterTypes} FilterTypes */ -/** @typedef {import("@libs/filterInputs").FilterTypes.CheckboxGroup} CheckboxGroup */ -/** - * @template {FilterTypes} T - * @typedef {import("@libs/filterInputs").ValueOfFilter} ValueOfFilter */ -/** - * @template {Filters} T - * @typedef {import("@libs/filterInputs").FilterToValues} FilterToValues - */ -/** @typedef {{backgroundColor:string, textColor:string}} Theme */ -/** @typedef {Theme[]} Themes */ - -/// - -const state = { - /** @type {PluginList} */ - all_plugins: {}, - /** @type {Array} */ - plugin_infos: [], - /** @type {{language: string, keyword:null|string}} */ - plugin_search: { - language: "", - keyword: null, - }, - /** @type {Array} */ - plugins_in_search: [], - /** @type {PluginWrapper | undefined} */ - current_plugin: undefined, - /** @type {FilterToValues} */ - filterValues: {}, -}; - -/** @type {JQuery}*/ -const language_selection = $("#language"); -/** @type {JQuery} */ -const plugin_search = $("#plugin"); -/** @type {JQuery} */ -const search_results = $("#search-results"); - -const getHeaders = () => { - /** @type {Record} */ - const headers = {}; - const els = document.querySelectorAll(".headerinfo").forEach((el) => { - /** @type {HTMLSpanElement | null} */ - const nameSpan = el.querySelector(".headername"); - /** @type {HTMLSpanElement | null} */ - const valueSpan = el.querySelector(".headervalue"); - if (nameSpan && valueSpan) { - const { innerText: name } = nameSpan; - const { innerText: value } = valueSpan; - if (typeof name === "string" && typeof value === "string" && value.trim()) { - headers[name] = value.trim(); - } - } - }); - return headers; -}; - -/** - * - * @param {string} path - * @param {RequestInit | undefined} init - */ -const fetchFromAPI = async (path, init = undefined) => { - if (init) { - init.headers = { - ...init.headers, - "x-custom-headers": JSON.stringify(getHeaders()), - }; - } - return fetch(path, init); -}; - -const loadPluginsIntoSearchBar = () => { - const { language, keyword } = state.plugin_search; - const plugins = language ? state.all_plugins[language] : state.plugin_infos; - state.plugins_in_search = keyword - ? plugins.filter((p) => - keyword.charAt(0) === "-" - ? !p.name - .toLowerCase() - .includes(keyword.toLowerCase().substring(1)) - : p.name.toLowerCase().includes(keyword.toLowerCase()) - ) - : plugins; -}; - -fetchFromAPI("/all_plugins") - .then((res) => res.json()) - .then((/** @type {PluginList} */ all) => { - state.all_plugins = all; - for (let lang in all) { - language_selection.append(``); - state.plugin_infos = state.plugin_infos.concat(all[lang]); - } - }) - .then((_) => { - loadPluginsIntoSearchBar(); - }); - -language_selection.on("change", (e) => { - state.plugin_search.language = e.target.value; - loadPluginsIntoSearchBar(); -}); - -const display_search = () => { - search_results.hide(); - search_results.empty(); - if (!$("#turnoff-catch").length) { - const turnoff_catch = $("
").attr("id", "turnoff-catch"); - $("body").append(turnoff_catch); - turnoff_catch.on("click", () => { - search_results.hide(); - turnoff_catch.remove(); - }); - } - state.plugins_in_search.forEach((plugin) => { - // search_results.append(` - //
- // - //
- // `); - - /** @type {JQuery} */ - const img = $("", { src: `./icons/${plugin.icon}` }); - img.css({ - height: "100%", - "object-fit": "contains", - "margin-right": "10px", - }); - /** @type {JQuery} */ - const btn = $("