@geenius/docs 0.1.0

package/packages/convex/src/queries.ts

@@ -0,0 +1,175 @@
+import { v } from "convex/values";
+import { query } from "./_generated/server.js";
+
+export const listSections = query({
+  args: { access: v.optional(v.string()) },
+  returns: v.array(v.any()),
+  handler: async (ctx, args) => {
+    let sections = await ctx.db
+      .query("doc_sections")
+      .withIndex("by_order")
+      .collect();
+
+    if (args.access) {
+      sections = sections.filter((s) => s.access === args.access);
+    }
+
+    return sections.sort((a, b) => a.order - b.order);
+  },
+});
+
+export const getSection = query({
+  args: { sectionId: v.id("doc_sections") },
+  returns: v.any(),
+  handler: async (ctx, args) => {
+    return await ctx.db.get(args.sectionId);
+  },
+});
+
+export const listPagesBySection = query({
+  args: {
+    sectionId: v.id("doc_sections"),
+    status: v.optional(v.string()),
+  },
+  returns: v.array(v.any()),
+  handler: async (ctx, args) => {
+    let pages = await ctx.db
+      .query("doc_pages")
+      .withIndex("by_sectionId", (q) => q.eq("sectionId", args.sectionId))
+      .collect();
+
+    if (args.status) {
+      pages = pages.filter((p) => p.status === args.status);
+    }
+
+    return pages.sort((a, b) => a.order - b.order);
+  },
+});
+
+export const getPage = query({
+  args: {
+    sectionId: v.id("doc_sections"),
+    slug: v.string(),
+  },
+  returns: v.any(),
+  handler: async (ctx, args) => {
+    const pages = await ctx.db
+      .query("doc_pages")
+      .withIndex("by_sectionId", (q) => q.eq("sectionId", args.sectionId))
+      .collect();
+
+    return pages.find((p) => p.slug === args.slug) ?? null;
+  },
+});
+
+export const getPageById = query({
+  args: { pageId: v.id("doc_pages") },
+  returns: v.any(),
+  handler: async (ctx, args) => {
+    return await ctx.db.get(args.pageId);
+  },
+});
+
+export const searchPages = query({
+  args: {
+    query: v.string(),
+    access: v.optional(v.string()),
+  },
+  returns: v.array(v.any()),
+  handler: async (ctx, args) => {
+    const q = args.query.toLowerCase();
+    if (!q) return [];
+
+    let pages = await ctx.db.query("doc_pages").collect();
+
+    if (args.access) {
+      pages = pages.filter((p) => p.access === args.access);
+    }
+
+    const results = pages
+      .filter(
+        (p) =>
+          p.title.toLowerCase().includes(q) ||
+          p.content.toLowerCase().includes(q) ||
+          p.tags.some((t: string) => t.toLowerCase().includes(q))
+      )
+      .slice(0, 20);
+
+    return results;
+  },
+});
+
+export const getFullTree = query({
+  args: { access: v.optional(v.string()) },
+  returns: v.any(),
+  handler: async (ctx, args) => {
+    let sections = await ctx.db
+      .query("doc_sections")
+      .withIndex("by_order")
+      .collect();
+
+    if (args.access) {
+      sections = sections.filter((s) => s.access === args.access);
+    }
+
+    sections.sort((a, b) => a.order - b.order);
+
+    const tree = [];
+    for (const section of sections) {
+      const pages = await ctx.db
+        .query("doc_pages")
+        .withIndex("by_sectionId", (q) => q.eq("sectionId", section._id))
+        .collect();
+
+      const publishedPages = pages
+        .filter((p) => p.status === "published")
+        .sort((a, b) => a.order - b.order);
+
+      tree.push({
+        ...section,
+        id: section._id,
+        pages: publishedPages.map((p) => ({ ...p, id: p._id })),
+        pageCount: publishedPages.length,
+      });
+    }
+
+    return tree;
+  },
+});
+
+export const getRecentPages = query({
+  args: {
+    limit: v.optional(v.number()),
+    access: v.optional(v.string()),
+  },
+  returns: v.array(v.any()),
+  handler: async (ctx, args) => {
+    let pages = await ctx.db.query("doc_pages").collect();
+
+    pages = pages.filter((p) => p.status === "published");
+
+    if (args.access) {
+      pages = pages.filter((p) => p.access === args.access);
+    }
+
+    pages.sort((a, b) => b.updatedAt - a.updatedAt);
+
+    return pages.slice(0, args.limit ?? 10).map((p) => ({ ...p, id: p._id }));
+  },
+});
+
+export const getPageVersions = query({
+  args: { slug: v.string() },
+  returns: v.array(v.any()),
+  handler: async (ctx, args) => {
+    const pages = await ctx.db
+      .query("doc_pages")
+      .withIndex("by_slug", (q) => q.eq("slug", args.slug))
+      .collect();
+
+    return pages
+      .filter((p) => p.version)
+      .sort((a, b) => (b.version ?? "").localeCompare(a.version ?? ""))
+      .map((p) => ({ ...p, id: p._id }));
+  },
+});

