feat(design): Add display of stanzas and interactive annotations

This change adds interactive annotations to the stanza text. This is an early prototype to demonstrate the functionality.

manuscript/views.py

@@ -1,3 +1,5 @@
+from html import unescape
+
 from django.http import HttpRequest
 from django.shortcuts import render
 from django.urls import reverse
@@ -16,6 +18,8 @@ def about(request: HttpRequest):
 
 def stanzas(request: HttpRequest):
     stanzas = Stanza.objects.all().order_by("stanza_line_code_starts")
+    for stanza in stanzas:
+        stanza.stanza_text = unescape(stanza.stanza_text)
     return render(request, "stanzas.html", {"stanzas": stanzas})
 
 

static/css/custom.css

@@ -0,0 +1,25 @@
+.prose span div {
+  display: inline;
+}
+
+[data-notation] {
+  background-color: #ffffcc;
+  cursor: help;
+  border: 1px solid black;
+  padding: 0 0.2em;
+}
+.shadow-left {
+  box-shadow: -8px 0 10px -6px rgba(0, 0, 0, 0.2);
+}
+/* 
+[data-notation]:hover::before {
+    content: attr(data-notation);
+    position: absolute;
+    background: #ffffcc;
+    padding: 5px;
+    border: 1px solid #000;
+    border-radius: 5px;
+    margin-top: 30px;
+    font-size: 0.8em;
+    z-index: 10;
+} */

static/js/stanza.js

@@ -0,0 +1,25 @@
+// Get the sidebar, close button, and notation text elements
+var sidebar = document.getElementById("sidebar");
+var closeButton = document.getElementById("close-button");
+var notationText = document.getElementById("notation-text");
+
+// Listen for click events on the document
+document.addEventListener("click", function (event) {
+  // If the clicked element has a data-notation attribute
+  if (event.target.hasAttribute("data-notation")) {
+    // Get the data-notation text
+    var text = event.target.getAttribute("data-notation");
+
+    // Update the notation text
+    notationText.textContent = text;
+
+    // Show the sidebar
+    sidebar.style.transform = "translateX(0)";
+  }
+});
+
+// Add a click event listener to the close button
+closeButton.addEventListener("click", function () {
+  // Hide the sidebar
+  sidebar.style.transform = "translateX(100%)";
+});

templates/index.html

@@ -26,22 +26,22 @@
 
 
     <section id="introduction" class="container mx-auto p-4 my-10">
-        <h2 class="text-2xl font-bold">Introduction</h2>
+        <h2 class="text-2xl font-bold">Translating La Sfera</h2>
         <p class="mt-4">This is the introduction section. Add your content here.</p>
     </section>
 
     <section id="about" class="container mx-auto p-4 my-10 bg-gray-100">
-        <h2 class="text-2xl font-bold">About</h2>
+        <h2 class="text-2xl font-bold">Editing La Sfera</h2>
         <p class="mt-4">This is the about section. Add your content here.</p>
     </section>
 
     <section id="background" class="container mx-auto p-4 my-10">
-        <h2 class="text-2xl font-bold">Background</h2>
+        <h2 class="text-2xl font-bold">Mapping La Sfera</h2>
         <p class="mt-4">This is the background section. Add your content here.</p>
     </section>
 
     <section id="resources" class="container mx-auto p-4 my-10 bg-gray-100">
-        <h2 class="text-2xl font-bold">Resources</h2>
+        <h2 class="text-2xl font-bold">Tracking La Sfera</h2>
         <p class="mt-4">This is the resources section. Add your content here.</p>
     </section>
 {% endblock content %}

templates/manuscripts.html

@@ -4,30 +4,30 @@
 
 {% block content %}
     <section id="introduction" class="container mx-auto p-4 my-10">
-        <h3 class="text-2xl pb-8" id="table">Table of manuscripts &mdash; <a href="#top">Back to top &uarr;</a></h3>
+        <h3 class="text-2xl pb-8" id="table">Table of manuscripts</a></h3>
 
-        <table class="table-auto">
-            <thead>
+    <table class="table-auto">
+        <thead>
+            <tr>
+                <th class="px-4 py-2">ID</th>
+                <th class="px-4 py-2">Siglum</th>
+                <th class="px-4 py-2">Shelfmark</th>
+                <th class="px-4 py-2">Library</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for manuscript in manuscripts %}
                 <tr>
-                    <th class="px-4 py-2">ID</th>
-                    <th class="px-4 py-2">Siglum</th>
-                    <th class="px-4 py-2">Shelfmark</th>
-                    <th class="px-4 py-2">Library</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for manuscript in manuscripts %}
-                    <tr>
-                        <td class="border px-4 py-2">{{ manuscript.item_id }}</td>
-                        <td class="border px-4 py-2">{{ manuscript.siglum }}</td>
-                        <td class="border px-4 py-2">{{ manuscript.shelfmark }}</td>
-                        <td class="border px-4 py-2">{{ manuscript.library }}</td>
+                    <td class="border px-4 py-2">{{ manuscript.item_id }}</td>
+                    <td class="border px-4 py-2">{{ manuscript.siglum }}</td>
+                    <td class="border px-4 py-2">{{ manuscript.shelfmark }}</td>
+                    <td class="border px-4 py-2">{{ manuscript.library }}</td>
             <!-- <td class="border px-4 py-2">
                 <a href="/manuscript/{{ manuscript.id }}">Details</a>
             </td> -->
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
     </section>
 {% endblock content %}

templates/stanzas.html

@@ -1,22 +1,35 @@
 {% extends "base.html" %}
+{% load static %}
 
 {% block title %}Stanzas - La Sfera{% endblock title %}
 
 {% block content %}
   <section id="introduction" class="container mx-auto p-4 my-10">
     <h3 class="text-2xl pb-8" id="text">
-      Text of the manuscript &mdash; <a href="#top">Back to top &uarr;</a>
-    </h3>
+      Text of the manuscript</a>
+  </h3>
 
-    <div class="prose">
-      {% for stanza in stanzas %}
-        <p>
-          <span class="font-serif text-red-700 text-sm">
-            {{ stanza.stanza_line_code_starts }}
-          </span>
-          {{ stanza.stanza_text }}
-        </p>
-      {% endfor %}
-    </div>
+  <div class="prose">
+    {% for stanza in stanzas %}
+      <div>
+        <span class="font-serif text-red-700 text-sm mr-2">
+          {{ stanza.stanza_line_code_starts }}
+        </span>
+        <span>
+          {{ stanza.stanza_text|safe }}
+        </span>
+      </div>
+    {% endfor %}
+  </div>
   </section>
+
+  <!-- Sidebar -->
+  <div id="sidebar" class="fixed right-0 top-0 h-full w-64 bg-white p-4 transform translate-x-full overflow-auto transition-transform duration-200 ease-in-out shadow-left">
+    <button id="close-button" class="mb-4 bg-red-500 text-white p-2 rounded">&times;</button>
+    <p id="notation-text"></p>
+  </div>
 {% endblock content %}
+
+{% block scripts %}
+  <script src="{% static 'js/stanza.js' %}"></script>
+{% endblock scripts %}