@marlinjai/clearify 1.8.0 → 1.9.0

package/README.md

@@ -20,19 +20,19 @@ An open-source documentation site generator. Turn markdown into beautiful docs.
 Install Clearify as a dev dependency:
 
 ```bash
-npm install @marlinjai/clearify --save-dev
+pnpm add -D @marlinjai/clearify
 ```
 
 Scaffold your project:
 
 ```bash
-npx clearify init
+pnpm exec clearify init
 ```
 
 Start the dev server:
 
 ```bash
-npx clearify dev
+pnpm exec clearify dev
 ```
 
 Your docs are live at `http://localhost:4747`.

package/dist/node/{chunk-4BOXMNVR.js → chunk-77VHQV7W.js}

@@ -2,10 +2,10 @@ import {
   loadUserConfig,
   resolveConfig,
   resolveSections
-} from "./chunk-YMRRZEYA.js";
+} from "./chunk-PQMKRFBQ.js";
 import {
   scanDocs
-} from "./chunk-6PUBRHS7.js";
+} from "./chunk-QNC5QRIO.js";
 
 // src/node/check.ts
 import { resolve } from "path";

package/dist/node/{chunk-W3MZOFJQ.js → chunk-GGUDZD4K.js}

@@ -8,15 +8,15 @@ import {
 } from "./chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "./chunk-3WWPYCGQ.js";
+} from "./chunk-IF6GI4WU.js";
 import {
   loadUserConfig,
   resolveConfig,
   resolveSections
-} from "./chunk-YMRRZEYA.js";
+} from "./chunk-PQMKRFBQ.js";
 import {
   buildSectionData
-} from "./chunk-6PUBRHS7.js";
+} from "./chunk-QNC5QRIO.js";
 
 // src/node/build.ts
 import { build as viteBuild } from "vite";

package/dist/node/{chunk-3WWPYCGQ.js → chunk-IF6GI4WU.js}

@@ -6,10 +6,10 @@ import {
   resolveConfig,
   resolveSections,
   scanHubProjects
-} from "./chunk-YMRRZEYA.js";
+} from "./chunk-PQMKRFBQ.js";
 import {
   buildSectionData
-} from "./chunk-6PUBRHS7.js";
+} from "./chunk-QNC5QRIO.js";
 
 // src/vite-plugin/index.ts
 import { resolve } from "path";

package/dist/node/{chunk-YMRRZEYA.js → chunk-PQMKRFBQ.js}

