blog: Add ToC to the right sidebar #3484
Conversation
.eleventy.js
Outdated
|
|
||
| const markdownItOptions = { | ||
| html: true, | ||
| } | ||
|
|
||
| const markdownItAnchorOptions = { | ||
| permalink: markdownItAnchor.permalink.linkInsideHeader({ | ||
| symbol: `# `, | ||
| symbol: ``, |
There was a problem hiding this comment.
Got to verify if this didn't break a lot of other things?
There was a problem hiding this comment.
This change removes the visual indicator for header permalinks in our docs and the NR docs too. It also removes the ability to copy the link address for sharing a specific section. Was this the intended outcome?
There was a problem hiding this comment.
Pull Request Overview
Adds a Table of Contents to the right sidebar of blog posts using the eleventy-plugin-toc.
- Introduces CSS styles for rendering and interacting with the ToC
- Updates the post layout to conditionally render the ToC in the sidebar
- Installs and configures the eleventy-plugin-toc in the build config
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/css/style.components.css | Styles for the new ToC component |
| src/_includes/layouts/post.njk | Conditional rendering of the ToC |
| package.json | Adds eleventy-plugin-toc dependency |
| .eleventy.js | Registers and configures the ToC plugin |
Comments suppressed due to low confidence (3)
src/_includes/layouts/post.njk:65
- Consider adding a test to verify that the ToC filter renders correctly and only appears when heading elements are present.
{% if content | toc %}
.eleventy.js:671
- [nitpick] Update the project README or developer documentation to include setup and usage instructions for the new ToC plugin configuration.
eleventyConfig.addPlugin(pluginTOC, {
src/css/style.components.css:126
- The theme() function is not valid in plain CSS; consider using a CSS variable, a utility class, or ensuring your build step processes theme() correctly.
color: theme(colors.gray.700);
Co-authored-by: Copilot <[email protected]>
|
We already had a solution in place for creating ToCs; check our docs, handbook, and nr-docs for reference. Why should we use a different one for the blog posts? |
|
@Yndira-E Less maintainance on our part, was planning on moving those parts over too |
Co-authored-by: Yndira Escobar <[email protected]>
| <script> | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| const tocLinks = document.querySelectorAll('.toc a'); | ||
| tocLinks.forEach(link => { | ||
| link.textContent = link.textContent.replace(/^#\s*/, ''); | ||
| }); | ||
| }); | ||
| </script> |
There was a problem hiding this comment.
I just ran a small test, because the blog articles were still showing the symbol on the ToC items. We can add the # through css, and there will be no need for this script.
Description
Adds a ToC to the right sidebar for Blog posts.
Related Issue(s)
Checklist