@marlinjai/clearify 1.6.0 → 1.6.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marlinjai/clearify",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "An open-source documentation site generator. Turn markdown into beautiful docs.",
   "type": "module",
   "bin": {

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;
@@ -152,8 +189,14 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
     });
   };
 
-  const handleExpandAll = () => setExpandedGroups(new Set(allGroupKeys));
-  const handleCollapseAll = () => setExpandedGroups(new Set());
+  const handleExpandAll = () => {
+    setExpandedGroups(new Set(allGroupKeys));
+    window.dispatchEvent(new CustomEvent('clearify:expand-all'));
+  };
+  const handleCollapseAll = () => {
+    setExpandedGroups(new Set());
+    window.dispatchEvent(new CustomEvent('clearify:collapse-all'));
+  };
 
   return (
     <>
@@ -279,6 +322,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 +358,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>
     </>

package/src/theme/components/openapi/TagGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { OperationCard } from './OperationCard.js';
 
 interface TagGroupProps {
@@ -17,6 +17,17 @@ function operationAnchorId(tag: string, method: string, path: string): string {
 export function TagGroup({ tag, description, operations, baseUrl }: TagGroupProps) {
   const [expanded, setExpanded] = useState(true);
 
+  useEffect(() => {
+    const onExpand = () => setExpanded(true);
+    const onCollapse = () => setExpanded(false);
+    window.addEventListener('clearify:expand-all', onExpand);
+    window.addEventListener('clearify:collapse-all', onCollapse);
+    return () => {
+      window.removeEventListener('clearify:expand-all', onExpand);
+      window.removeEventListener('clearify:collapse-all', onCollapse);
+    };
+  }, []);
+
   return (
     <div
       id={`tag/${encodeURIComponent(tag)}`}

package/src/theme/styles/globals.css

@@ -366,3 +366,9 @@ a:hover {
 .clearify-openapi-page {
   max-width: none;
 }
+
+.clearify-prose:has(.clearify-openapi-page) {
+  max-width: none !important;
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+}