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

4
// 常量定义
5
const CONSTANTS = {
6
  FAVICON_API: 'https://www.google.com/s2/favicons',
7
  FAVICON_SIZE: 32,
8
  ID_PREFIX: 'LC',
9
  LOADING_TITLE: 'Loading...',
10
  LOADING_DESC: 'Loading description...',
11
};
12

13
// 错误信息
14
const ERRORS = {
15
  INVALID_DIRECTIVE: 'Invalid directive. ("link-card" directive must be leaf type "::link-card{url="https://example.com"}")',
16
  INVALID_URL: 'Invalid URL. ("url" attribute must be a valid HTTP/HTTPS URL)',
17
};
18

19
/**
20
 * 生成唯一的卡片ID
21
 * 使用时间戳和随机数确保唯一性
22
 */
23
function generateCardId() {
24
  const timestamp = Date.now().toString(36);
25
  const random = Math.random().toString(36).slice(2, 8);
26
  return `${CONSTANTS.ID_PREFIX}${timestamp}${random}`;
27
}
28

29
/**
30
 * 安全地提取域名
31
 */
32
function extractDomain(url) {
33
  try {
34
    return new URL(url).hostname;
35
  } catch {
36
    return 'unknown';
37
  }
38
}
39

40
/**
41
 * 验证URL是否有效
42
 */
43
function isValidUrl(url) {
44
  if (!url) return false;
45
  try {
46
    const urlObj = new URL(url);
47
    return ['http:', 'https:'].includes(urlObj.protocol);
48
  } catch {
49
    return false;
50
  }
51
}
52

53
/**
54
 * 转义字符串用于安全插入到JavaScript中
55
 */
56
function escapeForScript(str) {
57
  return JSON.stringify(str);
58
}
59

60
/**
61
 * 生成获取元数据的脚本
62
 * 使用IIFE避免全局污染，使用JSON.stringify防止XSS
63
 */
64
function generateMetadataScript(cardId, url, domain) {
65
  return `
66
    (function() {
67
      'use strict';
68
      try {
69
        const cardElement = document.getElementById('${cardId}-card');
70
        const titleElement = document.getElementById('${cardId}-title');
71
        const descElement = document.getElementById('${cardId}-description');
72

73
        if (!cardElement || !titleElement || !descElement) {
74
          console.warn('[LINK-CARD] Elements not found for ${cardId}');
75
          return;
76
        }
77

78
        // 只有在没有自定义内容时才设置默认值
79
        if (!titleElement.dataset.hasCustomTitle) {
80
          titleElement.textContent = ${escapeForScript(domain)};
81
        }
82
        if (!descElement.dataset.hasCustomDesc) {
83
          descElement.textContent = ${escapeForScript(`Visit ${domain}`)};
84
        }
85

86
        cardElement.classList.remove("fetch-waiting");
87
        console.log("[LINK-CARD] Loaded card for:", ${escapeForScript(url)}, "|", "${cardId}");
88
      } catch (err) {
89
        console.error("[LINK-CARD] Error loading card:", err);
90
        const cardEl = document.getElementById('${cardId}-card');
91
        if (cardEl) {
92
          cardEl.classList.add("fetch-error");
93
          cardEl.classList.remove("fetch-waiting");
94
        }
95
      }
96
    })();
97
  `;
98
}
99

100
/**
101
 * Creates a Link Card component for third-party links.
102
 * @param {Object} properties - The properties for the link card
103
 * @param {string} properties.url - The URL to link to (required)
104
 * @param {string} [properties.title] - Custom title for the card
105
 * @param {string} [properties.description] - Custom description
106
 * @param {string} [properties.image] - Custom image URL
107
 * @param {string} [properties.icon] - Custom favicon URL
108
 * @param {Array} children - Should be empty for leaf directive
109
 * @returns {Object} HAST element representing the link card
110
 */
