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/tldraw.js
CHANGED
|
@@ -49,7 +49,7 @@ var LINK_PLUGIN_KEY = "canvuLink";
|
|
|
49
49
|
var DEFAULT_LINK_CARD_WIDTH = 320;
|
|
50
50
|
var DEFAULT_LINK_CARD_HEIGHT = 70;
|
|
51
51
|
var LINK_CARD_MIN_SCALE = 0.6;
|
|
52
|
-
var LINK_CARD_MAX_SCALE =
|
|
52
|
+
var LINK_CARD_MAX_SCALE = 6;
|
|
53
53
|
var LINK_CARD_BORDER = "oklch(0.918 0.008 255)";
|
|
54
54
|
var LINK_CARD_BORDER_STRONG = "oklch(0.86 0.012 255)";
|
|
55
55
|
var LINK_CARD_ACCENT = "oklch(0.55 0.19 264)";
|
|
@@ -61,7 +61,6 @@ var formatNumber = (value) => {
|
|
|
61
61
|
const rounded = Math.round(value * 100) / 100;
|
|
62
62
|
return Object.is(rounded, -0) ? "0" : String(rounded);
|
|
63
63
|
};
|
|
64
|
-
var escapeXmlAttribute = (value) => value.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">").replaceAll('"', """).replaceAll("'", "'");
|
|
65
64
|
var escapeHtmlText = (value) => value.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">");
|
|
66
65
|
var getLinkHostname = (href) => {
|
|
67
66
|
try {
|
|
@@ -86,7 +85,6 @@ var getLinkInitial = (hostname) => {
|
|
|
86
85
|
const first = hostname.trim().charAt(0).toUpperCase();
|
|
87
86
|
return first || "L";
|
|
88
87
|
};
|
|
89
|
-
var buildGoogleFaviconUrl = (hostname) => hostname ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(hostname)}&sz=64` : null;
|
|
90
88
|
var getStableLinkIdSuffix = (value) => {
|
|
91
89
|
let hash = 0;
|
|
92
90
|
for (const char of value) {
|
|
@@ -109,16 +107,13 @@ function buildLinkCardSvg(width, _height, link) {
|
|
|
109
107
|
const title = link.title?.trim() || hostname || "Link";
|
|
110
108
|
const protocol = getLinkProtocol(link.href);
|
|
111
109
|
const subtitle = hostname || link.href;
|
|
112
|
-
const favicon = link.favicon?.trim() || buildGoogleFaviconUrl(hostname);
|
|
113
110
|
const idSuffix = getStableLinkIdSuffix(`${hostname}:${link.href}`);
|
|
114
|
-
const clipId = `canvu-link-favicon-${idSuffix}`;
|
|
115
111
|
const gradientId = `canvu-link-favicon-gradient-${idSuffix}`;
|
|
116
112
|
const buttonX = contentWidth - padding - buttonSize;
|
|
117
113
|
const buttonY = (contentHeight - buttonSize) / 2;
|
|
118
114
|
const isSecure = protocol === "https:";
|
|
119
115
|
const subtitleX = isSecure ? textX + 13 : textX;
|
|
120
116
|
const subtitleWidth = isSecure ? textWidth - 13 : textWidth;
|
|
121
|
-
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})" />` : "";
|
|
122
117
|
return `
|
|
123
118
|
<style>
|
|
124
119
|
.canvu-link-card-root .canvu-link-card { transition: transform .18s ease, filter .18s ease, stroke .18s ease; }
|
|
@@ -133,13 +128,9 @@ function buildLinkCardSvg(width, _height, link) {
|
|
|
133
128
|
<stop stop-color="${LINK_CARD_ACCENT}" />
|
|
134
129
|
<stop offset="1" stop-color="${LINK_CARD_ACCENT_DEEP}" />
|
|
135
130
|
</linearGradient>
|
|
136
|
-
<clipPath id="${clipId}">
|
|
137
|
-
<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" />
|
|
138
|
-
</clipPath>
|
|
139
131
|
</defs>
|
|
140
132
|
<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" fill="url(#${gradientId})" />
|
|
141
133
|
<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>
|
|
142
|
-
${faviconImage}
|
|
143
134
|
${buildLinkTextBand({ x: textX, y: 16, width: textWidth, height: 19, text: title, fontSize: 14.5, color: LINK_CARD_TITLE_COLOR, fontWeight: 700 })}
|
|
144
135
|
${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>` : ""}
|
|
145
136
|
${buildLinkTextBand({ x: subtitleX, y: 36, width: subtitleWidth, height: 17, text: subtitle, fontSize: 12.5, color: LINK_CARD_TEXT_COLOR })}
|