@luciodale/docs-ui-kit 0.3.33 → 0.3.35

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Navbar.astro +2 -0
  3. package/src/components/PackageInfo.astro +55 -23
  4. package/src/components/SearchModal.astro +1 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luciodale/docs-ui-kit",
3
- "version": "0.3.33",
3
+ "version": "0.3.35",
4
4
  "description": "Astro component library for documentation sites. Dark theme, orange accent.",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/Navbar.astro CHANGED
@@ -207,11 +207,13 @@ const { config, currentPath } = Astro.props;
207
207
  function open() {
208
208
  overlay?.classList.remove("hidden");
209
209
  menu?.classList.remove("translate-x-full");
210
+ document.body.style.overflow = "hidden";
210
211
  }
211
212
 
212
213
  function shut() {
213
214
  overlay?.classList.add("hidden");
214
215
  menu?.classList.add("translate-x-full");
216
+ document.body.style.overflow = "";
215
217
  }
216
218
 
217
219
  toggle?.addEventListener("click", open);
package/src/components/PackageInfo.astro 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 NpmData = { version: string; license: string };
10
+ type PackageData = { version: string; license: string };
10
11
  type GithubData = { stars: number };
11
12
 
12
- async function fetchNpm(): Promise<NpmData | null> {
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 [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
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
- {npm?.version && (
74
+ {pkg?.version && (
51
75
  <a
52
- href={`https://www.npmjs.com/package/${packageName}`}
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
- <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
58
- <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" />
59
- </svg>
60
- v{npm.version}
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
- {npm?.license && (
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
- {npm.license}
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
- <a
82
- href={`https://bundlephobia.com/package/${packageName}${npm?.version ? `@${npm.version}` : ""}`}
83
- target="_blank"
84
- rel="noopener noreferrer"
85
- 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"
86
- >
87
- <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
88
- <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" />
89
- </svg>
90
- bundlephobia
91
- </a>
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>
package/src/components/SearchModal.astro CHANGED
@@ -55,8 +55,7 @@
55
55
 
56
56
  .search-dialog-panel {
57
57
  width: 100%;
58
- max-width: 36rem;
59
- margin-inline: 1rem;
58
+ max-width: min(36rem, 100dvw - 2rem);
60
59
  border-radius: 0.75rem;
61
60
  border: 1px solid rgb(255 255 255 / 0.1);
62
61
  background: #0a0a0a;