rehype-autolink-headings
react-autolink-heading
rehype-autolink-headings | react-autolink-heading | |
---|---|---|
4 | 1 | |
188 | 1 | |
5.3% | - | |
6.6 | 7.5 | |
6 months ago | 9 months ago | |
JavaScript | TypeScript | |
MIT License | 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.
react-autolink-heading
-
Building an Autolink Heading Component for React Navigation
In this post, we'll explore how I've created an Autolink Heading component for React Navigation. This component will generate anchor links for section headings automatically. By using this component, you can improve user experience and make navigation within your React applications more efficient. It also contributes to the site SEO performance. Let's explore how to build this component!
What are some alternatives?
remark - markdown processor powered by plugins part of the @unifiedjs collective
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
rehype-external-links - rehype plugin to add rel (and target) to external links
astro - The web framework for content-driven websites. โญ๏ธ Star to support our work!
nx - Smart Monorepos ยท Fast CI
berry - ๐ฆ๐ Active development trunk for Yarn โ
rehype - HTML processor powered by plugins part of the @unifiedjs collective
contentlayer - Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app