docstra 1.5.2-next.2 → 1.6.2

package/README.md

@@ -30,6 +30,7 @@ import { defineDocstraConfig } from 'docstra/config';
 export default defineDocstraConfig({
     siteName: 'Docstra',
     githubRepo: 'https://github.com/sudhucodes/docstra',
+    contentDir: 'docs/content',
     editOnGithub: true,
     feedback: {
         enabled: true,

package/dist/client/index.d.mts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { D as DocstraConfig, p as pageDataContent, a as DocstraContextType } from '../types-BpWZQq13.mjs';
+import { D as DocstraConfig, p as pageDataContent, a as DocstraContextType } from '../types-BCr1htTq.mjs';
 
-declare function DocstraProvider({ children, docstraConfig, pageData }: {
+declare function DocstraProvider({ children, docstraConfig, docs, pageData }: {
     children: React$1.ReactNode;
     docstraConfig: DocstraConfig;
+    docs: pageDataContent[];
     pageData: pageDataContent;
 }): react_jsx_runtime.JSX.Element;
 declare function useDocstra(): DocstraContextType;

package/dist/client/index.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { D as DocstraConfig, p as pageDataContent, a as DocstraContextType } from '../types-BpWZQq13.js';
+import { D as DocstraConfig, p as pageDataContent, a as DocstraContextType } from '../types-BCr1htTq.js';
 
-declare function DocstraProvider({ children, docstraConfig, pageData }: {
+declare function DocstraProvider({ children, docstraConfig, docs, pageData }: {
     children: React$1.ReactNode;
     docstraConfig: DocstraConfig;
+    docs: pageDataContent[];
     pageData: pageDataContent;
 }): react_jsx_runtime.JSX.Element;
 declare function useDocstra(): DocstraContextType;

package/dist/client/index.js

@@ -58,13 +58,26 @@ function cn(...inputs) {
 
 // src/client/search-box.tsx
 var import_react = require("react");
+var import_fuse = __toESM(require("fuse.js"));
+
+// src/client/link.tsx
+var import_link = __toESM(require("next/link"));
 var import_jsx_runtime = require("react/jsx-runtime");
+function Link({ href, children, className, onNavigate, ...props }) {
+  if (href.startsWith("http")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className, ...props, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, className, onNavigate, ...props, children });
+}
+
+// src/client/search-box.tsx
+var import_navigation = require("next/navigation");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function DocstraSearchBox() {
-  const { openSearchBox, setOpenSearchBox } = useDocstra();
+  const { openSearchBox, setOpenSearchBox, docs } = useDocstra();
   const [searchQuery, setSearchQuery] = (0, import_react.useState)("");
-  (0, import_react.useEffect)(() => {
-    console.log(`Search query: ${searchQuery}`);
-  }, [searchQuery]);
+  const [searchResults, setSearchResults] = (0, import_react.useState)([]);
+  const router = (0, import_navigation.useRouter)();
   (0, import_react.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.ctrlKey && event.key === "k") {
@@ -77,7 +90,44 @@ function DocstraSearchBox() {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const fuse = (0, import_react.useMemo)(() => {
+    return new import_fuse.default(docs, {
+      keys: ["frontmatter.title", "frontmatter.description", "headings", "info.slug"],
+      threshold: 0.3
+    });
+  }, [docs]);
+  (0, import_react.useEffect)(() => {
+    if (searchQuery) {
+      const results = fuse.search(searchQuery);
+      setSearchResults(results.map((r) => r.item));
+    }
+  }, [searchQuery]);
+  const onSearchHandler = (e) => {
+    e.preventDefault();
+    if (searchQuery) {
+      const component = searchResults[0];
+      if (component) {
+        router.push(`/docs/${component.info.slug}`);
+        setSearchQuery("");
+        setOpenSearchBox(false);
+      }
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        setOpenSearchBox(false);
+        setSearchQuery("");
+      }
+    };
+    if (openSearchBox) {
+      window.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [openSearchBox]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       onClick: () => {
@@ -88,67 +138,56 @@ function DocstraSearchBox() {
         "fixed inset-0 z-25 flex items-start justify-center bg-white/40 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300",
         openSearchBox && "opacity-100 pointer-events-auto"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           onClick: (e) => e.stopPropagation(),
           className: "flex flex-col items-center mt-30 max-w-lg w-full max-md:px-4",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "form",
-            {
-              className: cn(
-                "relative flex items-center justify-between w-full bg-white border border-slate-200 text-gray-400 h-15 p-0.5 rounded-md"
-                // searchQuery && "rounded-b-none border-b-0"
-              ),
-              children: openSearchBox && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SearchIcon, { className: "size-5.5 mx-3 shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
-                  {
-                    className: "w-full bg-transparent h-full outline-none text-gray-400 placeholder:text-gray-400",
-                    type: "text",
-                    placeholder: "Search docs...",
-                    spellCheck: "false",
-                    autoFocus: true,
-                    value: searchQuery,
-                    onChange: (e) => setSearchQuery(e.target.value),
-                    name: "searchQuery",
-                    required: true
-                  }
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "form",
+              {
+                onSubmit: onSearchHandler,
+                className: cn(
+                  "relative flex items-center justify-between w-full bg-white border border-slate-200 text-gray-400 h-15 p-0.5 rounded-md",
+                  searchQuery && "rounded-b-none border-b-0"
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  "svg",
-                  {
-                    className: "h-4.5 shrink-0 w-auto mr-3",
-                    width: "29",
-                    height: "18",
-                    viewBox: "0 0 29 18",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "path",
-                        {
-                          d: "M13.5 2.25a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 1 0 2.25-2.25h-9a2.25 2.25 0 1 0 2.25 2.25v-9A2.25 2.25 0 1 0 4.5 6.75h9a2.25 2.25 0 0 0 0-4.5",
-                          stroke: "#99A1AF",
-                          strokeWidth: "1.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "path",
-                        {
-                          d: "M25.986 14 21.45 8.89l4.438-4.69h2.058l-4.9 5.096v-.882L28.086 14zm-5.922 0V4.2h1.61V14z",
-                          fill: "#99A1AF"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            }
-          )
+                children: openSearchBox && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.SearchIcon, { className: "size-5.5 mx-3 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { className: "w-full bg-transparent h-full outline-none text-gray-400 placeholder:text-gray-400", type: "text", placeholder: "Search docs...", spellCheck: "false", autoFocus: true, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), name: "searchQuery", required: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "border border-gray-200 px-2 mr-3 py-1 rounded text-xs", children: "Esc" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "max-h-70 overflow-x-hidden overflow-y-auto scrollbar-y w-full bg-white text-slate-700 flex flex-col",
+                  searchQuery && "rounded-b-md border border-slate-200"
+                ),
+                children: [
+                  searchResults.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    Link,
+                    {
+                      href: `/docs/${item.info.slug.replace("index", "")}`,
+                      onNavigate: () => {
+                        setOpenSearchBox(false);
+                        setSearchQuery("");
+                      },
+                      className: "w-full hover:bg-gray-100/70 border-b border-slate-200 transition-all py-4 px-4 last:mb-2",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-medium", children: item.frontmatter.title }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm mt-1 text-gray-500", children: item.frontmatter.description })
+                      ]
+                    },
+                    item.info.slug
+                  )),
+                  searchQuery && searchResults.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-gray-500 text-center py-20", children: "No results found" })
+                ]
+              }
+            )
+          ]
         }
       )
     }
@@ -156,16 +195,17 @@ function DocstraSearchBox() {
 }
 
 // src/context/docstra-context.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DocstraContext = (0, import_react2.createContext)(null);
 function DocstraProvider({
   children,
   docstraConfig,
+  docs,
   pageData
 }) {
   const [openSidebar, setOpenSidebar] = (0, import_react2.useState)(false);
   const [openSearchBox, setOpenSearchBox] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     DocstraContext.Provider,
     {
       value: {
@@ -174,11 +214,12 @@ function DocstraProvider({
         docstraConfig,
         openSearchBox,
         setOpenSearchBox,
-        pageData
+        pageData,
+        docs
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_toast_msg.ToastContainer, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DocstraSearchBox, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_toast_msg.ToastContainer, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DocstraSearchBox, {}),
         children
       ]
     }
@@ -193,18 +234,6 @@ function useDocstra() {
 // src/client/header.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_react3 = require("react");
-
-// src/client/link.tsx
-var import_link = __toESM(require("next/link"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Link({ href, children, className, onNavigate, ...props }) {
-  if (href.startsWith("http")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href, className, ...props, target: "_blank", rel: "noopener noreferrer", children });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link.default, { href, className, onNavigate, ...props, children });
-}
-
-// src/client/header.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function DocstraHeader() {
   const { openSidebar, setOpenSidebar, docstraConfig } = useDocstra();
@@ -241,7 +270,7 @@ function DocstraHeader() {
 
 // src/client/sidebar.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_navigation = require("next/navigation");
+var import_navigation2 = require("next/navigation");
 
 // src/utils/get-icon.ts
 var Icons = __toESM(require("lucide-react"));
@@ -251,11 +280,10 @@ function getIcon(name) {
 }
 
 // src/client/sidebar.tsx
-var import_react_toast_msg2 = require("react-toast-msg");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DocstraSidebar() {
-  const { openSidebar, setOpenSidebar, docstraConfig } = useDocstra();
-  const pathname = (0, import_navigation.usePathname)();
+  const { openSidebar, setOpenSidebar, docstraConfig, setOpenSearchBox } = useDocstra();
+  const pathname = (0, import_navigation2.usePathname)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
@@ -278,8 +306,11 @@ function DocstraSidebar() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
-              className: "flex items-center gap-2 cursor-pointer mt-6 mb-4 p-2.5 text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50",
-              onClick: () => import_react_toast_msg2.toast.warning("Search is not available yet!"),
+              className: "flex items-center select-none gap-2 cursor-pointer mt-6 mb-4 p-2.5 text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50",
+              onClick: () => {
+                setOpenSidebar(openSidebar && false);
+                setOpenSearchBox(true);
+              },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.SearchIcon, { className: "size-4.5" }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Search" }),
@@ -324,11 +355,11 @@ function DocstraPage({ children }) {
 }
 
 // src/client/breadcrumbs.tsx
-var import_navigation2 = require("next/navigation");
+var import_navigation3 = require("next/navigation");
 var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function DocstraBreadcrumbs() {
-  const pathname = (0, import_navigation2.usePathname)();
+  const pathname = (0, import_navigation3.usePathname)();
   const paths = pathname.split("/").filter(Boolean);
   const breadcrumbs = paths.map((segment, index) => {
     const href = "/" + paths.slice(0, index + 1).join("/");
@@ -573,12 +604,12 @@ function DocstraFeedback() {
 }
 
 // src/client/pagination.tsx
-var import_navigation3 = require("next/navigation");
-var import_link5 = __toESM(require("next/link"));
+var import_navigation4 = require("next/navigation");
+var import_link6 = __toESM(require("next/link"));
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function DocstraPagination() {
-  const pathname = (0, import_navigation3.usePathname)();
+  const pathname = (0, import_navigation4.usePathname)();
   const { docstraConfig } = useDocstra();
   const flatLinks = docstraConfig?.sidebar?.links?.flatMap((section) => section.items);
   const currentIndex = flatLinks.findIndex((item) => item.href === pathname);
@@ -586,7 +617,7 @@ function DocstraPagination() {
   const next = currentIndex < flatLinks.length - 1 ? flatLinks[currentIndex + 1] : null;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col md:flex-row gap-2 justify-between py-10 mt-10", children: [
     prev ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_link5.default,
+      import_link6.default,
       {
         href: prev.href,
         className: "flex flex-col items-start gap-2 border border-gray-200 hover:bg-gray-50 py-3 md:min-w-62 pl-4 pr-10 rounded-lg text-sm",
@@ -600,7 +631,7 @@ function DocstraPagination() {
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {}),
     next ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_link5.default,
+      import_link6.default,
       {
         href: next.href,
         className: "flex flex-col items-end gap-2 border border-gray-200 hover:bg-gray-50 py-3 pr-4 md:min-w-62 pl-10 rounded-lg text-sm",
@@ -631,7 +662,7 @@ function DocstraBody({ children }) {
 
 // src/client/docstra-toc.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_navigation4 = require("next/navigation");
+var import_navigation5 = require("next/navigation");
 var import_react6 = require("react");
 
 // src/utils/generate-id-from-text.ts
@@ -676,7 +707,7 @@ function DocstraTOC() {
   const rawMdxContent = pageData?.content;
   const lastScrollY = (0, import_react6.useRef)(0);
   const observerRef = (0, import_react6.useRef)(null);
-  const pathname = (0, import_navigation4.usePathname)();
+  const pathname = (0, import_navigation5.usePathname)();
   const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra";
   const githubLink = `${baseUrlOfGithub}/edit/main/${mdxFilePath}`;
   (0, import_react6.useEffect)(() => {
@@ -805,7 +836,7 @@ function TableOfContentsLink({ heading, activeId, handleClick, className }) {
 var import_react7 = require("react");
 var import_prism_react_renderer = require("prism-react-renderer");
 var import_lucide_react10 = require("lucide-react");
-var import_react_toast_msg3 = require("react-toast-msg");
+var import_react_toast_msg2 = require("react-toast-msg");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function DocstraCodeBlock(props) {
   const { language, title, children } = props;
@@ -813,7 +844,7 @@ function DocstraCodeBlock(props) {
   const [copied, setCopied] = (0, import_react7.useState)(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(code);
-    import_react_toast_msg3.toast.success("Copied to clipboard!");
+    import_react_toast_msg2.toast.success("Copied to clipboard!");
     setCopied(true);
   };
   (0, import_react7.useEffect)(() => {