@geenius/docs 0.1.0

package/packages/solidjs/src/primitives/index.ts

@@ -0,0 +1,4 @@
+export { createDocs } from './createDocs'
+export { createDocSearch } from './createDocSearch'
+export { createDocsAdmin } from './createDocsAdmin'
+export { createTableOfContents } from './createTableOfContents'

package/packages/solidjs/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: { index: 'src/index.tsx' },
+    outDir: 'dist',
+    format: ['esm'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    external: ['solid-js'],
+})

package/packages/solidjs-css/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-docs/solidjs-css\n\n> Geenius Docs — SolidJS components (vanilla CSS variant)\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/solidjs-css\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-docs/solidjs-css';\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/solidjs-css/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@geenius-docs/solidjs-css",
+  "version": "0.1.0",
+  "description": "Geenius Docs \u2014 SolidJS components (vanilla CSS variant)",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.6.0",
+    "@tanstack/solid-router": ">=1.0.0"
+  },
+  "dependencies": {
+    "@geenius-docs/shared": "workspace:*",
+    "lucide-solid": "^0.475.0",
+    "solid-markdown": "^1.2.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.5",
+    "typescript": "~6.0.2"
+  },
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/solidjs-css/src/DocsLayout.tsx

@@ -0,0 +1,106 @@
+import { Component, For, Show } from 'solid-js'
+import { useDocs } from './DocsProvider'
+
+export interface DocsLayoutProps {
+  children?: any
+  currentPageId?: string
+  onSelectPage?: (id: string) => void
+  searchQuery?: string
+  onSearch?: (query: string) => void
+  searchResults?: any[]
+}
+
+/**
+ * A professional, high-quality layout for Geenius Documentation.
+ * SolidJS vanilla CSS variant.
+ */
+export const DocsLayout: Component<DocsLayoutProps> = (props) => {
+  const ctx = useDocs()
+
+  const q = () => props.searchQuery ?? ctx.searchQuery()
+  const results = () => props.searchResults ?? ctx.searchResults()
+  const onSelect = (id: string) => props.onSelectPage ? props.onSelectPage(id) : ctx.selectPage(id)
+  const onSearch = (val: string) => props.onSearch ? props.onSearch(val) : ctx.setSearchQuery(val)
+
+  return (
+    <div data-docs-container="">
+      <aside data-docs-sidebar="">
+        <div data-docs-search-wrap="">
+          <div data-docs-search-input-wrap="">
+            <span data-docs-search-icon="">
+              <svg 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()}
+              onInput={(e) => onSearch(e.currentTarget.value)}
+              placeholder="Search knowledge base..." 
+              data-docs-search-input=""
+            />
+          </div>
+        </div>
+
+        <nav data-docs-nav="">
+          <Show 
+            when={q() && results().length > 0} 
+            fallback={
+              <For each={ctx.tree()}>
+                {group => (
+                  <div data-docs-nav-group="">
+                    <h4 data-docs-nav-group-title="">{group.title}</h4>
+                    <div data-docs-nav-group-list="">
+                      <For each={group.children}>
+                        {page => {
+                          const isActive = page.id === props.currentPageId
+                          return (
+                            <button 
+                              onClick={() => onSelect(page.id)}
+                              data-docs-nav-item=""
+                              data-active={isActive}
+                            >
+                              <span data-docs-nav-indicator="" data-active={isActive} />
+                              {page.title}
+                            </button>
+                          )
+                        }}
+                      </For>
+                    </div>
+                  </div>
+                )}
+              </For>
+            }
+          >
+            <div data-docs-search-results="">
+              <p data-docs-search-results-label="">
+                Search Results ({results().length})
+              </p>
+              <For each={results()}>
+                {page => (
+                  <button 
+                    onClick={() => { onSelect(page.id); onSearch('') }}
+                    data-docs-search-result-btn=""
+                  >
+                    <h5 data-docs-search-result-title="">{page.title}</h5>
+                    <Show when={page.description}><p data-docs-search-result-desc="">{page.description}</p></Show>
+                  </button>
+                )}
+              </For>
+            </div>
+          </Show>
+        </nav>
+      </aside>
+
+      <main data-docs-main="">
+        <div data-docs-content="">
+          {props.children}
+          <div data-docs-footer="">
+            <p data-docs-footer-copy="">© 2024 Geenius. Premium Documentation.</p>
+            <div data-docs-footer-links="">
+              <button data-docs-footer-link="">Edit on GitHub</button>
+              <button data-docs-footer-link="">Community Help</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

package/packages/solidjs-css/src/DocsProvider.tsx

@@ -0,0 +1,95 @@
+// @geenius-docs/solidjs — src/DocsProvider.tsx
+
+import { createContext, useContext, type ParentComponent } from 'solid-js'
+import { createSignal, createMemo } from 'solid-js'
+
+export interface DocsPage {
+  id: string
+  title: string
+  description?: string
+  content: unknown
+}
+
+export interface DocsGroup {
+  id: string
+  title: string
+  children: DocsPage[]
+}
+
+export type DocsTree = DocsGroup[]
+
+export interface DocsContextValue {
+  tree: DocsTree
+  currentPage: () => DocsPage | null
+  selectPage: (id: string) => void
+  searchQuery: () => string
+  setSearchQuery: (query: string) => void
+  searchResults: () => DocsPage[]
+}
+
+const DocsContext = createContext<DocsContextValue>()
+
+export interface DocsProviderProps {
+  tree: DocsTree
+}
+
+/**
+ * DocsProvider — SolidJS context managing docs state:
+ * current page, search, and tree navigation.
+ */
+export const DocsProvider: ParentComponent<DocsProviderProps> = (props) => {
+  const firstPageId = () => props.tree[0]?.children[0]?.id || null
+  const [currentPageId, setCurrentPageId] = createSignal<string | null>(firstPageId())
+  const [searchQuery, setSearchQuery] = createSignal('')
+
+  const currentPage = createMemo(() => {
+    const id = currentPageId()
+    if (!id) return null
+    for (const group of props.tree) {
+      const page = group.children.find(p => p.id === id)
+      if (page) return page
+    }
+    return null
+  })
+
+  const selectPage = (id: string) => setCurrentPageId(id)
+
+  const searchResults = createMemo(() => {
+    const q = searchQuery().toLowerCase()
+    if (!q) return []
+    const results: DocsPage[] = []
+    for (const group of props.tree) {
+      for (const page of group.children) {
+        if (
+          page.title.toLowerCase().includes(q) ||
+          page.description?.toLowerCase().includes(q) ||
+          (typeof page.content === 'string' && page.content.toLowerCase().includes(q))
+        ) {
+          results.push(page)
+        }
+      }
+    }
+    return results
+  })
+
+  const value: DocsContextValue = {
+    tree: props.tree,
+    currentPage,
+    selectPage,
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+  }
+
+  return (
+    <DocsContext.Provider value={value}>
+      {props.children}
+    </DocsContext.Provider>
+  )
+}
+
+export function useDocs(): DocsContextValue {
+  const ctx = useContext(DocsContext)
+  if (!ctx) throw new Error('useDocs must be used within a DocsProvider')
+  return ctx
+}

package/packages/solidjs-css/src/RouterDocsContent.tsx

@@ -0,0 +1,54 @@
+import { Component } from 'solid-js'
+import { SolidMarkdown as ReactMarkdown } from 'solid-markdown'
+import remarkGfm from 'remark-gfm'
+import { Link } from '@tanstack/solid-router'
+
+interface RouterDocsContentProps {
+  content: string
+  title: string
+  description: string
+}
+
+export const RouterDocsContent: Component<RouterDocsContentProps> = (props) => {
+  return (
+    <article data-rdocs-article="">
+      <header data-rdocs-header="">
+        <h1 data-rdocs-title="">{props.title}</h1>
+        <p data-rdocs-description="">{props.description}</p>
+      </header>
+
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h1: ({ children }) => <h1 data-rdocs-h1="">{children}</h1>,
+          h2: ({ children }) => <h2 data-rdocs-h2="">{children}</h2>,
+          h3: ({ children }) => <h3 data-rdocs-h3="">{children}</h3>,
+          h4: ({ children }) => <h4 data-rdocs-h4="">{children}</h4>,
+          p: ({ children }) => <p data-rdocs-p="">{children}</p>,
+          a: ({ href, children }) => {
+            if (href?.startsWith('/')) {
+              return <Link to={href} data-rdocs-a="">{children}</Link>
+            }
+            return <a href={href} target="_blank" rel="noopener noreferrer" data-rdocs-a="">{children}</a>
+          },
+          code: ({ className, children, ...rest }) => {
+            if (!className) return <code data-rdocs-code-inline="">{children}</code>
+            return <code class={className} data-rdocs-code-block="" {...rest}>{children}</code>
+          },
+          pre: ({ children }) => <pre data-rdocs-pre="">{children}</pre>,
+          ul: ({ children }) => <ul data-rdocs-ul="">{children}</ul>,
+          ol: ({ children }) => <ol data-rdocs-ol="">{children}</ol>,
+          li: ({ children }) => <li data-rdocs-li="">{children}</li>,
+          table: ({ children }) => <div data-rdocs-table-wrap=""><table data-rdocs-table="">{children}</table></div>,
+          thead: ({ children }) => <thead data-rdocs-thead="">{children}</thead>,
+          th: ({ children }) => <th data-rdocs-th="">{children}</th>,
+          td: ({ children }) => <td data-rdocs-td="">{children}</td>,
+          blockquote: ({ children }) => <blockquote data-rdocs-blockquote="">{children}</blockquote>,
+          hr: () => <hr data-rdocs-hr="" />,
+        }}
+      >
+        {props.content}
+      </ReactMarkdown>
+    </article>
+  )
+}

