-
-
contentlayer
Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
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.
After the installation we have to tell MDX that it should use the plugin. The example below shows a contentlayer config, but it should work with every MDX setup.
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.
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.
And that's it, we can now hover over our MDX headings and should see a hash to the left. If we click a heading, we should see the id appended to the url in the browser address bar.