@life-and-dev/mdsite 0.0.3

package/mdsite-nuxt/app/components/SearchBox.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="search-box">
+    <v-text-field
+      v-model="searchQuery"
+      prepend-inner-icon="mdi-magnify"
+      :append-inner-icon="searchQuery ? 'mdi-close' : undefined"
+      placeholder="Search pages..."
+      variant="outlined"
+      density="compact"
+      hide-details
+      class="search-input"
+      @click:append-inner="clearSearch"
+      @update:model-value="handleSearch"
+    />
+
+    <!-- Search Results -->
+    <div v-if="searchQuery && searchResults.length > 0" class="search-results">
+      <v-list density="compact">
+        <v-tooltip
+          v-for="result in searchResults"
+          :key="result.path"
+          :text="result.description"
+          :disabled="!result.description"
+          :location="tooltip.location.value"
+          :max-width="tooltip.maxWidth"
+        >
+          <template #activator="{ props: tooltipProps }">
+            <v-list-item
+              v-bind="tooltipProps"
+              class="search-result-item"
+              @click="handleSelect(result.path)"
+            >
+              <v-list-item-title class="result-title">
+                {{ result.title }}
+              </v-list-item-title>
+              <v-list-item-subtitle class="result-breadcrumb">
+                {{ result.breadcrumb }}
+              </v-list-item-subtitle>
+            </v-list-item>
+          </template>
+        </v-tooltip>
+      </v-list>
+    </div>
+
+    <!-- No Results -->
+    <div v-else-if="searchQuery && searchResults.length === 0" class="no-results">
+      <v-list-item>
+        <v-list-item-title class="text-center text-caption">
+          No results found for "{{ searchQuery }}"
+        </v-list-item-title>
+      </v-list-item>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SearchableFields } from '~/composables/useSearchRelevance'
+import type { SearchIndexEntry } from '~/../../scripts/generate-indices'
+
+interface SearchResult {
+  path: string
+  title: string
+  breadcrumb: string
+  description?: string
+}
+
+const emit = defineEmits<{
+  select: [path: string]
+  clear: []
+  'search-active': [active: boolean]
+}>()
+
+const searchQuery = ref('')
+const searchResults = ref<SearchResult[]>([])
+
+// Shared tooltip configuration
+const tooltip = useTooltipConfig()
+
+// Relevance scoring
+const { sortByRelevance } = useSearchRelevance()
+
+// Search index fetcher
+const { loadSearchIndex } = useSearchIndex()
+
+/**
+ * Check if page matches search query
+ */
+function pageMatchesQuery(page: SearchIndexEntry, queryLower: string): boolean {
+  // Check title, description, excerpt
+  const textMatch = (
+    page.title.toLowerCase().includes(queryLower) ||
+    page.description?.toLowerCase().includes(queryLower) ||
+    page.excerpt?.toLowerCase().includes(queryLower)
+  )
+
+  // Check keywords array
+  const keywordsMatch = page.keywords?.some((keyword: string) =>
+    keyword.toLowerCase().includes(queryLower)
+  )
+
+  return textMatch || keywordsMatch || false
+}
+
+/**
+ * Handle search input
+ */
+async function handleSearch(query: string) {
+  if (!query || query.trim() === '') {
+    searchResults.value = []
+    emit('search-active', false)
+    return
+  }
+
+  emit('search-active', true)
+
+  try {
+    // Load pre-built search index (cached after first load)
+    const allPages = await loadSearchIndex()
+    const queryLower = query.toLowerCase()
+
+    // Filter pages that match query
+    const matchingPages = allPages.filter(page =>
+      pageMatchesQuery(page, queryLower)
+    )
+
+    // Sort by relevance score (SearchIndexEntry is compatible with SearchableFields)
+    const sortedPages = sortByRelevance(matchingPages, query, (page) => page.title)
+
+    // Map top 50 results to SearchResult interface
+    searchResults.value = sortedPages
+      .slice(0, 50)
+      .map((page) => {
+        const segments = page.path.split('/').filter(Boolean)
+        return {
+          path: page.path,
+          title: page.title,
+          breadcrumb: segments.length > 0
+            ? segments.join('/')
+            : '/',
+          description: page.description
+        }
+      })
+  } catch (error) {
+    console.error('Search error:', error)
+    searchResults.value = []
+  }
+}
+
+/**
+ * Clear search
+ */
+function clearSearch() {
+  searchQuery.value = ''
+  searchResults.value = []
+  emit('clear')
+  emit('search-active', false)
+}
+
+/**
+ * Handle result selection
+ */
+function handleSelect(path: string) {
+  emit('select', path)
+  clearSearch()
+}
+</script>
+
+<style scoped>
+.search-box {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 0.75rem;
+}
+
+.search-results {
+  max-height: calc(100vh - 12.5rem);
+  overflow-y: auto;
+  margin-top: 0.5rem;
+  background-color: rgb(var(--v-theme-surface-rail));
+  border-radius: 0.5rem;
+  border: 1px solid rgb(var(--v-theme-outline-bars));
+}
+
+.search-result-item {
+  cursor: pointer;
+  border-radius: 0.25rem;
+  margin: 0.25rem;
+}
+
+.search-result-item:hover {
+  background-color: rgba(var(--v-theme-on-selectable), 0.04);
+}
+
+.result-title {
+  font-weight: 500;
+  color: rgb(var(--v-theme-on-selectable));
+}
+
+.result-breadcrumb {
+  font-size: 0.75rem;
+  color: rgb(var(--v-theme-on-selectable));
+  opacity: 0.6;
+}
+
+.no-results {
+  margin-top: 0.5rem;
+  padding: 1rem;
+  color: rgb(var(--v-theme-on-surface-rail));
+  opacity: 0.6;
+}
+</style>

