@opendocsdev/cli 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendocsdev/cli",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "publishConfig": {
     "access": "public"
   },

package/src/engine/src/components/Analytics.astro

@@ -30,28 +30,23 @@ const shouldTrack = backend && siteId && analyticsEnabled;
     is:inline
   >
     (function() {
-      // Get configuration from script tag
-      const script = document.currentScript;
-      const backend = script.getAttribute('data-backend');
-      const siteId = script.getAttribute('data-site-id');
-      const pathFromProp = script.getAttribute('data-path');
+      var script = document.currentScript;
+      var backend = script.getAttribute('data-backend');
+      var siteId = script.getAttribute('data-site-id');
 
-      // Use provided path or current pathname
-      const path = pathFromProp || window.location.pathname;
+      function trackPageview() {
+        fetch(backend + '/api/analytics/pv', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            siteId: siteId,
+            path: window.location.pathname,
+          }),
+        }).catch(function() {});
+      }
 
-      // Send pageview to backend (short path to avoid ad blockers)
-      fetch(`${backend}/api/analytics/pv`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          siteId: siteId,
-          path: path,
-        }),
-      }).catch(function(err) {
-        console.debug('[opendocs] Analytics error:', err);
-      });
+      trackPageview();
+      document.addEventListener('astro:after-swap', trackPageview);
     })();
   </script>
 )}

package/src/engine/src/components/react/SearchModal.tsx

@@ -80,13 +80,13 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
   const resultsRef = useRef<HTMLDivElement>(null);
   const pagefindRef = useRef<any>(null);
 
-  // Track the last search for analytics (only sent on meaningful actions)
-  const lastSearchRef = useRef<{ query: string; resultCount: number } | null>(null);
   const hasTrackedRef = useRef(false);
+  const lastResultCountRef = useRef(0);
+  const queryRef = useRef(query);
+  queryRef.current = query;
 
   const loadPagefind = async () => {
     try {
-      // Use Function constructor to create a truly dynamic import that Vite won't analyze
       const importPagefind = new Function(
         'return import("/pagefind/pagefind.js")'
       ) as () => Promise<any>;
@@ -100,39 +100,28 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
     }
   };
 
-  // Track search query for analytics - only tracks once per search session
-  const trackSearch = useCallback(() => {
+  // Fire-and-forget analytics using current query state
+  // Tracks on close or result click — captures the query text at that moment,
+  // including searches with 0 results (failed searches)
+  const trackSearch = useCallback((searchQuery: string, resultCount: number) => {
     if (!backend || !siteId) return;
     if (hasTrackedRef.current) return;
-    if (!lastSearchRef.current) return;
-
-    const { query: searchQuery, resultCount } = lastSearchRef.current;
     if (!searchQuery.trim()) return;
 
     hasTrackedRef.current = true;
-
-    fetch(`${backend}/api/analytics/sq`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        siteId,
-        query: searchQuery,
-        resultCount,
-      }),
-    }).catch(() => {
-      // Silently fail - analytics should not break search
-    });
+    const blob = new Blob(
+      [JSON.stringify({ siteId, query: searchQuery, resultCount })],
+      { type: "application/json" }
+    );
+    navigator.sendBeacon(`${backend}/api/analytics/sq`, blob);
   }, [backend, siteId]);
 
-  // Handle close with analytics tracking
-  const handleClose = useCallback(() => {
-    trackSearch();
-    onClose();
-  }, [onClose, trackSearch]);
+  // Ref so cleanup effects always call the latest trackSearch without re-registering
+  const trackSearchRef = useRef(trackSearch);
+  trackSearchRef.current = trackSearch;
 
-  // Handle result selection with analytics tracking
-  const handleResultSelect = useCallback((url: string) => {
-    trackSearch();
+  const handleResultSelect = useCallback((url: string, searchQuery: string, resultCount: number) => {
+    trackSearch(searchQuery, resultCount);
     window.location.href = url;
   }, [trackSearch]);
 
@@ -161,7 +150,7 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
         })
       );
       dispatch({ type: "SEARCH_SUCCESS", payload: formattedResults });
-      lastSearchRef.current = { query: searchQuery, resultCount: searchResults.results.length };
+      lastResultCountRef.current = searchResults.results.length;
     } catch (e) {
       console.error("Search error:", e);
       dispatch({ type: "SEARCH_ERROR", payload: "Search failed" });
@@ -175,18 +164,34 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
     }
   }, [isOpen, pagefindLoaded]);
 
-  // Reset state and focus input when modal opens
+  // Track analytics when modal closes, reset state when it opens
   useEffect(() => {
     if (isOpen) {
       dispatch({ type: "RESET" });
-      lastSearchRef.current = null;
       hasTrackedRef.current = false;
-      // Small delay to ensure modal is rendered before focusing
+      lastResultCountRef.current = 0;
       const timerId = setTimeout(() => inputRef.current?.focus(), 50);
-      return () => clearTimeout(timerId);
+      return () => {
+        clearTimeout(timerId);
+        // Fires when isOpen flips to false — track the search session
+        trackSearchRef.current(queryRef.current, lastResultCountRef.current);
+      };
     }
   }, [isOpen]);
 
