[gi-docgen/page-contents] template: Add content navigation

[Emmanuele Bassi <ebassi src gnome org>]

commit f499e52757dfcee20175c555f969b274a43d6a9c
Author: Emmanuele Bassi <ebassi gnome org>
Date:   Mon Jun 7 22:24:40 2021 +0100

    template: Add content navigation
    
    Some pages, like the class, interface, and structure indices, can get
    arbitrarily long. It makes sense to provide a quick navigation aid to
    jump to the appropriate section right from the top, just like we have
    the "jump to the top" button.

 gidocgen/templates/basic/base.html      |  6 +++---
 gidocgen/templates/basic/class.html     | 27 +++++++++++++++++++++++++++
 gidocgen/templates/basic/interface.html | 23 +++++++++++++++++++++++
 gidocgen/templates/basic/struct.html    | 20 ++++++++++++++++++++
 gidocgen/templates/basic/style.css      | 32 ++++++++++++++++++++++++++++++++
 5 files changed, 105 insertions(+), 3 deletions(-)
---
diff --git a/gidocgen/templates/basic/base.html b/gidocgen/templates/basic/base.html
index e353208..963a73e 100644
--- a/gidocgen/templates/basic/base.html
+++ b/gidocgen/templates/basic/base.html
@@ -76,13 +76,13 @@ SPDX-License-Identifier: Apache-2.0 OR GPL-3.0-or-later
       {% block sidebar %}
       {% endblock %}
     </nav>
-
-    {% block navbar %}
+    
     <button id="btn-to-top" class="hidden"><span class="up-arrow"></span></button>
-    {% endblock %}
 
     {% block content %}{% endblock %}
 
+    {% block navbar %}{% endblock %}
+
     <section id="search" class="content hidden"></section>
 
     <footer>
diff --git a/gidocgen/templates/basic/class.html b/gidocgen/templates/basic/class.html
index 591fa79..038068e 100644
--- a/gidocgen/templates/basic/class.html
+++ b/gidocgen/templates/basic/class.html
@@ -45,6 +45,33 @@ SPDX-License-Identifier: Apache-2.0 OR GPL-3.0-or-later
 {{ sidebar_block(class.virtual_methods, class.name, "Virtual methods", "method", "vfunc") }}
 {% endblock %}
 
+{% macro navbar_block(elements, section_title, section_link) -%}
+{% if elements|length > 0 %}
+<li class="toc-list-item"><a href="{{ section_link }}"><span class="link-text">{{ section_title 
}}</span></a></li>
+{% endif %}
+{% endmacro %}
+
+{% block navbar %}
+<div class="toc">
+  <nav aria-labelledby="toc-title">
+    <p id="toc-title">Content</p>
+    <ul class="toc-list">
+      <li class="toc-list-item"><a href="#description"><span class="link-text">Description</span></a></li>
+      {% if CONFIG.show_class_hierarchy and (class.ancestors or class.interfaces) %}
+      <li class="toc-list-item"><a href="#hierarchy"><span class="link-text">Hierarchy</span></a></li>
+      {% endif %}
+      {{ navbar_block(class.ctors, "Constructors", "#constructors") }}
+      {{ navbar_block(class.method, "Methods", "#methods") }}
+      {{ navbar_block(class.properties, "Properties", "#properties") }}
+      {{ navbar_block(class.signals, "Signals", "#signals") }}
+      {{ navbar_block(class.class_methods, "Class methods", "#class-methods") }}
+      {{ navbar_block(class.type_funcs, "Functions", "#type-functions") }}
+      {{ navbar_block(class.virtual_methods, "Virtual methods", "#virtual-methods") }}
+    </ul>
+  </nav>
+</div>
+{% endblock %}
+
 {% block content %}
 <section id="main" class="content">
   <header>
diff --git a/gidocgen/templates/basic/interface.html b/gidocgen/templates/basic/interface.html
index d61ac2d..47fe234 100644
--- a/gidocgen/templates/basic/interface.html
+++ b/gidocgen/templates/basic/interface.html
@@ -44,6 +44,29 @@ SPDX-License-Identifier: Apache-2.0 OR GPL-3.0-or-later
 {{ sidebar_block(interface.virtual_methods, interface.name, "Virtual methods", "method", "vfunc") }}
 {% endblock %}
 