@@ -38,7 +38,8 @@ var HubProjectSchema = z.object({
   repo: z.string().optional(),
   status: z.enum(["active", "beta", "planned", "deprecated"]).default("active"),
   icon: z.string().optional(),
-  tags: z.array(z.string()).optional()
+  tags: z.array(z.string()).optional(),
+  group: z.string().optional()
 });
 var HubProjectPartialSchema = z.object({
   description: z.string(),
@@ -46,7 +47,10 @@ var HubProjectPartialSchema = z.object({
   repo: z.string().optional(),
   status: z.enum(["active", "beta", "planned", "deprecated"]).default("active"),
   icon: z.string().optional(),
-  tags: z.array(z.string()).optional()
+  tags: z.array(z.string()).optional(),
+  group: z.string().optional(),
+  hubUrl: z.string().optional(),
+  hubName: z.string().optional()
 }).optional();
 var HubConfigSchema = z.object({
   projects: z.array(HubProjectSchema).default([]),
@@ -236,7 +240,8 @@ async function scanHubProjects(config, root) {
         repo: hp.repo,
         status: hp.status,
         icon: hp.icon,
-        tags: hp.tags
+        tags: hp.tags,
+        group: hp.group
       });
     } catch {
     }

package/dist/node/{chunk-6PUBRHS7.js → chunk-QNC5QRIO.js}

@@ -47,9 +47,20 @@ function scanDocs(docsDir, exclude = [], basePath = "/") {
 }
 function buildNavigation(docs, basePath = "/") {
   const rootDir = basePath === "/" ? "/" : basePath.replace(/\/$/, "");
-  const groups = /* @__PURE__ */ new Map();
+  const indexPages = /* @__PURE__ */ new Map();
+  const nonIndexDocs = [];
   for (const doc of docs) {
     if (doc.routePath === rootDir || doc.routePath === "/") continue;
+    const parentDir = dirname(doc.routePath);
+    const fileName = basename(doc.filePath, extname(doc.filePath));
+    if (fileName === "index") {
+      indexPages.set(doc.routePath, doc);
+    } else {
+      nonIndexDocs.push(doc);
+    }
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const doc of nonIndexDocs) {
     const dir = dirname(doc.routePath);
     if (!groups.has(dir)) groups.set(dir, []);
     groups.get(dir).push(doc);
@@ -62,25 +73,51 @@ function buildNavigation(docs, basePath = "/") {
       return a.routePath.localeCompare(b.routePath);
     });
   }
-  const nav = [];
-  const rootFiles = groups.get(rootDir) ?? [];
-  for (const doc of rootFiles) {
-    const item = { label: doc.frontmatter.title, path: doc.routePath };
-    if (doc.frontmatter.icon) item.icon = doc.frontmatter.icon;
-    nav.push(item);
-  }
-  const dirs = [...groups.keys()].filter((d) => d !== rootDir).sort();
-  for (const dir of dirs) {
-    const files = groups.get(dir);
-    const label = toTitleCase(basename(dir));
-    const children = files.map((doc) => {
-      const child = { label: doc.frontmatter.title, path: doc.routePath };
-      if (doc.frontmatter.icon) child.icon = doc.frontmatter.icon;
-      return child;
+  function buildGroupChildren(parentDir) {
+    const items = [];
+    const directFiles = groups.get(parentDir) ?? [];
+    for (const doc of directFiles) {
+      const item = { label: doc.frontmatter.title, path: doc.routePath };
+      if (doc.frontmatter.icon) item.icon = doc.frontmatter.icon;
+      items.push(item);
+    }
+    const childDirs = /* @__PURE__ */ new Set();
+    for (const dir of groups.keys()) {
+      if (dir !== parentDir && dirname(dir) === parentDir) {
+        childDirs.add(dir);
+      }
+    }
+    for (const indexPath of indexPages.keys()) {
+      const dir = indexPath;
+      if (dirname(dir) === parentDir && !childDirs.has(dir)) {
+        childDirs.add(dir);
+      }
+    }
+    const sortedChildDirs = [...childDirs].sort((a, b) => {
+      const indexA = indexPages.get(a);
+      const indexB = indexPages.get(b);
+      const orderA = indexA?.frontmatter.order ?? 999;
+      const orderB = indexB?.frontmatter.order ?? 999;
+      if (orderA !== orderB) return orderA - orderB;
+      return a.localeCompare(b);
     });
-    nav.push({ label, children });
+    for (const childDir of sortedChildDirs) {
+      const indexPage = indexPages.get(childDir);
+      const label = indexPage?.frontmatter.title ?? toTitleCase(basename(childDir));
+      const children = buildGroupChildren(childDir);
+      if (children.length > 0) {
+        const group = { label, children };
+        if (indexPage?.frontmatter.icon) group.icon = indexPage.frontmatter.icon;
+        items.push(group);
+      } else if (indexPage) {
+        const item = { label, path: indexPage.routePath };
+        if (indexPage.frontmatter.icon) item.icon = indexPage.frontmatter.icon;
+        items.push(item);
+      }
+    }
+    return items;
   }
-  return nav;
+  return buildGroupChildren(rootDir);
 }
 function buildRoutes(docs, sectionId) {
   return docs.map((doc) => ({

package/dist/node/core/config.js

@@ -4,7 +4,7 @@ import {
   resolveConfig,
   resolveSections,
   scanHubProjects
-} from "../chunk-YMRRZEYA.js";
+} from "../chunk-PQMKRFBQ.js";
 import {
   defineConfig
 } from "../chunk-V7LLYIRO.js";

package/dist/node/core/navigation.js

@@ -3,7 +3,7 @@ import {
   buildRoutes,
   buildSectionData,
   scanDocs
-} from "../chunk-6PUBRHS7.js";
+} from "../chunk-QNC5QRIO.js";
 import "../chunk-5TD7NQIW.js";
 export {
   buildNavigation,

package/dist/node/node/build.js

@@ -1,13 +1,13 @@
 import {
   buildSite
-} from "../chunk-W3MZOFJQ.js";
+} from "../chunk-GGUDZD4K.js";
 import "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
-import "../chunk-3WWPYCGQ.js";
+import "../chunk-IF6GI4WU.js";
 import "../chunk-B2Q23JW3.js";
-import "../chunk-YMRRZEYA.js";
+import "../chunk-PQMKRFBQ.js";
 import "../chunk-V7LLYIRO.js";
-import "../chunk-6PUBRHS7.js";
+import "../chunk-QNC5QRIO.js";
 import "../chunk-5TD7NQIW.js";
 export {
   buildSite

package/dist/node/node/check.js

@@ -1,9 +1,9 @@
 import {
   checkLinks
-} from "../chunk-4BOXMNVR.js";
-import "../chunk-YMRRZEYA.js";
+} from "../chunk-77VHQV7W.js";
+import "../chunk-PQMKRFBQ.js";
 import "../chunk-V7LLYIRO.js";
-import "../chunk-6PUBRHS7.js";
+import "../chunk-QNC5QRIO.js";
 import "../chunk-5TD7NQIW.js";
 export {
   checkLinks

package/dist/node/node/index.js

@@ -1,26 +1,26 @@
 import {
   buildSite
-} from "../chunk-W3MZOFJQ.js";
+} from "../chunk-GGUDZD4K.js";
 import {
   remarkMermaidToComponent
 } from "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "../chunk-3WWPYCGQ.js";
+} from "../chunk-IF6GI4WU.js";
 import "../chunk-B2Q23JW3.js";
 import {
   init
 } from "../chunk-QIAMD2Q6.js";
 import {
   checkLinks
-} from "../chunk-4BOXMNVR.js";
+} from "../chunk-77VHQV7W.js";
 import {
   loadUserConfig,
   resolveConfig
-} from "../chunk-YMRRZEYA.js";
+} from "../chunk-PQMKRFBQ.js";
 import "../chunk-V7LLYIRO.js";
-import "../chunk-6PUBRHS7.js";
+import "../chunk-QNC5QRIO.js";
 import "../chunk-5TD7NQIW.js";
 
 // src/node/index.ts

package/dist/node/types/index.d.ts

@@ -85,6 +85,9 @@ interface HubProject {
     status?: 'active' | 'beta' | 'planned' | 'deprecated';
     icon?: string;
     tags?: string[];
+    group?: string;
+    hubUrl?: string;
+    hubName?: string;
 }
 interface HubConfig {
     projects: HubProject[];

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

@@ -1,10 +1,10 @@
 import {
   clearifyPlugin
-} from "../chunk-3WWPYCGQ.js";
+} from "../chunk-IF6GI4WU.js";
 import "../chunk-B2Q23JW3.js";
-import "../chunk-YMRRZEYA.js";
+import "../chunk-PQMKRFBQ.js";
 import "../chunk-V7LLYIRO.js";
-import "../chunk-6PUBRHS7.js";
+import "../chunk-QNC5QRIO.js";
 import "../chunk-5TD7NQIW.js";
 export {
   clearifyPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marlinjai/clearify",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "An open-source documentation site generator. Turn markdown into beautiful docs.",
   "type": "module",
   "bin": {
@@ -22,6 +22,10 @@
     "src/client",
     "src/theme"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev:self": "node bin/clearify.js dev"
+  },
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
@@ -68,6 +72,7 @@
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
+  "packageManager": "pnpm@9.15.0",
   "license": "MIT",
   "author": "MarlinJai",
   "repository": {
@@ -88,9 +93,5 @@
     "react",
     "mermaid",
     "openapi"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev:self": "node bin/clearify.js dev"
-  }
-}
+  ]
+}

package/src/theme/Layout.tsx

@@ -33,6 +33,7 @@ export function Layout({ config, sections, children }: LayoutProps) {
             sections={sections}
             open={sidebarOpen}
             onClose={() => setSidebarOpen(false)}
+            hubProject={config.hubProject}
           />
           <Content>{children}</Content>
           <TableOfContents />

package/src/theme/Sidebar.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import clsx from 'clsx';
-import type { NavigationItem, SectionNavigation } from '../types/index.js';
+import type { NavigationItem, SectionNavigation, HubProject } from '../types/index.js';
 
 interface SidebarProps {
   sections: SectionNavigation[];
   open: boolean;
   onClose: () => void;
+  hubProject?: Omit<HubProject, 'name'>;
 }
 
 function findActiveSection(pathname: string, sections: SectionNavigation[]): string {
@@ -103,7 +104,7 @@ function SectionSwitcher({
   );
 }
 
-export function Sidebar({ sections, open, onClose }: SidebarProps) {
+export function Sidebar({ sections, open, onClose, hubProject }: SidebarProps) {
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -246,6 +247,37 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
         }}
         className={clsx('clearify-sidebar', open && 'clearify-sidebar-open')}
       >
+        {hubProject?.hubUrl && (
+          <a
+            href={hubProject.hubUrl}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.375rem',
+              padding: '0.375rem 0.75rem',
+              margin: '0 0.5rem 0.5rem',
+              fontSize: '0.75rem',
+              fontWeight: 500,
+              color: 'var(--clearify-text-tertiary)',
+              textDecoration: 'none',
+              borderRadius: 'var(--clearify-radius-sm)',
+              transition: 'color 0.15s, background-color 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = 'var(--clearify-primary)';
+              e.currentTarget.style.backgroundColor = 'var(--clearify-primary-soft)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--clearify-text-tertiary)';
+              e.currentTarget.style.backgroundColor = 'transparent';
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="15 18 9 12 15 6" />
+            </svg>
+            {hubProject.hubName ?? 'Hub'}
+          </a>
+        )}
         {showSwitcher && (
           <SectionSwitcher
             sections={sections}

package/src/theme/components/ProjectGrid.tsx

@@ -1,52 +1,142 @@
 import React from 'react';
 import hub from 'virtual:clearify/hub';
 import { ProjectCard } from './ProjectCard.js';
+import type { HubProject } from '../../types/index.js';
 
 interface ProjectGridProps {
   cols?: number;
   children?: React.ReactNode;
 }
 
-export function ProjectGrid({ cols = 3, children }: ProjectGridProps) {
-  const hasChildren = React.Children.count(children) > 0;
-
+function ProjectGridInner({ cols, projects }: { cols: number; projects: HubProject[] }) {
   return (
     <div
       style={{
         display: 'grid',
         gridTemplateColumns: `repeat(${cols}, 1fr)`,
         gap: '0.875rem',
-        marginBottom: '1.5rem',
       }}
       className="clearify-project-grid"
     >
-      {hasChildren
-        ? children
-        : hub?.projects.map((project) => (
-            <ProjectCard
-              key={project.name}
-              name={project.name}
-              description={project.description}
-              href={project.href}
-              repo={project.repo}
-              status={project.status}
-              icon={project.icon}
-              tags={project.tags}
-            />
-          ))}
-
-      <style>{`
-        @media (max-width: 900px) {
-          .clearify-project-grid {
-            grid-template-columns: repeat(2, 1fr) !important;
-          }
-        }
-        @media (max-width: 640px) {
-          .clearify-project-grid {
-            grid-template-columns: 1fr !important;
-          }
-        }
-      `}</style>
+      {projects.map((project) => (
+        <ProjectCard
+          key={project.name}
+          name={project.name}
+          description={project.description}
+          href={project.href}
+          repo={project.repo}
+          status={project.status}
+          icon={project.icon}
+          tags={project.tags}
+        />
+      ))}
     </div>
   );
 }
+
+export function ProjectGrid({ cols = 3, children }: ProjectGridProps) {
+  const hasChildren = React.Children.count(children) > 0;
+
+  if (hasChildren) {
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gap: '0.875rem',
+          marginBottom: '1.5rem',
+        }}
+        className="clearify-project-grid"
+      >
+        {children}
+        <style>{gridResponsiveStyles}</style>
+      </div>
+    );
+  }
+
+  const projects: HubProject[] = hub?.projects ?? [];
+  const hasGroups = projects.some((p) => p.group);
+
+  if (!hasGroups) {
+    return (
+      <div style={{ marginBottom: '1.5rem' }}>
+        <ProjectGridInner cols={cols} projects={projects} />
+        <style>{gridResponsiveStyles}</style>
+      </div>
+    );
+  }
+
+  // Group projects by their group field, preserving insertion order
+  const groupOrder: string[] = [];
+  const grouped: Record<string, HubProject[]> = {};
+  const ungrouped: HubProject[] = [];
+
+  for (const project of projects) {
+    if (project.group) {
+      if (!grouped[project.group]) {
+        grouped[project.group] = [];
+        groupOrder.push(project.group);
+      }
+      grouped[project.group].push(project);
+    } else {
+      ungrouped.push(project);
+    }
+  }
+
+  return (
+    <div style={{ marginBottom: '1.5rem' }}>
+      {groupOrder.map((groupName) => (
+        <div key={groupName} style={{ marginBottom: '1.5rem' }}>
+          <h2
+            style={{
+              fontSize: '1.25rem',
+              fontWeight: 600,
+              marginBottom: '0.75rem',
+              marginTop: 0,
+              color: 'var(--clearify-text)',
+              letterSpacing: '-0.01em',
+            }}
+          >
+            {groupName}
+          </h2>
+          <ProjectGridInner cols={cols} projects={grouped[groupName]} />
+        </div>
+      ))}
+
+      {ungrouped.length > 0 && (
+        <div style={{ marginBottom: '1.5rem' }}>
+          {groupOrder.length > 0 && (
+            <h2
+              style={{
+                fontSize: '1.25rem',
+                fontWeight: 600,
+                marginBottom: '0.75rem',
+                marginTop: 0,
+                color: 'var(--clearify-text)',
+                letterSpacing: '-0.01em',
+              }}
+            >
+              Other Projects
+            </h2>
+          )}
+          <ProjectGridInner cols={cols} projects={ungrouped} />
+        </div>
+      )}
+
+      <style>{gridResponsiveStyles}</style>
+    </div>
+  );
+}
+
+const gridResponsiveStyles = `
+  @media (max-width: 900px) {
+    .clearify-project-grid {
+      grid-template-columns: repeat(2, 1fr) !important;
+    }
+  }
+  @media (max-width: 640px) {
+    .clearify-project-grid {
+      grid-template-columns: 1fr !important;
+    }
+  }
+`;