updated requirements.txt

.hintrc

@@ -3,6 +3,14 @@
     "development"
   ],
   "hints": {
-    "apple-touch-icons": "off"
+    "apple-touch-icons": "off",
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "-webkit-app-region"
+        ]
+      }
+    ]
   }
 }

.version

@@ -1 +1 @@
-2.8.1
+2.8.3

README.md

@@ -55,6 +55,7 @@ The script supports several command-line options to customize its behavior. Belo
 - `--ignore-other-files`: Ignore files that do not match the specified extensions.
 - `--regenerate-thumbnails`: Regenerate thumbnails even if they already exist.
 - `--reread-metadata`: Reread image metadata if it already exists.
+- `--reread-sidecar`: Reread sidecar file data.
 - `--reverse-sort`: Sort images by reverse name order.
 - `--theme-path PATH`: Specify the path to the CSS theme file. Default is the provided default theme.
 - `--use-fancy-folders`: Enable fancy folder view instead of the default Apache directory listing.

StaticGalleryBuilder.code-workspace

@@ -90,7 +90,7 @@
           "Scans",
           "--exclude-folder",
           "*/Galleries/*",
-          "--folderthumbnails",
+          "--folderthumbnails"
         ],
         "console": "integratedTerminal",
         "name": "production",
@@ -256,6 +256,21 @@
           "showReuseMessage": false,
           "clear": true
         }
+      },
+      {
+        "command": "COLUMNS=120 ./builder.py --generate-help-preview help.svg",
+        "isBackground": false,
+        "label": "Create help svg",
+        "problemMatcher": [],
+        "type": "shell",
+        "presentation": {
+          "echo": false,
+          "reveal": "always",
+          "focus": true,
+          "panel": "dedicated",
+          "showReuseMessage": false,
+          "clear": true
+        }
       }
     ]
   }

builder.py

@@ -11,6 +11,7 @@ from pathlib import Path
 
 from tqdm.auto import tqdm
 from PIL import Image, ImageOps
+from jsmin import jsmin
 
 from modules.argumentparser import parse_arguments, Args
 
@@ -123,6 +124,10 @@ def copy_static_files(_args: Args) -> None:
     with open(os.path.join(static_dir, "theme.css"), "x", encoding="utf-8") as f:
         logger.info("writing theme file")
         f.write(themehead + '\n.foldericon {\n  content: url("data:image/svg+xml,' + svg + '");\n}\n' + themetail)
+    logger.info("minifying javascript")
+    with open(os.path.join(SCRIPTDIR, "templates", "functionality.js"), "r", encoding="utf-8") as js_file:
+        with open(os.path.join(static_dir, "functionality.min.js"), "w+", encoding="utf-8") as min_file:
+            min_file.write(jsmin(js_file.read()))
 
 
 def generate_thumbnail(arguments: tuple[str, str, str]) -> None:
@@ -169,7 +174,7 @@ def main(args) -> None:
 
     try:
         Path(lock_file).touch()
-        logger.info("starting builder", extra={"version": VERSION})
+        logger.info("starting builder", extra={"version": VERSION, "arguments": args})
 
         logger.info("getting logo from sorogon.eu")
         req = urllib.request.Request("https://files.sorogon.eu/logo.svg")

files/global.css

@@ -157,10 +157,31 @@ figure {
   cursor: pointer;
 }
 
