@geenius/docs 0.1.0 → 0.4.1

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

@@ -1,106 +0,0 @@
-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

@@ -1,95 +0,0 @@
-// @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

@@ -1,54 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,62 +0,0 @@
-// @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

@@ -1,7 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// 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

@@ -1,111 +0,0 @@
-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>
-  )
-}