@blogmcp/mdx-render-vue 0.1.0

package/dist/useGallery.d.ts

@@ -0,0 +1,44 @@
+import { ComputedRef } from 'vue';
+import { GalleryProps } from '@blogmcp/mdx-schema';
+import { GalleryTileLayout } from '@blogmcp/mdx-schema/styles';
+import { galleryTileLayout } from '@blogmcp/mdx-schema/styles';
+import { MediaObject } from '@blogmcp/mdx-schema';
+
+export { GalleryTileLayout }
+
+export { galleryTileLayout }
+
+/**
+ * Grid column class mappings
+ */
+export declare const gridColsClasses: Record<number, string>;
+
+/**
+ * Type guard for MediaObject
+ */
+export declare function isMediaObject(value: unknown): value is MediaObject;
+
+/**
+ * Check if a URL points to a video file based on extension
+ */
+export declare function isVideoUrl(src: string): boolean;
+
+/**
+ * Composable for Gallery component logic
+ */
+export declare function useGallery(props: GalleryProps): {
+    effectiveColumns: ComputedRef<1 | 2 | 3 | 4>;
+    gridColsClass: ComputedRef<string>;
+    gapClass: ComputedRef<string>;
+    tileLayout: ComputedRef<GalleryTileLayout>;
+    getImageSrc: (index: number) => string;
+    getImageAlt: (index: number) => string;
+    getImageDescription: (index: number) => string | undefined;
+    getImageCaption: (index: number) => string | undefined;
+    isVideo: (index: number) => boolean;
+    getVideoPoster: (index: number) => string | undefined;
+    hasImages: ComputedRef<boolean>;
+    imageCount: ComputedRef<number>;
+};
+
+export { }

package/dist/useMedia.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'vue';
+import { InjectionKey } from 'vue';
+
+/**
+ * Injection key for the optimized image component.
+ * The host app should `provide(IMG_COMPONENT_KEY, NuxtImg)`.
+ */
+export declare const IMG_COMPONENT_KEY: InjectionKey<Component | string>;
+
+/**
+ * Returns the provided image component (e.g. NuxtImg),
+ * or falls back to plain `'img'` when nothing is provided.
+ */
+export declare function useOptimizedImg(): Component | string;
+
+export { }

package/dist/useYouTube.d.ts