111
export function LinkCardComponent(properties = {}, children = []) {
112
  // 验证：确保是叶子指令（没有子元素）
113
  if (Array.isArray(children) && children.length !== 0) {
114
    return h("div", { class: "hidden" }, ERRORS.INVALID_DIRECTIVE);
115
  }
116

117
  // 验证URL
118
  if (!isValidUrl(properties.url)) {
119
    return h("div", { class: "hidden" }, ERRORS.INVALID_URL);
120
  }
121

122
  const url = properties.url;
123
  const domain = extractDomain(url);
124
  const cardId = generateCardId();
125

126
  // 解构自定义属性，提供默认值
127
  const {
128
    title: customTitle = null,
129
    description: customDescription = null,
130
    image: customImage = null,
131
    icon: customIcon = null
132
  } = properties;
133

134
  // 判断是否需要获取元数据
135
  const needsFetch = !customTitle || !customDescription;
136

137
  // 构建favicon URL，使用自定义图标或Google的favicon服务
138
  const iconUrl = customIcon ||
139
    `${CONSTANTS.FAVICON_API}?domain=${encodeURIComponent(domain)}&sz=${CONSTANTS.FAVICON_SIZE}`;
140

141
  // 创建favicon元素
142
  const nFavicon = h(`div#${cardId}-favicon`, {
143
    class: "lc-favicon",
144
    style: `background-image: url(${iconUrl})`,
145
    // 添加错误处理：如果图标加载失败，使用默认背景色
146
    onerror: "this.style.backgroundImage='none'; this.style.backgroundColor='#f0f0f0';"
147
  });
148

149
  // 创建标题栏
150
  const nTitle = h("div", { class: "lc-titlebar" }, [
151
    h("div", { class: "lc-titlebar-left" }, [
152
      h("div", { class: "lc-site" }, [
153
        nFavicon,
154
        h("div", { class: "lc-domain" }, domain),
155
      ]),
156
    ]),
157
    h("div", { class: "lc-external-icon" }),
158
  ]);
159

160
  // 创建卡片标题
161
  const nCardTitle = h(
162
    `div#${cardId}-title`,
163
    {
164
      class: "lc-card-title",
165
      ...(customTitle && { 'data-has-custom-title': 'true' })
166
    },
167
    customTitle || CONSTANTS.LOADING_TITLE
168
  );
169

170
  // 创建描述
171
  const nDescription = h(
172
    `div#${cardId}-description`,
173
    {
174
      class: "lc-description",
175
      ...(customDescription && { 'data-has-custom-desc': 'true' })
176
    },
177
    customDescription || CONSTANTS.LOADING_DESC
178
  );
179

180
  // 构建卡片内容数组
181
  const cardContent = [nTitle, nCardTitle, nDescription];
182

183
  // 如果有自定义图片，添加图片元素
184
  if (customImage) {
185
    const nImage = h(
186
      `div#${cardId}-image`,
187
      { class: "lc-image" },
188
      h("img", {
189
        src: customImage,
190
        alt: customTitle || "Link preview",
191
        loading: "lazy", // 添加懒加载
192
        onerror: "this.style.display='none';" // 图片加载失败时隐藏
193
      })
194
    );
195
    cardContent.push(nImage);
196
  }
197

198
  // 如果需要获取元数据，添加脚本
199
  if (needsFetch) {
200
    const nScript = h(
201
      `script#${cardId}-script`,
202
      {
203
        type: "text/javascript",
204
        defer: true
205
      },
206
      generateMetadataScript(cardId, url, domain)
207
    );
208
    cardContent.push(nScript);
209
  }
210

211
  // 创建并返回链接卡片
212
  return h(
213
    `a#${cardId}-card`,
214
    {
215
      class: needsFetch ? "card-link fetch-waiting no-styling" : "card-link no-styling",
216
      href: url,
217
      target: "_blank",
218
      rel: "noopener noreferrer", // 安全性：防止新页面访问 window.opener
219
      'data-url': url,
220
      'aria-label': `Link to ${domain}`, // 无障碍：添加屏幕阅读器标签
221
      title: customTitle || `Visit ${domain}` // 添加悬停提示
222
    },
223
    cardContent
224
  );
225
}
226

227
// 导出默认函数，保持向后兼容
228
export default LinkCardComponent;

1
@import 'link-card.styl' // 在文件末尾添加就行

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

4
// 在 rehypeComponents 配置中添加
5
rehypeComponents,
6
{
7
  components: {
8
    "link-card": LinkCardComponent, // 添加这一行
9
    // ... 其他组件
10
  },
11
},