Open bennypowers opened 2 years ago
@bennypowers I echo your appreciation for this plugin. I wonder if you could say a bit more about how one might use the changes that you made. I am a JavaScript newbie, but I am certainly looking for finer control of the wrapper classes, and I think you're solving my problem (?).
I am hoping to use this plugin to generate HTML that looks like the following, with specific classes for not only the nav
wrapper but also the ul
, li
, and a
selectors:
<nav id="bd-toc-nav" class="page-toc">
<ul class="visible nav section-nav flex-column">
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#lorem-ipsum">
Lorem ipsum
</a>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#morbi-tincidunt">
Morbi tincidunt
</a>
</li>
</ul>
</nav>
@bennypowers can I use your comment plus some new JS function (from selector to the appropriate class-string) to do this? Thank you for any tips.
What you can do is copy the contents of that snippet to a file called patches/eleventy-toc-plugin+1.1.5
, then add patch-package to your postinstall
script in package.json to apply the patch every time you run npm i
or npm ci
"scripts": "npx patch-package"
Thank you @bennypowers that is very helpful. I am still a bit confused about how to pass values from my site to the updated TOC plugin (probably because I am new to JavaScript). Would you mind sharing a small example? With the current TOC plugin, my site adds it like so, which I think needs to change after wrapper
becomes a function, right? Thank you very much for your help.
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h1', 'h2'],
wrapper: 'nav',
wrapperClass: 'visible nav section-nav flex-column',
ul: true
});
I think that with my patch you could do this:
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h1', 'h2'],
wrapper(content, label) {
return `<nav id="bd-toc-nav" class="page-toc" aria-label="Site navigation">
${content.replaceAll('<ul>', '<ul class="visible nav section-nav flex-column">').replaceAll('<li>', '<li class="toc-h2 nav-item toc-entry">')}
</nav>`
},
wrapperClass: 'visible nav section-nav flex-column',
ul: true
});
If you wanted to get more complicated, you consider parsing the content
html with something like cheerio or parse5 and alter the syntax tree. That would be a challenge, but rewarding, considering how you've described your level of comfort with js and web technologies.
Thank you @bennypowers I got my TOC to work. Yeah! I had to name the file patches/eleventy-plugin-toc+1.1.5
(moving toc
to end) and I added a replaceAll
for the a
selector like so:
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h1', 'h2'],
wrapper(content, label) {
return `<nav id="bd-toc-nav" class="page-toc" aria-label="Site navigation">
${content.replaceAll('<ul>', '<ul class="visible nav section-nav flex-column">').replaceAll('<li>', '<li class="toc-h2 nav-item toc-entry">').replaceAll('<a href', '<a class="reference internal nav-link" href')}
</nav>`
},
wrapperClass: 'visible nav section-nav flex-column',
ul: true
});
I confess I am still hazy on when exactly my scripts get executed. It seems like I need to run npx patch-package
manually, probably because my scripts
is wrong. I wonder if you see something amiss below? Thanks again for your help!
"scripts": {
"build": "npx @11ty/eleventy",
"bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy",
"watch": "npx @11ty/eleventy --watch",
"serve": "npx @11ty/eleventy --serve",
"start": "npx @11ty/eleventy --serve",
"debug": "DEBUG=* npx @11ty/eleventy",
"postinstall": "patch-package"
},
Just wanted to confirm that it works! (Despite my confusion about script execution.) Thanks again for this patch.
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch
eleventy-plugin-toc@1.1.5
for the project I'm working on.Users may need finer control over the wrapping element. In this patch, I allow
wrapper
to be a binary function takingcontent
andlabel
, which returns HTML. the wrapping element must applyaria-label="${label}"
Here is the diff that solved my problem:
This issue body was partially generated by patch-package.