package/packages/solidjs-css/src/RouterDocsLayout.tsx

@@ -0,0 +1,104 @@
+import { createSignal, Component, For, Show } from 'solid-js'
+import { Link, useLocation } from '@tanstack/solid-router'
+import { Book, Menu, X, Search, ChevronRight } from 'lucide-solid'
+
+export interface DocItem {
+  slug: string
+  title: string
+  description: string
+  category: string
+  order: number
+}
+
+interface RouterDocsLayoutProps {
+  children?: any
+  docs: DocItem[]
+  currentSlug?: string
+}
+
+export const RouterDocsLayout: Component<RouterDocsLayoutProps> = (props) => {
+  const [isSidebarOpen, setIsSidebarOpen] = createSignal(false)
+  
+  const groupedDocs = () => props.docs.reduce((acc, doc) => {
+    if (!acc[doc.category]) { acc[doc.category] = [] }
+    acc[doc.category].push(doc)
+    return acc
+  }, {} as Record<string, DocItem[]>)
+
+  const sortedCategories = () => Object.entries(groupedDocs()).sort(([a], [b]) => {
+    const categoryOrder = ['Introduction', 'Getting Started', 'Guides', 'API', 'Advanced']
+    return categoryOrder.indexOf(a) - categoryOrder.indexOf(b)
+  })
+
+  return (
+    <div data-rdocs-layout="">
+      {/* Mobile Header */}
+      <div data-rdocs-mobile-header="">
+        <Link to="/" data-rdocs-logo="">
+          <Book />
+          <span>Documentation</span>
+        </Link>
+        <button onClick={() => setIsSidebarOpen(!isSidebarOpen())} data-rdocs-mobile-btn="">
+          {isSidebarOpen() ? <X /> : <Menu />}
+        </button>
+      </div>
+
+      <div data-rdocs-body="">
+        {/* Sidebar */}
+        <aside data-rdocs-sidebar="" data-open={isSidebarOpen()}>
+          <div data-rdocs-sidebar-content="">
+            <Link to="/" data-rdocs-logo="" data-desktop="">
+              <Book />
+              <span>Documentation</span>
+            </Link>
+
+            <div data-rdocs-search="">
+              <Search data-rdocs-search-icon="" />
+              <input type="text" placeholder="Search docs..." data-rdocs-search-input="" />
+            </div>
+
+            <nav data-rdocs-nav="">
+              <For each={sortedCategories()}>
+                {([category, categoryDocs]) => (
+                  <div data-rdocs-category-group="">
+                    <h3 data-rdocs-category-title="">{category}</h3>
+                    <ul data-rdocs-category-list="">
+                      <For each={categoryDocs.sort((a, b) => a.order - b.order)}>
+                        {(doc) => {
+                          const isActive = props.currentSlug === doc.slug
+                          return (
+                            <li>
+                              <Link
+                                to="/docs/$slug"
+                                params={{ slug: doc.slug }}
+                                activeOptions={{ exact: true }}
+                                onClick={() => setIsSidebarOpen(false)}
+                                data-rdocs-nav-link=""
+                                data-active={isActive}
+                              >
+                                <ChevronRight data-rdocs-chevron="" data-active={isActive} />
+                                {doc.title}
+                              </Link>
+                            </li>
+                          )
+                        }}
+                      </For>
+                    </ul>
+                  </div>
+                )}
+              </For>
+            </nav>
+          </div>
+        </aside>
+
+        <Show when={isSidebarOpen()}>
+          <div data-rdocs-overlay="" onClick={() => setIsSidebarOpen(false)} />
+        </Show>
+
+        <main data-rdocs-main="">
+          <div data-rdocs-content="">{props.children}</div>
+        </main>
+      </div>
+    </div>
+  )
+}

