docstra 1.7.2 → 1.7.5

package/README.md

@@ -2,136 +2,10 @@
 
 **The Modern Documentation Framework for Next.js**
 
-Docstra is a powerful, type-safe, and easy-to-use documentation framework built for Next.js 15+ App Router. It provides a beautiful default theme, MDX support, and flexible components to build your documentation site in minutes.
+Docstra is a powerful and easy-to-use documentation framework built for Next.js App Router. It provides a beautiful default theme, MDX support and flexible components to build your documentation site in minutes.
 
 ---
 
-## 🚀 Quick Start
+See Our [Website](https://docstra.sudhucodes.com) for more documentation.
 
-### 1. Installation
-
-Install `docstra` and its peer dependencies:
-
-```bash
-npm install docstra
-```
-
-### 2. Configuration
-
-Create `docstra.config.ts` in your project root:
-
-```ts
-import { DocstraConfig } from "docstra/config";
-
-const config: DocstraConfig = {
-    title: "My Docs",
-    description: "Documentation for my project",
-    github: {
-        user: "myuser",
-        repo: "myrepo",
-    },
-    sidebar: {
-        // ... sidebar entries
-    }
-};
-
-export default config;
-```
-
-### 3. Source Setup
-
-Create `src/lib/source.ts` (or `lib/source.ts`) to manage your content:
-
-```ts
-import { createSource } from "docstra/server";
-import { docs } from "../.docstra"; // Generated at build time
-
-export const source = createSource(docs);
-```
-
-### 4. Component Mapping (Important!)
-
-Create `mdx-components.tsx` in your project root. This is critical for getting the default components (like code blocks) working correctly.
-
-```tsx
-import { defaultMdxComponents } from "docstra/server";
-import { DocstraCodeBlock } from "docstra";
-
-export function useMDXComponents() {
-    return {
-        ...defaultMdxComponents(),
-        pre: DocstraCodeBlock, // Manually map to avoid server/client bundle conflicts
-    };
-}
-```
-
-### 5. Create the Page
-
-Create your catch-all route at `app/docs/[[...slug]]/page.tsx`:
-
-```tsx
-import { source } from "@/lib/source";
-import { notFound } from "next/navigation";
-import { DocstraProvider, DocstraPage, DocstraBody, DocstraHeader } from "docstra";
-import { useMDXComponents } from "@/mdx-components";
-import config from "@/docstra.config";
-
-export default async function Page({ params }: { params: Promise<{ slug?: string[] }> }) {
-    const { slug } = await params;
-    
-    // 1. Get page data
-    const page = source.getPage(slug);
-    if (!page) return notFound();
-
-    // 2. Destructure info (safe JSON) and body (MDX Component)
-    const { info, body: MDX } = page;
-
-    // 3. Render
-    return (
-        <DocstraProvider docstraConfig={config} docs={source.files} pageData={info}>
-            <DocstraHeader />
-            <DocstraPage>
-                <DocstraBody>
-                    <MDX components={useMDXComponents()} />
-                </DocstraBody>
-            </DocstraPage>
-        </DocstraProvider>
-    );
-}
-
-// Generate static params for SSG
-export function generateStaticParams() {
-    return source.generateStaticParams();
-}
-
-// Generate metadata
-export async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) {
-    const { slug } = await params;
-    const page = source.getPage(slug);
-    if (!page) return notFound();
-    return {
-        title: page.info.data.metadata.title,
-        description: page.info.data.metadata.description,
-    };
-}
-```
-
-### 6. Build
-
-Update your `next.config.ts` or `with-docstra` setup (if applicable) and run:
-
-```bash
-npm run build
-```
-
-Docstra will generate the `.docstra/index.ts` file manifest, and your docs will be live!
-
----
-
-## 🛠 Features
-
-- **MDX Support**: Write documentation in Markdown/MDX.
-- **Auto Sidebar/TOC**: `DocstraPage` automatically handles layouts.
-- **Search**: Built-in search (requires configuration).
-- **Code Highlighting**: Powered by Prism with copy support.
-- **Type Safe**: Full TypeScript support.
+Thanks for using Docstra! Happy Documentation :)

package/cli/index.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+const package = require("../package.json");
+const command = process.argv[2];
+
+if (command === "init") {
+    console.log(`
+Docstra CLI ${package.version}
+${package.description}
+
+Thank you for trying the Docstra CLI.
+We are actively working on the \`init\` command and it will be
+available in an upcoming release.
+
+Stay tuned!
+`);
+} else {
+    console.log(`
+Usage:
+  docstra init
+
+Description:
+  Initializes Docstra in your project (coming soon).
+`);
+}

