@life-and-dev/mdsite 0.0.3

package/mdsite-nuxt/app/assets/css/bible-tooltips.css

@@ -0,0 +1,87 @@
+/* Bible Tooltip Overlay */
+.bible-tooltip-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: none;
+  background: transparent;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+/* Bible Tooltip Container */
+.bible-tooltip {
+  position: fixed;
+  background: rgb(var(--v-theme-surface-appbar));
+  color: rgb(var(--v-theme-on-surface-appbar));
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  max-width: 25rem;
+  z-index: 10000;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
+  display: none;
+}
+
+/* Bible Tooltip Title */
+.bible-tooltip-title {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+/* Bible Tooltip Translation Badge */
+.bible-tooltip-translation {
+  color: rgb(var(--v-theme-on-surface-rail));
+  font-weight: 500;
+}
+
+/* Bible Tooltip Verse Text */
+.bible-tooltip-text {
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+/* Bible Tooltip Footer */
+.bible-tooltip-footer {
+  border-top: 1px solid rgb(var(--v-theme-outline));
+  padding-top: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+/* Bible Tooltip Links */
+.bible-tooltip-link {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+  font-size: 0.8125rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Bible Tooltip Link Icons (Material Design Icons) */
+.bible-tooltip-link i.mdi {
+  font-size: 1.25rem;
+}
+
+/* Bible Tooltip Hebrew/Greek Characters with Font Fallback */
+.bible-tooltip-hebrew-greek {
+  font-family: 'Noto Sans', sans-serif;
+  font-size: 1.5em;
+}
+
+.bible-tooltip-link-text:hover {
+  text-decoration: underline;
+}
+
+/* Bible Reference Spans (in content) */
+.bible-ref {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: underline;
+  cursor: help;
+}

package/mdsite-nuxt/app/assets/css/markdown.css

@@ -0,0 +1,195 @@
+/* Content Body Styles - Used by @nuxt/content ContentRenderer */
+
+/* Headings */
+.content-body h1 {
+  font-size: 2.6rem;
+  margin-top: 0; /* This is the first line of text, there should be no other text above it */
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.content-body h2 {
+  font-size: 1.8rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+}
+
+.content-body h3 {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.content-body h4 {
+  font-size: 1.2rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.content-body h5 {
+  font-size: 1.1rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+/* Paragraphs */
+.content-body p {
+  margin: 0.8rem 0;
+}
+
+/* Blockquotes - rendered as VCards via ProseBlockquote.vue */
+.content-body .blockquote-content {
+  font-family: Georgia, 'Times New Roman', serif;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 1.05rem;
+}
+
+/* Nested blockquotes - create visual hierarchy */
+.content-body .blockquote-content .v-card {
+  margin-left: 1rem;
+  margin-right: 0;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  border-left: 0.25rem solid rgb(var(--v-theme-secondary));
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.content-body .blockquote-content .v-card .v-card-text {
+  padding: 0.75rem 1rem;
+}
+
+/* Nested blockquote text slightly smaller */
+.content-body .blockquote-content .blockquote-content {
+  font-size: 1rem;
+  color: rgb(var(--v-theme-on-surface-rail));
+}
+
+/* Links */
+.content-body a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+.content-body a:hover {
+  text-decoration: underline;
+}
+
+/* Text formatting */
+.content-body strong {
+  font-weight: 600;
+}
+
+.content-body em {
+  font-style: italic;
+}
+
+/* Lists */
+.content-body ul,
+.content-body ol {
+  margin: 0.8rem 0;
+  padding-left: 2rem;
+}
+
+.content-body ul {
+  list-style-type: disc;
+}
+
+.content-body ol {
+  list-style-type: decimal;
+}
+
+.content-body ul ul {
+  margin: 0.4rem 0;
+  list-style-type: circle;
+}
+
+.content-body ul ul ul {
+  list-style-type: square;
+}
+
+.content-body ol ol {
+  margin: 0.4rem 0;
+  list-style-type: lower-alpha;
+}
+
+.content-body ol ol ol {
+  list-style-type: lower-roman;
+}
+
+.content-body li {
+  margin: 0.4rem 0;
+  line-height: 1.6;
+}
+
+/* Lists inside blockquotes (VCard) need extra padding */
+.content-body .blockquote-content ul,
+.content-body .blockquote-content ol {
+  padding-left: 2.5rem;
+}
+
+/* GFM Alerts (GitHub Flavored Markdown) */
+.content-body .markdown-alert {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 0.25rem solid;
+  border-radius: 0.25rem;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.content-body .markdown-alert-title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  margin-top: 0 !important;
+  margin-bottom: 0.5rem !important;
+  font-size: 1rem;
+}
+
+.content-body .markdown-alert-note {
+  border-color: rgb(var(--v-theme-info));
+  background-color: rgba(var(--v-theme-info), 0.05);
+}
+.content-body .markdown-alert-note .markdown-alert-title {
+  color: rgb(var(--v-theme-info));
+}
+
+.content-body .markdown-alert-tip {
+  border-color: rgb(var(--v-theme-success));
+  background-color: rgba(var(--v-theme-success), 0.05);
+}
+.content-body .markdown-alert-tip .markdown-alert-title {
+  color: rgb(var(--v-theme-success));
+}
+
+.content-body .markdown-alert-important {
+  border-color: rgb(var(--v-theme-primary));
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+.content-body .markdown-alert-important .markdown-alert-title {
+  color: rgb(var(--v-theme-primary));
+}
+
+.content-body .markdown-alert-warning {
+  border-color: rgb(var(--v-theme-warning));
+  background-color: rgba(var(--v-theme-warning), 0.05);
+}
+.content-body .markdown-alert-warning .markdown-alert-title {
+  color: rgb(var(--v-theme-warning));
+}
+
+.content-body .markdown-alert-caution {
+  border-color: rgb(var(--v-theme-error));
+  background-color: rgba(var(--v-theme-error), 0.05);
+}
+.content-body .markdown-alert-caution .markdown-alert-title {
+  color: rgb(var(--v-theme-error));
+}
+
+.content-body .markdown-alert p:last-child {
+  margin-bottom: 0;
+}

package/mdsite-nuxt/app/assets/css/print.css

@@ -0,0 +1,133 @@
+/* Print-friendly styles */
+@media print {
+
+  /* Hide navigation elements */
+  .v-app-bar,
+  .v-navigation-drawer,
+  .app-bar,
+  .app-navigation,
+  header,
+  nav {
+    display: none !important;
+  }
+
+  /* Remove margins and padding for navigation rail */
+  .v-main {
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: 100% !important;
+  }
+
+  /* Reset layout for printing */
+  .v-application {
+    background: white !important;
+  }
+
+  /* Ensure content takes full width */
+  .v-container {
+    max-width: none !important;
+    padding: 0 !important;
+  }
+
+  /* Optimize text for printing */
+  body {
+    color: black !important;
+    background: white !important;
+    font-size: 10pt;
+    line-height: 1.5;
+  }
+
+  /* Force standard text to pure black, but allow code colors */
+  .v-application p,
+  .v-application h1,
+  .v-application h2,
+  .v-application h3,
+  .v-application h4,
+  .v-application h5,
+  .v-application h6,
+  .v-application li,
+  .v-application blockquote,
+  .v-application dt,
+  .v-application dd,
+  .v-application th,
+  .v-application td {
+    color: black !important;
+  }
+
+  /* Render links as plain text */
+  a {
+    color: black !important;
+    text-decoration: none !important;
+  }
+
+  /* Don't print URLs after links */
+  a[href]::after {
+    content: "" !important;
+  }
+
+  /* Ensure images fit on page, but can take full width */
+  img {
+    max-width: 100% !important;
+    width: auto !important;
+    height: auto !important;
+    page-break-inside: avoid;
+  }
+
+  /* Avoid breaking inside elements */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Blockquotes and cards */
+  blockquote,
+  .v-card {
+    page-break-inside: avoid;
+    border: 2px solid #ccc !important;
+    border-radius: 1rem !important;
+    padding: 0 !important;
+  }
+
+  /* Nested blockquotes - create visual hierarchy in print */
+  .content-body .blockquote-content .v-card {
+    margin-left: 0.75rem !important;
+    margin-right: 0 !important;
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important;
+    border: none !important;
+    border-left: 0.25rem solid grey !important;
+    background-color: white !important;
+    padding: 0 !important;
+  }
+
+  /* Nested blockquote text slightly smaller */
+  .content-body .blockquote-content .blockquote-content {
+    font-size: 11pt !important;
+  }
+
+  /* Hide interactive elements that don't make sense in print */
+  .v-btn,
+  .v-chip,
+  .v-menu,
+  button {
+    display: none !important;
+  }
+
+  /* Show Bible verse content as plain text */
+  .bible-reference,
+  .bible-ref {
+    text-decoration: none !important;
+    color: inherit !important;
+  }
+
+  /* Remove shadows and elevations */
+  * {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+}

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

@@ -0,0 +1,138 @@
+<template>
+  <v-app-bar
+    height="56"
+    :class="['app-bar', { 'sidebars-visible': sidebarsVisible }]"
+    flat
+  >
+    <!-- Hamburger menu (always visible) -->
+    <v-tooltip text="Toggle menu" location="bottom">
+      <template v-slot:activator="{ props }">
+        <v-app-bar-nav-icon
+          v-bind="props"
+          icon="mdi-menu"
+          @click="$emit('toggle-menu')"
+        />
+      </template>
+    </v-tooltip>
+
+    <!-- Breadcrumb navigation -->
+    <BreadcrumbNav :breadcrumbs="breadcrumbs" class="flex-grow-1" />
+
+    <!-- Action buttons (right-aligned) -->
+
+    <v-tooltip text="Toggle theme" location="bottom">
+      <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" icon="mdi-brightness-6" @click="toggleTheme" />
+      </template>
+    </v-tooltip>
+
+    <v-tooltip text="Print page" location="bottom">
+      <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" icon="mdi-printer" @click="handlePrint" />
+      </template>
+    </v-tooltip>
+
+    <v-tooltip v-if="editUrl" text="Edit on GitHub" location="bottom">
+      <template v-slot:activator="{ props }">
+        <v-btn
+          v-bind="props"
+          icon="mdi-pencil"
+          :href="editUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+        />
+      </template>
+    </v-tooltip>
+    
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { generateBreadcrumbs } from '~/composables/useBreadcrumbs'
+import type { BreadcrumbItem } from '~/composables/useBreadcrumbs'
+import { useSourceEdit } from '~/composables/useSourceEdit';
+
+const props = defineProps<{
+  sidebarsVisible?: boolean
+}>()
+
+const emit = defineEmits<{
+  'toggle-menu': []
+}>()
+
+const route = useRoute()
+const { toggleTheme } = useAppTheme()
+const { getEditUrl } = useSourceEdit()
+
+// Generate breadcrumbs for current route
+const breadcrumbs = ref<BreadcrumbItem[]>([])
+
+async function loadBreadcrumbs() {
+  breadcrumbs.value = await generateBreadcrumbs(route.path)
+}
+
+// Generate GitHub edit URL
+const editUrl = computed(() => getEditUrl())
+
+// Watch for route changes
+watch(() => route.path, () => {
+  loadBreadcrumbs()
+}, { immediate: true })
+
+const triggerPrint = inject('triggerPrint', () => {
+  // Fallback if not provided
+  window.print()
+})
+
+const handlePrint = () => {
+  triggerPrint()
+}
+</script>
+
+<style scoped>
+.app-bar {
+  z-index: 1000 !important;
+}
+
+/* Desktop: Add margins to prevent sidebar overlap */
+@media (min-width: 960px) {
+  .app-bar :deep(.v-toolbar__content) {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    margin-left: 0;
+    margin-right: 0;
+    max-width: 100vw;
+    transition: margin-left 0.3s ease, margin-right 0.3s ease, max-width 0.3s ease;
+  }
+
+  /* When sidebars are visible, add margins */
+  .app-bar.sidebars-visible :deep(.v-toolbar__content) {
+    margin-left: 320px;
+    margin-right: 320px;
+    max-width: calc(100vw - 320px - 320px);
+  }
+
+  /* Adjust left icon margin when sidebars are visible */
+  .app-bar.sidebars-visible :deep(.v-app-bar-nav-icon) {
+    margin-left: 0.5rem;
+  }
+
+  /* Adjust right icon margins when sidebars are visible */
+  .app-bar.sidebars-visible :deep(.v-btn:last-child) {
+    margin-right: 0.5rem;
+  }
+}
+
+/* Ensure breadcrumbs don't overlap with buttons */
+.flex-grow-1 {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+/* Print: Hide AppBar */
+@media print {
+  .app-bar {
+    display: none !important;
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <v-app-bar
+    location="bottom"
+    height="56"
+    class="app-footer"
+    flat
+  >
+    <v-container class="d-flex justify-center align-center">
+      <div class="footer-links">
+        <v-btn
+          :to="aboutLink"
+          variant="text"
+          color="on-surface-appbar"
+          class="footer-link"
+        >
+          About
+        </v-btn>
+
+        <v-divider vertical class="mx-2" />
+
+        <v-btn
+          :to="disclaimerLink"
+          variant="text"
+          color="on-surface-appbar"
+          class="footer-link"
+        >
+          Disclaimer
+        </v-btn>
+
+        <v-divider v-if="editUrl" vertical class="mx-2" />
+
+        <v-btn
+          v-if="editUrl"
+          :href="editUrl"
+          variant="text"
+          color="on-surface-appbar"
+          class="footer-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Edit
+        </v-btn>
+      </div>
+    </v-container>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { useSourceEdit } from '~/composables/useSourceEdit';
+
+const { getEditUrl } = useSourceEdit()
+
+// Generate links to root content files
+const aboutLink = computed(() => '/about')
+const disclaimerLink = computed(() => '/disclaimer')
+const editUrl = computed(() => getEditUrl())
+</script>
+
+<style scoped>
+.app-footer {
+  z-index: 1000 !important;
+}
+
+.footer-links {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.footer-link {
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+
+/* Make dividers visible with theme colors */
+:deep(.v-divider) {
+  opacity: 0.3;
+  height: 1.5rem;
+}
+
+/* Print: Hide Footer */
+@media print {
+  .app-footer {
+    display: none !important;
+  }
+}
+</style>