package/packages/solidjs-css/src/createDocs.ts

@@ -0,0 +1,62 @@
+// @geenius-docs/solidjs — src/createDocs.ts
+
+import { createSignal, createMemo, onMount } from 'solid-js'
+import type { DocsPage, DocsSidebar, DocsSearchResult, DocsProvider } from '@geenius-docs/shared'
+
+/**
+ * createDocs — SolidJS primitive wrapping a DocsProvider for docs rendering.
+ * SolidJS equivalent of useDocs hook.
+ */
+export function createDocs(provider: DocsProvider) {
+  const [sidebar, setSidebar] = createSignal<DocsSidebar | null>(null)
+  const [currentPage, setCurrentPage] = createSignal<DocsPage | null>(null)
+  const [searchResults, setSearchResults] = createSignal<DocsSearchResult[]>([])
+  const [isLoading, setIsLoading] = createSignal(false)
+  const [searchQuery, setSearchQuery] = createSignal('')
+
+  // Load sidebar on mount
+  onMount(async () => {
+    const sb = await provider.getSidebar()
+    setSidebar(sb)
+  })
+
+  const loadPage = async (slug: string) => {
+    setIsLoading(true)
+    try {
+      const page = await provider.getPage(slug)
+      setCurrentPage(page)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const search = async (query: string) => {
+    setSearchQuery(query)
+    if (!query.trim()) {
+      setSearchResults([])
+      return
+    }
+    const results = await provider.search(query)
+    setSearchResults(results)
+  }
+
+  const navigation = createMemo(() => {
+    const page = currentPage()
+    if (!page) return { prev: null, next: null }
+    return {
+      prev: page.prev ?? null,
+      next: page.next ?? null,
+    }
+  })
+
+  return {
+    sidebar,
+    currentPage,
+    navigation,
+    isLoading,
+    searchResults,
+    searchQuery,
+    loadPage,
+    search,
+  }
+}

package/packages/solidjs-css/src/index.ts

@@ -0,0 +1,7 @@
+export { DocsProvider, useDocs } from './DocsProvider'
+export type { DocsProviderProps } from './DocsProvider'
+export { createDocs, type CreateDocsOptions, type CreateDocsReturn } from './createDocs'
+
+export { DocsLayout } from './DocsLayout'
+export { RouterDocsLayout, type DocItem } from './RouterDocsLayout'
+export { RouterDocsContent } from './RouterDocsContent'

package/packages/solidjs-css/src/index.tsx

@@ -0,0 +1,17 @@
+// Primitives (re-exported from base SolidJS package)
+export { createDocs, createDocSearch, createDocsAdmin, createTableOfContents } from '@geenius-docs/solidjs'
+
+// Components — re-export from SolidJS base (BEM classes come from imported CSS)
+export { DocSidebar, DocPage, TableOfContents, Breadcrumbs, PageNavigation, DocSearch, VersionSelector, EditButton, DocsLayout } from '@geenius-docs/solidjs'
+
+// Pages — re-export from SolidJS base
+export { DocsIndexPage, DocViewPage, DocSearchPage, DocsAdminPage } from '@geenius-docs/solidjs'
+
+// Styles
+import './styles.css'
+
+// Re-export shared types
+export type {
+  DocPageType, DocSection, SearchResult, TocItem,
+  BreadcrumbItem, DocsConfig, DocAccess, DocStatus,
+} from '@geenius-docs/shared'

package/packages/solidjs-css/src/pages/DocViewPage.tsx

@@ -0,0 +1,111 @@
+import { createEffect, createMemo, Show } from 'solid-js'
+import type { DocPage as DocPageType, DocSection } from '@geenius-docs/shared'
+import { buildBreadcrumbs } from '@geenius-docs/shared'
+import { useDocs, useTableOfContents } from '../hooks'
+import { DocsLayout } from '../components/DocsLayout'
+import { DocPage } from '../components/DocPage'
+import { EditButton, PageNavigation } from '../components/common'
+import '../styles.css'
+
+interface DocViewPageProps {
+  tree: (DocSection & { pages: DocPageType[]; pageCount: number })[] | undefined
+  page: DocPageType | null | undefined
+  editPageUrl?: string
+  onNavigate: (page: DocPageType, section: DocSection) => void
+  onIncrementView?: (pageId: string) => void
+}
+
+export function DocViewPage(props: DocViewPageProps) {
+  const docs = useDocs(() => props.tree)
+  const { toc, activeId } = useTableOfContents(() => props.page?.content)
+
+  createEffect(() => {
+    if (props.page?.id && props.onIncrementView) {
+      props.onIncrementView(props.page.id)
+    }
+  })
+
+  const breadcrumbs = createMemo(() =>
+    props.page ? buildBreadcrumbs(docs().sections, props.page.sectionId, props.page.slug) : []
+  )
+
+  const navigation = createMemo(() => {
+    if (!props.page) return { prev: undefined, next: undefined }
+    const all = docs().flatPages
+    const idx = all.findIndex(p => p.id === props.page.id)
+    const sec = docs().sections.find(s => s.id === props.page.sectionId)
+    return {
+      prev: idx > 0 ? { title: all[idx - 1].title, href: `/docs/${sec?.slug ?? ''}/${all[idx - 1].slug}` } : undefined,
+      next: idx < all.length - 1 ? { title: all[idx + 1].title, href: `/docs/${sec?.slug ?? ''}/${all[idx + 1].slug}` } : undefined,
+    }
+  })
+
+  return (
+    <Show
+      when={!docs().isLoading && props.page !== undefined}
+      fallback={
+        <div class="docs__layout">
+          <div class="docs__sidebar" style={{ padding: '1rem' }}>
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} class="docs__skeleton" style={{ height: '32px', 'margin-bottom': '8px' }} />
+            ))}
+          </div>
+          <div class="docs__content" style={{ padding: '2rem' }}>
+            <div class="docs__skeleton" style={{ width: '384px', height: '40px', 'margin-bottom': '16px' }} />
+            {Array.from({ length: 10 }).map((_, i) => (
+              <div key={i} class="docs__skeleton" style={{ height: '16px', 'margin-bottom': '12px', width: `${60 + Math.random() * 40}%` }} />
+            ))}
+          </div>
+        </div>
+      }
+    >
+      <Show
+        when={props.page}
+        fallback={
+          <div class="docs__empty" style={{ 'min-height': '100vh', background: 'var(--docs-bg)' }}>
+            <div class="docs__empty-icon">🔍</div>
+            <h2 class="docs__empty-title">Page not found</h2>
+          </div>
+        }
+      >
+        <DocsLayout
+          sections={docs().sections}
+          toc={toc()}
+          activeHeadingId={activeId()}
+          breadcrumbs={breadcrumbs()}
+          currentPageId={props.page!.id}
+          onNavigate={props.onNavigate}
+        >
+          <div class="docs__page-header">
+            <h1 class="docs__page-title">{props.page!.title}</h1>
+            <div class="docs__reading-meta">
+              <span class="docs__reading-meta-author">
+                {props.page!.author.avatar ? (
+                  <img src={props.page!.author.avatar} alt="" class="docs__reading-meta-avatar" />
+                ) : (
+                  <span class="docs__reading-meta-avatar-placeholder">{props.page!.author.name[0]}</span>
+                )}
+                {props.page!.author.name}
+              </span>
+              {props.page!.readingTime > 0 && <span>{props.page!.readingTime} min read</span>}
+              {props.page!.viewCount > 0 && <span>{props.page!.viewCount.toLocaleString()} views</span>}
+            </div>
+            {props.page!.tags.length > 0 && (
+              <div class="docs__tags">
+                {props.page!.tags.map(t => (
+                  <span key={t} class="docs__tag">{t}</span>
+                ))}
+              </div>
+            )}
+          </div>
+          <DocPage page={props.page!} />
+          <div style={{ 'margin-top': '2.5rem', 'padding-top': '1.5rem', 'border-top': '1px solid var(--docs-border)', display: 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
+            <EditButton pageSlug={props.page!.slug} editUrl={props.editPageUrl} />
+            {props.page!.version && <span style={{ 'font-size': '0.6875rem', color: 'oklch(1 0 0/0.25)' }}>v{props.page!.version}</span>}
+          </div>
+          <PageNavigation prev={navigation().prev} next={navigation().next} />
+        </DocsLayout>
+      </Show>
+    </Show>
+  )
+}