@blogmcp/mdx-render-react 0.1.0

package/src/render/audioplayer/AudioPlayerDefault.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import type { AudioPlayerProps } from '@blogmcp/mdx-schema'
+
+/**
+ * Audio player with a collapsible, lazy-loaded transcript. Client island —
+ * mirrors Vue AudioPlayerDefault.vue + useAudioPlayer.ts behaviour and classes.
+ */
+export default function AudioPlayerDefault({ slug, title, showTranscription = false }: AudioPlayerProps) {
+  const hasTitle = !!title
+  const displayTitle = title || slug || 'Audio'
+  const audioUrl = slug ? `/api/media/file/${slug}` : ''
+  const transcriptionUrl = slug ? `/api/media/transcription/${slug}` : ''
+
+  const [transcriptionText, setTranscriptionText] = useState<string | null>(null)
+  const [transcriptionSummary, setTranscriptionSummary] = useState<string | null>(null)
+  const [transcriptionLoading, setTranscriptionLoading] = useState(false)
+  const [transcriptionExpanded, setTranscriptionExpanded] = useState(false)
+
+  const loadTranscription = useCallback(async () => {
+    if (!slug || transcriptionText !== null) return
+    setTranscriptionLoading(true)
+    try {
+      const response = await fetch(transcriptionUrl)
+      if (response.ok) {
+        const data = await response.json()
+        setTranscriptionText(data.fullText || data.full_text || '')
+        setTranscriptionSummary(data.summary || null)
+      } else {
+        setTranscriptionText('')
+      }
+    } catch {
+      setTranscriptionText('')
+    } finally {
+      setTranscriptionLoading(false)
+    }
+  }, [slug, transcriptionUrl, transcriptionText])
+
+  const toggleTranscription = useCallback(() => {
+    setTranscriptionExpanded((expanded) => {
+      const next = !expanded
+      if (next && transcriptionText === null) {
+        void loadTranscription()
+      }
+      return next
+    })
+  }, [loadTranscription, transcriptionText])
+
+  return (
+    <div className="audio-player my-6 rounded-lg bg-gray-50 p-5 border border-gray-200" data-mdx-component="AudioPlayer">
+      <div className="flex items-center gap-3 mb-3">
+        <svg className="w-5 h-5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={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>
+        {hasTitle ? <h3 className="text-base font-semibold text-gray-800 m-0">{displayTitle}</h3> : null}
+      </div>
+
+      <audio src={audioUrl} controls preload="metadata" className="w-full" />
+
+      {showTranscription ? (
+        <div className="mt-4">
+          <button
+            type="button"
+            className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors cursor-pointer bg-transparent border-0 p-0"
+            onClick={toggleTranscription}
+          >
+            <svg
+              className={['w-4 h-4 transition-transform', transcriptionExpanded ? 'rotate-90' : ''].join(' ').trim()}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+            Transcription
+          </button>
+          {transcriptionExpanded ? (
+            <div className="mt-2 p-3 bg-white rounded border border-gray-200 text-sm text-gray-700 leading-relaxed max-h-64 overflow-y-auto">
+              {transcriptionLoading ? (
+                <p className="text-gray-400 italic">Loading transcription...</p>
+              ) : !transcriptionText ? (
+                <p className="text-gray-400 italic">No transcription available.</p>
+              ) : (
+                <>
+                  {transcriptionSummary ? (
+                    <div className="mb-3 pb-3 border-b border-gray-200">
+                      <div className="text-xs uppercase tracking-wide text-gray-400 mb-1">Summary</div>
+                      <div className="text-gray-800">{transcriptionSummary}</div>
+                    </div>
+                  ) : null}
+                  <div className="whitespace-pre-wrap">{transcriptionText}</div>
+                </>
+              )}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/render/badge/Badge.tsx

@@ -0,0 +1,24 @@
+import { badgeStyles, type BadgeVariant, type BadgeColor } from '@blogmcp/mdx-schema/styles'
+
+export interface BadgeProps {
+  label: string
+  color?: BadgeColor
+  variant?: BadgeVariant
+}
+
+/**
+ * Small label / tag. Mirrors Vue Badge.vue — a single <span> with the
+ * shared base + variant×color class table.
+ */
+export default function Badge({ label, color = 'neutral', variant = 'soft' }: BadgeProps) {
+  const className = [
+    badgeStyles.base,
+    badgeStyles.variantColor[variant][color],
+  ].join(' ')
+
+  return (
+    <span className={className} data-mdx-component="Badge">
+      {label}
+    </span>
+  )
+}

package/src/render/button/Button.tsx

@@ -0,0 +1,49 @@
+import { buttonStyles, type ButtonVariant, type ButtonColor, type ButtonSize } from '@blogmcp/mdx-schema/styles'
+// URL sanitizer — returns 'about:blank' for javascript:/data:text/html/etc.
+// Component-level prop sanitization: DOMPurify only sees HTML output, never
+// JSX props consumed by render code. See:
+//   competitor-monitor/docs/internal/sanitization-trust-contract.md
+import { sanitizeUrl } from '@blogmcp/sanitize'
+
+export interface ButtonProps {
+  label: string
+  to?: string
+  variant?: ButtonVariant
+  color?: ButtonColor
+  size?: ButtonSize
+}
+
+/**
+ * Action button / CTA link. Mirrors Vue Button.vue:
+ * renders <a> when `to` is set, else <button type="button">.
+ * Class tables come from the shared @blogmcp/mdx-schema/styles module.
+ */
+export default function Button({
+  label,
+  to,
+  variant = 'solid',
+  color = 'primary',
+  size = 'md',
+}: ButtonProps) {
+  const className = [
+    buttonStyles.base,
+    buttonStyles.size[size],
+    buttonStyles.variantColor[variant][color],
+  ].join(' ')
+
+  const safeHref = to ? sanitizeUrl(to) : undefined
+
+  if (safeHref) {
+    return (
+      <a href={safeHref} className={className} data-mdx-component="Button">
+        {label}
+      </a>
+    )
+  }
+
+  return (
+    <button type="button" className={className} data-mdx-component="Button">
+      {label}
+    </button>
+  )
+}

package/src/render/callout/CalloutDefault.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import type { CalloutType } from '@blogmcp/mdx-schema'
+import { calloutStyles } from '@blogmcp/mdx-schema/styles'
+
+export interface CalloutProps {
+  type?: CalloutType
+  children?: ReactNode
+}
+
+/**
+ * Standard callout (icon + accent left border). Mirrors Vue CalloutDefault.vue.
+ * Color table + icon SVG path data come from the shared styles module.
+ */
+export default function CalloutDefault({ type, children }: CalloutProps) {
+  const effectiveType: CalloutType = type || 'info'
+  const colors = calloutStyles.default.type[effectiveType]
+  const iconPath = calloutStyles.iconPaths[effectiveType]
+
+  return (
+    <div
+      className={[calloutStyles.default.base, colors.bg, colors.border, colors.text].join(' ')}
+      data-mdx-component="Callout"
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0 mt-0.5">
+          <svg className={['w-5 h-5', colors.iconColor].join(' ')} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={iconPath} />
+          </svg>
+        </div>
+        <div className="flex-1 text-sm leading-relaxed">{children}</div>
+      </div>
+    </div>
+  )
+}

package/src/render/callout/CalloutMinimal.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+import type { CalloutType } from '@blogmcp/mdx-schema'
+import { calloutStyles } from '@blogmcp/mdx-schema/styles'
+
+export interface CalloutProps {
+  type?: CalloutType
+  children?: ReactNode
+}
+
+/**
+ * Icon-less, flatter callout. Mirrors Vue CalloutMinimal.vue.
+ */
+export default function CalloutMinimal({ type, children }: CalloutProps) {
+  const effectiveType: CalloutType = type || 'info'
+  const colors = calloutStyles.minimal.type[effectiveType]
+
+  return (
+    <div
+      className={[calloutStyles.minimal.base, colors.bg, colors.border, colors.text].join(' ')}
+      data-mdx-component="Callout"
+    >
+      <div className="text-sm leading-relaxed">{children}</div>
+    </div>
+  )
+}

package/src/render/card/Card.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+export interface CardProps {
+  title?: string
+  children?: ReactNode
+}
+
+/**
+ * Bordered content block with optional title. Mirrors Vue Card.vue.
+ */
+export default function Card({ title, children }: CardProps) {
+  return (
+    <section
+      className="mdx-card rounded-lg border border-gray-200 bg-white p-5 shadow-sm"
+      data-mdx-component="Card"
+    >
+      {title ? <h3 className="mb-3 text-lg font-semibold text-gray-900">{title}</h3> : null}
+      <div className="text-gray-700">{children}</div>
+    </section>
+  )
+}

package/src/render/codeblock/CodeBlockDefault.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { useCallback, useRef, useState, type ReactNode } from 'react'
+import type { CodeBlockProps as SchemaCodeBlockProps } from '@blogmcp/mdx-schema'
+import { getLanguageLabel } from './language-labels'
+
+export interface CodeBlockProps extends SchemaCodeBlockProps {
+  children?: ReactNode
+}
+
+/**
+ * Syntax-highlighted code block. Client island — mirrors Vue CodeBlockDefault.vue
+ * + useCodeBlock.ts. The header (language label + optional title) and the
+ * `<pre><code>` block render as the initial DOM exactly as before; the copy
+ * button now copies the code via `navigator.clipboard.writeText` and shows a
+ * transient "Copied!" state (2s), toggling the same Tailwind classes as Vue.
+ * `code-block` + `data-mdx-component="CodeBlock"` are unchanged.
+ */
+export default function CodeBlockDefault({ language, title, children }: CodeBlockProps) {
+  const languageLabel = getLanguageLabel(language)
+  const languageClass = `language-${language || 'text'}`
+
+  const [copied, setCopied] = useState(false)
+  const codeRef = useRef<HTMLElement>(null)
+
+  const handleCopy = useCallback(async () => {
+    const codeContent = codeRef.current?.textContent || ''
+    try {
+      await navigator.clipboard.writeText(codeContent)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (error) {
+      console.error('Failed to copy code:', error)
+    }
+  }, [])
+
+  return (
+    <div
+      className="code-block my-6 rounded-lg overflow-hidden border border-gray-200 bg-gray-50"
+      data-mdx-component="CodeBlock"
+    >
+      <div className="flex items-center justify-between px-4 py-2 bg-gray-100 border-b border-gray-200">
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-gray-600 font-medium">{languageLabel}</span>
+          {title ? <span className="text-xs text-gray-500">{title}</span> : null}
+        </div>
+        <button
+          type="button"
+          className={[
+            'flex items-center gap-1 px-2 py-1 text-xs rounded transition-colors',
+            copied ? 'bg-green-500 text-white' : 'hover:bg-gray-200 text-gray-500 hover:text-gray-700',
+          ].join(' ')}
+          onClick={handleCopy}
+        >
+          {!copied ? (
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={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 className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          )}
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+
+      <div className="code-block-content p-4 overflow-x-auto">
+        <pre className="m-0">
+          <code ref={codeRef} className={languageClass}>
+            {children}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}

package/src/render/codeblock/language-labels.ts

@@ -0,0 +1,46 @@
+/**
+ * Language label mappings — mirrored verbatim from
+ * `@blogmcp/mdx-render-vue/src/composables/useCodeBlock.ts` so the React
+ * CodeBlock header reads identically to the Vue one.
+ */
+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 (capitalizes unknown languages). */
+export function getLanguageLabel(language?: string): string {
+  if (!language) return 'Plain Text'
+  const lang = language.toLowerCase()
+  if (languageLabels[lang]) return languageLabels[lang]
+  return lang.charAt(0).toUpperCase() + lang.slice(1)
+}

package/src/render/gallery/GalleryGrid.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import type { GalleryProps } from '@blogmcp/mdx-schema'
+import {
+  gridColsClass,
+  gapClass,
+  galleryTileLayout,
+  getImageSrc,
+  getImageAlt,
+  getImageDescription,
+  isVideo,
+  getVideoPoster,
+} from './gallery'
+import GalleryLightbox from './GalleryLightbox'
+
+/**
+ * Image/video grid. Client island — mirrors Vue GalleryGrid.vue + useGallery.ts.
+ *
+ * The grid (initial DOM) is unchanged: `data-mdx-component="Gallery"`,
+ * `grid-cols-N`, video posters, captions, and expand-icon overlay all match the
+ * static/Vue versions. Clicking a (non-video) image opens a fullscreen lightbox
+ * (GalleryLightbox) with prev/next, Escape, and backdrop-to-close — the lightbox
+ * indexes only the image items, exactly like the Vue `imageOnlyIndices` mapping.
+ */
+export default function GalleryGrid({ images, columns, gap, aspectRatio, fit, position }: GalleryProps) {
+  const [lightboxOpen, setLightboxOpen] = useState(false)
+  const [lightboxIndex, setLightboxIndex] = useState(0)
+
+  // Tile geometry from aspectRatio/fit/position — mirrors Vue GalleryGrid.vue.
+  const tileLayout = galleryTileLayout({ aspectRatio, fit, position })
+
+  // Map between full images-array indices and image-only (lightbox) indices.
+  const imageOnlyIndices = useMemo(() => {
+    const indices: number[] = []
+    if (!images) return indices
+    for (let i = 0; i < images.length; i++) {
+      if (!isVideo(images[i])) indices.push(i)
+    }
+    return indices
+  }, [images])
+
+  if (!images || images.length === 0) return null
+
+  const imageOnlyCount = imageOnlyIndices.length
+
+  function openLightbox(fullIndex: number) {
+    if (isVideo(images[fullIndex])) return
+    const lightboxIdx = imageOnlyIndices.indexOf(fullIndex)
+    if (lightboxIdx === -1) return
+    setLightboxIndex(lightboxIdx)
+    setLightboxOpen(true)
+  }
+
+  // Lightbox getters operate on lightbox (image-only) indices.
+  const lightboxGetSrc = (idx: number) => getImageSrc(images[imageOnlyIndices[idx]])
+  const lightboxGetAlt = (idx: number) => getImageAlt(images[imageOnlyIndices[idx]], imageOnlyIndices[idx])
+  const lightboxGetDescription = (idx: number) => getImageDescription(images[imageOnlyIndices[idx]])
+
+  return (
+    <>
+      <div
+        className={['gallery my-6', gridColsClass(columns), gapClass(gap)].join(' ')}
+        style={{ display: 'grid' }}
+        data-mdx-component="Gallery"
+      >
+        {images.map((image, index) => {
+          const description = getImageDescription(image)
+          const video = isVideo(image)
+          return (
+            <div key={index} className="gallery-item">
+              {/* Fixed-aspect tile (default square object-cover) — mirrors Vue
+                  GalleryGrid.vue so both flavors render identically. Geometry
+                  comes from tileLayout (aspectRatio/fit/position props). */}
+              <div
+                // Tile bg is media-type-specific: VIDEO keeps a dark cell
+                // (bg-gray-900) so a posterless video isn't blank white; IMAGE
+                // uses a light neutral (bg-gray-100) so `fit="contain"` letterbox
+                // bars + pre-load blend with the light theme (not a dark backdrop).
+                className={['gallery-media group relative overflow-hidden rounded', video ? 'bg-gray-900' : 'bg-gray-100 cursor-pointer'].join(' ').trim()}
+                style={tileLayout.tileStyle}
+                onClick={() => openLightbox(index)}
+              >
+                {video ? (
+                  <video
+                    src={getImageSrc(image)}
+                    poster={getVideoPoster(image)}
+                    controls
+                    preload="metadata"
+                    className={tileLayout.mediaSizeClass}
+                    style={tileLayout.mediaStyle}
+                  />
+                ) : (
+                  <>
+                    <img
+                      src={getImageSrc(image)}
+                      alt={getImageAlt(image, index)}
+                      className={[tileLayout.mediaSizeClass, 'transition-transform duration-200 group-hover:scale-[1.03]'].join(' ')}
+                      style={tileLayout.mediaStyle}
+                      loading="lazy"
+                    />
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200 pointer-events-none" />
+                    <svg
+                      className="gallery-expand-icon absolute top-2 right-2 text-white opacity-50 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-80 transition-opacity duration-200 drop-shadow-md pointer-events-none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="15 3 21 3 21 9" />
+                      <polyline points="9 21 3 21 3 15" />
+                      <line x1="21" y1="3" x2="14" y2="10" />
+                      <line x1="3" y1="21" x2="10" y2="14" />
+                    </svg>
+                  </>
+                )}
+              </div>
+              {description ? (
+                <p className="gallery-description text-center text-sm text-gray-500 mt-2">{description}</p>
+              ) : null}
+            </div>
+          )
+        })}
+      </div>
+
+      <GalleryLightbox
+        isOpen={lightboxOpen}
+        currentIndex={lightboxIndex}
+        imageCount={imageOnlyCount}
+        getImageSrc={lightboxGetSrc}
+        getImageAlt={lightboxGetAlt}
+        getImageDescription={lightboxGetDescription}
+        onClose={() => setLightboxOpen(false)}
+        onNavigate={setLightboxIndex}
+      />
+    </>
+  )
+}