docstra 1.0.1 → 1.1.1

package/README.md

@@ -0,0 +1,43 @@
+# **Docstra**
+
+Docstra is a modern documentation framework for Next.js. It's built with Tailwind CSS and MDX, making it easy to create beautiful and responsive documentation sites.
+
+> Documentation of Docstra is coming soon. Stay tuned!
+
+## Features
+
+- MDX support
+- Custom content directories
+- Works in monorepos
+- Beautiful sidebar + TOC
+- Edit-on-GitHub links
+- Search coming soon
+
+## Install
+
+```bash
+npm install docstra
+```
+
+## Usage
+
+```ts
+// docstra.config.ts
+export default defineDocstraConfig({
+    siteName: 'Docstra Site',
+    githubRepo: 'https://github.com/sudhucodes/test',
+    editOnGithub: true,
+    formSyncFormID: 'FORM_ID',
+    navbar: {
+        logo: {
+            link: '/docs'
+        },
+        links: [{ name: 'Guides', href: '/docs/guides' }]
+    },
+    sidebar: {
+        // sidebar links
+    }
+});
+```
+
+> Created and maintained with 💙 by [SudhuCodes](https://github.com/sudhucodes)

package/dist/client/index.js

@@ -269,7 +269,7 @@ function DocstraSidebar() {
       "aside",
       {
         className: cn(
-          "sticky md:top-18 h-[calc(100svh-72px)] scrollbar-y w-screen z-21 md:w-72 pb-10 text-base md:text-sm shrink-0 border-r border-gray-200 p-4 max-md:fixed bg-white overflow-y-auto transition-all duration-300",
+          "sticky md:top-18 h-[calc(100svh-72px)] scrollbar-y w-screen max-md:rounded-t-lg z-21 md:w-72 pb-10 text-base md:text-sm shrink-0 border-r border-gray-200 p-4 max-md:fixed bg-white overflow-y-auto transition-all duration-300",
           openSidebar ? "top-32" : "top-full"
         ),
         children: [
@@ -277,7 +277,7 @@ function DocstraSidebar() {
             "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.success("Docstra: Search is coming soon!"),
+              onClick: () => import_react_toast_msg2.toast.warning("Search is not available yet!"),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.SearchIcon, { className: "size-4.5" }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Search" }),
@@ -298,7 +298,7 @@ function DocstraSidebar() {
                   href: link.href,
                   onNavigate: () => openSidebar && setOpenSidebar(false),
                   className: cn(
-                    "flex items-center gap-2 text-gray-500 hover:bg-gray-100 py-2 px-2.5 rounded-lg text-sm",
+                    "flex items-center gap-2 text-gray-500 hover:bg-gray-100 py-2 px-2.5 rounded-lg",
                     pathname === link.href && "bg-gray-100 text-gray-800"
                   ),
                   children: [
@@ -664,7 +664,10 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
   const observerRef = (0, import_react6.useRef)(null);
   const pathname = (0, import_navigation5.usePathname)();
   const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra";
-  const githubLink = baseUrlOfGithub + "/edit/main" + mdxFilePath.split("app")[1];
+  const normalized = mdxFilePath.replace(/\\/g, "/");
+  const match = normalized.match(/\/docs\/(.+)$/);
+  const relativePath = match ? match[1] : "";
+  const githubLink = `${baseUrlOfGithub}/edit/main/docs/${relativePath}`;
   (0, import_react6.useEffect)(() => {
     const onScroll = () => {
       const currentY = window.scrollY;

package/dist/client/index.mjs

@@ -227,7 +227,7 @@ function DocstraSidebar() {
       "aside",
       {
         className: cn(
-          "sticky md:top-18 h-[calc(100svh-72px)] scrollbar-y w-screen z-21 md:w-72 pb-10 text-base md:text-sm shrink-0 border-r border-gray-200 p-4 max-md:fixed bg-white overflow-y-auto transition-all duration-300",
+          "sticky md:top-18 h-[calc(100svh-72px)] scrollbar-y w-screen max-md:rounded-t-lg z-21 md:w-72 pb-10 text-base md:text-sm shrink-0 border-r border-gray-200 p-4 max-md:fixed bg-white overflow-y-auto transition-all duration-300",
           openSidebar ? "top-32" : "top-full"
         ),
         children: [
@@ -235,7 +235,7 @@ function DocstraSidebar() {
             "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: () => toast.success("Docstra: Search is coming soon!"),
+              onClick: () => toast.warning("Search is not available yet!"),
               children: [
                 /* @__PURE__ */ jsx5(SearchIcon2, { className: "size-4.5" }),
                 /* @__PURE__ */ jsx5("p", { children: "Search" }),
@@ -256,7 +256,7 @@ function DocstraSidebar() {
                   href: link.href,
                   onNavigate: () => openSidebar && setOpenSidebar(false),
                   className: cn(
-                    "flex items-center gap-2 text-gray-500 hover:bg-gray-100 py-2 px-2.5 rounded-lg text-sm",
+                    "flex items-center gap-2 text-gray-500 hover:bg-gray-100 py-2 px-2.5 rounded-lg",
                     pathname === link.href && "bg-gray-100 text-gray-800"
                   ),
                   children: [
@@ -622,7 +622,10 @@ function DocstraTOC({ mdxFilePath, rawMdxContent }) {
   const observerRef = useRef(null);
   const pathname = usePathname5();
   const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra";
-  const githubLink = baseUrlOfGithub + "/edit/main" + mdxFilePath.split("app")[1];
+  const normalized = mdxFilePath.replace(/\\/g, "/");
+  const match = normalized.match(/\/docs\/(.+)$/);
+  const relativePath = match ? match[1] : "";
+  const githubLink = `${baseUrlOfGithub}/edit/main/docs/${relativePath}`;
   useEffect4(() => {
     const onScroll = () => {
       const currentY = window.scrollY;

package/dist/server/index.d.mts

@@ -38,10 +38,16 @@ interface FileContent {
     mdxFilePath: string;
 }
 
-declare function getFilePath(slug: Slug): string;
-declare function getFileContents(slug: Slug): FileContent;
+declare function getFilePath({ slug, CONTENT_DIR }: {
+    slug: Slug;
+    CONTENT_DIR?: string;
+}): string;
+declare function getFileContents({ slug, CONTENT_DIR }: {
+    slug: Slug;
+    CONTENT_DIR?: string;
+}): FileContent;
 
-declare function defineDocstraConfig(config: DocstraConfig): DocstraConfig;
+declare function defineDocstraConfig<T extends DocstraConfig>(config: T): T;
 
 declare function DocstraMDXCompiler({ mdxContent, components }: {
     mdxContent: string;

package/dist/server/index.d.ts

@@ -38,10 +38,16 @@ interface FileContent {
     mdxFilePath: string;
 }
 
-declare function getFilePath(slug: Slug): string;
-declare function getFileContents(slug: Slug): FileContent;
+declare function getFilePath({ slug, CONTENT_DIR }: {
+    slug: Slug;
+    CONTENT_DIR?: string;
+}): string;
+declare function getFileContents({ slug, CONTENT_DIR }: {
+    slug: Slug;
+    CONTENT_DIR?: string;
+}): FileContent;
 
-declare function defineDocstraConfig(config: DocstraConfig): DocstraConfig;
+declare function defineDocstraConfig<T extends DocstraConfig>(config: T): T;
 
 declare function DocstraMDXCompiler({ mdxContent, components }: {
     mdxContent: string;

package/dist/server/index.js

@@ -41,24 +41,26 @@ module.exports = __toCommonJS(server_exports);
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_gray_matter = __toESM(require("gray-matter"));
-var CONTENT_DIR = import_path.default.join(process.cwd(), "app", "docs", "content");
-function getFilePath(slug) {
+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 possiblePaths = [
-    import_path.default.join(CONTENT_DIR, ...slugArray) + ".mdx",
-    import_path.default.join(CONTENT_DIR, ...slugArray) + ".md",
-    import_path.default.join(CONTENT_DIR, ...slugArray, "index.mdx"),
-    import_path.default.join(CONTENT_DIR, ...slugArray, "index.md")
+    import_path.default.join(DIR, ...slugArray) + ".mdx",
+    import_path.default.join(DIR, ...slugArray) + ".md",
+    import_path.default.join(DIR, ...slugArray, "index.mdx"),
+    import_path.default.join(DIR, ...slugArray, "index.md")
   ];
   for (const filePath of possiblePaths) {
     if (import_fs.default.existsSync(filePath)) {
       return filePath;
     }
   }
-  throw new Error(`\u274C MDX file not found for slug: ${slugArray.join("/")} `);
+  throw new Error(`\u274C MDX file not found in: ${DIR} `);
 }
-function getFileContents(slug) {
-  const filePath = getFilePath(slug);
+function getFileContents({ slug, CONTENT_DIR }) {
+  const filePath = getFilePath({ slug, CONTENT_DIR: CONTENT_DIR || DEFAULT_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

@@ -2,24 +2,26 @@
 import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
-var CONTENT_DIR = path.join(process.cwd(), "app", "docs", "content");
-function getFilePath(slug) {
+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 possiblePaths = [
-    path.join(CONTENT_DIR, ...slugArray) + ".mdx",
-    path.join(CONTENT_DIR, ...slugArray) + ".md",
-    path.join(CONTENT_DIR, ...slugArray, "index.mdx"),
-    path.join(CONTENT_DIR, ...slugArray, "index.md")
+    path.join(DIR, ...slugArray) + ".mdx",
+    path.join(DIR, ...slugArray) + ".md",
+    path.join(DIR, ...slugArray, "index.mdx"),
+    path.join(DIR, ...slugArray, "index.md")
   ];
   for (const filePath of possiblePaths) {
     if (fs.existsSync(filePath)) {
       return filePath;
     }
   }
-  throw new Error(`\u274C MDX file not found for slug: ${slugArray.join("/")} `);
+  throw new Error(`\u274C MDX file not found in: ${DIR} `);
 }
-function getFileContents(slug) {
-  const filePath = getFilePath(slug);
+function getFileContents({ slug, CONTENT_DIR }) {
+  const filePath = getFilePath({ slug, CONTENT_DIR: CONTENT_DIR || DEFAULT_CONTENT_DIR });
   const rawFile = fs.readFileSync(filePath, "utf-8");
   const { data, content } = matter(rawFile);
   return {

package/dist/styles.css

@@ -996,6 +996,12 @@
       overflow: hidden;
     }
   }
+  .max-md\:rounded-t-lg {
+    @media (width < 48rem) {
+      border-top-left-radius: var(--radius-lg);
+      border-top-right-radius: var(--radius-lg);
+    }
+  }
   .max-md\:px-4 {
     @media (width < 48rem) {
       padding-inline: calc(var(--spacing) * 4);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "docstra",
-    "version": "1.0.1",
+    "version": "1.1.1",
     "description": "A Modern Documentation Framework for Next.js",
     "keywords": [
         "next",
@@ -32,7 +32,7 @@
         "./styles.css": "./dist/styles.css"
     },
     "scripts": {
-        "build": "npm run prettier && npm run build:ts && npm run build:css",
+        "build": "npm run build:ts && npm run build:css",
         "build:ts": "tsup",
         "build:css": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./dist/styles.css",
         "prettier": "prettier --write src"