Fix the sidebar in recent versions of Hugo (#1551)
Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>
This commit is contained in:
Kévin Commaille
GitHub
parent
30845e189f
commit
a6eb381ebb
5 changed files with 27 additions and 70 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
changelogs/internal/newsfragments/1551.clarification
Normal file
1
changelogs/internal/newsfragments/1551.clarification
Normal file
|
|
@ -0,0 +1 @@
|
|||
Fix the sidebar in recent versions of Hugo
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue