基于rehype的博客PDF嵌入组件实现

1
/// <reference types="mdast" />
2
import { h } from "hastscript";
3

4
/**
5
 * Creates a PDF Viewer component.
6
 *
7
 * @param {Object} properties - The properties of the component.
8
 * @param {string} properties.url - The URL of the PDF file.
9
 * @param {string} [properties.title] - Optional title for the PDF viewer.
10
 * @param {number} [properties.height] - Optional height in pixels (default: 600).
11
 * @param {import('mdast').RootContent[]} children - The children elements.
12
 * @returns {import('mdast').Parent} The created PDF Viewer component.
13
 */
14
export function PdfViewerComponent(properties, children) {
15
  if (Array.isArray(children) && children.length !== 0)
16
    return h("div", { class: "hidden" }, [
17
      'Invalid directive. ("pdf" directive must be leaf type "::pdf{url="https://example.com/file.pdf"}")',
18
    ]);
19

20
  if (!properties.url)
21
    return h(
22
      "div",
23
      { class: "hidden" },
24
      'Invalid URL. ("url" attribute is required)',
25
    );
26

27
  const url = properties.url;
28
  const title = properties.title || "PDF Viewer";
29
  const height = properties.height || 600;
30

31
  // 浏览器原生 PDF 预览（iframe 直接加载），不引入 pdf.js 重依赖
32
  return h("div", { class: "pdf-container" }, [
33
    h("div", { class: "pdf-header" }, [
34
      h("div", { class: "pdf-title" }, title),
35
      h(
36
        "a",
37
        {
38
          class: "pdf-download",
39
          href: url,
40
          target: "_blank",
41
          download: "",
42
        },
43
        "下载PDF",
44
      ),
45
    ]),
46
    h("div", { class: "pdf-viewer-wrapper" }, [
47
      h("iframe", {
48
        class: "pdf-viewer",
49
        src: url,
50
        style: `height: ${height}px;`,
51
        title: title,
52
      }),
53
    ]),
54
  ]);
55
}

1
// ─── PDF 查看器（::pdf 指令，rehype-component-pdf-viewer） ──────────────────
2

3
.pdf-container
4
  margin: 1.5rem 0
5
  border-radius: 0.75rem
6
  overflow: hidden
7
  background: var(--license-block-bg)
8
  border: 1px solid var(--line-divider)
9

10
.pdf-header
11
  display: flex
12
  align-items: center
13
  justify-content: space-between
14
  padding: 0.75rem 1rem
15
  border-bottom: 1px solid var(--line-divider)
16

17
.pdf-title
18
  font-weight: 600
19
  font-size: 0.95rem
20
  color: var(--tw-prose-headings)
21

22
.pdf-download
23
  font-size: 0.85rem
24
  color: var(--primary)
25
  text-decoration: none
26
  padding: 0.25rem 0.75rem
27
  border-radius: 0.375rem
28
  background: var(--btn-regular-bg)
29
  transition: background-color 0.2s ease
30

31
  &:hover
32
    background: var(--btn-regular-bg-hover)
33

34
.pdf-viewer-wrapper
35
  position: relative
36
  width: 100%
37

38
.pdf-viewer
39
  display: block
40
  width: 100%
41
  border: none
42

43
// 覆盖上方 .custom-md iframe 的全局 margin/border-radius，由容器自己控制留白
44
.custom-md .pdf-viewer
45
  margin: 0
46
  border-radius: 0