package/mdsite-nuxt/app/components/TocItem.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="toc-item"
+    :class="{ 'is-active': isActive }"
+    :style="{ paddingLeft: `${item.level * 16}px` }"
+    @click="handleClick"
+  >
+    <span class="toc-text">{{ item.text }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TocItem as TocItemType } from '~/composables/useTableOfContents'
+
+const props = defineProps<{
+  item: TocItemType
+  isActive: boolean
+}>()
+
+const emit = defineEmits<{
+  click: [id: string]
+}>()
+
+function handleClick() {
+  emit('click', props.item.id)
+}
+</script>
+
+<style scoped>
+.toc-item {
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.15s ease, padding-left 0.15s ease;
+  margin: 2px 0;
+}
+
+.toc-item:hover {
+  background-color: rgba(var(--v-theme-on-selectable), 0.04);
+}
+
+.toc-item.is-active {
+  background-color: rgb(var(--v-theme-selected));
+}
+
+.toc-text {
+  font-size: 0.813rem;
+  line-height: 1.4;
+  color: rgb(var(--v-theme-on-selectable));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.15s ease;
+}
+
+.toc-item:hover .toc-text {
+  color: rgb(var(--v-theme-on-selectable));
+  text-decoration: underline;
+}
+
+.toc-item.is-active .toc-text {
+  color: rgb(var(--v-theme-on-selected));
+  font-weight: 600;
+}
+
+/* Touch target size for mobile */
+@media (max-width: 599px) {
+  .toc-item {
+    min-height: 44px;
+  }
+}
+</style>

