@luciodale/docs-ui-kit 0.3.34 → 0.3.36
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/package.json
CHANGED
|
@@ -2,14 +2,15 @@
|
|
|
2
2
|
type Props = {
|
|
3
3
|
packageName: string;
|
|
4
4
|
githubRepo?: string;
|
|
5
|
+
registry?: "npm" | "clojars";
|
|
5
6
|
};
|
|
6
7
|
|
|
7
|
-
const { packageName, githubRepo } = Astro.props;
|
|
8
|
+
const { packageName, githubRepo, registry = "npm" } = Astro.props;
|
|
8
9
|
|
|
9
|
-
type
|
|
10
|
+
type PackageData = { version: string; license: string };
|
|
10
11
|
type GithubData = { stars: number };
|
|
11
12
|
|
|
12
|
-
async function fetchNpm(): Promise<
|
|
13
|
+
async function fetchNpm(): Promise<PackageData | null> {
|
|
13
14
|
try {
|
|
14
15
|
const controller = new AbortController();
|
|
15
16
|
const timeout = setTimeout(() => controller.abort(), 3000);
|
|
@@ -25,6 +26,23 @@ async function fetchNpm(): Promise<NpmData | null> {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
|
|
29
|
+
async function fetchClojars(): Promise<PackageData | null> {
|
|
30
|
+
try {
|
|
31
|
+
const controller = new AbortController();
|
|
32
|
+
const timeout = setTimeout(() => controller.abort(), 3000);
|
|
33
|
+
const res = await fetch(`https://clojars.org/api/artifacts/${packageName}`, {
|
|
34
|
+
signal: controller.signal,
|
|
35
|
+
});
|
|
36
|
+
clearTimeout(timeout);
|
|
37
|
+
if (!res.ok) return null;
|
|
38
|
+
const data = await res.json();
|
|
39
|
+
const license = data.licenses?.[0]?.name ?? "";
|
|
40
|
+
return { version: data.latest_release ?? data.latest_version ?? "", license };
|
|
41
|
+
} catch {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
28
46
|
async function fetchGithub(): Promise<GithubData | null> {
|
|
29
47
|
if (!githubRepo) return null;
|
|
30
48
|
try {
|
|
@@ -43,26 +61,38 @@ async function fetchGithub(): Promise<GithubData | null> {
|
|
|
43
61
|
}
|
|
44
62
|
}
|
|
45
63
|
|
|
46
|
-
const
|
|
64
|
+
const fetchPackage = registry === "clojars" ? fetchClojars : fetchNpm;
|
|
65
|
+
const [pkg, github] = await Promise.all([fetchPackage(), fetchGithub()]);
|
|
66
|
+
|
|
67
|
+
const isClojars = registry === "clojars";
|
|
68
|
+
const packageUrl = isClojars
|
|
69
|
+
? `https://clojars.org/${packageName}`
|
|
70
|
+
: `https://www.npmjs.com/package/${packageName}`;
|
|
47
71
|
---
|
|
48
72
|
|
|
49
73
|
<div class="flex items-center gap-3 flex-wrap text-xs font-mono my-4">
|
|
50
|
-
{
|
|
74
|
+
{pkg?.version && (
|
|
51
75
|
<a
|
|
52
|
-
href={
|
|
76
|
+
href={packageUrl}
|
|
53
77
|
target="_blank"
|
|
54
78
|
rel="noopener noreferrer"
|
|
55
79
|
class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-accent hover:bg-white/[0.06] transition-colors"
|
|
56
80
|
>
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
81
|
+
{isClojars ? (
|
|
82
|
+
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
|
|
83
|
+
<path d="M11.503 12.216c-.119.259-.251.549-.387.858-.482 1.092-1.016 2.42-1.21 3.271a4.91 4.91 0 0 0-.112 1.096c0 .164.009.337.022.514.682.25 1.417.388 2.186.39a6.39 6.39 0 0 0 2.001-.326 3.808 3.808 0 0 1-.418-.441c-.854-1.089-1.329-2.682-2.082-5.362M8.355 6.813A6.347 6.347 0 0 0 5.657 12a6.347 6.347 0 0 0 2.625 5.134c.39-1.622 1.366-3.107 2.83-6.084-.087-.239-.186-.5-.297-.775-.406-1.018-.991-2.198-1.513-2.733a4.272 4.272 0 0 0-.947-.729M17.527 19.277c-.84-.105-1.533-.232-2.141-.446A7.625 7.625 0 0 1 4.376 12a7.6 7.6 0 0 1 2.6-5.73 5.582 5.582 0 0 0-1.324-.162c-2.236.02-4.597 1.258-5.58 4.602-.092.486-.07.854-.07 1.29 0 6.627 5.373 12 12 12 4.059 0 7.643-2.017 9.815-5.101-1.174.293-2.305.433-3.271.436-.362 0-.702-.02-1.019-.058M15.273 16.952c.074.036.242.097.475.163a6.354 6.354 0 0 0 2.6-5.115h-.002a6.354 6.354 0 0 0-6.345-6.345 6.338 6.338 0 0 0-1.992.324c1.289 1.468 1.908 3.566 2.507 5.862l.001.003c.001.002.192.637.518 1.48.326.842.789 1.885 1.293 2.645.332.51.697.876.945.983M12.001 0a11.98 11.98 0 0 0-9.752 5.013c1.134-.71 2.291-.967 3.301-.957 1.394.004 2.491.436 3.017.732.127.073.248.152.366.233A7.625 7.625 0 0 1 19.625 12a7.605 7.605 0 0 1-2.268 5.425c.344.038.709.063 1.084.061 1.328 0 2.766-.293 3.842-1.198.703-.592 1.291-1.458 1.617-2.757.065-.502.1-1.012.1-1.531 0-6.627-5.371-12-11.999-12" />
|
|
84
|
+
</svg>
|
|
85
|
+
) : (
|
|
86
|
+
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
|
|
87
|
+
<path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z" />
|
|
88
|
+
</svg>
|
|
89
|
+
)}
|
|
90
|
+
v{pkg.version}
|
|
61
91
|
</a>
|
|
62
92
|
)}
|
|
63
|
-
{
|
|
93
|
+
{pkg?.license && (
|
|
64
94
|
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60">
|
|
65
|
-
{
|
|
95
|
+
{pkg.license}
|
|
66
96
|
</span>
|
|
67
97
|
)}
|
|
68
98
|
{github && github.stars > 0 && (
|
|
@@ -78,15 +108,17 @@ const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
|
|
|
78
108
|
{github.stars.toLocaleString()}
|
|
79
109
|
</a>
|
|
80
110
|
)}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
111
|
+
{!isClojars && (
|
|
112
|
+
<a
|
|
113
|
+
href={`https://bundlephobia.com/package/${packageName}${pkg?.version ? `@${pkg.version}` : ""}`}
|
|
114
|
+
target="_blank"
|
|
115
|
+
rel="noopener noreferrer"
|
|
116
|
+
class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60 hover:bg-white/[0.06] transition-colors"
|
|
117
|
+
>
|
|
118
|
+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
119
|
+
<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
|
|
120
|
+
</svg>
|
|
121
|
+
bundlephobia
|
|
122
|
+
</a>
|
|
123
|
+
)}
|
|
92
124
|
</div>
|
|
@@ -176,6 +176,10 @@
|
|
|
176
176
|
return flat.slice(0, 10);
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
+
function ensureAbsolute(url: string): string {
|
|
180
|
+
return url.startsWith("/") ? url : `/${url}`;
|
|
181
|
+
}
|
|
182
|
+
|
|
179
183
|
function renderResults(items: PagefindResult[], query: string) {
|
|
180
184
|
const container = document.getElementById("search-results");
|
|
181
185
|
if (!container) return;
|
|
@@ -197,7 +201,7 @@
|
|
|
197
201
|
container.innerHTML = flat
|
|
198
202
|
.map(
|
|
199
203
|
(r) => `
|
|
200
|
-
<a href="${r.url}" style="display: block; border-radius: 0.5rem; padding: 0.625rem 0.75rem; transition: background-color 150ms; text-decoration: none;" onmouseenter="this.style.background='rgb(255 255 255 / 0.04)'" onmouseleave="this.style.background='transparent'" data-search-result>
|
|
204
|
+
<a href="${ensureAbsolute(r.url)}" style="display: block; border-radius: 0.5rem; padding: 0.625rem 0.75rem; transition: background-color 150ms; text-decoration: none;" onmouseenter="this.style.background='rgb(255 255 255 / 0.04)'" onmouseleave="this.style.background='transparent'" data-search-result>
|
|
201
205
|
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.125rem;">
|
|
202
206
|
<span style="font-size: 0.875rem; font-weight: 500; color: rgb(255 255 255 / 0.8);">${r.title}</span>
|
|
203
207
|
${r.section ? `<span style="font-size: 11px; color: rgb(255 255 255 / 0.35);">${r.section}</span>` : ""}
|