rehype-autolink-headings
leosvel.dev
rehype-autolink-headings | leosvel.dev | |
---|---|---|
4 | 1 | |
188 | 28 | |
5.3% | - | |
6.6 | 0.0 | |
6 months ago | over 1 year ago | |
JavaScript | Astro | |
MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
rehype-autolink-headings
-
Building an Autolink Heading Component for React Navigation
This is how I created the first version of the Autolink Heading component to replicate the behavior of rehype-autolink-headings for React headings. It's a simple design that get's the job done. However, I'm sure it has a lot of room for improvement.
-
MDX autolink headings
We could use rehype-autolink-headings for this, but we want to do some styling with TailwindCSS. So we have to wrap the heading manually.
-
MDX Code Highlighting and Styling with Tailwind
rehype-autolink-headings
-
Creating my personal website with Astro, Tailwind CSS, and Nx
So to achieve my goals, I configured the rehype-slug and rehype-autolink-headings plugins to generate links to the headings in the blog post. I also configured the rehype-external-links plugin to add the target="_blank" and rel="nofollow noopener noreferrer" attributes to external links, as well as adding an icon to them.
leosvel.dev
-
Creating my personal website with Astro, Tailwind CSS, and Nx
You can take a look at the source code in the website's GitHub repository.
What are some alternatives?
remark - markdown processor powered by plugins part of the @unifiedjs collective
rehype-external-links - rehype plugin to add rel (and target) to external links
rehype-slug - plugin to add `id` attributes to headings
Tailwind CSS - A utility-first CSS framework for rapid UI development.
rehype-sanitize - plugin to sanitize HTML
rehype-react - plugin to transform to preact, react, vue, etc
astro - The web framework for content-driven websites. โญ๏ธ Star to support our work!
react-autolink-heading - A component that adds heading links (#heading-name) based on the heading text content ("Heading Name")
nx - Smart Monorepos ยท Fast CI
berry - ๐ฆ๐ Active development trunk for Yarn โ
rehype - HTML processor powered by plugins part of the @unifiedjs collective