@life-and-dev/mdsite 0.0.3

package/mdsite-nuxt/app/composables/useSidebarState.ts

@@ -0,0 +1,62 @@
+/**
+ * Manage sidebar visibility state (no persistence)
+ */
+export function useSidebarState() {
+  const { mdAndUp } = useDisplay()
+
+  // Default: open on md+, closed on sm-
+  const isOpen = ref(false)
+
+  /**
+   * Initialize sidebar state based on screen size
+   */
+  function initialize() {
+    isOpen.value = mdAndUp.value
+  }
+
+  /**
+   * Toggle sidebar visibility
+   */
+  function toggle() {
+    isOpen.value = !isOpen.value
+  }
+
+  /**
+   * Open sidebar
+   */
+  function open() {
+    isOpen.value = true
+  }
+
+  /**
+   * Close sidebar
+   */
+  function close() {
+    isOpen.value = false
+  }
+
+  /**
+   * Reset to default state based on screen size
+   */
+  function reset() {
+    isOpen.value = mdAndUp.value
+  }
+
+  // Watch for screen size changes
+  watch(mdAndUp, (newValue) => {
+    isOpen.value = newValue
+  })
+
+  // Initialize on mount
+  onMounted(() => {
+    initialize()
+  })
+
+  return {
+    isOpen,
+    toggle,
+    open,
+    close,
+    reset
+  }
+}

package/mdsite-nuxt/app/composables/useSiteConfig.ts

@@ -0,0 +1,37 @@
+interface SiteConfig {
+  siteName: string
+  siteCanonical: string
+  contentGitRepo: string
+  contentGitBranch: string
+  contentGitPath: string
+  contentPath: string
+  features: {
+    bibleTooltips: boolean
+    sourceEdit: boolean
+  }
+  themeColorLight: string
+  themeColorDark: string
+}
+
+/**
+ * Get site configuration based on runtime config
+ */
+export function useSiteConfig(): SiteConfig {
+  const config = useRuntimeConfig()
+  const siteConfig = config.public.siteConfig as any
+
+  return {
+    siteName: siteConfig?.site?.name || '',
+    siteCanonical: siteConfig?.site?.canonical || '',
+    contentGitRepo: '',
+    contentGitBranch: 'main',
+    contentGitPath: '.',
+    contentPath: config.public.contentPath || '.',
+    features: {
+      bibleTooltips: siteConfig?.features?.bibleTooltips ?? false,
+      sourceEdit: siteConfig?.features?.sourceEdit ?? false
+    },
+    themeColorLight: siteConfig?.themes?.light?.colors?.primary || '#000000',
+    themeColorDark: siteConfig?.themes?.dark?.colors?.primary || '#ffffff'
+  }
+}

package/mdsite-nuxt/app/composables/useSourceEdit.ts

@@ -0,0 +1,69 @@
+import { relative, normalize, posix } from 'pathe'
+
+/**
+ * Generate source edit URL for the current page
+ */
+export function useSourceEdit() {
+    const route = useRoute()
+    const siteConfig = useSiteConfig()
+
+    /**
+     * Calculate the subdirectory within the git repo where content is located
+     */
+    function getContentSubdirectory(): string {
+        const gitPath = normalize(siteConfig.contentGitPath)
+        const contentPath = normalize(siteConfig.contentPath)
+
+        // Calculate relative path from git root to content directory
+        const subdir = relative(gitPath, contentPath)
+
+        // Convert to posix path for GitHub URLs (forward slashes)
+        return subdir ? posix.normalize(subdir) : ''
+    }
+
+    /**
+     * Generate source edit URL for current route
+     * @returns source edit URL or undefined if not enabled or not a content page
+     */
+    function getEditUrl(): string | undefined {
+        const path = route.path
+        const repo = siteConfig.contentGitRepo
+
+        // Check if feature is enabled
+        if (!siteConfig.features.sourceEdit) {
+            return undefined
+        }
+
+        // Only render if repo starts with "https://github.com" (current supported provider)
+        if (!repo || !repo.startsWith('https://github.com')) {
+            return undefined
+        }
+
+        var contentPath: string;
+
+        // Home page path
+        if (!path || path === '/') {
+            contentPath = 'index'
+        }
+
+        // Convert route path to content file path
+        // Example: /church/evolution/312-constantine → https://github.com/life-and-dev/church/blob/main/evolution/312-constantine.md
+        else {
+            contentPath = path.startsWith('/') ? path.slice(1) : path
+        }
+
+        // Get the subdirectory within the git repo
+        const subdir = getContentSubdirectory()
+
+        // Build the full path: subdirectory + content file path
+        const fullPath = subdir
+            ? `${subdir}/${contentPath}.md`
+            : `${contentPath}.md`
+
+        return `${repo}/blob/${siteConfig.contentGitBranch}/${fullPath}`
+    }
+
+    return {
+        getEditUrl
+    }
+}

