search

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
8.45k stars 1.96k forks source link

Header Link Icon #823

Closed Adriel-M closed 4 months ago

Adriel-M commented 7 months ago

Something that might be nice to is a way to get the link to the header. For example on the npm website, when you hover over a header, there is a link icon the pops up and clicking it gives you a direct url to that header (for example)

image

I've already done this for my site and might make a good addition for the main template.

Here's a sample pr: https://github.com/Adriel-M/adriel.dev/pull/10 where the necessary changes are:

  1. source the icon (for my case, I used octicons)
  2. change up rehype-autolink-headings config to prepend the element with the icon
  3. Add some css to handle show/hiding when hovering/not hovering. I did have to upgrade to the latest rehype-autolink-headings so I can add a css class to the header element.
HansKing98 commented 7 months ago

Thanks, I have added it to my project.

timlrx commented 7 months ago

Thanks, I agree as well. It's a nice improvement - will add it to the to do list.