docbook 0.1.0

data/frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "docbook-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "flexsearch": "^0.7.43",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0",
+    "vue-tsc": "^2.0.6"
+  }
+}

data/frontend/src/App.vue

@@ -0,0 +1,230 @@
+<template>
+  <EbookContainer :class="['h-screen overflow-hidden', ebookStore.getThemeClass()]" :style="ebookStore.getCssVariables()">
+    <!-- Mobile overlay -->
+    <div
+      v-if="uiStore.sidebarOpen"
+      @click="uiStore.closeSidebar"
+      class="fixed inset-0 bg-black/50 z-40 lg:hidden"
+    ></div>
+
+    <AppSidebar />
+
+    <!-- Ebook Top Bar -->
+    <EbookTopBar
+      :title="documentStore.title"
+      :sidebar-open="uiStore.sidebarOpen"
+      @toggle-toc="toggleToc"
+      @toggle-settings="ebookStore.toggleSettings"
+    />
+
+    <main ref="mainContent" :class="[
+      'h-screen overflow-y-auto pt-14 transition-all duration-200',
+      uiStore.sidebarOpen ? 'lg:pl-[280px]' : ''
+    ]" @scroll="handleScroll">
+      <!-- Active section breadcrumb -->
+      <div v-if="activeSection" class="sticky top-0 z-10 border-b backdrop-blur-sm px-6 py-2 text-sm"
+           :class="[
+             'bg-white/90 dark:bg-gray-900/90 border-gray-200 dark:border-gray-700',
+             'text-gray-600 dark:text-gray-400'
+           ]">
+        <div class="max-w-4xl mx-auto flex items-center gap-2">
+          <span v-if="activeSectionParent" :class="['text-gray-900', 'dark:text-gray-100']">{{ activeSectionParent.title }} /</span>
+          <span class="font-medium" :class="['text-gray-900 dark:text-gray-100']">{{ activeSection.title }}</span>
+        </div>
+      </div>
+
+      <div class="px-6 py-10 lg:px-8 lg:py-12 mx-auto" :style="{ maxWidth: '72rem', margin: '0 auto' }">
+        <!-- Article content (no sections) -->
+        <div v-if="!hasSections" class="db-content">
+          <BlockRenderer v-if="articleContent" :blocks="articleContent.blocks" />
+        </div>
+
+        <!-- Section content -->
+        <template v-else>
+          <div v-for="section in documentStore.sections" :key="section.id">
+            <ChapterSection v-if="section.type === 'chapter'" :section="section" />
+            <AppendixSection v-else-if="section.type === 'appendix'" :section="section" />
+            <PartSection v-else-if="section.type === 'part'" :section="section" />
+            <SectionContent v-else :section="section" />
+          </div>
+        </template>
+
+        <!-- Footer -->
+        <footer class="mt-16 pt-8 border-t text-center text-sm" :class="['border-gray-200 dark:border-gray-700', 'text-gray-500 dark:text-gray-400']">
+          Generated by <a href="https://github.com/metanorma/metanorma-docbook" class="hover:underline" :class="['text-blue-600 dark:text-blue-400']">Metanorma Docbook</a> gem
+        </footer>
+      </div>
+    </main>
+
+    <SearchModal />
+    <SettingsPanel />
+
+    <!-- Keyboard shortcut listener -->
+    <Teleport to="body">
+      <div @keydown="handleGlobalKeydown"></div>
+    </Teleport>
+  </EbookContainer>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed, ref } from 'vue'
+import { useDocumentStore, type TocItem } from '@/stores/documentStore'
+import { useUiStore } from '@/stores/uiStore'
+import { useEbookStore } from '@/composables/useEbookStore'
+import AppSidebar from '@/components/AppSidebar.vue'
+import SearchModal from '@/components/SearchModal.vue'
+import SettingsPanel from '@/components/SettingsPanel.vue'
+import ChapterSection from '@/components/ChapterSection.vue'
+import AppendixSection from '@/components/AppendixSection.vue'
+import PartSection from '@/components/PartSection.vue'
+import SectionContent from '@/components/SectionContent.vue'
+import BlockRenderer from '@/components/BlockRenderer.vue'
+import EbookTopBar from '@/components/EbookTopBar.vue'
+import EbookContainer from '@/components/EbookContainer.vue'
+
+const documentStore = useDocumentStore()
+const uiStore = useUiStore()
+const ebookStore = useEbookStore()
+const mainContent = ref<HTMLElement | null>(null)
+
+function toggleToc() {
+  uiStore.toggleSidebar()
+}
+
+const hasSections = computed(() => documentStore.sections && documentStore.sections.length > 0)
+
+// Article content for documents without sections
+const articleContent = computed(() => documentStore.getSectionContent('article-content'))
+
+// Find the currently active section based on scroll position
+const activeSection = computed(() => {
+  if (!uiStore.activeSectionId) return null
+  return findSectionById(documentStore.sections, uiStore.activeSectionId)
+})
+
+// Find parent section if active section is nested
+const activeSectionParent = computed((): TocItem | null => {
+  if (!uiStore.activeSectionId) return null
+  for (const section of documentStore.sections) {
+    if (section.children && section.children.some(c => c.id === uiStore.activeSectionId)) {
+      return section
+    }
+  }
+  return null
+})
+
+function findSectionById(sections: TocItem[], id: string): TocItem | null {
+  for (const section of sections) {
+    if (section.id === id) return section
+    if (section.children) {
+      const found = findSectionById(section.children, id)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+let scrollTimeout: ReturnType<typeof setTimeout> | null = null
+
+function handleScroll() {
+  if (scrollTimeout) clearTimeout(scrollTimeout)
+  scrollTimeout = setTimeout(() => {
+    updateActiveSection()
+  }, 50)
+}
+
+function updateActiveSection() {
+  if (!mainContent.value) return
+
+  const scrollTop = mainContent.value.scrollTop
+  const sections = documentStore.sections
+
+  let foundSection: TocItem | null = null
+
+  function checkSection(section: TocItem) {
+    const element = document.getElementById(section.id)
+    if (!element) return
+
+    const rect = element.getBoundingClientRect()
+    const offsetTop = rect.top + scrollTop - 100
+
+    if (scrollTop >= offsetTop - 100) {
+      foundSection = section
+    }
+  }
+
+  function walkSections(sects: TocItem[]) {
+    for (const sect of sects) {
+      checkSection(sect)
+      if (sect.children) {
+        walkSections(sect.children)
+      }
+    }
+  }
+
+  walkSections(sections)
+
+  if (foundSection && (foundSection as TocItem).id !== uiStore.activeSectionId) {
+    uiStore.setActiveSection((foundSection as TocItem).id)
+  }
+}
+
+onMounted(() => {
+  documentStore.loadFromWindow()
+
+  // Clean up DOCBOOK_DATA from DOM to keep DOM small
+  delete (window as any).DOCBOOK_DATA
+
+  ebookStore.applyTheme()
+
+  // Force close settings panel on mount
+  if (ebookStore.settingsOpen.value) {
+    ebookStore.toggleSettings()
+  }
+
+  // Open sidebar by default on desktop
+  if (window.innerWidth >= 1024) {
+    uiStore.openSidebar()
+  }
+
+  // Handle hash navigation for anchor links
+  handleHashNavigation()
+  window.addEventListener('hashchange', handleHashNavigation)
+
+  // Global keyboard shortcuts
+  document.addEventListener('keydown', handleGlobalKeydown)
+
+  // Initial active section
+  setTimeout(updateActiveSection, 100)
+})
+
+function handleHashNavigation() {
+  const hash = window.location.hash
+  if (!hash) return
+  const id = hash.slice(1) // remove #
+  const element = document.getElementById(id)
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+
+function handleGlobalKeydown(e: KeyboardEvent) {
+  if (e.key === '/' && !isInputFocused()) {
+    e.preventDefault()
+    uiStore.openSearch()
+  }
+  if (e.key === 'Escape') {
+    if (uiStore.searchOpen) {
+      uiStore.closeSearch()
+    }
+    if (uiStore.sidebarOpen) {
+      uiStore.closeSidebar()
+    }
+  }
+}
+
+function isInputFocused(): boolean {
+  const active = document.activeElement
+  return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement
+}
+</script>

data/frontend/src/app.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import './styles.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#docbook-app')

data/frontend/src/components/AppSidebar.vue

@@ -0,0 +1,116 @@
+<template>
+  <aside
+    :class="[
+      'fixed top-0 left-0 z-50 w-[280px] h-full bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto transition-transform duration-200',
+      uiStore.sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+    ]"
+  >
+    <!-- Sidebar Header -->
+    <div class="sticky top-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4 z-10">
+      <div class="flex items-center justify-between mb-3">
+        <span class="font-bold text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 truncate pr-2">
+          {{ documentStore.title }}
+        </span>
+        <button
+          @click="uiStore.closeSidebar"
+          class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Search button -->
+      <button
+        @click="uiStore.openSearch"
+        class="w-full flex items-center gap-2 px-3 py-1.5 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-400 transition-colors"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+        </svg>
+        <span>Search headings...</span>
+        <kbd class="ml-auto text-xs bg-gray-100 dark:bg-gray-600 px-1.5 py-0.5 rounded">/</kbd>
+      </button>
+
+      <!-- Font toggle -->
+      <div class="flex gap-1 mt-3">
+        <button
+          @click="setFontFamily('sans')"
+          :class="uiStore.fontFamily === 'sans' ? 'bg-blue-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'"
+          class="flex-1 py-1 px-2 text-xs rounded-md transition-colors font-sans"
+        >
+          Sans
+        </button>
+        <button
+          @click="setFontFamily('serif')"
+          :class="uiStore.fontFamily === 'serif' ? 'bg-blue-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'"
+          class="flex-1 py-1 px-2 text-xs rounded-md transition-colors font-serif"
+        >
+          Serif
+        </button>
+      </div>
+
+      <!-- Theme toggle -->
+      <button
+        @click="cycleTheme"
+        class="w-full flex items-center justify-between mt-2 py-1.5 px-3 text-xs bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-gray-700 dark:text-gray-300"
+      >
+        <span class="flex items-center gap-2">
+          <svg v-if="ebookStore.theme.value === 'day' || ebookStore.theme.value === 'sepia'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+          </svg>
+          <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+          </svg>
+          <span>{{ themeLabel }}</span>
+        </span>
+      </button>
+    </div>
+
+    <!-- TOC -->
+    <nav class="p-3">
+      <ul class="space-y-0.5">
+        <TocTreeItem
+          v-for="item in documentStore.sections"
+          :key="item.id"
+          :item="item"
+          :depth="1"
+        />
+      </ul>
+    </nav>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDocumentStore } from '@/stores/documentStore'
+import { useUiStore } from '@/stores/uiStore'
+import { useEbookStore, type Theme } from '@/composables/useEbookStore'
+import TocTreeItem from '@/components/TocTreeItem.vue'
+
+const documentStore = useDocumentStore()
+const uiStore = useUiStore()
+const ebookStore = useEbookStore()
+
+const themeOrder: Theme[] = ['day', 'sepia', 'night', 'oled']
+
+const themeLabel = computed(() => {
+  switch (ebookStore.theme.value) {
+    case 'day': return 'Day'
+    case 'sepia': return 'Sepia'
+    case 'night': return 'Night'
+    case 'oled': return 'OLED'
+  }
+})
+
+function cycleTheme() {
+  const currentIndex = themeOrder.indexOf(ebookStore.theme.value)
+  const nextIndex = (currentIndex + 1) % themeOrder.length
+  ebookStore.setTheme(themeOrder[nextIndex])
+}
+
+function setFontFamily(font: 'sans' | 'serif') {
+  uiStore.setFontFamily(font)
+}
+</script>

data/frontend/src/components/AppendixSection.vue

@@ -0,0 +1,39 @@
+<template>
+  <section :id="section.id" class="mb-12 scroll-mt-20">
+    <div class="db-appendix-wrap">
+      <h2 class="flex items-baseline gap-3 text-xl font-bold mb-5 pb-2 border-b border-gray-200 dark:border-gray-700">
+        <span class="text-gray-500 dark:text-gray-400 text-lg font-normal">{{ numbering }}</span>
+        <span>{{ section.title }}</span>
+      </h2>
+      <BlockRenderer v-if="sectionContent" :blocks="sectionContent.blocks" />
+      <!-- Render non-changelog children -->
+      <template v-if="section.children && section.children.length > 0">
+        <div v-for="child in section.children" :key="child.id" class="ml-4">
+          <SectionContent v-if="!isChangelogSection(child)" :section="child" />
+        </div>
+      </template>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDocumentStore, type TocItem } from '@/stores/documentStore'
+import SectionContent from '@/components/SectionContent.vue'
+import BlockRenderer from '@/components/BlockRenderer.vue'
+
+interface Props {
+  section: TocItem
+}
+
+const props = defineProps<Props>()
+const documentStore = useDocumentStore()
+
+const numbering = computed(() => documentStore.getNumbering(props.section.id))
+const sectionContent = computed(() => documentStore.getSectionContent(props.section.id))
+
+function isChangelogSection(section: TocItem): boolean {
+  const id = section.id.toLowerCase()
+  return id === 'changelog' || /\br\d+\b/.test(id)
+}
+</script>