Build the right-side table of contents from javascript - updated version

[fekete-robert]

• Proposal for #349
• This PR is an updated version of #1049.

By default, Docsy shows the table of contents for the current page in the right sidebar using the built-in function of Hugo. You can replace that with a JavaScript-based ToC that uses the [https://tscanlin.github.io/tocbot/](Tocbot library) by setting the following in your config.toml file:

[params.jstoc]
enable = true

Compared to the default sidebar ToC, this solution:

• has a marker that shows the current location of the screen (useful for long pages)
• shows the correct title even if the title contains a shortcode
• shows the title in the toc even if it was included from another file

For a working example, see https://kube-logging.dev/docs/

[google-cla[bot]]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[fekete-robert]

Update includes a rework based on the katex examples, and gets the tocbot js and css from a cdn. (It seems there's no latest version tag, so the version number defaults to the the currently available latest version.)

[chalin]

Thanks for the updated PR. Can you resolve the CLA issue?

[deining]

It seems there's no latest version tag, so the version number defaults to the the currently available latest version.

You can try these URLs:

https://cdn.jsdelivr.net/npm/tocbot@latest/dist/tocbot.min.css
https://cdn.jsdelivr.net/npm/tocbot@latest/dist/tocbot.min.js

[deining]

Update includes a rework based on the katex examples, and gets the tocbot js and css from a cdn.

Were nice if resources.GetRemote fetches minified versions of the files in production mode only. Please have a look at the latest version of the script for the KaTeX files, there this is already implemented:

https://github.com/google/docsy/blob/627a0df8a62f5fcf347cb0e2a8932b79141860d6/layouts/_partials/scripts/katex.html#L20-L32

[fekete-robert]

Thanks, I'll update the PR when I have some time (probably not before Saturday)

[fekete-robert]

BTW, @deining : the error checking part when downloading the css/js file doesn't seem to catch if you specify a version number in the config file but it doesn't exist. (I don't use katex, so haven't checked if it's working there.) Probably not a big issue, I doubt many users will want to set the version manually.

[deining]

BTW, @deining : the error checking part when downloading the css/js file doesn't seem to catch if you specify a version number in the config file but it doesn't exist.

You are right. I'm aware of that, but didn't find the time to dig into that. If you can come up with a solution, welcome! Looking forward seeing your PR finalized!

[fekete-robert]

Shall I re-break the lines in the userguide, or the broken tests are just informative?

[chalin]

You are right. I'm aware of that, but didn't find the time to dig into that. If you can come up with a solution, welcome! Looking forward seeing your PR finalized!

@deining or @fekete-robert: please open an issue to track this if there isn't one already.

[deining]

You are right. I'm aware of that, but didn't find the time to dig into that. If you can come up with a solution, welcome! Looking forward seeing your PR finalized!

@deining: please open an issue to track this if there isn't one already.

Done: PR #2280.

[chalin]

@fekete-robert - I just was made aware that Bootstrap has a solution to #349. Just a heads up that I'll be exploring the Bootstrap alternative.

[fekete-robert]

Sure thing, it's better to use a built-in component