@jet-w/astro-blog 0.1.0

package/src/components/media/Bilibili.astro

@@ -0,0 +1,114 @@
+---
+/**
+ * Bilibili 视频嵌入组件
+ *
+ * 使用方法:
+ * <Bilibili bvid="BV1xx411c7mD" />
+ * <Bilibili aid="170001" />
+ * <Bilibili url="https://www.bilibili.com/video/BV1xx411c7mD" />
+ * <Bilibili bvid="BV1xx411c7mD" page={2} />
+ */
+
+interface Props {
+  /** BV 号 */
+  bvid?: string;
+  /** AV 号 */
+  aid?: string | number;
+  /** Bilibili 视频完整 URL */
+  url?: string;
+  /** 视频标题 (用于无障碍) */
+  title?: string;
+  /** 分P (从1开始) */
+  page?: number;
+  /** 开始时间 (秒) */
+  start?: number;
+  /** 是否高清 */
+  highQuality?: boolean;
+  /** 是否自动播放 */
+  autoplay?: boolean;
+  /** 是否静音 */
+  muted?: boolean;
+  /** 自定义宽高比 (默认 16/9) */
+  aspectRatio?: string;
+}
+
+const {
+  bvid,
+  aid,
+  url,
+  title = 'Bilibili 视频',
+  page = 1,
+  start = 0,
+  highQuality = true,
+  autoplay = false,
+  muted = false,
+  aspectRatio = '16/9'
+} = Astro.props;
+
+// 从 URL 中提取视频信息
+function extractVideoInfo(videoUrl: string): { bvid?: string; aid?: string } {
+  // BV 号匹配
+  const bvMatch = videoUrl.match(/BV[a-zA-Z0-9]+/);
+  if (bvMatch) return { bvid: bvMatch[0] };
+
+  // AV 号匹配
+  const avMatch = videoUrl.match(/av(\d+)/i);
+  if (avMatch) return { aid: avMatch[1] };
+
+  return {};
+}
+
+let videoBvid = bvid;
+let videoAid = aid?.toString();
+
+if (url) {
+  const info = extractVideoInfo(url);
+  videoBvid = videoBvid || info.bvid;
+  videoAid = videoAid || info.aid;
+}
+
+// 构建嵌入 URL
+let embedUrl = 'https://player.bilibili.com/player.html?';
+const params = new URLSearchParams();
+
+if (videoBvid) {
+  params.set('bvid', videoBvid);
+} else if (videoAid) {
+  params.set('aid', videoAid);
+}
+
+params.set('page', page.toString());
+if (start > 0) params.set('t', start.toString());
+if (highQuality) params.set('high_quality', '1');
+if (autoplay) params.set('autoplay', '1');
+if (muted) params.set('muted', '1');
+params.set('danmaku', '0'); // 默认关闭弹幕
+
+embedUrl += params.toString();
+
+const hasValidId = videoBvid || videoAid;
+---
+
+{hasValidId ? (
+  <div class="video-container bilibili-video" style={`aspect-ratio: ${aspectRatio};`}>
+    <iframe
+      src={embedUrl}
+      title={title}
+      frameborder="0"
+      allowfullscreen
+      loading="lazy"
+      scrolling="no"
+      sandbox="allow-scripts allow-same-origin allow-popups"
+    ></iframe>
+    <div class="video-platform-badge bilibili">
+      <svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
+        <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/>
+      </svg>
+      <span>Bilibili</span>
+    </div>
+  </div>
+) : (
+  <div class="video-error">
+    <p>无效的 Bilibili 视频链接</p>
+  </div>
+)}

package/src/components/media/Slides.astro

