From 4aff683df3d8872e28a04de263f2d4900df2949d Mon Sep 17 00:00:00 2001 From: defaultkavy Date: Fri, 17 May 2024 03:30:49 +0800 Subject: [PATCH] init --- .gitignore | 3 + README.md | 6 + dist/assets/index-BmY6B-Pf.js | 1 + dist/assets/index-Dna-ZQnZ.css | 1 + dist/index.html | 13 ++ index.html | 13 ++ index.scss | 34 ++++ package.json | 18 ++ src/component/PostGrid/$PostGrid.ts | 9 + src/component/PostGrid/_$PostGrid.scss | 2 + src/component/PostTile/$PostTile.ts | 51 ++++++ src/component/PostTile/_$PostTile.scss | 33 ++++ src/index.d.ts | 51 ++++++ src/main.ts | 27 +++ src/route/home/$home.ts | 46 +++++ src/route/posts/$post.ts | 136 ++++++++++++++ src/route/posts/_$post.scss | 141 +++++++++++++++ src/structure/Booru.ts | 11 ++ src/structure/Commentary.ts | 64 +++++++ src/structure/Post.ts | 241 +++++++++++++++++++++++++ src/structure/Tag.ts | 74 ++++++++ src/structure/User.ts | 118 ++++++++++++ src/structure/Util.ts | 50 +++++ tsconfig.json | 28 +++ 24 files changed, 1171 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 dist/assets/index-BmY6B-Pf.js create mode 100644 dist/assets/index-Dna-ZQnZ.css create mode 100644 dist/index.html create mode 100644 index.html create mode 100644 index.scss create mode 100644 package.json create mode 100644 src/component/PostGrid/$PostGrid.ts create mode 100644 src/component/PostGrid/_$PostGrid.scss create mode 100644 src/component/PostTile/$PostTile.ts create mode 100644 src/component/PostTile/_$PostTile.scss create mode 100644 src/index.d.ts create mode 100644 src/main.ts create mode 100644 src/route/home/$home.ts create mode 100644 src/route/posts/$post.ts create mode 100644 src/route/posts/_$post.scss create mode 100644 src/structure/Booru.ts create mode 100644 src/structure/Commentary.ts create mode 100644 src/structure/Post.ts create mode 100644 src/structure/Tag.ts create mode 100644 src/structure/User.ts create mode 100644 src/structure/Util.ts create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ae748ab --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +.vscode +bun.lockb \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..4116251 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# Danbooru Viewer +A modern style viewer for [Danbooru](https://danbooru.donmai.us). + +## Usage +- Click this [link](https://danbooru.defaultkavy.com). +- Replace `danbooru.donmai.us` to `danbooru.defaultkavy.com` without changing pathname and url parameters, will directly open the same page on Danbooru Viewer. \ No newline at end of file diff --git a/dist/assets/index-BmY6B-Pf.js b/dist/assets/index-BmY6B-Pf.js new file mode 100644 index 0000000..ce8d38a --- /dev/null +++ b/dist/assets/index-BmY6B-Pf.js @@ -0,0 +1 @@ +var vt=Object.defineProperty;var wt=(i,t,e)=>t in i?vt(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var c=(i,t,e)=>(wt(i,typeof t!="symbol"?t+"":t,e),e),K=(i,t,e)=>{if(!t.has(i))throw TypeError("Cannot "+e)};var Q=(i,t,e)=>(K(i,t,"read from private field"),e?e.call(i):t.get(i)),Z=(i,t,e)=>{if(t.has(i))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(i):t.set(i,e)},tt=(i,t,e,s)=>(K(i,t,"write to private field"),s?s.call(i,e):t.set(i,e),e);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))s(r);new MutationObserver(r=>{for(const n of r)if(n.type==="childList")for(const h of n.addedNodes)h.tagName==="LINK"&&h.rel==="modulepreload"&&s(h)}).observe(document,{childList:!0,subtree:!0});function e(r){const n={};return r.integrity&&(n.integrity=r.integrity),r.referrerPolicy&&(n.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?n.credentials="include":r.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(r){if(r.ep)return;r.ep=!0;const n=e(r);fetch(r.href,n)}})();class M{constructor(){c(this,"__hidden",!1);c(this,"domEvents",{});c(this,"parent")}on(t,e,s){this.domEvents[t]||(this.domEvents[t]=new Map);const r=n=>e(n,this);return this.domEvents[t].set(e,r),this.dom.addEventListener(t,r,s),this}off(t,e,s){var n;const r=(n=this.domEvents[t])==null?void 0:n.get(e);return r&&this.dom.removeEventListener(t,r,s),this}once(t,e,s){const r=n=>{this.dom.removeEventListener(t,r,s),e(n,this)};return this.dom.addEventListener(t,r,s),this}hide(t,e=!0){return b.fluent(this,arguments,()=>this.__hidden,()=>{var s;if(t!==void 0)return t instanceof O?(this.__hidden=t.value,t.use(this,"hide")):this.__hidden=t,e&&((s=this.parent)==null||s.children.render()),this})}remove(){var t;return(t=this.parent)==null||t.children.remove(this).render(),this}replace(t){var e;return(e=this.parent)==null||e.children.replace(this,t).render(),this}contains(t){return t?t instanceof M?this.dom.contains(t.dom):t instanceof EventTarget?this.dom.contains(b(t).dom):this.dom.contains(t):!1}self(t){return t(this),this}inDOM(){return document.contains(this.dom)}isElement(){return this instanceof T}}class T extends M{constructor(e,s){super();c(this,"dom");c(this,"static_classes",new Set);this.dom=this.createDom(e,s),this.dom.$=this,this.setOptions(s)}createDom(e,s){return s!=null&&s.dom?s.dom:e==="svg"?document.createElementNS("http://www.w3.org/2000/svg","svg"):document.createElement(e)}setOptions(e){return this.id(e==null?void 0:e.id),e&&e.class&&this.class(...e.class),this}id(e){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",e))}class(...e){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(s=>this.static_classes.has(s)??this.dom.classList.remove(s)),this.dom.classList.add(...e.detype())})}addClass(...e){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...e.detype())})}removeClass(...e){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...e.detype())})}staticClass(...e){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...e)})}addStaticClass(...e){return $.fluent(this,arguments,()=>this,()=>{e.detype().forEach(s=>this.static_classes.add(s)),this.addClass(...e)})}removeStaticClass(...e){return $.fluent(this,arguments,()=>this,()=>{e.detype().forEach(s=>this.static_classes.delete(s)),this.removeClass(...e)})}css(e){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,e)})}attribute(e,s){return arguments.length?arguments.length===1?e===void 0?null:this.dom.getAttribute(e):arguments.length===2?e?(s===null?this.dom.removeAttribute(e):s!==void 0&&this.dom.setAttribute(e,`${s}`),this):this:this:null}tabIndex(e){return $.fluent(this,arguments,()=>this.dom.tabIndex,()=>$.set(this.dom,"tabIndex",e))}focus(){return this.dom.focus(),this}blur(){return this.dom.blur(),this}animate(e,s,r){const n=this.dom.animate(e,s);return r&&r(n),this}getAnimations(e){return this.dom.getAnimations(e)}get dataset(){return this.dom.dataset}domRect(e){const s=this.dom.getBoundingClientRect();if(!e)return s;const r=e instanceof T?e.dom.getBoundingClientRect():e;return{...s,top:s.top-r.top,left:s.left-r.left,right:s.right-r.left,bottom:s.bottom-r.top,x:s.x-r.x,y:s.y-r.y}}}class A extends M{constructor(e){super();c(this,"dom");this.dom=e,this.dom.$=this}domRect(e){const s={bottom:innerHeight,height:innerHeight,left:0,right:innerWidth,top:0,width:innerWidth,x:0,y:0};if(!e)return s;const r=e instanceof T?e.dom.getBoundingClientRect():e;return{...s,top:s.top-r.top,left:s.left-r.left,right:s.right-r.left,bottom:s.bottom-r.top,x:s.x-r.x,y:s.y-r.y}}static from(e){return e.$ instanceof A?e.$:new A(e)}}class G extends M{constructor(e){super();c(this,"dom");this.dom=new Text(e),this.dom.$=this}content(e){return $.fluent(this,arguments,()=>this.dom.textContent,()=>$.set(this.dom,"textContent",e))}}class bt{constructor(t){c(this,"$container");c(this,"$elementList",new Set);this.$container=t}add(t){if(typeof t=="string"){const e=new G(t);this.$elementList.add(e),e.parent=this.$container}else this.$elementList.add(t),t.parent=this.$container}remove(t){return this.$elementList.has(t)?(this.$elementList.delete(t),t.parent=void 0,this):this}removeAll(t=!0){this.$elementList.forEach(e=>this.remove(e)),t&&this.render()}replace(t,e){const s=this.array;return s.splice(s.indexOf(t),1,e),t.remove(),this.$elementList.clear(),s.forEach(r=>this.$elementList.add(r)),this}render(){const[t,e]=[this.array.map(r=>r.dom),Array.from(this.dom.childNodes)],s=[];for(;e.length||t.length;){const[r,n]=[e.at(0),t.at(0)];n?r?n!==r?(n.$.__hidden||(this.dom.insertBefore(n,r),s.push(n)),t.shift()):(n.$.__hidden&&this.dom.removeChild(n),t.shift(),e.shift()):(n.$.__hidden||this.dom.append(n),t.shift()):(r&&!s.includes(r)&&r.remove(),e.shift())}}get array(){return[...this.$elementList.values()]}get dom(){return this.$container.dom}}class O{constructor(t,e){c(this,"_value");c(this,"attributes",new Map);c(this,"linkStates",new Set);c(this,"options",{});this.set(t),e&&(this.options=e)}set(t){this._value=t,t instanceof O&&t.linkStates.add(this),this.update(),this.linkStates.forEach(e=>e.update())}update(){for(const[t,e]of this.attributes.entries())for(const s of e)t[s]instanceof Function?this.options.format?t[s](this.options.format(this.value)):t[s](this.value):s in t&&(t[s]=this.value)}toString(){return this.options.format?this.options.format(this.value):this.value instanceof Object?JSON.stringify(this.toJSON()):`${this.value}`}use(t,e){const s=this.attributes.get(t);s?s.add(e):this.attributes.set(t,new Set().add(e))}toJSON(){return this.value instanceof O?this.value.toJSON():this.value instanceof Object?O.toJSON(this.value):this.toString()}static toJSON(t){const e={};for(let[s,r]of Object.entries(t))r instanceof O?r=r.toJSON():r instanceof Object&&O.toJSON(r),Object.assign(e,{[s]:r});return e}get value(){return this._value instanceof O?this._value.value:this._value}}class V extends T{constructor(t,e){super(t,e)}autocapitalize(t){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",t))}innerText(t){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",t))}title(t){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",t))}dir(t){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",t))}translate(t){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",t))}popover(t){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",t))}spellcheck(t){return $.fluent(this,arguments,()=>this.dom.spellcheck,()=>$.set(this.dom,"spellcheck",t))}inert(t){return $.fluent(this,arguments,()=>this.dom.inert,()=>$.set(this.dom,"inert",t))}lang(t){return $.fluent(this,arguments,()=>this.dom.lang,()=>$.set(this.dom,"lang",t))}draggable(t){return $.fluent(this,arguments,()=>this.dom.draggable,()=>$.set(this.dom,"draggable",t))}hidden(t){return $.fluent(this,arguments,()=>this.dom.hidden,()=>$.set(this.dom,"hidden",t))}click(){return this.dom.click(),this}attachInternals(){return this.dom.attachInternals()}hidePopover(){return this.dom.hidePopover(),this}showPopover(){return this.dom.showPopover(),this}togglePopover(){return this.dom.togglePopover(),this}get accessKeyLabel(){return this.dom.accessKeyLabel}get offsetHeight(){return this.dom.offsetHeight}get offsetLeft(){return this.dom.offsetLeft}get offsetParent(){return $(this.dom.offsetParent)}get offsetTop(){return this.dom.offsetTop}get offsetWidth(){return this.dom.offsetWidth}}class f extends V{constructor(e,s){super(e,s);c(this,"children",new bt(this))}content(e){return $.fluent(this,arguments,()=>this,()=>{this.children.removeAll(!1),this.insert(e)})}insert(e){return $.fluent(this,arguments,()=>this,()=>{e instanceof Function&&(e=e(this)),e=$.orArrayResolve(e);for(const s of e)if(s!=null)if(s instanceof Array)this.insert(s);else if(s instanceof O){const r=new G(s.toString());s.use(r,"content"),this.children.add(r)}else this.children.add(s);this.children.render()})}clear(){return this.children.removeAll(),this}$(e){return $(this.dom.querySelector(e))}$all(e){return Array.from(this.dom.querySelectorAll(e)).map(s=>$(s))}get scrollHeight(){return this.dom.scrollHeight}get scrollWidth(){return this.dom.scrollWidth}scrollTop(e){return $.fluent(this,arguments,()=>this.dom.scrollTop,()=>$.set(this.dom,"scrollTop",e))}scrollLeft(e){return $.fluent(this,arguments,()=>this.dom.scrollLeft,()=>$.set(this.dom,"scrollLeft",e))}}class _t extends f{constructor(t){super("a",t),this.dom.addEventListener("click",e=>{$.anchorPreventDefault&&e.preventDefault(),$.anchorHandler&&this.href()&&$.anchorHandler(this,e)})}href(t){return $.fluent(this,arguments,()=>this.dom.href,()=>{t&&(this.dom.href=t)})}target(t){return $.fluent(this,arguments,()=>this.dom.target??void 0,()=>{t&&(this.dom.target=t)})}}class Ot extends T{constructor(t,e){super(t,e)}}var _;(i=>{function t(o,u,a,l){return u.length?(l(),o):a()}i.fluent=t;function e(o){return o instanceof Array?o:[o]}i.orArrayResolve=e;function s(o,u){return e(u).forEach(a=>{Object.getOwnPropertyNames(a.prototype).forEach(l=>{l!=="constructor"&&Object.defineProperty(o.prototype,l,Object.getOwnPropertyDescriptor(a.prototype,l)||Object.create(null))})}),o}i.mixin=s;function r(o,u,a){a!==void 0&&(o[u]=a)}i.set=r;function n(o){return new O(o)}i.state=n;function h(o){if(o.$)return o.$;if(o.nodeName.toLowerCase()==="body")return new f("body",{dom:o});if(o.nodeName.toLowerCase()==="#document")return A.from(o);if(o instanceof HTMLElement){const u=$.TagNameElementMap[o.tagName.toLowerCase()],a=u===f?new u(o.tagName,{dom:o}):new u({dom:o});if(a instanceof f)for(const l of Array.from(a.dom.childNodes))a.children.add($(l));return a}else if(o instanceof Text){const u=new G(o.textContent??"");return u.dom=o,u}else if(o instanceof SVGElement&&o.tagName.toLowerCase()==="svg")return new Ot("svg",{dom:o});throw`$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE (${o.nodeName})`}i.from=h})(_||(_={}));class x{static create(...t){const e=class{};return Object.getOwnPropertyNames(x.prototype).forEach(s=>{s!=="constructor"&&t.includes(s)&&Object.defineProperty(e.prototype,s,Object.getOwnPropertyDescriptor(x.prototype,s)||Object.create(null))}),e}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}formAction(t){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",t))}formEnctype(t){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",t))}formMethod(t){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",t))}formNoValidate(t){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",t))}formTarget(t){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",t))}autocomplete(t){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",t))}name(t){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",t))}maxLength(t){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",t))}minLength(t){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",t))}required(t){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",t))}label(t){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",t))}get form(){return this.dom.form?$(this.dom.form):null}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get willValidate(){return this.dom.willValidate}}class it extends f{constructor(t){super("button",t)}type(t){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",t))}}_.mixin(it,x.create("disabled","checkValidity","formAction","formEnctype","formMethod","formNoValidate","formTarget","reportValidity"));class nt extends f{constructor(t){super("form",t)}action(t){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",t))}enctype(t){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",t))}method(t){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",t))}noValidate(t){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",t))}acceptCharset(t){return $.fluent(this,arguments,()=>this.dom.acceptCharset,()=>$.set(this.dom,"acceptCharset",t))}target(t){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",t))}requestSubmit(){return this.dom.requestSubmit(),this}reset(){return this.dom.reset(),this}submit(){return this.dom.submit(),this}get length(){return this.dom.length}get elements(){return Array.from(this.dom.elements).map(t=>$(t))}}_.mixin(nt,x.create("checkValidity","reportValidity","autocomplete"));class ot extends T{constructor(t){super("input",t)}value(t){return $.fluent(this,arguments,()=>this.type()==="number"?Number(this.dom.value):this.dom.value,()=>$.set(this.dom,"value",t,e=>{this.on("input",()=>{e.attributes.has(this.dom)!==!1&&(typeof e.value=="string"&&e.set(`${this.value()}`),typeof e.value=="number"&&e.set(Number(this.value())))})}))}type(t){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",t))}capture(t){return $.fluent(this,arguments,()=>this.dom.capture,()=>$.set(this.dom,"capture",t))}alt(t){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",t))}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",t))}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",t))}defaultValue(t){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",t))}dirName(t){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",t))}pattern(t){return $.fluent(this,arguments,()=>this.dom.pattern,()=>$.set(this.dom,"pattern",t))}placeholder(t){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",t))}readOnly(t){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",t))}selectionDirection(t){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",t))}selectionEnd(t){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",t))}selectionStart(t){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",t))}size(t){return $.fluent(this,arguments,()=>this.dom.size,()=>$.set(this.dom,"size",t))}src(t){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",t))}inputMode(t){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",t))}valueAsDate(t){return $.fluent(this,arguments,()=>this.dom.valueAsDate,()=>$.set(this.dom,"valueAsDate",t))}valueAsNumber(t){return $.fluent(this,arguments,()=>this.dom.valueAsNumber,()=>$.set(this.dom,"valueAsNumber",t))}webkitdirectory(t){return $.fluent(this,arguments,()=>this.dom.webkitdirectory,()=>$.set(this.dom,"webkitdirectory",t))}select(){return this.dom.select(),this}setCustomValidity(t){return this.dom.setCustomValidity(t),this}setRangeText(t,e,s,r){return typeof e=="number"&&typeof s=="number"&&this.dom.setRangeText(t,e,s,r),this.dom.setRangeText(t),this}setSelectionRange(t,e,s){return this.dom.setSelectionRange(t,e,s),this}showPicker(){return this.dom.showPicker(),this}get files(){return this.dom.files}get webkitEntries(){return this.dom.webkitEntries}get labels(){return Array.from(this.dom.labels??[]).map(t=>$(t))}}_.mixin(ot,x.create("checkValidity","reportValidity","autocomplete","name","form","required","validationMessage","validity","willValidate","formAction","formEnctype","formMethod","formNoValidate","formTarget"));class at extends f{constructor(t){super("label",t)}for(t){return $.fluent(this,arguments,()=>this.dom.htmlFor,()=>{$.set(this.dom,"htmlFor",t)})}get control(){return this.dom.control}}_.mixin(at,x.create("form"));class xt extends V{constructor(t){super("img",t)}async load(t){return new Promise(e=>{const s=this.once("load",()=>{e(s)});typeof t=="string"?s.src(t):t.then(r=>s.src(r))})}static resize(t,e){return new Promise(s=>{const r=new Image;if(r.addEventListener("load",()=>{const n=document.createElement("canvas"),h=n.getContext("2d");if(!h)throw"$Image.resize: context undefined";const o=r.width/r.height,[u,a,l]=[o>1,o<1,o===1],d=e instanceof Array?e[0]:a?e:e*o,m=e instanceof Array?e[1]:u?e:e/o;n.height=m,n.width=d,h.drawImage(r,0,0,d,m),s(n.toDataURL())},{once:!0}),t instanceof File){const n=new FileReader;n.addEventListener("load",()=>r.src=n.result),n.readAsDataURL(t)}else r.src=t})}alt(t){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",t))}crossOrigin(t){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",t))}decoding(t){return $.fluent(this,arguments,()=>this.dom.decoding,()=>$.set(this.dom,"decoding",t))}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",t))}isMap(t){return $.fluent(this,arguments,()=>this.dom.isMap,()=>$.set(this.dom,"isMap",t))}loading(t){return $.fluent(this,arguments,()=>this.dom.loading,()=>$.set(this.dom,"loading",t))}referrerPolicy(t){return $.fluent(this,arguments,()=>this.dom.referrerPolicy,()=>$.set(this.dom,"referrerPolicy",t))}sizes(t){return $.fluent(this,arguments,()=>this.dom.sizes,()=>$.set(this.dom,"sizes",t))}src(t){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",t))}srcset(t){return $.fluent(this,arguments,()=>this.dom.srcset,()=>$.set(this.dom,"srcset",t))}useMap(t){return $.fluent(this,arguments,()=>this.dom.useMap,()=>$.set(this.dom,"useMap",t))}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",t))}decode(){return this.dom.decode()}get complete(){return this.dom.complete}get currentSrc(){return this.dom.currentSrc}get naturalHeight(){return this.dom.naturalHeight}get naturalWidth(){return this.dom.naturalWidth}get x(){return this.dom.x}get y(){return this.dom.y}}class Tt extends f{constructor(t){super("canvas",t)}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>{$.set(this.dom,"height",t)})}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>{$.set(this.dom,"width",t)})}captureStream(t){return this.dom.captureStream(t)}getContext(t,e){return this.dom.getContext(t)}toBlob(t,e,s){return this.dom.toBlob(t,e,s),this}toDataURL(t,e){return this.dom.toDataURL(t,e)}transferControlToOffscreen(){return this.dom.transferControlToOffscreen()}}class Et extends f{constructor(t){super("dialog",t)}open(t){return $.fluent(this,arguments,()=>this.dom.open,()=>$.set(this.dom,"open",t))}returnValue(t){return $.fluent(this,arguments,()=>this.dom.returnValue,()=>$.set(this.dom,"returnValue",t))}close(){return this.dom.close(),this}show(){return this.dom.show(),this}showModal(){return this.dom.showModal(),this}}class ht{on(t,e){return this.events.on(t,e),this}off(t,e){return this.events.off(t,e),this}once(t,e){return this.events.once(t,e),this}}class D{constructor(){c(this,"eventMap",new Map)}register(...t){return t.forEach(e=>{const s=new et(e);this.eventMap.set(s.name,s)}),this}delete(t){return this.eventMap.delete(t),this}fire(t,...e){const s=this.get(t);return s instanceof et&&s.fire(...e),this}on(t,e){return this.get(t).add(e),this}off(t,e){return this.get(t).delete(e),this}once(t,e){const s=(...r)=>{this.get(t).delete(s),e(...r)};return this.get(t).add(s),this}get(t){const e=this.eventMap.get(t);if(!e)throw new Error("EVENT NOT EXIST");return e}}class et{constructor(t){c(this,"name");c(this,"callbackList",new Set);this.name=t}fire(...t){this.callbackList.forEach(e=>e(...t))}add(t){this.callbackList.add(t)}delete(t){this.callbackList.delete(t)}}class ut extends f{constructor(e){super("view",e);c(this,"view_cache",new Map);c(this,"event",new D().register("switch"));c(this,"content_id",null)}setView(e,s){return this.view_cache.set(e,s),this}deleteView(e){return this.view_cache.delete(e),this}deleteAllView(){return this.view_cache.clear(),this}switchView(e){const s=this.view_cache.get(e);return s===void 0?this:(this.content(s),this.content_id=e,this.event.fire("switch",e),this)}}class dt extends f{constructor(t){super("select")}add(t){return this.insert(t),this}item(t){return $(this.dom.item(t))}namedItem(t){return $(this.dom.namedItem(t))}multiple(t){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",t))}get length(){return this.dom.length}get size(){return this.dom.size}get options(){return Array.from(this.dom.options).map(t=>$(t))}get selectedIndex(){return this.dom.selectedIndex}get selectedOptions(){return Array.from(this.dom.selectedOptions).map(t=>$(t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}get labels(){return Array.from(this.dom.labels??[]).map(t=>$(t))}}_.mixin(dt,x.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","validationMessage","validity","willValidate"));class ct extends f{constructor(t){super("option",t)}defaultSelected(t){return $.fluent(this,arguments,()=>this.dom.defaultSelected,()=>$.set(this.dom,"defaultSelected",t))}selected(t){return $.fluent(this,arguments,()=>this.dom.selected,()=>$.set(this.dom,"selected",t))}text(t){return $.fluent(this,arguments,()=>this.dom.text,()=>$.set(this.dom,"text",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}get form(){return this.dom.form?$(this.dom.form):null}get index(){return this.dom.index}}_.mixin(ct,x.create("form","disabled","label"));class lt extends f{constructor(t){super("optgroup",t)}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}}_.mixin(lt,x.create("disabled","label"));class mt extends f{constructor(t){super("textarea",t)}cols(t){return $.fluent(this,arguments,()=>this.dom.cols,()=>$.set(this.dom,"cols",t))}wrap(t){return $.fluent(this,arguments,()=>this.dom.wrap,()=>$.set(this.dom,"wrap",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}defaultValue(t){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",t))}dirName(t){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",t))}placeholder(t){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",t))}readOnly(t){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",t))}selectionDirection(t){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",t))}selectionEnd(t){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",t))}selectionStart(t){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",t))}type(t){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",t))}inputMode(t){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",t))}select(){return this.dom.select(),this}setCustomValidity(t){return this.dom.setCustomValidity(t),this}setRangeText(t,e,s,r){return typeof e=="number"&&typeof s=="number"&&this.dom.setRangeText(t,e,s,r),this.dom.setRangeText(t),this}setSelectionRange(t,e,s){return this.dom.setSelectionRange(t,e,s),this}get labels(){return Array.from(this.dom.labels??[]).map(t=>$(t))}}_.mixin(mt,x.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","minLength","maxLength","validationMessage","validity","willValidate"));var I;class Lt extends f{constructor(e){super("async",e);Z(this,I,!1)}await(e){return e.then(s=>this._loaded(s)),this}_loaded(e){tt(this,I,!0),this.replace(e),this.dom.dispatchEvent(new Event("load"))}get loaded(){return Q(this,I)}}I=new WeakMap;class Mt extends T{constructor(t,e){super(t,e)}autoplay(t){return $.fluent(this,arguments,()=>this.dom.autoplay,()=>$.set(this.dom,"autoplay",t))}get buffered(){return this.dom.buffered}controls(t){return $.fluent(this,arguments,()=>this.dom.controls,()=>$.set(this.dom,"controls",t))}crossOrigin(t){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",t))}get currentSrc(){return this.dom.currentSrc}currentTime(t){return $.fluent(this,arguments,()=>this.dom.currentTime,()=>$.set(this.dom,"currentTime",t))}defaultMuted(t){return $.fluent(this,arguments,()=>this.dom.defaultMuted,()=>$.set(this.dom,"defaultMuted",t))}defaultPlaybackRate(t){return $.fluent(this,arguments,()=>this.dom.defaultPlaybackRate,()=>$.set(this.dom,"defaultPlaybackRate",t))}disableRemotePlayback(t){return $.fluent(this,arguments,()=>this.dom.disableRemotePlayback,()=>$.set(this.dom,"disableRemotePlayback",t))}get duration(){return this.dom.duration}get ended(){return this.dom.ended}get error(){return this.dom.error}loop(t){return $.fluent(this,arguments,()=>this.dom.loop,()=>$.set(this.dom,"loop",t))}mediaKeys(t){return $.fluent(this,arguments,()=>this.dom.mediaKeys,()=>$.set(this.dom,"setMediaKeys",[t]))}muted(t){return $.fluent(this,arguments,()=>this.dom.muted,()=>$.set(this.dom,"muted",t))}get networkState(){return this.dom.networkState}get paused(){return this.dom.paused}playbackRate(t){return $.fluent(this,arguments,()=>this.dom.playbackRate,()=>$.set(this.dom,"playbackRate",t))}get played(){return this.dom.played}preload(t){return $.fluent(this,arguments,()=>this.dom.preload,()=>$.set(this.dom,"preload",t))}preservesPitch(t){return $.fluent(this,arguments,()=>this.dom.preservesPitch,()=>$.set(this.dom,"preservesPitch",t))}get readyState(){return this.dom.readyState}get remote(){return this.dom.remote}get seekable(){return this.dom.seekable}get seeking(){return this.dom.seeking}sinkId(t){return $.fluent(this,arguments,()=>this.dom.sinkId,()=>$.set(this.dom,"setSinkId",[t]))}src(t){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",t))}srcObject(t){return $.fluent(this,arguments,()=>this.dom.srcObject,()=>$.set(this.dom,"srcObject",t))}get textTracks(){return this.dom.textTracks}volume(t){return $.fluent(this,arguments,()=>this.dom.volume,()=>$.set(this.dom,"volume",t))}addTextTrack(t,e,s){return this.dom.addTextTrack(t,e,s)}canPlayType(t){return this.dom.canPlayType(t)}fastSeek(t){return this.dom.fastSeek(t),this}load(){return this.dom.load(),this}pause(){return this.dom.pause(),this}async play(){return await this.dom.play(),this}get isPlaying(){return this.currentTime()>0&&!this.paused&&!this.ended&&this.readyState>2}}class Pt extends Mt{constructor(t){super("video",t)}disablePictureInPicture(t){return $.fluent(this,arguments,()=>this.dom.disablePictureInPicture,()=>$.set(this.dom,"disablePictureInPicture",t))}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",t))}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",t))}playsInline(t){return $.fluent(this,arguments,()=>this.dom.playsInline,()=>$.set(this.dom,"playsInline",t))}poster(t){return $.fluent(this,arguments,()=>this.dom.poster,()=>$.set(this.dom,"poster",t))}get videoHeight(){return this.dom.videoHeight}get videoWidth(){return this.dom.videoWidth}cancelVideoFrameCallback(t){return this.dom.cancelVideoFrameCallback(t),this}getVideoPlaybackQuality(){return this.dom.getVideoPlaybackQuality()}requestPictureInPicture(){return this.dom.requestPictureInPicture()}requestVideoFrameCallback(t){return this.dom.requestVideoFrameCallback(t)}}function b(i){if(typeof i>"u"||i===null||i instanceof M)return i;if(typeof i=="string"){if(i.startsWith("::"))return Array.from(document.querySelectorAll(i.replace(/^::/,""))).map(t=>b(t));if(i.startsWith(":"))return b(document.querySelector(i.replace(/^:/,"")));if(i in b.TagNameElementMap){const t=b.TagNameElementMap[i];return t===V?new V(i):t===f?new f(i):new t}else return new f(i)}if(i instanceof Node)return i.$?i.$:_.from(i);throw`$: NOT SUPPORT TARGET ELEMENT TYPE ('${i}')`}(i=>{i.anchorHandler=null,i.anchorPreventDefault=!1,i.TagNameElementMap={document:A,body:f,a:_t,p:f,pre:f,code:f,blockquote:f,strong:f,h1:f,h2:f,h3:f,h4:f,h5:f,h6:f,div:f,ol:f,ul:f,dl:f,li:f,input:ot,label:at,button:it,form:nt,img:xt,dialog:Et,canvas:Tt,view:ut,select:dt,option:ct,optgroup:lt,textarea:mt,video:Pt,async:Lt};function t(d,m,p,y){return m.length?(y(),d):p()}i.fluent=t;function e(d){return d instanceof Array?d:[d]}i.orArrayResolve=e;function s(d,m){return _.mixin(d,m)}i.mixin=s;function r(d,m,p,y){if(p!==void 0){if(p instanceof O){p.use(d,m),d[m]instanceof Function?d[m](...p.value):d[m]=p.value,y&&y(p);return}d[m]instanceof Function?d[m](...p):d[m]=p}}i.set=r;function n(d,m){return new O(d,m)}i.state=n;async function h(d,m){return new Promise(p=>{const y=new FileReader;y.onload=w=>{const v=i("img");if(v.once("load",N=>{const q=i("canvas"),z=q.getContext("2d"),k=v.height()/v.width(),[X,J]=[k>1?m/k:m,k>1?m:m*k];q.height(J).width(X),z==null||z.drawImage(v.dom,0,0,X,J),p(q.toDataURL(d.type))}),!w.target)throw"$.resize(): e.target is null";v.src(w.target.result)},y.readAsDataURL(d)})}i.resize=h;function o(d=1){return parseInt(getComputedStyle(document.documentElement).fontSize)*d}i.rem=o;function u(d){const m=new DOMParser().parseFromString(d,"text/html").body;return Array.from(m.children).map(p=>i(p))}i.html=u;function a(d,m,p){if(typeof m=="number")return Array(m).fill("").map(w=>{const v=y(d)?d[0](...d.slice(1)):i(d);return p&&p(v),v});{const w=[];for(const v of m){const N=d instanceof Function?d(...v):y(d)?d[0](...d.slice(1)):i(d);v instanceof Function?v(N):(v instanceof M||typeof v=="string")&&N.content(v),w.push(N)}return w}function y(w){return w instanceof Array&&w[0]instanceof Function}}i.builder=a;function l(d,m){return Object.assign(i.TagNameElementMap,{[d]:m}),i.TagNameElementMap}i.registerTagName=l})(b||(b={}));globalThis.$=b;Array.prototype.detype=function(...i){return this.filter(t=>{if(i.length)for(const e of i)return typeof t!=typeof e;else return t!==void 0})};class ft extends f{constructor(e){super("layout",e);c(this,"_property",{ROW_MAX_HEIGHT:200,GAP:0,IS_RENDERING:!1,RENDER_REQUEST:!1,COLUNM:1,TYPE:"justified",ROOT:null,THRESHOLD:null});this.css({display:"block",position:"relative"}),new ResizeObserver(s=>{this.inDOM()&&(this.render(),this.scrollCompute(),this.dom.dispatchEvent(new Event("resize")))}).observe(this.dom),document.addEventListener("scroll",s=>{s.target===this.root().dom&&this.scrollCompute()})}type(e){return $.fluent(this,arguments,()=>this._property.TYPE,()=>$.set(this._property,"TYPE",e))}maxHeight(e){return $.fluent(this,arguments,()=>this._property.ROW_MAX_HEIGHT,()=>$.set(this._property,"ROW_MAX_HEIGHT",e))}column(e){return $.fluent(this,arguments,()=>this._property.COLUNM,()=>$.set(this._property,"COLUNM",e))}gap(e){return $.fluent(this,arguments,()=>this._property.GAP,()=>$.set(this._property,"GAP",e))}root(e){return $.fluent(this,arguments,()=>this._property.ROOT??$(document),()=>$.set(this._property,"ROOT",e))}threshold(e){return $.fluent(this,arguments,()=>this._property.THRESHOLD??innerHeight,()=>$.set(this._property,"THRESHOLD",e))}get COL_WIDTH(){return(this.offsetWidth-this._property.GAP*(this._property.COLUNM-1))/this._property.COLUNM}computeLayout(){return this._property.TYPE==="justified"?this.justifiedCompute():this.justifiedCompute()}justifiedCompute(){const e=[],s=this.offsetWidth;for(const r of this.children.array){const n=$(r);if(!(n instanceof T))continue;const h=n.attribute("layout-item-ratio"),o=h?parseFloat(h):n.dom.offsetWidth/n.dom.offsetHeight,u={$node:n,ratio:o};let a=e.at(-1);(!a||a.heightl+=p.ratio);const d=l+o,m=(s-this._property.GAP*a.items.length)/d;a.items.push(u),a.ratio=d,a.height=m}return e}waterfallCompute(){const e=[],s=this.COL_WIDTH,r=()=>{if(e.lengthn.height-h.height)[0]};for(const n of this.children.array){const h=$(n);if(!(h instanceof T))continue;const o=h.attribute("layout-item-ratio"),u=o?parseFloat(o):h.dom.offsetWidth/h.dom.offsetHeight,a={$node:h,ratio:u},l=r();let d=0;l.items.forEach(y=>d+=y.ratio);const m=s/(l.height+s/u),p=s/m;l.items.push(a),l.ratio=m,l.height=p}return e}render(){if(this._property.TYPE==="justified"){const e=this.justifiedCompute();let s=0;for(const r of e){let n=0;r.height>this._property.ROW_MAX_HEIGHT&&(r.height=this._property.ROW_MAX_HEIGHT);for(const h of r.items){const o=h.ratio*r.height;h.$node.css({position:"absolute",height:`${r.height}px`,width:`${o}px`,top:`${s}px`,left:`${n}px`}),h.$node.attribute("layout-item-ratio",h.ratio),n+=r.height*h.ratio+this._property.GAP}s+=r.height+this._property.GAP}this.css({height:`${s}px`})}else if(this._property.TYPE="waterfall"){const e=this.waterfallCompute(),s=this.COL_WIDTH;let r=0;for(const n of e){let h=0;for(const o of n.items){const u=s/o.ratio;o.$node.css({position:"absolute",height:`${u}px`,width:`${s}px`,top:`${h}px`,left:`${r}px`}),o.$node.attribute("layout-item-ratio",o.ratio),h+=u+this._property.GAP}r+=s+this._property.GAP}e.length&&this.css({height:`${e.sort((n,h)=>h.height-n.height)[0].height}px`})}return this}scrollCompute(){if(this.inDOM()===!1)return;const e=this.threshold();this.children.array.forEach(s=>{if(!s.isElement())return;const r=s.domRect();r.bottom<-e||r.top>innerHeight+e?s.hide(!0,!1):s.hide(!1,!1)}),this.children.render()}}$.registerTagName("layout",ft);class pt{constructor(t,e){c(this,"path");c(this,"builder");this.path=t,this.builder=e instanceof Function?e:s=>e}}class gt{constructor(t){c(this,"id");c(this,"content");c(this,"events",new D().register("open","load"));this.id=t}}_.mixin(gt,ht);const g=class g{constructor(t,e){c(this,"routeMap",new Map);c(this,"recordMap",new Map);c(this,"$view");c(this,"events",new D().register("notfound","load"));c(this,"basePath");c(this,"popstate",(()=>{history.state.index>g.index||history.state.indexr.resolvePath()),g.events.fire("pathchange",{prevURL:e,nextURL:g.currentPath,navigation:"Forward"}),this}static back(){const t=g.currentPath;return history.back(),g.currentPath=new URL(location.href),g.events.fire("pathchange",{prevURL:t,nextURL:g.currentPath,navigation:"Back"}),this}static replace(t){if(t===void 0)return this;if(typeof t=="string"&&!t.startsWith(location.origin)&&(t=location.origin+t),t=new URL(t),t.origin!==location.origin)return this;if(t.href===location.href)return this;const e=g.currentPath;return history.replaceState({index:g.index},"",t),g.currentPath=new URL(location.href),$.routers.forEach(s=>s.resolvePath(t.pathname)),g.events.fire("pathchange",{prevURL:e,nextURL:g.currentPath,navigation:"Forward"}),this}setStateData(t,e){return history.state.data===void 0&&(history.state.data={}),history.state.data[t]=e,this}resolvePath(t=location.pathname){if(!t.startsWith(this.basePath))return;t=t.replace(this.basePath,"/").replace("//","/");let e=!1;const s=n=>{const h=this.recordMap.get(n);return h?(e=!0,h.content&&!this.$view.contains(h.content)&&this.$view.switchView(n),h.events.fire("open",{path:t,record:h}),!0):!1},r=(n,h,o)=>{const u=new gt(n);let a=h.builder({params:o,record:u,loaded:()=>{u.events.fire("load",{path:n,record:u}),this.events.fire("load",{path:n})}});typeof a=="string"&&(a=new G(a)),a!==void 0&&(u.content=a,this.recordMap.set(n,u),this.$view.setView(n,a).switchView(n),u.events.fire("open",{path:t,record:u}),e=!0)};for(const[n,h]of this.routeMap.entries()){if(n instanceof Function){const d=n(t);d&&(s(d)||r(d,h,void 0));continue}const[o,u]=[n.split("/").map(d=>`/${d}`),t.split("/").map(d=>`/${d}`)];o.shift(),u.shift();const a={};let l="";for(let d=0;dn=!0;this.events.fire("notfound",{path:t,preventDefault:h}),n||this.$view.clear()}}static on(t,e){return this.events.on(t,e),this}static off(t,e){return this.events.off(t,e),this}static once(t,e){return this.events.once(t,e),this}};c(g,"index",0),c(g,"events",new D().register("pathchange","notfound","load")),c(g,"currentPath",new URL(location.href));let L=g;_.mixin(L,ht);Object.assign($,{routers:new Set,open(i){return L.open(i)},replace(i){return L.replace(i)},back(){return L.back()}});class St{constructor(t){Object.assign(this,t),this.api.endsWith("/")&&(this.api=this.api.slice(0,-1))}}class B{constructor(t){Object.assign(this,t)}static async fetch(t,e){const s=await fetch(`${t.api}/tags/${e}.json`);return new this(await s.json())}static async fetchMultiple(t,e,s=1e3){let r="";if(e)for(const[u,a]of Object.entries(e))if(a instanceof Array)r+=`&search[${u}]=${a}`;else if(a instanceof Object)for(const[l,d]of Object.entries(a))r+=`&search[${u}${l}]=${d}`;else r+=`&search[${u}]=${a}`;return(await(await fetch(`${t.api}/tags.json?limit=${s}${r}`)).json()).map(u=>{const a=new this(u);return this.manager.set(a.id,a),a})}}c(B,"manager",new Map);var P=(i=>(i[i.General=0]="General",i[i.Artist=1]="Artist",i[i.Copyright=2]="Copyright",i[i.Character=3]="Character",i[i.Meta=4]="Meta",i))(P||{});class S{constructor(t){Object.assign(this,t)}static async fetch(t,e){const s=await fetch(`${t.api}/posts/${e}.json`);return new this(await s.json())}static async fetchMultiple(t,e,s=200){let r="";if(e)for(const[u,a]of Object.entries(e))if(a instanceof Array)r+=`&search[${u}]=${a}`;else if(a instanceof Object)for(const[l,d]of Object.entries(a))r+=`&search[${u}${l}]=${d}`;else r+=`&search[${u}]=${a}`;return(await(await fetch(`${t.api}/users.json?limit=${s}${r}`)).json()).map(u=>{const a=new this(u);return this.manager.set(a.id,a),a})}}c(S,"manager",new Map);const Y=1e3,j=Y*60,W=j*60,F=W*24,Rt=F*7,H=new Intl.RelativeTimeFormat("en",{style:"long"});function At(i){i=Math.floor(i);const t=i/Y,e=i/j,s=i/W,r=i/F,n=i%1e3,h=Math.floor(i%6e4/1e3),o=Math.floor(i%36e5/6e4),u=Math.floor(i%(36e5*24)/36e5),a=h.toString().padStart(2,"0"),l=o.toString().padStart(2,"0"),d=u.toString().padStart(2,"0");return{seconds:t,minutes:e,hours:s,days:r,mil:n,s:h,min:o,h:u,ss:a,mm:l,hh:d}}function Ct(i,t=Date.now()){const e=i-t,s=Math.abs(e);if(sr.update$()),r}static async fetchMultiple(t,e,s=20){let r="";if(e)if(typeof e=="string")r=e;else{r+="&tags=";for(const[a,l]of Object.entries(e)){if(a==="tags"){r+=`${l}`;continue}r.at(-1)!=="="&&(r+=" "),r+=`${a}:${l}`}}const h=await(await fetch(`${t.api}/posts.json?limit=${s}${r}&_method=get`)).json(),o=h.map(a=>{const l=new U(a);return this.manager.set(l.id,l),l}),u=[...new Set(h.map(a=>[a.approver_id,a.uploader_id].detype(null)).flat())];return S.fetchMultiple(t,{id:u}).then(()=>o.forEach(a=>a.update$())),o}update$(){var t,e;this.uploader$.set(((t=this.uploader)==null?void 0:t.name)??this.uploader_id),this.approver$.set(((e=this.approver)==null?void 0:e.name)??this.approver_id??"None"),this.created_date$.set(Ct(+new Date(this.created_at))),this.favorites$.set(this.fav_count),this.score$.set(this.score)}get pathname(){return`/posts/${this.id}`}get uploader(){return S.manager.get(this.uploader_id)}get approver(){return this.approver_id?S.manager.get(this.approver_id):null}get isVideo(){return this.file_ext==="mp4"||this.file_ext==="webm"}get tags(){const t=this.tag_string.split(" ");return[...B.manager.values()].filter(e=>t.includes(e.name))}};c(U,"manager",new Map);let C=U;class Nt extends ft{constructor(){super(),this.addStaticClass("post-grid"),this.type("waterfall").column(5).maxHeight(300).gap(10)}}class kt extends f{constructor(e){super("post");c(this,"post");c(this,"$video");c(this,"duration$",$.state(""));this.post=e,this.$video=this.post.isVideo?$("video").width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(!0).loop(!0).muted(!0).hide(!0):null,this.attribute("filetype",this.post.file_ext),this.durationUpdate(),this.build()}build(){var s,r;let e;(s=this.$video)==null||s.on("playing",(n,h)=>{e=setInterval(()=>{this.durationUpdate()},100)}),(r=this.$video)==null||r.on("pause",()=>{clearInterval(e),this.durationUpdate()}),this.content([this.post.isVideo?$("span").class("duration").content(this.duration$):null,$("a").href(this.post.pathname).content(n=>[this.$video,$("img").width(this.post.image_width).height(this.post.image_height).src(this.post.preview_file_url).loading("lazy").once("load",(h,o)=>{this.post.isVideo||o.src(this.post.large_file_url)})]).on("mouseenter",()=>{var n,h;(n=this.$video)!=null&&n.isPlaying||(h=this.$video)==null||h.src(this.post.file_url).hide(!1).play().catch(o=>{})}).on("mouseleave",()=>{var n;(n=this.$video)==null||n.pause().currentTime(0).hide(!0)})])}durationUpdate(){if(!this.$video)return;const e=At(this.post.media_asset.duration*1e3-this.$video.currentTime()*1e3);this.duration$.set(`${e.hh}:${e.mm}:${e.ss}`)}}const Ht=new pt(i=>{if(i==="/posts"||i==="/")return"/"},({record:i})=>{const t=$("page").id("root");async function e(r){const n=await C.fetchMultiple(R,r.length?{tags:r}:void 0,100),h=new Nt().content([n.filter(u=>u.file_url).map(u=>new kt(u))]).on("resize",()=>{o()});return o(),h;function o(){if(innerWidth<350)h.column(1);else if(innerWidth<700)h.column(2);else{const u=Math.round(innerWidth/300);h.column(u)}}}const s=new Map;return i.on("open",async()=>{const r=new URL(location.href).searchParams.get("tags")??"",n=s.get(r);if(n){t.content(n),n.render();return}else t.clear();const h=await e(r);t.content(h),h.render(),s.set(r,h)}),t});class $t{constructor(t){Object.assign(this,t)}static async fetch(t,e){const s=await fetch(`${t.api}/artist_commentaries/${e}.json`);return new this(await s.json())}static async fetchMultiple(t,e,s=200){let r="";if(e)for(const[u,a]of Object.entries(e))if(a instanceof Array)r+=`&search[${u}]=${a}`;else if(a instanceof Object)for(const[l,d]of Object.entries(a))r+=`&search[${u}${l}]=${d}`;else r+=`&search[${u}]=${a}`;return(await(await fetch(`${t.api}/artist_commentaries.json?limit=${s}${r}`)).json()).map(u=>{const a=new this(u);return this.manager.set(a.id,a),a})}}c($t,"manager",new Map);const Vt=new pt("/posts/:id",({params:i})=>{if(!Number(i.id))return"404";const t={$viewer:$("div").class("viewer"),$tags:$("div").class("post-tags"),$commentary:$("section").class("commentary")},e={uploader$:$.state("loading..."),approver$:$.state("loading..."),date$:$.state("loading..."),size$:$.state("loading..."),dimension$:$.state("loading..."),favorites$:$.state(0),score$:$.state(0),ext$:$.state("loading...")};async function s(){const r=C.manager.get(+i.id)??await C.fetch(R,+i.id);t.$viewer.content([r.isVideo?$("video").src(r.file_url).controls(!0):$("img").src(r.large_file_url).once("load",(o,u)=>{u.src(r.file_url)})]),e.uploader$.set(r.uploader$),e.approver$.set(r.approver$),e.date$.set(r.created_date$),e.size$.set(It(r.file_size)),e.dimension$.set(`${r.image_width}x${r.image_height}`),e.favorites$.set(r.favorites$),e.score$.set(r.score$),e.ext$.set(r.file_ext.toUpperCase()),n();async function n(){const o=await B.fetchMultiple(R,{name:{_space:r.tag_string}}),[u,a,l,d,m]=[o.filter(y=>y.category===P.Artist),o.filter(y=>y.category===P.Character),o.filter(y=>y.category===P.General),o.filter(y=>y.category===P.Meta),o.filter(y=>y.category===P.Copyright)];t.$tags.content([p("Artist",u),p("Character",a),p("Copyright",m),p("Meta",d),p("General",l)]);function p(y,w){return w.length?[$("h3").content(y),$("section").content([w.map(v=>$("div").class("tag").content([$("a").class("tag-name").content(v.name).href(`/posts?tags=${v.name}`),$("span").class("tag-post-count").content(`${v.post_count}`)]))])]:null}}h();async function h(){const o=(await $t.fetchMultiple(R,{post:{_id:r.id}})).at(0);if(!o)return t.$commentary.content("No commentary");t.$commentary.content([o.original_title?$("h3").content(o.original_title):null,$("pre").content(o.original_description)])}}return s(),$("page").id("post").content([$("div").class("main").content([t.$viewer,$("h3").content("Artist's Commentary"),t.$commentary.content("loading...")]),$("div").class("sidebar").content([$("section").class("post-info").content([new E("id").name("Post").value(`#${i.id}`),new E("uploader").name("Uploader").value(e.uploader$),new E("approver").name("Approver").value(e.approver$),new E("date").name("Date").value(e.date$),new E("size").name("Size").value([e.size$,e.dimension$]),new E("file").name("File Type").value(e.ext$),$("div").class("inline").content([new E("favorites").name("Favorites").value(e.favorites$),new E("score").name("Score").value(e.score$)]),$("a").content("Copy link").href(`${R.api}${location.pathname}`).on("click",(r,n)=>{navigator.clipboard.writeText(n.href()),n.content("Copied!"),setTimeout(()=>{n.content("Copy link")},2e3)})]),t.$tags.content("loading...")])])});class E extends f{constructor(e){super("div");c(this,"$name",$("span").class("property-name"));c(this,"$values",$("div").class("property-values"));this.staticClass("property").attribute("property-id",e),this.content([this.$name,this.$values])}name(e){return this.$name.content(e),this}value(e){const s=$.orArrayResolve(e);return this.$values.content(s.map(r=>$("span").staticClass("property-value").content(r))),this}}const R=new St({api:"https://danbooru.donmai.us",name:"Testbooru"}),yt=new L("/");$.anchorPreventDefault=!0;$.anchorHandler=i=>{$.open(i.href())};$(document.body).content([$("app").content([yt.$view])]);yt.addRoute([Ht,Vt]).listen(); diff --git a/dist/assets/index-Dna-ZQnZ.css b/dist/assets/index-Dna-ZQnZ.css new file mode 100644 index 0000000..016a01d --- /dev/null +++ b/dist/assets/index-Dna-ZQnZ.css @@ -0,0 +1 @@ +post{display:block}post[filetype=mp4] span.duration,post[filetype=webm] span.duration{background-color:#fff;color:#000}post span.duration{position:absolute;background-color:#00000050;bottom:.3rem;right:.3rem;padding:2px 4px;border-radius:4px;font-size:12px;text-transform:uppercase;z-index:2}post img{border-radius:10px;height:100%;width:100%}post video{border-radius:10px;height:100%;width:100%;object-fit:cover;position:absolute}#post section{background-color:#2f2f45;border-radius:20px;padding:20px}#post div.main{width:calc(100vw - 300px - 4rem);padding-right:10px;display:flex;flex-direction:column}@media (max-width: 800px){#post div.main{width:100%}}#post div.main::-webkit-scrollbar{background-color:#000;width:4px}#post div.main::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}#post div.main>h3{padding-left:1rem;margin-block:1rem}#post div.main div.viewer{height:calc(100vh - 2rem);display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:20px;overflow:hidden}#post div.main div.viewer img{max-width:100%;max-height:100%}#post div.main div.viewer video{max-width:100%;max-height:100%}#post div.sidebar{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.4rem;width:300px;overflow:scroll;overflow-x:hidden;height:calc(100vh - 2rem);border-radius:20px}@media (max-width: 800px){#post div.sidebar{position:relative;width:100%;overflow:visible;height:100%;padding-inline:1rem;padding-bottom:1rem}}#post div.sidebar::-webkit-scrollbar{background-color:#000;width:0px}#post div.sidebar::-webkit-scrollbar-thumb{background-color:#aeaeec}#post div.sidebar h3{padding-left:1rem;margin-block:.6rem}#post div.sidebar .post-info{background-color:#2f2f45;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:.4rem}#post div.sidebar div.property{display:flex;gap:.6rem;align-items:center}#post div.sidebar div.property div.property-values{display:flex;gap:.4rem}#post div.sidebar div.property div.property-values span.property-value{background-color:#525278;color:#aeaeec;padding:2px 4px;border-radius:4px}#post div.sidebar div.inline{display:flex;gap:1rem}#post div.sidebar div.post-tags{display:flex;flex-direction:column;gap:.2rem}#post div.sidebar div.post-tags div.tag{align-items:center}#post div.sidebar div.post-tags div.tag a.tag-name{word-break:break-word;color:#d1d1ee;text-decoration:none}#post div.sidebar div.post-tags div.tag span.tag-post-count{background-color:#525278;color:#aeaeec;padding:0 4px;border-radius:4px;font-size:12px;margin-left:.4rem}body{background-color:#1e1e2c;color:#d1d1ee;margin:0;font-family:Microsoft Yahei;font-size:14px}body::-webkit-scrollbar{background-color:#000;width:8px}body::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}app{display:block}app view{display:block}app view page{min-height:100%;padding:1rem;display:block} diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..70fd836 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,13 @@ + + + + + + + Node Test + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..ef90ee9 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Danbooru Viewer v0.1 + + + + + + diff --git a/index.scss b/index.scss new file mode 100644 index 0000000..020715f --- /dev/null +++ b/index.scss @@ -0,0 +1,34 @@ +@import '/src/component/PostGrid/$PostGrid'; +@import '/src/component/PostTile/$PostTile'; +@import '/src/route/posts/$post'; + +body { + background-color: #1e1e2c; + color: #d1d1ee; + margin: 0; + font-family: Microsoft Yahei; + font-size: 14px; + + &::-webkit-scrollbar { + background-color: #000000; + width: 8px; + } + + &::-webkit-scrollbar-thumb { + background-color: #aeaeec; + border-radius: 2px; + } +} + +app { + display: block; + view { + display: block; + + page { + min-height: 100%; + padding: 1rem; + display: block; + } + } +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..0b69fb0 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "danbooru-viewer", + "module": "index.ts", + "type": "module", + "version": "0.2.0", + "devDependencies": { + "@types/bun": "latest" + }, + "peerDependencies": { + "typescript": "^5.0.0" + }, + "dependencies": { + "@elexis/layout": "../elexis-ext/layout", + "@elexis/router": "../elexis-ext/router", + "elexis": "../elexis", + "sass": "^1.77.1" + } +} \ No newline at end of file diff --git a/src/component/PostGrid/$PostGrid.ts b/src/component/PostGrid/$PostGrid.ts new file mode 100644 index 0000000..d601ea5 --- /dev/null +++ b/src/component/PostGrid/$PostGrid.ts @@ -0,0 +1,9 @@ +import { $Layout } from "@elexis/layout"; + +export class $PostGrid extends $Layout { + constructor() { + super(); + this.addStaticClass('post-grid') + this.type('waterfall').column(5).maxHeight(300).gap(10); + } +} \ No newline at end of file diff --git a/src/component/PostGrid/_$PostGrid.scss b/src/component/PostGrid/_$PostGrid.scss new file mode 100644 index 0000000..2cf5370 --- /dev/null +++ b/src/component/PostGrid/_$PostGrid.scss @@ -0,0 +1,2 @@ +layout.post-grid { +} \ No newline at end of file diff --git a/src/component/PostTile/$PostTile.ts b/src/component/PostTile/$PostTile.ts new file mode 100644 index 0000000..ebe4552 --- /dev/null +++ b/src/component/PostTile/$PostTile.ts @@ -0,0 +1,51 @@ +import { $Container, $State, $Video } from "elexis"; +import type { Post } from "../../structure/Post"; +import { time } from "../../structure/Util"; +export class $PostTile extends $Container { + post: Post; + $video: $Video | null; + duration$ = $.state(``); + constructor(post: Post) { + super('post'); + this.post = post; + this.$video = this.post.isVideo ? $('video').width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(true).loop(true).muted(true).hide(true) : null; + this.attribute('filetype', this.post.file_ext); + this.durationUpdate(); + this.build(); + } + + build() { + let timer: Timer + this.$video?.on('playing', (e, $video) => { + timer = setInterval(() => { + this.durationUpdate(); + }, 100) + }) + this.$video?.on('pause', () => { + clearInterval(timer); + this.durationUpdate(); + }) + this.content([ + this.post.isVideo ? $('span').class('duration').content(this.duration$) : null, + $('a').href(this.post.pathname).content($a => [ + this.$video, + $('img').width(this.post.image_width).height(this.post.image_height).src(this.post.preview_file_url).loading('lazy') + .once('load', (e, $img) => { + if (!this.post.isVideo) $img.src(this.post.large_file_url) + }) + ]) + .on('mouseenter', () => { + if (!this.$video?.isPlaying) this.$video?.src(this.post.file_url).hide(false).play().catch(err => undefined) + }) + .on('mouseleave', () => { + this.$video?.pause().currentTime(0).hide(true); + }) + ]) + } + + durationUpdate() { + if (!this.$video) return; + const t = time(this.post.media_asset.duration * 1000 - this.$video.currentTime() * 1000) + this.duration$.set(`${t.hh}:${t.mm}:${t.ss}`) + } +} \ No newline at end of file diff --git a/src/component/PostTile/_$PostTile.scss b/src/component/PostTile/_$PostTile.scss new file mode 100644 index 0000000..1b05f21 --- /dev/null +++ b/src/component/PostTile/_$PostTile.scss @@ -0,0 +1,33 @@ +post { + display: block; + + &[filetype="mp4"], &[filetype="webm"] { + span.duration { + background-color: #ffffff; + color: #000000; + } + } + span.duration { + position: absolute; + background-color: #00000050; + bottom: 0.3rem; + right: 0.3rem; + padding: 2px 4px; + border-radius: 4px; + font-size: 12px; + text-transform: uppercase; + z-index: 2; + } + img { + border-radius: 10px; + height: 100%; + width: 100%; + } + video { + border-radius: 10px; + height: 100%; + width: 100%; + object-fit: cover; + position: absolute; + } +} \ No newline at end of file diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..40c1f76 --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,51 @@ +type timestamp = number; +type ISOString = string; +type id = number; +type username = string; +type DateType = `${number}-${number}-${number}`; +type PeriodType = `${number}${PeriodUnit}` +type PeriodUnit = 'seconds' | 's' | 'minutes' | 'mi' | 'hours' | 'h' | 'days' | 'd' | 'weeks' | 'w' | 'months' | 'mo' | 'years' | 'y' +type UserSyntax = username | 'any' | 'none' +type Rating = 'explicit' | 'e' | 'questionable' | 'q' | 'sensitive' | 's' | 'general' | 'g' +type Source = 'http' | `https://${string}` | `*${string}*` | 'none' +type Ratio = `${numebr}:${numebr}` | `${number}/${number}` | number +type FileSize = `${number}${FileSizeUnit}` +type FileSizeUnit = 'b' | 'kb' | 'm' +type FileType = 'jpg' | 'png' | 'gif' | 'swf' | 'webm' | 'mp4' | 'zip' +type seconds = number; +type poolname = string; + +type NumericSymbols = '<' | '>' | '<=' | '>=' +type NumericBasicSyntax = N | N[] | `${N}` | `${NumericSymbols}${N}` | `${N}..` | `..${N}` | `${N}...${N}` +type NumericSyntax = NumericBasicSyntax | NumericSyntaxComparisons; +type NumericSyntaxComparisons = + { _not: NumericBasicSyntax } | + { _eq: NumericBasicSyntax } | + { _not_eq: NumericBasicSyntax } | + { _gt: NumericBasicSyntax } | + { _gteq: NumericBasicSyntax } | + { _lt: NumericBasicSyntax } | + { _lteq: NumericBasicSyntax} + +type TextSyntax = T | TextSyntaxComparisons; +type TextSyntaxComparisons = + { _eq: T } | + { _not_eq: T } | + { _like: T } | + { _ilike: T } | + { _not_like: T } | + { _not_ilike: T } | + { _regex: string } | + { _not_regex: string } | + { _array: string } | + { _comma: string } | + { _space: string } | + { _lower_array: string } | + { _lower_comma: string } | + { _lower_space: string } + +type UserSyntax = { _id: id } | { _name: username }; + +type ChainingSyntax = {_id: id} | {has_: boolean}; + +type PostSyntax = {_id: id} | {_tags_match: string}; \ No newline at end of file diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..3dec0c7 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,27 @@ +import 'elexis'; +import '@elexis/layout'; +import '@elexis/router'; +import { Booru } from './structure/Booru'; +import { Router } from '@elexis/router'; +import { home_route } from './route/home/$home'; +import { posts_route } from './route/posts/$post'; + +export const booru = new Booru({ + api: 'https://danbooru.donmai.us', + name: 'Testbooru' +}) + +const router = new Router('/'); +$.anchorPreventDefault = true; +$.anchorHandler = ($a) => { $.open($a.href())} + +$(document.body).content([ + $('app').content([ + router.$view + ]) +]) + +router.addRoute([ + home_route, + posts_route +]).listen(); \ No newline at end of file diff --git a/src/route/home/$home.ts b/src/route/home/$home.ts new file mode 100644 index 0000000..3d86ad1 --- /dev/null +++ b/src/route/home/$home.ts @@ -0,0 +1,46 @@ +import { Route } from "@elexis/router"; +import { Post } from "../../structure/Post"; +import { booru } from "../../main"; +import { $PostGrid } from "../../component/PostGrid/$PostGrid"; +import { $PostTile } from "../../component/PostTile/$PostTile"; + +export const home_route = new Route((path) => { + if (path === '/posts' || path === '/') return '/'; +}, ({record}) => { + const $page = $('page').id('root'); + async function load(tags: string) { + const posts = await Post.fetchMultiple(booru, tags.length ? {tags: tags} : undefined, 100) + const $grid = new $PostGrid().content([ + posts.filter(post => post.file_url).map(post => new $PostTile(post)) + ]).on('resize', () => { resizeCheck() }); + resizeCheck(); + return $grid + + function resizeCheck() { + if (innerWidth < 350) $grid.column(1); + else if (innerWidth < 700) $grid.column(2); + else { + const col = Math.round(innerWidth / 300) + $grid.column(col); + } + } + } + + const gridManager = new Map(); + record.on('open', async () => { + const tags = new URL(location.href).searchParams.get('tags') ?? ''; + const $cacheGrid = gridManager.get(tags); + if ($cacheGrid) { + $page.content($cacheGrid); + $cacheGrid.render() + return; + } else { + $page.clear(); + } + const $grid = await load(tags); + $page.content($grid); + $grid.render(); + gridManager.set(tags, $grid); + }) + return $page; +}) \ No newline at end of file diff --git a/src/route/posts/$post.ts b/src/route/posts/$post.ts new file mode 100644 index 0000000..3d0974f --- /dev/null +++ b/src/route/posts/$post.ts @@ -0,0 +1,136 @@ +import { Route } from "@elexis/router"; +import { Post } from "../../structure/Post"; +import { booru } from "../../main"; +import { $Container, type $ContainerContentType } from "elexis"; +import { digitalUnit } from "../../structure/Util"; +import { Tag, TagCategory } from "../../structure/Tag"; +import { ArtistCommentary } from "../../structure/Commentary"; + +export const posts_route = new Route('/posts/:id', ({params}) => { + if (!Number(params.id)) return '404'; + const ele = { + $viewer: $('div').class('viewer'), + $tags: $('div').class('post-tags'), + $commentary: $('section').class('commentary') + } + const value = { + uploader$: $.state('loading...'), + approver$: $.state('loading...'), + date$: $.state('loading...'), + size$: $.state('loading...'), + dimension$: $.state(`loading...`), + favorites$: $.state(0), + score$: $.state(0), + ext$: $.state(`loading...`), + } + async function load() { + const post = Post.manager.get(+params.id) ?? await Post.fetch(booru, +params.id); + ele.$viewer.content([ + post.isVideo + ? $('video').src(post.file_url).controls(true) + : $('img').src(post.large_file_url).once('load', (e, $img) => { $img.src(post.file_url)}) + ]) + value.uploader$.set(post.uploader$); + value.approver$.set(post.approver$); + value.date$.set(post.created_date$); + value.size$.set(digitalUnit(post.file_size)); + value.dimension$.set(`${post.image_width}x${post.image_height}`) + value.favorites$.set(post.favorites$) + value.score$.set(post.score$) + value.ext$.set(post.file_ext.toUpperCase()) + loadTags(); + async function loadTags() { + const tags = await Tag.fetchMultiple(booru, {name: {_space: post.tag_string}}); + const [artist_tags, char_tags, gen_tags, meta_tags, copy_tags] = [ + tags.filter(tag => tag.category === TagCategory.Artist), + tags.filter(tag => tag.category === TagCategory.Character), + tags.filter(tag => tag.category === TagCategory.General), + tags.filter(tag => tag.category === TagCategory.Meta), + tags.filter(tag => tag.category === TagCategory.Copyright), + ] + ele.$tags.content([ + tag_category('Artist', artist_tags), + tag_category('Character', char_tags), + tag_category('Copyright', copy_tags), + tag_category('Meta', meta_tags), + tag_category('General', gen_tags), + ]) + + function tag_category(category: string, tags: Tag[]) { + return tags.length ? [ + $('h3').content(category), + $('section').content([ + tags.map(tag => $('div').class('tag').content([ + $('a').class('tag-name').content(tag.name).href(`/posts?tags=${tag.name}`), + $('span').class('tag-post-count').content(`${tag.post_count}`) + ])) + ]) + ] : null + } + } + loadCommentary(); + async function loadCommentary() { + const commentary = (await ArtistCommentary.fetchMultiple(booru, {post: {_id: post.id}})).at(0); + if (!commentary) return ele.$commentary.content('No commentary'); + ele.$commentary.content([ + commentary.original_title ? $('h3').content(commentary.original_title) : null, + $('pre').content(commentary.original_description) + ]) + } + } + + load(); + return $('page').id('post').content([ + $('div').class('main').content([ + ele.$viewer, + $('h3').content(`Artist's Commentary`), + ele.$commentary.content('loading...') + ]), + $('div').class('sidebar').content([ + $('section').class('post-info').content([ + new $Property('id').name('Post').value(`#${params.id}`), + new $Property('uploader').name('Uploader').value(value.uploader$), + new $Property('approver').name('Approver').value(value.approver$), + new $Property('date').name('Date').value(value.date$), + new $Property('size').name('Size').value([value.size$, value.dimension$]), + new $Property('file').name('File Type').value(value.ext$), + $('div').class('inline').content([ + new $Property('favorites').name('Favorites').value(value.favorites$), + new $Property('score').name('Score').value(value.score$) + ]), + $('a').content('Copy link').href(`${booru.api}${location.pathname}`).on('click', (e, $a) => { + navigator.clipboard.writeText($a.href()); + $a.content('Copied!'); + setTimeout(() => { + $a.content('Copy link') + }, 2000); + }) + ]), + ele.$tags.content('loading...') + ]) + ]) +}) + +class $Property extends $Container { + $name = $('span').class('property-name') + $values = $('div').class('property-values') + constructor(id: string) { + super('div'); + this.staticClass('property').attribute('property-id', id); + this.content([ + this.$name, + this.$values + ]) + } + + name(content: $ContainerContentType) { + this.$name.content(content); + return this; + } + + value(content: OrMatrix<$ContainerContentType>) { + const list = $.orArrayResolve(content); + this.$values.content(list.map($item => $('span').staticClass('property-value').content($item))); + return this; + } +} \ No newline at end of file diff --git a/src/route/posts/_$post.scss b/src/route/posts/_$post.scss new file mode 100644 index 0000000..fa22478 --- /dev/null +++ b/src/route/posts/_$post.scss @@ -0,0 +1,141 @@ +#post { + + section { + background-color: #2f2f45; + border-radius: 20px; + padding: 20px; + } + + div.main { + // overflow: scroll; + // overflow-x: hidden; + // height: calc(100vh - 2rem); + width: calc(100vw - 300px - 4rem); + padding-right: 10px; + display: flex; + flex-direction: column; + + @media (max-width: 800px) { + width: 100%; + } + + &::-webkit-scrollbar { + background-color: #000000; + width: 4px; + } + + &::-webkit-scrollbar-thumb { + background-color: #aeaeec; + border-radius: 2px; + } + + & > h3 { + padding-left: 1rem; + margin-block: 1rem; + } + + div.viewer { + height: calc(100vh - 2rem); + display: flex; + justify-content: center; + align-items: center; + background-color: #000000; + border-radius: 20px; + overflow: hidden; + img { + max-width: 100%; + max-height: 100%; + } + video { + max-width: 100%; + max-height: 100%; + } + } + } + + div.sidebar { + position: fixed; + top: 1rem; + right: 1rem; + display: flex; + flex-direction: column; + gap: 0.4rem; + width: 300px; + overflow: scroll; + overflow-x: hidden; + height: calc(100vh - 2rem); + border-radius: 20px; + + @media (max-width: 800px) { + position: relative; + width: 100%; + overflow: visible; + height: 100%; + padding-inline: 1rem; + padding-bottom: 1rem; + } + + &::-webkit-scrollbar { + background-color: #000000; + width: 0px; + } + + &::-webkit-scrollbar-thumb { + background-color: #aeaeec; + } + + h3 { + padding-left: 1rem; + margin-block: 0.6rem; + } + .post-info { + background-color: #2f2f45; + border-radius: 20px; + padding: 20px; + display: flex; + flex-direction: column; + gap: 0.4rem; + } + + div.property { + display: flex; + gap: 0.6rem; + align-items: center; + div.property-values { + display: flex; + gap: 0.4rem; + span.property-value { + background-color: #525278; + color: #aeaeec; + padding: 2px 4px; + border-radius: 4px; + } + } + } + div.inline { + display: flex; + gap: 1rem; + } + div.post-tags { + display: flex; + flex-direction: column; + gap: 0.2rem; + div.tag { + align-items: center; + a.tag-name { + word-break: break-word; + color: #d1d1ee; + text-decoration: none; + } + span.tag-post-count { + background-color: #525278; + color: #aeaeec; + padding: 0px 4px; + border-radius: 4px; + font-size: 12px; + margin-left: 0.4rem; + } + } + } + } +} \ No newline at end of file diff --git a/src/structure/Booru.ts b/src/structure/Booru.ts new file mode 100644 index 0000000..608830b --- /dev/null +++ b/src/structure/Booru.ts @@ -0,0 +1,11 @@ +export interface BooruOptions { + api: string; + name: string; +} +export interface Booru extends BooruOptions {} +export class Booru { + constructor(options: BooruOptions) { + Object.assign(this, options); + if (this.api.endsWith('/')) this.api = this.api.slice(0, -1) + } +} \ No newline at end of file diff --git a/src/structure/Commentary.ts b/src/structure/Commentary.ts new file mode 100644 index 0000000..d072746 --- /dev/null +++ b/src/structure/Commentary.ts @@ -0,0 +1,64 @@ +import type { Booru } from "./Booru"; + +export interface ArtistCommentary extends ArtistCommentaryData {} +export class ArtistCommentary { + static manager = new Map(); + constructor(data: ArtistCommentaryData) { + Object.assign(this, data); + } + + static async fetch(booru: Booru, id: id) { + const req = await fetch(`${booru.api}/artist_commentaries/${id}.json`); + const post = new this(await req.json()); + return post; + } + + static async fetchMultiple(booru: Booru, search?: Partial, limit = 200) { + let searchQuery = ''; + if (search) { + for (const [key, val] of Object.entries(search)) { + if (val instanceof Array) searchQuery += `&search[${key}]=${val}`; + else if (val instanceof Object) { + for (const [ckey, cval] of Object.entries(val)) { + searchQuery += `&search[${key}${ckey}]=${cval}` + } + } + else searchQuery += `&search[${key}]=${val}` + } + } + const req = await fetch(`${booru.api}/artist_commentaries.json?limit=${limit}${searchQuery}`); + const dataArray: ArtistCommentaryData[] = await req.json(); + const list = dataArray.map(data => { + const instance = new this(data); + this.manager.set(instance.id, instance); + return instance; + }); + return list; + } +} + +export interface ArtistCommentaryData { + "id": id, + "post_id": id, + "original_title": string, + "original_description": string, + "translated_title": string, + "translated_description": string, + "created_at": ISOString, + "updated_at": ISOString +} + +export interface ArtistCommentarySearchParams { + id: NumericSyntax; + created_at: NumericSyntax; + updated_at: NumericSyntax; + original_title: TextSyntax; + original_description: TextSyntax; + translated_title: TextSyntax; + translated_description: TextSyntax; + post: PostSyntax; + text_matches: string; + original_present: boolean; + translated_present: boolean; + is_deleted: 'yes' | 'no'; +} \ No newline at end of file diff --git a/src/structure/Post.ts b/src/structure/Post.ts new file mode 100644 index 0000000..a5165c5 --- /dev/null +++ b/src/structure/Post.ts @@ -0,0 +1,241 @@ +import { $ } from "elexis"; +import type { Booru } from "./Booru"; +import { Tag } from "./Tag"; +import { User } from "./User"; +import { dateFrom } from "./Util"; +export interface PostOptions {} +export interface Post extends PostData {} +export class Post { + static manager = new Map(); + uploader$ = $.state(this.uploader?.name ?? this.uploader_id); + approver$ = $.state(this.approver?.name ?? this.approver_id ?? 'None'); + created_date$ = $.state(``); + favorites$ = $.state(this.fav_count); + score$ = $.state(this.score); + constructor(data: PostData) { + Object.assign(this, data); + this.update$(); + } + + static async fetch(booru: Booru, id: id) { + const req = await fetch(`${booru.api}/posts/${id}.json`); + const post = new this(await req.json()); + User.fetchMultiple(booru, {id: [post.uploader_id, post.approver_id].detype(null)}).then(() => post.update$()); + return post; + } + + static async fetchMultiple(booru: Booru, tags?: Partial | string, limit = 20) { + let tagsQuery = ''; + if (tags) { + if (typeof tags === 'string') tagsQuery = tags; + else { + tagsQuery += '&tags=' + for (const [key, val] of Object.entries(tags)) { + if (key === 'tags') { tagsQuery += `${val}`; continue; } + if (tagsQuery.at(-1) !== '=') tagsQuery += ' '; // add space between tags + tagsQuery += `${key}:${val}` + } + } + } + const req = await fetch(`${booru.api}/posts.json?limit=${limit}${tagsQuery}&_method=get`); + const dataArray: PostData[] = await req.json(); + const list = dataArray.map(data => { + const instance = new Post(data); + this.manager.set(instance.id, instance); + return instance; + }); + const userIds = [...new Set(dataArray.map(data => [data.approver_id, data.uploader_id].detype(null)).flat())]; + User.fetchMultiple(booru, {id: userIds}).then(() => list.forEach(post => post.update$())); + // const tagNames = new Set(dataArray.map(data => data.tag_string.split(' ')).flat()); + // Tag.fetchMultiple(booru, {name: {_comma: [...tagNames.values()].toString()}}) + return list; + } + + update$() { + this.uploader$.set(this.uploader?.name ?? this.uploader_id); + this.approver$.set(this.approver?.name ?? this.approver_id ?? 'None'); + this.created_date$.set(dateFrom(+new Date(this.created_at))); + this.favorites$.set(this.fav_count); + this.score$.set(this.score); + } + + get pathname() { return `/posts/${this.id}` } + get uploader() { return User.manager.get(this.uploader_id); } + get approver() { if (this.approver_id) return User.manager.get(this.approver_id); else return null } + get isVideo() { return this.file_ext === 'mp4' || this.file_ext === 'webm' } + get tags() { + const tag_list = this.tag_string.split(' '); + return [...Tag.manager.values()].filter(tag => tag_list.includes(tag.name)) + } +} + +export interface PostData extends PostOptions { + "id": id, + "created_at": ISOString, + "uploader_id": id, + "score": number, + "source": string, + "md5": string, + "last_comment_bumped_at": timestamp | null, + "rating": 'g' | 's' | 'q' | 'e' | null, + "image_width": number, + "image_height": number, + "tag_string": string, + "fav_count": number, + "file_ext": FileType, + "last_noted_at": null | timestamp, + "parent_id": null | id, + "has_children": boolean, + "approver_id": null | id, + "tag_count_general": number, + "tag_count_artist": number, + "tag_count_character": number, + "tag_count_copyright": number, + "file_size": number, + "up_score": number, + "down_score": number, + "is_pending": boolean, + "is_flagged": boolean, + "is_deleted": boolean, + "tag_count": number, + "updated_at": ISOString, + "is_banned": boolean, + "pixiv_id": null | id, + "last_commented_at": null | timestamp, + "has_active_children": boolean, + "bit_flags": number, + "tag_count_meta": number, + "has_large": boolean, + "has_visible_children": boolean, + "media_asset": MediaAssetData, + "tag_string_general": string, + "tag_string_character": string, + "tag_string_copyright": string, + "tag_string_artist": string, + "tag_string_meta": string, + "file_url": string, + "large_file_url": string, + "preview_file_url": string +} + +export interface MediaAssetData { + "id": id, + "created_at": ISOString, + "updated_at": ISOString, + "md5": string, + "file_ext": FileType, + "file_size": number, + "image_width": number, + "image_height": number, + "duration": number, + "status": "active", + "file_key": string, + "is_public": boolean, + "pixel_hash": string, + "variants": MediaAssetVariant[]; +} + +export interface MediaAssetVariant { + "type": "original" | "720x720" | "360x360" | "180x180", + "url": string, + "width": number, + "height": number, + "file_ext": FileType +} + +export interface MetaTags { + /** Search tags */ + 'tags': string; + /** Search for posts uploaded by the user */ + 'user': username; + /** Search for posts not uploaded by the user */ + '-user': username; + /** Search for posts favorited by the user */ + 'fav': username; + /** Search for posts not favorited by the user */ + '-fav': username; + /** Search for posts favorited by the user ordered in the order they were favorited in, instead of by the date they were uploaded. */ + 'ordfav': username; + /** Search for posts with at least favorites. */ + 'favcount': NumericBasicSyntax; + /** Order search results. */ + 'order': 'favcount' | 'comm' | 'comment' | 'comment_bumped' | 'note' | 'artcomm' | 'id' | 'id_asc' | 'id_desc' | 'custom' | 'score' | 'score_asc' | 'rank' | 'downvotes' | 'upvotes' | 'changes' | 'md5' | 'landscape' | 'protrait' | 'mpixels' | 'mpixels_asc' | 'filesize'; + /** Search for posts that were approved by the user. */ + 'approver': UserSyntax; + /** Search for posts that were not approved by the user. */ + '-approver': username; + /** Search for posts that were commented on by the user. */ + 'commenter': UserSyntax; + /** Search for posts that were commented on by the user. */ + 'comm': UserSyntax; + /** Search for posts with comments saying string */ + 'comment': string; + /** Search for posts that have had notes created by the user. */ + 'noter': UserSyntax; + /** Search for posts that have had notes updated by the user. */ + 'notepdater': username; + /** Search for posts with notes saying string. */ + 'note': string; + /** Search for posts by status. */ + 'status': PostStatus; + '-status': PostStatus; + /** Search for posts that have ever been flagged by user (mod only; normal users may only search for flags created by themselves). */ + 'flagger': UserSyntax; + 'appeals': UserSyntax; + 'commentary': boolean | 'translated' | 'untranslated' | string + 'commentaryupdater': username; + 'favgroup': string; + '-favgroup': string; + 'ordfavgroup': string; + /** Search for posts in the saved search named string. */ + 'search': string; + 'id': NumericBasicSyntax; + 'date': NumericBasicSyntax; + 'age': NumericBasicSyntax; + 'rating': Rating | Rating[]; + '-rating': Rating | Rating[]; + 'source': Source; + 'pixiv': NumericBasicSyntax | 'any'; + 'parent': id | `any`; + '-parent': id; + 'child': 'none' | 'any'; + 'tagcount': NumericBasicSyntax; + 'gentags': NumericBasicSyntax; + 'arttags': NumericBasicSyntax; + 'chartags': NumericBasicSyntax; + 'copytags': NumericBasicSyntax; + 'metatags': NumericBasicSyntax; + 'score': NumericBasicSyntax; + 'downvotes': NumericBasicSyntax; + 'upvotes': NumericBasicSyntax; + 'disapproved': 'disinterest' | 'breaks_rules' | 'poor_quality' | username; + 'md5': string; + 'width': NumericBasicSyntax; + 'height': NumericBasicSyntax; + 'ratio': NumericBasicSyntax; + 'mpixels': NumericBasicSyntax; + 'filesize': FileSize; + 'filetype': FileType; + 'duration': seconds; + 'is': 'parent' | 'child' | + 'general' | 'sensitive' | 'questionable' | 'explicit' | 'sfw' | 'nsfw' | + 'active' | 'deleted' | 'ending' | 'unmoderated' | 'modqueue' | 'banned' | 'appealed' | 'flagged' | + 'jpg' | 'png' | 'gif' | 'mp4' | 'webm' | 'swf' | 'zip' + 'has': 'children' | 'parent' | 'source' | 'appeals' | 'flags' | 'replacements' | 'comments' | 'commentary' | 'notes' | 'pools'; + 'pool': poolname | id | 'any' | 'series' | 'collection'; + '-pool': poolname | id | 'any' | 'series' | 'collection'; + 'ordpool': poolname; + 'upvote': username; + 'downvote': username; + 'random': number; + 'limit': number; + // 'general': string; + // 'gen': string; + // 'artist': string; + // 'art': string; + // 'character': string; + // 'char': string; + // 'copyright': string; +} + +export type PostStatus = 'flagged' | 'deleted' | 'any' | 'all' | 'pending' | 'unmoderated' | 'banned'; \ No newline at end of file diff --git a/src/structure/Tag.ts b/src/structure/Tag.ts new file mode 100644 index 0000000..4f407c0 --- /dev/null +++ b/src/structure/Tag.ts @@ -0,0 +1,74 @@ +import type { Booru } from "./Booru"; + +export interface TagOptions {} +export interface Tag extends TagData {} +export class Tag { + static manager = new Map(); + constructor(data: TagData) { + Object.assign(this, data); + } + + static async fetch(booru: Booru, id: id) { + const req = await fetch(`${booru.api}/tags/${id}.json`); + const post = new this(await req.json()); + return post; + } + + static async fetchMultiple(booru: Booru, search?: Partial, limit = 1000) { + let searchQuery = ''; + if (search) { + for (const [key, val] of Object.entries(search)) { + if (val instanceof Array) searchQuery += `&search[${key}]=${val}`; + else if (val instanceof Object) { + for (const [ckey, cval] of Object.entries(val)) { + searchQuery += `&search[${key}${ckey}]=${cval}` + } + } + else searchQuery += `&search[${key}]=${val}` + } + } + const req = await fetch(`${booru.api}/tags.json?limit=${limit}${searchQuery}`); + const dataArray: TagData[] = await req.json(); + const list = dataArray.map(data => { + const instance = new this(data); + this.manager.set(instance.id, instance); + return instance; + }); + return list; + } +} + +export interface TagData { + "id": id, + "name": string, + "post_count": number, + "category": number, + "created_at": ISOString, + "updated_at": ISOString, + "is_deprecated": boolean, + "words": string[]; +} + +export interface TagSearchParams { + id: NumericSyntax; + category: NumericSyntax; + post_count: NumericSyntax; + created_at: NumericSyntax; + updated_at: NumericSyntax; + name: TextSyntax; + is_deprecated: boolean; + fuzzy_name_matches: string; + name_matches: string; + name_normalize: string; + name_or_alias_matches: string; + hide_empty: boolean; + order: 'name' | 'date' | 'count' | 'similarity' +} + +export enum TagCategory { + General, + Artist, + Copyright, + Character, + Meta +} \ No newline at end of file diff --git a/src/structure/User.ts b/src/structure/User.ts new file mode 100644 index 0000000..5f56916 --- /dev/null +++ b/src/structure/User.ts @@ -0,0 +1,118 @@ +import type { Booru } from "./Booru"; + +export class UserOptions {} +export interface User extends UserOptions, UserData {} +export class User { + static manager = new Map(); + constructor(data: UserData) { + Object.assign(this, data); + } + + static async fetch(booru: Booru, id: id) { + const req = await fetch(`${booru.api}/posts/${id}.json`); + const post = new this(await req.json()); + return post; + } + + static async fetchMultiple(booru: Booru, search?: Partial, limit = 200) { + let searchQuery = ''; + if (search) { + for (const [key, val] of Object.entries(search)) { + if (val instanceof Array) searchQuery += `&search[${key}]=${val}`; + else if (val instanceof Object) { + for (const [ckey, cval] of Object.entries(val)) { + searchQuery += `&search[${key}${ckey}]=${cval}` + } + } + else searchQuery += `&search[${key}]=${val}` + } + } + const req = await fetch(`${booru.api}/users.json?limit=${limit}${searchQuery}`); + const dataArray: UserData[] = await req.json(); + const list = dataArray.map(data => { + const instance = new this(data); + this.manager.set(instance.id, instance); + return instance; + }); + return list; + } +} + +export interface UserData { + "id": id, + "name": username, + "level": UserLevel, + "inviter_id": id, + "created_at": ISOString, + "post_update_count": number, + "note_update_count": number, + "post_upload_count": number, + "is_deleted": boolean, + "level_string": UserLevelString, + "is_banned": boolean, +} + +export type UserLevel = 10 | 20 | 30 | 31 | 32 | 40 | 50; +export type UserLevelString = "Member" | "Gold" | "Platinum" | "Admin"; + +export interface UserProfileData extends UserData { + "last_logged_in_at": ISOString, + "last_forum_read_at": ISOString, + "comment_threshold": number, + "updated_at": ISOString, + "default_image_size": "large" | "original", + "favorite_tags": null | string, + "blacklisted_tags": string, + "time_zone": string, + "favorite_count": number, + "per_page": number, + "custom_style": string, + "theme": "auto" | "light" | "dark", + "receive_email_notifications": boolean, + "new_post_navigation_layout": boolean, + "enable_private_favorites": boolean, + "show_deleted_children": boolean, + "disable_categorized_saved_searches": boolean, + "disable_tagged_filenames": boolean, + "disable_mobile_gestures": boolean, + "enable_safe_mode": boolean, + "enable_desktop_mode": boolean, + "disable_post_tooltips": boolean, + "requires_verification": boolean, + "is_verified": boolean, + "show_deleted_posts": boolean, + "statement_timeout": number, + "favorite_group_limit": 10 | 100, + "tag_query_limit": 2 | 6, + "max_saved_searches": 250, + "wiki_page_version_count": number, + "artist_version_count": number, + "artist_commentary_version_count": number, + "pool_version_count": number | null, + "forum_post_count": number, + "comment_count": number, + "favorite_group_count": number, + "appeal_count": number, + "flag_count": number, + "positive_feedback_count": number, + "neutral_feedback_count": number, + "negative_feedback_count": number +} + +export interface UserSearchParam { + id: NumericSyntax; + level: NumericSyntax; + post_upload_count: NumericSyntax; + post_update_count: NumericSyntax; + note_update_count: NumericSyntax; + favorite_count: NumericSyntax; + created_at: NumericSyntax; + updated_at: NumericSyntax; + name: TextSyntax; + inviter: UserSyntax; + name_matches: string; + min_level: UserLevel; + max_level: UserLevel; + current_user_first: boolean; + order: 'name' | 'post_upload_count' | 'post_update_count' | 'note_update_count'; +} \ No newline at end of file diff --git a/src/structure/Util.ts b/src/structure/Util.ts new file mode 100644 index 0000000..540906d --- /dev/null +++ b/src/structure/Util.ts @@ -0,0 +1,50 @@ +const SECOND_MS = 1000; +const MINUTE_MS = SECOND_MS * 60; +const HOUR_MS = MINUTE_MS * 60; +const DAY_MS = HOUR_MS * 24; +const WEEK_MS = DAY_MS * 7; +const INTL_RELATIVE_TIME = new Intl.RelativeTimeFormat('en', {style: 'long'}) + +export function time(timestamp: number) { + timestamp = Math.floor(timestamp) + const seconds = timestamp / SECOND_MS; + const minutes = timestamp / MINUTE_MS; + const hours = timestamp / HOUR_MS; + const days = timestamp / DAY_MS; + + const mil = timestamp % 1000; + const s = Math.floor(timestamp % 60_000 / 1000); + const min = Math.floor(timestamp % 3600_000 / 60_000); + const h = Math.floor(timestamp % (3600_000 * 24) / 3600_000) + const ss = s.toString().padStart(2, '0'); + const mm = min.toString().padStart(2, '0'); + const hh = h.toString().padStart(2, '0'); + return {seconds, minutes, hours, days, mil, s, min, h, ss, mm, hh} +} + +export function dateFrom(timestamp: number, from = Date.now()) { + const diff = timestamp - from; + const diff_abs = Math.abs(diff); + if (diff_abs < MINUTE_MS) return INTL_RELATIVE_TIME.format(Math.round(diff / SECOND_MS), 'second'); + if (diff_abs < HOUR_MS) return INTL_RELATIVE_TIME.format(Math.round(diff / MINUTE_MS), 'minute'); + if (diff_abs < DAY_MS) return INTL_RELATIVE_TIME.format(Math.round(diff / HOUR_MS), 'hour'); + if (diff_abs < WEEK_MS) return INTL_RELATIVE_TIME.format(Math.round(diff / DAY_MS), 'day'); + const date = new Date(timestamp); + return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${(date.getDate().toString().padStart(2, '0'))}`; +} + +export function digitalUnit(bytes: number) { + if (bytes < 1000) return `${bytes}B` + const kb = bytes / 1000; + if (kb < 1000) return `${kb.toFixed(2)}kB`; + const mb = bytes / (1000 ** 2); + if (mb < 1000) return `${mb.toFixed(2)}MB`; + const gb = bytes / (1000 ** 3); + if (gb < 1000) return `${gb.toFixed(2)}GB`; + const tb = bytes / (1000 ** 4); + if (tb < 1000) return `${tb.toFixed(2)}TB`; + const pb = bytes / (1000 ** 5); + if (pb < 1000) return `${pb.toFixed(2)}PB`; + const eb = bytes / (1000 * 6); + return `${eb.toFixed(2)}EB`; +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..72012eb --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + // Enable latest features + "lib": ["ESNext", "DOM"], + "target": "ESNext", + "module": "ESNext", + "moduleDetection": "force", + "jsx": "react-jsx", + "allowJs": true, + + // Bundler mode + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "noEmit": true, + + // Best practices + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false + }, + "exclude": ["dist"] +}