@@ -0,0 +1,32 @@
+import { ComputedRef } from 'vue';
+import { YouTubeProps } from '@blogmcp/mdx-schema';
+
+/**
+ * Composable for YouTube component logic
+ */
+export declare function useYouTube(props: YouTubeProps): {
+    embedUrl: ComputedRef<string>;
+    iframeTitle: ComputedRef<string>;
+    hasTitle: ComputedRef<boolean>;
+    thumbnailUrl: ComputedRef<string>;
+    iframeAttrs: ComputedRef<    {
+    src: string;
+    title: string;
+    frameborder: string;
+    allow: string;
+    allowfullscreen: boolean;
+    }>;
+    YOUTUBE_IFRAME_ALLOW: string;
+};
+
+/**
+ * YouTube embed URL base
+ */
+export declare const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
+
+/**
+ * Default iframe allow attributes
+ */
+export declare const YOUTUBE_IFRAME_ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+
+export { }

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@blogmcp/mdx-render-vue",
+  "version": "0.1.0",
+  "description": "Vue renderer for MDX components — edit + render SFCs wired to @blogmcp/mdx-schema",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
+    },
+    "./edit": {
+      "types": "./src/edit/index.ts",
+      "import": "./dist/edit/index.js"
+    },
+    "./render": {
+      "types": "./src/render/index.ts",
+      "import": "./dist/render/index.js"
+    },
+    "./composables": {
+      "types": "./src/composables/index.ts",
+      "import": "./dist/composables/index.js"
+    },
+    "./registry": {
+      "types": "./src/registry.ts",
+      "import": "./dist/registry.js"
+    },
+    "./render/callout": {
+      "types": "./src/render/callout/index.ts",
+      "import": "./dist/render/callout/index.js"
+    },
+    "./render/codeblock": {
+      "types": "./src/render/codeblock/index.ts",
+      "import": "./dist/render/codeblock/index.js"
+    },
+    "./render/gallery": {
+      "types": "./src/render/gallery/index.ts",
+      "import": "./dist/render/gallery/index.js"
+    },
+    "./render/youtube": {
+      "types": "./src/render/youtube/index.ts",
+      "import": "./dist/render/youtube/index.js"
+    },
+    "./render/audioplayer": {
+      "types": "./src/render/audioplayer/index.ts",
+      "import": "./dist/render/audioplayer/index.js"
+    },
+    "./composables/gallery": {
+      "types": "./src/composables/useGallery.ts",
+      "import": "./dist/composables/useGallery.js"
+    },
+    "./composables/media": {
+      "types": "./src/composables/useMedia.ts",
+      "import": "./dist/composables/useMedia.js"
+    },
+    "./composables/callout": {
+      "types": "./src/composables/useCallout.ts",
+      "import": "./dist/composables/useCallout.js"
+    },
+    "./composables/codeblock": {
+      "types": "./src/composables/useCodeBlock.ts",
+      "import": "./dist/composables/useCodeBlock.js"
+    },
+    "./composables/youtube": {
+      "types": "./src/composables/useYouTube.ts",
+      "import": "./dist/composables/useYouTube.js"
+    },
+    "./composables/audioplayer": {
+      "types": "./src/composables/useAudioPlayer.ts",
+      "import": "./dist/composables/useAudioPlayer.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test --config=test/e2e/playwright.config.ts",
+    "test:e2e:ui": "playwright test --config=test/e2e/playwright.config.ts --ui",
+    "harness": "vite --config test/e2e/harness/vite.config.ts --port 5099 --open",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@blogmcp/mdx-schema": "^0.1.0",
+    "@blogmcp/sanitize": "^0.1.0",
+    "@ark-ui/vue": "^5.0.0",
+    "@iconify/vue": "^5.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/utils": "3.2.4",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^17.4.0",
+    "typescript": "^5.3.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^3.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "keywords": [
+    "mdx",
+    "vue",
+    "components",
+    "markdown"
+  ],
+  "license": "MIT"
+}

package/src/composables/index.ts

@@ -0,0 +1,16 @@
+/**
+ * MDX Components Composables
+ *
+ * Shared logic for MDX components.
+ */
+
+export { useCallout, calloutConfigs, calloutIconPaths } from './useCallout'
+export { useCodeBlock, getLanguageLabel, languageLabels } from './useCodeBlock'
+export { useGallery, gridColsClasses, isMediaObject, isVideoUrl } from './useGallery'
+export {
+  useYouTube,
+  YOUTUBE_EMBED_BASE,
+  YOUTUBE_IFRAME_ALLOW,
+} from './useYouTube'
+export { useAudioPlayer } from './useAudioPlayer'
+export { useOptimizedImg, IMG_COMPONENT_KEY } from './useMedia'

package/src/composables/useAudioPlayer.ts

