react-docs-module 0.1.0

package/documentation-layout.tsx

@@ -0,0 +1,99 @@
+import { DocsSidebar } from "./docs-sidebar";
+import { TableOfContents } from "./table-of-contents";
+import { Search } from "./search";
+import { DocPagination } from "./doc-pagination";
+import { ReactDocsConfig } from "./config";
+import { DocsThemeProvider } from "./theme-context";
+import { getDocsSidebar } from "./util";
+
+interface Props {
+  config: ReactDocsConfig;
+  navigation: any;
+  children: React.ReactNode;
+  currentPath: string;
+  headings: {
+    id: string;
+    text: string;
+    level: number;
+  }[];
+}
+
+export function DocumentationLayout({
+  config,
+  navigation,
+  children,
+  currentPath,
+  headings,
+}: Props) {
+  // Get docs configuration for theming
+  const { config: docsConfig } = getDocsSidebar(config);
+  
+  // Find current page and get prev/next
+  const allPages = navigation.flatMap((section: any) => section.pages);
+  const currentPageIndex = allPages.findIndex(
+    (page: any) => config.basePath + `/${page.slug}` === currentPath
+  );
+  const prevPage =
+    currentPageIndex > 0 ? allPages[currentPageIndex - 1] : undefined;
+  const nextPage =
+    currentPageIndex < allPages.length - 1
+      ? allPages[currentPageIndex + 1]
+      : undefined;
+
+  return (
+    <DocsThemeProvider config={docsConfig}>
+    <div className="max-w-screen-xl mx-auto px-4">
+      <div className="flex gap-8">
+        {/* Left Sidebar */}
+        <div className="w-64 flex-shrink-0 hidden md:block">
+          <div className="sticky top-0">
+            <div className="py-4">
+              <DocsSidebar
+                config={config}
+                navigation={navigation}
+                currentPath={currentPath}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 min-w-0">
+          {/* Sticky Search Container */}
+          <div className="sticky top-0 z-50 bg-gray-900/95 border-b border-gray-800">
+            <div className="py-4">
+              <div className="flex items-center gap-1">
+                <div className="md:hidden">
+                  <DocsSidebar
+                    config={config}
+                    navigation={navigation}
+                    currentPath={currentPath}
+                  />
+                </div>
+                <div className="flex-1 md:max-w-2xl md:mx-auto">
+                  <Search config={config} />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <main className="py-8 max-w-2xl mx-auto">
+            <div className="relative z-0">
+              {children}
+              <DocPagination config={config} prev={prevPage} next={nextPage} />
+            </div>
+          </main>
+        </div>
+
+        {/* Right Sidebar */}
+        <div className="w-64 flex-shrink-0 hidden lg:block">
+          <div className="sticky top-0">
+            <div className="py-4">
+              <TableOfContents headings={headings} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </DocsThemeProvider>
+  );
+}

