canvu-react 0.4.32 → 0.4.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -10
- package/dist/index.js.map +1 -1
- package/dist/native.cjs +1 -10
- package/dist/native.cjs.map +1 -1
- package/dist/native.js +1 -10
- package/dist/native.js.map +1 -1
- package/dist/react.cjs +2 -11
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +2 -11
- package/dist/react.js.map +1 -1
- package/dist/tldraw.cjs +1 -10
- package/dist/tldraw.cjs.map +1 -1
- package/dist/tldraw.js +1 -10
- package/dist/tldraw.js.map +1 -1
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -65,16 +65,13 @@ function buildLinkCardSvg(width, _height, link) {
|
|
|
65
65
|
const title = link.title?.trim() || hostname || "Link";
|
|
66
66
|
const protocol = getLinkProtocol(link.href);
|
|
67
67
|
const subtitle = hostname || link.href;
|
|
68
|
-
const favicon = link.favicon?.trim() || buildGoogleFaviconUrl(hostname);
|
|
69
68
|
const idSuffix = getStableLinkIdSuffix(`${hostname}:${link.href}`);
|
|
70
|
-
const clipId = `canvu-link-favicon-${idSuffix}`;
|
|
71
69
|
const gradientId = `canvu-link-favicon-gradient-${idSuffix}`;
|
|
72
70
|
const buttonX = contentWidth - padding - buttonSize;
|
|
73
71
|
const buttonY = (contentHeight - buttonSize) / 2;
|
|
74
72
|
const isSecure = protocol === "https:";
|
|
75
73
|
const subtitleX = isSecure ? textX + 13 : textX;
|
|
76
74
|
const subtitleWidth = isSecure ? textWidth - 13 : textWidth;
|
|
77
|
-
const faviconImage = favicon ? `<image class="canvu-link-favicon-img" href="${escapeXmlAttribute(favicon)}" x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" preserveAspectRatio="xMidYMid slice" clip-path="url(#${clipId})" />` : "";
|
|
78
75
|
return `
|
|
79
76
|
<style>
|
|
80
77
|
.canvu-link-card-root .canvu-link-card { transition: transform .18s ease, filter .18s ease, stroke .18s ease; }
|
|
@@ -89,13 +86,9 @@ function buildLinkCardSvg(width, _height, link) {
|
|
|
89
86
|
<stop stop-color="${LINK_CARD_ACCENT}" />
|
|
90
87
|
<stop offset="1" stop-color="${LINK_CARD_ACCENT_DEEP}" />
|
|
91
88
|
</linearGradient>
|
|
92
|
-
<clipPath id="${clipId}">
|
|
93
|
-
<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" />
|
|
94
|
-
</clipPath>
|
|
95
89
|
</defs>
|
|
96
90
|
<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" fill="url(#${gradientId})" />
|
|
97
91
|
<text x="${formatNumber(padding + badgeSize / 2)}" y="${formatNumber(padding + badgeSize / 2 + 5)}" text-anchor="middle" font-family="system-ui,sans-serif" font-size="17" font-weight="700" fill="#ffffff">${escapeHtmlText(getLinkInitial(hostname))}</text>
|
|
98
|
-
${faviconImage}
|
|
99
92
|
${buildLinkTextBand({ x: textX, y: 16, width: textWidth, height: 19, text: title, fontSize: 14.5, color: LINK_CARD_TITLE_COLOR, fontWeight: 700 })}
|
|
100
93
|
${isSecure ? `<g transform="translate(${formatNumber(textX)},40)" stroke="${LINK_CARD_TEXT_COLOR}" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none"><rect x="1.5" y="4.5" width="7" height="6" rx="1" /><path d="M3 4.5 V3 a2 2 0 0 1 4 0 v1.5" /></g>` : ""}
|
|
101
94
|
${buildLinkTextBand({ x: subtitleX, y: 36, width: subtitleWidth, height: 17, text: subtitle, fontSize: 12.5, color: LINK_CARD_TEXT_COLOR })}
|
|
@@ -147,14 +140,14 @@ function rebuildLinkItemSvg(item) {
|
|
|
147
140
|
childrenSvg: buildLinkCardSvg(width, height, link)
|
|
148
141
|
};
|
|
149
142
|
}
|
|
150
|
-
var LINK_PLUGIN_KEY, DEFAULT_LINK_CARD_WIDTH, DEFAULT_LINK_CARD_HEIGHT, LINK_CARD_MIN_SCALE, LINK_CARD_MAX_SCALE, LINK_CARD_ASPECT, LINK_CARD_BORDER, LINK_CARD_BORDER_STRONG, LINK_CARD_ACCENT, LINK_CARD_ACCENT_DEEP, LINK_CARD_TITLE_COLOR, LINK_CARD_TEXT_COLOR, clamp, formatNumber,
|
|
143
|
+
var LINK_PLUGIN_KEY, DEFAULT_LINK_CARD_WIDTH, DEFAULT_LINK_CARD_HEIGHT, LINK_CARD_MIN_SCALE, LINK_CARD_MAX_SCALE, LINK_CARD_ASPECT, LINK_CARD_BORDER, LINK_CARD_BORDER_STRONG, LINK_CARD_ACCENT, LINK_CARD_ACCENT_DEEP, LINK_CARD_TITLE_COLOR, LINK_CARD_TEXT_COLOR, clamp, formatNumber, escapeHtmlText, getLinkHostname, buildLinkTextBand, getLinkProtocol, getLinkInitial, getStableLinkIdSuffix, isCanvuLinkData;
|
|
151
144
|
var init_link_item = __esm({
|
|
152
145
|
"src/scene/link-item.ts"() {
|
|
153
146
|
LINK_PLUGIN_KEY = "canvuLink";
|
|
154
147
|
DEFAULT_LINK_CARD_WIDTH = 320;
|
|
155
148
|
DEFAULT_LINK_CARD_HEIGHT = 70;
|
|
156
149
|
LINK_CARD_MIN_SCALE = 0.6;
|
|
157
|
-
LINK_CARD_MAX_SCALE =
|
|
150
|
+
LINK_CARD_MAX_SCALE = 6;
|
|
158
151
|
LINK_CARD_ASPECT = DEFAULT_LINK_CARD_WIDTH / DEFAULT_LINK_CARD_HEIGHT;
|
|
159
152
|
LINK_CARD_BORDER = "oklch(0.918 0.008 255)";
|
|
160
153
|
LINK_CARD_BORDER_STRONG = "oklch(0.86 0.012 255)";
|
|
@@ -167,7 +160,6 @@ var init_link_item = __esm({
|
|
|
167
160
|
const rounded = Math.round(value * 100) / 100;
|
|
168
161
|
return Object.is(rounded, -0) ? "0" : String(rounded);
|
|
169
162
|
};
|
|
170
|
-
escapeXmlAttribute = (value) => value.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">").replaceAll('"', """).replaceAll("'", "'");
|
|
171
163
|
escapeHtmlText = (value) => value.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">");
|
|
172
164
|
getLinkHostname = (href) => {
|
|
173
165
|
try {
|
|
@@ -192,7 +184,6 @@ var init_link_item = __esm({
|
|
|
192
184
|
const first = hostname.trim().charAt(0).toUpperCase();
|
|
193
185
|
return first || "L";
|
|
194
186
|
};
|
|
195
|
-
buildGoogleFaviconUrl = (hostname) => hostname ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(hostname)}&sz=64` : null;
|
|
196
187
|
getStableLinkIdSuffix = (value) => {
|
|
197
188
|
let hash = 0;
|
|
198
189
|
for (const char of value) {
|