Add toctree rendering

Author: stefanv

assets/theme-css/pst/content/_toctree.scss

@@ -0,0 +1,43 @@
+/**
+ * Style the toctree component in pages (avoid modifying the navbars)
+ */
+.toctree-wrapper {
+  p.caption {
+    font-size: 1.5em;
+    margin-bottom: 0em;
+  }
+
+  & > ul {
+    padding-left: 0;
+  }
+
+  li[class^="toctree-l"] {
+    list-style: none;
+    margin-bottom: 0.2em;
+
+    & > a {
+      list-style: none;
+      font-size: 1.1em;
+    }
+
+    & > ul {
+      list-style: none;
+      padding-inline-start: 1.5em;
+    }
+  }
+
+  // slightly bigger font for l1
+  .toctree-l1 > a {
+    font-size: 1.3em;
+  }
+}
+
+div.topic.contents,  // Docutils <= 0.17
+nav.contents  // Docutils >= 0.18
+{
+  // Style similarly to toctree
+  ul.simple {
+    list-style: none;
+    padding-left: 0;
+  }
+}

assets/theme-css/pst/pydata-sphinx-theme.scss

@@ -59,7 +59,7 @@
 //@import "./content/quotes";
 //@import "./content/spans";
 //@import "./content/tables";
-//@import "./content/toctree";
+@import "./content/toctree";
 //@import "./content/math";
 
 //// Content blocks from Sphinx extensions

assets/theme-css/styles.css

@@ -136,6 +136,15 @@ p {
   margin-left: 15px;
 }
 
+.content-container .toctree-wrapper ul:first-child {
+  margin-left: 0;
+  padding-left: 0.75rem;
+}
+
+.content-container .toctree-wrapper ul {
+  margin-left: 0.75rem;
+}
+
 .content-container ol {
   padding: 10px;
   margin-left: 15px;

doc/content/examples/_index.md

@@ -1,3 +1,5 @@
 ---
 title: Examples
 ---
+
+{{< toctree >}}

layouts/shortcodes/toctree.html

@@ -0,0 +1,22 @@
+<div class="toctree-wrapper">
+  {{- range $section := .Page.Sections }}
+  <ul>
+    <li class="toctree-l1"><a href="{{ $section.RelPermalink }}">{{ $section.Title | safeHTML }}</a></li>
+    {{- range $page := .RegularPages }}
+    <ul>
+      <li class="toctree-l2"><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></li>
+      <ul>
+        {{- range .Fragments.Headings -}}
+        {{/* H2 */}}
+        {{- range .Headings }}
+        <li class="toctree-l3">
+          <a href="{{ $page.RelPermalink }}#{{ .ID }}">{{ .Title | safeHTML }}</a>
+        </li>
+        {{- end -}}
+        {{- end }}
+      </ul>
+    </ul>
+    {{- end }}
+  </ul>
+  {{- end }}
+</div>