v0.2.1

add: Scroll history
change: tag post count numeric format

dist/assets/index-Dna-ZQnZ.css

@@ -1 +0,0 @@
-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}

dist/assets/index-bPuxyZ9T.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.main section.commentary *{text-wrap:wrap;word-break:break-word}#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}

dist/index.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Node Test</title>
+    <title>Danbooru Viewer v0.1</title>
-    <script type="module" crossorigin src="/assets/index-BmY6B-Pf.js"></script>
+    <script type="module" crossorigin src="/assets/index-C_aOc7tm.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dna-ZQnZ.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-bPuxyZ9T.css">
   </head>
   <body>
   </body>

package.json

@@ -2,7 +2,7 @@
   "name": "danbooru-viewer",
   "module": "index.ts",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "devDependencies": {
     "@types/bun": "latest"
   },

scripts/server.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+bun --hot index.ts

scripts/vite-build.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+bunx --bun vite build

scripts/vite.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+bunx --bun vite --host 127.0.0.1

src/route/home/$home.ts

@@ -1,4 +1,4 @@
-import { Route } from "@elexis/router";
+import { Route, Router } from "@elexis/router";
 import { Post } from "../../structure/Post";
 import { booru } from "../../main";
 import { $PostGrid } from "../../component/PostGrid/$PostGrid";
@@ -6,7 +6,7 @@ import { $PostTile } from "../../component/PostTile/$PostTile";
 
 export const home_route = new Route((path) => {
     if (path === '/posts' || path === '/') return '/';
-}, ({record}) => {
+}, ({record, loaded}) => {
     const $page = $('page').id('root');
     async function load(tags: string) {
         const posts = await Post.fetchMultiple(booru, tags.length ? {tags: tags} : undefined, 100)
@@ -32,7 +32,7 @@ export const home_route = new Route((path) => {
         const $cacheGrid = gridManager.get(tags);
         if ($cacheGrid) {
             $page.content($cacheGrid);
-            $cacheGrid.render()
+            $cacheGrid.render();
             return;
         } else {
             $page.clear();
@@ -41,6 +41,7 @@ export const home_route = new Route((path) => {
         $page.content($grid);
         $grid.render();
         gridManager.set(tags, $grid);
+        Router.recoveryScrollPosition();
     })
     return $page;
 })

src/route/posts/$post.ts

@@ -57,12 +57,13 @@ export const posts_route = new Route('/posts/:id', ({params}) => {
             ])
     
             function tag_category(category: string, tags: Tag[]) {
+                const INTL_number = new Intl.NumberFormat('en', {notation: 'compact'})
                 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}`)
+                            $('span').class('tag-post-count').content(`${INTL_number.format(tag.post_count)}`)
                         ]))
                     ])
                 ] : null

src/route/posts/_$post.scss

@@ -51,6 +51,13 @@
                 max-height: 100%;
             }
         }
+
+        section.commentary {
+            * {
+                text-wrap: wrap;
+                word-break: break-word;
+            }
+        }
     }
 
     div.sidebar {