docstra 1.4.0 → 1.4.6

package/README.md

@@ -25,19 +25,50 @@ npm install docstra
 
 ```ts
 // docstra.config.ts
+import { defineDocstraConfig } from 'docstra/config';
+
 export default defineDocstraConfig({
-    siteName: 'Docstra Site',
-    githubRepo: 'https://github.com/sudhucodes/test',
+    siteName: 'Docstra',
+    githubRepo: 'https://github.com/sudhucodes/docstra',
     editOnGithub: true,
-    formSyncFormID: 'FORM_ID',
+    feedback: {
+        enabled: true,
+        formSyncFormID: 'FORM_ID'
+    },
     navbar: {
         logo: {
-            link: '/docs'
+            link: '/docs',
+            src: '/logo.svg',
+            alt: 'Logo',
+            className: 'h-9.5 w-auto'
         },
-        links: [{ name: 'Guides', href: '/docs/guides' }]
+        links: [
+            { name: 'Guides', href: '/docs/guides' },
+            { name: 'Examples', href: '/docs/examples' }
+        ]
     },
     sidebar: {
-        // sidebar links
+        links: [
+            {
+                section: 'Introduction',
+                items: [
+                    {
+                        name: 'Overview',
+                        href: '/docs',
+                        icon: 'NotebookPenIcon'
+                    },
+                    {
+                        name: 'Quick Start',
+                        href: '/docs/quick-start',
+                        icon: 'RocketIcon'
+                    }
+                ]
+            },
+            {
+                section: 'Tailwind Setup',
+                items: [{ name: 'Installation', href: '/docs/setup/installation' }]
+            }
+        ]
     }
 });
 ```

package/dist/client/index.d.mts

@@ -23,7 +23,6 @@ interface DocstraConfig {
         formSyncFormID?: string;
         watermark?: boolean;
     };