package/mdsite-nuxt/app/components/TreeNode.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="tree-node-wrapper">
+    <!-- Separator rendering -->
+    <v-divider
+      v-if="node.isSeparator"
+      :style="{ marginLeft: `${depth * 1.25}rem`, marginTop: '0.5rem', marginBottom: '0.5rem', marginRight: '0.5rem' }"
+    />
+
+    <!-- Header rendering (non-clickable section label) -->
+    <div
+      v-else-if="node.isHeader"
+      class="tree-header"
+      :style="{ paddingLeft: `${depth * 1.25 + 1.75}rem` }"
+    >
+      <span class="header-title">{{ node.title }}</span>
+    </div>
+
+    <div
+      v-else
+      class="tree-node"
+      :class="{
+        'is-active': isActive,
+        'is-parent': hasChildren,
+        'is-expanded': isExpanded
+      }"
+      :style="{ paddingLeft: `${depth * 1.25}rem` }"
+    >
+      <!-- Expand/collapse chevron for parent nodes -->
+      <v-btn
+        v-if="hasChildren"
+        icon
+        size="x-small"
+        variant="text"
+        class="chevron-button"
+        @click="handleToggle"
+      >
+        <v-icon
+          :icon="isExpanded ? 'mdi-chevron-down' : 'mdi-chevron-right'"
+          size="16"
+        />
+      </v-btn>
+
+      <!-- Active indicator dot -->
+      <span v-else class="leaf-indicator" />
+
+      <!-- Node title with optional tooltip -->
+      <v-tooltip
+        v-if="node.description"
+        :text="node.description"
+        :location="tooltip.location.value"
+        :max-width="tooltip.maxWidth"
+      >
+        <template #activator="{ props: tooltipProps }">
+          <span
+            v-bind="tooltipProps"
+            class="node-title"
+            :class="{ 'is-parent-title': hasChildren }"
+            @click="handleSelect"
+          >
+            {{ node.title }}
+            <v-icon
+              v-if="node.isExternal"
+              icon="mdi-open-in-new"
+              size="14"
+              class="external-icon"
+            />
+          </span>
+        </template>
+      </v-tooltip>
+      <span
+        v-else
+        class="node-title"
+        :class="{ 'is-parent-title': hasChildren }"
+        @click="handleSelect"
+      >
+        {{ node.title }}
+        <v-icon
+          v-if="node.isExternal"
+          icon="mdi-open-in-new"
+          size="14"
+          class="external-icon"
+        />
+      </span>
+    </div>
+
+    <!-- Recursively render children -->
+    <div v-if="isExpanded && hasChildren" class="tree-children">
+      <TreeNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :active-path="activePath"
+        :expanded-ids="expandedIds"
+        :depth="depth + 1"
+        @toggle="$emit('toggle', $event)"
+        @select="$emit('select', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TreeNode as TreeNodeType } from '~/composables/useNavigationTree'
+
+const props = defineProps<{
+  node: TreeNodeType
+  activePath: string
+  expandedIds: Set<string>
+  depth: number
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  select: [path: string]
+}>()
+
+const hasChildren = computed(() => {
+  return props.node.children && props.node.children.length > 0
+})
+
+const isExpanded = computed(() => props.expandedIds.has(props.node.id))
+const isActive = computed(() => {
+  // Only primary menu items can be highlighted
+  // Aliases (custom titled links) should never be highlighted
+  return props.node.isPrimary === true && props.node.path === props.activePath
+})
+
+// Shared tooltip configuration
+const tooltip = useTooltipConfig()
+
+function handleToggle() {
+  emit('toggle', props.node.id)
+}
+
+function handleSelect() {
+  // Handle external URLs differently
+  if (props.node.isExternal && props.node.externalUrl) {
+    window.open(props.node.externalUrl, '_blank', 'noopener,noreferrer')
+    return
+  }
+
+  // For parent nodes: toggle expansion AND navigate
+  if (hasChildren.value) {
+    emit('toggle', props.node.id)
+  }
+
+  // Navigate to the page
+  emit('select', props.node.path)
+}
+</script>
+
+<style scoped>
+.tree-node-wrapper {
+  width: 100%;
+}
+
+.tree-node {
+  display: flex;
+  align-items: center;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  border-radius: 0.25rem;
+  margin: 0.125rem 0;
+}
+
+.tree-node:hover {
+  background-color: rgba(var(--v-theme-on-selectable), 0.04);
+}
+
+.tree-node.is-active {
+  background-color: rgb(var(--v-theme-selected));
+  color: rgb(var(--v-theme-on-selected));
+}
+
+.tree-header {
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+  padding: 0.75rem 0.5rem 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.header-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface-rail));
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chevron-button {
+  margin-right: 0.25rem;
+  flex-shrink: 0;
+}
+
+.tree-node.is-active :deep(.chevron-button .v-icon) {
+  color: rgb(var(--v-theme-on-selected));
+}
+
+.leaf-indicator {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.25rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.leaf-indicator::before {
+  content: '';
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+}
+
+.tree-node.is-active .leaf-indicator::before {
+  background-color: rgb(var(--v-theme-on-selected));
+}
+
+.node-title {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: rgb(var(--v-theme-on-selectable));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.15s ease;
+}
+
+.node-title.is-parent-title {
+  font-weight: 500;
+}
+
+.tree-node.is-active .node-title {
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-selected));
+}
+
+.tree-children {
+  width: 100%;
+}
+
+.external-icon {
+  margin-left: 0.25rem;
+  opacity: 0.6;
+  vertical-align: middle;
+}
+
+/* Touch target size for mobile */
+@media (max-width: 599px) {
+  .tree-node {
+    min-height: 3rem;
+  }
+}
+</style>