package/dist/client/index.d.mts

@@ -1,6 +1,6 @@
 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-BTnHEZBE.mjs';
+import { D as DocstraConfig, p as pageDataContent, a as DocstraContextType } from '../types-CvrHe34X.mjs';
 
 declare function DocstraProvider({ children, docstraConfig, docs, pageData: initialPageData, slug }: {
     children: React$1.ReactNode;
@@ -13,8 +13,6 @@ declare function useDocstra(): DocstraContextType;
 
 declare function DocstraHeader(): react_jsx_runtime.JSX.Element;
 
-declare function DocstraSidebar(): react_jsx_runtime.JSX.Element;
-
 interface DocstraPageProps {
     children: React.ReactNode;
     toc?: boolean;
@@ -27,10 +25,6 @@ interface Props {
 }
 declare function DocstraBody({ children }: Props): react_jsx_runtime.JSX.Element;
 
-declare function DocstraTOC(): react_jsx_runtime.JSX.Element;
-
 declare function DocstraCodeBlock(props: any): react_jsx_runtime.JSX.Element;
 
-declare function DocstraSearchBox(): react_jsx_runtime.JSX.Element;
-
-export { DocstraBody, DocstraCodeBlock, DocstraHeader, DocstraPage, DocstraProvider, DocstraSearchBox, DocstraSidebar, DocstraTOC, useDocstra };
+export { DocstraBody, DocstraCodeBlock, DocstraHeader, DocstraPage, DocstraProvider, useDocstra };

package/dist/client/index.d.ts

@@ -1,6 +1,6 @@
 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-BTnHEZBE.js';
+import { D as DocstraConfig, p as pageDataContent, a as DocstraContextType } from '../types-CvrHe34X.js';
 
 declare function DocstraProvider({ children, docstraConfig, docs, pageData: initialPageData, slug }: {
     children: React$1.ReactNode;
@@ -13,8 +13,6 @@ declare function useDocstra(): DocstraContextType;
 
 declare function DocstraHeader(): react_jsx_runtime.JSX.Element;
 
-declare function DocstraSidebar(): react_jsx_runtime.JSX.Element;
-
 interface DocstraPageProps {
     children: React.ReactNode;
     toc?: boolean;
@@ -27,10 +25,6 @@ interface Props {
 }
 declare function DocstraBody({ children }: Props): react_jsx_runtime.JSX.Element;
 
-declare function DocstraTOC(): react_jsx_runtime.JSX.Element;
-
 declare function DocstraCodeBlock(props: any): react_jsx_runtime.JSX.Element;
 
-declare function DocstraSearchBox(): react_jsx_runtime.JSX.Element;
-
-export { DocstraBody, DocstraCodeBlock, DocstraHeader, DocstraPage, DocstraProvider, DocstraSearchBox, DocstraSidebar, DocstraTOC, useDocstra };
+export { DocstraBody, DocstraCodeBlock, DocstraHeader, DocstraPage, DocstraProvider, useDocstra };

package/dist/client/index.js

@@ -36,9 +36,6 @@ __export(client_exports, {
   DocstraHeader: () => DocstraHeader,
   DocstraPage: () => DocstraPage,
   DocstraProvider: () => DocstraProvider,
-  DocstraSearchBox: () => DocstraSearchBox,
-  DocstraSidebar: () => DocstraSidebar,
-  DocstraTOC: () => DocstraTOC,
   useDocstra: () => useDocstra
 });
 module.exports = __toCommonJS(client_exports);
@@ -238,6 +235,7 @@ var import_link2 = __toESM(require("next/link"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function DocstraHeader() {
   const { openSidebar, setOpenSidebar, docstraConfig } = useDocstra();
+  const githubRepo = "https://github.com/" + docstraConfig?.editOnGithub?.owner + "/" + docstraConfig?.editOnGithub?.repo;
   (0, import_react3.useEffect)(() => {
     if (openSidebar) {
       document.body.classList.add("max-md:overflow-hidden");
@@ -255,8 +253,8 @@ function DocstraHeader() {
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hidden divide-x divide-gray-200 md:flex items-center", children: [
-      docstraConfig.navbar?.links?.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link2.default, { href: link.href, className: "px-6 hover:text-gray-500", children: link.name }, link.name)),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link2.default, { href: docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "size-6 mx-6", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3" }) }) })
+      docstraConfig.navbar?.links?.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link2.default, { href: link.href, className: "px-6 hover:text-gray-600", children: link.name }, link.name)),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link2.default, { href: githubRepo || "https://github.com/sudhucodes/docstra", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "size-6 mx-6", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3" }) }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
@@ -366,7 +364,8 @@ function DocstraTOC() {
   const lastScrollY = (0, import_react4.useRef)(0);
   const observerRef = (0, import_react4.useRef)(null);
   const pathname = (0, import_navigation3.usePathname)();
-  const githubLink = docstraConfig?.editOnGithub ? `${docstraConfig.editOnGithub.owner}/${docstraConfig.editOnGithub.repo}/edit/main/${mdxFilePath}` : "";
+  const baseUrlOfGithub = "https://github.com/" + docstraConfig?.editOnGithub?.owner + "/" + docstraConfig?.editOnGithub?.repo;
+  const githubLink = `${baseUrlOfGithub}/edit/main/${docstraConfig?.editOnGithub?.path}/${mdxFilePath}`;
   (0, import_react4.useEffect)(() => {
     const onScroll = () => {
       const currentY = window.scrollY;
@@ -757,7 +756,7 @@ function DocstraPagination() {
   const currentIndex = flatLinks.findIndex((item) => item.href === pathname);
   const prev = currentIndex > 0 ? flatLinks[currentIndex - 1] : null;
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col lg:flex-row gap-2 justify-between py-10 mt-10", children: [
     prev ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       import_link5.default,
       {
@@ -803,43 +802,29 @@ function DocstraBody({ children }) {
 }
 
 // src/client/components/code-block.tsx
-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_msg2 = require("react-toast-msg");
+var import_react7 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function DocstraCodeBlock(props) {
-  const { title, children } = props;
-  const childProps = children?.props || {};
-  const className = childProps.className || "";
-  const matches = className.match(/language-(?<lang>.*)/);
-  const language = props.language || matches && matches.groups && matches.groups.lang || "text";
-  const code = typeof children === "string" ? children.trim() : children?.props?.children?.toString()?.trim() || "";
-  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const { filename, children, className, rawText } = props;
+  const isInline = !className?.includes("language-");
+  if (isInline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { className: "px-1 py-0.5 rounded border border-gray-200 text-gray-800 text-sm", children: typeof children === "string" ? children : children.props.children });
+  }
+  const [isCopied, setIsCopied] = (0, import_react7.useState)(false);
+  const match = className.match(/language-([\w-]+)/);
+  const language = match?.[1];
   const handleCopy = () => {
-    navigator.clipboard.writeText(code);
-    import_react_toast_msg2.toast.success("Copied to clipboard!");
-    setCopied(true);
+    navigator.clipboard.writeText(rawText);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2e3);
   };
-  (0, import_react7.useEffect)(() => {
-    if (copied) {
-      const timeout = setTimeout(() => setCopied(false), 2e3);
-      return () => clearTimeout(timeout);
-    }
-  }, [copied]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "max-w-2xl overflow-hidden rounded-lg text-sm text-gray-800 border border-gray-200/80 mt-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center bg-gray-50 justify-between border-b border-gray-200/80", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-gray-400 p-4", children: title || language }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        "button",
-        {
-          onClick: handleCopy,
-          className: "rounded cursor-pointer aspect-square p-2 m-2 text-xs hover:bg-gray-200 transition",
-          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.CopyIcon, { className: "size-4" })
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-gray-400 p-4", children: filename || language }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { onClick: handleCopy, className: "rounded cursor-pointer aspect-square p-2 m-2 text-xs hover:bg-gray-200 transition", children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.CopyIcon, { className: "size-4" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_prism_react_renderer.Highlight, { code, language, theme: import_prism_react_renderer.themes.nightOwlLight, children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pre", { className: "p-4 font-mono whitespace-pre scrollbar-x overflow-x-auto", style, children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { ...getTokenProps({ token }) }, key)) }, i)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pre", { className: "p-4 font-mono whitespace-pre scrollbar-x overflow-x-auto", children })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -849,9 +834,6 @@ function DocstraCodeBlock(props) {
   DocstraHeader,
   DocstraPage,
   DocstraProvider,
-  DocstraSearchBox,
-  DocstraSidebar,
-  DocstraTOC,
   useDocstra
 });
 //# sourceMappingURL=index.js.map