Sidebar & Table of Contents aren't rendered properly when word about is used as title.

[ochrebasis]

Discussed in #1305

^{Originally posted by ochrebasis November 5, 2024}

Issue:

The issue I'm encountering is that the table of contents and sidebar aren't appearing on content which is placed outside of the /content/docs/ subfolder.

The about page content mentioned below when placed under /content/docs/ behaves as expected.

Here's an example of what a misrendered webpage looks like:

For example:

Has sidebar and toc:

• /content/docs/page/_index.md
• /content/docs/page/example.md

Does not have sidebar and toc:

• /content/about/about-us/_index.md
• /content/about/about-us/about-infosec-club.md
• /content/about/about-us/infosec-leadership-and-advisors.md

Issue:

Specifically using the word about as an alternative 'docs' section breaks navbar and table of contents functionality.

Steps to reproduce:

1. Create a new doks installation, with npm create thulite@latest -- --template doks, npm install, and host it locally with npm run dev.
2. Create a new docs type section using npm run create -- --kind docs about.
3. Edit params.toml to sectionNav = ["docs", "about"].
4. Navigate to http://localhost:1313/about/lorem/ipsum.

This is not a major issue, regarding building a Doks website, I decided to go with different wording for the website I'm building instead. It's also possible this issue is something to do with Hugo that I have not been made aware of.

Either way, I'm posting this here to let anyone else know who encounters this issue to avoid using about as a sectionNav.

[h-enk]

Thanks for reporting this

[dorneanu]

I can relate to that! I'm also struggling adding the TOC for blog posts.

[dorneanu]

@ochrebasis I see you've managed to set a new section "info"on https://bcinfosec.club/. How did you add the TOC to this new section?

[dorneanu]

Meanwhile I've managed to add TOC to the blog posts as well. I've used the single.html here for creating layouts/blog/single.html in my project folder (the single.html for blog has no TOC support). This is what I have:

{{ define "main" }}
<div class="row flex-xl-nowrap">
  {{ if ne .Params.toc false -}}
  <nav class="docs-toc{{ if ne site.Params.doks.navbarSticky true }} docs-toc-top{{ end }}{{ if site.Params.doks.headerBar }} docs-toc-offset{{ end }} d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
    {{ partial "sidebar/docs-toc-desktop.html" . }}
  </nav>
  {{ end -}}
  
  {{ if .Params.toc -}}
  <main class="docs-content col-lg-11 col-xl-12">
  {{ else -}}
  <main class="docs-content col-lg-11 col-xl-12 mx-xl-auto">
  {{ end -}}
    <article>
      <div class="blog-header">
        <h1>{{ .Title }}</h1>
        {{ partial "main/blog-meta.html" . }}
      </div>
      
      {{ if site.Params.doks.imageSingle -}}
        {{- $images := .Resources.ByType "image" -}}
        {{- $featured := $images.GetMatch "*feature*" -}}
        {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
        {{- if $featured -}}
          <div class="blog-featured-image">
            {{ partial "picture" (dict
            "page" .
            "src" $featured
            "alt" .Title
            "class" "img-post-single rounded-0"
            )}}
          </div>
        {{ end -}}
      {{ end -}}
      
      {{ with .Params.summary -}}<p class="lead">{{ . }}</p>{{ end -}}
      
      {{ if ne .Params.toc false -}}
      <nav class="toc-mobile d-xl-none" aria-label="Quaternary navigation">
        {{ partial "sidebar/docs-toc-mobile.html" . }}
      </nav>
      {{ end -}}
      
      {{ if site.Params.doks.headlineHash -}}
        {{ partial "main/headline-hash" .Content }}
      {{ else -}}
        {{ .Content }}
      {{ end -}}
      
      {{ if .Params.tags -}}
      <div class="tag-list-single">
        {{ range $index, $tag := .Params.tags -}}
          <a class="btn btn-light" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/" role="button">{{ . }}</a>
        {{ end -}}
      </div>
      {{ end -}}
    </article>
  </main>
</div>
{{ end }}

{{ define "sidebar-footer" }}
{{ if site.Params.doks.relatedPosts -}}
  {{ $related := .Site.RegularPages.Related . | first 3 -}}
  {{ with $related -}}
  <div class="bg-light">
    <section class="section section-related container">
      <div class="row justify-content-center">
        <div class="col-md-12 col-lg-9">
          <h2 class="section-title text-center">Related posts</h2>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-lg-9">
          {{ range . -}}
            <div class="card">
              <div class="card-body">
                <article>
                  <h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
                  <p>{{ .Params.summary | safeHTML }}</p>
                  {{ partial "main/blog-meta.html" . -}}
                </article>
              </div>
            </div>
            {{ end -}}
        </div>
      </div>
    </section>
  </div>
  {{ end -}}
  {{ end -}}
  {{ end }}

This will then display the TOC also in the blog section.