+  // Global Escape key handler - works regardless of focus
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
   // Scroll selected item into view
   useEffect(() => {
     if (resultsRef.current && results.length > 0) {
@@ -217,13 +222,9 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
       case "Enter":
         e.preventDefault();
         if (results[selectedIndex]) {
-          handleResultSelect(results[selectedIndex].url);
+          handleResultSelect(results[selectedIndex].url, query, lastResultCountRef.current);
         }
         break;
-      case "Escape":
-        e.preventDefault();
-        handleClose();
-        break;
     }
   };
 
@@ -236,18 +237,11 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
       className="fixed inset-0 z-50"
       role="dialog"
       aria-modal="true"
-      onKeyDown={(e) => {
-        // Global escape handler for clicking outside input
-        if (e.key === "Escape") {
-          e.preventDefault();
-          handleClose();
-        }
-      }}
     >
       {/* Backdrop */}
       <div
         className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={handleClose}
+        onClick={onClose}
         aria-hidden="true"
       />
 
@@ -292,7 +286,7 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
                     href={result.url}
                     onClick={(e) => {
                       e.preventDefault();
-                      handleResultSelect(result.url);
+                      handleResultSelect(result.url, query, lastResultCountRef.current);
                     }}
                     className={cn(
                       "block px-4 py-3 transition-colors",

package/src/engine/src/components/react/Sidebar.tsx

@@ -283,10 +283,17 @@ export function Sidebar({
   siteName,
   navigation,
   logo,
-  currentPath,
+  currentPath: initialPath,
   githubUrl,
 }: SidebarProps) {
-  // No more isDark state or MutationObserver - CSS handles theme switching
+  // Track current path locally so it updates after View Transition navigations
+  const [currentPath, setCurrentPath] = useState(initialPath);
+
+  useEffect(() => {
+    const updatePath = () => setCurrentPath(window.location.pathname);
+    document.addEventListener("astro:after-swap", updatePath);
+    return () => document.removeEventListener("astro:after-swap", updatePath);
+  }, []);
 
   return (
     <div className="flex flex-col h-full">

package/src/engine/src/layouts/DocsLayout.astro

@@ -10,6 +10,7 @@ import { Sidebar } from "../components/react/Sidebar";
 import { PageFooter } from "../components/react/PageFooter";
 import { PageActions } from "../components/react/PageActions";
 import { SearchProvider } from "../components/react/SearchProvider";
+import { ViewTransitions } from "astro:transitions";
 import { loadConfig } from "../lib/config.js";
 import { generateColorVariants, getPageNavigation } from "../lib/utils";
 import "../styles/global.css";
@@ -117,23 +118,20 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
       })} />
     )}
 
+    <ViewTransitions />
     <Analytics path={currentPath} />
 
     <!-- Theme init script - prevents flash of wrong theme -->
     <script is:inline>
-      (function () {
-        const storedTheme = localStorage.getItem("theme");
-        if (storedTheme === "dark") {
-          document.documentElement.classList.add("dark");
-        } else if (storedTheme === "light") {
-          document.documentElement.classList.remove("dark");
-        } else {
-          const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-          if (prefersDark) {
-            document.documentElement.classList.add("dark");
-          }
-        }
-      })();
+      function getThemePreference() {
+        const stored = localStorage.getItem("theme");
+        if (stored === "dark" || stored === "light") return stored;
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      document.documentElement.classList.toggle("dark", getThemePreference() === "dark");
+      document.addEventListener("astro:before-swap", function (e) {
+        e.newDocument.documentElement.classList.toggle("dark", getThemePreference() === "dark");
+      });
     </script>
 
     <!-- Theme injection from docs.json config -->
@@ -159,6 +157,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
       <aside class="hidden lg:block fixed inset-y-0 left-0 z-40 w-64 border-r border-[var(--color-border)] bg-[var(--color-surface-raised)]">
         <Sidebar
           client:load
+          transition:persist="desktop-sidebar"
           siteName={siteName}
           navigation={navigation}
           logo={logo}
@@ -182,6 +181,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
         <div class="h-full overflow-y-auto">
           <Sidebar
             client:load
+            transition:persist="mobile-sidebar"
             siteName={siteName}
             navigation={navigation}
             logo={logo}
@@ -276,7 +276,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
     </div>
 
     <!-- Search modal -->
-    <SearchProvider client:load backend={backend} siteId={siteId} />
+    <SearchProvider client:load transition:persist="search" backend={backend} siteId={siteId} />
 
     <!-- Mobile sidebar toggle script -->
     <script src="../scripts/mobile-sidebar.ts"></script>