Hugo-coder: Adding Table of Contents toggle option and minor CSS bug

[ajdintrejic]

So, I have been messing around with this theme and I have managed to get the toc in there. It wasn't that hard but why not just add a toggle in the post header toc: true and insert this code into /layouts/posts/single.html

        <div>
        {{ if .Params.featured_image }}
                 <img src='{{ .Params.featured_image }}' alt="Featured image"/>
        {{ end }}

        {{ if .Params.toc }}
              <hr>
              Table of Contents
               <div id="toc"> {{ .TableOfContents }} </div>
               <hr>
        {{ end }}
        {{ .Content }}
      </div>

This would make adding the Table much easier and it doesn't add much code. (excuse my horrendous indentation :) )
The table of contents also looks like this by default:

I think it's kinda out of place with all that blue text, I'm not a designer but I think making it black suits more the theme/colorscheme. You probably know better and you should decide, I have made it black so you can take a look.

I have also noticed this "bug", it a minor thing but on Android (Firefox and Brave), when you open the hamburger menu, and close it, the color of the hamburger menu changes to blue.

This also happens on light theme. When you emulate a mobile browser on desktop (atleast with Firefox) this doesn't happen all the time.

[luizdepra]

Well... what bothers me most are the list bullets. Maybe you could try to remove them but keep the indentation.
Links should be always colored with the default link-color. Making it black will make them look like a normal text.

[ajdintrejic]

What do you think? Should I fix the padding? Anyway, If you're willing to I can make a changes to my fork and make a pull request with all the translations in /i18n dir.

[jemus42]

I recently added a TOC to my site in a similar way, but I'm not all too happy with how it looks. Ideally I'd like to have a sticky TOC to the side of the content for easier navigation, but my (S)CSS experimentation was not particularly successful.

Then I saw the LoveIt theme and became kind of envious of its neato TOC – among some other nice features.
But that theme uses tons of other third party integrations with their JS dependencies I don't really care for, so… is there any interest in adding a similar TOC to Coder?

I thought I'd rather ask here if there's a chance before I try to recreate that kind of TOC myself — and I just switched to Coder and I'm not looking to switch themes again over a TOC.

[jsturdy]

I had also been interested in a sidebar TOC so I put together something pretty hacky (full disclosure, I'm neither a web developer nor a web designer).
It doesn't currently have the highlighting of the current location in the page, but that's something I'm interested in, so I'll keep poking at it.
I'll post some screen shots just to give an idea of what it currently does, so people can comment, pick it apart, propose better aesthetic design choices.
One thing I would change would be the link colour, as I'd consider it more in the same class as the links on the menu bar, but @luizdepra, you seemed to prefer keeping them with the standard link colour.

I was working to only have it active on the "posts" style of pages.
The TOC sticks to the top of page as you scroll, and disappears when the nav bar would collapse into the hamburger.

Here is the example site rendered in the light theme:

And the same with the dark theme:

Right-to-left doesn't look good currently, so design choices about that would be beneficial.

I'm happy to put what I have into a PR, or give it to someone who is more experienced with web design to bring it home.

[ajdintrejic]

@jsturdy this looks nice. The outline does look a wierd though. I'm running a table of contents like this:

it probably should look like mine on mobile, and like your's (@jsturdy) on desktop, or something similar atleast

[luizdepra]

I think I'm going to add TOC support in a near future. I should put it in the roadmap.

[luizdepra]

I'm going to follow with this discussion at #415.