package/heading.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { useState } from "react";
+import { cn } from "./cn";
+import React from "react";
+
+interface HeadingProps {
+  level: 1 | 2 | 3;
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Heading({ level, id, children, className }: HeadingProps) {
+  const [copied, setCopied] = useState(false);
+  const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
+
+  const copyLink = () => {
+    const url = `${window.location.origin}${window.location.pathname}#${id}`;
+    navigator.clipboard.writeText(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Tag
+      id={id}
+      className={cn(
+        "group relative flex items-center scroll-mt-24",
+        level === 1 && "text-3xl font-medium mb-6 mt-6",
+        level === 2 && "text-2xl font-medium mb-4 mt-8",
+        level === 3 && "text-lg font-medium mb-4 mt-6",
+        className
+      )}
+    >
+      <a href={`#${id}`} className="no-underline">
+        {children}
+      </a>
+      <button
+        onClick={copyLink}
+        className="invisible ml-2 group-hover:visible"
+        aria-label="Copy link to heading"
+      >
+        {copied ? (
+          <span className="text-green-500 text-sm">✓</span>
+        ) : (
+          <svg
+            className="w-5 h-5 text-gray-400 hover:text-white"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+            />
+          </svg>
+        )}
+      </button>
+    </Tag>
+  );
+} 

package/index.ts

@@ -0,0 +1,28 @@
+export type { ReactDocsConfig, ReactDocsConfigOptions } from "./config";
+export { createReactDocsConfig } from "./config";
+
+export { getDocsSidebar } from "./util";
+export type { DocsJsonConfig } from "./util";
+export { getAllDocs, getAllDocsContent, getDocBySlug } from "./mdx";
+
+// Search functionality
+export { buildSearchIndex } from "./search-index";
+export { Search } from "./search";
+
+// Chat API
+export { streamDocsChatResponse } from "./chat-api";
+export type { ModelProvider, Message, FinishResult } from "./chat-api";
+
+// Page components and functions
+export { generateDocsMetadata, generateDocsStaticParams, DocsPage } from "./docs-page";
+export { DocsIndex } from "./docs-index";
+
+// Layout components
+export { DocumentationLayout } from "./documentation-layout";
+export { DocsSidebar } from "./docs-sidebar";
+export { TableOfContents } from "./table-of-contents";
+export { DocPagination } from "./doc-pagination";
+
+// Theme context
+export { DocsThemeProvider, useDocsTheme, useDocsColors } from "./theme-context";
+export type { ThemeColors, DocsTheme } from "./theme-context";

package/mdx/callouts.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export function Info({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-blue-900/30 border border-blue-500/20 rounded-lg p-3 my-3">
+      <div className="flex gap-2 items-center text-blue-400 mb-1.5">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1-3V7H7v6h2zM8 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
+        </svg>
+        <span className="font-medium">Info</span>
+      </div>
+      <div className="text-gray-300 [&>p]:m-0">{children}</div>
+    </div>
+  );
+}
+
+export function Warning({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-yellow-900/30 border border-yellow-500/20 rounded-lg p-3 my-3">
+      <div className="flex gap-2 items-center text-yellow-400 mb-1.5">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
+        </svg>
+        <span className="font-medium">Warning</span>
+      </div>
+      <div className="text-gray-300 [&>p]:m-0">{children}</div>
+    </div>
+  );
+} 

package/mdx/code-block.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { useState } from "react";
+import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter";
+const SyntaxHighlighter = Prism as any as React.FC<SyntaxHighlighterProps>;
+
+interface CodeBlockProps {
+  children: string;
+  className?: string;
+  inline?: boolean;
+}
+
+export function CodeBlock({ children, className, inline }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  if (inline) {
+    return (
+      <code className="bg-gray-800/50 px-1.5 py-0.5 rounded text-sm font-mono">
+        {children}
+      </code>
+    );
+  }
+
+  const language = className?.replace("language-", "") || "text";
+
+  const copyCode = () => {
+    navigator.clipboard.writeText(String(children));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div
+      className="relative bg-gray-800/50 rounded-lg overflow-x-auto w-full my-4 group"
+      style={{ maxWidth: "100%" }}
+    >
+      <button
+        onClick={copyCode}
+        className="absolute right-2 top-2 p-2 rounded-md bg-gray-700/50 invisible group-hover:visible hover:bg-gray-700 transition-colors"
+        aria-label="Copy code"
+      >
+        {copied ? (
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="text-green-500"
+          >
+            <path d="M20 6L9 17l-5-5" />
+          </svg>
+        ) : (
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="text-gray-400"
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        )}
+      </button>
+      <SyntaxHighlighter
+        language={language}
+        style={vscDarkPlus}
+        customStyle={{
+          margin: 0,
+          background: "transparent",
+          fontSize: "1.1rem",
+          lineHeight: "1.4",
+          padding: "1.5rem",
+          borderRadius: "0.5rem",
+          maxWidth: "100%",
+          overflowX: "auto",
+        }}
+        wrapLongLines={false}
+      >
+        {children}
+      </SyntaxHighlighter>
+    </div>
+  );
+}

package/mdx/components.tsx

@@ -0,0 +1,55 @@
+import { Heading } from "../heading";
+import { Info, Warning } from "./callouts";
+import { CodeBlock } from "./code-block";
+import { slugify } from "../cn";
+import { HTMLAttributes } from "react";
+import Image from "next/image";
+
+export const mdxComponents = {
+  Info,
+  Warning,
+  h1: ({ children, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={1} id={slugify(String(children))} {...props}>
+      {children}
+    </Heading>
+  ),
+  h2: ({ children, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={2} id={slugify(String(children))} {...props}>
+      {children}
+    </Heading>
+  ),
+  h3: ({ children, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={3} id={slugify(String(children))} {...props}>
+      {children}
+    </Heading>
+  ),
+  pre: (props: any) => <CodeBlock {...props.children.props} />,
+  code: (props: HTMLAttributes<HTMLElement>) => (
+    <code
+      {...props}
+      className={`${props.className || ""
+        } bg-gray-800/50 px-1.5 py-0.5 rounded text-sm font-mono`}
+    />
+  ),
+  img: ({
+    src,
+    alt,
+    width: _width,
+    height: _height,
+    ...props
+  }: React.ImgHTMLAttributes<HTMLImageElement>) => {
+    if (!src) return null;
+    return (
+      <Image
+        src={src as string}
+        alt={alt || ""}
+        width={0}
+        height={0}
+        sizes="100vw"
+        style={{ width: "100%", height: "auto" }}
+        className="max-w-[400px] aspect-auto mx-auto rounded-lg"
+        {...props}
+      />
+    );
+  },
+};

package/mdx.ts

@@ -0,0 +1,138 @@
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { mdxComponents } from "./mdx/components";
+import { MDXComponents } from "mdx/types";
+import { ReactDocsConfig } from "./config";
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+function slugify(str: string) {
+  return String(str)
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+function extractHeadings(source: string): Heading[] {
+  const headings: Heading[] = [];
+  const lines = source.split("\n");
+  let inCodeBlock = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Check for code block delimiters
+    if (line.trim().startsWith("```")) {
+      inCodeBlock = !inCodeBlock;
+      continue;
+    }
+
+    // Skip if we're inside a code block
+    if (inCodeBlock) continue;
+
+    // Match headings, but only if they're not inside a code block
+    const headingMatch = line.match(/^(#{1,3})\s+(.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const text = headingMatch[2];
+      const id = slugify(text);
+
+      headings.push({ level, text, id });
+    }
+  }
+
+  return headings;
+}
+
+export async function getDocBySlug(docsConfig: ReactDocsConfig, slug: string) {
+  const directory = path.join(process.cwd(), docsConfig.contentPath);
+  const fullPath = path.join(directory, `${slug}.mdx`);
+  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const { data: frontmatter, content: source } = matter(fileContents);
+  const headings = extractHeadings(source);
+
+  return {
+    frontmatter,
+    content: await MDXRemote({
+      source,
+      components: mdxComponents as MDXComponents,
+    }),
+    headings,
+  };
+}
+
+export function getAllDocs(docsConfig: ReactDocsConfig) {
+  const docs: { slug: string; frontmatter: any }[] = [];
+
+  function traverseDirectory(currentPath: string, baseDir: string) {
+    const files = fs.readdirSync(currentPath);
+
+    for (const file of files) {
+      const fullPath = path.join(currentPath, file);
+      const stat = fs.statSync(fullPath);
+
+      if (stat.isDirectory()) {
+        traverseDirectory(fullPath, baseDir);
+      } else if (file.endsWith(".mdx")) {
+        const relativePath = path.relative(baseDir, fullPath);
+        const slug = relativePath.replace(/\.mdx$/, "");
+        const fileContents = fs.readFileSync(fullPath, "utf8");
+        const { data: frontmatter } = matter(fileContents);
+
+        docs.push({
+          slug,
+          frontmatter,
+        });
+      }
+    }
+  }
+
+  const docsDirectory = path.join(process.cwd(), docsConfig.contentPath);
+  traverseDirectory(docsDirectory, docsDirectory);
+  return docs;
+}
+
+// Cache for docs content
+const docsContentCache = new Map<string, string>();
+
+export function getAllDocsContent(docsConfig: ReactDocsConfig): string {
+  const cacheKey = docsConfig.contentPath;
+  
+  if (docsContentCache.has(cacheKey)) {
+    return docsContentCache.get(cacheKey)!;
+  }
+
+  const content: string[] = [];
+
+  function traverseDirectory(currentPath: string) {
+    const files = fs.readdirSync(currentPath);
+
+    for (const file of files) {
+      const fullPath = path.join(currentPath, file);
+      const stat = fs.statSync(fullPath);
+
+      if (stat.isDirectory()) {
+        traverseDirectory(fullPath);
+      } else if (file.endsWith(".mdx")) {
+        const fileContents = fs.readFileSync(fullPath, "utf8");
+        const { content: mdxContent } = matter(fileContents);
+        content.push(mdxContent);
+      }
+    }
+  }
+
+  const docsDirectory = path.join(process.cwd(), docsConfig.contentPath);
+  traverseDirectory(docsDirectory);
+  
+  const joinedContent = content.join('\n\n---\n\n');
+  docsContentCache.set(cacheKey, joinedContent);
+  return joinedContent;
+}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "react-docs-module",
+  "version": "0.1.0",
+  "description": "Embeddable documentation page with search and AI chat",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "development": "./index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./config": {
+      "development": "./config.ts",
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js"
+    },
+    "./search": {
+      "development": "./search.tsx",
+      "types": "./dist/search.d.ts",
+      "import": "./dist/search.js"
+    },
+    "./chat-api": {
+      "development": "./chat-api.ts",
+      "types": "./dist/chat-api.d.ts",
+      "import": "./dist/chat-api.js"
+    },
+    "./mdx": {
+      "development": "./mdx.ts",
+      "types": "./dist/mdx.d.ts",
+      "import": "./dist/mdx.js"
+    },
+    "./utils": {
+      "development": "./util.ts",
+      "types": "./dist/util.d.ts",
+      "import": "./dist/util.js"
+    }
+  },
+  "files": [
+    "dist",
+    "*.ts",
+    "*.tsx",
+    "mdx/",
+    "ui/",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@ai-sdk/anthropic": "^2.0.0",
+    "@ai-sdk/groq": "^1.2.9",
+    "@ai-sdk/openai": "^2.0.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.0",
+    "ai": "^4.3.19",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
+    "lucide-react": "^0.456.0",
+    "next-mdx-remote": "^5.0.0",
+    "react-markdown": "^9.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/node": "^22.10.2",
+    "typescript": "^5.6.3"
+  },
+  "keywords": [
+    "documentation",
+    "mdx",
+    "search",
+    "ai-chat",
+    "react",
+    "typescript",
+    "mintlify"
+  ],
+  "author": "Ivan Chebykin",
+  "license": "MIT",
+  "readme": "README.md",
+  "homepage": "https://github.com/sourcewizard-ai/react-docs-module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sourcewizard-ai/react-docs-module.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sourcewizard-ai/react-docs-module/issues"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit --skipLibCheck"
+  }
+}

package/search-index.ts

@@ -0,0 +1,52 @@
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+import { ReactDocsConfig } from "./config";
+
+export interface SearchResult {
+  title: string;
+  content: string;
+  url: string;
+  snippet?: string;
+  score?: number;
+}
+
+export function buildSearchIndex(config: ReactDocsConfig): SearchResult[] {
+  const docsDirectory = path.join(process.cwd(), config.contentPath);
+  const searchIndex: SearchResult[] = [];
+
+  function processDirectory(dir: string, baseUrl: string = "") {
+    const items = fs.readdirSync(dir);
+
+    items.forEach((item) => {
+      const fullPath = path.join(dir, item);
+      const stat = fs.statSync(fullPath);
+
+      if (stat.isDirectory()) {
+        processDirectory(fullPath, `${baseUrl}${item}/`);
+      } else if (item.endsWith(".mdx")) {
+        const fileContents = fs.readFileSync(fullPath, "utf8");
+        const { data: frontmatter, content } = matter(fileContents);
+        const slug = item.replace(/\.mdx$/, "");
+        const url = config.basePath + `/${baseUrl}${slug}`;
+
+        // Clean up the content by removing markdown syntax
+        const cleanContent = content
+          .replace(/```[\s\S]*?```/g, "") // Remove code blocks
+          .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // Remove markdown links but keep text
+          .replace(/[#*`_]/g, "") // Remove markdown syntax
+          .replace(/\n+/g, " ") // Replace newlines with spaces
+          .trim();
+
+        searchIndex.push({
+          title: frontmatter.title || slug,
+          content: cleanContent,
+          url,
+        });
+      }
+    });
+  }
+
+  processDirectory(docsDirectory);
+  return searchIndex;
+}