buttons and extra metainfo on comic generation

4 files changed, 55 insertions, 4 deletions

diff --git a/comic/assets/css/comic.css b/comic/assets/css/comic.css
index 9449cab..a828323 100644
--- a/comic/assets/css/comic.css
+++ b/comic/assets/css/comic.css
@@ -31,6 +31,36 @@ hr {
     color: #e9d3ff;
 }
 
+ul.navigation {
+    margin-top: 0;
+    padding: 0;
+}
+
+ul.navigation li {
+    display: inline;
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+}
+
+ul.navigation li a {
+    width: 4rem;
+    margin-left: auto;
+    margin-right: auto;
+    display: inline-block;
+    text-align: center;
+    background: #a665c6;
+    color: white;
+    border: 0.1rem solid white;
+    border-radius: 0.5rem;
+}
+
+ul.navigation li a:hover {
+    background: white;
+    color: #a665c6;
+    border: 0.1rem solid #a665c6;
+    text-decoration: none;
+}
+
 img.banner {
     width: 100%;
 }
diff --git a/comic/issues/1/meta.json b/comic/issues/1/meta.json
index e3079db..416f3d9 100644
--- a/comic/issues/1/meta.json
+++ b/comic/issues/1/meta.json
@@ -1,5 +1,6 @@
 {
   "title" : "The beginning",
   "publish_date" : "2025-11-28",
-  "description" : "I have like twenty comic ideas figured out but not the title of the series."
+  "description" : "I have like twenty comic ideas figured out but not the title of the series.",
+  "extra_attributes": "title=\"There are no tooltip texts in this series.\""
 }
diff --git a/comic/templates/issue.html.j2 b/comic/templates/issue.html.j2
index 70b4745..9320850 100644
--- a/comic/templates/issue.html.j2
+++ b/comic/templates/issue.html.j2
@@ -19,14 +19,27 @@
         <div class="row">
             <main class="col-md-7">
                 <h1>{{ issue.title() }}</h1>
-                <img class="comic" src="{{ url }}/comic.png"  alt="comic"/>
+                <ul class="navigation">
+                    <li><a href="/issues/1">&lt;&lt;</a></li>
+                    <li><a href="{{ previous }}">&lt;</a></li>
+                    <li><a href="{{ next }}">&gt;</a></li>
+                    <li><a href="/">&gt;&gt;</a></li>
+                </ul>
+                <img class="comic" src="{{ url }}/comic.png" alt="comic" {{ issue.extra_attributes() }}/>
                 <p class="description">{{ issue.description() }}</p>
+                <ul class="navigation">
+                    <li><a href="/issues/1">&lt;&lt;</a></li>
+                    <li><a href="{{ previous }}">&lt;</a></li>
+                    <li><a href="{{ next }}">&gt;</a></li>
+                    <li><a href="/">&gt;&gt;</a></li>
+                </ul>
             </main>
         </div>
         <div class="row">
             <footer class="col-md-7">
                 <p>Permalink to this comic: <a href="{{ url }}">{{ url }}</a></p>
                 <p>Image url: <a href="{{ url }}/comic.png">{{ url }}/comic.png</a></p>
+                <p>{{ issue.get_publish_time() }}</p>
                 <hr>
                 <p><a href="/feed.xml">RSS feed</a></p>
                 <hr>
diff --git a/modules/comic_generate.py b/modules/comic_generate.py
index 76705fa..ef539ba 100644
--- a/modules/comic_generate.py
+++ b/modules/comic_generate.py
@@ -14,6 +14,7 @@ IMAGE_FILE_NAME = "comic.png"
 TITLE_KEY = "title"
 DESCRIPTION_KEY = "description"
 PUBLISH_DATE_KEY = "publish_date"
+EXTRA_ATTR_KEY = "extra_attributes"
 
 
 class Issue:
@@ -39,6 +40,9 @@ class Issue:
     def get_link(self) -> str:
         return f"{Config.COMIC_ROOT_URL}/issues/{self.index}"
 
+    def extra_attributes(self) -> str:
+        return self.meta_data[EXTRA_ATTR_KEY] if EXTRA_ATTR_KEY in self.meta_data.keys() else ""
+
 
 def get_issues(path: str, local: bool) -> list[Issue]:
     return_list = []
@@ -68,13 +72,16 @@ def generate(jinja_env: jinja2.Environment, output_root_path: str, local: bool):
     issue_template = jinja_env.get_template("issue.html.j2")
     last_render = None
 
-    for issue in issues:
+    last_issue_idx = len(issues) - 1
+    for idx, issue in enumerate(issues):
         output_dir = os.path.join(output_root_path, "issues", issue.index)
         os.makedirs(output_dir, exist_ok=True)
 
         ctx = {
             "issue": issue,
-            "url": issue.get_link()
+            "url": issue.get_link(),
+            "previous": "/#" if idx == 0 else f"/issues/{str(idx)}",
+            "next": "/#" if idx == last_issue_idx else f"/issues/{str(idx + 2)}"
         }
 
         last_render = issue_template.render(ctx)