diff --git a/assets/scss/components/_toc.scss b/assets/scss/components/_toc.scss index c3259cab..cf7bac4f 100644 --- a/assets/scss/components/_toc.scss +++ b/assets/scss/components/_toc.scss @@ -75,6 +75,35 @@ } } +a.toc-item { + display: block; +} + +a.toc-level-1 { + margin-left: 0; +} + +a.toc-level-2 { + margin-left: 1em; +} + +a.toc-level-3 { + margin-left: 2em; +} + +a.toc-level-4 { + margin-left: 3em; +} + +a.toc-level-5 { + margin-left: 4em; +} + +a.toc-level-6 { + margin-left: 5em; +} + + @if $enable-dark-mode { [data-bs-theme="dark"] { .toc-button { diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 64073a03..c1da2108 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -14,7 +14,6 @@ "footer", "form", "h2", - "h3", "head", "hr", "html", @@ -252,6 +251,7 @@ "font-monospace", "footer", "form-control", + "fs-2", "fs-3", "fs-5", "fs-6", @@ -357,7 +357,6 @@ "p-2", "p-3", "p-4", - "pb-2", "pb-3", "pb-4", "pb-5", @@ -373,6 +372,7 @@ "ps-1", "ps-3", "pt-1", + "pt-4", "pt-5", "pt-md-3", "ptw-3", @@ -469,6 +469,8 @@ "toast-header", "toc", "toc-button", + "toc-item", + "toc-level-1", "toc-panel", "toc-sidebar", "toggler-icon", @@ -485,7 +487,6 @@ "w-50" ], "ids": [ - "TableOfContents", "abbr", "accordion", "accordion-0", diff --git a/layouts/partials/assets/persona.html b/layouts/partials/assets/persona.html index 5dc19ed1..51616d78 100644 --- a/layouts/partials/assets/persona.html +++ b/layouts/partials/assets/persona.html @@ -53,7 +53,7 @@ {{- $title := .title -}} {{- $content := .content -}} -

{{ $title }}

+
{{ $title }}
{{ with $content }}

{{ . }}

{{ end -}} {{- end -}} diff --git a/layouts/partials/assets/toc-dropdown.html b/layouts/partials/assets/toc-dropdown.html index f035efe1..c1037ce1 100644 --- a/layouts/partials/assets/toc-dropdown.html +++ b/layouts/partials/assets/toc-dropdown.html @@ -4,36 +4,60 @@ Visit gethinode.com/license for more details. --> + {{ $error := false }} - - -{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "toc" "args" . "group" "partial") }} - {{- errorf "partial [assets/toc-dropdown.html] - Invalid arguments" -}} +{{ $args := partial "utilities/InitArgs.html" (dict "structure" "toc" "args" . "group" "partial") }} +{{ if $args.err }} + {{ partial "utilities/LogErr.html" (dict + "partial" "assets/schema.html" + "msg" "Invalid arguments" + "details" $args.errmsg + "file" page.File + )}} {{ $error = true }} {{ end }} - -{{- $page := .page -}} -{{ $items := len (findRE "(.|\n)*?" $page.TableOfContents) -}} + +{{- $startLevel := or (.Site.Params.navigation.startLevel | int) 2 }} +{{- $endLevel := or (.Site.Params.navigation.endLevel | int) 3 }} +{{- $minNumHeadings := or (.Site.Params.navigation.minNumHeadings | int) 2 }} -{{ if and (not $error) (gt $items 1) -}} -
- {{ partial "assets/button.html" (dict - "title" (T "toc") - "color" "secondary" - "outline" "true" - "class" "toc-button" - "icon" "fas sort" - "justify" "between" - "collapse" "toc-collapse" - "order" "last" - "spacing" false - ) -}} -
+ +{{ if not $error }} + {{ $headings := partial "assets/toc-headings.html" $args.page }} + {{- with $headings }} + {{- if and (not $error) (ge (len .) $minNumHeadings) }} +
+ {{ partial "assets/button.html" (dict + "title" (T "toc") + "color" "secondary" + "outline" "true" + "class" "toc-button" + "icon" "fas sort" + "justify" "between" + "collapse" "toc-collapse" + "order" "last" + "spacing" false + ) -}} +
-
-
- {{ $page.TableOfContents }} +
+ +
+ {{- range . }} + {{- $attrs := dict "class" (printf "toc-item toc-level-%d" (add 1 (sub .level $startLevel))) }} + {{- with .id }} + {{- $attrs = merge $attrs (dict "href" (printf "%s#%s" $args.page.RelPermalink .)) }} + {{- end }} + {{ .text }} + {{- end }} +
+
-
-{{ end -}} \ No newline at end of file + {{- end }} + {{- end }} +{{- end }} diff --git a/layouts/partials/assets/toc-headings.html b/layouts/partials/assets/toc-headings.html new file mode 100644 index 00000000..e66c4dbd --- /dev/null +++ b/layouts/partials/assets/toc-headings.html @@ -0,0 +1,75 @@ +{{- /* + Copyright 2023 Veriphor, LLC + + Licensed under the Apache License, Version 2.0 (the "License"); you may not + use this file except in compliance with the License. You may obtain a copy of + the License at + + https://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + License for the specific language governing permissions and limitations under + the License. + */}} + + {{- /* Initialize. */}} + {{- $partialName := "toc-headings" }} + + {{- /* Verify minimum required version. */}} + {{- $minHugoVersion := "0.125.6" }} + {{- if lt hugo.Version $minHugoVersion }} + {{- errorf "The %q partial requires Hugo v%s or later." $partialName $minHugoVersion }} + {{- end }} + + {{- /* Determine content path for warning and error messages. */}} + {{- $contentPath := "" }} + {{- with .File }} + {{- $contentPath = .Path }} + {{- else }} + {{- $contentPath = .Path }} + {{- end }} + + {{- /* Get configuration. */}} + {{- $startLevel := or (.Site.Params.navigation.startLevel | int) 2 }} + {{- $endLevel := or (.Site.Params.navigation.endLevel | int) 3 }} + + {{- /* Get headings. */}} + {{- $headings := slice }} + {{- $ids := slice }} + {{- range findRE `(?is)` .Content }} + {{- $level := substr . 2 1 | int }} + {{- if and (ge $level $startLevel) (le $level $endLevel) }} + {{- $text := replaceRE `(?is)(.+?)` "$1" . }} + {{- $text = trim $text " " | plainify | safeHTML }} + {{- $id := "" }} + {{- if findRE `\s+id=` . }} + {{- $id = replaceRE `(?is).+?\s+id=(?:\x22|\x27)?(.*?)(?:\x22|\x27)?[\s>].+` "$1" . }} + {{- $ids = $ids | append $id }} + {{- if not $id }} + {{- errorf "The %q partial detected that the %q heading has an empty ID attribute. See %s" $partialName $text $contentPath }} + {{- end }} + {{- else }} + {{- errorf "The %q partial detected that the %q heading does not have an ID attribute. See %s" $partialName $text $contentPath }} + {{- end }} + {{- $headings = $headings | append (dict "id" $id "level" $level "text" $text) }} + {{- end }} + {{- end }} + + {{- /* Check for duplicate heading IDs. */}} + {{- $unique := slice }} + {{- $duplicates := slice }} + {{- range $ids }} + {{- if in $unique . }} + {{- $duplicates = $duplicates | append . }} + {{- else }} + {{- $unique = $unique | append . }} + {{- end }} + {{- end }} + {{- with $duplicates }} + {{- errorf "The %q partial detected duplicate heading IDs (%s) in %s" $partialName (delimit . ", ") $contentPath }} + {{- end }} + + {{ return $headings }} + \ No newline at end of file diff --git a/layouts/partials/assets/toc-parse-content.html b/layouts/partials/assets/toc-parse-content.html new file mode 100644 index 00000000..c2d824a7 --- /dev/null +++ b/layouts/partials/assets/toc-parse-content.html @@ -0,0 +1,107 @@ +{{- /* + Copyright 2023 Veriphor, LLC + + Licensed under the Apache License, Version 2.0 (the "License"); you may not + use this file except in compliance with the License. You may obtain a copy of + the License at + + https://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + License for the specific language governing permissions and limitations under + the License. + */}} + + {{- /* + Renders a table of contents by parsing rendered content. + + In site configuration, set the default start level, end level, and the minimum + number of headings required to show the table of contents: + + [params.toc] + startLevel = 2 # default is 2 + endLevel = 3 # default is 3 + minNumHeadings = 2 # default is 2 + + To display the table of contents on a page: + + +++ + title = 'Post 1' + toc = true + +++ + + To display the table of contents on a page, and override one or more of the + default settings: + + +++ + title = 'Post 1' + [toc] + startLevel = 2 # default is 2 + endLevel = 3 # default is 3 + minNumHeadings = 2 # default is 2 + +++ + + Change or localize the title with a "toc_title" key in your i18n file(s). + + Start with these basic CSS rules to style the table of contents: + + a.toc-item { + display: block; + } + a.toc-level-1 { + margin-left: 0em; + } + a.toc-level-2 { + margin-left: 1em; + } + a.toc-level-3 { + margin-left: 2em; + } + a.toc-level-4 { + margin-left: 3em; + } + a.toc-level-5 { + margin-left: 4em; + } + a.toc-level-6 { + margin-left: 5em; + } + + @context {page} . + + @returns {template.HTML} + + @example {{ partial "toc-parse-content.html" . }} + */}} + + {{- /* Get configuration. */}} + {{- $startLevel := or (.Site.Params.navigation.startLevel | int) 2 }} + {{- $endLevel := or (.Site.Params.navigation.endLevel | int) 3 }} + {{- $minNumHeadings := or (.Site.Params.navigation.minNumHeadings | int) 2 }} + + {{- /* Initialize. */}} + {{ $headings := partial "assets/toc-headings.html" . }} + + {{- /* Render */}} + {{- if .Site.Params.navigation.toc }} + {{- with $headings }} + {{- if ge (len .) $minNumHeadings }} + {{ T "toc" }}: + + {{- end }} + {{- end }} + {{- end }} \ No newline at end of file diff --git a/layouts/partials/assets/toc.html b/layouts/partials/assets/toc.html index 01d71081..75d54e15 100644 --- a/layouts/partials/assets/toc.html +++ b/layouts/partials/assets/toc.html @@ -1,5 +1,5 @@ @@ -14,10 +14,8 @@ {{- $page := .page -}} -{{ $items := len (findRE "(.|\n)*?" $page.TableOfContents) -}} -{{ if and (not $error) (gt $items 1) -}} - {{ T "toc" }}: - {{ $page.TableOfContents }} +{{ if not $error -}} + {{ partial "assets/toc-parse-content.html" $page }} {{ end -}} \ No newline at end of file diff --git a/layouts/shortcodes/accordion-item.html b/layouts/shortcodes/accordion-item.html index 072d1969..cedb8505 100644 --- a/layouts/shortcodes/accordion-item.html +++ b/layouts/shortcodes/accordion-item.html @@ -53,11 +53,11 @@
{{- with $header -}} -

+
-

+
{{- end -}}
{{ $body | .Page.RenderString | safeHTML }}
diff --git a/package-lock.json b/package-lock.json index 88897cad..322509e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gethinode/hinode", - "version": "0.28.0", + "version": "0.28.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gethinode/hinode", - "version": "0.28.0", + "version": "0.28.1", "license": "MIT", "dependencies": { "@fullhuman/postcss-purgecss": "^7.0.2", diff --git a/package.json b/package.json index cc021509..915d101b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gethinode/hinode", - "version": "0.28.0", + "version": "0.28.1", "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator", "keywords": [ "hugo",