Aidan Ranney
0625ced466
* Add Docsy, required packages and config * Apply Docsy integration work to k8s website This encompasses significant changes to the style system, layout files, as well as changes to some of the static assets. To examine this work and the iterations that were performed, the original repository can be found at https://github.com/gearbox-built/kubernetes-hugo.git * Address issues found in review The styling and positioning of the header, footer, some shortcodes and main container elements are improved. A new partial is added for favicons. The sidebars, as well as inner table of contents, have been altered for better positioning and rendering of content. Localization has also been addressed. * Enable announcements The recent Black Lives Matter announcement surfaced issues which have been addressed.
92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
{{/* The blog nav organizes posts grouped by year, which represents a customized version of the
|
|
sidebar-tree in use elsewhere on the site. */}}
|
|
|
|
{{/* 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 }}">
|
|
<nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
|
|
<!-- {{ if (gt (len .Site.Home.Translations) 0) }}
|
|
<div class="nav-item dropdown d-block d-lg-none">
|
|
{{ partial "navbar-lang-selector.html" . }}
|
|
</div>
|
|
{{ end }} -->
|
|
{{ template "blog-nav-section" (dict "page" . "section" .FirstSection "delayActive" $shouldDelayActive) }}
|
|
</nav>
|
|
</div>
|
|
|
|
{{ define "blog-nav-section" }}
|
|
|
|
{{ $shouldDelayActive := .delayActive }}
|
|
{{ $sid := .section.RelPermalink | anchorize }}
|
|
{{ $postsByYear := .section.Pages.GroupByDate "2006" }}
|
|
|
|
{{ range $postsByYear }}
|
|
|
|
{{ $year := .Key }}
|
|
{{ $p := $.page }}
|
|
{{ $active := eq ($p.Date.Format "2006") $year }}
|
|
|
|
{{ $firstPost := .Pages | first 1 }}
|
|
<ul class="td-sidebar-nav__section pr-md-3">
|
|
<li class="td-sidebar-nav__section-title">
|
|
<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">
|
|
{{ $year }}
|
|
</a>
|
|
|
|
</li>
|
|
{{ $firstPages := .Pages | first 10 }}
|
|
{{ $remainingPages := .Pages | after 10 }}
|
|
{{ $displayRemainingPages := false }}
|
|
<ul>
|
|
{{ range $firstPages }}
|
|
{{ if .IsPage }}
|
|
<li class="blog-post collapse {{ if $active }}show{{ end }}" data-year={{$year}}>
|
|
{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
|
|
{{ $active := eq . $p }}
|
|
<a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
|
|
{{ .LinkTitle }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
{{ end }}
|
|
<li class="more-posts collapse {{ if $active }}show{{ end }}" data-year="{{$year}}">
|
|
<a class="td-sidebar-link" id="more-posts" href="">Show More Posts...</a>
|
|
</li>
|
|
{{ range $remainingPages }}
|
|
{{ if .IsPage }}
|
|
<li class="blog-post hidden collapse" data-year={{$year}}>
|
|
{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
|
|
{{ $active := eq . $p }}
|
|
<a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
|
|
{{ .LinkTitle }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
</ul>
|
|
|
|
{{ end }}
|
|
|
|
{{ end }}
|
|
|
|
{{/* Reveal the remaining blog posts and hide the clicked link */}}
|
|
<script>
|
|
let morePosts = document.querySelectorAll(".more-posts");
|
|
let year = "";
|
|
morePosts.forEach(link => {
|
|
link.onclick = (e) => {
|
|
e.preventDefault();
|
|
year = link.dataset.year;
|
|
console.log(year);
|
|
let hiddenPosts = document.querySelectorAll(`.blog-post.hidden[data-year="${year}"]`);
|
|
console.log(hiddenPosts);
|
|
hiddenPosts.forEach(post => {
|
|
post.classList.add('show');
|
|
post.classList.remove("hidden");
|
|
});
|
|
link.style.display = "none";
|
|
}
|
|
});
|
|
</script> |