Fix the sidebar in recent versions of Hugo (#1551)

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>

assets/scss/custom.scss

@@ -68,9 +68,8 @@ Custom SCSS for the Matrix spec
     margin-top: 1rem;
   }
 
-  &>.td-sidebar-nav__section > li > a.td-sidebar-link {
-      font-weight: $font-weight-bold;
-      font-size: 1.3rem;
+  .td-sidebar-nav__section .ul-1 ul {
+    padding-left: 0;
   }
 
   /* This is to make the width of the items that have sub-items (like room versions)
@@ -79,12 +78,20 @@ Custom SCSS for the Matrix spec
     padding-right: 0 !important;
   }
 
-  a.indent-1 {
+  .ul-1 > li > a {
     padding-left: 1rem !important;
   }
 
-  a.indent-2 {
-    padding-left: 2rem;
+  .ul-2 > li > a {
+    padding-left: 2rem !important;
+  }
+
+  a.td-sidebar-link.tree-root {
+    color: $gray-800;
+    font-weight: $font-weight-bold;
+    font-size: 1.3rem;
+    margin-bottom: 0;
+    border-bottom: none;
   }
 
   a, a.td-sidebar-link {
@@ -103,7 +110,6 @@ Custom SCSS for the Matrix spec
 
     &.active, &active:hover {
       background-color: $secondary-background;
-      font-weight: $font-weight-normal;
     }
   }
 }

changelogs/internal/newsfragments/1551.clarification

@@ -0,0 +1 @@
+Fix the sidebar in recent versions of Hugo

config.toml

@@ -62,6 +62,10 @@ current_version_url = "https://spec.matrix.org/latest"
 footer_about_disable = false
 # Collapse HTTP API and event <details> elements
 rendered_data_collapsed = false
+# Hide the search entry in the sidebar
+sidebar_search_disable = true
+# Only show the current page's ancestors, siblings and direct descendants in the sidebar menu
+sidebar_menu_compact = true
 
 [params.links]
 # End user relevant links. These will show up on left side of footer and in the community page if you have one.

layouts/partials/sidebar-tree.html

@@ -1,61 +0,0 @@
-{{/*
-
-  A version of the sidebar-tree.html partial in Docsy, with a few small
-  modifications:
-
-  * include `div#toc` for the ToC
-  * start the sidebar at the root (homepage) since for us that is the Matrix
-  overview page
-
-*/}}
-
-{{/* We cache this partial for bigger sites and set the active class client side. */}}
-{{ $shouldDelayActive := ge (len .Site.Pages) 2000 }}
-<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
-  <div id="content-mobile">
-  <form class="td-sidebar__search d-flex align-items-center">
-    {{ partial "search-input.html" . }}
-    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
-    </button>
-  </form>
-  </div>
-  <div id="content-desktop"></div>
-  <nav class="collapse td-sidebar-nav" id="td-section-nav">
-    {{ template "section-tree-nav-section" (dict "page" . "section" .Site.Home.CurrentSection "delayActive" $shouldDelayActive "indent" 0)  }}
-    <hr/>
-    <div id = "toc"></div>
-  </nav>
-</div>
-
-{{ define "section-tree-nav-section" }}
-    {{ $s := .section }}
-    {{ $p := .page }}
-    {{ $shouldDelayActive := .delayActive }}
-    {{ $indent := .indent }}
-    {{ $active := eq $p.RelPermalink $s.RelPermalink }}
-    {{ $show := or ($p.IsAncestor $s) ($p.IsDescendant $s) }}
-    {{ $sid := $s.RelPermalink | anchorize }}
-<ul class="td-sidebar-nav__section pr-md-3">
-  <li class="td-sidebar-nav__section-title">
-    <a  href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if not $show }} collapsed{{ end }}{{ if $active}} active{{ end }} td-sidebar-link td-sidebar-link__section indent-{{$indent}}">{{ $s.LinkTitle }}</a>
-    {{ $pages := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true }}
-    {{ $pages := $pages | first 50 }}
-    {{ if gt (len $pages) 0 }}
-    <ul>
-        {{ range $pages }}
-            {{ if .IsPage }}
-                {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
-                {{ $active := eq . $p }}
-      <li class="collapse {{ if $show }}show{{ end }}" id="{{ $sid }}">
-        <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }} indent-{{add $indent 1}}" id="{{ $mid }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-      </li>
-            {{ else }}
-                {{ $indent := add $indent 1 }}
-                {{ template "section-tree-nav-section" (dict "page" $p "section" . "indent" $indent) }}
-            {{ end }}
-        {{ end }}
-    </ul>
-    {{ end }}
-  </li>
-</ul>
-{{ end }}

static/js/toc.js

@@ -111,11 +111,18 @@ function makeToc() {
 
   const section = makeTocSection(tocTargets, 0);
   nav.appendChild(section.content);
-  // append title and content to the #toc placeholder
-  const toc = document.body.querySelector("#toc");
+  // build the TOC and append to it title and content
+  const toc = document.createElement("div");
+  toc.id = "toc";
   toc.appendChild(title);
   toc.appendChild(nav);
 
+  // append TOC to the section navigation
+  const section_nav = document.body.querySelector("#td-section-nav");
+  let hr = document.createElement("hr");
+  section_nav.appendChild(hr);
+  section_nav.appendChild(toc);
+
   // tell ToC items about any rendered-data headings they contain
   setTocItemChildren(section.content, headings);
 }