docbook 0.1.0

data/frontend/src/composables/useSearch.ts

@@ -0,0 +1,249 @@
+import FlexSearch from 'flexsearch'
+import { useDocumentStore, type TocItem } from '@/stores/documentStore'
+
+interface SearchResult {
+  id: string
+  title: string
+  type: string
+}
+
+export type { SearchResult }
+
+const DB_NAME = 'docbook_search'
+const STORE_NAME = 'index'
+const DB_VERSION = 1
+
+class SearchIndexDB {
+  private db: IDBDatabase | null = null
+
+  async init(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(DB_NAME, DB_VERSION)
+
+      request.onerror = () => reject(request.error)
+
+      request.onsuccess = () => {
+        this.db = request.result
+        resolve()
+      }
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          db.createObjectStore(STORE_NAME, { keyPath: 'docId' })
+        }
+      }
+    })
+  }
+
+  async saveIndex(docId: string, data: unknown): Promise<void> {
+    if (!this.db) return
+    return new Promise((resolve, reject) => {
+      const tx = this.db.transaction(STORE_NAME, 'readwrite')
+      const store = tx.objectStore(STORE_NAME)
+      const request = store.put({ docId, data, timestamp: Date.now() })
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  async loadIndex(docId: string): Promise<unknown | null> {
+    if (!this.db) return null
+    return new Promise((resolve, reject) => {
+      const tx = this.db.transaction(STORE_NAME, 'readonly')
+      const store = tx.objectStore(STORE_NAME)
+      const request = store.get(docId)
+      request.onsuccess = () => resolve(request.result?.data || null)
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  async clear(): Promise<void> {
+    if (!this.db) return
+    return new Promise((resolve, reject) => {
+      const tx = this.db.transaction(STORE_NAME, 'readwrite')
+      const store = tx.objectStore(STORE_NAME)
+      const request = store.clear()
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+}
+
+let searchDb: SearchIndexDB | null = null
+
+async function getSearchDb(): Promise<SearchIndexDB> {
+  if (!searchDb) {
+    searchDb = new SearchIndexDB()
+    await searchDb.init()
+  }
+  return searchDb
+}
+
+export function useSearch() {
+  const documentStore = useDocumentStore()
+
+  const query = ref('')
+  const results = ref<SearchResult[]>([])
+  const isSearching = ref(false)
+  const isIndexed = ref(false)
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  // FlexSearch Document index for TOC items
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let index: any = new (FlexSearch as any).Document({
+    document: {
+      id: 'id',
+      index: ['title'],
+      store: ['id', 'title', 'type']
+    },
+    tokenize: 'forward',
+    resolution: 9
+  })
+
+  // Serialize index for IndexedDB storage
+  function serializeIndex(): string {
+    return index.export()
+  }
+
+  // Load index from IndexedDB
+  async function loadFromDb(): Promise<boolean> {
+    try {
+      const db = await getSearchDb()
+      const docId = window.location.pathname + '-' + (documentStore.title || 'default')
+      const data = await db.loadIndex(docId)
+      if (data) {
+        index = new (FlexSearch as any).Document({
+          document: {
+            id: 'id',
+            index: ['title'],
+            store: ['id', 'title', 'type']
+          },
+          tokenize: 'forward',
+          resolution: 9
+        })
+        index.import(data)
+        isIndexed.value = true
+        return true
+      }
+    } catch (e) {
+      console.warn('Failed to load search index from IndexedDB:', e)
+    }
+    return false
+  }
+
+  // Save index to IndexedDB
+  async function saveToDb() {
+    try {
+      const db = await getSearchDb()
+      const docId = window.location.pathname + '-' + (documentStore.title || 'default')
+      await db.saveIndex(docId, serializeIndex())
+    } catch (e) {
+      console.warn('Failed to save search index to IndexedDB:', e)
+    }
+  }
+
+  function buildIndexes() {
+    index.clear()
+    addToIndex(documentStore.sections)
+    saveToDb() // Persist to IndexedDB
+    isIndexed.value = true
+  }
+
+  function addToIndex(items: TocItem[]) {
+    items.forEach(item => {
+      index.add({
+        id: item.id,
+        title: item.title,
+        type: item.type
+      })
+      if (item.children && item.children.length > 0) {
+        addToIndex(item.children)
+      }
+    })
+  }
+
+  function search() {
+    if (!query.value.trim()) {
+      results.value = []
+      return
+    }
+
+    isSearching.value = true
+
+    const searchResults = index.search(query.value, { limit: 30, enrich: true })
+
+    const combined: SearchResult[] = []
+    const seen = new Set<string>()
+
+    if (Array.isArray(searchResults)) {
+      searchResults.forEach((field: { result: Array<{ id: string; doc?: SearchResult }> }) => {
+        if (field.result && Array.isArray(field.result)) {
+          field.result.forEach((r: { id: string; doc?: SearchResult }) => {
+            if (r.doc && !seen.has(r.id)) {
+              seen.add(r.id)
+              combined.push(r.doc)
+            }
+          })
+        }
+      })
+    }
+
+    results.value = combined.slice(0, 50)
+    isSearching.value = false
+  }
+
+  function debouncedSearch() {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(search, 150)
+  }
+
+  watch(query, debouncedSearch)
+
+  // Watch for document data changes to rebuild indexes
+  watch(
+    () => documentStore.documentData,
+    async () => {
+      // Try loading from IndexedDB first
+      const loaded = await loadFromDb()
+      if (!loaded) {
+        // Defer index building to after page load to avoid blocking
+        if ('requestIdleCallback' in window) {
+          requestIdleCallback(() => buildIndexes(), { timeout: 2000 })
+        } else {
+          setTimeout(buildIndexes, 100)
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  function selectResult(result: SearchResult) {
+    // Scroll to section and close search
+    const element = document.getElementById(result.id)
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' })
+      closeSearch()
+    }
+  }
+
+  function closeSearch() {
+    query.value = ''
+    results.value = []
+  }
+
+  function rebuildIndex() {
+    buildIndexes()
+  }
+
+  return {
+    query,
+    results,
+    isSearching,
+    isIndexed,
+    search,
+    selectResult,
+    closeSearch,
+    rebuildIndex
+  }
+}

data/frontend/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

data/frontend/src/stores/documentStore.ts

@@ -0,0 +1,221 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export interface TocItem {
+  id: string
+  title: string
+  type: 'chapter' | 'appendix' | 'part' | 'section' | 'glossary' | 'bibliography' | 'index' | 'reference' | 'preface'
+  children: TocItem[]
+  number?: string
+}
+
+// Block types for structured content (includes both block-level and inline types)
+export type BlockType =
+  | 'paragraph'
+  | 'code'
+  | 'image'
+  | 'blockquote'
+  | 'ordered_list'
+  | 'itemized_list'
+  | 'list_item'
+  | 'definition_list'
+  | 'definition_term'
+  | 'definition_description'
+  | 'bibliography_entry'
+  | 'reference_entry'
+  | 'reference_meta'
+  | 'reference_class'
+  | 'reference_badge'
+  | 'reference_name'
+  | 'reference_definition'
+  | 'description_section'
+  | 'example_output'
+  | 'note'
+  | 'warning'
+  | 'caution'
+  | 'important'
+  | 'tip'
+  | 'danger'
+  | 'section'
+  | 'heading'
+  // Index types
+  | 'index_section'
+  | 'index_letter'
+  | 'index_entry'
+  | 'index_reference'
+  | 'index_see'
+  | 'index_see_also'
+  // Bibliography types
+  | 'biblio_abbrev'
+  | 'biblio_citetitle'
+  | 'biblio_author'
+  | 'biblio_personname'
+  | 'biblio_firstname'
+  | 'biblio_surname'
+  | 'biblio_publishername'
+  | 'biblio_pubdate'
+  | 'biblio_orgname'
+  | 'biblio_bibliosource'
+  // Inline types (used in children of paragraph blocks)
+  | 'text'
+  | 'strong'
+  | 'italic'
+  | 'emphasis'
+  | 'codetext'
+  | 'link'
+  | 'biblioref'
+  | 'citation'
+  | 'citation_link'
+  | 'xref'
+  | 'inline_image'
+
+export interface ContentBlock {
+  type: BlockType
+  text?: string
+  src?: string
+  alt?: string
+  title?: string
+  language?: string
+  className?: string  // For bibliography elements
+  children?: ContentBlock[]
+}
+
+export interface SectionContent {
+  section_id: string
+  blocks: ContentBlock[]
+}
+
+// Computed index data from Ruby
+export interface IndexTerm {
+  primary: string
+  secondary?: string
+  tertiary?: string
+  section_id?: string
+  section_title?: string
+  sort_as?: string
+  sees?: string[]
+  see_alsos?: string[]
+}
+
+export interface IndexGroup {
+  letter: string
+  entries: IndexTerm[]
+}
+
+export interface IndexData {
+  title?: string
+  type?: string
+  groups: IndexGroup[]
+}
+
+export interface DocumentData {
+  title: string
+  sections: TocItem[]
+  numbering: Record<string, string>
+  content: Record<string, SectionContent>
+  index: IndexData | null
+}
+
+export const useDocumentStore = defineStore('document', () => {
+  const documentData = ref<DocumentData | null>(null)
+
+  function convertNumbering(numbering: any): Record<string, string> {
+    const map: Record<string, string> = {}
+    if (Array.isArray(numbering)) {
+      // NumberingEntry collection serializes as direct array [{id, value}]
+      numbering.forEach((e: { id: string, value: string }) => { map[e.id] = e.value })
+    } else if (numbering && typeof numbering === 'object' && Array.isArray(numbering.entries)) {
+      numbering.entries.forEach((e: { id: string, value: string }) => { map[e.id] = e.value })
+    }
+    return map
+  }
+
+  function convertContent(content: any): Record<string, SectionContent> {
+    const map: Record<string, SectionContent> = {}
+    if (content && typeof content === 'object' && Array.isArray(content.entries)) {
+      content.entries.forEach((e: { key: string, value: SectionContent }) => { map[e.key] = e.value })
+    }
+    return map
+  }
+
+  function loadFromWindow(): Promise<void> {
+    // Check if DOCBOOK_DATA is set (single_file mode with inline JSON)
+    const inlineData = (window as any).DOCBOOK_DATA
+    if (inlineData && inlineData !== null) {
+      const data = inlineData as any
+
+      // Extract sections and numbering from toc model
+      if (data.toc) {
+        data.sections = data.toc.sections || []
+        data.numbering = convertNumbering(data.toc.numbering)
+        delete data.toc
+      }
+
+      // Content from ContentData model
+      data.content = convertContent(data.content)
+
+      // Index is already a proper Index model, keep as-is
+      if (!data.index || (data.index && typeof data.index === 'object' && !Array.isArray(data.index.groups) && !Object.keys(data.index).length)) {
+        data.index = null
+      }
+
+      documentData.value = data as DocumentData
+      return Promise.resolve()
+    }
+
+    // Otherwise try to fetch from docbook.data.json (directory mode)
+    return fetch('docbook.data.json')
+      .then(res => {
+        if (!res.ok) throw new Error('Failed to load docbook.data.json')
+        return res.json()
+      })
+      .then(data => {
+        const d = data as any
+        if (d.toc) {
+          d.sections = d.toc.sections || []
+          d.numbering = convertNumbering(d.toc.numbering)
+          delete d.toc
+        }
+        d.content = convertContent(d.content)
+        if (!d.index) d.index = null
+        documentData.value = d as DocumentData
+      })
+      .catch(err => {
+        console.error('Failed to load document data:', err)
+        documentData.value = null
+      })
+  }
+
+  const title = computed(() => documentData.value?.title || 'DocBook Document')
+  const sections = computed(() => documentData.value?.sections || [])
+  const numbering = computed(() => documentData.value?.numbering || {})
+  const content = computed(() => documentData.value?.content || {})
+  const index = computed(() => documentData.value?.index || null)
+
+  // Get structured content for a section
+  function getSectionContent(id: string): SectionContent | null {
+    return content.value[id] || null
+  }
+
+  // Legacy: get pre-rendered HTML content (for backward compatibility - returns empty string)
+  function getContent(_id: string): string {
+    return ''
+  }
+
+  function getNumbering(id: string): string {
+    return numbering.value[id] || ''
+  }
+
+  return {
+    documentData,
+    loadFromWindow,
+    title,
+    sections,
+    numbering,
+    content,
+    index,
+    getSectionContent,
+    getContent,
+    getNumbering
+  }
+})

data/frontend/src/stores/uiStore.ts

@@ -0,0 +1,98 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export type Theme = 'light' | 'dark' | 'system'
+export type FontFamily = 'sans' | 'serif'
+
+export const useUiStore = defineStore('ui', () => {
+  const theme = ref<Theme>((localStorage.getItem('docbook-theme') as Theme) || 'system')
+  const fontFamily = ref<FontFamily>((localStorage.getItem('docbook-font') as FontFamily) || 'sans')
+  const sidebarOpen = ref(false)
+  const searchOpen = ref(false)
+  const activeSectionId = ref<string | null>(null)
+
+  function initTheme() {
+    applyTheme()
+  }
+
+  function applyTheme() {
+    const isDark = theme.value === 'dark' ||
+      (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    document.documentElement.classList.toggle('dark', isDark)
+  }
+
+  function setTheme(newTheme: Theme) {
+    theme.value = newTheme
+    localStorage.setItem('docbook-theme', newTheme)
+    applyTheme()
+  }
+
+  function toggleTheme() {
+    if (theme.value === 'light') {
+      setTheme('dark')
+    } else if (theme.value === 'dark') {
+      setTheme('system')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  function setFontFamily(newFont: FontFamily) {
+    fontFamily.value = newFont
+    localStorage.setItem('docbook-font', newFont)
+    document.body.classList.toggle('font-serif', newFont === 'serif')
+    document.body.classList.toggle('font-sans', newFont === 'sans')
+  }
+
+  function openSidebar() {
+    sidebarOpen.value = true
+  }
+
+  function closeSidebar() {
+    sidebarOpen.value = false
+  }
+
+  function toggleSidebar() {
+    sidebarOpen.value = !sidebarOpen.value
+  }
+
+  function openSearch() {
+    searchOpen.value = true
+  }
+
+  function closeSearch() {
+    searchOpen.value = false
+  }
+
+  function setActiveSection(id: string) {
+    activeSectionId.value = id
+  }
+
+  // Watch for system theme changes
+  if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (theme.value === 'system') {
+        applyTheme()
+      }
+    })
+  }
+
+  return {
+    theme,
+    fontFamily,
+    sidebarOpen,
+    searchOpen,
+    activeSectionId,
+    initTheme,
+    applyTheme,
+    setTheme,
+    toggleTheme,
+    setFontFamily,
+    openSidebar,
+    closeSidebar,
+    toggleSidebar,
+    openSearch,
+    closeSearch,
+    setActiveSection
+  }
+})