add suggested works (next step: make useful suggestions)

dlibrary/dlibrary.py

@@ -865,16 +865,18 @@ def generate(args):
             'authors': authors,
             'tags': tags,
             'thumbnail_path': thumbnail_path,
+            'images': images,
         }
         works.append(work)
 
-        work_dir = site_dir / 'works' / work_id
+    for work in works:
+        work_dir = site_dir / 'works' / work['id']
         viewer_dir = work_dir / 'view'
         viewer_dir.mkdir(parents=True, exist_ok=True)
         with open(work_dir / 'index.html', 'w') as f:
-            f.write(work_template.render(depth=2, work=work, title=title, images=images))
+            f.write(work_template.render(depth=2, work=work, title=work['title'], suggested=works[:5]))
         with open(viewer_dir / 'index.html', 'w') as f:
-            f.write(viewer_template.render(depth=3, work=work, title=title, images=images))
+            f.write(viewer_template.render(depth=3, work=work, title=work['title']))
 
     def make_categorization(categorization, query, work_filter, work_style_cards=False):
         categorization_dir = site_dir / categorization

dlibrary/static/dlibrary.css

@@ -78,7 +78,7 @@ body {
     margin-bottom: 25px;
 }
 
-#card-listing {
+.card-listing {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -115,6 +115,7 @@ body {
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
+    margin-bottom: 40px;
 }
 
 .work-preview {
@@ -157,3 +158,7 @@ body {
     display: inline-block;
     margin-bottom: 5px;
 }
+
+#suggested-subheader {
+    text-align: center;
+}

dlibrary/static/index.js

@@ -32,7 +32,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const shuffleButton = document.getElementById('shuffle');
     const sortButton = document.getElementById('sort');
     const searchBox = document.getElementById('search');
-    const listContainer = document.getElementById('card-listing');
+    const listContainer = document.getElementById('main-listing');
 
     let ordering = localStorage.getItem('indexOrdering') || 'dateDesc';
     let shuffleSeed = parseInt(localStorage.getItem('shuffleSeed')) || newSeed();

dlibrary/templates/categorization.html

@@ -4,7 +4,7 @@
 {% from 'utils.html' import urlcat, index, root with context %}
 <h1 id="title"><a href="{{ root() }}/{{ index() }}">DLibrary</a> &gt; {{ categorization.capitalize() }}</h1>
 {% include 'nav.html' %}
-<div id="card-listing">
+<div class="card-listing">
   {% for cat in categories %}
   <div class="card {% if not work_style_cards %}category{% endif %}">
     <a href="{{ urlcat(cat) }}/{{ index() }}">

dlibrary/templates/index.html

@@ -23,6 +23,6 @@
 <div id="search-container">
   <input type="text" id="search" placeholder="Search"/>
 </div>
-<div id="card-listing">
+<div id="main-listing" class="card-listing">
 </div>
 {% endblock %}

dlibrary/templates/list.html

@@ -1,21 +1,11 @@
 {% extends 'base.html' %}
 {% block body %}
-{% from 'utils.html' import index, root with context %}
+{% from 'utils.html' import index, root, card with context %}
 <h1 id="title"><a href="{{ root() }}/{{ index() }}">DLibrary</a>{% if categorization %} &gt; <a href="{{ root() }}/{{ categorization }}/{{ index() }}">{{ categorization.capitalize() }}</a>{% endif %}{% if title %} &gt; {{ title }}{% endif %}</h1>
 {% include 'nav.html' %}
-<div id="card-listing">
+<div class="card-listing">
   {% for work in works %}
-  <div class="card">
+  {{ card(work) }}
-    <a href="{{ root() }}/works/{{ work['id'] }}/{{ index() }}">
-      <img src="{{ root() }}/{{ work['thumbnail_path'] }}">
-      <div class="card-creators">
-        [{% if work['circle'] %}{{ work['circle'] }}{% endif %}{% if work['circle'] and work['authors'] %} ({% endif %}{{ ', '.join(work['authors']) }}{% if work['circle'] and work['authors'] %}){% endif %}]
-      </div>
-      <div class="card-title">
-        {{ work['title'] }}
-      </div>
-    </a>
-  </div>
   {% endfor %}
 </div>
 {% endblock %}

dlibrary/templates/utils.html

@@ -1,3 +1,17 @@
 {% macro root() %}{% if depth == 0 %}.{% else %}..{% endif %}{{ '/..' * (depth-1) }}{% endmacro %}
 {% macro index() %}{% if not noindex %}index.html{% endif %}{% endmacro %}
 {% macro urlcat(s) %}{{ s | replace('/', ' ') | urlencode }}{% endmacro %}
+
+{% macro card(work) %}
+  <div class="card">
+    <a href="{{ root() }}/works/{{ work['id'] }}/{{ index() }}">
+      <img src="{{ root() }}/{{ work['thumbnail_path'] }}">
+      <div class="card-creators">
+        [{% if work['circle'] %}{{ work['circle'] }}{% endif %}{% if work['circle'] and work['authors'] %} ({% endif %}{{ ', '.join(work['authors']) }}{% if work['circle'] and work['authors'] %}){% endif %}]
+      </div>
+      <div class="card-title">
+        {{ work['title'] }}
+      </div>
+    </a>
+  </div>
+{% endmacro %}

dlibrary/templates/viewer.html

@@ -6,7 +6,7 @@
   const WORK_ID = "{{ work['id'] }}";
   const INDEX = "{{ index() }}";
   const IMAGES = [
-      {% for filename in images %}
+      {% for filename in work['images'] %}
       "{{ root() }}/images/{{ work['id'] }}/{{ filename }}",
       {% endfor %}
   ];
@@ -18,7 +18,7 @@
 <div id="page-num">
   <table>
     <tr><td id="current-page"></td></tr>
-    <tr><td id="total-pages">{{ images | length }}</td></tr>
+    <tr><td id="total-pages">{{ work['images'] | length }}</td></tr>
   </table>
 </div>
 <div id="duration"></div>

dlibrary/templates/work.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% block body %}
-{% from 'utils.html' import urlcat, root, index with context %}
+{% from 'utils.html' import urlcat, root, index, card with context %}
 <h1 id="title"><a href="{{ root() }}/{{ index() }}">DL</a> &gt; {{ title }}</h1>
 <div class="work-container">
   <div class="work-preview">
@@ -41,4 +41,10 @@
     {% endif %}
   </div>
 </div>
+<h3 id="suggested-subheader">Suggested works</h3>
+<div id="suggested-works" class="card-listing">
+  {% for sugg in suggested %}
+  {{ card(sugg) }}
+  {% endfor %}
+</div>
 {% endblock %}