@@ -0,0 +1,84 @@
+/**
+ * AudioPlayer Composable
+ *
+ * Shared logic for AudioPlayer component variants.
+ */
+
+import { computed, ref } from 'vue'
+import type { AudioPlayerProps } from '@blogmcp/mdx-schema'
+
+/**
+ * Composable for AudioPlayer component logic
+ */
+export function useAudioPlayer(props: AudioPlayerProps) {
+  const hasTitle = computed(() => !!props.title)
+
+  const displayTitle = computed(() => props.title || props.slug || 'Audio')
+
+  const showTranscription = computed(() => props.showTranscription ?? false)
+
+  /**
+   * Build audio URL from slug.
+   * Uses the KB API media file endpoint.
+   */
+  const audioUrl = computed(() => {
+    if (!props.slug) return ''
+    return `/api/media/file/${props.slug}`
+  })
+
+  /**
+   * Build transcription API URL from slug.
+   */
+  const transcriptionUrl = computed(() => {
+    if (!props.slug) return ''
+    return `/api/media/transcription/${props.slug}`
+  })
+
+  /**
+   * Transcription state (for components that load transcription)
+   */
+  const transcriptionText = ref<string | null>(null)
+  const transcriptionSummary = ref<string | null>(null)
+  const transcriptionLoading = ref(false)
+  const transcriptionExpanded = ref(false)
+
+  async function loadTranscription() {
+    if (!props.slug || transcriptionText.value !== null) return
+    transcriptionLoading.value = true
+    try {
+      const response = await fetch(transcriptionUrl.value)
+      if (response.ok) {
+        const data = await response.json()
+        transcriptionText.value = data.fullText || data.full_text || ''
+        transcriptionSummary.value = data.summary || null
+      } else {
+        transcriptionText.value = ''
+      }
+    } catch {
+      transcriptionText.value = ''
+    } finally {
+      transcriptionLoading.value = false
+    }
+  }
+
+  function toggleTranscription() {
+    transcriptionExpanded.value = !transcriptionExpanded.value
+    if (transcriptionExpanded.value && transcriptionText.value === null) {
+      loadTranscription()
+    }
+  }
+
+  return {
+    hasTitle,
+    displayTitle,
+    showTranscription,
+    audioUrl,
+    transcriptionUrl,
+    transcriptionText,
+    transcriptionSummary,
+    transcriptionLoading,
+    transcriptionExpanded,
+    loadTranscription,
+    toggleTranscription,
+  }
+}

package/src/composables/useCallout.ts

@@ -0,0 +1,103 @@
+/**
+ * Callout Composable
+ *
+ * Shared logic for Callout component variants.
+ */
+
+import { computed } from 'vue'
+import type { CalloutType, CalloutProps } from '@blogmcp/mdx-schema'
+
+export interface CalloutConfig {
+  type: CalloutType
+  icon: string
+  colors: {
+    bg: string
+    border: string
+    text: string
+    iconColor: string
+  }
+}
+
+/**
+ * Default callout configurations for each type
+ */
+export const calloutConfigs: Record<CalloutType, Omit<CalloutConfig, 'type'>> = {
+  info: {
+    icon: 'info-circle',
+    colors: {
+      bg: 'bg-blue-900/20',
+      border: 'border-blue-500',
+      text: 'text-blue-200',
+      iconColor: 'text-blue-400',
+    },
+  },
+  warning: {
+    icon: 'warning-triangle',
+    colors: {
+      bg: 'bg-yellow-900/20',
+      border: 'border-yellow-500',
+      text: 'text-yellow-200',
+      iconColor: 'text-yellow-400',
+    },
+  },
+  tip: {
+    icon: 'lightbulb',
+    colors: {
+      bg: 'bg-green-900/20',
+      border: 'border-green-500',
+      text: 'text-green-200',
+      iconColor: 'text-green-400',
+    },
+  },
+  danger: {
+    icon: 'alert-circle',
+    colors: {
+      bg: 'bg-red-900/20',
+      border: 'border-red-500',
+      text: 'text-red-200',
+      iconColor: 'text-red-400',
+    },
+  },
+}
+
+/**
+ * SVG path data for callout icons
+ */
+export const calloutIconPaths: Record<string, string> = {
+  'info-circle': 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  'warning-triangle':
+    'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+  lightbulb:
+    'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
+  'alert-circle': 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+}
+
+/**
+ * Composable for Callout component logic
+ */
+export function useCallout(props: CalloutProps) {
+  const effectiveType = computed<CalloutType>(() => props.type || 'info')
+
+  const config = computed(() => ({
+    type: effectiveType.value,
+    ...calloutConfigs[effectiveType.value],
+  }))
+
+  const containerClasses = computed(() => [
+    config.value.colors.bg,
+    config.value.colors.border,
+    config.value.colors.text,
+  ])
+
+  const iconPath = computed(() => calloutIconPaths[config.value.icon])
+
+  const iconClasses = computed(() => config.value.colors.iconColor)
+
+  return {
+    effectiveType,
+    config,
+    containerClasses,
+    iconPath,
+    iconClasses,
+  }
+}

package/src/composables/useCodeBlock.ts

@@ -0,0 +1,90 @@
+/**
+ * CodeBlock Composable
+ *
+ * Shared logic for CodeBlock component variants.
+ */
+
+import { computed, ref } from 'vue'
+import type { CodeBlockProps } from '@blogmcp/mdx-schema'
+
+/**
+ * Language label mappings
+ */
+export const languageLabels: Record<string, string> = {
+  js: 'JavaScript',
+  javascript: 'JavaScript',
+  ts: 'TypeScript',
+  typescript: 'TypeScript',
+  vue: 'Vue',
+  html: 'HTML',
+  css: 'CSS',
+  json: 'JSON',
+  python: 'Python',
+  py: 'Python',
+  bash: 'Bash',
+  sh: 'Shell',
+  sql: 'SQL',
+  text: 'Plain Text',
+  rust: 'Rust',
+  go: 'Go',
+  java: 'Java',
+  cpp: 'C++',
+  c: 'C',
+  csharp: 'C#',
+  php: 'PHP',
+  ruby: 'Ruby',
+  swift: 'Swift',
+  kotlin: 'Kotlin',
+  yaml: 'YAML',
+  yml: 'YAML',
+  xml: 'XML',
+  markdown: 'Markdown',
+  md: 'Markdown',
+  graphql: 'GraphQL',
+  dockerfile: 'Dockerfile',
+}
+
+/**
+ * Get display label for a language
+ */
+export function getLanguageLabel(language?: string): string {
+  if (!language) return 'Plain Text'
+  const lang = language.toLowerCase()
+  if (languageLabels[lang]) return languageLabels[lang]
+  // Capitalize first letter as fallback
+  return lang.charAt(0).toUpperCase() + lang.slice(1)
+}
+
+/**
+ * Composable for CodeBlock component logic
+ */
+export function useCodeBlock(props: CodeBlockProps) {
+  const copied = ref(false)
+
+  const languageLabel = computed(() => getLanguageLabel(props.language))
+
+  const languageClass = computed(() => `language-${props.language || 'text'}`)
+
+  /**
+   * Copy code to clipboard
+   * @param codeContent - The code text to copy (passed from component)
+   */
+  async function copyCode(codeContent: string) {
+    try {
+      await navigator.clipboard.writeText(codeContent)
+      copied.value = true
+      setTimeout(() => {
+        copied.value = false
+      }, 2000)
+    } catch (error) {
+      console.error('Failed to copy code:', error)
+    }
+  }
+
+  return {
+    copied,
+    languageLabel,
+    languageClass,
+    copyCode,
+  }
+}

package/src/composables/useGallery.ts

@@ -0,0 +1,143 @@
+/**
+ * Gallery Composable
+ *
+ * Shared logic for Gallery component variants.
+ */
+
+import { computed } from 'vue'
+import type { GalleryProps, MediaObject } from '@blogmcp/mdx-schema'
+import { galleryTileLayout, type GalleryTileLayout } from '@blogmcp/mdx-schema/styles'
+
+// Re-export the shared (framework-agnostic) tile-layout helper so existing
+// importers of this composable keep working. The logic lives once in
+// @blogmcp/mdx-schema/styles and is mirrored by the React renderer.
+export { galleryTileLayout, type GalleryTileLayout }
+
+const VIDEO_EXTENSIONS = /\.(mp4|webm|mov|avi|mkv|m4v)(\?.*)?$/i
+const KB_MEDIA_FILE_RE = /\/api\/media\/file\/([^/?#]+)/
+
+/**
+ * Type guard for MediaObject
+ */
+export function isMediaObject(value: unknown): value is MediaObject {
+  return typeof value === 'object' && value !== null && 'src' in value && typeof (value as MediaObject).src === 'string'
+}
+
+/**
+ * Check if a URL points to a video file based on extension
+ */
+export function isVideoUrl(src: string): boolean {
+  return VIDEO_EXTENSIONS.test(src)
+}
+
+/**
+ * Grid column class mappings
+ */
+export const gridColsClasses: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+}
+
+/**
+ * Composable for Gallery component logic
+ */
+export function useGallery(props: GalleryProps) {
+  const effectiveColumns = computed(() => props.columns || 2)
+
+  const gridColsClass = computed(() => {
+    const cols = effectiveColumns.value
+    return gridColsClasses[cols] || 'grid-cols-2'
+  })
+
+  const gapClass = computed(() => {
+    const gap = props.gap || 4
+    return `gap-${gap}`
+  })
+
+  /** Inline tile/media styles + sizing class from aspectRatio/fit/position. */
+  const tileLayout = computed(() => galleryTileLayout(props))
+
+  /**
+   * Get the image source URL at a given index
+   */
+  function getImageSrc(index: number): string {
+    const image = props.images[index]
+    return isMediaObject(image) ? image.src : image
+  }
+
+  /**
+   * Generate alt text for an image, preferring MediaObject.alt
+   */
+  function getImageAlt(index: number): string {
+    const image = props.images[index]
+    if (isMediaObject(image)) return image.alt || `Gallery image ${index + 1}`
+    return `Gallery image ${index + 1}`
+  }
+
+  /**
+   * Get the description for an image (only MediaObject has descriptions)
+   */
+  function getImageDescription(index: number): string | undefined {
+    const image = props.images[index]
+    return isMediaObject(image) ? image.description : undefined
+  }
+
+  /**
+   * Caption shown below a gallery item: prefer the description, fall back to the
+   * alt text. Many authors fill only one of the two, so the caption uses whichever
+   * is present (description first — it's the richer field). Returns undefined for
+   * plain string images with no metadata (no caption rendered). NOTE: uses the
+   * real authored alt, never the `getImageAlt` "Gallery image N" placeholder.
+   */
+  function getImageCaption(index: number): string | undefined {
+    const image = props.images[index]
+    if (!isMediaObject(image)) return undefined
+    return image.description || image.alt || undefined
+  }
+
+  /**
+   * Check if the item at index is a video (by type field or URL extension)
+   */
+  function isVideo(index: number): boolean {
+    const image = props.images[index]
+    if (isMediaObject(image)) {
+      if (image.type === 'video') return true
+      if (image.type === 'image') return false
+      return isVideoUrl(image.src)
+    }
+    return isVideoUrl(image)
+  }
+
+  /**
+   * Get poster URL for a video (KB media videos only)
+   */
+  function getVideoPoster(index: number): string | undefined {
+    const src = getImageSrc(index)
+    const match = src.match(KB_MEDIA_FILE_RE)
+    return match ? `/api/media/poster/${match[1]}` : undefined
+  }
+
+  /**
+   * Check if images array is valid
+   */
+  const hasImages = computed(() => props.images && props.images.length > 0)
+
+  const imageCount = computed(() => props.images?.length || 0)
+
+  return {
+    effectiveColumns,
+    gridColsClass,
+    gapClass,
+    tileLayout,
+    getImageSrc,
+    getImageAlt,
+    getImageDescription,
+    getImageCaption,
+    isVideo,
+    getVideoPoster,
+    hasImages,
+    imageCount,
+  }
+}

package/src/composables/useMedia.ts

@@ -0,0 +1,23 @@
+/**
+ * Media Composables
+ *
+ * Image optimization helpers for MDX components.
+ * Uses provide/inject so the host app (blog) can supply NuxtImg
+ * while the md-editor (no @nuxt/image) gets a plain 'img' fallback.
+ */
+
+import { inject, type InjectionKey, type Component } from 'vue'
+
+/**
+ * Injection key for the optimized image component.
+ * The host app should `provide(IMG_COMPONENT_KEY, NuxtImg)`.
+ */
+export const IMG_COMPONENT_KEY: InjectionKey<Component | string> = Symbol('ImgComponent')
+
+/**
+ * Returns the provided image component (e.g. NuxtImg),
+ * or falls back to plain `'img'` when nothing is provided.
+ */
+export function useOptimizedImg(): Component | string {
+  return inject(IMG_COMPONENT_KEY, 'img')
+}