diff --git a/components/SyntaxHighlighter.tsx b/components/SyntaxHighlighter.tsx
index 983d4f6..dbfba06 100644
--- a/components/SyntaxHighlighter.tsx
+++ b/components/SyntaxHighlighter.tsx
@@ -32,7 +32,7 @@ const CodeHighlighter = ({ code, language = "javascript" }: SyntaxHighlighterPro
wrapLines={true}
wrapLongLines={true}
PreTag={({ children, ...props }) => (
-
+
{children}
)}
diff --git a/components/TableOfContents.tsx b/components/TableOfContents.tsx
index 24a5ee8..ddabc3d 100644
--- a/components/TableOfContents.tsx
+++ b/components/TableOfContents.tsx
@@ -21,6 +21,27 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
const [activeId, setActiveId] = useState("")
const [isVisible, setIsVisible] = useState(false)
+ // Read initial hash from URL on mount
+ useEffect(() => {
+ const hash = window.location.hash.slice(1) // Remove the # symbol
+ if (hash && items.some(item => item.id === hash)) {
+ setActiveId(hash)
+ }
+ }, [items])
+
+ // Listen for hash changes
+ useEffect(() => {
+ const handleHashChange = () => {
+ const hash = window.location.hash.slice(1) // Remove the # symbol
+ if (hash && items.some(item => item.id === hash)) {
+ setActiveId(hash)
+ }
+ }
+
+ window.addEventListener('hashchange', handleHashChange)
+ return () => window.removeEventListener('hashchange', handleHashChange)
+ }, [items])
+
useEffect(() => {
if (items.length === 0) return
@@ -34,6 +55,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveId(entry.target.id)
+ // Update URL hash when scrolling to a section
+ if (window.location.hash !== `#${entry.target.id}`) {
+ window.history.replaceState(null, '', `#${entry.target.id}`)
+ }
}
})
},
@@ -69,6 +94,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
const scrollToSection = (id: string) => {
const element = document.getElementById(id)
if (element) {
+ // Update URL hash immediately
+ window.history.pushState(null, '', `#${id}`)
+ setActiveId(id)
+
// Get the actual header height dynamically
const header = document.querySelector('header')
const headerHeight = header ? header.offsetHeight + 20 : 100 // 20px buffer
@@ -87,8 +116,8 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
if (!isVisible) return null
return (
-