docstra 1.2.0 → 1.3.0

package/README.md

@@ -4,6 +4,8 @@ Docstra is a modern documentation framework for Next.js. It's built with Tailwin
 
 > Documentation of Docstra is coming soon. Stay tuned!
 
+> For any questions, feel free to reach out us on [contact@sudhucodes.com](mailto:contact@sudhucodes.com)
+
 ## Features
 
 - MDX support

package/dist/client/index.js

@@ -214,7 +214,7 @@ function DocstraHeader() {
     }
   }, [openSidebar]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "sticky top-0 z-10 text-sm flex items-center justify-between border-b border-gray-100 h-18 px-4 md:px-6 bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: docstraConfig.navbar?.logo?.link || "/", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: docstraConfig.navbar?.logo?.link || "/", className: "hover:opacity-80 transition", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "img",
       {
         src: docstraConfig.navbar?.logo?.src || "/logo.png",
@@ -347,17 +347,15 @@ function DocstraBreadcrumbs() {
 
 // src/client/page-buttons.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_navigation3 = require("next/navigation");
 var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function DocstraPageButtons({ rawMdxContent }) {
   const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
   const [href, setHref] = (0, import_react4.useState)(null);
-  const pathname = (0, import_navigation3.usePathname)();
   (0, import_react4.useEffect)(() => {
     setHref(window.location.href);
   }, []);
-  const prompt = `Read from this URL: ${href + pathname} and explain it to me.`;
+  const prompt = `Read from this URL: ${href} and explain it to me.`;
   const handleCopy = () => {
     navigator.clipboard.writeText(rawMdxContent);
     setIsCopied(true);
@@ -562,12 +560,12 @@ function DocstraFeedback() {
 }
 
 // src/client/pagination.tsx
-var import_navigation4 = require("next/navigation");
+var import_navigation3 = require("next/navigation");
 var import_link5 = __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_navigation4.usePathname)();
+  const pathname = (0, import_navigation3.usePathname)();
   const { docstraConfig } = useDocstra();
   const flatLinks = docstraConfig?.sidebar?.links?.flatMap((section) => section.items);
   const currentIndex = flatLinks.findIndex((item) => item.href === pathname);
@@ -619,7 +617,7 @@ function DocstraBody({ children, metadata, mdxContent }) {
 
 // src/client/docstra-toc.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_navigation5 = require("next/navigation");
+var import_navigation4 = require("next/navigation");
 var import_react6 = require("react");
 
 // src/utils/generate-id-from-text.ts
@@ -662,7 +660,7 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
   const { docstraConfig } = useDocstra();
   const lastScrollY = (0, import_react6.useRef)(0);
   const observerRef = (0, import_react6.useRef)(null);
-  const pathname = (0, import_navigation5.usePathname)();
+  const pathname = (0, import_navigation4.usePathname)();
   const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra";
   const normalized = mdxFilePath.replace(/\\/g, "/");
   const match = normalized.match(/\/docs\/(.+)$/);
@@ -706,6 +704,22 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
     const scrolled = window.scrollY > 100;
     !scrolled && setActiveId(headings[0]?.id);
   }, [headings]);
+  (0, import_react6.useEffect)(() => {
+    if (!activeId) return;
+    const container = document.querySelector(".toc-scroll-container");
+    if (!container) return;
+    const activeLink = container.querySelector(`a[href="#${activeId}"]`);
+    if (!activeLink) return;
+    const containerRect = container.getBoundingClientRect();
+    const linkRect = activeLink.getBoundingClientRect();
+    const isOutOfView = linkRect.top < containerRect.top || linkRect.bottom > containerRect.bottom;
+    if (isOutOfView) {
+      activeLink.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    }
+  }, [activeId]);
   (0, import_react6.useEffect)(() => {
     if (!isManualClick) return;
     const timer = setTimeout(() => setIsManualClick(false), 800);
@@ -720,7 +734,7 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react9.TextAlignStartIcon, { className: "size-4" }),
       "On this page"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: headings.map((h2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "toc-scroll-container max-h-3/4 overflow-y-auto scrollbar-none", children: headings.map((h2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableOfContentsLink, { heading: h2, activeId, handleClick }),
       h2.children.map((h3) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         TableOfContentsLink,

package/dist/client/index.mjs

@@ -172,7 +172,7 @@ function DocstraHeader() {
     }
   }, [openSidebar]);
   return /* @__PURE__ */ jsxs3("header", { className: "sticky top-0 z-10 text-sm flex items-center justify-between border-b border-gray-100 h-18 px-4 md:px-6 bg-white", children: [
-    /* @__PURE__ */ jsx4("a", { href: docstraConfig.navbar?.logo?.link || "/", children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx4(Link, { href: docstraConfig.navbar?.logo?.link || "/", className: "hover:opacity-80 transition", children: /* @__PURE__ */ jsx4(
       "img",
       {
         src: docstraConfig.navbar?.logo?.src || "/logo.png",
@@ -305,17 +305,15 @@ function DocstraBreadcrumbs() {
 
 // src/client/page-buttons.tsx
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { usePathname as usePathname3 } from "next/navigation";
 import { useEffect as useEffect3, useState as useState3 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function DocstraPageButtons({ rawMdxContent }) {
   const [isCopied, setIsCopied] = useState3(false);
   const [href, setHref] = useState3(null);
-  const pathname = usePathname3();
   useEffect3(() => {
     setHref(window.location.href);
   }, []);
-  const prompt = `Read from this URL: ${href + pathname} and explain it to me.`;
+  const prompt = `Read from this URL: ${href} and explain it to me.`;
   const handleCopy = () => {
     navigator.clipboard.writeText(rawMdxContent);
     setIsCopied(true);
@@ -520,12 +518,12 @@ function DocstraFeedback() {
 }
 
 // src/client/pagination.tsx
-import { usePathname as usePathname4 } from "next/navigation";
+import { usePathname as usePathname3 } from "next/navigation";
 import Link2 from "next/link";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function DocstraPagination() {
-  const pathname = usePathname4();
+  const pathname = usePathname3();
   const { docstraConfig } = useDocstra();
   const flatLinks = docstraConfig?.sidebar?.links?.flatMap((section) => section.items);
   const currentIndex = flatLinks.findIndex((item) => item.href === pathname);
@@ -577,7 +575,7 @@ function DocstraBody({ children, metadata, mdxContent }) {
 
 // src/client/docstra-toc.tsx
 import { ArrowUpCircleIcon, SquareArrowOutUpRightIcon, TextAlignStartIcon } from "lucide-react";
-import { usePathname as usePathname5 } from "next/navigation";
+import { usePathname as usePathname4 } from "next/navigation";
 import { useEffect as useEffect4, useRef, useState as useState5 } from "react";
 
 // src/utils/generate-id-from-text.ts
@@ -620,7 +618,7 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
   const { docstraConfig } = useDocstra();
   const lastScrollY = useRef(0);
   const observerRef = useRef(null);
-  const pathname = usePathname5();
+  const pathname = usePathname4();
   const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra";
   const normalized = mdxFilePath.replace(/\\/g, "/");
   const match = normalized.match(/\/docs\/(.+)$/);
@@ -664,6 +662,22 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
     const scrolled = window.scrollY > 100;
     !scrolled && setActiveId(headings[0]?.id);
   }, [headings]);
+  useEffect4(() => {
+    if (!activeId) return;
+    const container = document.querySelector(".toc-scroll-container");
+    if (!container) return;
+    const activeLink = container.querySelector(`a[href="#${activeId}"]`);
+    if (!activeLink) return;
+    const containerRect = container.getBoundingClientRect();
+    const linkRect = activeLink.getBoundingClientRect();
+    const isOutOfView = linkRect.top < containerRect.top || linkRect.bottom > containerRect.bottom;
+    if (isOutOfView) {
+      activeLink.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    }
+  }, [activeId]);
   useEffect4(() => {
     if (!isManualClick) return;
     const timer = setTimeout(() => setIsManualClick(false), 800);
@@ -678,7 +692,7 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
       /* @__PURE__ */ jsx15(TextAlignStartIcon, { className: "size-4" }),
       "On this page"
     ] }),
-    /* @__PURE__ */ jsx15("ul", { children: headings.map((h2) => /* @__PURE__ */ jsxs12("li", { children: [
+    /* @__PURE__ */ jsx15("ul", { className: "toc-scroll-container max-h-3/4 overflow-y-auto scrollbar-none", children: headings.map((h2) => /* @__PURE__ */ jsxs12("li", { children: [
       /* @__PURE__ */ jsx15(TableOfContentsLink, { heading: h2, activeId, handleClick }),
       h2.children.map((h3) => /* @__PURE__ */ jsx15(
         TableOfContentsLink,

package/dist/server/index.js

@@ -44,8 +44,7 @@ var import_gray_matter = __toESM(require("gray-matter"));
 var DEFAULT_CONTENT_DIR = import_path.default.join(process.cwd(), "app", "docs", "content");
 function getFilePath({ slug, CONTENT_DIR }) {
   const slugArray = Array.isArray(slug) && slug.length > 0 ? slug : ["index"];
-  const USER_CONTENT_DIR = process.cwd() + CONTENT_DIR;
-  const DIR = USER_CONTENT_DIR || DEFAULT_CONTENT_DIR;
+  const DIR = CONTENT_DIR ? import_path.default.join(process.cwd(), CONTENT_DIR) : DEFAULT_CONTENT_DIR;
   const possiblePaths = [
     import_path.default.join(DIR, ...slugArray) + ".mdx",
     import_path.default.join(DIR, ...slugArray) + ".md",
@@ -57,10 +56,13 @@ function getFilePath({ slug, CONTENT_DIR }) {
       return filePath;
     }
   }
-  throw new Error(`\u274C MDX file not found in: ${DIR} `);
+  throw new Error(`\u274C MDX file not found in: ${DIR}`);
 }
 function getFileContents({ slug, CONTENT_DIR }) {
-  const filePath = getFilePath({ slug, CONTENT_DIR: CONTENT_DIR || DEFAULT_CONTENT_DIR });
+  const filePath = getFilePath({
+    slug,
+    CONTENT_DIR
+  });
   const rawFile = import_fs.default.readFileSync(filePath, "utf-8");
   const { data, content } = (0, import_gray_matter.default)(rawFile);
   return {

package/dist/server/index.mjs

@@ -5,8 +5,7 @@ import matter from "gray-matter";
 var DEFAULT_CONTENT_DIR = path.join(process.cwd(), "app", "docs", "content");
 function getFilePath({ slug, CONTENT_DIR }) {
   const slugArray = Array.isArray(slug) && slug.length > 0 ? slug : ["index"];
-  const USER_CONTENT_DIR = process.cwd() + CONTENT_DIR;
-  const DIR = USER_CONTENT_DIR || DEFAULT_CONTENT_DIR;
+  const DIR = CONTENT_DIR ? path.join(process.cwd(), CONTENT_DIR) : DEFAULT_CONTENT_DIR;
   const possiblePaths = [
     path.join(DIR, ...slugArray) + ".mdx",
     path.join(DIR, ...slugArray) + ".md",
@@ -18,10 +17,13 @@ function getFilePath({ slug, CONTENT_DIR }) {
       return filePath;
     }
   }
-  throw new Error(`\u274C MDX file not found in: ${DIR} `);
+  throw new Error(`\u274C MDX file not found in: ${DIR}`);
 }
 function getFileContents({ slug, CONTENT_DIR }) {
-  const filePath = getFilePath({ slug, CONTENT_DIR: CONTENT_DIR || DEFAULT_CONTENT_DIR });
+  const filePath = getFilePath({
+    slug,
+    CONTENT_DIR
+  });
   const rawFile = fs.readFileSync(filePath, "utf-8");
   const { data, content } = matter(rawFile);
   return {

package/dist/styles.css

@@ -1 +1,43 @@
-@source ".";
+@source ".";
+
+.scrollbar-none::-webkit-scrollbar {
+    display: none;
+}
+
+.scrollbar-x::-webkit-scrollbar {
+    display: block;
+    height: 3.5px;
+}
+
+.scrollbar-x::-webkit-scrollbar-track {
+    background: var(--color-gray-100);
+}
+
+.scrollbar-x::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-300);
+    border-radius: 0px;
+    background-clip: padding-box;
+}
+
+.scrollbar-x::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-gray-400);
+}
+
+.scrollbar-y::-webkit-scrollbar {
+    display: block;
+    width: 3.5px;
+}
+
+.scrollbar-y::-webkit-scrollbar-track {
+    background: var(--color-gray-100);
+}
+
+.scrollbar-y::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-300);
+    border-radius: 0px;
+    background-clip: padding-box;
+}
+
+.scrollbar-y::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-gray-400);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "docstra",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "A Modern Documentation Framework for Next.js",
     "keywords": [
         "next",