+{% macro navbar_block(elements, section_title, section_link) -%}
+{% if elements|length > 0 %}
+<li class="toc-list-item"><a href="{{ section_link }}"><span class="link-text">{{ section_title 
}}</span></a></li>
+{% endif %}
+{% endmacro %}
+
+{% block navbar %}
+<div class="toc">
+  <nav aria-labelledby="toc-title">
+    <p id="toc-title">Content</p>
+    <ul class="toc-list">
+      <li class="toc-list-item"><a href="#description"><span class="link-text">Description</span></a></li>
+      {{ navbar_block(interface.method, "Methods", "#methods") }}
+      {{ navbar_block(interface.properties, "Properties", "#properties") }}
+      {{ navbar_block(interface.signals, "Signals", "#signals") }}
+      {{ navbar_block(interface.class_methods, "Class methods", "#class-methods") }}
+      {{ navbar_block(interface.type_funcs, "Functions", "#type-functions") }}
+      {{ navbar_block(interface.virtual_methods, "Virtual methods", "#virtual-methods") }}
+    </ul>
+  </nav>
+</div>
+{% endblock %}
+
 {% block content %}
 <section id="main" class="content">
   <header>
diff --git a/gidocgen/templates/basic/struct.html b/gidocgen/templates/basic/struct.html
index 5fd9b75..7929984 100644
--- a/gidocgen/templates/basic/struct.html
+++ b/gidocgen/templates/basic/struct.html
@@ -41,6 +41,26 @@ SPDX-License-Identifier: Apache-2.0 OR GPL-3.0-or-later
 {{ sidebar_block(struct.type_funcs, struct.name, "Functions", "func", "type_func") }}
 {% endblock %}
 
+{% macro navbar_block(elements, section_title, section_link) -%}
+{% if elements|length > 0 %}
+<li class="toc-list-item"><a href="{{ section_link }}"><span class="link-text">{{ section_title 
}}</span></a></li>
+{% endif %}
+{% endmacro %}
+
+{% block navbar %}
+<div class="toc">
+  <nav aria-labelledby="toc-title">
+    <p id="toc-title">Content</p>
+    <ul class="toc-list">
+      <li class="toc-list-item"><a href="#description"><span class="link-text">Description</span></a></li>
+      {{ navbar_block(struct.ctors, "Constructors", "#constructors") }}
+      {{ navbar_block(struct.method, "Methods", "#methods") }}
+      {{ navbar_block(struct.type_funcs, "Functions", "#type-functions") }}
+    </ul>
+  </nav>
+</div>
+{% endblock %}
+
 {% block content %}
 <section id="main" class="content">
   <header>
diff --git a/gidocgen/templates/basic/style.css b/gidocgen/templates/basic/style.css
index 8ff4bf1..67fbcbd 100644
--- a/gidocgen/templates/basic/style.css
+++ b/gidocgen/templates/basic/style.css
@@ -499,6 +499,33 @@ footer {
   transition: border .3s linear;
 }
 
+.toc {
+  display: block;
+  margin-top: 2em;
+  z-index: 3;
+  min-width: 15ch;
+  font-size: 80%;
+}
+
+.toc nav {
+  margin-left: 2em;
+}
+
+#toc-title {
+  text-transform: uppercase;
+  font-weight: var(--heading-weight);
+}
+
+.toc-list {
+  list-style-type: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.toc-list-item {
+  padding-top: .25em;
+}
+
 /*********************************
  * ANCHORS & TOGGLERS
  *********************************/
@@ -837,6 +864,7 @@ table.returns tr.arg-description td {
 .implements a,
 .ancestors a,
 .sidebar .links a
+.toc a
 {
   font-family: var(--symbol-font-family);
   font-size: calc(1em * var(--symbol-font-scale));
@@ -866,4 +894,8 @@ table.returns tr.arg-description td {
     height: initial;
     order: 1;
   }
+
+  .toc {
+    display: hidden;
+  }
 }