package/packages/convex/src/schema.ts

@@ -0,0 +1,55 @@
+import { defineSchema, defineTable } from "convex/server";
+import { v } from "convex/values";
+
+export default defineSchema({
+  doc_sections: defineTable({
+    title: v.string(),
+    slug: v.string(),
+    parentId: v.optional(v.id("doc_sections")),
+    order: v.number(),
+    icon: v.optional(v.string()),
+    description: v.optional(v.string()),
+    access: v.union(v.literal("public"), v.literal("team"), v.literal("admin")),
+    createdAt: v.number(),
+  })
+    .index("by_slug", ["slug"])
+    .index("by_parentId", ["parentId"])
+    .index("by_order", ["order"]),
+
+  doc_pages: defineTable({
+    title: v.string(),
+    slug: v.string(),
+    content: v.string(),
+    excerpt: v.optional(v.string()),
+    sectionId: v.id("doc_sections"),
+    order: v.number(),
+    author: v.object({ name: v.string(), avatar: v.optional(v.string()) }),
+    lastEditedBy: v.optional(
+      v.object({ name: v.string(), editedAt: v.string() })
+    ),
+    version: v.optional(v.string()),
+    access: v.union(v.literal("public"), v.literal("team"), v.literal("admin")),
+    tags: v.array(v.string()),
+    status: v.union(
+      v.literal("draft"),
+      v.literal("published"),
+      v.literal("archived")
+    ),
+    createdAt: v.number(),
+    updatedAt: v.number(),
+    wordCount: v.number(),
+    readingTime: v.number(),
+    viewCount: v.number(),
+  })
+    .index("by_sectionId", ["sectionId"])
+    .index("by_slug", ["slug"])
+    .index("by_status", ["status"])
+    .index("by_access", ["access"]),
+
+  doc_search_index: defineTable({
+    pageId: v.id("doc_pages"),
+    sectionId: v.id("doc_sections"),
+    tokens: v.array(v.string()),
+    updatedAt: v.number(),
+  }).index("by_pageId", ["pageId"]),
+});

package/packages/react/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-docs/react\n\n> A premium module for the Geenius Boilerplate Ecosystem.\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-docs/react\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-docs/react';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@geenius-docs/react",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@geenius-docs/shared": "workspace:*",
+    "lucide-react": "^0.577.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@tanstack/react-router": "^1.168.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "~6.0.2"
+  },
+  "scripts": {
+    "type-aml": "tsc --noEmit"
+  },
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/react/src/DocsLayout.tsx

