added info tooltip

builder.py

@@ -31,6 +31,7 @@ NOT_LIST = ["Galleries", "Archives"]
 # Initialize Jinja2 environment
 env = Environment(loader=FileSystemLoader(os.path.join(os.path.abspath(os.path.dirname(__file__)), "templates")))
 thumbnails: List[Tuple[str, str]] = []
+info: Dict[str, str] = {}
 
 
 class Args:
@@ -97,9 +98,9 @@ def init_globals(_args: Args) -> Args:
     return _args
 
 
-def copy_static_files(args: Args) -> None:
-    shutil.copytree(STATIC_FILES_DIR, os.path.join(args.root_directory, ".static"), dirs_exist_ok=True)
-    shutil.copyfile(args.theme_path, os.path.join(args.root_directory, ".static", "theme.css"))
+def copy_static_files(_args: Args) -> None:
+    shutil.copytree(STATIC_FILES_DIR, os.path.join(_args.root_directory, ".static"), dirs_exist_ok=True)
+    shutil.copyfile(_args.theme_path, os.path.join(_args.root_directory, ".static", "theme.css"))
 
 
 def generate_thumbnail(arguments: Tuple[str, str]) -> None:
@@ -171,12 +172,17 @@ def list_folder(folder: str, title: str) -> None:
                             else:
                                 image["raw"] = f"{args.web_root_url}{baseurl}{url}"
                     images.append(image)
+                if item == "info":
+                    with open(os.path.join(folder, item), encoding="utf-8") as f:
+                        _info = f.read()
+                        info[urllib.parse.quote(folder)] = _info
     if not args.non_interactive_mode:
         pbar.desc = f"Generating HTML files - {folder}"
         pbar.update(0)
     if images or (args.use_fancy_folders and not contains_files) or (args.use_fancy_folders and args.ignore_other_files):
         image_chunks = np.array_split(images, 8) if images else []
         with open(os.path.join(folder, "index.html"), "w", encoding="utf-8") as f:
+            _info: List[str] = None
             header = os.path.basename(folder) or title
             parent = (
                 None if not foldername else f"{args.web_root_url}{urllib.parse.quote(foldername.removesuffix(folder.split('/')[-1] + '/'))}"
@@ -192,6 +198,12 @@ def list_folder(folder: str, title: str) -> None:
                 if args.license_type
                 else None
             )
+            if urllib.parse.quote(folder) in info:
+                _info = []
+                _infolst = info[urllib.parse.quote(folder)].split("\n")
+                for i in _infolst:
+                    if len(i) > 1:
+                        _info.append(i)
             html = env.get_template("index.html.j2")
             content = html.render(
                 title=title,
@@ -204,6 +216,7 @@ def list_folder(folder: str, title: str) -> None:
                 license=license_info,
                 subdirectories=subfolders,
                 images=image_chunks,
+                info=_info,
             )
             f.write(content)
     else:

files/global.css

@@ -10,6 +10,45 @@ body {
   height: 100%;
 }
 
+.tooltip {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 300px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 100;
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
 .folders {
   text-align: center;
   display: -ms-flexbox;
@@ -150,7 +189,6 @@ figure {
   list-style-type: none;
   margin: 0;
   padding: 0;
-  overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
@@ -167,7 +205,7 @@ figure {
   text-decoration: none;
 }
 
-.navbar li span {
+.navbar li .header {
   display: block;
   text-align: center;
   padding: 14px 16px;

simple-picture-server.code-workspace

@@ -58,5 +58,42 @@
             "vscode.css-language-features",
             "waderyan.gitblame",
         ]
+    },
+    "launch": {
+        "version": "0.2.0",
+        "configurations": [
+            {
+                "name": "Python Debugger: Current File",
+                "type": "debugpy",
+                "request": "launch",
+                "program": "${workspaceFolder}/builder.py",
+                "console": "integratedTerminal",
+                "args": [
+                    "-p",
+                    "/mnt/nfs/pictures",
+                    "-w",
+                    "https://pictures.sorogon.eu",
+                    "-t",
+                    "Pictures",
+                    "--theme",
+                    "themes/kjoe.css",
+                    "--use-fancy-folders",
+                    "-n"
+                ],
+                "postDebugTask": "Delete Lockfile"
+            }
+        ]
+    },
+    "tasks": {
+        "version": "2.0.0",
+        "tasks": [
+            {
+                "label": "Delete Lockfile",
+                "command": "rm -f /mnt/nfs/pictures/.lock",
+                "type": "shell",
+                "problemMatcher": [],
+                "isBackground": true
+            }
+        ]
     }
 }

templates/index.html.j2

@@ -19,7 +19,15 @@
       {%- if parent %}
       <li><a href="{{ parent }}">Parent Directory</a></li>
       {%- endif %}
-      <li style="position: absolute; left: 50%; transform: translateX(-50%);"><span>{{ header }}</span></li>
+      <li class="tooltip"><span class="header">{{ header }}</span>
+        {%- if info -%}
+        <span class="tooltiptext">
+          {%- for infoline in info -%}
+          {{ infoline }}<br />
+          {%- endfor -%}
+        </span>
+        {%- endif -%}
+      </li>
       {%- if license %}
       <li style="float:right"><a href="{{ license.url }}" target="_blank">License</a></li>
       {%- endif %}

themes/default-dark.css

@@ -37,6 +37,10 @@
   text-decoration: none;
 }
 
+.tooltiptext {
+  font-weight: 400;
+}
+
 body {
   color: #e8e6e3;
   background-color: #181a1b;

themes/default.css

@@ -37,6 +37,10 @@
   text-decoration: none;
 }
 
+.tooltiptext {
+  font-weight: 400;
+}
+
 body {
   color: #000;
   background-color: #fff;
@@ -50,4 +54,4 @@ body a {
   font-weight: 400;
   color: #0055ff;
   text-decoration: none;
-}
+}

themes/kjoe.css

@@ -60,6 +60,10 @@
   text-decoration: underline;
 }
 
+.tooltiptext {
+  font-weight: 600;
+}
+
 body {
   color: #ebebeb;
   background-color: #171717;

themes/monokai-vibrant.css

@@ -38,6 +38,10 @@
   text-decoration: none;
 }
 
+.tooltiptext {
+  font-weight: 600;
+}
+
 body {
   color: #f6f6f6;
   background-color: #16171d;
@@ -51,4 +55,4 @@ body a {
   font-weight: 900;
   color: #e542ff;
   text-decoration: none;
-}
+}