Table of contents: Summary How to use Installation What the code does Generating ToC Using ToC Technical notes for technical people Screenshots I created a bookmarklet to generate a foldable table of contents (ToC) like the one shown above. I hope it helps avid community members who write long texts! Summary I sometimes write long topics/posts and needed a ToC for easier reading. I found some existing work, such as DiscoTOC - automatic table of contents, but I needed a tool just for me, not needing to install something across the community. After publishing a structured post, click the bookmarklet, and the ToC will be copied to your clipboard. Edit the post and paste the ToC at the top! How to use Installation Save a page as a bookmark. Edit the name, such as “:clipboard: Copy forum ToC to clipboard.” Edit the URL and paste the following code. Customize the code if needed – see two “Optional” items below. javascript:(function() { const copyForumTocToClipboard = function() { const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/); if (!urlMatch) return; const postIndex = urlMatch ? urlMatch[1] : 1; const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6>a.anchor,h5>a.anchor,h4>a.anchor,h3>a.anchor,h2>a.anchor,h1>a.anchor'); if (!anchors) return; let toc = ''; anchors.forEach(anchor => { toc += ' '.repeat((anchor.parentNode.nodeName[1] - 1) * 4) + ` ${anchor.parentNode.textContent} \n`; }); if (!toc) return; navigator.clipboard.writeText(' Table of contents: \n' + toc + ' '); }; copyForumTocToClipboard(); })(); What the code does Check if the URL seems to be a community post: https://{domain}/t/{title}/{topicID}(/{postIndex}). Check if :link: anchors (headings such as and # ) are included in the post. Generate HTML code for ToC. Copy the code to the clipboard. Generating ToC Publish a post with structure (HTML , , … and Markdown # , ## , …). Discourse will assign anchors to each heading. Make sure your post is selected by looking at the progress bar (e.g., 1/22) or the URL (e.g., /1). Click the bookmarklet in the bookmark bar. The ToC is copied to your clipboard. Using ToC Click the pencil icon to edit the post. Paste the code at the top. Check if the ToC items are correctly displayed (Known issue: the bookmarklet misses some emojis). (Optional) Change/translate “Table of contents”. (Optional) Delete open if you want to collapse the ToC by default. Click “Save Edit.” If you do this in a few minutes after publishing the post, the “edited” pencil icon is not added to your post. Technical notes for technical people You can also copy and paste the JavaScript code into the developer console. I wrapped the code in a function because return; doesn’t work when used outside of functions. The ' '.repeat() approach looks messy when previewing the topic, but it looks the best in the actual post (compared with using ) in my opinion. When I tested querySelectorAll, somehow the first item in h6>a.anchor,h5>a.anchor, ... was not found. I put h6 at the beginning because that’s probably used least frequently. The bookmarklet might stop working if Discourse changes its UI/DOM. Please reply to me if you find errors. Screenshots As a new user in meta.discourse.org, I cannot add multiple images, so I’m batching all screenshots in one image: [bookmarklet screenshot]

Posts generally load about 20 at a time, I guess it would be difficult to create a TOC of all posts at once

Very cool! Thanks for sharing @ShunS! I love how you framed the problem you’re solving with this tool, and how it is designed to meet the needs of important users on sites who themselves may not have permissions to change things on the site itself as things exist today.

Thank you for the replies :slight_smile: As @Lhc_fl says, the DOM appreach (HTML/JavaScript) is limited in the number of items we can manage. Discourse API might help for such actions. Another problem with creating TOC for replies is that it’s not easy to define what would be the heading title for each reply. We could use information like the author and the date, but I’m not sure how it’s more useful than the existing scrolling progress bar. Thank you @mcwumbly!

@ShunS this is very cool, thank you for sharing. also, welcome to Meta :wave: :slight_smile:

This fabulous and exactly what I was looking for. I seems to solve this issue [image] Automatic TOC inline/top of post Feature here is an alternative solution that’s very cool and outside the box Why not submit this to Discourse to include it as an official plug-in or feature? It could be included in the composer/editor toolbar to automatically insert a TOC in the post.

I have one suggestion, is it possible to add a bullet at the beginning TOC line? In my case each heading is a long line, so the bullet helps differentiate one entry from the next

Hi @RBoy, thank you for the feedback and the suggestion! An editor plugin would be great, but it’d be a lot of effort to read the source code of discourse to understand the logic of handling emojis and defining the heading/anchor text and create a repository of the plugin. A (seemingly) simple plugin like Spoiler Alert is a big repo and I don’t have a bandwidth to fully commit to the development. So, I hope Discourse can prioritize feature requests like Automatic Table of Contents generation and develop an native feature in the meantime :folded_hands: Below is the version with the bullet points. The spaces between and are rather too large, so I preferred the original unbulleted version. Screenshot: [Screenshot 2023-07-10 at 7.49.59] Code: javascript:(function() { const copyForumTocToClipboard = function() { const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/); if (!urlMatch) return; const postIndex = 1; const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6>a.anchor,h5>a.anchor,h4>a.anchor,h3>a.anchor,h2>a.anchor,h1>a.anchor'); let toc = ''; let currentLevel = 1; anchors.forEach(anchor => { newLevel = anchor.parentNode.nodeName[1]; levelChange = newLevel - currentLevel; toc += ((levelChange >= 0) ? ' '.repeat(levelChange) : ' '.repeat(levelChange * -1)) + ` ${anchor.parentNode.textContent} `; currentLevel = newLevel; }); if (newLevel > 1) toc += ' '.repeat(newLevel - 1); toc = ' Table of contents: \n' + toc + ' '; navigator.clipboard.writeText(toc); }; copyForumTocToClipboard(); })();

[image] RBoy: an official plug-in or feature We already have a ToC plugin and it doesn’t need to maintain the ToC in the post body. I’d definitely recommend that one if installed as it can’t go out of sync. This tool looks great for when DiscoToC is not available though. Nice work! :+1:

This can be done using a theme component. You can take a look at the decorateCookedElement method of the api, it should be useful.

I created a bookmarklet to create the table of content for forum posts

Development

anderer July 8, 2023, 7:44am 2

Ohh nice - could that be extended to create a TOC for the entire post with all replies?

Topic		Replies	Views
Automatic Table of Contents generation Feature	13	6587	March 9, 2020
DiscoTOC - automatic table of contents Theme component official , disco-toc	147	65696	October 21, 2026
Topic list on the right side Product Support	2	1378	April 3, 2021
Disco TOC for replies Feature completed , disco-toc	20	1644	August 9, 2024
Spec: Table of Contents Feature	15	10605	August 30, 2016

I created a bookmarklet to create the table of content for forum posts

Related topics