Add breadcrumbs

Author: stefanv

assets/theme-css/pst/components/_breadcrumbs.scss

@@ -0,0 +1,33 @@
+/**
+ * Breadcrumbs for parent pages meant for the article header
+ */
+ul.bd-breadcrumbs {
+  list-style: none;
+  padding-left: 0;
+  display: flex;
+  flex-wrap: wrap;
+
+  // Font size slightly smaller to avoid cluttering up space too much
+  font-size: 0.8rem;
+
+  li.breadcrumb-item {
+    display: flex;
+    align-items: baseline;
+
+    // Style should look like heavier in-page links
+    // keeping visited in the default link colour
+    font-weight: bold;
+    a {
+      @include link-style-text;
+    }
+
+    // Items that aren't the home have a caret to the left
+    &:not(.breadcrumb-home):before {
+      font: var(--fa-font-solid);
+      font-size: 0.8rem;
+      content: var(--pst-breadcrumb-divider);
+      color: var(--pst-color-text-muted);
+      padding: 0 0.5rem;
+    }
+  }
+}

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

@@ -33,7 +33,7 @@
 //@import "./sections/sidebar-toggle";
 //
 //// Re-usable components across the theme
-//@import "./components/breadcrumbs";
+@import "./components/breadcrumbs";
 //@import "./components/icon-links";
 //@import "./components/header/header-logo";
 //@import "./components/navbar-links";

assets/theme-css/styles.css

@@ -382,3 +382,9 @@ a.headerlink {
 /* Local Variables: */
 /* css-indent-offset: 2 */
 /* End: */
+
+#breadcrumbs {
+  margin: 0;
+  padding: 0;
+  padding-bottom: 1rem;
+}

layouts/partials/single/content.html

@@ -1,5 +1,15 @@
 <section class="content-padding flex-row">
   <div class="content-container">
+    <ul id="breadcrumbs" class="bd-breadcrumbs">
+      {{- range $index, $ := .Ancestors.Reverse }}
+      {{ if $index }}
+      <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+      {{ else }}
+      <li class="breadcrumb-item breadcrumb-home"><a href="{{ .RelPermalink }}"><i class="fas fa-home"></i></a></li>
+      {{ end }}
+      {{- end }}
+      <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+    </ul>
     <div class="columns">
       <div class="column is-centered-tablet-portrait">
         <h1>{{ .Title }}</h1>