@life-and-dev/mdsite 0.0.3

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

@@ -0,0 +1,57 @@
+<template>
+  <NuxtLink :to="cleanHref" :target="target">
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+/**
+ * Custom ProseA component for Nuxt Content
+ *
+ * Strips .md extensions from internal links for web routes.
+ * This allows markdown files to have .md extensions (for IDE preview)
+ * while web routes remain clean (without .md).
+ *
+ * Example:
+ * - Markdown: [link](/docs/history.md)
+ * - Rendered: <a href="/docs/history">link</a>
+ */
+
+interface ProseAProps {
+  href?: string
+  target?: string
+}
+
+const props = defineProps<ProseAProps>()
+
+// Strip /content/{domain}/ prefix and .md extension from href for web routes
+// External URLs (http/https) are passed through unchanged
+const cleanHref = computed(() => {
+  if (!props.href) return props.href
+
+  // Don't modify external URLs
+  if (props.href.startsWith('http://') || props.href.startsWith('https://')) {
+    return props.href
+  }
+
+  // Don't modify anchor-only links
+  if (props.href.startsWith('#')) {
+    return props.href
+  }
+
+  let cleaned = props.href
+
+  // Strip /content/{domain}/ prefix from absolute paths (for web routing)
+  // Example: /content/example/docs/history.md → /docs/history.md
+  // This allows IDE to navigate with full paths while web uses clean URLs
+  cleaned = cleaned.replace(/^\/content\/[^/]+/, '')
+
+  // Strip .md extension from internal links (before any fragment/query)
+  // Example: /docs/history.md → /docs/history
+  // Example: /docs/history.md#section → /docs/history#section
+  // Example: ../parent.md → ../parent
+  cleaned = cleaned.replace(/\.md(#|\?|$)/, '$1')
+
+  return cleaned
+})
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <v-card class="my-4">
+    <v-card-text>
+      <div class="blockquote-content">
+        <slot />
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+// Custom blockquote rendering as VCard for Material Design styling
+// Preserves the beautiful card-based blockquote design
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+  <Mermaid v-if="language === 'mermaid'" :code="code" />
+  <pre v-else :class="$attrs.class"><slot /></pre>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  language: {
+    type: String,
+    default: null
+  },
+  filename: {
+    type: String,
+    default: null
+  },
+  highlights: {
+    type: Array,
+    default: () => []
+  },
+  meta: {
+    type: String,
+    default: null
+  }
+})
+</script>
+
+<style scoped>
+pre {
+  border-radius: 1rem;
+  position: relative;
+  padding: 1rem;
+  overflow-x: auto;
+  background-color: #ddd;
+  border: 2px solid rgb(var(--v-theme-outline));
+  border-radius: 1rem !important;
+}
+
+@media print {
+  pre {
+    background-color: white !important;
+    border-radius: 1rem !important;
+    border: 2px solid #ccc !important;
+  }
+}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="prose-table-wrapper">
+    <!-- Hidden original table for SSR and parsing -->
+    <div ref="tableContainerRef" class="original-table" :style="{ display: isClient && headers.length > 0 ? 'none' : 'block' }">
+      <table>
+        <slot />
+      </table>
+    </div>
+
+    <!-- v-data-table rendered client-side -->
+    <v-data-table
+      v-if="isClient && headers.length > 0"
+      :headers="headers"
+      :items="items"
+      :items-per-page="-1"
+      :mobile-breakpoint="600"
+      class="my-4"
+      density="comfortable"
+      hide-default-footer
+    >
+      <!-- Custom cell rendering to support HTML content -->
+      <template v-for="header in headers" :key="header.key" #[`item.${header.key}`]="{ value }">
+        <!-- eslint-disable vue/no-v-html -->
+        <span v-html="value" />
+        <!-- eslint-enable vue/no-v-html -->
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useTableParser } from '~/composables/useTableParser'
+import type { TableHeader, TableItem } from '~/types/table'
+
+/**
+ * Custom ProseTable component for Nuxt Content
+ *
+ * Renders markdown tables as Vuetify v-data-table components with:
+ * - Material Design 3 styling
+ * - Sorting capabilities (click column headers)
+ * - Responsive mobile layout (cards on small screens)
+ * - All rows displayed (no pagination)
+ *
+ * SSR Strategy:
+ * - Server renders original <table> for SEO and accessibility
+ * - Client parses table and renders v-data-table on mount
+ * - Original table hidden once v-data-table is ready
+ */
+
+const tableContainerRef = ref<HTMLDivElement | null>(null)
+const headers = ref<TableHeader[]>([])
+const items = ref<TableItem[]>([])
+const isClient = ref(false)
+
+const { parseTable } = useTableParser()
+
+onMounted(() => {
+  isClient.value = true
+
+  // Wait for next tick to ensure slot content is fully rendered
+  nextTick(() => {
+    if (!tableContainerRef.value) return
+
+    // Find the actual <table> element in the rendered slot
+    const tableElement = tableContainerRef.value.querySelector('table')
+
+    if (!tableElement) {
+      console.warn('[ProseTable] No <table> element found in slot content')
+      return
+    }
+
+    // Parse the table structure
+    const parsed = parseTable(tableElement)
+
+    if (parsed.headers.length === 0) {
+      console.warn('[ProseTable] No headers found in table. Falling back to original table rendering.')
+      return
+    }
+
+    // Update reactive data
+    headers.value = parsed.headers
+    items.value = parsed.items
+  })
+})
+</script>
+
+<style scoped>
+.prose-table-wrapper {
+  margin: 1rem 0;
+}
+
+/* Style original table with basic formatting when v-data-table isn't available */
+.original-table table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.original-table th,
+.original-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid rgb(var(--v-theme-outline));
+}
+
+.original-table th {
+  font-weight: 500;
+  background-color: rgb(var(--v-theme-surface-container));
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+
+.original-table tr:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+/* Style lists and line breaks within table cells */
+.prose-table-wrapper :deep(.v-data-table) ul,
+.prose-table-wrapper :deep(.v-data-table) ol {
+  margin: 0.25rem 0;
+  padding-left: 1.25rem;
+  list-style-position: outside;
+}
+
+.prose-table-wrapper :deep(.v-data-table) ul {
+  list-style-type: disc;
+}
+
+.prose-table-wrapper :deep(.v-data-table) ol {
+  list-style-type: decimal;
+}
+
+.prose-table-wrapper :deep(.v-data-table) li {
+  margin: 0.25rem 0;
+  line-height: 1.5;
+}
+
+.prose-table-wrapper :deep(.v-data-table) br {
+  display: block;
+  content: "";
+  margin-top: 0.375rem;
+}
+</style>

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

@@ -0,0 +1,89 @@
+import { useTheme as useVuetifyTheme } from 'vuetify'
+
+export type ThemeMode = 'light' | 'dark'
+
+const THEME_STORAGE_KEY = 'theme-preference'
+
+export const useAppTheme = () => {
+  const vuetifyTheme = useVuetifyTheme()
+
+  // Get the current theme preference from localStorage
+  const getStoredTheme = (): ThemeMode | null => {
+    if (import.meta.client) {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode
+      return stored && ['light', 'dark'].includes(stored) ? stored : null
+    }
+    return null
+  }
+
+  // Get system theme preference
+  const getSystemTheme = (): ThemeMode => {
+    if (import.meta.client && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    return 'light'
+  }
+
+  // Store theme preference in localStorage
+  const setStoredTheme = (theme: ThemeMode) => {
+    if (import.meta.client) {
+      localStorage.setItem(THEME_STORAGE_KEY, theme)
+    }
+  }
+
+  // Reactive theme preference
+  const themePreference = ref<ThemeMode>('light')
+
+  // Apply theme to Vuetify
+  const applyTheme = (theme: ThemeMode) => {
+    // Use the new Vuetify 3.7+ API: theme.change()
+    if (vuetifyTheme && typeof (vuetifyTheme as any).change === 'function') {
+      (vuetifyTheme as any).change(theme)
+    } else if (vuetifyTheme.global) {
+      // Fallback for older versions
+      vuetifyTheme.global.name.value = theme
+    }
+  }
+
+  // Set theme preference and apply it
+  const setTheme = (theme: ThemeMode) => {
+    themePreference.value = theme
+    setStoredTheme(theme)
+    applyTheme(theme)
+  }
+
+  // Toggle between light and dark
+  const toggleTheme = () => {
+    const newTheme: ThemeMode = themePreference.value === 'dark' ? 'light' : 'dark'
+    setTheme(newTheme)
+  }
+
+  // Initialize theme on mount
+  onMounted(() => {
+    const storedTheme = getStoredTheme()
+    const initialTheme = storedTheme || getSystemTheme()
+
+    themePreference.value = initialTheme
+    applyTheme(initialTheme)
+
+    // Listen for system theme changes if no user preference
+    if (import.meta.client && !storedTheme) {
+      const media = window.matchMedia('(prefers-color-scheme: dark)')
+      media.addEventListener('change', (e) => {
+        // Only react to system changes if user hasn't manually set a valid preference (optional logic, but matches typical behavior)
+        // For now, let's just update if no stored theme
+        if (!getStoredTheme()) {
+          const newSystemTheme = e.matches ? 'dark' : 'light'
+          themePreference.value = newSystemTheme
+          applyTheme(newSystemTheme)
+        }
+      })
+    }
+  })
+
+  return {
+    themePreference: readonly(themePreference),
+    setTheme,
+    toggleTheme,
+  }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Composable for managing Bible tooltip scanning on page content
+ * Automatically scans content when it becomes available and re-scans on changes
+ */
+export function useBibleTooltips(pageRef: Ref<any>) {
+  const { $bibleTooltips } = useNuxtApp()
+
+  onMounted(() => {
+    // Initial scan if page is already loaded
+    if (pageRef.value) {
+      nextTick(() => $bibleTooltips.scan())
+    }
+
+    // Watch for content changes and re-scan
+    watch(pageRef, (newPage) => {
+      if (newPage) {
+        nextTick(() => $bibleTooltips.scan())
+      }
+    })
+  })
+}

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

@@ -0,0 +1,70 @@
+export interface BreadcrumbItem {
+  title: string
+  path: string
+}
+
+/**
+ * Extract fallback title from path
+ */
+function getFallbackTitle(pagePath: string, siteName?: string): string {
+  if (pagePath === '/') return siteName || 'Home'
+  return pagePath.split('/').filter(Boolean).pop() || 'Page'
+}
+
+/**
+ * Generate breadcrumb array from a given path
+ * @param path - Route path (e.g., '/church/history/messianic')
+ * @returns Array of breadcrumb items
+ */
+export async function generateBreadcrumbs(path: string): Promise<BreadcrumbItem[]> {
+  const segments = path.split('/').filter(Boolean)
+  const { siteName } = useSiteConfig()
+
+  // Build full path array for querying (includes root)
+  const paths: string[] = ['/']
+  for (let i = 0; i < segments.length; i++) {
+    paths.push('/' + segments.slice(0, i + 1).join('/'))
+  }
+
+  // Query all pages to get titles
+  const pageTitles = new Map<string, string>()
+
+  for (const pagePath of paths) {
+    try {
+      const page = await queryCollection('content').path(pagePath).first()
+      pageTitles.set(pagePath, page?.title || getFallbackTitle(pagePath, siteName))
+    } catch {
+      pageTitles.set(pagePath, getFallbackTitle(pagePath, siteName))
+    }
+  }
+
+  // Build breadcrumb items based on path depth
+  const breadcrumbs: BreadcrumbItem[] = []
+
+  if (segments.length <= 3) {
+    // Show root + all segments
+    for (const currentPath of paths) {
+      breadcrumbs.push({
+        title: pageTitles.get(currentPath) || getFallbackTitle(currentPath, siteName),
+        path: currentPath
+      })
+    }
+  } else {
+    // Show ellipsis + last 3 segments
+    // For /a/b/c/d: show ... > b > c > d, ellipsis links to /a
+    const firstVisibleIndex = segments.length - 3
+    const ellipsisPath = '/' + segments.slice(0, firstVisibleIndex).join('/')
+
+    breadcrumbs.push({ title: '...', path: ellipsisPath })
+
+    for (let i = firstVisibleIndex; i < segments.length; i++) {
+      const segmentPath = '/' + segments.slice(0, i + 1).join('/')
+      breadcrumbs.push({
+        title: pageTitles.get(segmentPath) || segments[i] || 'Page',
+        path: segmentPath
+      })
+    }
+  }
+
+  return breadcrumbs
+}

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

@@ -0,0 +1,89 @@
+/**
+ * Post-process content after ContentRenderer finishes rendering
+ * Uses Vue's onUpdated lifecycle hook to detect when ContentRenderer completes rendering
+ *
+ * NOTE: Bible verses are now wrapped in <span class="bible-ref"> at BUILD TIME
+ * via the content transformer (see content.config.ts and app/transformers/bible-verses.ts)
+ * This composable only attaches event listeners to pre-existing spans.
+ *
+ * Strategy:
+ * 1. Watch for page data arrival
+ * 2. Use onUpdated() to run processing after ContentRenderer re-renders
+ * 3. Guard flag prevents duplicate processing
+ * 4. Let useTableOfContents handle "< 2 headings" check via DOM
+ *
+ * This follows the standard Vue pattern for "run code after component updates"
+ */
+export function useContentPostProcessing(pageRef: Ref<any>) {
+  const { $bibleTooltips } = useNuxtApp()
+  const layoutGenerateTOC = inject<() => void>('generateTOC')
+
+  // Track if we've already processed the current page
+  const processedPageId = ref<string | null>(null)
+
+  /**
+   * Process content: attach event listeners to Bible verses and generate TOC
+   * Bible verses are already wrapped in spans at build time
+   * Only runs once per page load
+   */
+  function processContent() {
+    const currentPage = pageRef.value
+    if (!currentPage) return
+
+    // Prevent duplicate processing of the same page
+    const pageId = currentPage.id || currentPage._path || currentPage.path
+    if (processedPageId.value === pageId) return
+
+    // Verify content actually exists in DOM (guard against spurious onUpdated calls)
+    const contentContainer = document.querySelector('.content-body, article')
+    if (!contentContainer) return
+
+    const hasContent = contentContainer.querySelector('h1, h2, h3, p')
+    if (!hasContent) return
+
+    // Mark as processed BEFORE running operations to prevent re-entry
+    processedPageId.value = pageId
+
+    // Scan for Bible verse references (scoped to article content only)
+    $bibleTooltips.scan(contentContainer as HTMLElement)
+
+    // Generate TOC (useTableOfContents will handle the "< 2 headings" check)
+    if (layoutGenerateTOC) {
+      layoutGenerateTOC()
+    }
+  }
+
+  /**
+   * Reset processed flag when new page data arrives
+   * This allows onUpdated to process the new content
+   */
+  watch(pageRef, (newPage) => {
+    if (!newPage) return
+
+    // Reset processed flag when new page data arrives
+    processedPageId.value = null
+  }, { immediate: true })
+
+  /**
+   * Vue lifecycle hook: runs after component DOM updates
+   * This fires after ContentRenderer finishes re-rendering with new data
+   *
+   * IMPORTANT: Add nextTick to ensure all child component DOM updates are committed
+   * ContentRenderer might still be updating when onUpdated fires
+   */
+  onUpdated(() => {
+    nextTick(() => {
+      processContent()
+    })
+  })
+
+  /**
+   * Also process on initial mount (handles direct page load)
+   */
+  onMounted(() => {
+    // Wait for hydration to complete
+    nextTick(() => {
+      processContent()
+    })
+  })
+}