leosvel.dev
rehype-slug
| leosvel.dev | rehype-slug | |
|---|---|---|
| 1 | 3 | |
| 28 | 179 | |
| - | 2.8% | |
| 0.0 | 5.9 | |
| over 1 year ago | 8 months ago | |
| Astro | JavaScript | |
| - | 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.
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.
rehype-slug
-
Building an Autolink Heading Component for React Navigation
I'm using the algorithm from github-slugger to create the header link and ID. It's the same one used by GitHub for their section headings and also by rehype-slug, the project I used as inspiration for this one.
-
MDX autolink headings
The heading component renders an a tag, with a href which points to the id which was generated by the rehype-slug and passed as prop to our component. The a tag uses the group class, this allows us to apply styling to children if the parent is hovered. Also we use the relative class, because we want to position an icon absolute to the left of the heading.
-
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.
What are some alternatives?
rehype-external-links - rehype plugin to add rel (and target) to external links
rehype-autolink-headings - plugin to add links to headings in HTML
remark - markdown processor powered by plugins part of the @unifiedjs collective
rehype - HTML processor powered by plugins part of the @unifiedjs collective
react-autolink-heading - A component that adds heading links (#heading-name) based on the heading text content ("Heading Name")
Visual Studio Code - Visual Studio Code
nx - Smart Monorepos · Fast CI
rehype-starry-night - Rehype plugin to highlight code with Starry Night
partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉
astro - The web framework for content-driven websites. ⭐️ Star to support our work!