@geenius/docs 0.1.0

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

@@ -0,0 +1,332 @@
+import { createSignal, createMemo, Show } from 'solid-js'
+import type { DocPage, DocSection } from '@geenius-docs/shared'
+import type { DocsAdminActions } from '@geenius-docs/react'
+import '../styles.css'
+
+interface DocsAdminPageProps {
+  tree: (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  allPages?: DocPage[]
+  admin: DocsAdminActions
+}
+
+export function DocsAdminPage(props: DocsAdminPageProps) {
+  const sections = createMemo(() => props.tree ?? [])
+  const [selectedId, setSelectedId] = createSignal<string | null>(null)
+  const [showSF, setShowSF] = createSignal(false)
+  const [showPF, setShowPF] = createSignal(false)
+  const [sf, setSf] = createSignal({ title: '', slug: '', description: '', icon: '', access: 'team' as const })
+  const [pf, setPf] = createSignal({ title: '', slug: '', content: '', access: 'team' as const, tags: '' })
+
+  const selected = createMemo(() => sections().find(s => s.id === selectedId()))
+  const pages = createMemo(() => {
+    if (!selected()) return []
+    if (props.allPages) return props.allPages.filter(p => p.sectionId === selectedId())
+    return selected()!.pages ?? []
+  })
+
+  return (
+    <Show
+      when={props.tree !== undefined}
+      fallback={
+        <div style={{ 'min-height': '100vh', background: 'var(--docs-bg)', padding: '3rem 1.5rem' }}>
+          <div style={{ 'max-width': '72rem', margin: '0 auto' }}>
+            <div class="docs__skeleton" style={{ width: '192px', height: '40px', 'margin-bottom': '32px' }} />
+            <div class="docs__admin-grid">
+              <div class="docs__skeleton" style={{ height: '384px' }} />
+              <div class="docs__skeleton" style={{ height: '384px' }} />
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <div style={{ 'min-height': '100vh', background: 'var(--docs-bg)', color: 'var(--docs-text)' }}>
+        <div style={{ 'max-width': '72rem', margin: '0 auto', padding: '3rem 1.5rem' }}>
+          <h1 style={{ 'font-size': '1.5rem', 'font-weight': '700', 'margin-bottom': '2rem' }}>Docs Admin</h1>
+          <div class="docs__admin-grid">
+            <div class="docs__admin-panel">
+              <div class="docs__admin-panel-header">
+                <h2 class="docs__admin-panel-title">Sections</h2>
+                <button
+                  type="button"
+                  class="docs__admin-add-btn"
+                  onClick={() => setShowSF(!showSF())}
+                >
+                  + Add
+                </button>
+              </div>
+              <Show when={showSF()}>
+                <div class="docs__admin-form">
+                  <input
+                    class="docs__admin-input"
+                    placeholder="Title"
+                    value={sf().title}
+                    onChange={e => setSf({ ...sf(), title: e.target.value })}
+                  />
+                  <input
+                    class="docs__admin-input"
+                    placeholder="Slug"
+                    value={sf().slug}
+                    onChange={e => setSf({ ...sf(), slug: e.target.value })}
+                  />
+                  <input
+                    class="docs__admin-input"
+                    placeholder="Icon"
+                    value={sf().icon}
+                    onChange={e => setSf({ ...sf(), icon: e.target.value })}
+                  />
+                  <input
+                    class="docs__admin-input"
+                    placeholder="Description"
+                    value={sf().description}
+                    onChange={e => setSf({ ...sf(), description: e.target.value })}
+                  />
+                  <div class="docs__admin-form-actions">
+                    <button
+                      type="button"
+                      class="docs__admin-add-btn"
+                      onClick={async () => {
+                        await props.admin.createSection({
+                          ...sf(),
+                          order: sections().length,
+                          icon: sf().icon || undefined,
+                          description: sf().description || undefined,
+                        })
+                        setSf({ title: '', slug: '', description: '', icon: '', access: 'team' })
+                        setShowSF(false)
+                      }}
+                    >
+                      Create
+                    </button>
+                    <button
+                      type="button"
+                      style={{
+                        padding: '0.375rem 0.75rem',
+                        border: '1px solid var(--docs-border)',
+                        'border-radius': 'var(--docs-radius)',
+                        background: 'transparent',
+                        color: 'var(--docs-text)',
+                        'font-size': '0.6875rem',
+                        cursor: 'pointer',
+                      }}
+                      onClick={() => setShowSF(false)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </Show>
+              <Show
+                when={sections().length > 0}
+                fallback={
+                  <p
+                    style={{
+                      padding: '2rem',
+                      'text-align': 'center',
+                      'font-size': '0.875rem',
+                      color: 'var(--docs-text-muted)',
+                    }}
+                  >
+                    No sections
+                  </p>
+                }
+              >
+                {sections().map(s => (
+                  <div
+                    key={s.id}
+                    class={`docs__admin-section-item ${selectedId() === s.id ? 'docs__admin-section-item--selected' : ''}`}
+                    onClick={() => setSelectedId(s.id)}
+                  >
+                    {s.icon && <span>{s.icon}</span>}
+                    <span
+                      style={{
+                        flex: '1',
+                        'font-size': '0.875rem',
+                        'font-weight': '500',
+                        overflow: 'hidden',
+                        'text-overflow': 'ellipsis',
+                        'white-space': 'nowrap',
+                      }}
+                    >
+                      {s.title}
+                    </span>
+                    <span style={{ 'font-size': '0.6875rem', opacity: '0.4' }}>{s.pageCount ?? 0}</span>
+                    <button
+                      type="button"
+                      style={{
+                        background: 'transparent',
+                        border: 'none',
+                        color: 'oklch(1 0 0/0.2)',
+                        cursor: 'pointer',
+                        padding: '4px',
+                      }}
+                      onClick={e => {
+                        e.stopPropagation()
+                        if (confirm(`Delete "${s.title}"?`)) props.admin.deleteSection(s.id)
+                      }}
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ))}
+              </Show>
+            </div>
+            <div class="docs__admin-panel">
+              <div class="docs__admin-panel-header">
+                <h2 class="docs__admin-panel-title">
+                  {selected() ? `Pages — ${selected()!.title}` : 'Pages'}
+                </h2>
+                {selected() && (
+                  <button
+                    type="button"
+                    class="docs__admin-add-btn"
+                    onClick={() => setShowPF(!showPF())}
+                  >
+                    + Add
+                  </button>
+                )}
+              </div>
+              <Show
+                when={!selected()}
+                fallback={
+                  <>
+                    <Show when={showPF() && selected()}>
+                      <div class="docs__admin-form">
+                        <input
+                          class="docs__admin-input"
+                          placeholder="Title"
+                          value={pf().title}
+                          onChange={e => setPf({ ...pf(), title: e.target.value })}
+                        />
+                        <input
+                          class="docs__admin-input"
+                          placeholder="Slug"
+                          value={pf().slug}
+                          onChange={e => setPf({ ...pf(), slug: e.target.value })}
+                        />
+                        <textarea
+                          class="docs__admin-input docs__admin-textarea"
+                          placeholder="Content (MDX)"
+                          value={pf().content}
+                          onChange={e => setPf({ ...pf(), content: e.target.value })}
+                        />
+                        <input
+                          class="docs__admin-input"
+                          placeholder="Tags (comma)"
+                          value={pf().tags}
+                          onChange={e => setPf({ ...pf(), tags: e.target.value })}
+                        />
+                        <div class="docs__admin-form-actions">
+                          <button
+                            type="button"
+                            class="docs__admin-add-btn"
+                            onClick={async () => {
+                              await props.admin.createPage({
+                                title: pf().title,
+                                slug: pf().slug,
+                                content: pf().content,
+                                sectionId: selectedId()!,
+                                access: pf().access,
+                                tags: pf().tags ? pf().tags.split(',').map(t => t.trim()) : [],
+                                order: pages().length,
+                              })
+                              setPf({ title: '', slug: '', content: '', access: 'team', tags: '' })
+                              setShowPF(false)
+                            }}
+                          >
+                            Create
+                          </button>
+                          <button
+                            type="button"
+                            style={{
+                              padding: '0.375rem 0.75rem',
+                              border: '1px solid var(--docs-border)',
+                              'border-radius': 'var(--docs-radius)',
+                              background: 'transparent',
+                              color: 'var(--docs-text)',
+                              'font-size': '0.6875rem',
+                              cursor: 'pointer',
+                            }}
+                            onClick={() => setShowPF(false)}
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      </div>
+                    </Show>
+                    <Show
+                      when={pages().length > 0}
+                      fallback={
+                        <p
+                          style={{
+                            padding: '3rem',
+                            'text-align': 'center',
+                            'font-size': '0.875rem',
+                            color: 'var(--docs-text-muted)',
+                          }}
+                        >
+                          No pages
+                        </p>
+                      }
+                    >
+                      {pages().map(page => (
+                        <div key={page.id} class="docs__admin-page-item">
+                          <div class="docs__admin-page-info">
+                            <p class="docs__admin-page-title">{page.title}</p>
+                            <p class="docs__admin-page-slug">/{page.slug}</p>
+                          </div>
+                          <span class={`docs__status-badge docs__status-badge--${page.status}`}>
+                            {page.status}
+                          </span>
+                          <div class="docs__admin-actions">
+                            {page.status === 'draft' && (
+                              <button
+                                type="button"
+                                class="docs__admin-action-btn docs__admin-action-btn--publish"
+                                onClick={() => props.admin.publishPage(page.id)}
+                              >
+                                Publish
+                              </button>
+                            )}
+                            {page.status === 'published' && (
+                              <button
+                                type="button"
+                                class="docs__admin-action-btn docs__admin-action-btn--archive"
+                                onClick={() => props.admin.archivePage(page.id)}
+                              >
+                                Archive
+                              </button>
+                            )}
+                            <button
+                              type="button"
+                              class="docs__admin-action-btn docs__admin-action-btn--delete"
+                              onClick={() => {
+                                if (confirm(`Delete "${page.title}"?`)) props.admin.deletePage(page.id)
+                              }}
+                            >
+                              ✕
+                            </button>
+                          </div>
+                        </div>
+                      ))}
+                    </Show>
+                  </>
+                }
+              >
+                <p
+                  style={{
+                    padding: '4rem',
+                    'text-align': 'center',
+                    'font-size': '0.875rem',
+                    color: 'var(--docs-text-muted)',
+                  }}
+                >
+                  Select a section
+                </p>
+              </Show>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}

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

@@ -0,0 +1,116 @@
+import { createSignal, createEffect, createMemo, Show } from 'solid-js'
+import type { DocPage, DocSection, SearchResult } from '@geenius-docs/shared'
+import { buildDocsIndex, searchDocs } from '@geenius-docs/shared'
+import { useDocs, useDocSearch } from '../hooks'
+import { DocSearch } from '../components/DocSearch'
+import '../styles.css'
+
+interface DocsIndexPageProps {
+  tree: (DocSection & { pages: DocPage[]; pageCount: number })[] | undefined
+  onSelectPage?: (page: DocPage, section: DocSection) => void
+}
+
+export function DocsIndexPage(props: DocsIndexPageProps) {
+  const docs = useDocs(() => props.tree)
+  const [isSearchOpen, setIsSearchOpen] = createSignal(false)
+
+  const searchFn = createMemo(() => (q: string): SearchResult[] => {
+    const idx = buildDocsIndex(docs().flatPages, docs().sections)
+    return searchDocs(q, idx)
+  })
+
+  const search = useDocSearch(searchFn)
+
+  createEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setIsSearchOpen(true)
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  })
+
+  return (
+    <Show
+      when={!docs().isLoading}
+      fallback={
+        <div style={{ 'min-height': '100vh', background: 'var(--docs-bg)', padding: '4rem 1.5rem' }}>
+          <div style={{ 'max-width': '64rem', margin: '0 auto' }}>
+            <div class="docs__skeleton" style={{ width: '256px', height: '40px', 'margin-bottom': '40px' }} />
+            <div class="docs__skeleton" style={{ 'max-width': '560px', height: '48px', 'margin-bottom': '32px' }} />
+            <div class="docs__section-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} class="docs__skeleton" style={{ height: '144px' }} />
+              ))}
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <Show
+        when={docs().sections.length > 0}
+        fallback={
+          <div class="docs__empty" style={{ 'min-height': '100vh', background: 'var(--docs-bg)' }}>
+            <div class="docs__empty-icon">📚</div>
+            <h2 class="docs__empty-title">No documentation yet</h2>
+            <p class="docs__empty-desc">Create your first section and pages to get started.</p>
+          </div>
+        }
+      >
+        <div style={{ 'min-height': '100vh', background: 'var(--docs-bg)', color: 'var(--docs-text)' }}>
+          <div style={{ 'max-width': '64rem', margin: '0 auto', padding: '4rem 1.5rem' }}>
+            <h1 style={{ 'font-size': '2.25rem', 'font-weight': '700', 'letter-spacing': '-0.02em', 'margin-bottom': '0.5rem' }}>Documentation</h1>
+            <p style={{ 'font-size': '1.125rem', color: 'var(--docs-text-muted)', 'margin-bottom': '2.5rem' }}>Browse guides, API references, and tutorials.</p>
+
+            <button
+              type="button"
+              class="docs__search-trigger"
+              onClick={() => setIsSearchOpen(true)}
+            >
+              <svg class="docs__search-trigger-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" /></svg>
+              <span class="docs__search-trigger-text">Search documentation…</span>
+              <kbd class="docs__search-trigger-kbd">⌘K</kbd>
+            </button>
+
+            <div class="docs__section-grid">
+              {docs()
+                .sections.filter(s => !s.parentId)
+                .map(section => (
+                  <button
+                    key={section.id}
+                    type="button"
+                    class="docs__section-card"
+                    onClick={() => {
+                      const fp = section.pages?.[0]
+                      if (fp && props.onSelectPage) props.onSelectPage(fp, section)
+                    }}
+                  >
+                    {section.icon && <div class="docs__section-card-icon">{section.icon}</div>}
+                    <h3 class="docs__section-card-title">{section.title}</h3>
+                    {section.description && <p class="docs__section-card-desc">{section.description}</p>}
+                    <div class="docs__section-card-meta">{section.pageCount ?? 0} pages</div>
+                  </button>
+                ))}
+            </div>
+          </div>
+          <DocSearch
+            results={search.results()}
+            query={search.query()}
+            onQuery={search.setQuery}
+            onSelect={r => {
+              setIsSearchOpen(false)
+              search.clearSearch()
+              const sec = docs().sections.find(s => s.slug === r.sectionSlug)
+              const pg = docs().flatPages.find(p => p.id === r.pageId)
+              if (pg && sec && props.onSelectPage) props.onSelectPage(pg, sec)
+            }}
+            isOpen={isSearchOpen()}
+            onClose={() => setIsSearchOpen(false)}
+          />
+        </div>
+      </Show>
+    </Show>
+  )
+}

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

@@ -0,0 +1,3 @@
+export { DocViewPage } from './DocViewPage'
+export { DocsIndexPage } from './DocsIndexPage'
+export { DocsAdminPage } from './DocsAdminPage'

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

@@ -0,0 +1 @@
+export * from '@geenius-docs/solidjs';