Improve the table-of-contents

[wallrj]

Preview: https://deploy-preview-1057--cert-manager-website.netlify.app/docs/tutorials/getting-started-with-cert-manager-on-google-kubernetes-engine-using-lets-encrypt-for-ingress-ssl/

• Made it so that the TOC items do not wrap and overflow the container column (which I think looks neater, given that the right hand column is so narrow).
• Made it possible to filter out the headings above level 2 (including the level-3 headings made the menu look too noisy)
• Removed some (I think) unnecessary HTML wrapper elements and CSS classes.

New:

Current:

/cc @PatrickHeneise

[jetstack-bot]

@wallrj: GitHub didn't allow me to request PR reviews from the following users: PatrickHeneise.

Note that only cert-manager members and repo collaborators can review this PR, and authors cannot review their own PRs.

In response to this:

• Made it so that the TOC items do not wrap and overflow the container column (which I think looks neater, given that the right hand column is so narrow).
• Made it possible to filter out the headings above level 2 (including the level-3 headings made the menu look too noisy)
• Removed some (I think) unnecessary HTML wrapper elements and CSS classes.

/cc @PatrickHeneise

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[netlify]

✅ Deploy Preview for cert-manager-website ready!

Name	Link
🔨 Latest commit	8af8906
🔍 Latest deploy log	https://app.netlify.com/sites/cert-manager-website/deploys/62f7d059443e780008c563ab
😎 Deploy Preview	https://deploy-preview-1057--cert-manager-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[wallrj]

I'm also inclined to remove the react-scroll component, since it doesn't seem to work properly anyway: wallrj/website@toc-improvements...wallrj:website:remove-react-scroll

• Doesn't currently hightlight the in-view section, because we don't set the active-class
• Even then, it doesn't highlight the heading consistently as you scroll up and down
• The back - forward button navigation doesn't always seem to work.

I can remove it in a followup PR if others agree.
Or replace it with something simpler which does at least reliably highlight the TOC entry for the in-view section. Maybe https://github.com/makotot/GhostUI

[SgtCoDFish]

I don't currently have the bandwidth to review cert-manager PRs, sorry. I've removed myself as a reviewer 👍

[jahrlin]

I'm also inclined to remove the react-scroll component, since it doesn't seem to work properly anyway: wallrj/website@toc-improvements...wallrj:website:remove-react-scroll

• Doesn't currently hightlight the in-view section, because we don't set the active-class
• Even then, it doesn't highlight the heading consistently as you scroll up and down
• The back - forward button navigation doesn't always seem to work.

I can remove it in a followup PR if others agree. Or replace it with something simpler which does at least reliably highlight the TOC entry for the in-view section. Maybe https://github.com/makotot/GhostUI

I'm a big +1 to remove it, stuff like that interferes with native behaviour and is an accessibility problem.

[jahrlin]

Nice, this is great. Tested in a few different viewports and I really like it.

Much cleaner visually and much cleaner code.

/lgtm
/approve

[jetstack-bot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jahrlin, wallrj

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [jahrlin,wallrj]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment