@blogmcp/mdx-render-vue 0.1.0

package/src/composables/useYouTube.ts

@@ -0,0 +1,58 @@
+/**
+ * YouTube Composable
+ *
+ * Shared logic for YouTube component variants.
+ */
+
+import { computed } from 'vue'
+import type { YouTubeProps } from '@blogmcp/mdx-schema'
+
+/**
+ * YouTube embed URL base
+ */
+export const YOUTUBE_EMBED_BASE = 'https://www.youtube.com/embed/'
+
+/**
+ * Default iframe allow attributes
+ */
+export const YOUTUBE_IFRAME_ALLOW =
+  'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+
+/**
+ * Composable for YouTube component logic
+ */
+export function useYouTube(props: YouTubeProps) {
+  const embedUrl = computed(() => `${YOUTUBE_EMBED_BASE}${props.id}`)
+
+  const iframeTitle = computed(() => props.title || 'YouTube video')
+
+  const hasTitle = computed(() => !!props.title)
+
+  /**
+   * Get thumbnail URL for the video (useful for lazy loading)
+   */
+  const thumbnailUrl = computed(() => {
+    if (!props.id) return ''
+    return `https://img.youtube.com/vi/${props.id}/maxresdefault.jpg`
+  })
+
+  /**
+   * Get iframe attributes for the embed
+   */
+  const iframeAttrs = computed(() => ({
+    src: embedUrl.value,
+    title: iframeTitle.value,
+    frameborder: '0',
+    allow: YOUTUBE_IFRAME_ALLOW,
+    allowfullscreen: true,
+  }))
+
+  return {
+    embedUrl,
+    iframeTitle,
+    hasTitle,
+    thumbnailUrl,
+    iframeAttrs,
+    YOUTUBE_IFRAME_ALLOW,
+  }
+}

package/src/edit/AlertEdit.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Alert from '../render/alert/Alert.vue'
+</script>
+
+<template>
+  <Alert v-bind="($attrs as any)">
+    <slot />
+  </Alert>
+</template>

