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

4
/**
5
 * Creates a Link Card component for third-party links.
6
 */
7
export function LinkCardComponent(properties, children) {
8
  if (Array.isArray(children) && children.length !== 0)
9
    return h("div", { class: "hidden" }, [
10
      'Invalid directive. ("link-card" directive must be leaf type "::link-card{url="https://example.com"}"))',
11
    ]);
12

13
  if (!properties.url || !properties.url.startsWith('http'))
14
    return h(
15
      "div",
16
      { class: "hidden" },
17
      'Invalid URL. ("url" attribute must be a valid HTTP/HTTPS URL)',
18
    );
19

20
  const url = properties.url;
21
  const customTitle = properties.title;
22
  const customDescription = properties.description;
23
  const customImage = properties.image;
24
  const customIcon = properties.icon;
25
  const cardUuid = `LC${Math.random().toString(36).slice(-6)}`;
26

27
  // Extract domain from URL for display
28
  const domain = new URL(url).hostname;
29

30
  // Use custom icon if provided, otherwise use Google favicon service
31
  const iconUrl = customIcon || `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
32
  const nFavicon = h(`div#${cardUuid}-favicon`, {
33
    class: "lc-favicon",
34
    style: `background-image: url(${iconUrl})`
35
  });
36

37
  // 隐藏域名显示的标题栏
38
  const nTitle = h("div", { class: "lc-titlebar" }, [
39
    h("div", { class: "lc-titlebar-left" }, [
40
      // h("div", { class: "lc-site" }, domain), // 已注释掉域名显示
41
    ]),
42
    h("div", { class: "lc-external-icon" }),
43
  ]);
44

45
  const nCardTitle = h(
46
    `div#${cardUuid}-title`,
47
    { class: "lc-card-title" },
48
    customTitle || "Link",
49
  );
50

51
  const nDescription = h(
52
    `div#${cardUuid}-description`,
53
    { class: "lc-description" },
54
    customDescription || "Click to visit",
55
  );
56

57
  const nImage = h(
58
    `div#${cardUuid}-image`,
59
    { class: "lc-image" },
60
    customImage ? h("img", { src: customImage, alt: "Link preview" }) : null
61
  );
62

63
  // Only fetch metadata if custom data is not provided
64
  const needsFetch = !customTitle || !customDescription;
65

66
  const nScript = needsFetch ? h(
67
    `script#${cardUuid}-script`,
68
    { type: "text/javascript", defer: true },
69
    `
70
      // Simple metadata extraction for link cards
71
      try {
72
        const cardElement = document.getElementById('${cardUuid}-card');
73
        const titleElement = document.getElementById('${cardUuid}-title');
74
        const descElement = document.getElementById('${cardUuid}-description');
75

76
        // Set default values if custom ones weren't provided
77
        if (!titleElement.dataset.hasCustomTitle) {
78
          titleElement.innerText = 'Link';
79
        }
80
        if (!descElement.dataset.hasCustomDesc) {
81
          descElement.innerText = 'Click to visit';
82
        }
83

84
        cardElement.classList.remove("fetch-waiting");
85
        console.log("[LINK-CARD] Loaded card for ${url} | ${cardUuid}.");
86
      } catch (err) {
87
        const c = document.getElementById('${cardUuid}-card');
88
        c?.classList.add("fetch-error");
89
        console.warn("[LINK-CARD] (Error) Loading card for ${url} | ${cardUuid}.");
90
      }
91
    `,
92
  ) : null;
93

94
  // Set data attributes for custom content
95
  if (customTitle) {
96
    nCardTitle.properties['data-has-custom-title'] = 'true';
97
  }
98
  if (customDescription) {
99
    nDescription.properties['data-has-custom-desc'] = 'true';
100
  }
101

102
  const cardContent = [
103
    nTitle,
104
    nCardTitle,
105
    nDescription,
106
  ];
107