-    formSyncFormID?: string;
     githubRepo?: string;
     navbar?: {
         logo?: {
@@ -71,10 +70,7 @@ interface Props {
 }
 declare function DocstraBody({ children }: Props): react_jsx_runtime.JSX.Element;
 
-declare function DocstraTOC({ mdxFilePath, rawMdxContent }: {
-    mdxFilePath: string;
-    rawMdxContent: string;
-}): react_jsx_runtime.JSX.Element;
+declare function DocstraTOC(): react_jsx_runtime.JSX.Element;
 
 declare function DocstraCodeBlock(props: any): react_jsx_runtime.JSX.Element;
 

package/dist/client/index.d.ts

@@ -23,7 +23,6 @@ interface DocstraConfig {
         formSyncFormID?: string;
         watermark?: boolean;
     };
-    formSyncFormID?: string;
     githubRepo?: string;
     navbar?: {
         logo?: {
@@ -71,10 +70,7 @@ interface Props {
 }
 declare function DocstraBody({ children }: Props): react_jsx_runtime.JSX.Element;
 
-declare function DocstraTOC({ mdxFilePath, rawMdxContent }: {
-    mdxFilePath: string;
-    rawMdxContent: string;
-}): react_jsx_runtime.JSX.Element;
+declare function DocstraTOC(): react_jsx_runtime.JSX.Element;
 
 declare function DocstraCodeBlock(props: any): react_jsx_runtime.JSX.Element;
 

package/dist/client/index.js

@@ -107,7 +107,7 @@ function DocstraSearchBox() {
                   {
                     className: "w-full bg-transparent h-full outline-none text-gray-400 placeholder:text-gray-400",
                     type: "text",
-                    placeholder: "Search components",
+                    placeholder: "Search docs...",
                     spellCheck: "false",
                     autoFocus: true,
                     value: searchQuery,
@@ -587,7 +587,7 @@ function DocstraPagination() {
       import_link5.default,
       {
         href: prev.href,
-        className: "flex flex-col items-start gap-2 hover:bg-gray-100 py-3 md:min-w-52 pl-4 pr-10 rounded-lg text-sm",
+        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",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-500", children: "Previous" }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "flex items-center font-medium", children: [
@@ -601,7 +601,7 @@ function DocstraPagination() {
       import_link5.default,
       {
         href: next.href,
-        className: "flex flex-col items-end gap-2 hover:bg-gray-100 py-3 pr-4 md:min-w-52 pl-10 rounded-lg text-sm",
+        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",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-500", children: "Next" }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "flex items-center font-medium", children: [
@@ -663,13 +663,14 @@ function extractHeadingsFromMdx(raw) {
 
 // src/client/docstra-toc.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function DocstraTOC({ mdxFilePath, rawMdxContent }) {
+function DocstraTOC() {
   const [headings, setHeadings] = (0, import_react6.useState)([]);
   const [activeId, setActiveId] = (0, import_react6.useState)(null);
   const [scrollDir, setScrollDir] = (0, import_react6.useState)("down");
   const [isScrolled, setIsScrolled] = (0, import_react6.useState)(false);
   const [isManualClick, setIsManualClick] = (0, import_react6.useState)(false);
-  const { docstraConfig } = useDocstra();
+  const { docstraConfig, mdxData } = useDocstra();
+  const { mdxFilePath, rawMdxContent } = mdxData;
   const lastScrollY = (0, import_react6.useRef)(0);
   const observerRef = (0, import_react6.useRef)(null);
   const pathname = (0, import_navigation4.usePathname)();
@@ -807,12 +808,8 @@ var import_lucide_react10 = require("lucide-react");
 var import_react_toast_msg3 = require("react-toast-msg");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function DocstraCodeBlock(props) {
-  const { className, children } = props.children?.props || props;
-  if (!className || !className.startsWith("language-")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", { className: "px-1 py-0.5 rounded border border-gray-200 text-gray-800 text-sm", children });
-  }
-  const language = className.replace("language-", "") || "text";
-  const code = typeof children === "string" ? children.trim() : Array.isArray(children) ? children.join("").trim() : "";
+  const { language, title, children } = props;
+  const code = typeof children === "string" ? children.trim() : children?.props?.children?.toString()?.trim() || "";
   const [copied, setCopied] = (0, import_react7.useState)(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(code);
@@ -827,7 +824,7 @@ function DocstraCodeBlock(props) {
   }, [copied]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsxs)("div", { className: "flex items-center bg-gray-50 justify-between border-b border-gray-200/80", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-gray-400 p-4", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-gray-400 p-4", children: title || language }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {

package/dist/client/index.mjs

@@ -65,7 +65,7 @@ function DocstraSearchBox() {
                   {
                     className: "w-full bg-transparent h-full outline-none text-gray-400 placeholder:text-gray-400",
                     type: "text",
-                    placeholder: "Search components",
+                    placeholder: "Search docs...",
                     spellCheck: "false",
                     autoFocus: true,
                     value: searchQuery,
@@ -545,7 +545,7 @@ function DocstraPagination() {
       Link2,
       {
         href: prev.href,
-        className: "flex flex-col items-start gap-2 hover:bg-gray-100 py-3 md:min-w-52 pl-4 pr-10 rounded-lg text-sm",
+        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",
         children: [
           /* @__PURE__ */ jsx13("span", { className: "text-gray-500", children: "Previous" }),
           /* @__PURE__ */ jsxs10("p", { className: "flex items-center font-medium", children: [
@@ -559,7 +559,7 @@ function DocstraPagination() {
       Link2,
       {
         href: next.href,
-        className: "flex flex-col items-end gap-2 hover:bg-gray-100 py-3 pr-4 md:min-w-52 pl-10 rounded-lg text-sm",
+        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",
         children: [
           /* @__PURE__ */ jsx13("span", { className: "text-gray-500", children: "Next" }),
           /* @__PURE__ */ jsxs10("p", { className: "flex items-center font-medium", children: [
@@ -621,13 +621,14 @@ function extractHeadingsFromMdx(raw) {
 
 // src/client/docstra-toc.tsx
 import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-function DocstraTOC({ mdxFilePath, rawMdxContent }) {
+function DocstraTOC() {
   const [headings, setHeadings] = useState5([]);
   const [activeId, setActiveId] = useState5(null);
   const [scrollDir, setScrollDir] = useState5("down");
   const [isScrolled, setIsScrolled] = useState5(false);
   const [isManualClick, setIsManualClick] = useState5(false);
-  const { docstraConfig } = useDocstra();
+  const { docstraConfig, mdxData } = useDocstra();
+  const { mdxFilePath, rawMdxContent } = mdxData;
   const lastScrollY = useRef(0);
   const observerRef = useRef(null);
   const pathname = usePathname4();
@@ -765,12 +766,8 @@ import { CheckIcon as CheckIcon2, CopyIcon as CopyIcon2 } from "lucide-react";
 import { toast as toast2 } from "react-toast-msg";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function DocstraCodeBlock(props) {
-  const { className, children } = props.children?.props || props;
-  if (!className || !className.startsWith("language-")) {
-    return /* @__PURE__ */ jsx16("code", { className: "px-1 py-0.5 rounded border border-gray-200 text-gray-800 text-sm", children });
-  }
-  const language = className.replace("language-", "") || "text";
-  const code = typeof children === "string" ? children.trim() : Array.isArray(children) ? children.join("").trim() : "";
+  const { language, title, children } = props;
+  const code = typeof children === "string" ? children.trim() : children?.props?.children?.toString()?.trim() || "";
   const [copied, setCopied] = useState6(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(code);
@@ -785,7 +782,7 @@ function DocstraCodeBlock(props) {
   }, [copied]);
   return /* @__PURE__ */ jsxs13("div", { className: "max-w-2xl overflow-hidden rounded-lg text-sm text-gray-800 border border-gray-200/80 mt-4", children: [
     /* @__PURE__ */ jsxs13("div", { className: "flex items-center bg-gray-50 justify-between border-b border-gray-200/80", children: [
-      /* @__PURE__ */ jsx16("div", { className: "text-xs text-gray-400 p-4", children: language }),
+      /* @__PURE__ */ jsx16("span", { className: "text-xs text-gray-400 p-4", children: title || language }),
       /* @__PURE__ */ jsx16(
         "button",
         {

package/dist/server/index.d.mts

@@ -8,7 +8,6 @@ interface DocstraConfig {
         formSyncFormID?: string;
         watermark?: boolean;
     };
-    formSyncFormID?: string;
     githubRepo?: string;
     navbar?: {
         logo?: {
@@ -54,7 +53,7 @@ declare function getFileContents({ slug, CONTENT_DIR }: {
 
 declare function defineDocstraConfig<T extends DocstraConfig>(config: T): T;
 
-declare function DocstraMDXCompiler({ mdxContent, components }: {
+declare function DocstraMDXCompiler({ mdxContent, components, }: {
     mdxContent: string;
     components?: Record<string, any>;
 }): react_jsx_runtime.JSX.Element;

package/dist/server/index.d.ts

@@ -8,7 +8,6 @@ interface DocstraConfig {
         formSyncFormID?: string;
         watermark?: boolean;
     };
-    formSyncFormID?: string;
     githubRepo?: string;
     navbar?: {
         logo?: {
@@ -54,7 +53,7 @@ declare function getFileContents({ slug, CONTENT_DIR }: {
 
 declare function defineDocstraConfig<T extends DocstraConfig>(config: T): T;
 
-declare function DocstraMDXCompiler({ mdxContent, components }: {
+declare function DocstraMDXCompiler({ mdxContent, components, }: {
     mdxContent: string;
     components?: Record<string, any>;
 }): react_jsx_runtime.JSX.Element;

package/dist/server/index.js

@@ -81,9 +81,6 @@ function defineDocstraConfig(config) {
 // src/server/mdx-compiler.tsx
 var import_rsc = require("next-mdx-remote/rsc");
 
-// src/client/mdx-components.tsx
-var import_link = __toESM(require("next/link"));
-
 // src/client/create-heading.tsx
 var import_lucide_react = require("lucide-react");
 
@@ -134,39 +131,79 @@ function CreateHeading({ children, level }) {
   );
 }
 
-// src/client/mdx-components.tsx
+// src/client/link.tsx
+var import_link = __toESM(require("next/link"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function Link({ href, children, className, onNavigate, ...props }) {
+  if (href.startsWith("http")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href, className, ...props, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_link.default, { href, className, onNavigate, ...props, "aria-label": "Ns", children });
+}
+
+// src/client/mdx-components.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultMdxComponents = {
-  h1: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: props.children }),
-  h2: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CreateHeading, { ...props, level: 2 }),
-  h3: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CreateHeading, { ...props, level: 3 }),
-  h4: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CreateHeading, { ...props, level: 4 }),
-  h5: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CreateHeading, { ...props, level: 5 }),
-  p: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "my-5", children: props.children }),
-  hr: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: "my-10 border-gray-200" }),
-  a: (props) => props.href.startsWith("/") ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_link.default, { className: "underline underline-offset-4", href: props.href, children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "underline underline-offset-4", href: props.href, children: props.children }),
-  ul: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "list-['-'] pl-4 space-y-2", children: props.children }),
-  li: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: "mb-2 pl-3 text-gray-700", children: props.children }),
-  ol: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "list-decimal pl-4 space-y-2", children: props.children }),
-  blockquote: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("blockquote", { className: "border-l-4 border-gray-200 pl-4 my-8 text-gray-700", children: props.children })
+  h1: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: props.children }),
+  h2: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CreateHeading, { ...props, level: 2 }),
+  h3: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CreateHeading, { ...props, level: 3 }),
+  h4: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CreateHeading, { ...props, level: 4 }),
+  h5: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CreateHeading, { ...props, level: 5 }),
+  code: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "px-1 py-0.5 rounded border border-gray-200 text-gray-800 text-sm", children: props.children }),
+  p: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "my-5", children: props.children }),
+  hr: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: "my-10 border-gray-200" }),
+  a: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Link, { href: props.href, children: props.children }),
+  ul: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "list-['-'] pl-4 space-y-2", children: props.children }),
+  li: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "mb-2 pl-3 text-gray-700", children: props.children }),
+  ol: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { className: "list-decimal pl-4 space-y-2", children: props.children }),
+  blockquote: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { className: "border-l-4 border-gray-200 pl-4 my-8 text-gray-700", children: props.children })
 };
 
+// src/plugins/rehype-code-meta.ts
+var import_unist_util_visit = require("unist-util-visit");
+function rehypeCodeMetaProps() {
+  return (tree) => {
+    (0, import_unist_util_visit.visit)(tree, "element", (node) => {
+      if (node.tagName !== "pre") return;
+      const code = node.children?.[0];
+      if (!code || code.tagName !== "code") return;
+      const className = code.properties?.className?.[0];
+      const language = className?.replace("language-", "");
+      const meta = code.data?.meta || "";
+      const metaProps = {};
+      meta.replace(
+        /(\w+)=["']?([^"'\s]+)["']?/g,
+        (_match, key, value) => {
+          metaProps[key] = value;
+          return "";
+        }
+      );
+      node.properties = { ...node.properties || {}, language, ...metaProps };
+    });
+  };
+}
+
 // src/server/mdx-compiler.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function DocstraMDXCompiler({
   mdxContent,
   components = {}
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_rsc.MDXRemote,
     {
       source: mdxContent,
       components: {
         ...defaultMdxComponents,
         ...components
+      },
+      options: {
+        mdxOptions: {
+          rehypePlugins: [rehypeCodeMetaProps]
+        }
       }
     }
-  ) });
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/server/index.mjs

@@ -42,9 +42,6 @@ function defineDocstraConfig(config) {
 // src/server/mdx-compiler.tsx
 import { MDXRemote } from "next-mdx-remote/rsc";
 
-// src/client/mdx-components.tsx
-import Link from "next/link";
-
 // src/client/create-heading.tsx
 import { LinkIcon } from "lucide-react";
 
@@ -95,39 +92,79 @@ function CreateHeading({ children, level }) {
   );
 }
 
-// src/client/mdx-components.tsx
+// src/client/link.tsx
+import LinkComponent from "next/link";
 import { jsx as jsx2 } from "react/jsx-runtime";
+function Link({ href, children, className, onNavigate, ...props }) {
+  if (href.startsWith("http")) {
+    return /* @__PURE__ */ jsx2("a", { href, className, ...props, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return /* @__PURE__ */ jsx2(LinkComponent, { href, className, onNavigate, ...props, "aria-label": "Ns", children });
+}
+
+// src/client/mdx-components.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 var defaultMdxComponents = {
-  h1: (props) => /* @__PURE__ */ jsx2("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: props.children }),
-  h2: (props) => /* @__PURE__ */ jsx2(CreateHeading, { ...props, level: 2 }),
-  h3: (props) => /* @__PURE__ */ jsx2(CreateHeading, { ...props, level: 3 }),
-  h4: (props) => /* @__PURE__ */ jsx2(CreateHeading, { ...props, level: 4 }),
-  h5: (props) => /* @__PURE__ */ jsx2(CreateHeading, { ...props, level: 5 }),
-  p: (props) => /* @__PURE__ */ jsx2("p", { className: "my-5", children: props.children }),
-  hr: () => /* @__PURE__ */ jsx2("hr", { className: "my-10 border-gray-200" }),
-  a: (props) => props.href.startsWith("/") ? /* @__PURE__ */ jsx2(Link, { className: "underline underline-offset-4", href: props.href, children: props.children }) : /* @__PURE__ */ jsx2("a", { className: "underline underline-offset-4", href: props.href, children: props.children }),
-  ul: (props) => /* @__PURE__ */ jsx2("ul", { className: "list-['-'] pl-4 space-y-2", children: props.children }),
-  li: (props) => /* @__PURE__ */ jsx2("li", { className: "mb-2 pl-3 text-gray-700", children: props.children }),
-  ol: (props) => /* @__PURE__ */ jsx2("ol", { className: "list-decimal pl-4 space-y-2", children: props.children }),
-  blockquote: (props) => /* @__PURE__ */ jsx2("blockquote", { className: "border-l-4 border-gray-200 pl-4 my-8 text-gray-700", children: props.children })
+  h1: (props) => /* @__PURE__ */ jsx3("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: props.children }),
+  h2: (props) => /* @__PURE__ */ jsx3(CreateHeading, { ...props, level: 2 }),
+  h3: (props) => /* @__PURE__ */ jsx3(CreateHeading, { ...props, level: 3 }),
+  h4: (props) => /* @__PURE__ */ jsx3(CreateHeading, { ...props, level: 4 }),
+  h5: (props) => /* @__PURE__ */ jsx3(CreateHeading, { ...props, level: 5 }),
+  code: (props) => /* @__PURE__ */ jsx3("code", { className: "px-1 py-0.5 rounded border border-gray-200 text-gray-800 text-sm", children: props.children }),
+  p: (props) => /* @__PURE__ */ jsx3("p", { className: "my-5", children: props.children }),
+  hr: () => /* @__PURE__ */ jsx3("hr", { className: "my-10 border-gray-200" }),
+  a: (props) => /* @__PURE__ */ jsx3(Link, { href: props.href, children: props.children }),
+  ul: (props) => /* @__PURE__ */ jsx3("ul", { className: "list-['-'] pl-4 space-y-2", children: props.children }),
+  li: (props) => /* @__PURE__ */ jsx3("li", { className: "mb-2 pl-3 text-gray-700", children: props.children }),
+  ol: (props) => /* @__PURE__ */ jsx3("ol", { className: "list-decimal pl-4 space-y-2", children: props.children }),
+  blockquote: (props) => /* @__PURE__ */ jsx3("blockquote", { className: "border-l-4 border-gray-200 pl-4 my-8 text-gray-700", children: props.children })
 };
 
+// src/plugins/rehype-code-meta.ts
+import { visit } from "unist-util-visit";
+function rehypeCodeMetaProps() {
+  return (tree) => {
+    visit(tree, "element", (node) => {
+      if (node.tagName !== "pre") return;
+      const code = node.children?.[0];
+      if (!code || code.tagName !== "code") return;
+      const className = code.properties?.className?.[0];
+      const language = className?.replace("language-", "");
+      const meta = code.data?.meta || "";
+      const metaProps = {};
+      meta.replace(
+        /(\w+)=["']?([^"'\s]+)["']?/g,
+        (_match, key, value) => {
+          metaProps[key] = value;
+          return "";
+        }
+      );
+      node.properties = { ...node.properties || {}, language, ...metaProps };
+    });
+  };
+}
+
 // src/server/mdx-compiler.tsx
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function DocstraMDXCompiler({
   mdxContent,
   components = {}
 }) {
-  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     MDXRemote,
     {
       source: mdxContent,
       components: {
         ...defaultMdxComponents,
         ...components
+      },
+      options: {
+        mdxOptions: {
+          rehypePlugins: [rehypeCodeMetaProps]
+        }
       }
     }
-  ) });
+  );
 }
 export {
   DocstraMDXCompiler,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "docstra",
-    "version": "1.4.0",
-    "description": "A Modern Documentation Framework for Next.js",
+    "version": "1.4.6",
+    "description": "The Modern Documentation Framework for Next.js",
     "keywords": [
         "next",
         "nextjs",
@@ -15,17 +15,19 @@
     "files": [
         "dist"
     ],
-    "types": "./dist/client/index.d.ts",
     "exports": {
         ".": {
+            "types": "./dist/client/index.d.ts",
             "import": "./dist/client/index.mjs",
             "require": "./dist/client/index.js"
         },
         "./server": {
+            "types": "./dist/server/index.d.ts",
             "import": "./dist/server/index.mjs",
             "require": "./dist/server/index.js"
         },
         "./config": {
+            "types": "./dist/server/index.d.ts",
             "import": "./dist/server/index.mjs",
             "require": "./dist/server/index.js"
         },
@@ -38,14 +40,14 @@
         "prettier": "prettier --write src"
     },
     "devDependencies": {
+        "@tailwindcss/cli": "^4.1.17",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.2",
         "prettier": "^3.6.2",
-        "tsup": "^8.5.0",
-        "typescript": "^5.9.3",
         "tailwindcss": "^4.1.17",
-        "@tailwindcss/cli": "^4.1.17"
+        "tsup": "^8.5.0",
+        "typescript": "^5.9.3"
     },
     "dependencies": {
         "clsx": "^2.1.1",
@@ -57,6 +59,7 @@
         "react": "^18 || ^19",
         "react-dom": "^18 || ^19",
         "react-toast-msg": "^2.2.6",
-        "tailwind-merge": "^3.4.0"
+        "tailwind-merge": "^3.4.0",
+        "unist-util-visit": "^5.0.0"
     }
 }