Pilcrows

docs.py

@@ -52,6 +52,9 @@ def styles():
 @app.route("/tango.css")
 def tango():
     return send_from_directory(".", "tango.css")
+@app.route("/headers.js")
+def header_script():
+    return send_from_directory(".", "headers.js")
 
 
 for i in STATIC:

headers.js

@@ -0,0 +1,10 @@
+for (const el of document.querySelectorAll("[id]")) {
+    el.classList.add("haspara")
+    const pilcrow = document.createElement("a");
+    pilcrow.className = "pilcrow"
+    pilcrow.href = "#" + el.id;
+    pilcrow.innerHTML = "¶"
+    el.prepend(pilcrow)
+}
+
+console.log(hasId);

styles.css

@@ -82,6 +82,7 @@ pre>code, .highlight {
 pre>.highlight {
     margin-bottom: -16px;
 }
+
 .highlight>pre {
     margin: 0;
 }
@@ -110,8 +111,33 @@ table.nav {
     padding-right: 1px;
     padding-bottom: 1px;
 }
+
 table.nav td {
     display: inline-block;
     margin-right: -1px;
     margin-bottom: -1px;
 }
+
+.haspara {
+    position: relative;
+}
+
+.haspara:hover .pilcrow {
+    opacity: 1;
+}
+
+.pilcrow {
+    position: absolute;
+    right: calc(100%);
+    padding-right: 4px;
+    top: .1em;
+    font-size: .9em;
+    text-decoration: none;
+    opacity: 0;
+    color: #e68aa2;
+}
+
+.pilcrow:hover {
+    opacity: 1;
+    color: #c7254e;
+}

templates/base.html

@@ -30,6 +30,7 @@
         </tr>
     </table>
     {% block body %}{% endblock %}
+    <script src="{{ROOT}}/headers.js"></script>
 </body>
 
 </html>