package/mdsite-nuxt/app/composables/useTableOfContents.ts

@@ -0,0 +1,141 @@
+export interface TocItem {
+  id: string
+  text: string
+  level: number
+  element?: HTMLElement
+}
+
+/**
+ * Generate and manage table of contents from page headings
+ */
+export function useTableOfContents() {
+  const tocItems = ref<TocItem[]>([])
+  const activeId = ref<string>('')
+  const observer = ref<IntersectionObserver | null>(null)
+
+  /**
+   * Generate TOC from a content container element
+   * @param container - HTML element containing the rendered content
+   */
+  function generateTOC(container: HTMLElement | null) {
+    // Clear existing TOC first
+    tocItems.value = []
+
+    // Disconnect existing observer
+    if (observer.value) {
+      observer.value.disconnect()
+      observer.value = null
+    }
+
+    if (!container) {
+      return
+    }
+
+    // Find only H2 and H3 headings (skip H1 as it's the page title)
+    const headings = container.querySelectorAll('article h2, article h3, .content-body h2, .content-body h3')
+
+    if (headings.length < 2) {
+      // Hide TOC if less than 2 headings
+      tocItems.value = []
+      return
+    }
+
+    // Build TOC items (H2 = level 1, H3 = level 2)
+    const items: TocItem[] = []
+
+    headings.forEach((heading, index) => {
+      const level = parseInt(heading.tagName.charAt(1))
+
+      // H2 = level 1, H3 = level 2
+      const normalizedLevel = level === 2 ? 1 : 2
+
+      // Ensure heading has an id for anchor links
+      let id = heading.id
+      if (!id) {
+        id = `heading-${index}-${heading.textContent?.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '') || index}`
+        heading.id = id
+      }
+
+      items.push({
+        id,
+        text: heading.textContent || '',
+        level: normalizedLevel,
+        element: heading as HTMLElement
+      })
+    })
+
+    tocItems.value = items
+
+    // Set up intersection observer for active heading tracking
+    setupObserver(items)
+  }
+
+  /**
+   * Set up IntersectionObserver to track active heading
+   */
+  function setupObserver(items: TocItem[]) {
+    // Clean up existing observer
+    if (observer.value) {
+      observer.value.disconnect()
+    }
+
+    if (items.length === 0) return
+
+    const options = {
+      rootMargin: '-100px 0px -66%',
+      threshold: 0
+    }
+
+    observer.value = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          activeId.value = entry.target.id
+        }
+      })
+    }, options)
+
+    // Observe all heading elements
+    items.forEach(item => {
+      if (item.element) {
+        observer.value!.observe(item.element)
+      }
+    })
+  }
+
+  /**
+   * Scroll to a specific heading
+   */
+  function scrollToHeading(id: string) {
+    const element = document.getElementById(id)
+    if (element) {
+      const offsetTop = element.offsetTop - 80 // Account for app bar height
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      })
+      activeId.value = id
+    }
+  }
+
+  /**
+   * Check if TOC should be shown (2+ headings)
+   */
+  const shouldShowTOC = computed(() => tocItems.value.length >= 2)
+
+  /**
+   * Clean up observer on unmount
+   */
+  onUnmounted(() => {
+    if (observer.value) {
+      observer.value.disconnect()
+    }
+  })
+
+  return {
+    tocItems,
+    activeId,
+    shouldShowTOC,
+    generateTOC,
+    scrollToHeading
+  }
+}

package/mdsite-nuxt/app/composables/useTableParser.ts

