timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
7.35k stars 1.84k forks source link

Feature Suggestion: Table of Contents (TOC) #936

Open byungjin0826 opened 3 weeks ago

byungjin0826 commented 3 weeks ago

Hi timlrx,

I hope this message finds you well. Firstly, I want to express my gratitude for developing and maintaining the package. It has been incredibly useful for creating and managing my blog, and I appreciate all the effort you’ve put into it.

I have a suggestion that I believe could enhance the usability and functionality of the package: the addition of a Table of Contents (TOC) feature.

Currently, the package provides excellent tools for blog creation and management, but I feel that adding a TOC feature could significantly improve the user experience. Here are a few reasons why:

If this feature could automatically generate a TOC based on the headers within the post, it would greatly streamline the process for users.

Additionally, if this feature is already available within the package and I might have missed it, could you please guide me on how to implement or enable it?

Please let me know if you need any further details or if there’s any way I can assist in implementing this feature. I’d be happy to contribute in any way possible.

Thank you for considering my suggestion. I look forward to any updates or feedback you might have.

timlrx commented 3 weeks ago

It already exists, but it's an opt-in feature for each post so you can insert it where it fits best. Check out https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1#table-of-contents-component.

Just include the following component in your post: <TOCInline toc={props.toc} />. You can see an example in the raw markdown file as well.

PxlSyl commented 3 weeks ago

Hi, yes it already exists. I recently implemented the toc feature as an automatic sidebar when navigating to the posts (I may modify it to make it optional) on my i18n version, the reason I did this is for long blog posts and accessibility: I think it's better to have a floating button that can trigger the toc component, than the TOC at the top of the posts. If @timlrx is okay, I may do some PR for some of the features I implemented :)

timlrx commented 3 weeks ago

@PsyGik it's probably too feature-packed for my liking haha but feel free to share the implementation and others can copy it if that's what they are looking for. If the code is not too long, you could consider adding it to the FAQ as well.

byungjin0826 commented 3 weeks ago

Thank you both for your responses(@PxlSyl @timlrx ). I am looking forward to using the floating TOC. I will refer to your implementation and make use of it.

PxlSyl commented 3 weeks ago

@PsyGik it's probably too feature-packed for my liking haha but feel free to share the implementation and others can copy it if that's what they are looking for. If the code is not too long, you could consider adding it to the FAQ as well.

Np, I'll try to do that. I was talking about some features like series or share components (not all features but some common ones), but it's really as you want :)