@marlinjai/clearify 1.5.3 → 1.6.1

package/README.md

@@ -11,7 +11,7 @@ An open-source documentation site generator. Turn markdown into beautiful docs.
 - **Dark mode** — automatic light/dark theme switching
 - **Syntax highlighting** — beautiful code blocks with Shiki (dual light/dark themes)
 - **SSG & SEO** — pre-rendered HTML, Open Graph, Twitter Cards, JSON-LD, sitemap, robots.txt
-- **OpenAPI / Scalar** — render API reference docs from an OpenAPI spec, with theme sync and dark mode
+- **OpenAPI API Reference** — custom-built renderer for OpenAPI specs with code examples, schema viewer, and full design system integration
 - **Multi-section support** — pill-based section switcher (e.g. public docs + internal docs)
 - **Auto changelog** — drop a `CHANGELOG.md` in your project root, it appears as `/changelog`
 

package/dist/node/{chunk-NY3VVUQ3.js → chunk-7IXPTIHW.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "./chunk-UOVBAJMR.js";
+} from "./chunk-7VYQMIW2.js";
 import {
   loadUserConfig,
   resolveConfig,

package/dist/node/{chunk-UOVBAJMR.js → chunk-7VYQMIW2.js}

@@ -13,6 +13,7 @@ import {
 // src/vite-plugin/index.ts
 import { resolve } from "path";
 import { existsSync, readFileSync } from "fs";
+import { dereference } from "@scalar/openapi-parser";
 var VIRTUAL_CONFIG = "virtual:clearify/config";
 var RESOLVED_VIRTUAL_CONFIG = "\0" + VIRTUAL_CONFIG;
 var VIRTUAL_ROUTES = "virtual:clearify/routes";
@@ -35,7 +36,7 @@ function clearifyPlugin(options = {}) {
   let allSectionNavigations;
   let allSearchEntries;
   let mermaidSvgData = options.mermaidSvgs ?? {};
-  function refreshDocs() {
+  async function refreshDocs() {
     const changelogPath = resolve(userRoot, "CHANGELOG.md");
     sectionDataList = visibleSections.map(
       (section) => buildSectionData(section, changelogPath, config.navigation)
@@ -48,7 +49,7 @@ function clearifyPlugin(options = {}) {
     );
     if (config.openapi?.spec && config.openapi.generatePages !== false) {
       const basePath = config.openapi.basePath ?? "/api";
-      const specData = loadOpenAPISpecData();
+      const specData = await loadOpenAPISpecData();
       if (specData) {
         let opAnchor2 = function(tag, method, opPath) {
           const slug = `${method.toLowerCase()}${opPath.replace(/[{}]/g, "")}`;
@@ -132,7 +133,7 @@ ${routeEntries.join(",\n")}
   }
   let cachedSpecData = null;
   let specDataInitialized = false;
-  function loadOpenAPISpecData() {
+  async function loadOpenAPISpecData() {
     if (specDataInitialized) return cachedSpecData;
     specDataInitialized = true;
     const specPath = config.openapi?.spec;
@@ -148,45 +149,32 @@ ${routeEntries.join(",\n")}
     try {
       const content = readFileSync(resolvedPath, "utf-8");
       const isYaml = /\.ya?ml$/i.test(resolvedPath);
+      let parsed;
       if (isYaml) {
         try {
-          cachedSpecData = JSON.parse(content);
-          return cachedSpecData;
+          parsed = JSON.parse(content);
         } catch {
           console.warn("  YAML OpenAPI specs require js-yaml for page generation. Install it or use a JSON spec.");
           cachedSpecData = null;
           return null;
         }
+      } else {
+        parsed = JSON.parse(content);
       }
-      cachedSpecData = JSON.parse(content);
+      const { schema } = await dereference(parsed);
+      cachedSpecData = schema;
       return cachedSpecData;
     } catch {
       cachedSpecData = null;
       return null;
     }
   }
-  function loadOpenAPISpec() {
-    const specPath = config.openapi?.spec;
-    if (!specPath) {
-      return "export default null;";
-    }
-    const resolvedPath = resolve(userRoot, specPath);
-    if (!existsSync(resolvedPath)) {
-      console.warn(`  OpenAPI spec not found: ${resolvedPath}`);
-      return "export default null;";
-    }
-    try {
-      const content = readFileSync(resolvedPath, "utf-8");
-      const isYaml = /\.ya?ml$/i.test(resolvedPath);
-      if (isYaml) {
-        return `export default ${JSON.stringify(content)};`;
-      }
-      JSON.parse(content);
-      return `export default ${content};`;
-    } catch (err) {
-      console.warn(`  Failed to load OpenAPI spec: ${resolvedPath}`, err instanceof Error ? err.message : err);
+  async function loadOpenAPISpec() {
+    const specData = await loadOpenAPISpecData();
+    if (!specData) {
       return "export default null;";
     }
+    return `export default ${JSON.stringify(specData)};`;
   }
   const mainPlugin = {
     name: "clearify",
@@ -199,7 +187,7 @@ ${routeEntries.join(",\n")}
       const allSections = resolveSections(config, userRoot);
       const isDev = resolvedViteConfig.command === "serve";
       visibleSections = isDev ? allSections : allSections.filter((s) => !s.draft);
-      refreshDocs();
+      await refreshDocs();
     },
     resolveId(id) {
       if (id === VIRTUAL_CONFIG) return RESOLVED_VIRTUAL_CONFIG;
@@ -210,7 +198,7 @@ ${routeEntries.join(",\n")}
       if (id === VIRTUAL_OPENAPI_SPEC) return RESOLVED_VIRTUAL_OPENAPI_SPEC;
       return null;
     },
-    load(id) {
+    async load(id) {
       if (id === RESOLVED_VIRTUAL_CONFIG) {
         return `export default ${JSON.stringify(config)};`;
       }
@@ -227,7 +215,7 @@ ${routeEntries.join(",\n")}
         return `export default ${JSON.stringify(mermaidSvgData)};`;
       }
       if (id === RESOLVED_VIRTUAL_OPENAPI_SPEC) {
-        return loadOpenAPISpec();
+        return await loadOpenAPISpec();
       }
       return null;
     },
@@ -248,16 +236,17 @@ ${routeEntries.join(",\n")}
           if (changedPath === openapiPath) {
             specDataInitialized = false;
             cachedSpecData = null;
-            refreshDocs();
-            const specMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_OPENAPI_SPEC);
-            if (specMod) server.moduleGraph.invalidateModule(specMod);
-            const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
-            if (routesMod) server.moduleGraph.invalidateModule(routesMod);
-            const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
-            if (navMod) server.moduleGraph.invalidateModule(navMod);
-            const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
-            if (searchMod) server.moduleGraph.invalidateModule(searchMod);
-            server.ws.send({ type: "full-reload" });
+            refreshDocs().then(() => {
+              const specMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_OPENAPI_SPEC);
+              if (specMod) server.moduleGraph.invalidateModule(specMod);
+              const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
+              if (routesMod) server.moduleGraph.invalidateModule(routesMod);
+              const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
+              if (navMod) server.moduleGraph.invalidateModule(navMod);
+              const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
+              if (searchMod) server.moduleGraph.invalidateModule(searchMod);
+              server.ws.send({ type: "full-reload" });
+            });
           }
         });
       }
@@ -358,14 +347,15 @@ ${routeEntries.join(",\n")}
         if (!isChangelog && !isInSection) return;
         if (!path.endsWith(".md") && !path.endsWith(".mdx")) return;
         if (event === "add" || event === "unlink" || event === "change") {
-          refreshDocs();
-          const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
-          const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
-          const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
-          if (routesMod) server.moduleGraph.invalidateModule(routesMod);
-          if (navMod) server.moduleGraph.invalidateModule(navMod);
-          if (searchMod) server.moduleGraph.invalidateModule(searchMod);
-          server.ws.send({ type: "full-reload" });
+          refreshDocs().then(() => {
+            const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
+            const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
+            const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
+            if (routesMod) server.moduleGraph.invalidateModule(routesMod);
+            if (navMod) server.moduleGraph.invalidateModule(navMod);
+            if (searchMod) server.moduleGraph.invalidateModule(searchMod);
+            server.ws.send({ type: "full-reload" });
+          });
         }
       });
       return () => {

package/dist/node/node/build.js

@@ -1,9 +1,9 @@
 import {
   buildSite
-} from "../chunk-NY3VVUQ3.js";
+} from "../chunk-7IXPTIHW.js";
 import "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
-import "../chunk-UOVBAJMR.js";
+import "../chunk-7VYQMIW2.js";
 import "../chunk-B2Q23JW3.js";
 import "../chunk-IBK35HZR.js";
 import "../chunk-V7LLYIRO.js";

package/dist/node/node/index.js

@@ -1,13 +1,13 @@
 import {
   buildSite
-} from "../chunk-NY3VVUQ3.js";
+} from "../chunk-7IXPTIHW.js";
 import {
   remarkMermaidToComponent
 } from "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "../chunk-UOVBAJMR.js";
+} from "../chunk-7VYQMIW2.js";
 import "../chunk-B2Q23JW3.js";
 import {
   init

package/dist/node/vite-plugin/index.js

@@ -1,6 +1,6 @@
 import {
   clearifyPlugin
-} from "../chunk-UOVBAJMR.js";
+} from "../chunk-7VYQMIW2.js";
 import "../chunk-B2Q23JW3.js";
 import "../chunk-IBK35HZR.js";
 import "../chunk-V7LLYIRO.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marlinjai/clearify",
-  "version": "1.5.3",
+  "version": "1.6.1",
   "description": "An open-source documentation site generator. Turn markdown into beautiful docs.",
   "type": "module",
   "bin": {
@@ -29,7 +29,7 @@
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
-    "@scalar/api-reference-react": "^0.8.52",
+    "@scalar/openapi-parser": "^0.10.7",
     "@shikijs/rehype": "^3.22.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",

package/src/theme/Sidebar.tsx

@@ -109,6 +109,43 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
   }, [location.pathname, sections, isSectionData]);
 
   const sidebarRef = useRef<HTMLElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
+
+  // Restore saved sidebar width on mount
+  useEffect(() => {
+    const saved = localStorage.getItem('clearify-sidebar-width');
+    if (saved) {
+      document.documentElement.style.setProperty('--clearify-sidebar-width', saved);
+    }
+  }, []);
+
+  // Resize drag logic
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const newWidth = Math.max(200, Math.min(500, e.clientX));
+      document.documentElement.style.setProperty('--clearify-sidebar-width', `${newWidth}px`);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      const width = getComputedStyle(document.documentElement).getPropertyValue('--clearify-sidebar-width').trim();
+      localStorage.setItem('clearify-sidebar-width', width);
+    };
+
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing]);
 
   useEffect(() => {
     const sidebar = sidebarRef.current;
@@ -279,6 +316,23 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
             />
           ))}
         </nav>
+
+        {/* Resize handle */}
+        <div
+          onMouseDown={(e) => { e.preventDefault(); setIsResizing(true); }}
+          className="clearify-sidebar-resize"
+          style={{
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            bottom: 0,
+            width: '5px',
+            cursor: 'col-resize',
+            background: isResizing ? 'var(--clearify-primary)' : 'transparent',
+            transition: isResizing ? 'none' : 'background 0.15s ease',
+            zIndex: 10,
+          }}
+        />
       </aside>
 
       <style>{`
@@ -298,6 +352,12 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
           .clearify-menu-btn {
             display: flex !important;
           }
+          .clearify-sidebar-resize {
+            display: none !important;
+          }
+        }
+        .clearify-sidebar-resize:hover {
+          background: var(--clearify-border-strong) !important;
         }
       `}</style>
     </>