[Survey] Automatic Table of Contents in Dev.to Articles

If you're an avid reader on Dev.to, you might have come across articles that feature a table of contents generated from a markdown heading elements. This humble yet effective tool serves as a roadmap for readers, offering a clear overview of the article's structure. In my opinion, this is not just a good practice; it's an excellent one.

Here are a few reasons why I believe having a table of contents is beneficial:

1. Structural Overview: A table of contents provides readers with an immediate sense of the article's organization. It allows readers to gauge the depth and breadth of the content, making it easier to decide if the article meets their needs.

2. Time Saver: A table of contents can be a real time-saver. It lets readers jump directly to the sections that interest them the most, skipping over parts they may already be familiar with.

A Proposal for Dev.to

Now, let's consider a thought: What if Dev.to took the initiative to automatically generate a table of contents for every article and placed it conveniently on the right side of the article?

This feature could revolutionize the reading experience on the platform. Imagine being able to glance at the table of contents before diving into an article. It would provide a quick preview of what the article contains, allowing readers to decide whether it's worth their time. Additionally, the automatic generation of the table of contents would alleviate the burden on authors, who often manually create these sections.

What's your take on this idea?

Please leave a comment and share your thoughts on this matter. I hope that a lot of feedback about this feature can be an input for Dev.to to improve the reading experience.

Comments

[Retiago Drago]

I think not every post could fit under this umbrella. I see it more like how YouTube generate their timestamp section onto video which doesn't have one. It is suitable for longer videos but not so much for shorter ones. Do you know what I mean?

Also, I kind of addicted to collapsible table content that I learned from GitHub can be applied here too like this below. I've been using it ever since.

Outlines

• Introduction
  • Steganography
• Project Setup
• Core Concepts
  • Mapping Techniques
  • Bit Manipulation for Hiding Images
  • Bit Manipulation for Revealing Images
  • Bit Manipulation for Reconstructing Images
• Implementation Details
• Results and Visualization
• Limitations and Future Work
• Conclusion
  • Summing Up the Journey
  • Technical Achievements
  • Key Takeaways

## {% details Outlines %}
- [Introduction](#introduction)
  - [Steganography](#steganography)
- [Project Setup](#project-setup)
- [Core Concepts](#core-concepts)
  - [Mapping Techniques](#mapping-techniques)
  - [Bit Manipulation for Hiding Images](#bit-manipulation-for-hiding-images)
  - [Bit Manipulation for Revealing Images](#bit-manipulation-for-revealing-images)
  - [Bit Manipulation for Reconstructing Images](#bit-manipulation-for-reconstructing-images)
- [Implementation Details](#implementation-details)
- [Results and Visualization](#results-and-visualization)
- [Limitations and Future Work](#limitations-and-future-work)
- [Conclusion](#conclusion)
  - [Summing Up the Journey](#summing-up-the-journey)
  - [Technical Achievements](#technical-achievements)
  - [Key Takeaways](#key-takeaways)
{% enddetails %}

[ruthmoog]

Nice! I love details/summary in HTML, I didn't figure out how to do this in dev.to.

[Jack]

You can try generating table of content from markdown here:
luciopaiva.com/markdown-toc/

[Niklas]

But how would you link to the anchors in the table of contents? I can't seem to find a way to assign my headers an id

[Jack]

Like GitHub, each heading has its ID that is normalized to a URI.
You can see this article: dev.to/jacktt/go-build-in-advance-...

[ruthmoog]

It would be nice to have it in the side bar, appropriate for research-like and education articles, that's the kind of thing you see on gitbooks as well.

Perhaps blog posts are not the right format for that? maybe a series is enough with dev.to already has in place - but the flexibility of options is probably a good thing. I like it and can see myself using jump-to links in my longer blogposts tbh!

[ruthmoog]

Here's some examples of what I meant

Learn Go With Tests on GitBook - table of contents shows chapters and location in the book

---

Hindawi's Article of the year 2022, example of a research paper, which all have approx the same structure so you can skip to the good bits ;)