Skip to content

Commit 18f8c8d

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #50211 from SayakMukhopadhyay/sidebar-tree-rework
Rework blog sidebar to align to how Docsy sidebars are implemented
2 parents 9881eb3 + 77f5299 commit 18f8c8d

File tree

2 files changed

+112
-99
lines changed

2 files changed

+112
-99
lines changed

‎layouts/partials/blog-sidebar-tree.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
{{/* The blog nav organizes posts grouped by year, which represents a customized version of the
2+
sidebar-tree in use elsewhere on the site. */}}
3+
4+
{{/* We cache this partial for bigger sites and set the active class client side. */}}
5+
{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
6+
{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit -}}
7+
<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
8+
{{ if not .Site.Params.ui.sidebar_search_disable -}}
9+
<form class="td-sidebar__search d-flex align-items-center">
10+
{{ partial "search-input.html" . }}
11+
<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-section-nav" aria-expanded="false" aria-label="{{ T "sidebar_toggle_nav" }}">
12+
</button>
13+
</form>
14+
{{ else -}}
15+
<div id="content-mobile">
16+
<form class="td-sidebar__search d-flex align-items-center">
17+
{{ partial "search-input.html" . }}
18+
<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-section-nav" aria-expanded="false" aria-label="{{ T "sidebar_toggle_nav" }}">
19+
</button>
20+
</form>
21+
</div>
22+
<div id="content-desktop"></div>
23+
{{ end -}}
24+
<nav class="collapse td-sidebar-nav{{ if .Site.Params.ui.sidebar_menu_foldable }} foldable-nav{{ end }}" id="td-section-nav">
25+
{{/* Re enable below once the disabling is done from CSS
26+
{{ if (gt (len .Site.Home.Translations) 0) -}}
27+
<div class="nav-item dropdown d-block d-lg-none">
28+
{{ partial "navbar-lang-selector.html" . }}
29+
</div>
30+
{{ end -}}
31+
*/}}
32+
{{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection -}}
33+
{{ $ulNr := 0 -}}
34+
{{ $ulShow := cond (isset .Site.Params.ui "ul_show") .Site.Params.ui.ul_show 1 -}}
35+
{{ $sidebarMenuTruncate := cond (isset .Site.Params.ui "sidebar_menu_truncate") .Site.Params.ui.sidebar_menu_truncate 50 -}}
36+
<ul class="td-sidebar-nav__section pr-md-3 ul-{{ $ulNr }}">
37+
{{ template "blog-section-tree-nav-section" (dict "page" . "section" $navRoot "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
38+
</ul>
39+
</nav>
40+
</div>
41+
{{ define "blog-section-tree-nav-section" -}}
42+
{{ $s := .section -}}
43+
{{ $p := .page -}}
44+
{{ $shouldDelayActive := .shouldDelayActive -}}
45+
{{ $sidebarMenuTruncate := .sidebarMenuTruncate -}}
46+
{{ $ulNr := .ulNr -}}
47+
{{ $ulShow := .ulShow -}}
48+
{{ $postsByYear := $s.Pages.GroupByDate "2006" }}
49+
{{ $active := and (not $shouldDelayActive) (eq $s $p) -}}
50+
{{ $activePath := and (not $shouldDelayActive) (or (eq $p $s) ($p.IsDescendant $s)) -}}
51+
{{ $show := cond (or (lt $ulNr $ulShow) $activePath (and (not $shouldDelayActive) (eq $s.Parent $p.Parent)) (and (not $shouldDelayActive) (eq $s.Parent $p)) (not $p.Site.Params.ui.sidebar_menu_compact) (and (not $shouldDelayActive) ($p.IsDescendant $s.Parent))) true false -}}
52+
{{ $mid := printf "m-%s" ($s.RelPermalink | anchorize) -}}
53+
<li class="td-sidebar-nav__section-title td-sidebar-nav__section with-child active-path{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
54+
{{- $ulNr := 1 }}
55+
<ul class="ul-{{ $ulNr }}{{ if (gt $ulNr 1)}} foldable{{end}}">
56+
{{ range $postsByYear -}}
57+
{{ $year := .Key }}
58+
{{ $mid := printf "m-%s-%s" ($s.RelPermalink | anchorize) ($year) -}}
59+
{{ $active := and (not $shouldDelayActive) (in .Pages $p) -}}
60+
<li class="td-sidebar-nav__section-title td-sidebar-nav__section with-child{{ if $active }} active-path{{ end }}{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
61+
{{ if (and $p.Site.Params.ui.sidebar_menu_foldable (ge $ulNr 1)) -}}
62+
<input type="checkbox" id="{{ $mid }}-check"{{ if $active}} checked{{ end }}/>
63+
<label for="{{ $mid }}-check"><span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $year }}</span></label>
64+
{{ else -}}
65+
{{ with $s.Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $year }}</span>
66+
{{- end }}
67+
{{- $ulNr := 2 }}
68+
<ul class="ul-{{ $ulNr }}{{ if (gt $ulNr 1)}} foldable{{end}}">
69+
{{ range .Pages -}}
70+
{{ $mid := printf "m-%s" (.RelPermalink | anchorize) -}}
71+
{{ $active := and (not $shouldDelayActive) (eq . $p) -}}
72+
{{ $activePath := and (not $shouldDelayActive) (eq . $p) -}}
73+
{{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) -}}
74+
{{ $manualLinkTitle := cond (isset .Params "manuallinktitle") .Params.manualLinkTitle .Title -}}
75+
<li class="td-sidebar-nav__section-title td-sidebar-nav__section without-child{{ if $active }} active-path{{ end }}{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
76+
{{ if (and $p.Site.Params.ui.sidebar_menu_foldable (ge $ulNr 1)) -}}
77+
<input type="checkbox" id="{{ $mid }}-check"{{ if $active}} checked{{ end }}/>
78+
<label for="{{ $mid }}-check"><a href="{{ $manualLink }}"{{ if ne .LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0 {{ if $active}} active{{ end }} td-sidebar-link{{ if .IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}" id="{{ $mid }}">{{ with .Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ .LinkTitle }}</span></a></label>
79+
{{ else -}}
80+
<a href="{{ $manualLink }}"{{ if ne .LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0{{ if $active}} active{{ end }} td-sidebar-link{{ if .IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}" id="{{ $mid }}">{{ with .Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ .LinkTitle }}</span></a>
81+
{{- end }}
82+
</li>
83+
{{- end }}
84+
</ul>
85+
</li>
86+
{{- end }}
87+
</ul>
88+
</li>
89+
{{- end }}

‎layouts/partials/blog-sidebar.html

Lines changed: 23 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,23 @@
1-
{{/* The blog nav organizes posts grouped by year, which represents a customized version of the
2-
sidebar-tree in use elsewhere on the site. */}}
3-
4-
{{/* We cache this partial for bigger sites and set the active class client side. */}}
5-
{{ $shouldDelayActive := ge (len .Site.Pages) 2000 }}
6-
7-
<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
8-
9-
<form class="td-sidebar__search d-flex align-items-center">
10-
{{ partial "search-input.html" . }}
11-
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fa-solid 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">
12-
</button>
13-
</form>
14-
15-
<nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
16-
<!-- {{ if (gt (len .Site.Home.Translations) 0) }}
17-
<div class="nav-item dropdown d-block d-lg-none">
18-
{{ partial "navbar-lang-selector.html" . }}
19-
</div>
20-
{{ end }} -->
21-
{{ template "blog-nav-section" (dict "page" . "section" .FirstSection "delayActive" $shouldDelayActive) }}
22-
</nav>
23-
</div>
24-
25-
{{ define "blog-nav-section" }}
26-
27-
{{ $shouldDelayActive := .delayActive }}
28-
{{ $sid := .section.RelPermalink | anchorize }}
29-
{{ $postsByYear := .section.Pages.GroupByDate "2006" }}
30-
31-
{{ range $postsByYear }}
32-
33-
{{ $year := .Key }}
34-
{{ $p := $.page }}
35-
{{ $active := eq ($p.Date.Format "2006") $year }}
36-
37-
{{ $firstPost := .Pages | first 1 }}
38-
<ul class="td-sidebar-nav__section pr-md-3">
39-
<li class="td-sidebar-nav__section-title">
40-
<a href="{{range $firstPost}}{{ .RelPermalink }}{{end}}" class="align-left pl-0 pr-2{{ if not $active }} collapsed{{ end }}{{ if $active}} active{{ end }} td-sidebar-link td-sidebar-link__section">
41-
{{ $year }}
42-
</a>
43-
44-
</li>
45-
{{ $firstPages := .Pages | first 10 }}
46-
{{ $remainingPages := .Pages | after 10 }}
47-
{{ $displayRemainingPages := false }}
48-
<ul>
49-
{{ range $firstPages }}
50-
{{ if .IsPage }}
51-
<li class="blog-post collapse {{ if $active }}show{{ end }}" data-year={{$year}}>
52-
{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
53-
{{ $active := eq . $p }}
54-
<a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
55-
{{ .LinkTitle }}
56-
</a>
57-
</li>
58-
{{ end }}
59-
{{ end }}
60-
<li class="more-posts collapse {{ if $active }}show{{ end }}" data-year="{{$year}}">
61-
<a class="td-sidebar-link" id="more-posts" href="">{{ T "blog_post_show_more" }}</a>
62-
</li>
63-
{{ range $remainingPages }}
64-
{{ if .IsPage }}
65-
<li class="blog-post hidden collapse" data-year={{$year}}>
66-
{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
67-
{{ $active := eq . $p }}
68-
<a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
69-
{{ .LinkTitle }}
70-
</a>
71-
</li>
72-
{{ end }}
73-
{{ end }}
74-
</ul>
75-
</ul>
76-
77-
{{ end }}
78-
79-
{{ end }}
80-
81-
{{/* Reveal the remaining blog posts and hide the clicked link */}}
82-
<script>
83-
let morePosts = document.querySelectorAll(".more-posts");
84-
let year = "";
85-
morePosts.forEach(link => {
86-
link.onclick = (e) => {
87-
e.preventDefault();
88-
year = link.dataset.year;
89-
console.log(year);
90-
let hiddenPosts = document.querySelectorAll(`.blog-post.hidden[data-year="${year}"]`);
91-
console.log(hiddenPosts);
92-
hiddenPosts.forEach(post => {
93-
post.classList.add('show');
94-
post.classList.remove("hidden");
95-
});
96-
link.style.display = "none";
97-
}
98-
});
99-
</script>
1+
{{/* The "active" toggle here may delay rendering, so we only cache this side bar menu for bigger sites.
2+
*/}}{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
3+
{{ $shouldCache := ge (len .Site.Pages) $sidebarCacheLimit -}}
4+
{{ $sidebarCacheTypeRoot := cond (isset .Site.Params.ui "sidebar_cache_type_root") .Site.Params.ui.sidebar_cache_type_root false -}}
5+
{{ if $shouldCache -}}
6+
{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
7+
<script>
8+
$(function() {
9+
$("#td-section-nav a").removeClass("active");
10+
$("#td-section-nav #{{ $mid }}").addClass("active");
11+
$("#td-section-nav #{{ $mid }}-li span").addClass("td-sidebar-nav-active-item");
12+
$("#td-section-nav #{{ $mid }}").parents("li").addClass("active-path");
13+
$("#td-section-nav li.active-path").addClass("show");
14+
$("#td-section-nav li.active-path").children("input").prop('checked', true);
15+
$("#td-section-nav #{{ $mid }}-li").siblings("li").addClass("show");
16+
$("#td-section-nav #{{ $mid }}-li").children("ul").children("li").addClass("show");
17+
$("#td-sidebar-menu").toggleClass("d-none");
18+
});
19+
</script>
20+
{{ partialCached "blog-sidebar-tree.html" . .FirstSection.RelPermalink }}
21+
{{ else -}}
22+
{{ partial "blog-sidebar-tree.html" . }}
23+
{{- end }}

0 commit comments

Comments
 (0)