@@ -0,0 +1,116 @@
+import React from 'react'
+import { useDocs } from './DocsProvider'
+
+interface DocsLayoutProps {
+  children?: React.ReactNode
+  currentPageId?: string
+  onSelectPage?: (id: string) => void
+  searchQuery?: string
+  onSearch?: (query: string) => void
+  searchResults?: any[]
+}
+
+/**
+ * A professional, high-quality layout for Geenius Documentation.
+ * Provides a responsive sidebar, searchable navigation, and premium typography.
+ */
+export const DocsLayout: React.FC<DocsLayoutProps> = ({ 
+  children, 
+  currentPageId, 
+  onSelectPage,
+  searchQuery: searchQueryProp,
+  onSearch: onSearchProp,
+  searchResults: searchResultsProp
+}) => {
+  const { 
+    tree, 
+    selectPage, 
+    setSearchQuery, 
+    searchQuery: contextSearchQuery, 
+    searchResults: contextSearchResults 
+  } = useDocs()
+
+  const q = searchQueryProp ?? contextSearchQuery
+  const results = searchResultsProp ?? contextSearchResults
+  const onSelect = onSelectPage ?? selectPage
+  const onSearch = onSearchProp ?? setSearchQuery
+
+  return (
+    <div className="flex min-h-[calc(100vh-64px)] bg-background">
+      {/* Searchable Sidebar */}
+      <aside className="w-80 border-r bg-card/10 backdrop-blur-xl flex flex-col shrink-0 overflow-hidden">
+        <div className="p-6 space-y-4">
+          <div className="relative group">
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors group-focus-within:text-primary">
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+            </span>
+            <input 
+              value={q}
+              onChange={(e) => onSearch(e.target.value)}
+              placeholder="Search knowledge base..." 
+              className="w-full pl-10 pr-4 py-2.5 rounded-2xl border bg-background/50 text-sm focus:ring-2 ring-primary/20 outline-none transition-all placeholder:text-muted-foreground/30"
+            />
+          </div>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto px-4 pb-12 space-y-8 scrollbar-hide">
+          {q && results.length > 0 ? (
+            <div className="space-y-2 px-2 animate-in fade-in slide-in-from-top-2 duration-300">
+              <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-4 opacity-50 px-2">
+                Search Results ({results.length})
+              </p>
+              {results.map(page => (
+                <button 
+                  key={page.id}
+                  onClick={() => { onSelect(page.id); onSearch('') }}
+                  className="w-full p-4 rounded-2xl border bg-card/30 hover:bg-card hover:border-primary/20 hover:shadow-xl hover:shadow-primary/5 text-left transition-all duration-300 group"
+                >
+                  <h5 className="text-sm font-bold group-hover:text-primary transition-colors">{page.title}</h5>
+                  {page.description && <p className="text-[10px] text-muted-foreground line-clamp-1 mt-1 opacity-70">{page.description}</p>}
+                </button>
+              ))}
+            </div>
+          ) : (
+            tree.map(group => (
+              <div key={group.id} className="space-y-2">
+                <h4 className="px-4 text-[10px] font-bold text-muted-foreground uppercase tracking-widest opacity-40">
+                  {group.title}
+                </h4>
+                <div className="space-y-0.5">
+                  {group.children.map(page => {
+                    const isActive = page.id === currentPageId
+                    return (
+                      <button 
+                        key={page.id}
+                        onClick={() => onSelect(page.id)}
+                        className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all group ${isActive ? 'bg-primary/5 text-primary shadow-inner' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'}`}
+                      >
+                        <span className={`w-1.5 h-1.5 rounded-full transition-all ${isActive ? 'bg-primary scale-125 shadow-[0_0_8px_rgba(var(--primary),0.5)]' : 'bg-transparent group-hover:bg-muted-foreground/20'}`} />
+                        {page.title}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            ))
+          )}
+        </nav>
+      </aside>
+
+      {/* Dynamic Content Area */}
+      <main className="flex-1 overflow-y-auto overscroll-contain">
+        <div className="max-w-4xl mx-auto px-12 py-16 animate-in fade-in slide-in-from-bottom-8 duration-700">
+          {children}
+          
+          <div className="mt-20 pt-8 border-t border-dashed flex items-center justify-between opacity-50">
+            <p className="text-xs font-medium text-muted-foreground">© 2024 Geenius. Premium Documentation.</p>
+            <div className="flex gap-4">
+              <button className="text-xs hover:text-primary transition-colors">Edit on GitHub</button>
+              <button className="text-xs hover:text-primary transition-colors">Community Help</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

package/packages/react/src/DocsProvider.tsx

@@ -0,0 +1,93 @@
+import React, { createContext, useContext, useState, useMemo, useCallback } from 'react'
+
+export interface DocsPage {
+  id: string
+  title: string
+  description?: string
+  content: any
+}
+
+export interface DocsGroup {
+  id: string
+  title: string
+  children: DocsPage[]
+}
+
+export type DocsTree = DocsGroup[]
+
+interface DocsContextValue {
+  tree: DocsTree
+  currentPage: DocsPage | null
+  selectPage: (id: string) => void
+  searchQuery: string
+  setSearchQuery: (query: string) => void
+  searchResults: DocsPage[]
+}
+
+const DocsContext = createContext<DocsContextValue | null>(null)
+
+interface DocsProviderProps {
+  tree: DocsTree
+  children: React.ReactNode
+}
+
+/**
+ * DocsProvider — Manages documentation state including current page, 
+ * search, and navigation through the docs tree.
+ */
+export const DocsProvider: React.FC<DocsProviderProps> = ({ tree, children }) => {
+  const [currentPageId, setCurrentPageId] = useState<string | null>(tree[0]?.children[0]?.id || null)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const currentPage = useMemo(() => {
+    for (const group of tree) {
+      const page = group.children.find(p => p.id === currentPageId)
+      if (page) return page
+    }
+    return null
+  }, [tree, currentPageId])
+
+  const selectPage = useCallback((id: string) => {
+    setCurrentPageId(id)
+  }, [])
+
+  const searchResults = useMemo(() => {
+    if (!searchQuery) return []
+    const results: DocsPage[] = []
+    const query = searchQuery.toLowerCase()
+    
+    for (const group of tree) {
+      for (const page of group.children) {
+        if (
+          page.title.toLowerCase().includes(query) || 
+          page.description?.toLowerCase().includes(query) ||
+          (typeof page.content === 'string' && page.content.toLowerCase().includes(query))
+        ) {
+          results.push(page)
+        }
+      }
+    }
+    return results
+  }, [tree, searchQuery])
+
+  return (
+    <DocsContext.Provider value={{ 
+      tree, 
+      currentPage, 
+      selectPage, 
+      searchQuery, 
+      setSearchQuery, 
+      searchResults 
+    }}>
+      {children}
+    </DocsContext.Provider>
+  )
+}
+
+export function useDocs() {
+  const context = useContext(DocsContext)
+  if (!context) {
+    throw new Error('useDocs must be used within a DocsProvider')
+  }
+  return context
+}

package/packages/react/src/RouterDocsContent.tsx

@@ -0,0 +1,148 @@
+// src/components/docs/DocsContent.tsx
+
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Link } from '@tanstack/react-router'
+
+interface DocsContentProps {
+  content: string
+  title: string
+  description: string
+}
+
+export const DocsContent: React.FC<DocsContentProps> = ({
+  content,
+  title,
+  description,
+}) => {
+  return (
+    <article className="prose prose-lg dark:prose-invert max-w-none">
+      {/* Header */}
+      <header className="mb-8 pb-8 border-b border-border not-prose">
+        <h1 className="text-4xl font-extrabold text-text-main mb-3">{title}</h1>
+        <p className="text-lg text-text-muted">{description}</p>
+      </header>
+
+      {/* Markdown Content */}
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Custom heading styles
+          h1: ({ children }) => (
+            <h1 className="text-3xl font-bold text-text-main mt-12 mb-6">
+              {children}
+            </h1>
+          ),
+          h2: ({ children }) => (
+            <h2 className="text-2xl font-bold text-text-main mt-10 mb-4 pb-2 border-b border-border">
+              {children}
+            </h2>
+          ),
+          h3: ({ children }) => (
+            <h3 className="text-xl font-bold text-text-main mt-8 mb-3">
+              {children}
+            </h3>
+          ),
+          h4: ({ children }) => (
+            <h4 className="text-lg font-semibold text-text-main mt-6 mb-2">
+              {children}
+            </h4>
+          ),
+          // Paragraph
+          p: ({ children }) => (
+            <p className="text-text-muted leading-relaxed mb-4">{children}</p>
+          ),
+          // Links
+          a: ({ href, children }) => {
+            const isInternal = href?.startsWith('/')
+            if (isInternal) {
+              return (
+                <Link
+                  to={href!}
+                  className="text-primary hover:underline font-medium"
+                >
+                  {children}
+                </Link>
+              )
+            }
+            return (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline font-medium"
+              >
+                {children}
+              </a>
+            )
+          },
+          // Code blocks
+          code: ({ className, children, ...props }) => {
+            const isInline = !className
+            if (isInline) {
+              return (
+                <code className="bg-bg-muted px-1.5 py-0.5 rounded text-sm font-mono text-primary">
+                  {children}
+                </code>
+              )
+            }
+            return (
+              <code className={`${className} block`} {...props}>
+                {children}
+              </code>
+            )
+          },
+          pre: ({ children }) => (
+            <pre className="bg-[#1e1e2e] text-gray-100 p-4 rounded-xl overflow-x-auto text-sm my-6 border border-border">
+              {children}
+            </pre>
+          ),
+          // Lists
+          ul: ({ children }) => (
+            <ul className="list-disc list-inside space-y-2 text-text-muted mb-4">
+              {children}
+            </ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="list-decimal list-inside space-y-2 text-text-muted mb-4">
+              {children}
+            </ol>
+          ),
+          li: ({ children }) => <li className="text-text-muted">{children}</li>,
+          // Tables
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-6">
+              <table className="min-w-full divide-y divide-border border border-border rounded-lg overflow-hidden">
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-bg-muted">{children}</thead>
+          ),
+          th: ({ children }) => (
+            <th className="px-4 py-3 text-left text-sm font-bold text-text-main">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="px-4 py-3 text-sm text-text-muted border-t border-border">
+              {children}
+            </td>
+          ),
+          // Blockquotes
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-4 border-primary pl-4 py-2 my-6 bg-primary/5 rounded-r-lg">
+              {children}
+            </blockquote>
+          ),
+          // Horizontal rules
+          hr: () => <hr className="border-border my-8" />,
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </article>
+  )
+}