package/src/edit/AudioPlayerEdit.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * AudioPlayer Edit Component
+ *
+ * Used in md-editor for previewing audio content.
+ * Has dark theme styling optimized for the editor.
+ * Shows transcription and summary when showTranscription prop is set.
+ */
+
+import { useAudioPlayer } from '../composables/useAudioPlayer'
+import type { AudioPlayerProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<AudioPlayerProps>()
+
+const {
+  audioUrl,
+  displayTitle,
+  hasTitle,
+  showTranscription,
+  transcriptionText,
+  transcriptionSummary,
+  transcriptionLoading,
+  transcriptionExpanded,
+  toggleTranscription,
+} = useAudioPlayer(props)
+</script>
+
+<template>
+  <div class="audio-player my-4 rounded-lg bg-vscode-bg-secondary p-4 border border-vscode-border">
+    <div class="flex items-center gap-3 mb-3">
+      <!-- Audio icon -->
+      <svg
+        class="w-5 h-5 text-vscode-text-muted flex-shrink-0"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+        />
+      </svg>
+      <span v-if="hasTitle" class="text-sm text-vscode-text font-medium">
+        {{ displayTitle }}
+      </span>
+      <span v-else class="text-sm text-vscode-text-muted italic">
+        {{ slug }}
+      </span>
+    </div>
+    <audio
+      :src="audioUrl"
+      controls
+      preload="metadata"
+      class="w-full h-8"
+    />
+
+    <!-- Collapsible transcription (dark theme) -->
+    <div v-if="showTranscription" class="mt-3">
+      <button
+        class="flex items-center gap-2 text-xs text-vscode-text-muted hover:text-vscode-text transition-colors cursor-pointer bg-transparent border-0 p-0"
+        @click="toggleTranscription"
+      >
+        <svg
+          class="w-3.5 h-3.5 transition-transform"
+          :class="{ 'rotate-90': transcriptionExpanded }"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+        Transcription
+      </button>
+      <div
+        v-if="transcriptionExpanded"
+        class="mt-2 p-3 bg-vscode-bg rounded border border-vscode-border text-xs text-vscode-text-muted leading-relaxed max-h-48 overflow-y-auto"
+      >
+        <p v-if="transcriptionLoading" class="italic opacity-60">Loading transcription...</p>
+        <p v-else-if="!transcriptionText" class="italic opacity-60">No transcription available.</p>
+        <template v-else>
+          <div v-if="transcriptionSummary" class="mb-2 pb-2 border-b border-vscode-border">
+            <div class="text-[10px] uppercase tracking-wide opacity-50 mb-0.5">Summary</div>
+            <div class="text-vscode-text">{{ transcriptionSummary }}</div>
+          </div>
+          <div class="whitespace-pre-wrap">{{ transcriptionText }}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/edit/BadgeEdit.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Badge from '../render/badge/Badge.vue'
+</script>
+
+<template>
+  <Badge v-bind="($attrs as any)" />
+</template>

package/src/edit/ButtonEdit.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// Edit wrapper — md-editor is light-themed so we delegate straight to the
+// render component. Pass-through via $attrs avoids re-declaring the strict
+// union types.
+import Button from '../render/button/Button.vue'
+</script>
+
+<template>
+  <Button v-bind="($attrs as any)" />
+</template>

package/src/edit/CalloutEdit.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/**
+ * Callout Edit Component
+ *
+ * Used in md-editor for editing callout content.
+ * Has dark theme styling optimized for the editor.
+ */
+
+import { useCallout, calloutIconPaths } from '../composables/useCallout'
+import type { CalloutProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<CalloutProps>()
+
+const { effectiveType, containerClasses, iconClasses } = useCallout(props)
+
+// Get icon path based on type
+const iconPath = calloutIconPaths[
+  effectiveType.value === 'info'
+    ? 'info-circle'
+    : effectiveType.value === 'warning'
+      ? 'warning-triangle'
+      : effectiveType.value === 'tip'
+        ? 'lightbulb'
+        : 'alert-circle'
+]
+</script>
+
+<template>
+  <div
+    class="callout my-4 p-4 rounded-lg border-l-4"
+    :class="containerClasses"
+  >
+    <div class="flex items-start gap-3">
+      <!-- Icon -->
+      <div class="flex-shrink-0 mt-0.5">
+        <!-- Info icon -->
+        <svg
+          v-if="effectiveType === 'info'"
+          class="w-5 h-5"
+          :class="iconClasses"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <!-- Warning icon -->
+        <svg
+          v-else-if="effectiveType === 'warning'"
+          class="w-5 h-5"
+          :class="iconClasses"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="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"
+          />
+        </svg>
+        <!-- Tip icon -->
+        <svg
+          v-else-if="effectiveType === 'tip'"
+          class="w-5 h-5"
+          :class="iconClasses"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="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"
+          />
+        </svg>
+        <!-- Danger icon -->
+        <svg
+          v-else-if="effectiveType === 'danger'"
+          class="w-5 h-5"
+          :class="iconClasses"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <!-- Content -->
+      <div class="flex-1 text-sm">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/edit/CardEdit.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Card from '../render/card/Card.vue'
+</script>
+
+<template>
+  <Card v-bind="($attrs as any)">
+    <slot />
+  </Card>
+</template>

package/src/edit/CodeBlockEdit.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/**
+ * CodeBlock Edit Component
+ *
+ * Used in md-editor for displaying code blocks with copy functionality.
+ * Has dark theme styling optimized for the editor.
+ */
+
+import { ref } from 'vue'
+import { useCodeBlock } from '../composables/useCodeBlock'
+import type { CodeBlockProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<CodeBlockProps>()
+
+defineSlots<{
+  default(): unknown
+}>()
+
+const { copied, languageLabel, languageClass, copyCode } = useCodeBlock(props)
+
+const codeRef = ref<HTMLElement | null>(null)
+
+async function handleCopy() {
+  if (codeRef.value) {
+    await copyCode(codeRef.value.textContent || '')
+  }
+}
+</script>
+
+<template>
+  <div class="code-block my-4 rounded-lg overflow-hidden bg-vscode-sidebar border border-vscode-border">
+    <!-- Header -->
+    <div class="flex items-center justify-between px-4 py-2 bg-vscode-bg border-b border-vscode-border">
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-vscode-accent font-medium">
+          {{ languageLabel }}
+        </span>
+        <span v-if="title" class="text-xs text-vscode-text-muted">
+          {{ title }}
+        </span>
+      </div>
+      <button
+        class="flex items-center gap-1 px-2 py-1 text-xs rounded transition-colors"
+        :class="copied ? 'bg-green-600 text-white' : 'hover:bg-vscode-active text-vscode-text-muted hover:text-vscode-text'"
+        @click="handleCopy"
+      >
+        <svg v-if="!copied" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+        <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+        {{ copied ? 'Copied!' : 'Copy' }}
+      </button>
+    </div>
+
+    <!-- Code Content -->
+    <div class="code-block-content p-4 overflow-x-auto">
+      <pre class="m-0"><code ref="codeRef" :class="languageClass"><slot /></code></pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.code-block-content pre {
+  margin: 0;
+  background: transparent;
+}
+
+.code-block-content code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-vscode-text);
+}
+</style>

package/src/edit/GalleryEdit.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * Gallery Edit Component
+ *
+ * Used in md-editor for displaying image galleries.
+ * Has dark theme styling optimized for the editor.
+ */
+
+import { useGallery } from '../composables/useGallery'
+import { useOptimizedImg } from '../composables/useMedia'
+import type { GalleryProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<GalleryProps>()
+
+const { gridColsClass, gapClass, tileLayout, getImageSrc, getImageAlt, getImageCaption, isVideo, hasImages } = useGallery(props)
+const ImgTag = useOptimizedImg()
+</script>
+
+<template>
+  <div
+    v-if="hasImages"
+    class="gallery not-prose my-4"
+    :class="[gridColsClass, gapClass]"
+    style="display: grid"
+  >
+    <div
+      v-for="(_, index) in images"
+      :key="index"
+      class="gallery-item"
+    >
+      <!-- Tile geometry from `tileLayout` (aspectRatio/fit/position props),
+           defaulting to a square object-cover tile — kept identical to the blog
+           GalleryGrid so the editor preview is WYSIWYG. Inline styles so a
+           consumer's Tailwind purge can't drop them (same reason as display:grid). -->
+      <div
+        class="gallery-media relative overflow-hidden rounded-lg bg-vscode-sidebar"
+        :style="tileLayout.tileStyle"
+      >
+        <!-- No poster (imported videos 404 → 1×1 GIF → blank); seek to the first
+             frame (#t=0.1) over a dark cell so a video never reads as white space. -->
+        <video
+          v-if="isVideo(index)"
+          :src="`${getImageSrc(index)}#t=0.1`"
+          controls
+          preload="metadata"
+          playsinline
+          :class="tileLayout.mediaSizeClass"
+          :style="tileLayout.mediaStyle"
+        />
+        <component
+          v-else
+          :is="ImgTag"
+          :src="getImageSrc(index)"
+          :alt="getImageAlt(index)"
+          sizes="100vw sm:50vw md:33vw lg:299px"
+          :class="[tileLayout.mediaSizeClass, 'transition-transform hover:scale-105']"
+          :style="tileLayout.mediaStyle"
+        />
+      </div>
+      <p v-if="getImageCaption(index)" class="gallery-description px-2 py-1 text-xs text-vscode-text-muted truncate">
+        {{ getImageCaption(index) }}
+      </p>
+    </div>
+  </div>
+</template>

package/src/edit/IconEdit.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import IconComp from '../render/icon/Icon.vue'
+</script>
+
+<template>
+  <IconComp v-bind="($attrs as any)" />
+</template>

package/src/edit/TooltipEdit.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// In md-editor, Tooltip's hover behavior isn't useful for previewing — just
+// render the child with the tooltip label as an inline hint beside it so the
+// author can see both. Hover still works at runtime in the rendered blog.
+defineProps<{ label: string; placement?: string }>()
+</script>
+
+<template>
+  <span class="inline-flex items-center gap-2" data-mdx-component="Tooltip">
+    <slot />
+    <span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600">
+      💡 {{ label }}
+    </span>
+  </span>
+</template>

package/src/edit/YouTubeEdit.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * YouTube Edit Component
+ *
+ * Used in md-editor for displaying YouTube embeds.
+ * Has dark theme styling optimized for the editor.
+ */
+
+import { useYouTube } from '../composables/useYouTube'
+import type { YouTubeProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<YouTubeProps>()
+
+const { embedUrl, iframeTitle, hasTitle, YOUTUBE_IFRAME_ALLOW } = useYouTube(props)
+</script>
+
+<template>
+  <div class="youtube-embed my-4">
+    <div class="relative w-full" style="padding-bottom: 56.25%">
+      <iframe
+        :src="embedUrl"
+        :title="iframeTitle"
+        class="absolute inset-0 w-full h-full rounded-lg"
+        frameborder="0"
+        :allow="YOUTUBE_IFRAME_ALLOW"
+        allowfullscreen
+      />
+    </div>
+    <p v-if="hasTitle" class="text-center text-sm text-vscode-text-muted mt-2">
+      {{ title }}
+    </p>
+  </div>
+</template>

package/src/edit/index.ts

@@ -0,0 +1,32 @@
+/**
+ * MDX Edit Components
+ *
+ * These components are used in the md-editor for editing MDX content.
+ * md-editor runs in a light theme, so most edit components simply reuse the
+ * render variant — selection chrome is added externally by MdxBlockView.
+ */
+
+export { default as CalloutEdit } from './CalloutEdit.vue'
+export { default as CodeBlockEdit } from './CodeBlockEdit.vue'
+export { default as GalleryEdit } from './GalleryEdit.vue'
+export { default as YouTubeEdit } from './YouTubeEdit.vue'
+export { default as AudioPlayerEdit } from './AudioPlayerEdit.vue'
+export { default as ButtonEdit } from './ButtonEdit.vue'
+export { default as CardEdit } from './CardEdit.vue'
+export { default as AlertEdit } from './AlertEdit.vue'
+export { default as BadgeEdit } from './BadgeEdit.vue'
+export { default as IconEdit } from './IconEdit.vue'
+export { default as TooltipEdit } from './TooltipEdit.vue'
+
+// Re-export as generic names for backward compatibility
+export { default as Callout } from './CalloutEdit.vue'
+export { default as CodeBlock } from './CodeBlockEdit.vue'
+export { default as Gallery } from './GalleryEdit.vue'
+export { default as YouTube } from './YouTubeEdit.vue'
+export { default as AudioPlayer } from './AudioPlayerEdit.vue'
+export { default as Button } from './ButtonEdit.vue'
+export { default as Card } from './CardEdit.vue'
+export { default as Alert } from './AlertEdit.vue'
+export { default as Badge } from './BadgeEdit.vue'
+export { default as Icon } from './IconEdit.vue'
+export { default as Tooltip } from './TooltipEdit.vue'

package/src/index.ts

@@ -0,0 +1,62 @@
+/**
+ * @blogmcp/mdx-render-vue
+ *
+ * Vue renderer for MDX components. Wires the framework-agnostic schema
+ * (@blogmcp/mdx-schema) to Vue Single-File Components for both the
+ * md-editor edit preview (dark theme) and KB blog (light theme, variants).
+ */
+
+// Composables (Vue-reactive shared logic)
+export * from './composables'
+
+// Edit components (for md-editor)
+export {
+  CalloutEdit,
+  CodeBlockEdit,
+  GalleryEdit,
+  YouTubeEdit,
+  AudioPlayerEdit,
+  // Aliases for backward compatibility
+  Callout as EditCallout,
+  CodeBlock as EditCodeBlock,
+  Gallery as EditGallery,
+  YouTube as EditYouTube,
+  AudioPlayer as EditAudioPlayer,
+} from './edit'
+
+// Render components (for blog)
+export {
+  Callout as RenderCallout,
+  CalloutDefault,
+  CalloutMinimal,
+  CodeBlock as RenderCodeBlock,
+  CodeBlockDefault,
+  Gallery as RenderGallery,
+  GalleryGrid,
+  YouTube as RenderYouTube,
+  YouTubeDefault,
+  AudioPlayer as RenderAudioPlayer,
+  AudioPlayerDefault,
+  getRenderComponent,
+  getComponentVariants,
+} from './render'
+
+// Default component exports (edit components for backward compatibility)
+export {
+  Callout,
+  CodeBlock,
+  Gallery,
+  YouTube,
+  AudioPlayer,
+} from './edit'
+
+// Registry (metadata + render/edit loaders) + helpers
+export {
+  componentRegistry,
+  getComponentVariants as getRegistryVariants,
+  getRenderComponentAsync,
+  getEditComponentAsync,
+  getEditorConfig,
+  type ComponentRegistration,
+  type EditorConfig,
+} from './registry'