-
Notifications
You must be signed in to change notification settings - Fork 945
Build the right-side table of contents from javascript - updated version #2273
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
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. |
Update includes a rework based on the katex examples, and gets the tocbot js and css from a cdn. |
Thanks for the updated PR. Can you resolve the CLA issue? |
You can try these URLs:
|
Were nice if docsy/layouts/_partials/scripts/katex.html Lines 20 to 32 in 627a0df
|
Thanks, I'll update the PR when I have some time (probably not before Saturday) |
62eb8e6
to
db6abf2
Compare
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. |
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! |
Shall I re-break the lines in the userguide, or the broken tests are just informative? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the updates @fekete-robert. See inline comments. Also:
- Enable this feature for the User Guide
- To fix the GH check failures, run
npm run fix:format
locally.
Given that this generates the right-sidebar toc, shouldn't we disable toc generation in the appropriate layout file?
@@ -74,6 +74,11 @@ | |||
{{ template "algolia/scripts" .Site.Params.search.algolia -}} | |||
{{ end -}} | |||
<script src='{{ "js/tabpane-persist.js" | relURL }}'></script> | |||
|
|||
{{ if .Site.Params.jstoc.enable -}} | |||
{{- partial "scripts/jstoc.html" . -}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{{- partial "scripts/jstoc.html" . -}} | |
{{ partial "scripts/jstoc.html" . -}} |
@@ -0,0 +1,44 @@ | |||
{{ $version := .Site.Params.jstoc.version | default "latest" -}} | |||
|
|||
{{ $css_url := printf "https://cdn.jsdelivr.net/npm/tocbot@%s/dist/tocbot%s.css" $version (cond hugo.IsProduction ".min" "") -}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Refactor the code to define $resourceBaseName
as tocbot%s
using (cond hugo.IsProduction ".min" "")
. Note that this variable will be used in four places.
|
||
<!-- Initialize tocbot --> | ||
<script type="text/javascript"> | ||
tocbot.init({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use two spaces as the default indentation.
``` | ||
|
||
By default, h2-h4 headings are included in the sidebar, which includes tips and warnings if you are using the [alert shortcode of Docsy](/docs/adding-content/shortcodes/#alert). To change that, | ||
provide a comma-separated list of the headings to include in the `custom_headings` parameter, for example: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
provide a comma-separated list of the headings to include in the `custom_headings` parameter, for example: | |
provide a comma-separated list of the headings to include in the `headings` parameter, for example: |
Fix here and elsewhere.
|
||
- 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FYI: this is no longer a limitation when the include functionality is properly coded.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For consistency with the jstoc.js
file name, this should be named _jstoc.scss
.
@deining or @fekete-robert: please open an issue to track this if there isn't one already. |
Co-authored-by: Patrice Chalin <chalin@users.noreply.github.com>
Co-authored-by: Patrice Chalin <chalin@users.noreply.github.com>
Co-authored-by: Patrice Chalin <chalin@users.noreply.github.com>
Co-authored-by: Patrice Chalin <chalin@users.noreply.github.com>
Co-authored-by: Patrice Chalin <chalin@users.noreply.github.com>
5126b2f
to
4f7fdf7
Compare
@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. |
Sure thing, it's better to use a built-in component |
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:
Compared to the default sidebar ToC, this solution:
For a working example, see https://kube-logging.dev/docs/