Add a Dynamic Table of Contents to Static HTML in Next.js & React with Rehype

Описание: Learn how to process and transform static HTML in a React application using rehype. We'll learn how to set up a unified pipeline using rehype plugins, add dynamic IDs to all of the headers, create a table of contents based on those headers, and add bookmark links like on GitHub.

Demo Starter
https://github.com/colbyfayock/demo-h...

🧐 What's Inside
00:00 - Intro to transforming static HTML with rehype
00:11 - Tools we'll use like rehype and Next.js
02:10 - Creating a new Next.js app from a Starter demo
04:25 - Starting a unified HTML processing pipeline with rehype plugins
08:36 - Filtering and working with a syntax tree with unist-util-visit
10:59 - Adding dynamic IDs to H2 headers with parameterize
13:35 - Rendering a dynamic table of contents based on static HTML
15:18 - Adding bookmark links to each header
22:00 - Outro

⚙️ Demo Code
https://github.com/colbyfayock/my-reh...

🗒️ Read More
https://spacejelly.dev/posts/how-to-a...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...

🐦 Get updates straight to your Twitter @colbyfayock
  / colbyfayock  

📸 Catch the next stream live on Twitch @colbyfayock
  / colbyfayock  

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

Rehype
https://github.com/rehypejs/rehype

Parameterize
https://www.npmjs.com/package/paramet...

Rehype React
https://github.com/rehypejs/rehype-react

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/bosnow/night-fre...
License code: B5FIAZNHKJT1FTJX

#colbyfayock #react #html #nextjs #statichtml #jamstack #webdevelopment