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/native.js
CHANGED
|
@@ -34,7 +34,7 @@ var LINK_PLUGIN_KEY = "canvuLink";
|
|
|
34
34
|
var DEFAULT_LINK_CARD_WIDTH = 320;
|
|
35
35
|
var DEFAULT_LINK_CARD_HEIGHT = 70;
|
|
36
36
|
var LINK_CARD_MIN_SCALE = 0.6;
|
|
37
|
-
var LINK_CARD_MAX_SCALE =
|
|
37
|
+
var LINK_CARD_MAX_SCALE = 6;
|
|
38
38
|
var LINK_CARD_ASPECT = DEFAULT_LINK_CARD_WIDTH / DEFAULT_LINK_CARD_HEIGHT;
|
|
39
39
|
var LINK_CARD_BORDER = "oklch(0.918 0.008 255)";
|
|
40
40
|
var LINK_CARD_BORDER_STRONG = "oklch(0.86 0.012 255)";
|
|
@@ -47,7 +47,6 @@ var formatNumber = (value) => {
|
|
|
47
47
|
const rounded = Math.round(value * 100) / 100;
|
|
48
48
|
return Object.is(rounded, -0) ? "0" : String(rounded);
|
|
49
49
|
};
|
|
50
|
-
var escapeXmlAttribute = (value) => value.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">").replaceAll('"', """).replaceAll("'", "'");
|
|
51
50
|
var escapeHtmlText = (value) => value.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">");
|
|
52
51
|
var getLinkHostname = (href) => {
|
|
53
52
|
try {
|
|
@@ -72,7 +71,6 @@ var getLinkInitial = (hostname) => {
|
|
|
72
71
|
const first = hostname.trim().charAt(0).toUpperCase();
|
|
73
72
|
return first || "L";
|
|
74
73
|
};
|
|
75
|
-
var buildGoogleFaviconUrl = (hostname) => hostname ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(hostname)}&sz=64` : null;
|
|
76
74
|
var getStableLinkIdSuffix = (value) => {
|
|
77
75
|
let hash = 0;
|
|
78
76
|
for (const char of value) {
|
|
@@ -95,16 +93,13 @@ function buildLinkCardSvg(width, _height, link) {
|
|
|
95
93
|
const title = link.title?.trim() || hostname || "Link";
|
|
96
94
|
const protocol = getLinkProtocol(link.href);
|
|
97
95
|
const subtitle = hostname || link.href;
|
|
98
|
-
const favicon = link.favicon?.trim() || buildGoogleFaviconUrl(hostname);
|
|
99
96
|
const idSuffix = getStableLinkIdSuffix(`${hostname}:${link.href}`);
|
|
100
|
-
const clipId = `canvu-link-favicon-${idSuffix}`;
|
|
101
97
|
const gradientId = `canvu-link-favicon-gradient-${idSuffix}`;
|
|
102
98
|
const buttonX = contentWidth - padding - buttonSize;
|
|
103
99
|
const buttonY = (contentHeight - buttonSize) / 2;
|
|
104
100
|
const isSecure = protocol === "https:";
|
|
105
101
|
const subtitleX = isSecure ? textX + 13 : textX;
|
|
106
102
|
const subtitleWidth = isSecure ? textWidth - 13 : textWidth;
|
|
107
|
-
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})" />` : "";
|
|
108
103
|
return `
|
|
109
104
|
<style>
|
|
110
105
|
.canvu-link-card-root .canvu-link-card { transition: transform .18s ease, filter .18s ease, stroke .18s ease; }
|
|
@@ -119,13 +114,9 @@ function buildLinkCardSvg(width, _height, link) {
|
|
|
119
114
|
<stop stop-color="${LINK_CARD_ACCENT}" />
|
|
120
115
|
<stop offset="1" stop-color="${LINK_CARD_ACCENT_DEEP}" />
|
|
121
116
|
</linearGradient>
|
|
122
|
-
<clipPath id="${clipId}">
|
|
123
|
-
<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" />
|
|
124
|
-
</clipPath>
|
|
125
117
|
</defs>
|
|
126
118
|
<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" fill="url(#${gradientId})" />
|
|
127
119
|
<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>
|
|
128
|
-
${faviconImage}
|
|
129
120
|
${buildLinkTextBand({ x: textX, y: 16, width: textWidth, height: 19, text: title, fontSize: 14.5, color: LINK_CARD_TITLE_COLOR, fontWeight: 700 })}
|
|
130
121
|
${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>` : ""}
|
|
131
122
|
${buildLinkTextBand({ x: subtitleX, y: 36, width: subtitleWidth, height: 17, text: subtitle, fontSize: 12.5, color: LINK_CARD_TEXT_COLOR })}
|