▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=d...
▶ Join the Inkdrop discord server
https://docs.inkdrop.app/start-guide/...
▶ Side notes: https://www.devas.life/how-to-build-a...
▶ Source code https://github.com/craftzdog/smooth-t...

Info
▶ My equipment http://uses.craftz.dog/
▶ My dotfiles https://github.com/craftzdog/dotfiles...
▶ 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   / craftzdog  
▶ My second channel    / @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/referra...

#CodeInNature #ReactJS #ASMR