boltdocs 1.3.1 → 1.3.3
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/CodeBlock-QYIKJMEB.mjs +7 -0
- package/dist/PackageManagerTabs-XW3AVXVX.mjs +99 -0
- package/dist/{SearchDialog-5EDRACEG.mjs → SearchDialog-FBNGKRPK.mjs} +2 -1
- package/dist/{SearchDialog-X57WPTNN.css → SearchDialog-O3V36MXA.css} +32 -27
- package/dist/{cache-EHR7SXRU.mjs → cache-GQHF6BXI.mjs} +1 -1
- package/dist/{chunk-GSYECEZY.mjs → chunk-CYBWLFOG.mjs} +5 -1
- package/dist/{chunk-NS7WHDYA.mjs → chunk-D7YBQG6H.mjs} +7 -20
- package/dist/chunk-FMTOYQLO.mjs +37 -0
- package/dist/chunk-KS5B3O6W.mjs +43 -0
- package/dist/{PackageManagerTabs-XEKI3L7P.mjs → chunk-S5G55FBI.mjs} +4 -105
- package/dist/client/index.css +32 -27
- package/dist/client/index.js +113 -88
- package/dist/client/index.mjs +73 -31
- package/dist/client/ssr.css +32 -27
- package/dist/client/ssr.js +44 -59
- package/dist/client/ssr.mjs +2 -1
- package/dist/node/index.js +15 -14
- package/dist/node/index.mjs +13 -16
- package/package.json +1 -1
- package/src/client/index.ts +1 -0
- package/src/client/theme/components/CodeBlock/CodeBlock.tsx +11 -36
- package/src/client/theme/components/PackageManagerTabs/PackageManagerTabs.tsx +12 -35
- package/src/client/theme/components/mdx/Tabs.tsx +36 -4
- package/src/client/theme/components/mdx/mdx-components.css +8 -0
- package/src/client/theme/icons/yarn.tsx +16 -0
- package/src/client/theme/styles/markdown.css +26 -29
- package/src/client/utils.ts +23 -0
- package/src/node/ssg/meta.ts +11 -12
- package/src/node/ssg/sitemap.ts +2 -1
- package/src/node/utils.ts +11 -0
- package/tsconfig.json +1 -1
- package/dist/CodeBlock-V3Z5EKGR.mjs +0 -6
- package/dist/chunk-2YRDWM6O.mjs +0 -56
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Bun,
|
|
3
|
+
Deno,
|
|
4
|
+
NPM,
|
|
5
|
+
Pnpm
|
|
6
|
+
} from "./chunk-S5G55FBI.mjs";
|
|
7
|
+
import {
|
|
8
|
+
copyToClipboard
|
|
9
|
+
} from "./chunk-FMTOYQLO.mjs";
|
|
10
|
+
|
|
11
|
+
// src/client/theme/components/PackageManagerTabs/PackageManagerTabs.tsx
|
|
12
|
+
import { useState, useCallback } from "react";
|
|
13
|
+
import { Copy, Check } from "lucide-react";
|
|
14
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
+
var MANAGERS = [
|
|
16
|
+
{ id: "npm", label: "npm", icon: NPM },
|
|
17
|
+
{ id: "pnpm", label: "pnpm", icon: Pnpm },
|
|
18
|
+
{ id: "bun", label: "bun", icon: Bun },
|
|
19
|
+
{ id: "deno", label: "deno", icon: Deno }
|
|
20
|
+
];
|
|
21
|
+
function getCommandForManager(manager, command, pkg) {
|
|
22
|
+
const isInstall = command === "install" || command === "add" || command === "i";
|
|
23
|
+
const isCreate = command === "create" || command === "init";
|
|
24
|
+
const isRun = command === "run" || command === "exec";
|
|
25
|
+
if (isInstall) {
|
|
26
|
+
const pkgArgs2 = pkg ? ` ${pkg}` : "";
|
|
27
|
+
if (manager === "npm") return `npm install${pkgArgs2}`;
|
|
28
|
+
if (manager === "pnpm") return pkg ? `pnpm add${pkgArgs2}` : `pnpm install`;
|
|
29
|
+
if (manager === "bun") return pkg ? `bun add${pkgArgs2}` : `bun install`;
|
|
30
|
+
if (manager === "deno")
|
|
31
|
+
return pkg ? `deno install npm:${pkg}` : `deno install`;
|
|
32
|
+
}
|
|
33
|
+
if (isCreate) {
|
|
34
|
+
const pkgArgs2 = pkg ? ` ${pkg}` : "";
|
|
35
|
+
if (manager === "npm") return `npm create${pkgArgs2}`;
|
|
36
|
+
if (manager === "pnpm") return `pnpm create${pkgArgs2}`;
|
|
37
|
+
if (manager === "bun") return `bun create${pkgArgs2}`;
|
|
38
|
+
if (manager === "deno") return `deno run -A npm:create-${pkg}`;
|
|
39
|
+
}
|
|
40
|
+
if (isRun) {
|
|
41
|
+
const pkgArgs2 = pkg ? ` ${pkg}` : "";
|
|
42
|
+
if (manager === "npm") return `npm run${pkgArgs2}`;
|
|
43
|
+
if (manager === "pnpm") return `pnpm run${pkgArgs2}`;
|
|
44
|
+
if (manager === "bun") return `bun run${pkgArgs2}`;
|
|
45
|
+
if (manager === "deno") return `deno task ${pkg}`;
|
|
46
|
+
}
|
|
47
|
+
const pkgArgs = pkg ? ` ${pkg}` : "";
|
|
48
|
+
return `${manager} ${command}${pkgArgs}`;
|
|
49
|
+
}
|
|
50
|
+
function PackageManagerTabs({
|
|
51
|
+
command,
|
|
52
|
+
pkg = "",
|
|
53
|
+
className = ""
|
|
54
|
+
}) {
|
|
55
|
+
const [activeTab, setActiveTab] = useState("npm");
|
|
56
|
+
const [copied, setCopied] = useState(false);
|
|
57
|
+
const activeCommand = getCommandForManager(activeTab, command, pkg);
|
|
58
|
+
const handleCopy = useCallback(async () => {
|
|
59
|
+
copyToClipboard(activeCommand);
|
|
60
|
+
setCopied(true);
|
|
61
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
62
|
+
}, [activeCommand]);
|
|
63
|
+
return /* @__PURE__ */ jsxs("div", { className: `pkg-tabs-wrapper ${className}`, children: [
|
|
64
|
+
/* @__PURE__ */ jsx("div", { className: "pkg-tabs-header", children: MANAGERS.map((mgr) => {
|
|
65
|
+
const Icon = mgr.icon;
|
|
66
|
+
const isActive = activeTab === mgr.id;
|
|
67
|
+
return /* @__PURE__ */ jsxs(
|
|
68
|
+
"button",
|
|
69
|
+
{
|
|
70
|
+
className: `pkg-tab-btn ${isActive ? "active" : ""}`,
|
|
71
|
+
onClick: () => setActiveTab(mgr.id),
|
|
72
|
+
"aria-selected": isActive,
|
|
73
|
+
role: "tab",
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ jsx(Icon, { className: "pkg-tab-icon", width: "16", height: "16" }),
|
|
76
|
+
/* @__PURE__ */ jsx("span", { children: mgr.label })
|
|
77
|
+
]
|
|
78
|
+
},
|
|
79
|
+
mgr.id
|
|
80
|
+
);
|
|
81
|
+
}) }),
|
|
82
|
+
/* @__PURE__ */ jsxs("div", { className: "code-block-wrapper pkg-tabs-content", children: [
|
|
83
|
+
/* @__PURE__ */ jsx(
|
|
84
|
+
"button",
|
|
85
|
+
{
|
|
86
|
+
className: `code-block-copy ${copied ? "copied" : ""}`,
|
|
87
|
+
onClick: handleCopy,
|
|
88
|
+
type: "button",
|
|
89
|
+
"aria-label": "Copy code",
|
|
90
|
+
children: copied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
/* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx("span", { className: "line", children: activeCommand }) }) })
|
|
94
|
+
] })
|
|
95
|
+
] });
|
|
96
|
+
}
|
|
97
|
+
export {
|
|
98
|
+
PackageManagerTabs
|
|
99
|
+
};
|
|
@@ -1061,49 +1061,47 @@ a {
|
|
|
1061
1061
|
overflow: hidden;
|
|
1062
1062
|
border: 1px solid var(--ld-border-subtle);
|
|
1063
1063
|
background-color: var(--ld-code-bg);
|
|
1064
|
-
|
|
1065
|
-
.code-block-header {
|
|
1066
|
-
display: flex;
|
|
1067
|
-
align-items: center;
|
|
1068
|
-
justify-content: space-between;
|
|
1069
|
-
padding: 0.5rem 1.25rem;
|
|
1070
|
-
background-color: var(--ld-code-header);
|
|
1071
|
-
border-bottom: 1px solid var(--ld-border-subtle);
|
|
1072
|
-
font-size: 0.75rem;
|
|
1073
|
-
}
|
|
1074
|
-
.code-block-lang {
|
|
1075
|
-
color: var(--ld-text-dim);
|
|
1076
|
-
font-family: var(--ld-font-mono);
|
|
1077
|
-
font-weight: 500;
|
|
1078
|
-
text-transform: uppercase;
|
|
1079
|
-
letter-spacing: 0.05em;
|
|
1064
|
+
position: relative;
|
|
1080
1065
|
}
|
|
1081
1066
|
.code-block-copy {
|
|
1082
1067
|
display: flex;
|
|
1083
1068
|
align-items: center;
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1069
|
+
justify-content: center;
|
|
1070
|
+
position: absolute;
|
|
1071
|
+
top: 0.75rem;
|
|
1072
|
+
right: 0.75rem;
|
|
1073
|
+
z-index: 50;
|
|
1074
|
+
padding: 0.4rem;
|
|
1075
|
+
background-color: rgba(20, 20, 30, 0.8);
|
|
1076
|
+
backdrop-filter: blur(8px);
|
|
1077
|
+
-webkit-backdrop-filter: blur(8px);
|
|
1087
1078
|
border: 1px solid var(--ld-border-subtle);
|
|
1088
|
-
border-radius:
|
|
1079
|
+
border-radius: 6px;
|
|
1089
1080
|
color: var(--ld-text-dim);
|
|
1090
|
-
font-family: var(--ld-font-sans);
|
|
1091
|
-
font-size: 0.6875rem;
|
|
1092
1081
|
cursor: pointer;
|
|
1093
|
-
transition: all 0.2s;
|
|
1082
|
+
transition: all 0.2s ease;
|
|
1083
|
+
opacity: 0;
|
|
1084
|
+
visibility: hidden;
|
|
1085
|
+
pointer-events: none;
|
|
1086
|
+
}
|
|
1087
|
+
.code-block-wrapper:hover .code-block-copy {
|
|
1088
|
+
opacity: 1;
|
|
1089
|
+
visibility: visible;
|
|
1090
|
+
pointer-events: auto;
|
|
1094
1091
|
}
|
|
1095
1092
|
.code-block-copy:hover {
|
|
1096
1093
|
color: var(--ld-text-main);
|
|
1097
1094
|
border-color: var(--ld-border-strong);
|
|
1098
|
-
background-color: rgba(255, 255, 255, 0.
|
|
1095
|
+
background-color: rgba(255, 255, 255, 0.08);
|
|
1099
1096
|
}
|
|
1100
1097
|
.code-block-copy.copied {
|
|
1101
1098
|
color: #22c55e;
|
|
1102
|
-
border-color: rgba(34, 197, 94, 0.
|
|
1099
|
+
border-color: rgba(34, 197, 94, 0.4);
|
|
1100
|
+
opacity: 1;
|
|
1103
1101
|
}
|
|
1104
1102
|
.code-block-copy svg {
|
|
1105
|
-
width:
|
|
1106
|
-
height:
|
|
1103
|
+
width: 16px;
|
|
1104
|
+
height: 16px;
|
|
1107
1105
|
}
|
|
1108
1106
|
.code-block-wrapper pre {
|
|
1109
1107
|
margin: 0 !important;
|
|
@@ -1446,6 +1444,9 @@ a {
|
|
|
1446
1444
|
}
|
|
1447
1445
|
.ld-tabs__trigger {
|
|
1448
1446
|
position: relative;
|
|
1447
|
+
display: flex;
|
|
1448
|
+
align-items: center;
|
|
1449
|
+
gap: 0.5rem;
|
|
1449
1450
|
padding: 0.65rem 1.25rem;
|
|
1450
1451
|
background: none;
|
|
1451
1452
|
border: none;
|
|
@@ -1458,6 +1459,10 @@ a {
|
|
|
1458
1459
|
transition: all 0.2s ease;
|
|
1459
1460
|
white-space: nowrap;
|
|
1460
1461
|
}
|
|
1462
|
+
.ld-tabs__trigger svg {
|
|
1463
|
+
width: 1rem;
|
|
1464
|
+
height: 1rem;
|
|
1465
|
+
}
|
|
1461
1466
|
.ld-tabs__trigger:hover {
|
|
1462
1467
|
color: var(--ld-text-main);
|
|
1463
1468
|
background-color: rgba(255, 255, 255, 0.03);
|
|
@@ -34,7 +34,10 @@ function parseFrontmatter(filePath) {
|
|
|
34
34
|
return { data, content };
|
|
35
35
|
}
|
|
36
36
|
function escapeHtml(str) {
|
|
37
|
-
return str.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
|
|
37
|
+
return str.replace(/&/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">");
|
|
38
|
+
}
|
|
39
|
+
function escapeXml(str) {
|
|
40
|
+
return escapeHtml(str);
|
|
38
41
|
}
|
|
39
42
|
function fileToRoutePath(relativePath) {
|
|
40
43
|
let cleanedPath = relativePath.split("/").map(stripNumberPrefix).join("/");
|
|
@@ -372,6 +375,7 @@ export {
|
|
|
372
375
|
isDocFile,
|
|
373
376
|
parseFrontmatter,
|
|
374
377
|
escapeHtml,
|
|
378
|
+
escapeXml,
|
|
375
379
|
fileToRoutePath,
|
|
376
380
|
capitalize,
|
|
377
381
|
FileCache,
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getStarsRepo
|
|
3
|
+
} from "./chunk-FMTOYQLO.mjs";
|
|
4
|
+
|
|
1
5
|
// src/client/theme/ui/Navbar/Navbar.tsx
|
|
2
6
|
import React9 from "react";
|
|
3
7
|
|
|
@@ -79,23 +83,6 @@ var GitHub = (props) => /* @__PURE__ */ jsx2("svg", { ...props, viewBox: "0 0 10
|
|
|
79
83
|
}
|
|
80
84
|
) });
|
|
81
85
|
|
|
82
|
-
// src/client/utils.ts
|
|
83
|
-
async function getStarsRepo(repo) {
|
|
84
|
-
const response = await fetch(`https://api.github.com/repos/${repo}`);
|
|
85
|
-
const data = await response.json();
|
|
86
|
-
if (data.stargazers_count !== void 0) {
|
|
87
|
-
return formatStars(data.stargazers_count);
|
|
88
|
-
} else {
|
|
89
|
-
return "0";
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
var formatStars = (count) => {
|
|
93
|
-
return Intl.NumberFormat("en", {
|
|
94
|
-
notation: "compact",
|
|
95
|
-
compactDisplay: "short"
|
|
96
|
-
}).format(count);
|
|
97
|
-
};
|
|
98
|
-
|
|
99
86
|
// src/client/theme/ui/Navbar/GithubStars.tsx
|
|
100
87
|
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
101
88
|
function GithubStars({ repo }) {
|
|
@@ -699,7 +686,7 @@ function useConfig() {
|
|
|
699
686
|
return useContext2(ConfigContext);
|
|
700
687
|
}
|
|
701
688
|
var CodeBlock = lazy(
|
|
702
|
-
() => import("./CodeBlock-
|
|
689
|
+
() => import("./CodeBlock-QYIKJMEB.mjs").then((m) => ({
|
|
703
690
|
default: m.CodeBlock
|
|
704
691
|
}))
|
|
705
692
|
);
|
|
@@ -707,7 +694,7 @@ var Video = lazy(
|
|
|
707
694
|
() => import("./Video-KNTY5BNO.mjs").then((m) => ({ default: m.Video }))
|
|
708
695
|
);
|
|
709
696
|
var PackageManagerTabs = lazy(
|
|
710
|
-
() => import("./PackageManagerTabs-
|
|
697
|
+
() => import("./PackageManagerTabs-XW3AVXVX.mjs").then((m) => ({
|
|
711
698
|
default: m.PackageManagerTabs
|
|
712
699
|
}))
|
|
713
700
|
);
|
|
@@ -1346,7 +1333,7 @@ var XformerlyTwitter = (props) => /* @__PURE__ */ jsx18("svg", { ...props, fill:
|
|
|
1346
1333
|
// src/client/theme/ui/Navbar/Navbar.tsx
|
|
1347
1334
|
import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1348
1335
|
var SearchDialog = React9.lazy(
|
|
1349
|
-
() => import("./SearchDialog-
|
|
1336
|
+
() => import("./SearchDialog-FBNGKRPK.mjs").then((m) => ({ default: m.SearchDialog }))
|
|
1350
1337
|
);
|
|
1351
1338
|
var ICON_MAP = {
|
|
1352
1339
|
discord: Discord,
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
// src/client/utils.ts
|
|
2
|
+
async function getStarsRepo(repo) {
|
|
3
|
+
const response = await fetch(`https://api.github.com/repos/${repo}`);
|
|
4
|
+
const data = await response.json();
|
|
5
|
+
if (data.stargazers_count !== void 0) {
|
|
6
|
+
return formatStars(data.stargazers_count);
|
|
7
|
+
} else {
|
|
8
|
+
return "0";
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
var formatStars = (count) => {
|
|
12
|
+
return Intl.NumberFormat("en", {
|
|
13
|
+
notation: "compact",
|
|
14
|
+
compactDisplay: "short"
|
|
15
|
+
}).format(count);
|
|
16
|
+
};
|
|
17
|
+
var copyToClipboard = async (text) => {
|
|
18
|
+
try {
|
|
19
|
+
await navigator.clipboard.writeText(text);
|
|
20
|
+
return true;
|
|
21
|
+
} catch {
|
|
22
|
+
const textarea = document.createElement("textarea");
|
|
23
|
+
textarea.value = text;
|
|
24
|
+
textarea.style.position = "fixed";
|
|
25
|
+
textarea.style.opacity = "0";
|
|
26
|
+
document.body.appendChild(textarea);
|
|
27
|
+
textarea.select();
|
|
28
|
+
document.execCommand("copy");
|
|
29
|
+
document.body.removeChild(textarea);
|
|
30
|
+
return true;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export {
|
|
35
|
+
getStarsRepo,
|
|
36
|
+
copyToClipboard
|
|
37
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import {
|
|
2
|
+
copyToClipboard
|
|
3
|
+
} from "./chunk-FMTOYQLO.mjs";
|
|
4
|
+
|
|
5
|
+
// src/client/theme/components/CodeBlock/CodeBlock.tsx
|
|
6
|
+
import React, { useState, useRef, useCallback } from "react";
|
|
7
|
+
import { Copy, Check } from "lucide-react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
function CodeBlock({ children, ...props }) {
|
|
10
|
+
const [copied, setCopied] = useState(false);
|
|
11
|
+
const preRef = useRef(null);
|
|
12
|
+
let language = "";
|
|
13
|
+
if (React.isValidElement(children)) {
|
|
14
|
+
const childProps = children.props;
|
|
15
|
+
language = childProps?.["data-language"] || "";
|
|
16
|
+
if (!language && childProps?.className) {
|
|
17
|
+
const match = childProps.className.match(/language-(\w+)/);
|
|
18
|
+
if (match) language = match[1];
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
const handleCopy = useCallback(async () => {
|
|
22
|
+
const code = preRef.current?.textContent || "";
|
|
23
|
+
copyToClipboard(code);
|
|
24
|
+
setCopied(true);
|
|
25
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
26
|
+
}, []);
|
|
27
|
+
return /* @__PURE__ */ jsxs("div", { className: "code-block-wrapper", children: [
|
|
28
|
+
/* @__PURE__ */ jsx(
|
|
29
|
+
"button",
|
|
30
|
+
{
|
|
31
|
+
className: `code-block-copy ${copied ? "copied" : ""}`,
|
|
32
|
+
onClick: handleCopy,
|
|
33
|
+
"aria-label": "Copy code",
|
|
34
|
+
children: copied ? /* @__PURE__ */ jsx(Check, { size: 16 }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
|
|
35
|
+
}
|
|
36
|
+
),
|
|
37
|
+
/* @__PURE__ */ jsx("pre", { ref: preRef, ...props, children })
|
|
38
|
+
] });
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export {
|
|
42
|
+
CodeBlock
|
|
43
|
+
};
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
// src/client/theme/components/PackageManagerTabs/PackageManagerTabs.tsx
|
|
2
|
-
import { useState, useCallback } from "react";
|
|
3
|
-
import { Copy, Check } from "lucide-react";
|
|
4
|
-
|
|
5
1
|
// src/client/theme/icons/npm.tsx
|
|
6
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
3
|
var NPM = (props) => /* @__PURE__ */ jsxs("svg", { ...props, viewBox: "0 0 2500 2500", children: [
|
|
@@ -207,106 +203,9 @@ var Deno = (props) => /* @__PURE__ */ jsx4(
|
|
|
207
203
|
}
|
|
208
204
|
);
|
|
209
205
|
|
|
210
|
-
// src/client/theme/components/PackageManagerTabs/PackageManagerTabs.tsx
|
|
211
|
-
import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
212
|
-
var MANAGERS = [
|
|
213
|
-
{ id: "npm", label: "npm", icon: NPM },
|
|
214
|
-
{ id: "pnpm", label: "pnpm", icon: Pnpm },
|
|
215
|
-
{ id: "bun", label: "bun", icon: Bun },
|
|
216
|
-
{ id: "deno", label: "deno", icon: Deno }
|
|
217
|
-
];
|
|
218
|
-
function getCommandForManager(manager, command, pkg) {
|
|
219
|
-
const isInstall = command === "install" || command === "add" || command === "i";
|
|
220
|
-
const isCreate = command === "create" || command === "init";
|
|
221
|
-
const isRun = command === "run" || command === "exec";
|
|
222
|
-
if (isInstall) {
|
|
223
|
-
const pkgArgs2 = pkg ? ` ${pkg}` : "";
|
|
224
|
-
if (manager === "npm") return `npm install${pkgArgs2}`;
|
|
225
|
-
if (manager === "pnpm") return pkg ? `pnpm add${pkgArgs2}` : `pnpm install`;
|
|
226
|
-
if (manager === "bun") return pkg ? `bun add${pkgArgs2}` : `bun install`;
|
|
227
|
-
if (manager === "deno")
|
|
228
|
-
return pkg ? `deno install npm:${pkg}` : `deno install`;
|
|
229
|
-
}
|
|
230
|
-
if (isCreate) {
|
|
231
|
-
const pkgArgs2 = pkg ? ` ${pkg}` : "";
|
|
232
|
-
if (manager === "npm") return `npm create${pkgArgs2}`;
|
|
233
|
-
if (manager === "pnpm") return `pnpm create${pkgArgs2}`;
|
|
234
|
-
if (manager === "bun") return `bun create${pkgArgs2}`;
|
|
235
|
-
if (manager === "deno") return `deno run -A npm:create-${pkg}`;
|
|
236
|
-
}
|
|
237
|
-
if (isRun) {
|
|
238
|
-
const pkgArgs2 = pkg ? ` ${pkg}` : "";
|
|
239
|
-
if (manager === "npm") return `npm run${pkgArgs2}`;
|
|
240
|
-
if (manager === "pnpm") return `pnpm run${pkgArgs2}`;
|
|
241
|
-
if (manager === "bun") return `bun run${pkgArgs2}`;
|
|
242
|
-
if (manager === "deno") return `deno task ${pkg}`;
|
|
243
|
-
}
|
|
244
|
-
const pkgArgs = pkg ? ` ${pkg}` : "";
|
|
245
|
-
return `${manager} ${command}${pkgArgs}`;
|
|
246
|
-
}
|
|
247
|
-
function PackageManagerTabs({
|
|
248
|
-
command,
|
|
249
|
-
pkg = "",
|
|
250
|
-
className = ""
|
|
251
|
-
}) {
|
|
252
|
-
const [activeTab, setActiveTab] = useState("npm");
|
|
253
|
-
const [copied, setCopied] = useState(false);
|
|
254
|
-
const activeCommand = getCommandForManager(activeTab, command, pkg);
|
|
255
|
-
const handleCopy = useCallback(async () => {
|
|
256
|
-
try {
|
|
257
|
-
await navigator.clipboard.writeText(activeCommand);
|
|
258
|
-
setCopied(true);
|
|
259
|
-
setTimeout(() => setCopied(false), 2e3);
|
|
260
|
-
} catch {
|
|
261
|
-
const textarea = document.createElement("textarea");
|
|
262
|
-
textarea.value = activeCommand;
|
|
263
|
-
textarea.style.position = "fixed";
|
|
264
|
-
textarea.style.opacity = "0";
|
|
265
|
-
document.body.appendChild(textarea);
|
|
266
|
-
textarea.select();
|
|
267
|
-
document.execCommand("copy");
|
|
268
|
-
document.body.removeChild(textarea);
|
|
269
|
-
setCopied(true);
|
|
270
|
-
setTimeout(() => setCopied(false), 2e3);
|
|
271
|
-
}
|
|
272
|
-
}, [activeCommand]);
|
|
273
|
-
return /* @__PURE__ */ jsxs4("div", { className: `pkg-tabs-wrapper ${className}`, children: [
|
|
274
|
-
/* @__PURE__ */ jsx5("div", { className: "pkg-tabs-header", children: MANAGERS.map((mgr) => {
|
|
275
|
-
const Icon = mgr.icon;
|
|
276
|
-
const isActive = activeTab === mgr.id;
|
|
277
|
-
return /* @__PURE__ */ jsxs4(
|
|
278
|
-
"button",
|
|
279
|
-
{
|
|
280
|
-
className: `pkg-tab-btn ${isActive ? "active" : ""}`,
|
|
281
|
-
onClick: () => setActiveTab(mgr.id),
|
|
282
|
-
"aria-selected": isActive,
|
|
283
|
-
role: "tab",
|
|
284
|
-
children: [
|
|
285
|
-
/* @__PURE__ */ jsx5(Icon, { className: "pkg-tab-icon", width: "16", height: "16" }),
|
|
286
|
-
/* @__PURE__ */ jsx5("span", { children: mgr.label })
|
|
287
|
-
]
|
|
288
|
-
},
|
|
289
|
-
mgr.id
|
|
290
|
-
);
|
|
291
|
-
}) }),
|
|
292
|
-
/* @__PURE__ */ jsxs4("div", { className: "code-block-wrapper pkg-tabs-content", children: [
|
|
293
|
-
/* @__PURE__ */ jsxs4("div", { className: "code-block-header", children: [
|
|
294
|
-
/* @__PURE__ */ jsx5("span", { className: "code-block-lang", children: "bash" }),
|
|
295
|
-
/* @__PURE__ */ jsx5(
|
|
296
|
-
"button",
|
|
297
|
-
{
|
|
298
|
-
className: `code-block-copy ${copied ? "copied" : ""}`,
|
|
299
|
-
onClick: handleCopy,
|
|
300
|
-
type: "button",
|
|
301
|
-
"aria-label": "Copy code",
|
|
302
|
-
children: copied ? /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(Check, { size: 12 }) }) : /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(Copy, { size: 12 }) })
|
|
303
|
-
}
|
|
304
|
-
)
|
|
305
|
-
] }),
|
|
306
|
-
/* @__PURE__ */ jsx5("pre", { children: /* @__PURE__ */ jsx5("code", { children: /* @__PURE__ */ jsx5("span", { className: "line", children: activeCommand }) }) })
|
|
307
|
-
] })
|
|
308
|
-
] });
|
|
309
|
-
}
|
|
310
206
|
export {
|
|
311
|
-
|
|
207
|
+
NPM,
|
|
208
|
+
Pnpm,
|
|
209
|
+
Bun,
|
|
210
|
+
Deno
|
|
312
211
|
};
|
package/dist/client/index.css
CHANGED
|
@@ -1061,49 +1061,47 @@ a {
|
|
|
1061
1061
|
overflow: hidden;
|
|
1062
1062
|
border: 1px solid var(--ld-border-subtle);
|
|
1063
1063
|
background-color: var(--ld-code-bg);
|
|
1064
|
-
|
|
1065
|
-
.code-block-header {
|
|
1066
|
-
display: flex;
|
|
1067
|
-
align-items: center;
|
|
1068
|
-
justify-content: space-between;
|
|
1069
|
-
padding: 0.5rem 1.25rem;
|
|
1070
|
-
background-color: var(--ld-code-header);
|
|
1071
|
-
border-bottom: 1px solid var(--ld-border-subtle);
|
|
1072
|
-
font-size: 0.75rem;
|
|
1073
|
-
}
|
|
1074
|
-
.code-block-lang {
|
|
1075
|
-
color: var(--ld-text-dim);
|
|
1076
|
-
font-family: var(--ld-font-mono);
|
|
1077
|
-
font-weight: 500;
|
|
1078
|
-
text-transform: uppercase;
|
|
1079
|
-
letter-spacing: 0.05em;
|
|
1064
|
+
position: relative;
|
|
1080
1065
|
}
|
|
1081
1066
|
.code-block-copy {
|
|
1082
1067
|
display: flex;
|
|
1083
1068
|
align-items: center;
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1069
|
+
justify-content: center;
|
|
1070
|
+
position: absolute;
|
|
1071
|
+
top: 0.75rem;
|
|
1072
|
+
right: 0.75rem;
|
|
1073
|
+
z-index: 50;
|
|
1074
|
+
padding: 0.4rem;
|
|
1075
|
+
background-color: rgba(20, 20, 30, 0.8);
|
|
1076
|
+
backdrop-filter: blur(8px);
|
|
1077
|
+
-webkit-backdrop-filter: blur(8px);
|
|
1087
1078
|
border: 1px solid var(--ld-border-subtle);
|
|
1088
|
-
border-radius:
|
|
1079
|
+
border-radius: 6px;
|
|
1089
1080
|
color: var(--ld-text-dim);
|
|
1090
|
-
font-family: var(--ld-font-sans);
|
|
1091
|
-
font-size: 0.6875rem;
|
|
1092
1081
|
cursor: pointer;
|
|
1093
|
-
transition: all 0.2s;
|
|
1082
|
+
transition: all 0.2s ease;
|
|
1083
|
+
opacity: 0;
|
|
1084
|
+
visibility: hidden;
|
|
1085
|
+
pointer-events: none;
|
|
1086
|
+
}
|
|
1087
|
+
.code-block-wrapper:hover .code-block-copy {
|
|
1088
|
+
opacity: 1;
|
|
1089
|
+
visibility: visible;
|
|
1090
|
+
pointer-events: auto;
|
|
1094
1091
|
}
|
|
1095
1092
|
.code-block-copy:hover {
|
|
1096
1093
|
color: var(--ld-text-main);
|
|
1097
1094
|
border-color: var(--ld-border-strong);
|
|
1098
|
-
background-color: rgba(255, 255, 255, 0.
|
|
1095
|
+
background-color: rgba(255, 255, 255, 0.08);
|
|
1099
1096
|
}
|
|
1100
1097
|
.code-block-copy.copied {
|
|
1101
1098
|
color: #22c55e;
|
|
1102
|
-
border-color: rgba(34, 197, 94, 0.
|
|
1099
|
+
border-color: rgba(34, 197, 94, 0.4);
|
|
1100
|
+
opacity: 1;
|
|
1103
1101
|
}
|
|
1104
1102
|
.code-block-copy svg {
|
|
1105
|
-
width:
|
|
1106
|
-
height:
|
|
1103
|
+
width: 16px;
|
|
1104
|
+
height: 16px;
|
|
1107
1105
|
}
|
|
1108
1106
|
.code-block-wrapper pre {
|
|
1109
1107
|
margin: 0 !important;
|
|
@@ -1446,6 +1444,9 @@ a {
|
|
|
1446
1444
|
}
|
|
1447
1445
|
.ld-tabs__trigger {
|
|
1448
1446
|
position: relative;
|
|
1447
|
+
display: flex;
|
|
1448
|
+
align-items: center;
|
|
1449
|
+
gap: 0.5rem;
|
|
1449
1450
|
padding: 0.65rem 1.25rem;
|
|
1450
1451
|
background: none;
|
|
1451
1452
|
border: none;
|
|
@@ -1458,6 +1459,10 @@ a {
|
|
|
1458
1459
|
transition: all 0.2s ease;
|
|
1459
1460
|
white-space: nowrap;
|
|
1460
1461
|
}
|
|
1462
|
+
.ld-tabs__trigger svg {
|
|
1463
|
+
width: 1rem;
|
|
1464
|
+
height: 1rem;
|
|
1465
|
+
}
|
|
1461
1466
|
.ld-tabs__trigger:hover {
|
|
1462
1467
|
color: var(--ld-text-main);
|
|
1463
1468
|
background-color: rgba(255, 255, 255, 0.03);
|