@tenphi/starlight 0.10.2 → 0.11.0
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/client/code-copy.d.ts +1 -0
- package/dist/client/code-copy.js +57 -0
- package/dist/client/code-copy.js.map +1 -0
- package/dist/components/GlobalStyles.js +265 -83
- package/dist/components/LayoutComponents.js +6 -2
- package/dist/components/LayoutComponents.test.ts +8 -0
- package/dist/components/tasty-states.js +1 -0
- package/dist/icons/check.svg +1 -0
- package/dist/icons/favicon.svg +11 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +329 -6
- package/dist/index.js.map +1 -1
- package/dist/markdown/rendered-content.d.ts +6 -0
- package/dist/markdown/rendered-content.d.ts.map +1 -0
- package/dist/markdown/rendered-content.js +33 -0
- package/dist/markdown/rendered-content.js.map +1 -0
- package/dist/overrides/Header.astro +2 -0
- package/dist/overrides/MarkdownContent.astro +7 -0
- package/dist/routes/DocsPage.astro +9 -0
- package/package.json +4 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
//#region src/client/code-copy.ts
|
|
2
|
+
var CookbookCodeBlock = class extends HTMLElement {
|
|
3
|
+
#resetTimer;
|
|
4
|
+
connectedCallback() {
|
|
5
|
+
this.addEventListener("click", this.#copy);
|
|
6
|
+
}
|
|
7
|
+
disconnectedCallback() {
|
|
8
|
+
this.removeEventListener("click", this.#copy);
|
|
9
|
+
if (this.#resetTimer !== void 0) window.clearTimeout(this.#resetTimer);
|
|
10
|
+
}
|
|
11
|
+
#copy = async (event) => {
|
|
12
|
+
const target = event.target;
|
|
13
|
+
const button = target instanceof Element ? target.closest("[data-copy-code]") : void 0;
|
|
14
|
+
const code = this.querySelector("pre code");
|
|
15
|
+
if (!button || !this.contains(button) || !code) return;
|
|
16
|
+
try {
|
|
17
|
+
await writeClipboard(code);
|
|
18
|
+
} catch {
|
|
19
|
+
button.dataset.copyState = "error";
|
|
20
|
+
button.setAttribute("aria-label", "Could not copy code");
|
|
21
|
+
button.title = "Could not copy code";
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
button.dataset.copyState = "copied";
|
|
25
|
+
button.setAttribute("aria-label", "Code copied");
|
|
26
|
+
button.title = "Code copied";
|
|
27
|
+
if (this.#resetTimer !== void 0) window.clearTimeout(this.#resetTimer);
|
|
28
|
+
this.#resetTimer = window.setTimeout(() => {
|
|
29
|
+
delete button.dataset.copyState;
|
|
30
|
+
button.setAttribute("aria-label", "Copy code");
|
|
31
|
+
button.title = "Copy code";
|
|
32
|
+
this.#resetTimer = void 0;
|
|
33
|
+
}, 2e3);
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
async function writeClipboard(code) {
|
|
37
|
+
const value = code.textContent ?? "";
|
|
38
|
+
if (navigator.clipboard?.writeText) {
|
|
39
|
+
await navigator.clipboard.writeText(value);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
const selection = window.getSelection();
|
|
43
|
+
const previousRanges = selection ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index)) : [];
|
|
44
|
+
const range = document.createRange();
|
|
45
|
+
range.selectNodeContents(code);
|
|
46
|
+
selection?.removeAllRanges();
|
|
47
|
+
selection?.addRange(range);
|
|
48
|
+
const copied = document.execCommand("copy");
|
|
49
|
+
selection?.removeAllRanges();
|
|
50
|
+
for (const previousRange of previousRanges) selection?.addRange(previousRange);
|
|
51
|
+
if (!copied) throw new Error("Clipboard unavailable");
|
|
52
|
+
}
|
|
53
|
+
if (!customElements.get("cookbook-code-block")) customElements.define("cookbook-code-block", CookbookCodeBlock);
|
|
54
|
+
//#endregion
|
|
55
|
+
export {};
|
|
56
|
+
|
|
57
|
+
//# sourceMappingURL=code-copy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-copy.js","names":[],"sources":["../../src/client/code-copy.ts"],"sourcesContent":["export {};\n\nclass CookbookCodeBlock extends HTMLElement {\n #resetTimer: number | undefined;\n\n connectedCallback() {\n this.addEventListener(\"click\", this.#copy);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this.#copy);\n if (this.#resetTimer !== undefined) {\n window.clearTimeout(this.#resetTimer);\n }\n }\n\n #copy = async (event: MouseEvent) => {\n const target = event.target;\n const button =\n target instanceof Element\n ? target.closest<HTMLButtonElement>(\"[data-copy-code]\")\n : undefined;\n const code = this.querySelector<HTMLElement>(\"pre code\");\n if (!button || !this.contains(button) || !code) return;\n\n try {\n await writeClipboard(code);\n } catch {\n button.dataset.copyState = \"error\";\n button.setAttribute(\"aria-label\", \"Could not copy code\");\n button.title = \"Could not copy code\";\n return;\n }\n\n button.dataset.copyState = \"copied\";\n button.setAttribute(\"aria-label\", \"Code copied\");\n button.title = \"Code copied\";\n\n if (this.#resetTimer !== undefined) {\n window.clearTimeout(this.#resetTimer);\n }\n this.#resetTimer = window.setTimeout(() => {\n delete button.dataset.copyState;\n button.setAttribute(\"aria-label\", \"Copy code\");\n button.title = \"Copy code\";\n this.#resetTimer = undefined;\n }, 2_000);\n };\n}\n\nasync function writeClipboard(code: HTMLElement): Promise<void> {\n const value = code.textContent ?? \"\";\n if (navigator.clipboard?.writeText) {\n await navigator.clipboard.writeText(value);\n return;\n }\n\n const selection = window.getSelection();\n const previousRanges = selection\n ? Array.from({ length: selection.rangeCount }, (_, index) =>\n selection.getRangeAt(index),\n )\n : [];\n const range = document.createRange();\n range.selectNodeContents(code);\n selection?.removeAllRanges();\n selection?.addRange(range);\n const copied = document.execCommand(\"copy\");\n selection?.removeAllRanges();\n for (const previousRange of previousRanges)\n selection?.addRange(previousRange);\n if (!copied) throw new Error(\"Clipboard unavailable\");\n}\n\nif (!customElements.get(\"cookbook-code-block\")) {\n customElements.define(\"cookbook-code-block\", CookbookCodeBlock);\n}\n"],"mappings":";AAEA,IAAM,oBAAN,cAAgC,YAAY;CAC1C;CAEA,oBAAoB;EAClB,KAAK,iBAAiB,SAAS,KAAK,KAAK;CAC3C;CAEA,uBAAuB;EACrB,KAAK,oBAAoB,SAAS,KAAK,KAAK;EAC5C,IAAI,KAAK,gBAAgB,KAAA,GACvB,OAAO,aAAa,KAAK,WAAW;CAExC;CAEA,QAAQ,OAAO,UAAsB;EACnC,MAAM,SAAS,MAAM;EACrB,MAAM,SACJ,kBAAkB,UACd,OAAO,QAA2B,kBAAkB,IACpD,KAAA;EACN,MAAM,OAAO,KAAK,cAA2B,UAAU;EACvD,IAAI,CAAC,UAAU,CAAC,KAAK,SAAS,MAAM,KAAK,CAAC,MAAM;EAEhD,IAAI;GACF,MAAM,eAAe,IAAI;EAC3B,QAAQ;GACN,OAAO,QAAQ,YAAY;GAC3B,OAAO,aAAa,cAAc,qBAAqB;GACvD,OAAO,QAAQ;GACf;EACF;EAEA,OAAO,QAAQ,YAAY;EAC3B,OAAO,aAAa,cAAc,aAAa;EAC/C,OAAO,QAAQ;EAEf,IAAI,KAAK,gBAAgB,KAAA,GACvB,OAAO,aAAa,KAAK,WAAW;EAEtC,KAAK,cAAc,OAAO,iBAAiB;GACzC,OAAO,OAAO,QAAQ;GACtB,OAAO,aAAa,cAAc,WAAW;GAC7C,OAAO,QAAQ;GACf,KAAK,cAAc,KAAA;EACrB,GAAG,GAAK;CACV;AACF;AAEA,eAAe,eAAe,MAAkC;CAC9D,MAAM,QAAQ,KAAK,eAAe;CAClC,IAAI,UAAU,WAAW,WAAW;EAClC,MAAM,UAAU,UAAU,UAAU,KAAK;EACzC;CACF;CAEA,MAAM,YAAY,OAAO,aAAa;CACtC,MAAM,iBAAiB,YACnB,MAAM,KAAK,EAAE,QAAQ,UAAU,WAAW,IAAI,GAAG,UAC/C,UAAU,WAAW,KAAK,CAC5B,IACA,CAAC;CACL,MAAM,QAAQ,SAAS,YAAY;CACnC,MAAM,mBAAmB,IAAI;CAC7B,WAAW,gBAAgB;CAC3B,WAAW,SAAS,KAAK;CACzB,MAAM,SAAS,SAAS,YAAY,MAAM;CAC1C,WAAW,gBAAgB;CAC3B,KAAK,MAAM,iBAAiB,gBAC1B,WAAW,SAAS,aAAa;CACnC,IAAI,CAAC,QAAQ,MAAM,IAAI,MAAM,uBAAuB;AACtD;AAEA,IAAI,CAAC,eAAe,IAAI,qBAAqB,GAC3C,eAAe,OAAO,uBAAuB,iBAAiB"}
|
|
@@ -3,8 +3,10 @@ import jetBrainsMonoLatin from "@fontsource-variable/jetbrains-mono/files/jetbra
|
|
|
3
3
|
import onestLatin from "@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url";
|
|
4
4
|
import arrowLeftIcon from "../icons/arrow-left.svg?raw";
|
|
5
5
|
import arrowRightIcon from "../icons/arrow-right.svg?raw";
|
|
6
|
+
import checkIcon from "../icons/check.svg?raw";
|
|
6
7
|
import chevronRightIcon from "../icons/chevron-right.svg?raw";
|
|
7
8
|
import closeIcon from "../icons/close.svg?raw";
|
|
9
|
+
import copyIcon from "../icons/copy.svg?raw";
|
|
8
10
|
import searchIcon from "../icons/search.svg?raw";
|
|
9
11
|
import { resolveComponentStyles } from "./component-styles.js";
|
|
10
12
|
import { svgIconUrl } from "./svg-icon.js";
|
|
@@ -530,6 +532,116 @@ export default function GlobalStyles() {
|
|
|
530
532
|
preset: "h1",
|
|
531
533
|
});
|
|
532
534
|
|
|
535
|
+
useGlobalStyles(
|
|
536
|
+
".hero",
|
|
537
|
+
resolveComponentStyles("Hero", {
|
|
538
|
+
display: "grid",
|
|
539
|
+
gridTemplateColumns: {
|
|
540
|
+
"": "minmax(0, 7fr) minmax(12rem, 4fr)",
|
|
541
|
+
"@mobile": "minmax(0, 1fr)",
|
|
542
|
+
},
|
|
543
|
+
alignItems: "center",
|
|
544
|
+
gap: "clamp(2rem, 5vw, 5rem)",
|
|
545
|
+
paddingBlockStart: {
|
|
546
|
+
"": "clamp(3rem, 8vw, 7rem)",
|
|
547
|
+
"@mobile": "($gap * 4)",
|
|
548
|
+
},
|
|
549
|
+
paddingBlockEnd: "clamp(2rem, 6vw, 5rem)",
|
|
550
|
+
Visual: {
|
|
551
|
+
$: "> img, > .hero-html",
|
|
552
|
+
order: { "": "2", "@mobile": "0" },
|
|
553
|
+
display: "grid",
|
|
554
|
+
placeItems: "center",
|
|
555
|
+
inlineSize: "min(100%, 22rem)",
|
|
556
|
+
marginInlineStart: "auto",
|
|
557
|
+
marginInlineEnd: "auto",
|
|
558
|
+
color: "#accent-surface",
|
|
559
|
+
},
|
|
560
|
+
Stack: {
|
|
561
|
+
$: "> .stack",
|
|
562
|
+
display: "flex",
|
|
563
|
+
flow: "column",
|
|
564
|
+
alignItems: { "": "flex-start", "@mobile": "center" },
|
|
565
|
+
gap: "clamp(1.5rem, 3vw, 2rem)",
|
|
566
|
+
textAlign: { "": "start", "@mobile": "center" },
|
|
567
|
+
},
|
|
568
|
+
Copy: {
|
|
569
|
+
$: "> .stack > .copy",
|
|
570
|
+
display: "flex",
|
|
571
|
+
flow: "column",
|
|
572
|
+
alignItems: "inherit",
|
|
573
|
+
gap: "($gap * 2)",
|
|
574
|
+
},
|
|
575
|
+
Title: {
|
|
576
|
+
$: "h1",
|
|
577
|
+
maxInlineSize: "16ch",
|
|
578
|
+
margin: "0",
|
|
579
|
+
color: "#text",
|
|
580
|
+
preset: "h1",
|
|
581
|
+
fontSize: "clamp(2.75rem, 7vw, 4.75rem)",
|
|
582
|
+
textWrap: "balance",
|
|
583
|
+
},
|
|
584
|
+
Tagline: {
|
|
585
|
+
$: ".tagline",
|
|
586
|
+
maxInlineSize: "48ch",
|
|
587
|
+
color: "#text-soft",
|
|
588
|
+
fontSize: "clamp(1.05rem, 2.5vw, 1.35rem)",
|
|
589
|
+
lineHeight: "1.55",
|
|
590
|
+
textWrap: "balance",
|
|
591
|
+
},
|
|
592
|
+
Actions: {
|
|
593
|
+
$: ".actions",
|
|
594
|
+
display: "flex",
|
|
595
|
+
flow: "row wrap",
|
|
596
|
+
justifyContent: { "": "flex-start", "@mobile": "center" },
|
|
597
|
+
gap: "($gap * 1.5)",
|
|
598
|
+
},
|
|
599
|
+
Action: {
|
|
600
|
+
$: ".sl-link-button",
|
|
601
|
+
display: "inline-flex",
|
|
602
|
+
alignItems: "center",
|
|
603
|
+
minBlockSize: "$control-height",
|
|
604
|
+
padding: "($gap * 1.25) ($gap * 2.5)",
|
|
605
|
+
gap: "$gap",
|
|
606
|
+
color: "#text",
|
|
607
|
+
border: true,
|
|
608
|
+
radius: "999px",
|
|
609
|
+
fill: "#surface-2",
|
|
610
|
+
preset: "navigation / strong",
|
|
611
|
+
textDecoration: "none",
|
|
612
|
+
transition: "fill 120ms ease, translate 120ms ease",
|
|
613
|
+
},
|
|
614
|
+
HoverAction: {
|
|
615
|
+
$: ".sl-link-button:hover",
|
|
616
|
+
fill: "#surface-2-hover",
|
|
617
|
+
translate: "0 -1px",
|
|
618
|
+
},
|
|
619
|
+
PrimaryAction: {
|
|
620
|
+
$: ".sl-link-button.primary",
|
|
621
|
+
color: "#accent-surface-text",
|
|
622
|
+
borderColor: "#accent-surface",
|
|
623
|
+
fill: "#accent-surface",
|
|
624
|
+
},
|
|
625
|
+
SecondaryAction: {
|
|
626
|
+
$: ".sl-link-button.secondary",
|
|
627
|
+
color: "#accent-text",
|
|
628
|
+
borderColor: "#border-strong",
|
|
629
|
+
},
|
|
630
|
+
MinimalAction: {
|
|
631
|
+
$: ".sl-link-button.minimal",
|
|
632
|
+
paddingInlineStart: "0",
|
|
633
|
+
paddingInlineEnd: "0",
|
|
634
|
+
color: "#accent-text",
|
|
635
|
+
border: "0",
|
|
636
|
+
fill: "#clear",
|
|
637
|
+
},
|
|
638
|
+
ActionIcon: {
|
|
639
|
+
$: ".sl-link-button svg",
|
|
640
|
+
flexShrink: "0",
|
|
641
|
+
},
|
|
642
|
+
}),
|
|
643
|
+
);
|
|
644
|
+
|
|
533
645
|
useGlobalStyles("main > .content-panel:first-of-type", {
|
|
534
646
|
paddingBlockStart: "($gap * 3)",
|
|
535
647
|
paddingBlockEnd: "($gap * 2)",
|
|
@@ -611,15 +723,82 @@ export default function GlobalStyles() {
|
|
|
611
723
|
},
|
|
612
724
|
);
|
|
613
725
|
|
|
614
|
-
useGlobalStyles(
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
726
|
+
useGlobalStyles(
|
|
727
|
+
".sl-markdown-content .td-code-block",
|
|
728
|
+
resolveComponentStyles("MarkdownCodeBlock", {
|
|
729
|
+
display: "block",
|
|
730
|
+
position: "relative",
|
|
731
|
+
minInlineSize: "0",
|
|
732
|
+
Pre: {
|
|
733
|
+
$: "> pre",
|
|
734
|
+
margin: "0",
|
|
735
|
+
padding: "0.875rem 3.75rem 0.875rem 1rem",
|
|
736
|
+
overflowX: "auto",
|
|
737
|
+
color: "#syntax-text",
|
|
738
|
+
border: true,
|
|
739
|
+
fill: "#syntax-bg",
|
|
740
|
+
radius: "$card-radius",
|
|
741
|
+
tabSize: "2",
|
|
742
|
+
},
|
|
743
|
+
CopyButton: {
|
|
744
|
+
$: "> [data-copy-code]",
|
|
745
|
+
position: "absolute",
|
|
746
|
+
zIndex: "1",
|
|
747
|
+
insetBlockStart: "$gap",
|
|
748
|
+
insetInlineEnd: "$gap",
|
|
749
|
+
margin: "0",
|
|
750
|
+
display: "grid",
|
|
751
|
+
placeItems: "center",
|
|
752
|
+
inlineSize: "2rem",
|
|
753
|
+
minInlineSize: "2rem",
|
|
754
|
+
blockSize: "2rem",
|
|
755
|
+
minBlockSize: "2rem",
|
|
756
|
+
padding: "0",
|
|
757
|
+
color: "#text-soft",
|
|
758
|
+
border: true,
|
|
759
|
+
fill: "#surface-2",
|
|
760
|
+
radius: "$radius",
|
|
761
|
+
preset: "small / strong",
|
|
762
|
+
cursor: "pointer",
|
|
763
|
+
transition: "color 120ms ease, fill 120ms ease",
|
|
764
|
+
},
|
|
765
|
+
HoverCopyButton: {
|
|
766
|
+
$: "> [data-copy-code]:hover",
|
|
767
|
+
color: "#text",
|
|
768
|
+
fill: "#surface-2-hover",
|
|
769
|
+
},
|
|
770
|
+
CopiedButton: {
|
|
771
|
+
$: '> [data-copy-code][data-copy-state="copied"]',
|
|
772
|
+
color: "#green-text",
|
|
773
|
+
borderColor: "#green",
|
|
774
|
+
},
|
|
775
|
+
CopyIcon: {
|
|
776
|
+
$: "> [data-copy-code] > [data-copy-icon]",
|
|
777
|
+
display: "block",
|
|
778
|
+
inlineSize: "1rem",
|
|
779
|
+
blockSize: "1rem",
|
|
780
|
+
fill: "#current",
|
|
781
|
+
mask: `url("${svgIconUrl(copyIcon)}") center / contain no-repeat`,
|
|
782
|
+
},
|
|
783
|
+
CopiedIcon: {
|
|
784
|
+
$: '> [data-copy-code][data-copy-state="copied"] > [data-copy-icon]',
|
|
785
|
+
mask: `url("${svgIconUrl(checkIcon)}") center / contain no-repeat`,
|
|
786
|
+
},
|
|
787
|
+
}),
|
|
788
|
+
);
|
|
789
|
+
|
|
790
|
+
useGlobalStyles(
|
|
791
|
+
'.sl-markdown-content pre[data-language="mermaid"]:not(:where(.not-content *))',
|
|
792
|
+
{
|
|
793
|
+
padding: "0.875rem 1rem",
|
|
794
|
+
overflowX: "auto",
|
|
795
|
+
color: "#syntax-text",
|
|
796
|
+
border: true,
|
|
797
|
+
fill: "#syntax-bg",
|
|
798
|
+
radius: "$card-radius",
|
|
799
|
+
tabSize: "2",
|
|
800
|
+
},
|
|
801
|
+
);
|
|
623
802
|
|
|
624
803
|
useGlobalStyles(".sl-markdown-content pre code", {
|
|
625
804
|
padding: "0",
|
|
@@ -767,57 +946,34 @@ export default function GlobalStyles() {
|
|
|
767
946
|
},
|
|
768
947
|
);
|
|
769
948
|
|
|
770
|
-
useGlobalStyles(
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
useGlobalStyles(".sl-markdown-content .sl-heading-wrapper > :first-child", {
|
|
799
|
-
display: "inline",
|
|
800
|
-
paddingInlineEnd: "1.1em",
|
|
801
|
-
});
|
|
802
|
-
|
|
803
|
-
useGlobalStyles(".sl-markdown-content .sl-anchor-link", {
|
|
804
|
-
position: "relative",
|
|
805
|
-
display: "inline-flex",
|
|
806
|
-
marginInlineStart: "-0.85em",
|
|
807
|
-
color: "#text-muted",
|
|
808
|
-
userSelect: "none",
|
|
809
|
-
textDecoration: "none",
|
|
810
|
-
});
|
|
811
|
-
|
|
812
|
-
useGlobalStyles(".sl-markdown-content .sl-anchor-link:hover", {
|
|
813
|
-
color: "#accent-text",
|
|
814
|
-
});
|
|
815
|
-
|
|
816
|
-
useGlobalStyles(".sl-markdown-content .sl-anchor-icon > svg", {
|
|
817
|
-
display: "inline",
|
|
818
|
-
inlineSize: "0.8275em",
|
|
819
|
-
verticalAlign: "middle",
|
|
820
|
-
});
|
|
949
|
+
useGlobalStyles(
|
|
950
|
+
".sl-markdown-content .sl-heading-wrapper",
|
|
951
|
+
resolveComponentStyles("MarkdownHeading", {
|
|
952
|
+
preset: "heading",
|
|
953
|
+
Heading: {
|
|
954
|
+
$: "> :first-child",
|
|
955
|
+
display: "inline",
|
|
956
|
+
paddingInlineEnd: "0.35em",
|
|
957
|
+
},
|
|
958
|
+
Heading1: { $: "&.level-h1", preset: "h1" },
|
|
959
|
+
Heading2: { $: "&.level-h2", preset: "h2" },
|
|
960
|
+
Heading3: { $: "&.level-h3", preset: "h3" },
|
|
961
|
+
Heading4: { $: "&.level-h4", preset: "h4" },
|
|
962
|
+
Heading5: { $: "&.level-h5", preset: "h5" },
|
|
963
|
+
Heading6: { $: "&.level-h6", preset: "h6" },
|
|
964
|
+
Link: {
|
|
965
|
+
$: "> .sl-anchor-link",
|
|
966
|
+
display: "inline-flex",
|
|
967
|
+
color: "#text-muted",
|
|
968
|
+
userSelect: "none",
|
|
969
|
+
textDecoration: "none",
|
|
970
|
+
},
|
|
971
|
+
HoverLink: {
|
|
972
|
+
$: "> .sl-anchor-link:hover",
|
|
973
|
+
color: "#accent-text",
|
|
974
|
+
},
|
|
975
|
+
}),
|
|
976
|
+
);
|
|
821
977
|
|
|
822
978
|
useGlobalStyles(".starlight-aside", {
|
|
823
979
|
padding: "($gap * 2) ($gap * 2.5)",
|
|
@@ -1043,29 +1199,52 @@ export default function GlobalStyles() {
|
|
|
1043
1199
|
preset: "h5 / strong",
|
|
1044
1200
|
});
|
|
1045
1201
|
|
|
1046
|
-
useGlobalStyles(
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1202
|
+
useGlobalStyles(
|
|
1203
|
+
"starlight-lang-select",
|
|
1204
|
+
resolveComponentStyles("LanguageSelect", {
|
|
1205
|
+
display: "block",
|
|
1206
|
+
Label: {
|
|
1207
|
+
$: "label",
|
|
1208
|
+
position: "relative",
|
|
1209
|
+
display: "flex",
|
|
1210
|
+
alignItems: "center",
|
|
1211
|
+
color: "#text-soft",
|
|
1212
|
+
},
|
|
1213
|
+
HoverLabel: { $: "label:hover", color: "#text" },
|
|
1214
|
+
LabelIcon: {
|
|
1215
|
+
$: ".label-icon",
|
|
1216
|
+
position: "absolute",
|
|
1217
|
+
zIndex: "1",
|
|
1218
|
+
insetInlineStart: "$gap",
|
|
1219
|
+
pointerEvents: "none",
|
|
1220
|
+
},
|
|
1221
|
+
Select: {
|
|
1222
|
+
$: "select",
|
|
1223
|
+
appearance: "none",
|
|
1224
|
+
inlineSize: "8rem",
|
|
1225
|
+
minBlockSize: "$control-height",
|
|
1226
|
+
paddingInlineStart: "($gap * 3.5)",
|
|
1227
|
+
paddingInlineEnd: "($gap * 3.5)",
|
|
1228
|
+
color: "#text-soft",
|
|
1229
|
+
border: "0",
|
|
1230
|
+
fill: "#clear",
|
|
1231
|
+
preset: "small",
|
|
1232
|
+
cursor: "pointer",
|
|
1233
|
+
textOverflow: "ellipsis",
|
|
1234
|
+
},
|
|
1235
|
+
Caret: {
|
|
1236
|
+
$: ".caret",
|
|
1237
|
+
position: "absolute",
|
|
1238
|
+
insetInlineEnd: "$gap",
|
|
1239
|
+
pointerEvents: "none",
|
|
1240
|
+
},
|
|
1241
|
+
Option: {
|
|
1242
|
+
$: "option",
|
|
1243
|
+
color: "#text",
|
|
1244
|
+
fill: "#surface-2",
|
|
1245
|
+
},
|
|
1246
|
+
}),
|
|
1247
|
+
);
|
|
1069
1248
|
|
|
1070
1249
|
useGlobalStyles(".td-header__social a, .td-mobile-preferences__social a", {
|
|
1071
1250
|
color: "#accent-text",
|
|
@@ -1592,6 +1771,9 @@ export default function GlobalStyles() {
|
|
|
1592
1771
|
"$docs-nav-pad-x": {
|
|
1593
1772
|
"@mobile": "1rem",
|
|
1594
1773
|
},
|
|
1774
|
+
"$docs-content-pad-x": {
|
|
1775
|
+
"@mobile": "1rem",
|
|
1776
|
+
},
|
|
1595
1777
|
"$docs-nav-gap": {
|
|
1596
1778
|
"@mobile": "0.5rem",
|
|
1597
1779
|
},
|
|
@@ -36,6 +36,7 @@ export const PackageVersionRoot = customizeComponent(
|
|
|
36
36
|
as: "span",
|
|
37
37
|
styles: {
|
|
38
38
|
display: "inline-flex",
|
|
39
|
+
hide: { "": false, "@compact": true },
|
|
39
40
|
alignItems: "center",
|
|
40
41
|
flexShrink: "0",
|
|
41
42
|
minBlockSize: "1.5rem",
|
|
@@ -162,10 +163,13 @@ export const StarlightHeaderRoot = customizeComponent(
|
|
|
162
163
|
},
|
|
163
164
|
SiteTitle: {
|
|
164
165
|
$: ".site-title",
|
|
166
|
+
minInlineSize: "0",
|
|
167
|
+
overflow: "hidden",
|
|
165
168
|
color: "#text",
|
|
166
169
|
preset: { "": "h4 / strong", "@mobile": "h5 / strong" },
|
|
167
170
|
textDecoration: "none",
|
|
168
171
|
whiteSpace: "nowrap",
|
|
172
|
+
textOverflow: "ellipsis",
|
|
169
173
|
},
|
|
170
174
|
Search: {
|
|
171
175
|
$: ".td-header__search",
|
|
@@ -231,7 +235,7 @@ export const StarlightHeaderRoot = customizeComponent(
|
|
|
231
235
|
}),
|
|
232
236
|
);
|
|
233
237
|
|
|
234
|
-
const appearanceSelectStyles = {
|
|
238
|
+
export const appearanceSelectStyles = {
|
|
235
239
|
display: "grid",
|
|
236
240
|
flexShrink: "0",
|
|
237
241
|
placeItems: "center",
|
|
@@ -276,7 +280,7 @@ const appearanceSelectStyles = {
|
|
|
276
280
|
},
|
|
277
281
|
Select: {
|
|
278
282
|
$: "select",
|
|
279
|
-
appearance:
|
|
283
|
+
appearance: "base-select",
|
|
280
284
|
position: "static",
|
|
281
285
|
inlineSize: "100%",
|
|
282
286
|
minInlineSize: "0",
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { describe, expect, it } from "vitest";
|
|
2
|
+
import { appearanceSelectStyles } from "./LayoutComponents.js";
|
|
3
|
+
|
|
4
|
+
describe("layout components", () => {
|
|
5
|
+
it("keeps appearance pickers styled at compact viewports", () => {
|
|
6
|
+
expect(appearanceSelectStyles.Select.appearance).toBe("base-select");
|
|
7
|
+
});
|
|
8
|
+
});
|
|
@@ -4,6 +4,7 @@ export const cookbookStates = {
|
|
|
4
4
|
"@mobile": "@media(w < 50rem)",
|
|
5
5
|
"@desktop": "@media(w >= 50rem)",
|
|
6
6
|
"@small": "@media(w <= 40rem)",
|
|
7
|
+
"@compact": "@media(w <= 23rem)",
|
|
7
8
|
"@shell-mobile": "@media(w <= 48rem)",
|
|
8
9
|
"@shell-desktop": "@media(w > 48rem)",
|
|
9
10
|
"@narrow-layout": "@media(w < 72rem)",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"/></svg>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
2
|
+
<rect width="64" height="64" rx="14" fill="#315efb" />
|
|
3
|
+
<path
|
|
4
|
+
fill="#fff"
|
|
5
|
+
d="M14.8 16c6.7.2 12.3 2 16.7 5.4v28.4c-4.4-3.1-10-4.7-16.6-4.9a3 3 0 0 1-2.9-3V19a3 3 0 0 1 2.8-3Z"
|
|
6
|
+
/>
|
|
7
|
+
<path
|
|
8
|
+
fill="#fff"
|
|
9
|
+
d="M49.2 16c-6.7.2-12.3 2-16.7 5.4v28.4c4.4-3.1 10-4.7 16.6-4.9a3 3 0 0 0 2.9-3V19a3 3 0 0 0-2.8-3Z"
|
|
10
|
+
/>
|
|
11
|
+
</svg>
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCsD7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBAinBa,eACd,QAAQ,kBAAkB,gBACzB;;;UCzqBc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;;EAGV,aAAa,eAAe;EAC5B,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCvC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}
|