-.tooltip .tooltiptext {
+.tooltip a {
-  display: none;
+  cursor: pointer;
+}
+
+.tagtoggle {
+  cursor: pointer;
+  float: right;
+  padding: 12px;
+
+}
+
+.tagflex {
+  display: flex;
+}
+
+.tag {
+  flex: 1;
+}
+
+input {
+  pointer-events: none;
+}
+
+.tooltiptext {
   cursor: default;
-  width: max-content;
   position: absolute;
   z-index: 100;
   opacity: 0;
@@ -172,29 +193,57 @@ figure {
 
 .tooltip .infotext {
   padding: 12px;
+  width: max-content;
 }
 
-.tooltip .tagdropdown {
+.tooltiptext.tagdropdown {
+  width: max-content;
+  right: 0;
   padding: 0;
   margin: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  opacity: 0;
 }
 
-.tooltip:hover .tooltiptext {
+.tooltiptext.tagdropdown.show {
+  max-height: 80vh;
+  overflow-y: scroll;
+  opacity: 1;
+}
+
+.tooltip:hover .infotext {
   display: block;
   opacity: 1;
 }
 
-.tooltip:active .tooltiptext {
+.tooltip:active .infotext {
   display: block;
   opacity: 1;
 }
 
-.tooltip .tooltiptext .tagentry {
+.tagentryparent {
+  width: 100%;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  opacity: 0;
+}
+
+.tagentryparent.show {
+  max-height: 80vh;
+  opacity: 1;
+  overflow-y: scroll;
+}
+
+.tagentry {
   list-style: none;
   width: 100%;
   cursor: pointer;
   margin: 0;
   padding: 0;
+  display: block;
 }
 
 .tooltip .tooltiptext ol {
@@ -204,7 +253,6 @@ figure {
 
 .tooltip .tooltiptext .tagentry label {
   cursor: pointer;
-  width: 100%;
   height: 100%;
   padding: 12px;
   display: block;

help.svg

@@ -1,4 +1,4 @@
-<svg class="rich-terminal" viewBox="0 0 1482 855.1999999999999" xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal" viewBox="0 0 1482 928.4" xmlns="http://www.w3.org/2000/svg">
     <!-- Generated with Rich https://www.textualize.io -->
     <style>
 
@@ -19,171 +19,183 @@
         font-weight: 700;
     }
 
-    .terminal-1308707172-matrix {
+    .terminal-3378394567-matrix {
         font-family: Fira Code, monospace;
         font-size: 20px;
         line-height: 24.4px;
         font-variant-east-asian: full-width;
     }
 
-    .terminal-1308707172-title {
+    .terminal-3378394567-title {
         font-size: 18px;
         font-weight: bold;
         font-family: arial;
     }
 
-    .terminal-1308707172-r1 { fill: #ff8700 }
+    .terminal-3378394567-r1 { fill: #ff8700 }
-.terminal-1308707172-r2 { fill: #c5c8c6 }
+.terminal-3378394567-r2 { fill: #c5c8c6 }
-.terminal-1308707172-r3 { fill: #808080 }
+.terminal-3378394567-r3 { fill: #808080 }
-.terminal-1308707172-r4 { fill: #68a0b3 }
+.terminal-3378394567-r4 { fill: #68a0b3 }
-.terminal-1308707172-r5 { fill: #00af87 }
+.terminal-3378394567-r5 { fill: #00af87 }
     </style>
 
     <defs>
-    <clipPath id="terminal-1308707172-clip-terminal">
+    <clipPath id="terminal-3378394567-clip-terminal">
-      <rect x="0" y="0" width="1463.0" height="804.1999999999999" />
+      <rect x="0" y="0" width="1463.0" height="877.4" />
     </clipPath>
-    <clipPath id="terminal-1308707172-line-0">
+    <clipPath id="terminal-3378394567-line-0">
     <rect x="0" y="1.5" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-1">
+<clipPath id="terminal-3378394567-line-1">
     <rect x="0" y="25.9" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-2">
+<clipPath id="terminal-3378394567-line-2">
     <rect x="0" y="50.3" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-3">
+<clipPath id="terminal-3378394567-line-3">
     <rect x="0" y="74.7" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-4">
+<clipPath id="terminal-3378394567-line-4">
     <rect x="0" y="99.1" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-5">
+<clipPath id="terminal-3378394567-line-5">
     <rect x="0" y="123.5" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-6">
+<clipPath id="terminal-3378394567-line-6">
     <rect x="0" y="147.9" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-7">
+<clipPath id="terminal-3378394567-line-7">
     <rect x="0" y="172.3" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-8">
+<clipPath id="terminal-3378394567-line-8">
     <rect x="0" y="196.7" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-9">
+<clipPath id="terminal-3378394567-line-9">
     <rect x="0" y="221.1" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-10">
+<clipPath id="terminal-3378394567-line-10">
     <rect x="0" y="245.5" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-11">
+<clipPath id="terminal-3378394567-line-11">
     <rect x="0" y="269.9" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-12">
+<clipPath id="terminal-3378394567-line-12">
     <rect x="0" y="294.3" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-13">
+<clipPath id="terminal-3378394567-line-13">
     <rect x="0" y="318.7" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-14">
+<clipPath id="terminal-3378394567-line-14">
     <rect x="0" y="343.1" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-15">
+<clipPath id="terminal-3378394567-line-15">
     <rect x="0" y="367.5" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-16">
+<clipPath id="terminal-3378394567-line-16">
     <rect x="0" y="391.9" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-17">
+<clipPath id="terminal-3378394567-line-17">
     <rect x="0" y="416.3" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-18">
+<clipPath id="terminal-3378394567-line-18">
     <rect x="0" y="440.7" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-19">
+<clipPath id="terminal-3378394567-line-19">
     <rect x="0" y="465.1" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-20">
+<clipPath id="terminal-3378394567-line-20">
     <rect x="0" y="489.5" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-21">
+<clipPath id="terminal-3378394567-line-21">
     <rect x="0" y="513.9" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-22">
+<clipPath id="terminal-3378394567-line-22">
     <rect x="0" y="538.3" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-23">
+<clipPath id="terminal-3378394567-line-23">
     <rect x="0" y="562.7" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-24">
+<clipPath id="terminal-3378394567-line-24">
     <rect x="0" y="587.1" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-25">
+<clipPath id="terminal-3378394567-line-25">
     <rect x="0" y="611.5" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-26">
+<clipPath id="terminal-3378394567-line-26">
     <rect x="0" y="635.9" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-27">
+<clipPath id="terminal-3378394567-line-27">
     <rect x="0" y="660.3" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-28">
+<clipPath id="terminal-3378394567-line-28">
     <rect x="0" y="684.7" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-29">
+<clipPath id="terminal-3378394567-line-29">
     <rect x="0" y="709.1" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-30">
+<clipPath id="terminal-3378394567-line-30">
     <rect x="0" y="733.5" width="1464" height="24.65"/>
             </clipPath>
-<clipPath id="terminal-1308707172-line-31">
+<clipPath id="terminal-3378394567-line-31">
     <rect x="0" y="757.9" width="1464" height="24.65"/>
             </clipPath>
+<clipPath id="terminal-3378394567-line-32">
+    <rect x="0" y="782.3" width="1464" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-3378394567-line-33">
+    <rect x="0" y="806.7" width="1464" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-3378394567-line-34">
+    <rect x="0" y="831.1" width="1464" height="24.65"/>
+            </clipPath>
     </defs>
 
-    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1480" height="853.2" rx="8"/>
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1480" height="926.4" rx="8"/>
             <g transform="translate(26,22)">
             <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
             <circle cx="22" cy="0" r="7" fill="#febc2e"/>
             <circle cx="44" cy="0" r="7" fill="#28c840"/>
             </g>
         
-    <g transform="translate(9, 41)" clip-path="url(#terminal-1308707172-clip-terminal)">
+    <g transform="translate(9, 41)" clip-path="url(#terminal-3378394567-clip-terminal)">
     
-    <g class="terminal-1308707172-matrix">
+    <g class="terminal-3378394567-matrix">
-    <text class="terminal-1308707172-r1" x="0" y="20" textLength="73.2" clip-path="url(#terminal-1308707172-line-0)">Usage:</text><text class="terminal-1308707172-r3" x="85.4" y="20" textLength="122" clip-path="url(#terminal-1308707172-line-0)">builder.py</text><text class="terminal-1308707172-r2" x="207.4" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">&#160;[</text><text class="terminal-1308707172-r4" x="231.8" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-h</text><text class="terminal-1308707172-r2" x="256.2" y="20" textLength="36.6" clip-path="url(#terminal-1308707172-line-0)">]&#160;[</text><text class="terminal-1308707172-r4" x="292.8" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-a</text><text class="terminal-1308707172-r5" x="329.4" y="20" textLength="73.2" clip-path="url(#terminal-1308707172-line-0)">AUTHOR</text><text class="terminal-1308707172-r2" x="402.6" y="20" textLength="36.6" clip-path="url(#terminal-1308707172-line-0)">]&#160;[</text><text class="terminal-1308707172-r4" x="439.2" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-e</text><text class="terminal-1308707172-r5" x="475.8" y="20" textLength="109.8" clip-path="url(#terminal-1308707172-line-0)">EXTENSION</text><text class="terminal-1308707172-r2" x="585.6" y="20" textLength="36.6" clip-path="url(#terminal-1308707172-line-0)">]&#160;[</text><text class="terminal-1308707172-r4" x="622.2" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-l</text><text class="terminal-1308707172-r5" x="658.8" y="20" textLength="85.4" clip-path="url(#terminal-1308707172-line-0)">LICENSE</text><text class="terminal-1308707172-r2" x="744.2" y="20" textLength="36.6" clip-path="url(#terminal-1308707172-line-0)">]&#160;[</text><text class="terminal-1308707172-r4" x="780.8" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-m</text><text class="terminal-1308707172-r2" x="805.2" y="20" textLength="36.6" clip-path="url(#terminal-1308707172-line-0)">]&#160;[</text><text class="terminal-1308707172-r4" x="841.8" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-n</text><text class="terminal-1308707172-r2" x="866.2" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">]&#160;</text><text class="terminal-1308707172-r4" x="890.6" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-p</text><text class="terminal-1308707172-r5" x="927.2" y="20" textLength="48.8" clip-path="url(#terminal-1308707172-line-0)">ROOT</text><text class="terminal-1308707172-r4" x="988.2" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-t</text><text class="terminal-1308707172-r5" x="1024.8" y="20" textLength="61" clip-path="url(#terminal-1308707172-line-0)">TITLE</text><text class="terminal-1308707172-r4" x="1098" y="20" textLength="24.4" clip-path="url(#terminal-1308707172-line-0)">-w</text><text class="terminal-1308707172-r5" x="1134.6" y="20" textLength="36.6" clip-path="url(#terminal-1308707172-line-0)">URL</text><text class="terminal-1308707172-r2" x="1464" y="20" textLength="12.2" clip-path="url(#terminal-1308707172-line-0)">
+    <text class="terminal-3378394567-r1" x="0" y="20" textLength="73.2" clip-path="url(#terminal-3378394567-line-0)">Usage:</text><text class="terminal-3378394567-r3" x="85.4" y="20" textLength="122" clip-path="url(#terminal-3378394567-line-0)">builder.py</text><text class="terminal-3378394567-r2" x="207.4" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">&#160;[</text><text class="terminal-3378394567-r4" x="231.8" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-h</text><text class="terminal-3378394567-r2" x="256.2" y="20" textLength="36.6" clip-path="url(#terminal-3378394567-line-0)">]&#160;[</text><text class="terminal-3378394567-r4" x="292.8" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-a</text><text class="terminal-3378394567-r5" x="329.4" y="20" textLength="73.2" clip-path="url(#terminal-3378394567-line-0)">AUTHOR</text><text class="terminal-3378394567-r2" x="402.6" y="20" textLength="36.6" clip-path="url(#terminal-3378394567-line-0)">]&#160;[</text><text class="terminal-3378394567-r4" x="439.2" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-e</text><text class="terminal-3378394567-r5" x="475.8" y="20" textLength="109.8" clip-path="url(#terminal-3378394567-line-0)">EXTENSION</text><text class="terminal-3378394567-r2" x="585.6" y="20" textLength="36.6" clip-path="url(#terminal-3378394567-line-0)">]&#160;[</text><text class="terminal-3378394567-r4" x="622.2" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-l</text><text class="terminal-3378394567-r5" x="658.8" y="20" textLength="85.4" clip-path="url(#terminal-3378394567-line-0)">LICENSE</text><text class="terminal-3378394567-r2" x="744.2" y="20" textLength="36.6" clip-path="url(#terminal-3378394567-line-0)">]&#160;[</text><text class="terminal-3378394567-r4" x="780.8" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-m</text><text class="terminal-3378394567-r2" x="805.2" y="20" textLength="36.6" clip-path="url(#terminal-3378394567-line-0)">]&#160;[</text><text class="terminal-3378394567-r4" x="841.8" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-n</text><text class="terminal-3378394567-r2" x="866.2" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">]&#160;</text><text class="terminal-3378394567-r4" x="890.6" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-p</text><text class="terminal-3378394567-r5" x="927.2" y="20" textLength="48.8" clip-path="url(#terminal-3378394567-line-0)">ROOT</text><text class="terminal-3378394567-r4" x="988.2" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-t</text><text class="terminal-3378394567-r5" x="1024.8" y="20" textLength="61" clip-path="url(#terminal-3378394567-line-0)">TITLE</text><text class="terminal-3378394567-r4" x="1098" y="20" textLength="24.4" clip-path="url(#terminal-3378394567-line-0)">-w</text><text class="terminal-3378394567-r5" x="1134.6" y="20" textLength="36.6" clip-path="url(#terminal-3378394567-line-0)">URL</text><text class="terminal-3378394567-r2" x="1464" y="20" textLength="12.2" clip-path="url(#terminal-3378394567-line-0)">
-</text><text class="terminal-1308707172-r2" x="0" y="44.4" textLength="231.8" clip-path="url(#terminal-1308707172-line-1)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[</text><text class="terminal-1308707172-r4" x="231.8" y="44.4" textLength="195.2" clip-path="url(#terminal-1308707172-line-1)">--exclude-folder</text><text class="terminal-1308707172-r5" x="439.2" y="44.4" textLength="73.2" clip-path="url(#terminal-1308707172-line-1)">FOLDER</text><text class="terminal-1308707172-r2" x="512.4" y="44.4" textLength="36.6" clip-path="url(#terminal-1308707172-line-1)">]&#160;[</text><text class="terminal-1308707172-r4" x="549" y="44.4" textLength="244" clip-path="url(#terminal-1308707172-line-1)">--ignore-other-files</text><text class="terminal-1308707172-r2" x="793" y="44.4" textLength="36.6" clip-path="url(#terminal-1308707172-line-1)">]&#160;[</text><text class="terminal-1308707172-r4" x="829.6" y="44.4" textLength="280.6" clip-path="url(#terminal-1308707172-line-1)">--regenerate-thumbnails</text><text class="terminal-1308707172-r2" x="1110.2" y="44.4" textLength="36.6" clip-path="url(#terminal-1308707172-line-1)">]&#160;[</text><text class="terminal-1308707172-r4" x="1146.8" y="44.4" textLength="207.4" clip-path="url(#terminal-1308707172-line-1)">--reread-metadata</text><text class="terminal-1308707172-r2" x="1354.2" y="44.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-1)">]</text><text class="terminal-1308707172-r2" x="1464" y="44.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-1)">
+</text><text class="terminal-3378394567-r2" x="0" y="44.4" textLength="231.8" clip-path="url(#terminal-3378394567-line-1)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[</text><text class="terminal-3378394567-r4" x="231.8" y="44.4" textLength="195.2" clip-path="url(#terminal-3378394567-line-1)">--exclude-folder</text><text class="terminal-3378394567-r5" x="439.2" y="44.4" textLength="73.2" clip-path="url(#terminal-3378394567-line-1)">FOLDER</text><text class="terminal-3378394567-r2" x="512.4" y="44.4" textLength="36.6" clip-path="url(#terminal-3378394567-line-1)">]&#160;[</text><text class="terminal-3378394567-r4" x="549" y="44.4" textLength="219.6" clip-path="url(#terminal-3378394567-line-1)">--folderthumbnails</text><text class="terminal-3378394567-r2" x="768.6" y="44.4" textLength="36.6" clip-path="url(#terminal-3378394567-line-1)">]&#160;[</text><text class="terminal-3378394567-r4" x="805.2" y="44.4" textLength="244" clip-path="url(#terminal-3378394567-line-1)">--ignore-other-files</text><text class="terminal-3378394567-r2" x="1049.2" y="44.4" textLength="36.6" clip-path="url(#terminal-3378394567-line-1)">]&#160;[</text><text class="terminal-3378394567-r4" x="1085.8" y="44.4" textLength="280.6" clip-path="url(#terminal-3378394567-line-1)">--regenerate-thumbnails</text><text class="terminal-3378394567-r2" x="1366.4" y="44.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-1)">]</text><text class="terminal-3378394567-r2" x="1464" y="44.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-1)">
-</text><text class="terminal-1308707172-r2" x="0" y="68.8" textLength="231.8" clip-path="url(#terminal-1308707172-line-2)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[</text><text class="terminal-1308707172-r4" x="231.8" y="68.8" textLength="170.8" clip-path="url(#terminal-1308707172-line-2)">--reverse-sort</text><text class="terminal-1308707172-r2" x="402.6" y="68.8" textLength="36.6" clip-path="url(#terminal-1308707172-line-2)">]&#160;[</text><text class="terminal-1308707172-r4" x="439.2" y="68.8" textLength="146.4" clip-path="url(#terminal-1308707172-line-2)">--theme-path</text><text class="terminal-1308707172-r5" x="597.8" y="68.8" textLength="48.8" clip-path="url(#terminal-1308707172-line-2)">PATH</text><text class="terminal-1308707172-r2" x="646.6" y="68.8" textLength="36.6" clip-path="url(#terminal-1308707172-line-2)">]&#160;[</text><text class="terminal-1308707172-r4" x="683.2" y="68.8" textLength="231.8" clip-path="url(#terminal-1308707172-line-2)">--use-fancy-folders</text><text class="terminal-1308707172-r2" x="915" y="68.8" textLength="36.6" clip-path="url(#terminal-1308707172-line-2)">]&#160;[</text><text class="terminal-1308707172-r4" x="951.6" y="68.8" textLength="109.8" clip-path="url(#terminal-1308707172-line-2)">--version</text><text class="terminal-1308707172-r2" x="1061.4" y="68.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-2)">]</text><text class="terminal-1308707172-r2" x="1464" y="68.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-2)">
+</text><text class="terminal-3378394567-r2" x="0" y="68.8" textLength="231.8" clip-path="url(#terminal-3378394567-line-2)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[</text><text class="terminal-3378394567-r4" x="231.8" y="68.8" textLength="207.4" clip-path="url(#terminal-3378394567-line-2)">--reread-metadata</text><text class="terminal-3378394567-r2" x="439.2" y="68.8" textLength="36.6" clip-path="url(#terminal-3378394567-line-2)">]&#160;[</text><text class="terminal-3378394567-r4" x="475.8" y="68.8" textLength="195.2" clip-path="url(#terminal-3378394567-line-2)">--reread-sidecar</text><text class="terminal-3378394567-r2" x="671" y="68.8" textLength="36.6" clip-path="url(#terminal-3378394567-line-2)">]&#160;[</text><text class="terminal-3378394567-r4" x="707.6" y="68.8" textLength="170.8" clip-path="url(#terminal-3378394567-line-2)">--reverse-sort</text><text class="terminal-3378394567-r2" x="878.4" y="68.8" textLength="36.6" clip-path="url(#terminal-3378394567-line-2)">]&#160;[</text><text class="terminal-3378394567-r4" x="915" y="68.8" textLength="146.4" clip-path="url(#terminal-3378394567-line-2)">--theme-path</text><text class="terminal-3378394567-r5" x="1073.6" y="68.8" textLength="48.8" clip-path="url(#terminal-3378394567-line-2)">PATH</text><text class="terminal-3378394567-r2" x="1122.4" y="68.8" textLength="36.6" clip-path="url(#terminal-3378394567-line-2)">]&#160;[</text><text class="terminal-3378394567-r4" x="1159" y="68.8" textLength="231.8" clip-path="url(#terminal-3378394567-line-2)">--use-fancy-folders</text><text class="terminal-3378394567-r2" x="1390.8" y="68.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-2)">]</text><text class="terminal-3378394567-r2" x="1464" y="68.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-2)">
-</text><text class="terminal-1308707172-r2" x="1464" y="93.2" textLength="12.2" clip-path="url(#terminal-1308707172-line-3)">
+</text><text class="terminal-3378394567-r2" x="0" y="93.2" textLength="231.8" clip-path="url(#terminal-3378394567-line-3)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[</text><text class="terminal-3378394567-r4" x="231.8" y="93.2" textLength="109.8" clip-path="url(#terminal-3378394567-line-3)">--version</text><text class="terminal-3378394567-r2" x="341.6" y="93.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-3)">]</text><text class="terminal-3378394567-r2" x="1464" y="93.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-3)">
-</text><text class="terminal-1308707172-r2" x="0" y="117.6" textLength="671" clip-path="url(#terminal-1308707172-line-4)">Generate&#160;HTML&#160;files&#160;for&#160;a&#160;static&#160;image&#160;hosting&#160;website.</text><text class="terminal-1308707172-r2" x="1464" y="117.6" textLength="12.2" clip-path="url(#terminal-1308707172-line-4)">
+</text><text class="terminal-3378394567-r2" x="1464" y="117.6" textLength="12.2" clip-path="url(#terminal-3378394567-line-4)">
-</text><text class="terminal-1308707172-r2" x="1464" y="142" textLength="12.2" clip-path="url(#terminal-1308707172-line-5)">
+</text><text class="terminal-3378394567-r2" x="0" y="142" textLength="658.8" clip-path="url(#terminal-3378394567-line-5)">generate&#160;HTML&#160;files&#160;for&#160;a&#160;static&#160;image&#160;hosting&#160;website</text><text class="terminal-3378394567-r2" x="1464" y="142" textLength="12.2" clip-path="url(#terminal-3378394567-line-5)">
-</text><text class="terminal-1308707172-r1" x="0" y="166.4" textLength="97.6" clip-path="url(#terminal-1308707172-line-6)">Options:</text><text class="terminal-1308707172-r2" x="1464" y="166.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-6)">
+</text><text class="terminal-3378394567-r2" x="1464" y="166.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-6)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="190.8" textLength="24.4" clip-path="url(#terminal-1308707172-line-7)">-h</text><text class="terminal-1308707172-r2" x="48.8" y="190.8" textLength="24.4" clip-path="url(#terminal-1308707172-line-7)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="190.8" textLength="73.2" clip-path="url(#terminal-1308707172-line-7)">--help</text><text class="terminal-1308707172-r2" x="292.8" y="190.8" textLength="378.2" clip-path="url(#terminal-1308707172-line-7)">show&#160;this&#160;help&#160;message&#160;and&#160;exit</text><text class="terminal-1308707172-r2" x="1464" y="190.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-7)">
+</text><text class="terminal-3378394567-r1" x="0" y="190.8" textLength="97.6" clip-path="url(#terminal-3378394567-line-7)">Options:</text><text class="terminal-3378394567-r2" x="1464" y="190.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-7)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="215.2" textLength="24.4" clip-path="url(#terminal-1308707172-line-8)">-a</text><text class="terminal-1308707172-r2" x="48.8" y="215.2" textLength="24.4" clip-path="url(#terminal-1308707172-line-8)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="215.2" textLength="158.6" clip-path="url(#terminal-1308707172-line-8)">--author-name</text><text class="terminal-1308707172-r5" x="244" y="215.2" textLength="73.2" clip-path="url(#terminal-1308707172-line-8)">AUTHOR</text><text class="terminal-1308707172-r2" x="1464" y="215.2" textLength="12.2" clip-path="url(#terminal-1308707172-line-8)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="215.2" textLength="24.4" clip-path="url(#terminal-3378394567-line-8)">-h</text><text class="terminal-3378394567-r2" x="48.8" y="215.2" textLength="24.4" clip-path="url(#terminal-3378394567-line-8)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="215.2" textLength="73.2" clip-path="url(#terminal-3378394567-line-8)">--help</text><text class="terminal-3378394567-r2" x="292.8" y="215.2" textLength="378.2" clip-path="url(#terminal-3378394567-line-8)">show&#160;this&#160;help&#160;message&#160;and&#160;exit</text><text class="terminal-3378394567-r2" x="1464" y="215.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-8)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="239.6" textLength="402.6" clip-path="url(#terminal-1308707172-line-9)">Name&#160;of&#160;the&#160;author&#160;of&#160;the&#160;images.</text><text class="terminal-1308707172-r2" x="1464" y="239.6" textLength="12.2" clip-path="url(#terminal-1308707172-line-9)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="239.6" textLength="24.4" clip-path="url(#terminal-3378394567-line-9)">-a</text><text class="terminal-3378394567-r2" x="48.8" y="239.6" textLength="24.4" clip-path="url(#terminal-3378394567-line-9)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="239.6" textLength="158.6" clip-path="url(#terminal-3378394567-line-9)">--author-name</text><text class="terminal-3378394567-r5" x="244" y="239.6" textLength="73.2" clip-path="url(#terminal-3378394567-line-9)">AUTHOR</text><text class="terminal-3378394567-r2" x="1464" y="239.6" textLength="12.2" clip-path="url(#terminal-3378394567-line-9)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="264" textLength="24.4" clip-path="url(#terminal-1308707172-line-10)">-e</text><text class="terminal-1308707172-r2" x="48.8" y="264" textLength="24.4" clip-path="url(#terminal-1308707172-line-10)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="264" textLength="207.4" clip-path="url(#terminal-1308707172-line-10)">--file-extensions</text><text class="terminal-1308707172-r5" x="292.8" y="264" textLength="109.8" clip-path="url(#terminal-1308707172-line-10)">EXTENSION</text><text class="terminal-1308707172-r2" x="1464" y="264" textLength="12.2" clip-path="url(#terminal-1308707172-line-10)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="264" textLength="390.4" clip-path="url(#terminal-3378394567-line-10)">name&#160;of&#160;the&#160;author&#160;of&#160;the&#160;images</text><text class="terminal-3378394567-r2" x="1464" y="264" textLength="12.2" clip-path="url(#terminal-3378394567-line-10)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="288.4" textLength="744.2" clip-path="url(#terminal-1308707172-line-11)">File&#160;extensions&#160;to&#160;include&#160;(can&#160;be&#160;specified&#160;multiple&#160;times).</text><text class="terminal-1308707172-r2" x="1464" y="288.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-11)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="288.4" textLength="24.4" clip-path="url(#terminal-3378394567-line-11)">-e</text><text class="terminal-3378394567-r2" x="48.8" y="288.4" textLength="24.4" clip-path="url(#terminal-3378394567-line-11)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="288.4" textLength="207.4" clip-path="url(#terminal-3378394567-line-11)">--file-extensions</text><text class="terminal-3378394567-r5" x="292.8" y="288.4" textLength="109.8" clip-path="url(#terminal-3378394567-line-11)">EXTENSION</text><text class="terminal-3378394567-r2" x="1464" y="288.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-11)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="312.8" textLength="24.4" clip-path="url(#terminal-1308707172-line-12)">-l</text><text class="terminal-1308707172-r2" x="48.8" y="312.8" textLength="24.4" clip-path="url(#terminal-1308707172-line-12)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="312.8" textLength="170.8" clip-path="url(#terminal-1308707172-line-12)">--license-type</text><text class="terminal-1308707172-r5" x="256.2" y="312.8" textLength="85.4" clip-path="url(#terminal-1308707172-line-12)">LICENSE</text><text class="terminal-1308707172-r2" x="1464" y="312.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-12)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="312.8" textLength="732" clip-path="url(#terminal-3378394567-line-12)">file&#160;extensions&#160;to&#160;include&#160;(can&#160;be&#160;specified&#160;multiple&#160;times)</text><text class="terminal-3378394567-r2" x="1464" y="312.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-12)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="337.2" textLength="488" clip-path="url(#terminal-1308707172-line-13)">Specify&#160;the&#160;license&#160;type&#160;for&#160;the&#160;images.</text><text class="terminal-1308707172-r2" x="1464" y="337.2" textLength="12.2" clip-path="url(#terminal-1308707172-line-13)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="337.2" textLength="24.4" clip-path="url(#terminal-3378394567-line-13)">-l</text><text class="terminal-3378394567-r2" x="48.8" y="337.2" textLength="24.4" clip-path="url(#terminal-3378394567-line-13)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="337.2" textLength="170.8" clip-path="url(#terminal-3378394567-line-13)">--license-type</text><text class="terminal-3378394567-r5" x="256.2" y="337.2" textLength="85.4" clip-path="url(#terminal-3378394567-line-13)">LICENSE</text><text class="terminal-3378394567-r2" x="1464" y="337.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-13)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="361.6" textLength="24.4" clip-path="url(#terminal-1308707172-line-14)">-m</text><text class="terminal-1308707172-r2" x="48.8" y="361.6" textLength="24.4" clip-path="url(#terminal-1308707172-line-14)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="361.6" textLength="170.8" clip-path="url(#terminal-1308707172-line-14)">--web-manifest</text><text class="terminal-1308707172-r2" x="292.8" y="361.6" textLength="353.8" clip-path="url(#terminal-1308707172-line-14)">Generate&#160;a&#160;web&#160;manifest&#160;file.</text><text class="terminal-1308707172-r2" x="1464" y="361.6" textLength="12.2" clip-path="url(#terminal-1308707172-line-14)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="361.6" textLength="475.8" clip-path="url(#terminal-3378394567-line-14)">specify&#160;the&#160;license&#160;type&#160;for&#160;the&#160;images</text><text class="terminal-3378394567-r2" x="1464" y="361.6" textLength="12.2" clip-path="url(#terminal-3378394567-line-14)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="386" textLength="24.4" clip-path="url(#terminal-1308707172-line-15)">-n</text><text class="terminal-1308707172-r2" x="48.8" y="386" textLength="24.4" clip-path="url(#terminal-1308707172-line-15)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="386" textLength="268.4" clip-path="url(#terminal-1308707172-line-15)">--non-interactive-mode</text><text class="terminal-1308707172-r2" x="1464" y="386" textLength="12.2" clip-path="url(#terminal-1308707172-line-15)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="386" textLength="24.4" clip-path="url(#terminal-3378394567-line-15)">-m</text><text class="terminal-3378394567-r2" x="48.8" y="386" textLength="24.4" clip-path="url(#terminal-3378394567-line-15)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="386" textLength="170.8" clip-path="url(#terminal-3378394567-line-15)">--web-manifest</text><text class="terminal-3378394567-r2" x="292.8" y="386" textLength="341.6" clip-path="url(#terminal-3378394567-line-15)">generate&#160;a&#160;web&#160;manifest&#160;file</text><text class="terminal-3378394567-r2" x="1464" y="386" textLength="12.2" clip-path="url(#terminal-3378394567-line-15)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="410.4" textLength="646.6" clip-path="url(#terminal-1308707172-line-16)">Run&#160;in&#160;non-interactive&#160;mode,&#160;disabling&#160;progress&#160;bars.</text><text class="terminal-1308707172-r2" x="1464" y="410.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-16)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="410.4" textLength="24.4" clip-path="url(#terminal-3378394567-line-16)">-n</text><text class="terminal-3378394567-r2" x="48.8" y="410.4" textLength="24.4" clip-path="url(#terminal-3378394567-line-16)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="410.4" textLength="268.4" clip-path="url(#terminal-3378394567-line-16)">--non-interactive-mode</text><text class="terminal-3378394567-r2" x="1464" y="410.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-16)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="434.8" textLength="24.4" clip-path="url(#terminal-1308707172-line-17)">-p</text><text class="terminal-1308707172-r2" x="48.8" y="434.8" textLength="24.4" clip-path="url(#terminal-1308707172-line-17)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="434.8" textLength="195.2" clip-path="url(#terminal-1308707172-line-17)">--root-directory</text><text class="terminal-1308707172-r5" x="280.6" y="434.8" textLength="48.8" clip-path="url(#terminal-1308707172-line-17)">ROOT</text><text class="terminal-1308707172-r2" x="1464" y="434.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-17)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="434.8" textLength="634.4" clip-path="url(#terminal-3378394567-line-17)">run&#160;in&#160;non-interactive&#160;mode,&#160;disabling&#160;progress&#160;bars</text><text class="terminal-3378394567-r2" x="1464" y="434.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-17)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="459.2" textLength="451.4" clip-path="url(#terminal-1308707172-line-18)">Root&#160;directory&#160;containing&#160;the&#160;images.</text><text class="terminal-1308707172-r2" x="1464" y="459.2" textLength="12.2" clip-path="url(#terminal-1308707172-line-18)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="459.2" textLength="24.4" clip-path="url(#terminal-3378394567-line-18)">-p</text><text class="terminal-3378394567-r2" x="48.8" y="459.2" textLength="24.4" clip-path="url(#terminal-3378394567-line-18)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="459.2" textLength="195.2" clip-path="url(#terminal-3378394567-line-18)">--root-directory</text><text class="terminal-3378394567-r5" x="280.6" y="459.2" textLength="48.8" clip-path="url(#terminal-3378394567-line-18)">ROOT</text><text class="terminal-3378394567-r2" x="1464" y="459.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-18)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="483.6" textLength="24.4" clip-path="url(#terminal-1308707172-line-19)">-t</text><text class="terminal-1308707172-r2" x="48.8" y="483.6" textLength="24.4" clip-path="url(#terminal-1308707172-line-19)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="483.6" textLength="146.4" clip-path="url(#terminal-1308707172-line-19)">--site-title</text><text class="terminal-1308707172-r5" x="231.8" y="483.6" textLength="61" clip-path="url(#terminal-1308707172-line-19)">TITLE</text><text class="terminal-1308707172-r2" x="1464" y="483.6" textLength="12.2" clip-path="url(#terminal-1308707172-line-19)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="483.6" textLength="439.2" clip-path="url(#terminal-3378394567-line-19)">root&#160;directory&#160;containing&#160;the&#160;images</text><text class="terminal-3378394567-r2" x="1464" y="483.6" textLength="12.2" clip-path="url(#terminal-3378394567-line-19)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="508" textLength="390.4" clip-path="url(#terminal-1308707172-line-20)">Title&#160;of&#160;the&#160;image&#160;hosting&#160;site.</text><text class="terminal-1308707172-r2" x="1464" y="508" textLength="12.2" clip-path="url(#terminal-1308707172-line-20)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="508" textLength="24.4" clip-path="url(#terminal-3378394567-line-20)">-t</text><text class="terminal-3378394567-r2" x="48.8" y="508" textLength="24.4" clip-path="url(#terminal-3378394567-line-20)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="508" textLength="146.4" clip-path="url(#terminal-3378394567-line-20)">--site-title</text><text class="terminal-3378394567-r5" x="231.8" y="508" textLength="61" clip-path="url(#terminal-3378394567-line-20)">TITLE</text><text class="terminal-3378394567-r2" x="1464" y="508" textLength="12.2" clip-path="url(#terminal-3378394567-line-20)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="532.4" textLength="24.4" clip-path="url(#terminal-1308707172-line-21)">-w</text><text class="terminal-1308707172-r2" x="48.8" y="532.4" textLength="24.4" clip-path="url(#terminal-1308707172-line-21)">,&#160;</text><text class="terminal-1308707172-r4" x="73.2" y="532.4" textLength="170.8" clip-path="url(#terminal-1308707172-line-21)">--web-root-url</text><text class="terminal-1308707172-r5" x="256.2" y="532.4" textLength="36.6" clip-path="url(#terminal-1308707172-line-21)">URL</text><text class="terminal-1308707172-r2" x="1464" y="532.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-21)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="532.4" textLength="378.2" clip-path="url(#terminal-3378394567-line-21)">title&#160;of&#160;the&#160;image&#160;hosting&#160;site</text><text class="terminal-3378394567-r2" x="1464" y="532.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-21)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="556.8" textLength="634.4" clip-path="url(#terminal-1308707172-line-22)">Base&#160;URL&#160;of&#160;the&#160;web&#160;root&#160;for&#160;the&#160;image&#160;hosting&#160;site.</text><text class="terminal-1308707172-r2" x="1464" y="556.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-22)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="556.8" textLength="24.4" clip-path="url(#terminal-3378394567-line-22)">-w</text><text class="terminal-3378394567-r2" x="48.8" y="556.8" textLength="24.4" clip-path="url(#terminal-3378394567-line-22)">,&#160;</text><text class="terminal-3378394567-r4" x="73.2" y="556.8" textLength="170.8" clip-path="url(#terminal-3378394567-line-22)">--web-root-url</text><text class="terminal-3378394567-r5" x="256.2" y="556.8" textLength="36.6" clip-path="url(#terminal-3378394567-line-22)">URL</text><text class="terminal-3378394567-r2" x="1464" y="556.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-22)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="581.2" textLength="195.2" clip-path="url(#terminal-1308707172-line-23)">--exclude-folder</text><text class="terminal-1308707172-r5" x="231.8" y="581.2" textLength="73.2" clip-path="url(#terminal-1308707172-line-23)">FOLDER</text><text class="terminal-1308707172-r2" x="1464" y="581.2" textLength="12.2" clip-path="url(#terminal-1308707172-line-23)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="581.2" textLength="622.2" clip-path="url(#terminal-3378394567-line-23)">base&#160;URL&#160;of&#160;the&#160;web&#160;root&#160;for&#160;the&#160;image&#160;hosting&#160;site</text><text class="terminal-3378394567-r2" x="1464" y="581.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-23)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="605.6" textLength="1049.2" clip-path="url(#terminal-1308707172-line-24)">Folders&#160;to&#160;exclude&#160;from&#160;processing,&#160;globs&#160;supported&#160;(can&#160;be&#160;specified&#160;multiple&#160;times).</text><text class="terminal-1308707172-r2" x="1464" y="605.6" textLength="12.2" clip-path="url(#terminal-1308707172-line-24)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="605.6" textLength="195.2" clip-path="url(#terminal-3378394567-line-24)">--exclude-folder</text><text class="terminal-3378394567-r5" x="231.8" y="605.6" textLength="73.2" clip-path="url(#terminal-3378394567-line-24)">FOLDER</text><text class="terminal-3378394567-r2" x="1464" y="605.6" textLength="12.2" clip-path="url(#terminal-3378394567-line-24)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="630" textLength="244" clip-path="url(#terminal-1308707172-line-25)">--ignore-other-files</text><text class="terminal-1308707172-r2" x="292.8" y="630" textLength="683.2" clip-path="url(#terminal-1308707172-line-25)">Ignore&#160;files&#160;that&#160;do&#160;not&#160;match&#160;the&#160;specified&#160;extensions.</text><text class="terminal-1308707172-r2" x="1464" y="630" textLength="12.2" clip-path="url(#terminal-1308707172-line-25)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="630" textLength="1037" clip-path="url(#terminal-3378394567-line-25)">folders&#160;to&#160;exclude&#160;from&#160;processing,&#160;globs&#160;supported&#160;(can&#160;be&#160;specified&#160;multiple&#160;times)</text><text class="terminal-3378394567-r2" x="1464" y="630" textLength="12.2" clip-path="url(#terminal-3378394567-line-25)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="654.4" textLength="280.6" clip-path="url(#terminal-1308707172-line-26)">--regenerate-thumbnails</text><text class="terminal-1308707172-r2" x="1464" y="654.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-26)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="654.4" textLength="219.6" clip-path="url(#terminal-3378394567-line-26)">--folderthumbnails</text><text class="terminal-3378394567-r2" x="292.8" y="654.4" textLength="817.4" clip-path="url(#terminal-3378394567-line-26)">generate&#160;subfolder&#160;thumbnails&#160;(first&#160;image&#160;in&#160;folder&#160;will&#160;be&#160;shown)</text><text class="terminal-3378394567-r2" x="1464" y="654.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-26)">
-</text><text class="terminal-1308707172-r2" x="292.8" y="678.8" textLength="597.8" clip-path="url(#terminal-1308707172-line-27)">Regenerate&#160;thumbnails&#160;even&#160;if&#160;they&#160;already&#160;exist.</text><text class="terminal-1308707172-r2" x="1464" y="678.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-27)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="678.8" textLength="244" clip-path="url(#terminal-3378394567-line-27)">--ignore-other-files</text><text class="terminal-3378394567-r2" x="292.8" y="678.8" textLength="671" clip-path="url(#terminal-3378394567-line-27)">ignore&#160;files&#160;that&#160;do&#160;not&#160;match&#160;the&#160;specified&#160;extensions</text><text class="terminal-3378394567-r2" x="1464" y="678.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-27)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="703.2" textLength="207.4" clip-path="url(#terminal-1308707172-line-28)">--reread-metadata</text><text class="terminal-1308707172-r2" x="292.8" y="703.2" textLength="256.2" clip-path="url(#terminal-1308707172-line-28)">Reread&#160;image&#160;metadata</text><text class="terminal-1308707172-r2" x="1464" y="703.2" textLength="12.2" clip-path="url(#terminal-1308707172-line-28)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="703.2" textLength="280.6" clip-path="url(#terminal-3378394567-line-28)">--regenerate-thumbnails</text><text class="terminal-3378394567-r2" x="1464" y="703.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-28)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="727.6" textLength="170.8" clip-path="url(#terminal-1308707172-line-29)">--reverse-sort</text><text class="terminal-1308707172-r2" x="292.8" y="727.6" textLength="353.8" clip-path="url(#terminal-1308707172-line-29)">Sort&#160;images&#160;in&#160;reverse&#160;order.</text><text class="terminal-1308707172-r2" x="1464" y="727.6" textLength="12.2" clip-path="url(#terminal-1308707172-line-29)">
+</text><text class="terminal-3378394567-r2" x="292.8" y="727.6" textLength="585.6" clip-path="url(#terminal-3378394567-line-29)">regenerate&#160;thumbnails&#160;even&#160;if&#160;they&#160;already&#160;exist</text><text class="terminal-3378394567-r2" x="1464" y="727.6" textLength="12.2" clip-path="url(#terminal-3378394567-line-29)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="752" textLength="146.4" clip-path="url(#terminal-1308707172-line-30)">--theme-path</text><text class="terminal-1308707172-r5" x="183" y="752" textLength="48.8" clip-path="url(#terminal-1308707172-line-30)">PATH</text><text class="terminal-1308707172-r2" x="292.8" y="752" textLength="329.4" clip-path="url(#terminal-1308707172-line-30)">Path&#160;to&#160;the&#160;CSS&#160;theme&#160;file.</text><text class="terminal-1308707172-r2" x="1464" y="752" textLength="12.2" clip-path="url(#terminal-1308707172-line-30)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="752" textLength="207.4" clip-path="url(#terminal-3378394567-line-30)">--reread-metadata</text><text class="terminal-3378394567-r2" x="292.8" y="752" textLength="256.2" clip-path="url(#terminal-3378394567-line-30)">reread&#160;image&#160;metadata</text><text class="terminal-3378394567-r2" x="1464" y="752" textLength="12.2" clip-path="url(#terminal-3378394567-line-30)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="776.4" textLength="231.8" clip-path="url(#terminal-1308707172-line-31)">--use-fancy-folders</text><text class="terminal-1308707172-r2" x="292.8" y="776.4" textLength="890.6" clip-path="url(#terminal-1308707172-line-31)">Enable&#160;fancy&#160;folder&#160;view&#160;instead&#160;of&#160;the&#160;default&#160;Apache&#160;directory&#160;listing.</text><text class="terminal-1308707172-r2" x="1464" y="776.4" textLength="12.2" clip-path="url(#terminal-1308707172-line-31)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="776.4" textLength="195.2" clip-path="url(#terminal-3378394567-line-31)">--reread-sidecar</text><text class="terminal-3378394567-r2" x="292.8" y="776.4" textLength="244" clip-path="url(#terminal-3378394567-line-31)">reread&#160;sidecar&#160;files</text><text class="terminal-3378394567-r2" x="1464" y="776.4" textLength="12.2" clip-path="url(#terminal-3378394567-line-31)">
-</text><text class="terminal-1308707172-r4" x="24.4" y="800.8" textLength="109.8" clip-path="url(#terminal-1308707172-line-32)">--version</text><text class="terminal-1308707172-r2" x="292.8" y="800.8" textLength="463.6" clip-path="url(#terminal-1308707172-line-32)">show&#160;program&#x27;s&#160;version&#160;number&#160;and&#160;exit</text><text class="terminal-1308707172-r2" x="1464" y="800.8" textLength="12.2" clip-path="url(#terminal-1308707172-line-32)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="800.8" textLength="170.8" clip-path="url(#terminal-3378394567-line-32)">--reverse-sort</text><text class="terminal-3378394567-r2" x="292.8" y="800.8" textLength="341.6" clip-path="url(#terminal-3378394567-line-32)">sort&#160;images&#160;in&#160;reverse&#160;order</text><text class="terminal-3378394567-r2" x="1464" y="800.8" textLength="12.2" clip-path="url(#terminal-3378394567-line-32)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="825.2" textLength="146.4" clip-path="url(#terminal-3378394567-line-33)">--theme-path</text><text class="terminal-3378394567-r5" x="183" y="825.2" textLength="48.8" clip-path="url(#terminal-3378394567-line-33)">PATH</text><text class="terminal-3378394567-r2" x="292.8" y="825.2" textLength="317.2" clip-path="url(#terminal-3378394567-line-33)">path&#160;to&#160;the&#160;CSS&#160;theme&#160;file</text><text class="terminal-3378394567-r2" x="1464" y="825.2" textLength="12.2" clip-path="url(#terminal-3378394567-line-33)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="849.6" textLength="231.8" clip-path="url(#terminal-3378394567-line-34)">--use-fancy-folders</text><text class="terminal-3378394567-r2" x="292.8" y="849.6" textLength="878.4" clip-path="url(#terminal-3378394567-line-34)">enable&#160;fancy&#160;folder&#160;view&#160;instead&#160;of&#160;the&#160;default&#160;Apache&#160;directory&#160;listing</text><text class="terminal-3378394567-r2" x="1464" y="849.6" textLength="12.2" clip-path="url(#terminal-3378394567-line-34)">
+</text><text class="terminal-3378394567-r4" x="24.4" y="874" textLength="109.8" clip-path="url(#terminal-3378394567-line-35)">--version</text><text class="terminal-3378394567-r2" x="292.8" y="874" textLength="463.6" clip-path="url(#terminal-3378394567-line-35)">show&#160;program&#x27;s&#160;version&#160;number&#160;and&#160;exit</text><text class="terminal-3378394567-r2" x="1464" y="874" textLength="12.2" clip-path="url(#terminal-3378394567-line-35)">
 </text>
     </g>
     </g>

modules/argumentparser.py

@@ -67,6 +67,7 @@ class Args:
     non_interactive_mode: bool
     regenerate_thumbnails: bool
     reread_metadata: bool
+    reread_sidecar: bool
     reverse_sort: bool
     root_directory: str
     site_title: str
@@ -87,6 +88,7 @@ class Args:
         result["non_interactive_mode"] = self.non_interactive_mode
         result["regenerate_thumbnails"] = self.regenerate_thumbnails
         result["reread_metadata"] = self.reread_metadata
+        result["reread_sidecar"] = self.reread_sidecar
         result["reverse_sort"] = self.reverse_sort
         result["root_directory"] = self.root_directory
         result["site_title"] = self.site_title
@@ -112,27 +114,28 @@ def parse_arguments(version: str) -> Args:
     """
     # fmt: off
     if RICH:
-        parser = argparse.ArgumentParser(description="Generate HTML files for a static image hosting website.", formatter_class=RichHelpFormatter)
+        parser = argparse.ArgumentParser(description="generate HTML files for a static image hosting website", formatter_class=RichHelpFormatter)
     else:
-        parser = argparse.ArgumentParser(description="Generate HTML files for a static image hosting website.")
+        parser = argparse.ArgumentParser(description="generate HTML files for a static image hosting website")
-    parser.add_argument("-a", "--author-name", help="Name of the author of the images.", default=DEFAULT_AUTHOR, type=str, dest="author_name", metavar="AUTHOR")
+    parser.add_argument("-a", "--author-name", help="name of the author of the images", default=DEFAULT_AUTHOR, type=str, dest="author_name", metavar="AUTHOR")
-    parser.add_argument("-e", "--file-extensions", help="File extensions to include (can be specified multiple times).", action="append", dest="file_extensions", metavar="EXTENSION")
+    parser.add_argument("-e", "--file-extensions", help="file extensions to include (can be specified multiple times)", action="append", dest="file_extensions", metavar="EXTENSION")
-    parser.add_argument("-l", "--license-type", help="Specify the license type for the images.", choices=["cc-zero", "cc-by", "cc-by-sa", "cc-by-nd", "cc-by-nc", "cc-by-nc-sa", "cc-by-nc-nd"], default=None, dest="license_type", metavar="LICENSE")
+    parser.add_argument("-l", "--license-type", help="specify the license type for the images", choices=["cc-zero", "cc-by", "cc-by-sa", "cc-by-nd", "cc-by-nc", "cc-by-nc-sa", "cc-by-nc-nd"], default=None, dest="license_type", metavar="LICENSE")
-    parser.add_argument("-m", "--web-manifest", help="Generate a web manifest file.", action="store_true", default=False, dest="generate_webmanifest")
+    parser.add_argument("-m", "--web-manifest", help="generate a web manifest file", action="store_true", default=False, dest="generate_webmanifest")
-    parser.add_argument("-n", "--non-interactive-mode", help="Run in non-interactive mode, disabling progress bars.", action="store_true", default=False, dest="non_interactive_mode")
+    parser.add_argument("-n", "--non-interactive-mode", help="run in non-interactive mode, disabling progress bars", action="store_true", default=False, dest="non_interactive_mode")
-    parser.add_argument("-p", "--root-directory", help="Root directory containing the images.", required=True, type=str, dest="root_directory", metavar="ROOT")
+    parser.add_argument("-p", "--root-directory", help="root directory containing the images", required=True, type=str, dest="root_directory", metavar="ROOT")
-    parser.add_argument("-t", "--site-title", help="Title of the image hosting site.", required=True, type=str, dest="site_title", metavar="TITLE")
+    parser.add_argument("-t", "--site-title", help="title of the image hosting site", required=True, type=str, dest="site_title", metavar="TITLE")
-    parser.add_argument("-w", "--web-root-url", help="Base URL of the web root for the image hosting site.", required=True, type=str, dest="web_root_url", metavar="URL")
+    parser.add_argument("-w", "--web-root-url", help="base URL of the web root for the image hosting site", required=True, type=str, dest="web_root_url", metavar="URL")
-    parser.add_argument("--exclude-folder", help="Folders to exclude from processing, globs supported (can be specified multiple times).", action="append", dest="exclude_folders", metavar="FOLDER")
+    parser.add_argument("--exclude-folder", help="folders to exclude from processing, globs supported (can be specified multiple times)", action="append", dest="exclude_folders", metavar="FOLDER")
-    parser.add_argument("--folderthumbnails", help="Generate subfolder thumbnails (first image in folder will be shown)", action="store_true", default=False, dest="folder_thumbs")
+    parser.add_argument("--folderthumbnails", help="generate subfolder thumbnails (first image in folder will be shown)", action="store_true", default=False, dest="folder_thumbs")
     if RICH:
         parser.add_argument("--generate-help-preview", action=HelpPreviewAction, path="help.svg", )
-    parser.add_argument("--ignore-other-files", help="Ignore files that do not match the specified extensions.", action="store_true", default=False, dest="ignore_other_files")
+    parser.add_argument("--ignore-other-files", help="ignore files that do not match the specified extensions", action="store_true", default=False, dest="ignore_other_files")
-    parser.add_argument("--regenerate-thumbnails", help="Regenerate thumbnails even if they already exist.", action="store_true", default=False, dest="regenerate_thumbnails")
+    parser.add_argument("--regenerate-thumbnails", help="regenerate thumbnails even if they already exist", action="store_true", default=False, dest="regenerate_thumbnails")
-    parser.add_argument("--reread-metadata", help="Reread image metadata", action="store_true", default=False, dest="reread_metadata")
+    parser.add_argument("--reread-metadata", help="reread image metadata", action="store_true", default=False, dest="reread_metadata")
-    parser.add_argument("--reverse-sort", help="Sort images in reverse order.", action="store_true", default=False, dest="reverse_sort")
+    parser.add_argument("--reread-sidecar", help="reread sidecar files", action="store_true", default=False, dest="reread_sidecar")
-    parser.add_argument("--theme-path", help="Path to the CSS theme file.", default=DEFAULT_THEME_PATH, type=str, dest="theme_path", metavar="PATH")
+    parser.add_argument("--reverse-sort", help="sort images in reverse order", action="store_true", default=False, dest="reverse_sort")
-    parser.add_argument("--use-fancy-folders", help="Enable fancy folder view instead of the default Apache directory listing.", action="store_true", default=False, dest="use_fancy_folders")
+    parser.add_argument("--theme-path", help="path to the CSS theme file", default=DEFAULT_THEME_PATH, type=str, dest="theme_path", metavar="PATH")
+    parser.add_argument("--use-fancy-folders", help="enable fancy folder view instead of the default Apache directory listing", action="store_true", default=False, dest="use_fancy_folders")
     parser.add_argument("--version", action="version", version=f"%(prog)s {version}")
     parsed_args = parser.parse_args()
     # fmt: on
@@ -147,6 +150,7 @@ def parse_arguments(version: str) -> Args:
         non_interactive_mode=parsed_args.non_interactive_mode,
         regenerate_thumbnails=parsed_args.regenerate_thumbnails,
         reread_metadata=parsed_args.reread_metadata,
+        reread_sidecar=parsed_args.reread_sidecar,
         reverse_sort=parsed_args.reverse_sort,
         root_directory=parsed_args.root_directory,
         site_title=parsed_args.site_title,

modules/generate_html.py

@@ -3,6 +3,7 @@ import re
 import urllib.parse
 import fnmatch
 import json
+import html
 from typing import Any
 from datetime import datetime
 from collections import defaultdict
@@ -11,6 +12,7 @@ from tqdm.auto import tqdm
 from PIL import Image, ExifTags, TiffImagePlugin, UnidentifiedImageError
 from jinja2 import Environment, FileSystemLoader
 from defusedxml import ElementTree
+from bs4 import BeautifulSoup
 
 from modules.logger import logger
 from modules import cclicense
@@ -242,6 +244,13 @@ def get_image_info(item: str, folder: str) -> dict[str, Any]:
             pass
         except KeyError:
             pass
+    sidecarfile = os.path.join(folder, item + ".xmp")
+    if os.path.exists(sidecarfile):
+        logger.info("xmp sidecar file found", extra={"file": sidecarfile})
+        try:
+            tags = get_tags(sidecarfile)
+        except Exception as e:
+            logger.error(e)
     if None in tags:
         tags.remove(None)
     return {"w": width, "h": height, "tags": tags, "exifdata": exifdata, "xmp": xmp}
@@ -261,7 +270,6 @@ def insert_path(d, path):
 
 def finalize(d):
     if isinstance(d, defaultdict):
-        # Sort keys before recursion
         return {k: finalize(d[k]) for k in sorted(d)}
     return d or []
 
@@ -342,10 +350,10 @@ def process_image(item: str, folder: str, _args: Args, baseurl: str, metadata: d
         dict[str, Any]: dictionary containing image details for HTML rendering.
     """
     extsplit = os.path.splitext(item)
+    sidecarfile = os.path.join(folder, item + ".xmp")
     if item not in metadata["images"] or _args.reread_metadata:
         metadata["images"][item] = get_image_info(item, folder)
-    sidecarfile = os.path.join(folder, item + ".xmp")
+    if _args.reread_sidecar and os.path.exists(sidecarfile):
-    if os.path.exists(sidecarfile):
         logger.info("xmp sidecar file found", extra={"file": sidecarfile})
         try:
             metadata["images"][item]["tags"] = get_tags(sidecarfile)
@@ -382,7 +390,7 @@ def process_image(item: str, folder: str, _args: Args, baseurl: str, metadata: d
     return image, metadata
 
 
-def generate_html(folder: str, title: str, _args: Args, raw: list[str], version: str, logo) -> list[str]:
+def generate_html(folder: str, title: str, _args: Args, raw: list[str], version: str, logo: str) -> list[str]:
     """
     Generates HTML content for a folder of images.
 
@@ -398,10 +406,7 @@ def generate_html(folder: str, title: str, _args: Args, raw: list[str], version:
             logger.info("removing .metadata.json", extra={"folder": folder})
             os.remove(os.path.join(folder, ".metadata.json"))
     metadata = initialize_metadata(folder)
-    if _args.reverse_sort:
+    items = sorted(os.listdir(folder))
-        items = sorted(os.listdir(folder), reverse=True)
-    else:
-        items = sorted(os.listdir(folder))
 
     contains_files = False
     images = []
@@ -448,6 +453,10 @@ def generate_html(folder: str, title: str, _args: Args, raw: list[str], version:
                         process_license(folder, item)
 
     metadata["subfolders"] = subfolders
+    if _args.reverse_sort:
+        metadata["images"] = {key: metadata["images"][key] for key in sorted(metadata["images"], reverse=True)}
+    else:
+        metadata["images"] = {key: metadata["images"][key] for key in sorted(metadata["images"])}
     update_metadata(metadata, folder)
 
     if should_generate_html(images, contains_files, _args):
@@ -499,26 +508,28 @@ def process_subfolder(item: str, folder: str, baseurl: str, subfolders: list[dic
             else:
                 thumb = f"{_args.web_root_url}.thumbnails/{baseurl}{urllib.parse.quote(item)}/{urllib.parse.quote(thumbitems[0])}.jpg"
 
-    subfolders.append({"url": subfolder_url, "name": item, "thumb": thumb, "metadata": f"{_args.web_root_url}{baseurl}{urllib.parse.quote(item)}/.metadata.json"})
     if item not in _args.exclude_folders:
         if not any(fnmatch.fnmatchcase(os.path.join(folder, item), exclude) for exclude in _args.exclude_folders):
+            subfolders.append({"url": subfolder_url, "name": item, "thumb": thumb, "metadata": f"{_args.web_root_url}{baseurl}{urllib.parse.quote(item)}/.metadata.json"})
             return generate_html(os.path.join(folder, item), os.path.join(folder, item).removeprefix(_args.root_directory), _args, raw, version, logo)
+    subfolders.append({"url": subfolder_url, "name": item, "thumb": thumb, "metadata": None})
     return []
 
 
 def process_license(folder: str, item: str) -> None:
     """
-    Processes a LICENSE file.
+    Processes a LICENSE file, preserving formatting in HTML.
 
     Args:
-        folder (str): The folder containing the info file.
+        folder (str): The folder containing the LICENSE file.
-        item (str): The licenses file name.
+        item (str): The LICENSE file name.
     """
-    with open(os.path.join(folder, item), encoding="utf-8") as f:
+    path = os.path.join(folder, item)
-        logger.info("processing LICENSE", extra={"path": os.path.join(folder, item)})
+    with open(path, encoding="utf-8") as f:
-        licens[urllib.parse.quote(folder)] = (
+        logger.info("processing LICENSE", extra={"path": path})
-            f.read().replace("\n", "</br>\n").replace("    ", "&emsp;").replace("  ", "&ensp;").replace("sp; ", "sp;&ensp;").replace("&ensp;&ensp;", "&emsp;")
+        raw_text = f.read()
-        )
+        escaped_text = html.escape(raw_text)
+        licens[urllib.parse.quote(folder)] = f"<pre>{escaped_text}</pre>"
 
 
 def process_info_file(folder: str, item: str) -> None:
@@ -548,6 +559,11 @@ def should_generate_html(images: list[dict[str, Any]], contains_files, _args: Ar
     return images or (_args.use_fancy_folders and not contains_files) or (_args.use_fancy_folders and _args.ignore_other_files)
 
 
+def format_html(html: str) -> str:
+    soup = BeautifulSoup(html, "html5lib")
+    return soup.prettify()
+
+
 def create_html_file(
     folder: str, title: str, foldername: str, images: list[dict[str, Any]], subfolders: list[dict[str, str]], _args: Args, version: str, logo: str, subfoldertags: list[str]
 ) -> list[str]:
@@ -583,7 +599,8 @@ def create_html_file(
 
     alltags = set()
     for img in images:
-        alltags.update(img["tags"])
+        if img["tags"]:
+            alltags.update(img["tags"])
 
     alltags.update(set(subfoldertags))
 
@@ -616,7 +633,7 @@ def create_html_file(
                 logo=logo,
                 licensefile=folder_license,
             )
-            f.write(content)
+            f.write(format_html(content))
 
     html = env.get_template("index.html.j2")
     content = html.render(
@@ -638,8 +655,8 @@ def create_html_file(
     )
 
     with open(html_file, "w", encoding="utf-8") as f:
-        logger.info("writing html file", extra={"path": html_file})
+        logger.info("writing formatted html file", extra={"path": html_file})
-        f.write(content)
+        f.write(format_html(content))
 
     return sorted(alltags)
 

modules/logger.py

@@ -95,7 +95,7 @@ def setup_logger(level=logging.INFO):
     """
     _logger = logging.getLogger(name="defaultlogger")
 
-    supported_keys = ["asctime", "created", "filename", "funcName", "levelname", "levelno", "lineno", "module", "msecs", "message", "name", "pathname", "process", "processName", "relativeCreated", "thread", "threadName", "taskName"]
+    supported_keys = ["asctime", "created", "filename", "funcName", "levelname", "levelno", "lineno", "module", "msecs", "message", "process", "processName", "relativeCreated", "thread", "threadName"]
 
     custom_format = " ".join(log_format(supported_keys))
     formatter = jsonlogger.JsonFormatter(custom_format)
@@ -121,7 +121,7 @@ def setup_consolelogger(level=logging.INFO):
     """
     _logger = logging.getLogger(name="consolelogger")
 
-    supported_keys = ["asctime", "created", "filename", "funcName", "levelname", "levelno", "lineno", "module", "msecs", "message", "name", "pathname", "process", "processName", "relativeCreated", "thread", "threadName", "taskName"]
+    supported_keys = ["asctime", "created", "filename", "funcName", "levelname", "levelno", "lineno", "module", "msecs", "message", "process", "processName", "relativeCreated", "thread", "threadName"]
 
     custom_format = " ".join(log_format(supported_keys))
     formatter = jsonlogger.JsonFormatter(custom_format)

modules/svg_handling.py

@@ -146,7 +146,7 @@ def render_manifest_json(_args: Args, icon_list: list[Icon], colors: dict[str, s
     colors : dict[str, str]
         dictionary containing color scheme and theme color.
     """
-    manifest = env.get_template("manifest.json.j2")
+    manifest = env.get_template("manifest.webmanifest.j2")
     content = manifest.render(
         name=_args.web_root_url.replace("https://", "").replace("http://", "").replace("/", ""),
         short_name=_args.site_title,
@@ -154,8 +154,8 @@ def render_manifest_json(_args: Args, icon_list: list[Icon], colors: dict[str, s
         background_color=colors["bcolor1"],
         theme_color=colors["theme_color"],
     )
-    with open(os.path.join(_args.root_directory, ".static", "manifest.json"), "w", encoding="utf-8") as f:
+    with open(os.path.join(_args.root_directory, ".static", "manifest.webmanifest"), "w", encoding="utf-8") as f:
-        logger.info("rendering manifest.json", extra={"path": os.path.join(_args.root_directory, ".static", "manifest.json")})
+        logger.info("rendering manifest.webmanifest", extra={"path": os.path.join(_args.root_directory, ".static", "manifest.webmanifest")})
         f.write(content)
 
 

requirements.txt

@@ -1,9 +1,12 @@
-CairoSVG==2.7.1
+beautifulsoup4~=4.13.4
-defusedxml==0.7.1
+CairoSVG~=2.7.1
-Jinja2==3.1.5
+defusedxml~=0.7.1
-Pillow==11.1.0
+html5lib~=1.1
-pyinstaller==6.11.1
+Jinja2~=3.1.6
-python_json_logger==2.0.7
+jsmin~=3.0.1
-rich_argparse==1.7.0
+Pillow~=11.3.0
-selenium==4.28.1
+pyinstaller~=6.11.1
-tqdm==4.66.4
+python_json_logger~=2.0.7
+rich_argparse~=1.7.1
+selenium~=4.34.2
+tqdm~=4.66.4

templates/default.css

@@ -52,7 +52,11 @@
   background-color: var(--color2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color7);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 

templates/functionality.js

@@ -0,0 +1,411 @@
+class PhotoGallery {
+  constructor() {
+    this.pswpElement = document.querySelector(".pswp");
+    this.re = /pid=(\d+)/;
+    this.filterRe = /#(.*)/;
+    this.recursiveRe = /\?recursive/;
+    this.items = [];
+    this.shown = [];
+    this.subfolders = [];
+    this.controllers = {};
+    this.tagDropdownShown = false;
+
+    this.debounce = this.debounce.bind(this);
+    this.openSwipe = this.openSwipe.bind(this);
+    this.prefetch = this.prefetch.bind(this);
+    this.cancel = this.cancel.bind(this);
+    this.reset = this.reset.bind(this);
+    this.recursive = this.recursive.bind(this);
+    this.requestMetadata = this.requestMetadata.bind(this);
+    this.filter = this.filter.bind(this);
+    this.updateImageList = this.updateImageList.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.toggleTag = this.toggleTag.bind(this);
+    this.setupDropdownToggle = this.setupDropdownToggle.bind(this);
+    this.setupTagHandlers = this.setupTagHandlers.bind(this);
+    this.setupClickHandlers = this.setupClickHandlers.bind(this);
+    this.scrollFunction = this.scrollFunction.bind(this);
+    this.topFunction = this.topFunction.bind(this);
+    this.onLoad = this.onLoad.bind(this);
+
+    this.init();
+  }
+
+  debounce(fn, delay) {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn.apply(this, args), delay);
+    };
+  }
+
+  openSwipe(imgIndex) {
+    const options = { index: imgIndex };
+    const gallery = new PhotoSwipe(
+      this.pswpElement,
+      PhotoSwipeUI_Default,
+      this.shown,
+      options
+    );
+    gallery.init();
+  }
+
+  prefetch(imgIndex) {
+    if (this.controllers[imgIndex]) {
+      this.cancel(imgIndex);
+    }
+    const controller = new AbortController();
+    const signal = controller.signal;
+    this.controllers[imgIndex] = controller;
+    const urlToFetch = this.items[imgIndex]?.src;
+    if (urlToFetch) {
+      fetch(urlToFetch, { method: "GET", signal }).catch(() => {});
+    }
+  }
+
+  cancel(imgIndex) {
+    if (this.controllers[imgIndex]) {
+      this.controllers[imgIndex].abort();
+      delete this.controllers[imgIndex];
+    }
+  }
+
+  reset() {
+    const curr = window.location.href.split("#");
+    const content = document.documentElement.innerHTML;
+    const title = document.title;
+    const folders = document.querySelector(".folders");
+    if (folders) folders.style.display = "";
+    document.getElementById("recursive").checked = false;
+    document
+      .querySelectorAll("#tagdropdown input.tagcheckbox:checked")
+      .forEach((checkbox) => (checkbox.checked = false));
+    window.history.replaceState(
+      { html: content, pageTitle: title },
+      "",
+      curr[0].split("?")[0] + "#"
+    );
+    this.requestMetadata();
+  }
+
+  async recursive() {
+    const curr = window.location.href.split("#");
+    const content = document.documentElement.innerHTML;
+    const title = document.title;
+    const isChecked = document.getElementById("recursive")?.checked;
+    const folders = document.querySelector(".folders");
+
+    if (!isChecked) {
+      if (folders) folders.style.display = "";
+      window.history.replaceState(
+        { html: content, pageTitle: title },
+        "",
+        curr[0].split("?")[0] + "#" + (curr[1] || "")
+      );
+      this.requestMetadata();
+      return;
+    }
+
+    if (folders) folders.style.display = "none";
+    window.history.replaceState(
+      { html: content, pageTitle: title },
+      "",
+      curr[0].split("?")[0] + "?recursive#" + (curr[1] || "")
+    );
+
+    const visited = new Set();
+    const existingItems = new Set();
+    const newItems = [];
+
+    try {
+      const response = await fetch(".metadata.json");
+      if (!response.ok) throw new Error("Failed to fetch metadata");
+      const data = await response.json();
+
+      this.items = [];
+      this.subfolders = data.subfolders || [];
+
+      for (const image of Object.values(data.images || {})) {
+        newItems.push(image);
+        existingItems.add(image.src);
+      }
+    } catch {
+      return;
+    }
+
+    const fetchFoldersRecursively = async (folderList) => {
+      if (!Array.isArray(folderList)) return;
+      const nextLevel = [];
+      await Promise.all(
+        folderList.map(async (folder) => {
+          if (!folder || !folder.metadata || visited.has(folder.url)) return;
+          visited.add(folder.url);
+          try {
+            const response = await fetch(folder.metadata);
+            if (!response.ok) throw new Error();
+            const data = await response.json();
+            for (const image of Object.values(data.images || {})) {
+              if (!existingItems.has(image.src)) {
+                newItems.push(image);
+                existingItems.add(image.src);
+              }
+            }
+            if (Array.isArray(data.subfolders))
+              nextLevel.push(...data.subfolders);
+          } catch {}
+        })
+      );
+      if (nextLevel.length > 0) await fetchFoldersRecursively(nextLevel);
+    };
+
+    await fetchFoldersRecursively(this.subfolders);
+    this.items = [...newItems];
+    this.filter();
+  }
+
+  requestMetadata() {
+    fetch(".metadata.json")
+      .then((response) => {
+        if (!response.ok) throw new Error("Failed to fetch metadata");
+        return response.json();
+      })
+      .then((data) => {
+        this.items = Object.values(data.images || {});
+        this.subfolders = data.subfolders || [];
+
+        if (this.filterRe.test(window.location.href)) {
+          const selected = window.location.href
+            .match(this.filterRe)[1]
+            .split(",");
+          this.setFilter(selected);
+        }
+        if (this.recursiveRe.test(window.location.href)) {
+          const recChk = document.getElementById("recursive");
+          if (recChk) recChk.checked = true;
+          this.recursive();
+        } else {
+          this.filter();
+        }
+        if (this.re.test(window.location.href)) {
+          const pid = window.location.href.match(this.re)[1];
+          this.openSwipe(parseInt(pid));
+        }
+      })
+      .catch(() => {});
+  }
+
+  filter() {
+    this.shown = [];
+    const curr = window.location.href.split("#")[0] + "#";
+    const path = decodeURIComponent(
+      window.location.href.split("#")[0].replace("index.html", "")
+    );
+    const selectedTags = [];
+
+    document
+      .querySelectorAll("#tagdropdown input.tagcheckbox:checked")
+      .forEach((checkbox) => {
+        let tag = checkbox.parentElement.id.trim().substring(1);
+        if (checkbox.parentElement.parentElement.children.length > 1)
+          tag += "|";
+        selectedTags.push(tag);
+      });
+
+    const urltags = selectedTags.join(",");
+
+    let isRecursiveChecked = false;
+    try {
+      isRecursiveChecked =
+        document.getElementById("recursive")?.checked || false;
+    } catch {}
+
+    for (const item of this.items) {
+      const tags = item.tags || [];
+      const include = selectedTags.every((selected) => {
+        const isParent = selected.endsWith("|");
+        return isParent
+          ? tags.some((t) => t.startsWith(selected))
+          : tags.includes(selected);
+      });
+
+      if (include || selectedTags.length === 0) {
+        if (!isRecursiveChecked) {
+          if (decodeURIComponent(item.src.replace(item.name, "")) === path) {
+            this.shown.push(item);
+          }
+        } else {
+          this.shown.push(item);
+        }
+      }
+    }
+    this.updateImageList();
+    window.location.href = curr + urltags;
+  }
+
+  updateImageList() {
+    const imagelist = document.getElementById("imagelist");
+    if (!imagelist) return;
+    let str = "";
+    this.shown.forEach((item, index) => {
+      str += `<div class="column"><figure><img src="${item.msrc}" data-index="${index}" /><figcaption class="caption">${item.name}`;
+      if (item.tiff) str += ` <a href="${item.tiff}">TIFF</a>`;
+      if (item.raw) str += ` <a href="${item.raw}">RAW</a>`;
+      str += "</figcaption></figure></div>";
+    });
+    imagelist.innerHTML = str;
+  }
+
+  setFilter(selected) {
+    document
+      .querySelectorAll("#tagdropdown input.tagcheckbox")
+      .forEach((checkbox) => {
+        selected.forEach((tag) => {
+          if (
+            checkbox.parentElement.id
+              .trim()
+              .substring(1)
+              .replace(" ", "%20") === tag
+          ) {
+            checkbox.checked = true;
+          }
+        });
+      });
+  }
+
+  toggleTag(tagid) {
+    const tag = document.getElementById(tagid);
+    const ol = tag?.closest(".tagentry")?.querySelector(".tagentryparent");
+    const svg = tag?.parentElement.querySelector(".tagtoggle svg");
+    if (!ol || !svg) return;
+    ol.classList.toggle("show");
+    svg.style.transform = ol.classList.contains("show")
+      ? "rotate(180deg)"
+      : "rotate(0deg)";
+  }
+
+  setupDropdownToggle() {
+    const toggleLink = document.getElementById("tagtogglelink");
+    const dropdown = document.getElementById("tagdropdown");
+    if (!toggleLink) return;
+
+    toggleLink.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const svg = toggleLink.querySelector("svg");
+      dropdown.classList.toggle("show");
+      if (svg)
+        svg.style.transform = dropdown.classList.contains("show")
+          ? "rotate(180deg)"
+          : "rotate(0deg)";
+      this.tagDropdownShown = dropdown.classList.contains("show");
+    });
+
+    document.addEventListener("click", (event) => {
+      if (
+        !dropdown.contains(event.target) &&
+        !toggleLink.contains(event.target)
+      ) {
+        dropdown.classList.remove("show");
+        this.tagDropdownShown = false;
+        const svg = toggleLink.querySelector("svg");
+        if (svg) svg.style.transform = "rotate(0deg)";
+      }
+    });
+  }
+
+  setupTagHandlers() {
+    const tagContainer = document.getElementById("tagdropdown");
+    if (!tagContainer) return;
+
+    const debouncedFilter = this.debounce(this.filter, 150);
+    tagContainer.addEventListener("change", debouncedFilter);
+
+    tagContainer.addEventListener("click", (event) => {
+      const toggle = event.target.closest(".tagtoggle");
+      if (toggle) {
+        event.stopPropagation();
+        const tagid = toggle.dataset.toggleid;
+        this.toggleTag(tagid);
+      }
+    });
+  }
+
+  setupClickHandlers() {
+    const resetEl = document
+      .getElementById("reset-filter")
+      ?.querySelector("label");
+    if (resetEl) resetEl.addEventListener("click", this.reset);
+
+    const recurseEl = document.getElementById("recursive");
+    if (recurseEl)
+      recurseEl.addEventListener("change", this.debounce(this.recursive, 150));
+
+    const totop = document.getElementById("totop");
+    if (totop) totop.addEventListener("click", this.topFunction);
+
+    const imagelist = document.getElementById("imagelist");
+    if (imagelist) {
+      imagelist.addEventListener("click", (event) => {
+        const img = event.target.closest("img");
+        if (!img || !img.dataset.index) return;
+        const index = parseInt(img.dataset.index);
+        if (!isNaN(index)) this.openSwipe(index);
+      });
+
+      imagelist.addEventListener("mouseover", (event) => {
+        const img = event.target.closest("img");
+        if (!img || !img.dataset.index) return;
+        const index = parseInt(img.dataset.index);
+        if (!isNaN(index)) this.prefetch(index);
+      });
+
+      imagelist.addEventListener("mouseleave", (event) => {
+        const img = event.target.closest("img");
+        if (!img || !img.dataset.index) return;
+        const index = parseInt(img.dataset.index);
+        if (!isNaN(index)) this.cancel(index);
+      });
+    }
+  }
+
+  scrollFunction() {
+    const totopbutton = document.getElementById("totop");
+    if (!totopbutton) return;
+    if (
+      document.body.scrollTop > 20 ||
+      document.documentElement.scrollTop > 20
+    ) {
+      totopbutton.style.display = "block";
+    } else {
+      totopbutton.style.display = "none";
+    }
+  }
+
+  topFunction() {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  onLoad() {
+    document.querySelectorAll(".tagtoggle").forEach((toggle) => {
+      toggle.addEventListener("mouseup", (event) => {
+        event.stopPropagation();
+        const tagid = toggle.getAttribute("data-tagid");
+        this.toggleTag(tagid);
+      });
+    });
+
+    this.requestMetadata();
+    this.setupDropdownToggle();
+    this.setupTagHandlers();
+    this.setupClickHandlers();
+
+    window.addEventListener("scroll", this.scrollFunction);
+  }
+
+  init() {
+    if (window.addEventListener) {
+      window.addEventListener("load", this.onLoad, false);
+    } else if (window.attachEvent) {
+      window.attachEvent("onload", this.onLoad);
+    }
+  }
+}

templates/index.html.j2

@@ -1,16 +1,24 @@
 {%- macro render_tags(tag_tree, parent) -%}
-<ol>
+{%- for key, value in tag_tree.items() %}
-  {%- for key, value in tag_tree.items() %}
+<li class="tagentry">
-  <li class="tagentry">
+  <div class="tagflex">
-    <label onclick="filter()" title="{{ key }}" id="{{ parent }}|{{ key }}">
+    <label class="tag" title="{{ key }}" id="{{ parent }}|{{ key }}">
-      <input class="tag" type="checkbox" />{{ key }}
+      <input type="checkbox" class="tagcheckbox" />{{ key }}
-    </label>
+    </label>{% if value %} <span class="tagtoggle" data-tagid="{{ parent }}|{{ key }}">
-    {%- if value %}
+      <svg width="1em" height="1em" viewBox="0 0 129.87601 129.87624">
+        <g id="layer1" transform="translate(-33.816833,-52.685642)">
+          <path stroke="currentColor" style="fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+            d="M 54.476483,95.484647 98.754836,139.76308 143.03319,95.484647" id="path1" />
+        </g>
+      </svg></span>{% endif %}
+  </div>
+  {%- if value %}
+  <ol class="tagentryparent">
     {{ render_tags(value, parent + '|' + key) }}
-    {%- endif %}
+  </ol>
-  </li>
+  {%- endif %}
-  {%- endfor %}
+</li><br>
-</ol>
+{%- endfor %}
 {%- endmacro -%}
 <!DOCTYPE html>
 <html lang="en">
@@ -20,7 +28,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }}</title>
   {%- if webmanifest %}
-  <link rel="manifest" href="/.static/manifest.json">
+  <link rel="manifest" href="/.static/manifest.webmanifest">
   {%- endif %}
   <link rel="preload" href="{{ stylesheet }}" as="style">
   {%- if theme %}
@@ -35,10 +43,12 @@
   <link rel="preload" href="{{ root }}.static/pswp/default-skin/default-skin.css" as="style">
   <link rel="modulepreload" href="{{ root }}.static/pswp/photoswipe.min.js">
   <link rel="modulepreload" href="{{ root }}.static/pswp/photoswipe-ui-default.min.js">
+  <link rel="modulepreload" href="{{ root }}.static/functionality.min.js">
   <link rel="stylesheet" href="{{ root }}.static/pswp/photoswipe.css">
   <link rel="stylesheet" href="{{ root }}.static/pswp/default-skin/default-skin.css">
   <script src="{{ root }}.static/pswp/photoswipe.min.js"></script>
   <script src="{{ root }}.static/pswp/photoswipe-ui-default.min.js"></script>
+  <script src="{{ root }}.static/functionality.min.js"></script>
 </head>
 
 <body>
@@ -63,10 +73,16 @@
       <div class="navright">
         {% if tags %}
         <li class="tooltip">
-          <a>Filter by Tags</a>
+          <a id="tagtogglelink">Filter by Tags <svg width="0.8em" height="0.8em" viewBox="0 0 129.87601 129.87624">
+              <g id="layer1" transform="translate(-33.816833,-52.685642)">
+                <path stroke="currentColor" style="fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+                  d="M 54.476483,95.484647 98.754836,139.76308 143.03319,95.484647" id="path1" />
+              </g>
+            </svg></a>
           <ol class="tooltiptext tagdropdown" id="tagdropdown">
+            <span class="tagentry" id="reset-filter"><label>reset filter</label></span>
             <span class="tagentry">
-              <label onclick="recursive()">
+              <label>
                 <input type="checkbox" id="recursive" />recursive filter
               </label>
             </span>
@@ -80,9 +96,6 @@
       </div>
     </ol>
     {% if subdirectories %}
-    {%- for subdirectory in subdirectories %}
-    <link rel="preload" href="{{ subdirectory.url }}/index.html" type="text/html">
-    {%- endfor %}
     <div class="folders">
       {%- for subdirectory in subdirectories %}
       <a href="{{ subdirectory.url }}">
@@ -120,14 +133,14 @@
     {%- endif %}
     <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder {{ version }}</a> by <a
         href="https://github.com/greflm13" target="_blank" rel="noopener noreferrer">{{ logo }}</a>.</span>
-    <button type="button" onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
+    <button type="button" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}
   {%- else %}
   <div class="footer">
     <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder {{ version }}</a> by <a
         href="https://github.com/greflm13" target="_blank" rel="noopener noreferrer">{{ logo }}</a>.</span>
-    <button type="button" onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
+    <button type="button" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}
   <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
@@ -166,186 +179,9 @@
       </div>
     </div>
   </div>
-  <script>
-    const pswpElement = document.querySelectorAll('.pswp')[0];
-    const re = /pid=(\d+)/;
-    const filterre = /#(.*)/;
-    let items = [];
-    let shown = [];
-    let subfolders = [];
-    let controllers = {};
-
-    function requestMetadata() {
-      fetch(".metadata.json").then(response => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        return response.json();
-      })
-        .then(data => {
-          items = Object.values(data.images);
-          subfolders = data.subfolders;
-          if (filterre.test(window.location.href)) {
-            var selected = window.location.href.match(filterre)[1].split(",");
-            setFilter(selected);
-          }
-          filter();
-
-          if (re.test(window.location.href)) {
-            var pid = window.location.href.match(re)[1];
-            openSwipe(parseInt(pid));
-          }
-        })
-        .catch(error => console.error('Failed to fetch data:', error));
-    }
-
-    function openSwipe(img) {
-      const options = {
-        index: img
-      };
-      const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, shown, options);
-      gallery.init();
-    }
-
-    async function recursive(sub = undefined) {
-      const ischecked = document.getElementById("recursive").checked;
-      const folders = document.getElementsByClassName("folders")[0];
-      if (sub == undefined) {
-        sub = subfolders;
-      }
-      if (ischecked) {
-        if (folders != undefined) {
-          folders.style.display = "none";
-        }
-        for (const folder of sub) {
-          try {
-            const response = await fetch(folder.metadata);
-            const data = await response.json();
-            if (data.subfolders.length > 0) {
-              await recursive(data.subfolders);
-            }
-            items = items.concat(Object.values(data.images));
-            filter();
-          } catch (error) {
-            console.error('Failed to fetch folder metadata:', error);
-          }
-        }
-      } else {
-        if (folders != undefined) {
-          folders.style.display = "";
-        }
-        requestMetadata();
-      }
-    }
-
-    const totopbutton = document.getElementById("totop");
-
-    window.onscroll = function () { scrollFunction() };
-
-    function scrollFunction() {
-      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-        totopbutton.style.display = "block";
-      } else {
-        totopbutton.style.display = "none";
-      }
-    }
-
-    function topFunction() {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    }
-
-    function updateImageList() {
-      let str = ""
-      let imagelist = document.getElementById("imagelist");
-      shown.forEach((item, index) => {
-        str += '<div class="column"><figure><img src="' + item.msrc + '" onclick="openSwipe(' + index + ')" onmouseover="prefetch(' + index + ')" onmouseleave="cancel(' + index + ')" /><figcaption class="caption">' + item.name;
-        if (item.tiff != "" & item.tiff != undefined) {
-          str += ' <a href="' + item.tiff + '">TIFF</a>';
-        }
-        if (item.raw != "" & item.raw != undefined) {
-          str += ' <a href="' + item.raw + '">RAW</a>';
-        }
-        str += '</figcaption></figure></div>';
-      });
-
-      imagelist.innerHTML = str;
-    }
-
-    function prefetch(img) {
-      const controller = new AbortController()
-      const signal = controller.signal
-      controllers[img] = controller;
-      let urlToFetch = items[img].src;
-
-      fetch(urlToFetch, {
-        method: 'get',
-        signal: signal,
-      }).catch(function (err) { });
-    }
-
-    function cancel(img) {
-      controllers[img].abort();
-      delete controllers[img];
-    }
-
-    function filter() {
-      shown = [];
-
-      const curr = window.location.href.split("#")[0] + "#";
-      const path = window.location.href.split("#")[0].replace("index.html", "");
-
-      const selected_tags = [];
-      const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']:checked");
-
-      tagcheckboxes.forEach((checkbox) => {
-        const tag = checkbox.parentElement.id.trim().substring(1);
-        selected_tags.push(tag);
-      });
-
-      const urltags = selected_tags.join(",");
-
-      const isRecursiveChecked = document.getElementById("recursive").checked;
-
-      for (const item of items) {
-        const tags = item.tags || [];
-        const include = selected_tags.every(tag => tags.some(t => t.startsWith(tag)));
-
-        if (include || selected_tags.length === 0) {
-          if (!isRecursiveChecked) {
-            if (item.src.replace(item.name, "") == path) {
-              shown.push(item);
-            }
-          }
-          else {
-            shown.push(item);
-          }
-        }
-      }
-
-      updateImageList();
-      window.location.href = curr + urltags;
-    }
-
-    function setFilter(selected) {
-      const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']");
-      selected.forEach((tag) => {
-        tagcheckboxes.forEach((checkbox) => {
-          if (checkbox.parentElement.id.trim().substring(1).replace(" ", "%20") == tag) {
-            checkbox.checked = true;
-          }
-        });
-      });
-    }
-
-    function onLoad() {
-      requestMetadata();
-    }
-
-    window.addEventListener ?
-      window.addEventListener("load", onLoad, false) :
-      window.attachEvent && window.attachEvent("onload", onLoad);
-
-  </script>
 </body>
+<script>
+  new PhotoGallery();
+</script>
 
 </html>

templates/license.html.j2

@@ -21,13 +21,16 @@
 
 <body>
   <div class="header">
-    <ul class="navbar">
+    <ol class="navbar">
-      <li><a href="{{ root }}">Home</a></li>
+      <div class="navleft">
-      {%- if parent %}
+        <li><a href="{{ root }}">Home</a></li>
-      <li><a href="{{ parent }}">Parent Directory</a></li>
+        {%- if parent %}
-      {%- endif %}
+        <li><a href="{{ parent }}">Parent Directory</a></li>
-      <li class="title"><span class="header">{{ header }}</span></li>
+        {%- endif %}
-    </ul>
+      </div>
+      <div class="navcenter">
+        <li class="title"><span class="header">{{ header }}</span></li>
+      </div>
   </div>
   {%- if licensefile %}
   <div class="licensefile">

test/example/DSC03470.JPG.xmp

@@ -1,7 +1,39 @@
 <?xml version="1.0" encoding="utf-8"?>
 <x:xmpmeta x:xmptk="XMP Core 4.4.0-Exiv2" xmlns:x="adobe:ns:meta/">
-<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmpMM:DerivedFrom="DSC03470.JPG">
+        <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"
-<dc:subject><rdf:Bag><rdf:li>st</rdf:li><rdf:li>bus</rdf:li><rdf:li>illuminate</rdf:li><rdf:li>neon</rdf:li><rdf:li>neon light</rdf:li><rdf:li>night</rdf:li><rdf:li>sign</rdf:li><rdf:li>train car</rdf:li><rdf:li>trolley</rdf:li><rdf:li>window</rdf:li></rdf:Bag></dc:subject><lr:hierarchicalSubject><rdf:Bag><rdf:li>st|bus</rdf:li><rdf:li>st|illuminate</rdf:li><rdf:li>st|neon</rdf:li><rdf:li>st|neon light</rdf:li><rdf:li>st|night</rdf:li><rdf:li>st|sign</rdf:li><rdf:li>st|train car</rdf:li><rdf:li>st|trolley</rdf:li><rdf:li>st|window</rdf:li></rdf:Bag></lr:hierarchicalSubject></rdf:Description>
+            xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/"
-</rdf:RDF>
+            xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+            xmpMM:DerivedFrom="DSC03470.JPG">
+            <dc:subject>
+                <rdf:Bag>
+                    <rdf:li>st</rdf:li>
+                    <rdf:li>bus</rdf:li>
+                    <rdf:li>illuminate</rdf:li>
+                    <rdf:li>neon</rdf:li>
+                    <rdf:li>neon light</rdf:li>
+                    <rdf:li>night</rdf:li>
+                    <rdf:li>sign</rdf:li>
+                    <rdf:li>train car</rdf:li>
+                    <rdf:li>trolley</rdf:li>
+                    <rdf:li>window</rdf:li>
+                    <rdf:li>train</rdf:li>
+                </rdf:Bag>
+            </dc:subject>
+            <lr:hierarchicalSubject>
+                <rdf:Bag>
+                    <rdf:li>st|bus</rdf:li>
+                    <rdf:li>st|illuminate</rdf:li>
+                    <rdf:li>st|neon</rdf:li>
+                    <rdf:li>st|neon light</rdf:li>
+                    <rdf:li>st|night</rdf:li>
+                    <rdf:li>st|sign</rdf:li>
+                    <rdf:li>st|train car</rdf:li>
+                    <rdf:li>st|trolley</rdf:li>
+                    <rdf:li>st|window</rdf:li>
+                    <rdf:li>st|train</rdf:li>
+                </rdf:Bag>
+            </lr:hierarchicalSubject>
+        </rdf:Description>
+    </rdf:RDF>
 </x:xmpmeta>

test/example/DSC03508.JPG.xmp

@@ -1,7 +1,49 @@
 <?xml version="1.0" encoding="utf-8"?>
 <x:xmpmeta x:xmptk="XMP Core 4.4.0-Exiv2" xmlns:x="adobe:ns:meta/">
-<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmpMM:DerivedFrom="DSC03508.JPG">
+        <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"
-<dc:subject><rdf:Bag><rdf:li>st</rdf:li><rdf:li>attach</rdf:li><rdf:li>basement</rdf:li><rdf:li>beam</rdf:li><rdf:li>building</rdf:li><rdf:li>ceiling</rdf:li><rdf:li>equipment</rdf:li><rdf:li>floor</rdf:li><rdf:li>pipe</rdf:li><rdf:li>red</rdf:li><rdf:li>room</rdf:li><rdf:li>scaffold</rdf:li><rdf:li>tube</rdf:li><rdf:li>warehouse</rdf:li><rdf:li>water pipe</rdf:li></rdf:Bag></dc:subject><lr:hierarchicalSubject><rdf:Bag><rdf:li>st|attach</rdf:li><rdf:li>st|basement</rdf:li><rdf:li>st|beam</rdf:li><rdf:li>st|building</rdf:li><rdf:li>st|ceiling</rdf:li><rdf:li>st|equipment</rdf:li><rdf:li>st|floor</rdf:li><rdf:li>st|pipe</rdf:li><rdf:li>st|red</rdf:li><rdf:li>st|room</rdf:li><rdf:li>st|scaffold</rdf:li><rdf:li>st|tube</rdf:li><rdf:li>st|warehouse</rdf:li><rdf:li>st|water pipe</rdf:li></rdf:Bag></lr:hierarchicalSubject></rdf:Description>
+            xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/"
-</rdf:RDF>
+            xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+            xmpMM:DerivedFrom="DSC03508.JPG">
+            <dc:subject>
+                <rdf:Bag>
+                    <rdf:li>st</rdf:li>
+                    <rdf:li>attach</rdf:li>
+                    <rdf:li>basement</rdf:li>
+                    <rdf:li>beam</rdf:li>
+                    <rdf:li>building</rdf:li>
+                    <rdf:li>ceiling</rdf:li>
+                    <rdf:li>equipment</rdf:li>
+                    <rdf:li>floor</rdf:li>
+                    <rdf:li>pipe</rdf:li>
+                    <rdf:li>red</rdf:li>
+                    <rdf:li>room</rdf:li>
+                    <rdf:li>scaffold</rdf:li>
+                    <rdf:li>tube</rdf:li>
+                    <rdf:li>warehouse</rdf:li>
+                    <rdf:li>water pipe</rdf:li>
+                    <rdf:li>train</rdf:li>
+                </rdf:Bag>
+            </dc:subject>
+            <lr:hierarchicalSubject>
+                <rdf:Bag>
+                    <rdf:li>st|attach</rdf:li>
+                    <rdf:li>st|basement</rdf:li>
+                    <rdf:li>st|beam</rdf:li>
+                    <rdf:li>st|building</rdf:li>
+                    <rdf:li>st|ceiling</rdf:li>
+                    <rdf:li>st|equipment</rdf:li>
+                    <rdf:li>st|floor</rdf:li>
+                    <rdf:li>st|pipe</rdf:li>
+                    <rdf:li>st|red</rdf:li>
+                    <rdf:li>st|room</rdf:li>
+                    <rdf:li>st|scaffold</rdf:li>
+                    <rdf:li>st|tube</rdf:li>
+                    <rdf:li>st|warehouse</rdf:li>
+                    <rdf:li>st|water pipe</rdf:li>
+                    <rdf:li>st|train</rdf:li>
+                </rdf:Bag>
+            </lr:hierarchicalSubject>
+        </rdf:Description>
+    </rdf:RDF>
 </x:xmpmeta>

test/example/example.jpg.xmp

@@ -1,7 +1,35 @@
 <?xml version="1.0" encoding="utf-8"?>
 <x:xmpmeta x:xmptk="XMP Core 4.4.0-Exiv2" xmlns:x="adobe:ns:meta/">
-<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmpMM:DerivedFrom="example.jpg">
+        <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"
-<dc:subject><rdf:Bag><rdf:li>st</rdf:li><rdf:li>cloud</rdf:li><rdf:li>cloudy</rdf:li><rdf:li>evening sky</rdf:li><rdf:li>sea</rdf:li><rdf:li>sky</rdf:li><rdf:li>storm cloud</rdf:li><rdf:li>stormy</rdf:li><rdf:li>sun</rdf:li><rdf:li>sunset</rdf:li></rdf:Bag></dc:subject><lr:hierarchicalSubject><rdf:Bag><rdf:li>st|cloud</rdf:li><rdf:li>st|cloudy</rdf:li><rdf:li>st|evening sky</rdf:li><rdf:li>st|sea</rdf:li><rdf:li>st|sky</rdf:li><rdf:li>st|storm cloud</rdf:li><rdf:li>st|stormy</rdf:li><rdf:li>st|sun</rdf:li><rdf:li>st|sunset</rdf:li></rdf:Bag></lr:hierarchicalSubject></rdf:Description>
+            xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/"
-</rdf:RDF>
+            xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+            xmpMM:DerivedFrom="example.jpg">
+            <dc:subject>
+                <rdf:Bag>
+                    <rdf:li>st</rdf:li>
+                    <rdf:li>cloudy</rdf:li>
+                    <rdf:li>evening sky</rdf:li>
+                    <rdf:li>sea</rdf:li>
+                    <rdf:li>sky</rdf:li>
+                    <rdf:li>storm cloud</rdf:li>
+                    <rdf:li>stormy</rdf:li>
+                    <rdf:li>sun</rdf:li>
+                    <rdf:li>sunset</rdf:li>
+                </rdf:Bag>
+            </dc:subject>
+            <lr:hierarchicalSubject>
+                <rdf:Bag>
+                    <rdf:li>st|cloudy</rdf:li>
+                    <rdf:li>st|evening sky</rdf:li>
+                    <rdf:li>st|sea</rdf:li>
+                    <rdf:li>st|sky</rdf:li>
+                    <rdf:li>st|storm cloud</rdf:li>
+                    <rdf:li>st|stormy</rdf:li>
+                    <rdf:li>st|sun</rdf:li>
+                    <rdf:li>st|sunset</rdf:li>
+                </rdf:Bag>
+            </lr:hierarchicalSubject>
+        </rdf:Description>
+    </rdf:RDF>
 </x:xmpmeta>

test/example/subfolder/DSC01106.jpg.xmp

@@ -1,7 +1,30 @@
 <?xml version="1.0" encoding="utf-8"?>
 <x:xmpmeta x:xmptk="XMP Core 4.4.0-Exiv2" xmlns:x="adobe:ns:meta/">
-<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmpMM:DerivedFrom="DSC01106.jpg">
+        <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"
-<dc:subject><rdf:Bag><rdf:li>st</rdf:li><rdf:li>clear</rdf:li><rdf:li>dark</rdf:li><rdf:li>moon</rdf:li><rdf:li>night</rdf:li><rdf:li>night sky</rdf:li><rdf:li>sky</rdf:li></rdf:Bag></dc:subject><lr:hierarchicalSubject><rdf:Bag><rdf:li>st|clear</rdf:li><rdf:li>st|dark</rdf:li><rdf:li>st|moon</rdf:li><rdf:li>st|night</rdf:li><rdf:li>st|night sky</rdf:li><rdf:li>st|sky</rdf:li></rdf:Bag></lr:hierarchicalSubject></rdf:Description>
+            xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/"
-</rdf:RDF>
+            xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+            xmpMM:DerivedFrom="DSC01106.jpg">
+            <dc:subject>
+                <rdf:Bag>
+                    <rdf:li>st</rdf:li>
+                    <rdf:li>clear</rdf:li>
+                    <rdf:li>dark</rdf:li>
+                    <rdf:li>moon</rdf:li>
+                    <rdf:li>night</rdf:li>
+                    <rdf:li>night sky</rdf:li>
+                    <rdf:li>sky</rdf:li>
+                </rdf:Bag>
+            </dc:subject>
+            <lr:hierarchicalSubject>
+                <rdf:Bag>
+                    <rdf:li>st|clear</rdf:li>
+                    <rdf:li>st|dark</rdf:li>
+                    <rdf:li>st|moon</rdf:li>
+                    <rdf:li>st|night</rdf:li>
+                    <rdf:li>st|sky|night sky</rdf:li>
+                </rdf:Bag>
+            </lr:hierarchicalSubject>
+        </rdf:Description>
+    </rdf:RDF>
 </x:xmpmeta>

test/example/subfolder/subsubfolder (now with symbols)/000041900001.jpg.xmp

@@ -9,7 +9,6 @@
                 <rdf:Bag>
                     <rdf:li>st</rdf:li>
                     <rdf:li>cloud</rdf:li>
-                    <rdf:li>cloudy</rdf:li>
                     <rdf:li>fly</rdf:li>
                     <rdf:li>sky</rdf:li>
                 </rdf:Bag>
@@ -17,7 +16,6 @@
             <lr:hierarchicalSubject>
                 <rdf:Bag>
                     <rdf:li>st|cloud</rdf:li>
-                    <rdf:li>st|cloudy</rdf:li>
                     <rdf:li>st|fly</rdf:li>
                     <rdf:li>st|sky</rdf:li>
                 </rdf:Bag>

themes/alpenglow-dark.css

@@ -97,7 +97,11 @@ body {
   background-color: var(--color6);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color3);
 }
 

themes/alpenglow.css

@@ -96,7 +96,11 @@ body {
   background-color: var(--color3);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color7);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color7);
 }
 

themes/aritim-dark.css

@@ -74,7 +74,11 @@
   background-color: var(--bcolor1);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 

themes/aritim.css

@@ -74,7 +74,11 @@
   background-color: var(--bcolor1);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 

themes/autumn.css

@@ -79,7 +79,11 @@
   font-family: "Playfair Display", serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color3);
 }
 

themes/carnation.css

@@ -73,7 +73,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 

themes/catpuccin.css

@@ -79,7 +79,11 @@
   font-family: "Nunito", sans-serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 

themes/cornflower.css

@@ -73,7 +73,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 

themes/default-dark.css

@@ -52,7 +52,11 @@
   background-color: var(--color3);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 

themes/default.css

@@ -52,7 +52,11 @@
   background-color: var(--color2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color4);
 }
 

themes/ivy.css

@@ -73,7 +73,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 

themes/kjoe.css

@@ -72,7 +72,11 @@
   background-color: var(--color3);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color2);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color2);
 }
 

themes/monokai-vibrant.css

@@ -55,7 +55,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 

themes/rainbow.css

@@ -76,7 +76,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 

themes/spring.css

@@ -79,7 +79,11 @@
   font-family: "Lora", serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
 }
 

themes/steam.css

@@ -80,7 +80,11 @@
   background-color: var(--color4);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color3);
 }
 

themes/summer.css

@@ -80,7 +80,11 @@
   font-family: "Roboto", sans-serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor3);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor3);
   color: var(--bcolor2);
 }

themes/sunflower.css

@@ -74,7 +74,11 @@
   background-color: var(--bcolor2);
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--bcolor4);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--bcolor4);
 }
 

themes/winter.css

@@ -88,7 +88,11 @@
   font-family: "Montserrat", sans-serif;
 }
 
-.tagentry > label:hover {
+.tagentry label:hover {
+  background-color: var(--color2);
+}
+
+.tagentry .tagtoggle:hover {
   background-color: var(--color2);
 }