add work overview pages

dlibrary/dlibrary.py

@@ -309,6 +309,7 @@ def publish(args):
     viewer_template = jenv.get_template("viewer.html")
     list_template = jenv.get_template("list.html")
     categorization_template = jenv.get_template("categorization.html")
+    work_template = jenv.get_template("work.html")
 
     con = sqlite3.connect(args.destdir / 'meta.db')
     cur = con.cursor()
@@ -339,9 +340,12 @@ def publish(args):
         images.sort()
 
         work_dir = args.destdir / 'site' / 'works' / work_id
-        work_dir.mkdir(parents=True, exist_ok=True)
+        viewer_dir = work_dir / 'view'
+        viewer_dir.mkdir(parents=True, exist_ok=True)
         with open(work_dir / 'index.html', 'w') as f:
-            f.write(viewer_template.render(depth=2, work=work, title=title, images=images))
+            f.write(work_template.render(depth=2, work=work, title=title, images=images))
+        with open(viewer_dir / 'index.html', 'w') as f:
+            f.write(viewer_template.render(depth=3, work=work, title=title, images=images))
 
     def make_categorization(categorization, query, work_filter):
         categorization_dir = args.destdir / 'site' / categorization

dlibrary/static/dlibrary.css

@@ -2,11 +2,12 @@ body {
     background: #111;
     color: #eee;
     font-family: sans-serif;
+    font-size: 18px;
 }
 
 /* listing stuff */
 
-#list-title, nav {
+#title, nav {
     text-align: center;
 }
 
@@ -46,6 +47,40 @@ body {
     max-width: 240px;
 }
 
+/* work stuff */
+
+.work-container {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+}
+
+.work-info {
+    max-width: min(50%, 500px);
+}
+
+.work-info td, .work-info th {
+    vertical-align: top;
+}
+
+.work-info td {
+    padding-top: 5px;
+}
+
+.work-info th {
+    text-align: right;
+    padding-right: 10px;
+    padding-top: 10px;
+}
+
+.work-info-link {
+    background: #333;
+    padding: 5px;
+    border-radius: 5px;
+    display: inline-block;
+    margin-bottom: 5px;
+}
+
 /* viewer stuff */
 
 #viewer-images {

dlibrary/static/viewer.js

@@ -113,7 +113,7 @@ document.addEventListener('DOMContentLoaded', () => {
         case 13: //enter
             changeDuration(duration, true);
             localStorage.setItem(`${WORK_ID}-currentPage`, 0);
-            window.location.href = ROOT;
+            window.location.href = "../";
             break;
         }
     };

dlibrary/templates/categorization.html

@@ -1,12 +1,13 @@
 {% extends "base.html" %}
 {% block title %}{{ categorization.capitalize() }} - DLibrary{% endblock %}
 {% block body %}
-{% from 'utils.html' import root with context %}
-<h1 id="list-title"><a href="{{ root() }}">DLibrary</a> &gt; <a href="{{ root() }}{{ categorization }}">{{ categorization.capitalize() }}</a></h1>
+{% from 'utils.html' import urlcat, root with context %}
+<h1 id="title"><a href="{{ root() }}">DLibrary</a> &gt; <a href="{{ root() }}{{ categorization }}">{{ categorization.capitalize() }}</a></h1>
+{% include 'nav.html' %}
 <div class="card-listing">
   {% for cat in categories %}
   <div class="card category">
-    <a href="{{ root() }}{{ categorization }}/{{ cat | replace('/', ' ') | urlencode }}/">
+    <a href="{{ root() }}{{ categorization }}/{{ urlcat(cat) }}/">
       <div class="card-title">
         {{ cat }}
       </div>

dlibrary/templates/list.html

@@ -1,8 +1,8 @@
 {% extends 'base.html' %}
 {% block body %}
 {% from 'utils.html' import root with context %}
-<h1 id="list-title"><a href="{{ root() }}">DLibrary</a>{% if categorization %} &gt; <a href="{{ root() }}{{ categorization }}">{{ categorization.capitalize() }}</a>{% endif %}{% if title %} &gt; {{ title }}{% endif %}</h1>
-<div class="nav">{% for c in ['circles', 'authors', 'tags', 'series'] %}<div class="nav-item"><a href="{{ root() }}{{ c }}">{{ c.capitalize() }}</a></div>{% endfor %}</div>
+<h1 id="title"><a href="{{ root() }}">DLibrary</a>{% if categorization %} &gt; <a href="{{ root() }}{{ categorization }}">{{ categorization.capitalize() }}</a>{% endif %}{% if title %} &gt; {{ title }}{% endif %}</h1>
+{% include 'nav.html' %}
 <div class="card-listing">
   {% for work in works %}
   <div class="card">

dlibrary/templates/nav.html

@@ -0,0 +1,2 @@
+{% from 'utils.html' import root with context %}
+<div class="nav">{% for c in ['circles', 'authors', 'tags', 'series'] %}<div class="nav-item"><a href="{{ root() }}{{ c }}">{{ c.capitalize() }}</a></div>{% endfor %}</div>

dlibrary/templates/utils.html

@@ -1 +1,2 @@
 {% macro root() %}{% for i in range(depth) %}../{% endfor %}{% endmacro %}
+{% macro urlcat(s) %}{{ s | replace('/', ' ') | urlencode }}{% endmacro %}

dlibrary/templates/viewer.html

@@ -4,7 +4,6 @@
 <link rel="stylesheet" type="text/css" href="{{ root() }}static/viewer.css">
 <script>
   const WORK_ID = "{{ work['id'] }}";
-  const ROOT = "{{ root() }}";
 </script>
 <script src="{{ root() }}static/viewer.js"></script>
 {% endblock %}

dlibrary/templates/work.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+{% block body %}
+{% from 'utils.html' import urlcat, root with context %}
+<h1 id="title"><a href="{{ root() }}">DL</a> &gt; {{ title }}</h1>
+<div class="work-container">
+  <div class="work-preview">
+    <a href="view/">
+      <img src="{{ root() }}thumbnails/{{ work['id'] }}.jpg">
+    </a>
+  </div>
+  <div class="work-info">
+    <table>
+      {% if work['circle'] %}
+      <tr>
+        <th>Circle</th>
+        <td><a class="work-info-link" href="{{ root() }}circles/{{ urlcat(work['circle']) }}">{{ work['circle'] }}</a></td>
+      </tr>
+      {% endif %}
+      {% if work['authors'] %}
+      <tr>
+        <th>Authors</th>
+        <td>{% for author in work['authors'] %}<a class="work-info-link" href="{{ root() }}authors/{{ urlcat(author) }}">{{ author }}</a> {% endfor %}</td>
+      </tr>
+      {% endif %}
+      {% if work['tags'] %}
+      <tr>
+        <th>Tags</th>
+        <td>{% for tag in work['tags'] %}<a class="work-info-link" href="{{ root() }}tags/{{ urlcat(tag) }}">{{ tag }}</a> {% endfor %}</td>
+      </tr>
+      {% endif %}
+      {% if work['series'] %}
+      <tr>
+        <th>Series</th>
+        <td><a class="work-info-link" href="{{ root() }}series/{{ urlcat(work['series']) }}">{{ work['series'] }}</a></td>
+      </tr>
+      {% endif %}
+    </table>
+  </div>
+</div>
+{% endblock %}