refactor(docs): remove inline JS from docs template

- Removed ~400 lines of inline JavaScript from docs.templ
- Moved toggleSection function to docs.ts (now uses Alpine )
- Added highlightCurrentPage function to docs.ts
- Added initializeCodeCopyButtons function to docs.ts
- Updated template to use x-init for initialization
- Functions exported for use in Alpine.data

templates/docs_templ.go

@@ -53,7 +53,7 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<body x-data=\"docs\" x-init=\"initializeSearch\" class=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<body x-data=\"docs\" x-init=\"initializeSearch(); highlightCurrentPage(); initializeCodeCopyButtons()\" class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -79,7 +79,7 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 			return templ_7745c5c3_Err
 		}
 		for _, section := range nav.Sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" onclick=\"toggleSection(this)\"><span>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" @click=\"toggleSection($el)\"><span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -342,7 +342,7 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</div></main><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tconst arrow = el.querySelector(\".section-arrow\");\n\t\t\t\t\tconst isCollapsed = items.getAttribute(\"data-collapsed\") === \"true\";\n\n\t\t\t\t\tif (isCollapsed) {\n\t\t\t\t\t\titems.classList.remove(\"hidden\");\n\t\t\t\t\t\titems.setAttribute(\"data-collapsed\", \"false\");\n\t\t\t\t\t\tarrow.style.transform = \"rotate(0deg)\";\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.classList.add(\"hidden\");\n\t\t\t\t\t\titems.setAttribute(\"data-collapsed\", \"true\");\n\t\t\t\t\t\tarrow.style.transform = \"rotate(-90deg)\";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tconst sidebar = document.querySelector(\".sidebar\");\n\t\t\t\t\tsidebar.classList.toggle(\"open\");\n\t\t\t\t}\n\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener(\"DOMContentLoaded\", function () {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll(\".nav-item\").forEach((item) => {\n\t\t\t\t\t\tif (item.getAttribute(\"href\") === currentPath) {\n\t\t\t\t\t\t\titem.classList.add(\n\t\t\t\t\t\t\t\t\"text-accent\",\n\t\t\t\t\t\t\t\t\"bg-accent/10\",\n\t\t\t\t\t\t\t\t\"border-r-2\",\n\t\t\t\t\t\t\t\t\"border-accent\",\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\tif (typeof hljs !== \"undefined\") {\n\t\t\t\t\t\thljs.highlightAll();\n\n\t\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\t\tdocument.querySelectorAll(\"pre code\").forEach((block) => {\n\t\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\t\tconst wrapper = document.createElement(\"div\");\n\t\t\t\t\t\t\twrapper.className = \"relative group\";\n\t\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\t\twrapper.appendChild(pre);\n\n\t\t\t\t\t\t\tconst button = document.createElement(\"button\");\n\t\t\t\t\t\t\tbutton.className =\n\t\t\t\t\t\t\t\t\"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent\";\n\t\t\t\t\t\t\tbutton.textContent = \"Copy\";\n\t\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\t\tbutton.textContent = \"Copied!\";\n\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\tbutton.textContent = \"Copy\";\n\t\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll(\"pre code\").forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement(\"div\");\n\t\t\t\t\t\twrapper.className = \"relative group\";\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\n\t\t\t\t\t\tconst button = document.createElement(\"button\");\n\t\t\t\t\t\tbutton.className =\n\t\t\t\t\t\t\t\"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent\";\n\t\t\t\t\t\tbutton.textContent = \"Copy\";\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = \"Copied!\";\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = \"Copy\";\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t});\n\n\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\tdocument.querySelectorAll(\"pre code\").forEach((block) => {\n\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\tconst wrapper = document.createElement(\"div\");\n\t\t\t\t\twrapper.className = \"relative group\";\n\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\twrapper.appendChild(pre);\n\n\t\t\t\t\tconst button = document.createElement(\"button\");\n\t\t\t\t\tbutton.className =\n\t\t\t\t\t\t\"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent\";\n\t\t\t\t\tbutton.textContent = \"Copy\";\n\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\tbutton.textContent = \"Copied!\";\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tbutton.textContent = \"Copy\";\n\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t};\n\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t});\n\n\t\t\t\t// Search state\n\t\t\t\tlet idx;\n\t\t\t\tlet searchDocs = [];\n\n\t\t\t\t// Load index on page load\n\t\t\t\tfetch(Line truncated
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</div></main></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}