@@ -0,0 +1,313 @@
+---
+/**
+ * 内嵌幻灯片组件
+ *
+ * 使用方法:
+ *
+ * 1. 通过 iframe 嵌入已有幻灯片:
+ * <Slides src="/slides/demo" />
+ * <Slides src="/slides/demo" height="500px" />
+ *
+ * 2. 直接内嵌 Markdown 内容:
+ * <Slides>
+ * # 第一页
+ *
+ * 内容...
+ *
+ * ---
+ *
+ * # 第二页
+ *
+ * 更多内容...
+ * </Slides>
+ */
+
+interface Props {
+  /** 幻灯片 URL（使用 iframe 嵌入模式） */
+  src?: string;
+  /** 容器高度 */
+  height?: string;
+  /** 宽高比（当不指定 height 时使用） */
+  aspectRatio?: string;
+  /** Reveal.js 主题 */
+  theme?: string;
+  /** 过渡效果 */
+  transition?: string;
+  /** 显示控制箭头 */
+  controls?: boolean;
+  /** 显示进度条 */
+  progress?: boolean;
+  /** 内容居中 */
+  center?: boolean;
+  /** 显示页码 */
+  slideNumber?: boolean;
+  /** 是否嵌入模式（隐藏部分 UI） */
+  embedded?: boolean;
+  /** 标题（用于无障碍） */
+  title?: string;
+}
+
+const {
+  src,
+  height,
+  aspectRatio = '16/9',
+  theme = 'black',
+  transition = 'slide',
+  controls = true,
+  progress = true,
+  center = true,
+  slideNumber = false,
+  embedded = true,
+  title = '幻灯片演示'
+} = Astro.props;
+
+// 生成唯一 ID
+const slidesId = `slides-${Math.random().toString(36).substr(2, 9)}`;
+
+// Reveal.js 配置
+const revealConfig = JSON.stringify({
+  hash: false,
+  controls,
+  progress,
+  center,
+  transition,
+  slideNumber,
+  embedded,
+  keyboard: true,
+  overview: true,
+  touch: true,
+});
+
+// 获取 slot 内容
+const slotContent = await Astro.slots.render('default');
+const hasInlineContent = slotContent && slotContent.trim().length > 0;
+
+// 解析 Markdown 为幻灯片结构
+function parseSlides(markdown: string): string[][] {
+  // 移除 HTML 注释和空白
+  const cleanMarkdown = markdown
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .trim();
+
+  // 按水平分隔符分割
+  const horizontalSlides = cleanMarkdown.split(/\n---\n/);
+
+  return horizontalSlides.map((hSlide) => {
+    // 按垂直分隔符分割
+    return hSlide.split(/\n----\n/).map(s => s.trim());
+  });
+}
+
+const slidesData = hasInlineContent ? parseSlides(slotContent) : [];
+---
+
+{src ? (
+  <!-- iframe 嵌入模式 -->
+  <div
+    class="slides-embed-container"
+    style={height ? `height: ${height};` : `aspect-ratio: ${aspectRatio};`}
+  >
+    <iframe
+      src={`${src}${src.includes('?') ? '&' : '?'}embed=true`}
+      title={title}
+      class="slides-iframe"
+      allowfullscreen
+      loading="lazy"
+    ></iframe>
+    <a
+      href={src}
+      target="_blank"
+      class="slides-fullscreen-btn"
+      title="在新窗口打开"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="15 3 21 3 21 9"></polyline>
+        <polyline points="9 21 3 21 3 15"></polyline>
+        <line x1="21" y1="3" x2="14" y2="10"></line>
+        <line x1="3" y1="21" x2="10" y2="14"></line>
+      </svg>
+    </a>
+  </div>
+) : hasInlineContent ? (
+  <!-- 内联内容模式 -->
+  <div
+    class="slides-inline-container"
+    style={height ? `height: ${height};` : `aspect-ratio: ${aspectRatio};`}
+  >
+    <div class="reveal" id={slidesId}>
+      <div class="slides">
+        {slidesData.map((verticalSlides) => (
+          <section>
+            {verticalSlides.map((slideContent) => (
+              <section data-markdown>
+                <textarea data-template set:text={slideContent}></textarea>
+              </section>
+            ))}
+          </section>
+        ))}
+      </div>
+    </div>
+
+    <!-- 全屏按钮 -->
+    <button
+      class="slides-fullscreen-btn"
+      title="全屏"
+      onclick={`document.getElementById('${slidesId}').requestFullscreen()`}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="15 3 21 3 21 9"></polyline>
+        <polyline points="9 21 3 21 3 15"></polyline>
+        <line x1="21" y1="3" x2="14" y2="10"></line>
+        <line x1="3" y1="21" x2="10" y2="14"></line>
+      </svg>
+    </button>
+  </div>
+
+  <!-- Reveal.js 资源 -->
+  <link rel="stylesheet" href="/slides/reveal.css" />
+  <link rel="stylesheet" href={`/slides/theme/${theme}.css`} />
+  <link rel="stylesheet" href="/slides/plugin/highlight/monokai.css" />
+
+  <script is:inline src="/slides/reveal.js"></script>
+  <script is:inline src="/slides/plugin/markdown/markdown.js"></script>
+  <script is:inline src="/slides/plugin/highlight/highlight.js"></script>
+
+  <script is:inline define:vars={{ slidesId, revealConfig }}>
+    (function() {
+      function initSlides() {
+        const element = document.getElementById(slidesId);
+        if (!element || element.dataset.initialized) return;
+
+        const config = JSON.parse(revealConfig);
+
+        // 使用 Reveal 构造函数创建独立实例
+        const deck = new Reveal(element, {
+          hash: config.hash,
+          controls: config.controls,
+          progress: config.progress,
+          center: config.center,
+          transition: config.transition,
+          slideNumber: config.slideNumber,
+          embedded: config.embedded,
+          keyboard: config.keyboard,
+          overview: config.overview,
+          touch: config.touch,
+          plugins: [RevealMarkdown, RevealHighlight]
+        });
+
+        deck.initialize();
+        element.dataset.initialized = 'true';
+      }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSlides);
+      } else {
+        // 延迟初始化确保 Reveal.js 已加载
+        setTimeout(initSlides, 100);
+      }
+    })();
+  </script>
+) : (
+  <!-- 无内容提示 -->
+  <div class="slides-empty">
+    <p>请提供 <code>src</code> 属性或内联 Markdown 内容</p>
+  </div>
+)}
+
+<style>
+  /* 嵌入容器 */
+  .slides-embed-container,
+  .slides-inline-container {
+    position: relative;
+    width: 100%;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: #000;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  /* iframe 样式 */
+  .slides-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+
+  /* 内联 Reveal 容器 */
+  .slides-inline-container .reveal {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* 全屏按钮 */
+  .slides-fullscreen-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 30;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.3s;
+    text-decoration: none;
+  }
+
+  .slides-embed-container:hover .slides-fullscreen-btn,
+  .slides-inline-container:hover .slides-fullscreen-btn {
+    opacity: 0.8;
+  }
+
+  .slides-fullscreen-btn:hover {
+    opacity: 1 !important;
+    background: rgba(0, 0, 0, 0.7);
+  }
+
+  /* 空内容提示 */
+  .slides-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: #f3f4f6;
+    border-radius: 0.5rem;
+    color: #6b7280;
+  }
+
+  .slides-empty code {
+    padding: 0.25rem 0.5rem;
+    background: #e5e7eb;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+
+  :global(.dark) .slides-empty {
+    background: #1f2937;
+    color: #9ca3af;
+  }
+
+  :global(.dark) .slides-empty code {
+    background: #374151;
+  }
+
+  /* 内联模式下的 Reveal.js 样式覆盖 */
+  .slides-inline-container .reveal .slides {
+    text-align: left;
+  }
+
+  .slides-inline-container .reveal .slides section {
+    padding: 20px;
+  }
+
+  /* 全屏模式样式 */
+  .slides-inline-container .reveal:fullscreen {
+    background: #000;
+  }
+</style>

package/src/components/media/Video.astro

@@ -0,0 +1,111 @@
+---
+/**
+ * 自托管视频组件
+ *
+ * 使用方法:
+ * <Video src="/videos/demo.mp4" />
+ * <Video src="/videos/demo.mp4" poster="/images/poster.jpg" />
+ * <Video src="/videos/demo.webm" type="video/webm" />
+ * <Video src="/videos/demo.mp4" autoplay muted loop />
+ */
+
+interface Props {
+  /** 视频源 URL */
+  src: string;
+  /** 视频类型 (如 video/mp4, video/webm) */
+  type?: string;
+  /** 封面图片 */
+  poster?: string;
+  /** 视频标题 */
+  title?: string;
+  /** 是否自动播放 */
+  autoplay?: boolean;
+  /** 是否静音 */
+  muted?: boolean;
+  /** 是否循环播放 */
+  loop?: boolean;
+  /** 是否显示控制栏 */
+  controls?: boolean;
+  /** 预加载策略: none, metadata, auto */
+  preload?: 'none' | 'metadata' | 'auto';
+  /** 自定义宽高比 (默认 16/9) */
+  aspectRatio?: string;
+  /** 备用视频源列表 */
+  sources?: Array<{ src: string; type: string }>;
+}
+
+const {
+  src,
+  type,
+  poster,
+  title = '视频',
+  autoplay = false,
+  muted = false,
+  loop = false,
+  controls = true,
+  preload = 'metadata',
+  aspectRatio = '16/9',
+  sources = []
+} = Astro.props;
+
+// 自动检测视频类型
+function getVideoType(videoSrc: string): string {
+  const ext = videoSrc.split('.').pop()?.toLowerCase();
+  const typeMap: Record<string, string> = {
+    mp4: 'video/mp4',
+    webm: 'video/webm',
+    ogg: 'video/ogg',
+    ogv: 'video/ogg',
+    mov: 'video/quicktime',
+    avi: 'video/x-msvideo',
+    mkv: 'video/x-matroska'
+  };
+  return typeMap[ext || ''] || 'video/mp4';
+}
+
+const videoType = type || getVideoType(src);
+
+// 合并所有视频源
+const allSources = [
+  { src, type: videoType },
+  ...sources
+];
+---
+
+<div class="video-container self-hosted-video" style={`aspect-ratio: ${aspectRatio};`}>
+  <video
+    {title}
+    {poster}
+    {autoplay}
+    {muted}
+    {loop}
+    {controls}
+    {preload}
+    playsinline
+    class="w-full h-full object-contain bg-black"
+  >
+    {allSources.map(source => (
+      <source src={source.src} type={source.type} />
+    ))}
+    <p class="video-fallback">
+      您的浏览器不支持 HTML5 视频。
+      <a href={src} download>点击下载视频</a>
+    </p>
+  </video>
+  <div class="video-platform-badge self-hosted">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+      <polygon points="5 3 19 12 5 21 5 3"></polygon>
+    </svg>
+    <span>Video</span>
+  </div>
+</div>
+
+<style>
+  .self-hosted-video video {
+    border-radius: 0.5rem;
+  }
+
+  .self-hosted-video video::-webkit-media-controls-panel {
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  }
+</style>

package/src/components/media/VideoPlayer.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * 统一视频播放器组件 - 自动检测视频平台
+ *
+ * 使用方法:
+ * <VideoPlayer src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+ * <VideoPlayer src="https://www.bilibili.com/video/BV1xx411c7mD" />
+ * <VideoPlayer src="/videos/demo.mp4" />
+ */
+
+import YouTube from './YouTube.astro';
+import Bilibili from './Bilibili.astro';
+import Video from './Video.astro';
+
+interface Props {
+  /** 视频源 URL */
+  src: string;
+  /** 视频标题 */
+  title?: string;
+  /** 自定义宽高比 */
+  aspectRatio?: string;
+  /** 是否自动播放 */
+  autoplay?: boolean;
+  /** 是否静音 */
+  muted?: boolean;
+  /** 是否循环播放 */
+  loop?: boolean;
+  /** 封面图片 (仅自托管视频) */
+  poster?: string;
+}
+
+const {
+  src,
+  title,
+  aspectRatio = '16/9',
+  autoplay = false,
+  muted = false,
+  loop = false,
+  poster
+} = Astro.props;
+
+// 检测视频平台
+type Platform = 'youtube' | 'bilibili' | 'self-hosted';
+
+function detectPlatform(url: string): Platform {
+  if (/youtube\.com|youtu\.be/.test(url)) {
+    return 'youtube';
+  }
+  if (/bilibili\.com|b23\.tv/.test(url)) {
+    return 'bilibili';
+  }
+  return 'self-hosted';
+}
+
+const platform = detectPlatform(src);
+---
+
+{platform === 'youtube' && (
+  <YouTube
+    url={src}
+    title={title}
+    aspectRatio={aspectRatio}
+    autoplay={autoplay}
+    muted={muted}
+    loop={loop}
+  />
+)}
+
+{platform === 'bilibili' && (
+  <Bilibili
+    url={src}
+    title={title}
+    aspectRatio={aspectRatio}
+    autoplay={autoplay}
+    muted={muted}
+  />
+)}
+
+{platform === 'self-hosted' && (
+  <Video
+    src={src}
+    title={title}
+    aspectRatio={aspectRatio}
+    autoplay={autoplay}
+    muted={muted}
+    loop={loop}
+    poster={poster}
+  />
+)}