Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit c36309e

Browse files
dvdksndvdksn
committedSep 9, 2024
hugo: render site navigation using sections
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
1 parent 135870f commit c36309e

File tree

11 files changed

+82
-2599
lines changed

11 files changed

+82
-2599
lines changed
 

‎CONTRIBUTING.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,12 @@ The website is built using [Hugo](https://gohugo.io/). The content is primarily
2424
Markdown files in the `/content` directory of this repository (with a few
2525
exceptions, see [Content not edited here](#content-not-edited-here)).
2626

27-
The structure of the sidebar navigation on the site is defined in
28-
[`/data/toc.yaml`](./data/toc.yaml). To rename or change the location of a page
29-
in the left-hand navigation, edit the `toc.yaml` file.
27+
The structure of the sidebar navigation on the site is defined by the site's
28+
section hierarchy in the `contents` directory. The titles of the pages are
29+
defined in the front matter of the Markdown files. You can use `title` and
30+
`linkTitle` to define the title of the page. `title` is used for the page
31+
title, and `linkTitle` is used for the sidebar title. If `linkTitle` is not
32+
defined, the `title` is used for both.
3033

3134
You must fork this repository to create a pull request to propose changes. For more details, see [Local setup](#local-setup).
3235

‎assets/css/global.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,6 @@
3131
@apply dark:hue-rotate-180 dark:invert dark:filter;
3232
}
3333

34-
.sidebar-hover {
35-
@apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
36-
}
37-
38-
.sidebar-underline {
39-
@apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
40-
}
41-
4234
.bg-pattern-blue {
4335
background-color: theme(colors.white / 50%);
4436
background-image: url('/assets/images/bg-pattern-blue.webp');

‎assets/js/src/sidebar.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎data/toc.yaml

Lines changed: 0 additions & 2441 deletions
This file was deleted.

‎hugo.yaml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,19 +120,19 @@ params:
120120
menus:
121121
main:
122122
- name: Get started
123-
url: /get-started/
123+
pageRef: /get-started/
124124
weight: 1
125125
- name: Guides
126-
url: /guides/
126+
pageRef: /guides/
127127
weight: 2
128128
- name: Manuals
129-
url: /manuals/
129+
pageRef: /manuals/
130130
weight: 3
131131
- name: Reference
132-
url: /reference/
132+
pageRef: /reference/
133133
weight: 4
134134
- name: Learning paths
135-
url: /learning-paths/
135+
pageRef: /learning-paths/
136136
weight: 5
137137

138138
footer:

‎hugo_stats.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,12 +307,16 @@
307307
"highlight",
308308
"hover:bg-blue-light-400",
309309
"hover:bg-gray-light-100",
310+
"hover:bg-gray-light-300",
310311
"hover:border-gray-light-200",
312+
"hover:dark:bg-gray-dark-300",
311313
"hover:dark:border-gray-dark",
314+
"hover:dark:text-blue-dark",
312315
"hover:drop-shadow-lg",
313316
"hover:opacity-75",
314317
"hover:opacity-90",
315318
"hover:text-black",
319+
"hover:text-blue-light",
316320
"hover:underline",
317321
"hub-api",
318322
"icon-lg",
@@ -451,9 +455,9 @@
451455
"scale-75",
452456
"scroll-mt-20",
453457
"scroll-mt-36",
458+
"select-none",
454459
"self-center",
455460
"shadow",
456-
"sidebar-hover",
457461
"sm:flex-row",
458462
"sm:grid-cols-2",
459463
"sm:items-center",

‎layouts/partials/breadcrumbs.html

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
1-
{{ $scratch := partialCached "utils/tocparser.html" . . }}
2-
{{ $ctx := . }}
3-
4-
51
<nav id="breadcrumbs" data-pagefind-ignore class="py-4 gap-4 flex items-center text-gray-light dark:text-gray-dark max-w-full min-w-0">
6-
{{ with ($scratch.GetSortedMapValues "sections") }}
7-
{{ range $i, $e := . }}
8-
{{- if $i -}}
9-
<span>/</span>
10-
{{- end -}}
11-
<a href="{{ $e.path }}" class="link truncate">{{ markdownify $e.title }}</a>
12-
{{- end -}}
13-
{{- end -}}
14-
{{- with $scratch.Get "lastsection" -}}
15-
<span>/</span>
16-
<span class="truncate">{{ markdownify .title }}</span>
17-
{{- end -}}
2+
{{ range .Ancestors.Reverse }}
3+
<a href="{{ .Permalink }}" class="link truncate">{{ markdownify .LinkTitle }}</a>
4+
<span>/</span>
5+
{{- end }}
6+
<span class="truncate">{{ markdownify .LinkTitle }}</span>
187
</nav>

‎layouts/partials/sidebar.html

Lines changed: 57 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,78 @@
1-
{{/* Parse toc.yaml and store the resulting map to $scratch */}}
2-
{{ $scratch := partialCached "utils/tocparser.html" . . }}
3-
{{ $ctx := . }}
4-
5-
{{/* Get the name of the first section */}}
6-
{{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
7-
81
{{/* Render the top-nav in sidebar for small screens */}}
92
<nav class="text-sm pb-4 gap-4 flex md:hidden flex-col justify-evenly">
103
<div class="text-gray-light dark:text-gray-dark">Main sections</div>
114
{{ range site.Menus.main }}
125
<div class="pl-2 underline-offset-8 decoration-2 hover:underline decoration-blue-light dark:decoration-blue-dark hover:opacity-75
13-
{{- if eq $firstSection .Name }}
6+
{{- if or (page.IsDescendant .Page) (eq page .Page) }}
147
underline
158
{{- end }}">
169
<a href="{{ .URL }}">{{ .Name }}</a>
1710
</div>
1811
{{ end }}
1912
</nav>
20-
{{ if $firstSection }}
21-
{{ $allSections := slice }}
22-
{{ range $i, $e := ($scratch.GetSortedMapValues "sections") }}
23-
{{ $allSections = $allSections | append (index $e "title") }}
24-
{{ end }}
25-
<nav id="sectiontree" class="text-sm flex flex-col">
13+
<nav class="text-sm flex flex-col">
2614
<div class="block py-4 md:hidden text-gray-light dark:text-gray-dark">This section</div>
2715
{{/* The current page is in the table of contents */}}
2816
<ul>
29-
{{/* Walk the toc.yaml nodes under the current main section */}}
30-
{{ range (index site.Data.toc $firstSection) }}
31-
{{ template "tocRender" (dict "ctx" $ctx "entry" . "sections" $allSections) }}
32-
{{ end }}
17+
{{ template "renderSingle" .FirstSection }}
18+
{{ template "renderChildren" .FirstSection }}
3319
</ul>
3420
</nav>
21+
22+
{{ define "renderChildren" }}
23+
{{- range .Pages }}
24+
{{- if eq .Params.sitemap false }}
25+
{{- continue }}
26+
{{- end }}
27+
{{- if .IsSection }}
28+
{{- template "renderList" . }}
29+
{{- else }}
30+
{{- template "renderSingle" . }}
31+
{{- end }}
32+
{{- end }}
3533
{{ end }}
3634

3735
{{/* Recursive template for sidebar items */}}
38-
{{ define "tocRender" }}
39-
{{ $ctx := .ctx }}
40-
{{ $sections := .sections }}
41-
{{ if .entry.sectiontitle }}
42-
{{ $expanded := in $sections .entry.sectiontitle }}
43-
{{/* .entry is a section */}}
44-
<li>
45-
{{/* See event handler in assets/js/src/sidebar.js */}}
46-
<button class="rounded px-4 sidebar-hover w-full flex items-center justify-between">
47-
<span class="py-2 truncate flex items-center gap-2">
48-
{{ markdownify .entry.sectiontitle }}
49-
</span>
50-
<span class="icon-svg {{ if $expanded }}hidden{{ end }}">
51-
{{ partialCached "icon" "expand_more" "expand_more" }}
52-
</span>
53-
<span class="icon-svg {{ if not $expanded }}hidden{{ end }}">
54-
{{ partialCached "icon" "expand_less" "expand_less" }}
55-
</span>
56-
</button>
57-
<ul class="{{if not $expanded}}hidden {{end}}ml-3">
58-
{{ range .entry.section }}
59-
{{ template "tocRender" (dict "entry" . "ctx" $ctx "sections" $sections ) }}
60-
{{ end }}
61-
</ul>
62-
</li>
63-
{{ else }}
64-
{{/* .entry is a page */}}
65-
{{ $isCurrent := eq (urls.Parse $ctx.Permalink).Path .entry.path }}
66-
<li class="pl-4 sidebar-hover rounded
67-
{{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
68-
<a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block"
69-
href="{{ .entry.path }}" title="{{ markdownify .entry.title }}"
70-
><span class="flex items-center gap-2">{{ markdownify .entry.title }}</span>
71-
</a>
72-
</li>
36+
{{ define "renderList" }}
37+
{{ $isCurrent := eq page . }}
38+
{{ $expanded := or $isCurrent (page.IsDescendant .) }}
39+
<li x-data="{ expanded: {{$expanded}} }">
40+
<div class="rounded px-4 w-full flex items-center justify-between{{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
41+
<span class="py-2 truncate flex items-center gap-2">
42+
{{- if .Permalink }}
43+
{{/* If the link is not empty, use it */}}
44+
<a class="select-none hover:text-blue-light hover:dark:text-blue-dark"
45+
href="{{ .Permalink }}">{{ markdownify .LinkTitle }}</a>
46+
{{- else }}
47+
{{/* Otherwise, just expand the section */}}
48+
<button @click="expanded = !expanded"
49+
class="select-none hover:text-blue-light hover:dark:text-blue-dark">
50+
{{ markdownify .LinkTitle }}
51+
</button>
52+
{{- end }}
53+
</span>
54+
<button @click="expanded = !expanded" class="hover:bg-gray-light-300 hover:dark:bg-gray-dark-300 rounded">
55+
<span :class="{ 'hidden' : expanded }" class="icon-svg {{ if $expanded }}hidden{{ end }}">
56+
{{ partialCached "icon" "expand_more" "expand_more" }}
57+
</span>
58+
<span :class="{ 'hidden' : !expanded }" class="icon-svg {{ if not $expanded }}hidden{{ end }}">
59+
{{ partialCached "icon" "expand_less" "expand_less" }}
60+
</span>
61+
</button>
62+
</div>
63+
<ul :class="{ 'hidden' : !expanded }" class="{{if not $expanded}}hidden {{end}}ml-3">
64+
{{ template "renderChildren" . }}
65+
</ul>
66+
</li>
7367
{{ end }}
68+
69+
{{ define "renderSingle" }}
70+
{{ $isCurrent := eq page . }}
71+
<li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark
72+
{{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
73+
<a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block"
74+
href="{{ .Permalink }}" title="{{ markdownify .Title }}"
75+
><span class="flex items-center gap-2">{{ markdownify .LinkTitle }}</span>
76+
</a>
77+
</li>
7478
{{ end }}

‎layouts/partials/top-nav.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
{{ $scratch := partialCached "utils/tocparser.html" . . }}
2-
{{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
31
<div>
42
<nav>
53
<ul class="mt-1 box-content hidden gap-4 md:flex">
64
{{ range site.Menus.main }}
7-
<li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}>
5+
<li {{- if or (eq page .Page) (page.IsDescendant .Page) }} class="border-b-4" {{- end }}>
86
<a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
97
</li>
108
{{ end }}

‎layouts/partials/utils/tocparser.html

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎layouts/tag/term.html

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ <h1 class="scroll-mt-36 flex gap-4 items-center">
2020
</thead>
2121
<tbody>
2222
{{ range .Paginator.Pages }}
23-
{{ $scratch := partialCached "utils/tocparser.html" . . }}
24-
{{ $sections := $scratch.GetSortedMapValues "sections" }}
2523
<tr>
2624
<td>
2725
<a href="{{ .Permalink }}" class="link">
@@ -30,10 +28,9 @@ <h1 class="scroll-mt-36 flex gap-4 items-center">
3028
</td>
3129
<td>
3230
<span class="text-gray-light dark:text-gray-dark">
33-
{{ range $i, $e := $sections }}
34-
{{ if $i }} / {{ end }}
35-
{{ $e.title }}
36-
{{ end }}
31+
{{- range .Ancestors.Reverse }}
32+
{{ .Title }} /
33+
{{- end }}
3734
</span>
3835
</td>
3936
</tr>

0 commit comments

Comments
 (0)
Please sign in to comment.