108
  if (customImage) {
109
    cardContent.push(nImage);
110
  }
111

112
  if (nScript) {
113
    cardContent.push(nScript);
114
  }
115

116
  return h(
117
    `a#${cardUuid}-card`,
118
    {
119
      class: needsFetch ? "card-link fetch-waiting no-styling" : "card-link no-styling",
120
      href: url,
121
      target: "_blank",
122
      rel: "noopener noreferrer",
123
      'data-url': url,
124
    },
125
    cardContent,
126
  );
127
}

1
// Link Card Styles
2
a.card-link
3
  display: block
4
  text-decoration: none
5
  border: 1px solid var(--line-divider)
6
  border-radius: 8px
7
  padding: 16px
8
  margin: 16px 0
9
  background-color: var(--card-bg)
10
  transition: all 0.2s ease
11
  position: relative
12
  overflow: hidden
13
  color: inherit
14

15
  &:hover
16
    background-color: var(--btn-regular-bg-hover)
17

18
    .lc-titlebar
19
      .lc-external-icon
20
        opacity: 1
21

22
  &:active
23
    transform: translateY(0)
24
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)
25

26
  // 隐藏标题栏以移除域名显示和空白区域
27
  .lc-titlebar
28
    display: none
29

30
    .lc-titlebar-left
31
      display: flex
32
      align-items: center
33

34
    .lc-site
35
      display: flex
36
      align-items: center
37
      gap: 8px
38

39
    .lc-favicon
40
      width: 16px
41
      height: 16px
42
      background-size: contain
43
      background-repeat: no-repeat
44
      background-position: center
45
      flex-shrink: 0
46

47
    .lc-domain
48
      font-size: 14px
49
      color: var(--text-color-secondary)
50
      font-weight: 500
51

52
    .lc-external-icon
53
      width: 16px
54
      height: 16px
55
      opacity: 0.6
56
      transition: opacity 0.2s ease
57
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15,3 21,3 21,9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>')
58
      background-size: contain
59
      background-repeat: no-repeat
60
      background-position: center
61

62
  .lc-card-title
63
    font-size: 18px
64
    font-weight: 600
65
    color: var(--text-color-primary)
66
    margin-bottom: 8px
67
    line-height: 1.3
68

69
  .lc-description
70
    font-size: 14px
71
    color: var(--text-color-secondary)
72
    line-height: 1.4
73
    margin-bottom: 12px
74

75
  // 移除图片上方的空白区域
76
  .lc-image
77
    margin-top: 0
78

79
    img
80
      width: 100%
81
      max-height: 200px
82
      object-fit: cover
83
      border-radius: 4px
84

85
  &.fetch-waiting
86
    .lc-card-title, .lc-description
87
      animation: pulse 1.5s ease-in-out infinite
88

89
  &.fetch-error
90
    border-color: var(--error-color)
91
    background-color: var(--error-bg)
92

93
@keyframes pulse
94
  0%, 100%
95
    opacity: 1
96
  50%
97
    opacity: 0.5

1
// 添加导入
2
import { LinkCardComponent } from "./src/plugins/rehype-component-link-card.mjs";
3

4
// 在 rehypeComponents 配置中添加
5
rehypeComponents,
6
{
7
  components: {
8
    github: GithubCardComponent,
9
    "link-card": LinkCardComponent, // 添加这一行
10
    note: (x, y) => AdmonitionComponent(x, y, "note"),
11
    // ... 其他组件
12
  },
13
},

1
// 基本用法
2
::link-card{url="https://example.com"}
3

4
// 自定义标题和描述
5
::link-card{url="https://github.com" title="GitHub" description="代码托管平台"}
6

7
// 带自定义图片
8
::link-card{url="https://vercel.com" title="Vercel" description="部署平台" image="https://example.com/image.png"}
9

10
// 自定义图标
11
::link-card{url="https://github.com" title="GitHub" description="代码托管平台" icon="https://github.com/favicon.ico"}