package/mdsite-nuxt/app/components/content/MarkdownAlert.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="['markdown-alert', `markdown-alert-${type}`]">
+    <p class="markdown-alert-title">
+      <v-icon :icon="icon" size="small" class="mr-2" />
+      {{ title }}
+    </p>
+    <div class="alert-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  type: 'note' | 'tip' | 'important' | 'warning' | 'caution'
+}>()
+
+const iconMap = {
+  note: 'mdi-information',
+  tip: 'mdi-lightbulb',
+  important: 'mdi-alert-circle',
+  warning: 'mdi-alert',
+  caution: 'mdi-alert-octagon'
+}
+
+const titleMap = {
+  note: 'Note',
+  tip: 'Tip',
+  important: 'Important',
+  warning: 'Warning',
+  caution: 'Caution'
+}
+
+const icon = computed(() => iconMap[props.type] || iconMap.note)
+const title = computed(() => titleMap[props.type] || titleMap.note)
+</script>
+
+<style scoped>
+.alert-content :deep(p:last-child) {
+  margin-bottom: 0;
+}
+</style>

package/mdsite-nuxt/app/components/content/Mermaid.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="mermaid-container">
+    <div v-if="!svg" class="mermaid-loading">
+      <v-progress-circular indeterminate size="24"></v-progress-circular>
+      <span>Rendering diagram...</span>
+    </div>
+    <div v-html="svg" ref="container"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true
+  }
+})
+
+const svg = ref('')
+const container = ref<HTMLElement | null>(null)
+
+const renderDiagram = async () => {
+  if (process.server) return
+
+  try {
+    const mermaid = (await import('mermaid')).default
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'base',
+      themeVariables: {
+        primaryColor: '#6200ee',
+        primaryTextColor: '#fff',
+        primaryBorderColor: '#6200ee',
+        lineColor: '#6200ee',
+        secondaryColor: '#03dac6',
+        tertiaryColor: '#f5f5f5'
+      },
+      securityLevel: 'loose',
+      fontFamily: 'Noto Sans, sans-serif'
+    })
+
+    const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`
+    const { svg: renderedSvg } = await mermaid.render(id, props.code)
+    svg.value = renderedSvg
+  } catch (error) {
+    console.error('Mermaid rendering failed:', error)
+    svg.value = `<div class="error">Failed to render diagram: ${error}</div>`
+  }
+}
+
+onMounted(() => {
+  renderDiagram()
+})
+
+watch(() => props.code, () => {
+  renderDiagram()
+})
+</script>
+
+<style scoped>
+.mermaid-container {
+  display: flex;
+  justify-content: center;
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background-color: rgb(var(--v-theme-surface));
+  border-radius: 12px;
+  overflow-x: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.mermaid-loading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  font-style: italic;
+}
+
+:deep(svg) {
+  max-width: 100%;
+  height: auto;
+}
+
+.error {
+  color: var(--v-theme-error);
+  padding: 1rem;
+  font-family: monospace;
+}
+
+@media print {
+  .mermaid-container {
+    background: white !important;
+    border: 1px solid #ccc !important;
+    box-shadow: none !important;
+    margin: 1rem 0 !important;
+    padding: 0 !important;
+  }
+}
+</style>