@@ -0,0 +1,106 @@
+import type { ParsedTable, TableHeader, TableItem } from '~/types/table'
+
+/**
+ * Converts text to kebab-case for use as table column keys
+ */
+function toKebabCase(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '') // Remove special chars
+    .replace(/\s+/g, '-')     // Replace spaces with hyphens
+    .replace(/-+/g, '-')      // Remove duplicate hyphens
+    .trim()
+}
+
+/**
+ * Extracts headers from table's <thead> element
+ */
+function parseHeaders(tableElement: HTMLTableElement): TableHeader[] {
+  const thead = tableElement.querySelector('thead')
+  if (!thead) return []
+
+  const headerRow = thead.querySelector('tr')
+  if (!headerRow) return []
+
+  const headers: TableHeader[] = []
+  const thElements = headerRow.querySelectorAll('th')
+
+  thElements.forEach((th, index) => {
+    const title = th.textContent?.trim() || `Column ${index + 1}`
+    const key = toKebabCase(title) || `col-${index}`
+
+    headers.push({
+      title,
+      key,
+      sortable: true,
+      align: 'start'
+    })
+  })
+
+  return headers
+}
+
+/**
+ * Extracts row data from table's <tbody> element
+ */
+function parseRows(
+  tableElement: HTMLTableElement,
+  headers: TableHeader[]
+): TableItem[] {
+  const tbody = tableElement.querySelector('tbody')
+  if (!tbody) return []
+
+  const items: TableItem[] = []
+  const rows = tbody.querySelectorAll('tr')
+
+  rows.forEach((row) => {
+    const item: TableItem = {}
+    const cells = row.querySelectorAll('td')
+
+    cells.forEach((cell, colIndex) => {
+      // Use header key if available, otherwise fallback to col-N
+      const key = headers[colIndex]?.key || `col-${colIndex}`
+
+      // Check if cell contains HTML (links, formatting, line breaks, lists, etc.)
+      const hasHtml = cell.querySelector('a, strong, em, code, span, br, ul, ol, li, p, div')
+
+      if (hasHtml) {
+        // Store innerHTML for complex content
+        item[key] = cell.innerHTML.trim()
+      } else {
+        // Store plain text for simple content
+        item[key] = cell.textContent?.trim() || ''
+      }
+    })
+
+    items.push(item)
+  })
+
+  return items
+}
+
+/**
+ * Composable for parsing HTML table into v-data-table format
+ */
+export function useTableParser() {
+  /**
+   * Parse an HTML table element into v-data-table headers and items
+   */
+  const parseTable = (tableElement: HTMLTableElement | null): ParsedTable => {
+    if (!tableElement) {
+      return { headers: [], items: [] }
+    }
+
+    // Extract headers from <thead>
+    const headers = parseHeaders(tableElement)
+
+    // Extract rows from <tbody>
+    const items = parseRows(tableElement, headers)
+
+    return { headers, items }
+  }
+
+  return {
+    parseTable
+  }
+}

package/mdsite-nuxt/app/composables/useTooltipConfig.ts

@@ -0,0 +1,20 @@
+import { useDisplay } from 'vuetify'
+
+/**
+ * Shared tooltip configuration for navigation and search components
+ *
+ * Desktop (≥960px): Tooltips appear to the right (end)
+ * Mobile (<960px): Tooltips appear below (bottom)
+ * Max-width: 600px to prevent overlap with 280px navigation bar
+ */
+export function useTooltipConfig() {
+  const { mdAndUp } = useDisplay()
+
+  const location = computed(() => mdAndUp.value ? 'end' : 'bottom')
+  const maxWidth = 600
+
+  return {
+    location,
+    maxWidth
+  }
+}

package/mdsite-nuxt/app/config/themes.ts

@@ -0,0 +1,17 @@
+import type { ThemeDefinition } from 'vuetify'
+import { loadMdsiteConfigSync } from '../../utils/mdsite-config'
+
+/**
+ * Get theme configuration from the active mdsite config
+ */
+export function getDomainThemes(domain: string | undefined): Record<string, ThemeDefinition> {
+  const themes = loadMdsiteConfigSync().config.themes as Record<string, ThemeDefinition>
+
+  void domain
+
+  for (const [name, theme] of Object.entries(themes)) {
+    (theme as any).dark = name.toLowerCase().includes('dark')
+  }
+
+  return themes
+}