How to build a smoothly animated table of contents (by a bonfire🔥) w/ Bun, Framer Motion, Zustand

Video Description

▶ Check out my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=4g26x6FzuBU ▶ Join the Inkdrop discord server https://docs.inkdrop.app/start-guide/join-discord-server?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=4g26x6FzuBU ▶ Side notes: https://www.devas.life/how-to-build-a-smoothly-animated-table-of-contents-with-framer-motion-and-kuma-ui/ ▶ Source code https://github.com/craftzdog/smooth-toc-example Info ▶ My equipment http://uses.craftz.dog/ ▶ My dotfiles https://github.com/craftzdog/dotfiles-public ▶ My wallpaper packs are now available🥳 Check out serene imagery from my coding tutorials here: https://www.craftz.dog/wallpapers Follow me online here: ▶ Subscribe to my newsletter https://www.devas.life/ ▶ 𝕏 https://x.com/inkdrop_app ▶ Instagram https://instagram.com/craftzdog ▶ My second channel https://www.youtube.com/@craftzdog 00:00 Intro 01:17 Project overview 05:00 Init project with Bun 06:04 Configure the git repository 06:45 Add required modules 08:11 Change dev and build commands to use Bun 08:40 Configure Prettier 09:35 Replace the default`useState` implementation with Zustand 12:02 Configure Kuma UI 13:57 Add some personal ESLint Preferences 15:11 Add some personal TypeScript preferences 16:30 Rename uppercase filenames 17:27 Configure Vite's resolve alias 18:31 Normalize CSS 19:28 Remove the default styles 20:13 Add the color palette tokens 21:11 Add basic styles 23:32 Create a Container component 26:58 Create a MainContent component 30:58 Add an example content 32:56 Moving to the next location, and start a bonfire 36:49 Implement a Markdown renderer 41:07 Add a content store 44:45 Render Markdown content 46:30 Add a page title 49:55 Style Markdown content 53:40 Extract headings from the mdast tree 57:46 Add firewood 58:07 toc store 59:59 Morning coffee 01:00:31 Fix import bug 01:02:10 Register headings 01:04:34 Add custom heading component 01:09:44 Get slugs to work 01:12:03 Preserve heading refs 01:13:00 Sidebar 01:15:57 Markdown outline view 01:24:17 Fix the outline left border 01:25:02 Store outline item refs in the toc store 01:27:40 Register refs to the store 01:29:25 Highlight active section 01:32:53 Detect visible headings 01:40:05 Animate the active section highlighting bar 01:43:37 It works! Yayy Credits: ▶ BGM - Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/ #CodeInNature #ReactJS #ASMR