Toc on the side

[nielsbrakel]

What does this PR change? What problem does it solve?

I moved the Toc on large screens to be besides the content. This also includes a little js to show the current active header. See the following gif for an example.

Was the change discussed in an issue or in the Discussions before?

Discussion: Floating Table of content
Discussion: The table of contents is placed on the side to show the reading progress

PR Checklist

• This change adds/updates translations and I have used the template present here.
• I have enabled maintainer edits for this PR.
• I have verified that the code works as described/as intended.
• This change adds a Social Icon which has a permissive license to use it.
• This change does not include any CDN resources/links.
• This change does not include any unrelated scripts such as bash and python scripts.
• This change updates the overridden internal templates from HUGO's repository.

[nielsbrakel]

For a live demo you can view my personal website:

Example:
https://nielsvanbrakel.com/projects/airfield-control

Other example:
https://nielsvanbrakel.com/privacy-policy

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[iDvel]

I found scrolling disabled if Cloudflare Rocket Loader turned on.

https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-specific-JavaScripts-
<script data-cfasync="false"> is work fine.

[sethforprivacy]

Just wanted to say I've pulled this into my own fork and it is an excellent change and a drastic improvement, thanks for the hard work on this, @nielsbrakel.

Would love to see this merged into master so I can switch back to using master.

[sethforprivacy]

I did actually find an issue due to a bug in PaperMod -- if the ToC is extremely long (dependent on screen size, of course) the side ToC will overflow and run past the bottom of the screen with no way to scroll to or reach the final elements until you're already at the bottom of the content.

Any way this can be made to collapse headers to ensure a fit based on current screen size or something similar @nielsbrakel?

Most users shouldn't run into this, but might be a good edge case to resolve before it's merged if not too much effort is involved.

[nielsbrakel]

@sethforprivacy Good find, when I have time I will try to find a good workaround for this. (Can be a week of two)

Do you have any suggestions for the preferred behaviour?

[sethforprivacy]

@sethforprivacy Good find, when I have time I will try to find a good workaround for this. (Can be a week of two)

Do you have any suggestions for the preferred behaviour?

(I have no idea on the difficulty of implementation with these suggestions, so take them as you will!)

Ideal: Auto-collapse >H3 header sub-items and allow them to be expanded by the user if desired.
Less ideal: Have the ToC be scrollable when it is too long for the current screen, but scroll bar hidden when it fits properly.
Workaround: Hide >H3 sub-items entirely if ToC cannot fit on-screen.

Hopefully one of these isn't too complex to implement, or someone comes up with a better solution 😄

[nielsbrakel]

@sethforprivacy Have your problems been solved by this issue? #747

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[sethforprivacy]

@sethforprivacy Have your problems been solved by this issue? #747

Sorry, have not had time to test this out yet and won't for at least a week. It should fix it, but I can't verify ATM unfortunately!

[Nathan-Furnal]

Any update on this? I'd be very happy to see it merged =)

[sethforprivacy]

Any update on this? I'd be very happy to see it merged =)

Testing it out now.

[sethforprivacy]

Tested the latest commits and all works well, even when merged in with the latest commit to master here.

Great work, @nielsbrakel, and I think this is ready to merge as far as I can tell @adityatelange!

[reorx]

@sethforprivacy In #758 he said no plans to implement this feature, so I'm wondering if this PR could be merged…

[sethforprivacy]

Hopefully soon, I still have to use my fork ATM to implement it but it absolutely is a massive UX upgrade for users visiting sites on a desktop/laptop/tablet.

[reorx]

@sethforprivacy I made another implementation of ToC on the side in my fork, check it out, here's a demo and explanations of new features.

[sethforprivacy]

@sethforprivacy I made another implementation of ToC on the side in my fork, check it out, here's a demo and explanations of new features.

Ok, well that is precisely what I want and is even superior (as it floats and can't be scrolled past etc.). Followed and starred.

Edit: One feature request -- allow a param for setting it to left or right side (left feels more natural and is the more common handling).
Edit2: Please open up issues on your repo so we can communicate there, but the only thing it's missing for me to start using it are the icons I added in #748. Once those are available I will migrate over.

[reorx]

Hi @sethforprivacy, the issues has been enabled in my repo, let's move to there.

allow a param for setting it to left or right side

It's supported now, you can set TocSide to left or right to control it, check the document link again.

but the only thing it's missing for me to start using it are the icons I added in #748.

Please make a new PR to my repo, I'll merge it ASAP.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[adityatelange]

Thanks for your advertisements @reorx
Pls don't do it here. Those won't be welcomed.

Yes, I'm struggling maintaining this theme, doesn't mean you should be putting a comment on stale issues and PRs redirecting them somewhere else.

I personally never did that with Paper (for which I really have a huge respect and it's author) nor will I encourage anyone to do it!

[adityatelange]

To anyone's who is wondering why features are not getting attention, (leaving aside the enthusiasm and time I've)

• [WIP] Loadable CSS #696

was being worked upon so that we could have more optional features added to the theme which won't hinder the theme's performance, while giving users an option to include features of their choice only and almost all the unnecessary css and js could be possibly disabled.

Theme never had an objective of including everything for everyone, and yes we cannot make everyone happy, while maintaining the performance and loading time the theme had from beginning.

I hope someone agrees with my humble opinion 🤞

[arashsm79]

The following repository might be helpful. The ToC floats on the sidebar and is visible while scrolling (the ToC itself is also scrollable if the number of entries is large). It is also flexible when it comes to screen width. You just add a simple CSS file to your assets folder that extends the stylesheets of PaperMod (without any changes to the PaperMod theme itself). It also includes another CSS file that converts cover images to thumbnails in post entries.
PaperMod Sidebar ToC

[adityatelange]

Verdict: I am not positive to go ahead with this one, sticking to single column layouts.