starlight-theme-nova 0.0.7 → 0.1.1
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/lib/aside.css +17 -0
- package/lib/badge.css +23 -0
- package/lib/card.css +42 -0
- package/lib/shiki.css +11 -15
- package/lib/styles.css +6 -0
- package/lib/styles.gen.css +58 -9
- package/package.json +1 -1
- package/src/components/Hero.astro +165 -0
- package/src/components/LinkButton.astro +7 -5
- package/src/components/MobileTableOfContents.astro +13 -0
- package/src/components/Pagination.astro +1 -0
- package/src/components/Search.astro +30 -18
- package/src/constants.ts +1 -0
- package/src/index.ts +4 -3
- package/src/shiki-config.ts +6 -1
package/lib/aside.css
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.starlight-aside {
|
|
2
|
+
border: 1px solid var(--sl-color-asides-border);
|
|
3
|
+
border-radius: 0.5rem;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.starlight-aside,
|
|
7
|
+
.starlight-aside a {
|
|
8
|
+
color: color-mix(
|
|
9
|
+
in srgb,
|
|
10
|
+
var(--sl-color-asides-text-accent) 50%,
|
|
11
|
+
var(--sl-color-white)
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.starlight-aside a:is(:hover, :focus-visible) {
|
|
16
|
+
color: var(--sl-color-asides-text-accent);
|
|
17
|
+
}
|
package/lib/badge.css
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.sl-badge {
|
|
2
|
+
--sl-badge-default-border: var(--sl-color-accent);
|
|
3
|
+
--sl-badge-default-bg: var(--sl-color-accent-low);
|
|
4
|
+
--sl-badge-default-text: var(--sl-color-accent-high);
|
|
5
|
+
--sl-badge-tip-text: var(--sl-color-purple-high);
|
|
6
|
+
--sl-badge-caution-text: var(--sl-color-orange-high);
|
|
7
|
+
--sl-badge-note-text: var(--sl-color-blue-high);
|
|
8
|
+
--sl-badge-success-text: var(--sl-color-green-high);
|
|
9
|
+
--sl-badge-danger-text: var(--sl-color-red-high);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
[data-theme='light'] .sl-badge {
|
|
13
|
+
--sl-badge-tip-bg: var(--sl-color-purple-low);
|
|
14
|
+
--sl-badge-tip-text: var(--sl-color-purple-high);
|
|
15
|
+
--sl-badge-caution-bg: var(--sl-color-orange-low);
|
|
16
|
+
--sl-badge-caution-text: var(--sl-color-orange-high);
|
|
17
|
+
--sl-badge-note-bg: var(--sl-color-blue-low);
|
|
18
|
+
--sl-badge-note-text: var(--sl-color-blue-high);
|
|
19
|
+
--sl-badge-success-bg: var(--sl-color-green-low);
|
|
20
|
+
--sl-badge-success-text: var(--sl-color-green-high);
|
|
21
|
+
--sl-badge-danger-bg: var(--sl-color-red-low);
|
|
22
|
+
--sl-badge-danger-text: var(--sl-color-red-high);
|
|
23
|
+
}
|
package/lib/card.css
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
.sl-markdown-content .card-grid.stagger {
|
|
2
|
+
--stagger-height: 2.5rem;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.sl-markdown-content .card {
|
|
6
|
+
--sl-text-h1: var(--sl-text-4xl);
|
|
7
|
+
--sl-text-h2: var(--sl-text-3xl);
|
|
8
|
+
--sl-text-h3: var(--sl-text-2xl);
|
|
9
|
+
--sl-text-h4: var(--sl-text-xl);
|
|
10
|
+
--sl-text-h5: var(--sl-text-lg);
|
|
11
|
+
|
|
12
|
+
border-radius: 0.5rem;
|
|
13
|
+
padding: clamp(1rem, calc(0.125rem + 1.5vw), 2.5rem);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.sl-markdown-content .card .title .icon {
|
|
17
|
+
font-size: 1.875rem;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.sl-markdown-content .sl-link-card {
|
|
21
|
+
box-shadow: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.sl-markdown-content .sl-link-card:hover {
|
|
25
|
+
background: initial;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.sl-markdown-content .sl-link-card .title {
|
|
29
|
+
color: var(--sl-color-white);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.sl-markdown-content .sl-link-card .description {
|
|
33
|
+
color: var(--sl-color-gray-3);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.sl-markdown-content .sl-link-card:is(:hover, :focus-visible) .description {
|
|
37
|
+
color: var(--sl-color-gray-2);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.sl-markdown-content .sl-link-card .icon {
|
|
41
|
+
color: var(--sl-color-gray-2);
|
|
42
|
+
}
|
package/lib/shiki.css
CHANGED
|
@@ -42,15 +42,23 @@
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.line.highlighted {
|
|
45
|
-
background-color:
|
|
45
|
+
background-color: var(--nano-color-highlight);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.line.diff.add {
|
|
49
|
-
background-color:
|
|
49
|
+
background-color: var(--sl-color-green-low);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
.line.diff.remove {
|
|
53
|
-
background-color:
|
|
53
|
+
background-color: var(--sl-color-red-low);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.highlighted-word {
|
|
57
|
+
border-radius: 0.25rem;
|
|
58
|
+
border-color: var(--sl-color-gray-5);
|
|
59
|
+
border-style: solid;
|
|
60
|
+
border-width: 1px;
|
|
61
|
+
padding: 0 0.125rem;
|
|
54
62
|
}
|
|
55
63
|
}
|
|
56
64
|
|
|
@@ -79,15 +87,3 @@ html[data-theme='dark'] .astro-code span {
|
|
|
79
87
|
font-weight: var(--shiki-dark-font-weight);
|
|
80
88
|
text-decoration: var(--shiki-dark-text-decoration);
|
|
81
89
|
}
|
|
82
|
-
/*
|
|
83
|
-
.astro-code.twoslash .twoslash-popup-container {
|
|
84
|
-
transform: translateY(1.8em);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.astro-code.twoslash .twoslash-query-presisted .twoslash-popup-container {
|
|
88
|
-
transform: translateY(2.2em);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.astro-code.twoslash .twoslash-query-line .twoslash-popup-container {
|
|
92
|
-
transform: translateY(1.3em);
|
|
93
|
-
} */
|
package/lib/styles.css
ADDED
package/lib/styles.gen.css
CHANGED
|
@@ -22,6 +22,29 @@
|
|
|
22
22
|
|
|
23
23
|
--sl-color-bg-inline-code: #1f2937;
|
|
24
24
|
--sl-color-border-inline-code: #374151;
|
|
25
|
+
--sl-color-bg-nav: color-mix(in srgb, #030712 50%, transparent);
|
|
26
|
+
|
|
27
|
+
--sl-color-orange-low: #451a03;
|
|
28
|
+
--sl-color-orange: #78350f;
|
|
29
|
+
--sl-color-orange-high: #fde68a;
|
|
30
|
+
|
|
31
|
+
--sl-color-green-low: #052e16;
|
|
32
|
+
--sl-color-green: #14532d;
|
|
33
|
+
--sl-color-green-high: #bbf7d0;
|
|
34
|
+
|
|
35
|
+
--sl-color-blue-low: #172554;
|
|
36
|
+
--sl-color-blue: #1e3a8a;
|
|
37
|
+
--sl-color-blue-high: #bfdbfe;
|
|
38
|
+
|
|
39
|
+
--sl-color-purple-low: #3b0764;
|
|
40
|
+
--sl-color-purple: #581c87;
|
|
41
|
+
--sl-color-purple-high: #e9d5ff;
|
|
42
|
+
|
|
43
|
+
--sl-color-red-low: #450a0a;
|
|
44
|
+
--sl-color-red: #7f1d1d;
|
|
45
|
+
--sl-color-red-high: #fecaca;
|
|
46
|
+
|
|
47
|
+
--nano-color-highlight: var(--sl-color-gray-5);
|
|
25
48
|
}
|
|
26
49
|
|
|
27
50
|
/* Light mode Starlight theme variables */
|
|
@@ -42,23 +65,46 @@
|
|
|
42
65
|
|
|
43
66
|
--sl-color-bg-inline-code: #f3f4f6;
|
|
44
67
|
--sl-color-border-inline-code: #d1d5db;
|
|
68
|
+
--sl-color-bg-nav: color-mix(in srgb, #fff 80%, transparent);
|
|
69
|
+
|
|
70
|
+
--sl-color-orange-low: #fef3c7;
|
|
71
|
+
--sl-color-orange: #fbbf24;
|
|
72
|
+
--sl-color-orange-high: #92400e;
|
|
73
|
+
|
|
74
|
+
--sl-color-green-low: #dcfce7;
|
|
75
|
+
--sl-color-green: #4ade80;
|
|
76
|
+
--sl-color-green-high: #166534;
|
|
77
|
+
|
|
78
|
+
--sl-color-blue-low: #dbeafe;
|
|
79
|
+
--sl-color-blue: #60a5fa;
|
|
80
|
+
--sl-color-blue-high: #1e40af;
|
|
81
|
+
|
|
82
|
+
--sl-color-purple-low: #f3e8ff;
|
|
83
|
+
--sl-color-purple: #c084fc;
|
|
84
|
+
--sl-color-purple-high: #6b21a8;
|
|
85
|
+
|
|
86
|
+
--sl-color-red-low: #fee2e2;
|
|
87
|
+
--sl-color-red: #f87171;
|
|
88
|
+
--sl-color-red-high: #991b1b;
|
|
89
|
+
|
|
90
|
+
--nano-color-highlight: var(--sl-color-gray-6);
|
|
45
91
|
}
|
|
46
92
|
|
|
47
93
|
/* layer: shortcuts */
|
|
48
94
|
.nova-code-copy-button-icon-check{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;width:100%;height:100%;}
|
|
49
95
|
.nova-code-copy-button-icon-clipboard{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;width:100%;height:100%;}
|
|
50
|
-
.nova-link-button-icon,
|
|
96
|
+
.nova-link-button-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;width:1.25rem;height:1.25rem;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
|
|
51
97
|
.nova-link-card-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;margin-left:0.5rem;width:1.25rem;height:1.25rem;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
|
|
52
98
|
.nova-pagination-link-icon-left{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18l-6-6l6-6'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;min-width:1.25rem;min-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
|
|
53
99
|
.nova-pagination-link-icon-right{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;min-width:1.25rem;min-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
|
|
54
100
|
.nova-code-container{position:relative;}
|
|
55
101
|
.nova-code-copy-button{position:absolute;right:0.5rem;top:0.5rem;margin:0;width:1.5rem;height:1.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.25rem;border-style:solid;background-color:rgb(243 244 246 / 0.3) /* #f3f4f6 */;padding:0.25rem;--nova-text-opacity:1;color:rgb(0 0 0 / var(--nova-text-opacity)) /* #000 */;--nova-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
|
|
56
102
|
.nova-link-card{position:relative;display:flex;flex-direction:column;gap:0.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.75rem;border-style:solid;--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;}
|
|
57
|
-
.nova-page-frame-header{position:fixed;inset:0;z-index:var(--sl-z-index-navbar);box-sizing:border-box;width:100%;height:var(--sl-nav-height);border-width:0px;border-bottom-width:1px;border-color:var(--sl-color-hairline);border-style:solid;background-color:
|
|
103
|
+
.nova-page-frame-header{position:fixed;inset:0;z-index:var(--sl-z-index-navbar);box-sizing:border-box;width:100%;height:var(--sl-nav-height);border-width:0px;border-bottom-width:1px;border-color:var(--sl-color-hairline);border-style:solid;background-color:var(--sl-color-bg-nav) /* var(--sl-color-bg-nav) */;padding-top:var(--sl-nav-pad-y);padding-bottom:var(--sl-nav-pad-y);padding-left:var(--sl-nav-pad-x);padding-right:var(--sl-nav-pad-x);--nova-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
|
|
58
104
|
.nova-link-card-link::before{position:absolute;inset:0;content:'';}
|
|
59
105
|
.nova-header-title{margin:-0.25rem;min-width:0;display:flex;overflow:clip;padding:0.25rem;}
|
|
60
106
|
.nova-pagination-link{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;border-radius:0.75rem;padding:0.5rem;color:var(--sl-color-gray-2) /* var(--sl-color-gray-2) */;font-weight:500;text-decoration:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:100ms;}
|
|
61
|
-
.nova-link-button{margin-inline-end:0.5rem;margin-top:0.5rem;margin-bottom:0.5rem;display:inline-flex;align-items:center;justify-content:space-between;border-width:1px;border-color:transparent;border-radius:0.75rem;border-style:solid;padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-weight:500;text-decoration:none
|
|
107
|
+
.nova-link-button{margin-inline-end:0.5rem;margin-top:0.5rem;margin-bottom:0.5rem;display:inline-flex;align-items:center;justify-content:space-between;gap:0.5rem;border-width:1px;border-color:transparent;border-radius:0.75rem;border-style:solid;padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-weight:500;text-decoration:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;}
|
|
62
108
|
.nova-header{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:0.5rem;}
|
|
63
109
|
.nova-header-actions{display:none;align-items:center;gap:0.5rem;}
|
|
64
110
|
.nova-social-icons-link{width:2rem;height:2rem;display:flex;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
|
|
@@ -68,6 +114,7 @@
|
|
|
68
114
|
.nova-header-nav{display:flex;flex:1 1 0%;flex-direction:row;gap:1rem;overflow-x:auto;padding-left:1rem;padding-right:1rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;}
|
|
69
115
|
.nova-header-search{display:flex;}
|
|
70
116
|
.nova-link-card-link{display:inline-flex;align-items:center;justify-content:space-between;font-size:1.125rem;line-height:1.75rem;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;font-weight:600;text-decoration:none;}
|
|
117
|
+
.nova-pagination-divider{flex:1 1 0%;}
|
|
71
118
|
.nova-pagination-link[rel="next"]{flex-direction:row;}
|
|
72
119
|
.nova-pagination-link[rel="prev"]{flex-direction:row-reverse;}
|
|
73
120
|
.nova-link-button:hover .nova-link-button-icon,
|
|
@@ -78,31 +125,33 @@
|
|
|
78
125
|
.nova-pagination-link:active[data-side="right"]{--nova-translate-x:0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
|
|
79
126
|
.nova-code-copy-button:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
|
|
80
127
|
.nova-page-frame-sidebar-pane{border-width:0px;border-color:var(--sl-color-hairline);border-style:solid;}
|
|
81
|
-
.nova-link-button-secondary{border-color:var(--sl-color-gray-5);--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151
|
|
128
|
+
.nova-link-button-secondary{border-color:var(--sl-color-gray-5);--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
|
|
129
|
+
.nova-mobile-table-of-contents summary{border-bottom-color:var(--sl-color-hairline);}
|
|
82
130
|
.dark .nova-code-copy-button{background-color:rgb(75 85 99 / 0.3) /* #4b5563 */;--nova-text-opacity:1;color:rgb(255 255 255 / var(--nova-text-opacity)) /* #fff */;}
|
|
83
131
|
.dark .nova-link-button-primary{--nova-bg-opacity:1;background-color:rgb(243 244 246 / var(--nova-bg-opacity)) /* #f3f4f6 */;--nova-text-opacity:1;color:rgb(17 24 39 / var(--nova-text-opacity)) /* #111827 */;}
|
|
84
|
-
.nova-link-button-primary{--nova-bg-opacity:1;background-color:rgb(0 0 0 / var(--nova-bg-opacity)) /* #000 */;--nova-text-opacity:1;color:rgb(255 255 255 / var(--nova-text-opacity)) /* #fff
|
|
132
|
+
.nova-link-button-primary{--nova-bg-opacity:1;background-color:rgb(0 0 0 / var(--nova-bg-opacity)) /* #000 */;--nova-text-opacity:1;color:rgb(255 255 255 / var(--nova-text-opacity)) /* #fff */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
|
|
85
133
|
.dark .nova-link-button-secondary,
|
|
86
134
|
.dark .nova-link-card{--nova-bg-opacity:1;background-color:rgb(31 41 55 / var(--nova-bg-opacity)) /* #1f2937 */;--nova-text-opacity:1;color:rgb(229 231 235 / var(--nova-text-opacity)) /* #e5e7eb */;}
|
|
87
|
-
.dark .nova-page-frame-header{background-color:rgb(3 7 18 / 0.5) /* #030712 */;}
|
|
88
135
|
.dark .nova-code-copy-button:hover{background-color:rgb(107 114 128 / 0.5) /* #6b7280 */;}
|
|
89
136
|
.nova-code-copy-button:hover{background-color:rgb(229 231 235 / 0.5) /* #e5e7eb */;}
|
|
90
137
|
.dark .nova-link-button-primary:hover{--nova-bg-opacity:1;background-color:rgb(209 213 219 / var(--nova-bg-opacity)) /* #d1d5db */;}
|
|
91
|
-
.nova-link-button-primary:hover{--nova-bg-opacity:1;background-color:rgb(31 41 55 / var(--nova-bg-opacity)) /* #1f2937
|
|
138
|
+
.nova-link-button-primary:hover{--nova-bg-opacity:1;background-color:rgb(31 41 55 / var(--nova-bg-opacity)) /* #1f2937 */;--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
|
|
92
139
|
.dark .nova-link-button-secondary:hover{--nova-bg-opacity:1;background-color:rgb(55 65 81 / var(--nova-bg-opacity)) /* #374151 */;}
|
|
93
|
-
.nova-link-button-secondary:hover{--nova-bg-opacity:1;background-color:rgb(249 250 251 / var(--nova-bg-opacity)) /* #f9fafb
|
|
140
|
+
.nova-link-button-secondary:hover{--nova-bg-opacity:1;background-color:rgb(249 250 251 / var(--nova-bg-opacity)) /* #f9fafb */;--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
|
|
94
141
|
.dark .nova-link-card:hover{--nova-bg-opacity:1;background-color:rgb(55 65 81 / var(--nova-bg-opacity)) /* #374151 */;}
|
|
95
142
|
.nova-link-card:hover{--nova-bg-opacity:1;background-color:rgb(249 250 251 / var(--nova-bg-opacity)) /* #f9fafb */;--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
|
|
96
143
|
.nova-social-icons-link:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
|
|
97
144
|
.nova-theme-select:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
|
|
98
145
|
.nova-site-title *{font-size:1.125rem;line-height:1.75rem;color:var(--sl-color-text) /* var(--sl-color-text) */;font-weight:600;}
|
|
99
146
|
.nova-header-nav-link{color:var(--sl-color-gray-3) /* var(--sl-color-gray-3) */;text-decoration:none;}
|
|
147
|
+
.dark .nova-link-button-minimal,
|
|
100
148
|
.dark .nova-link-card-link{--nova-text-opacity:1;color:rgb(229 231 235 / var(--nova-text-opacity)) /* #e5e7eb */;}
|
|
149
|
+
.nova-link-button-minimal{--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;}
|
|
101
150
|
.nova-header-nav-link:hover{color:var(--sl-color-white) /* var(--sl-color-white) */;}
|
|
102
151
|
.nova-pagination-link:hover{color:var(--sl-color-white) /* var(--sl-color-white) */;}
|
|
103
152
|
.nova-code-container .nova-code-copy-button{opacity:0;}
|
|
104
153
|
.nova-code-container:hover .nova-code-copy-button{opacity:1;}
|
|
105
|
-
.nova-
|
|
154
|
+
.nova-mobile-table-of-contents nav{--nova-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
|
|
106
155
|
@media print{
|
|
107
156
|
.nova-header-actions,
|
|
108
157
|
.nova-header-search{display:none;}
|
package/package.json
CHANGED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { Image } from 'astro:assets'
|
|
3
|
+
import { PAGE_TITLE_ID } from '../constants'
|
|
4
|
+
import LinkButton from './LinkButton.astro'
|
|
5
|
+
|
|
6
|
+
const { data } = Astro.locals.starlightRoute.entry
|
|
7
|
+
const { title = data.title, tagline, image, actions = [] } = data.hero || {}
|
|
8
|
+
|
|
9
|
+
const imageAttrs = {
|
|
10
|
+
loading: 'eager' as const,
|
|
11
|
+
decoding: 'async' as const,
|
|
12
|
+
width: 400,
|
|
13
|
+
height: 400,
|
|
14
|
+
alt: image?.alt || '',
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
let darkImage: ImageMetadata | undefined
|
|
18
|
+
let lightImage: ImageMetadata | undefined
|
|
19
|
+
let rawHtml: string | undefined
|
|
20
|
+
if (image) {
|
|
21
|
+
if ('file' in image) {
|
|
22
|
+
darkImage = image.file
|
|
23
|
+
} else if ('dark' in image) {
|
|
24
|
+
darkImage = image.dark
|
|
25
|
+
lightImage = image.light
|
|
26
|
+
} else {
|
|
27
|
+
rawHtml = image.html
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
<div class="hero">
|
|
33
|
+
{
|
|
34
|
+
darkImage && (
|
|
35
|
+
<Image
|
|
36
|
+
src={darkImage}
|
|
37
|
+
{...imageAttrs}
|
|
38
|
+
class:list={{ 'light:sl-hidden': Boolean(lightImage) }}
|
|
39
|
+
/>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
{
|
|
43
|
+
lightImage && (
|
|
44
|
+
<Image src={lightImage} {...imageAttrs} class="dark:sl-hidden" />
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
{rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
|
|
48
|
+
<div class="sl-flex stack">
|
|
49
|
+
<div class="sl-flex copy">
|
|
50
|
+
<h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
|
|
51
|
+
{tagline && <div class="tagline" set:html={tagline} />}
|
|
52
|
+
</div>
|
|
53
|
+
{
|
|
54
|
+
actions.length > 0 && (
|
|
55
|
+
<div class="sl-flex actions">
|
|
56
|
+
{actions.map(
|
|
57
|
+
({
|
|
58
|
+
attrs: { class: className, ...attrs } = {},
|
|
59
|
+
icon,
|
|
60
|
+
link: href,
|
|
61
|
+
text,
|
|
62
|
+
variant,
|
|
63
|
+
}) => (
|
|
64
|
+
<LinkButton
|
|
65
|
+
{href}
|
|
66
|
+
{variant}
|
|
67
|
+
icon={icon?.name}
|
|
68
|
+
class:list={[className]}
|
|
69
|
+
{...attrs}
|
|
70
|
+
>
|
|
71
|
+
{text}
|
|
72
|
+
{icon?.html && <Fragment set:html={icon.html} />}
|
|
73
|
+
</LinkButton>
|
|
74
|
+
),
|
|
75
|
+
)}
|
|
76
|
+
</div>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<style>
|
|
83
|
+
.hero {
|
|
84
|
+
display: grid;
|
|
85
|
+
align-items: center;
|
|
86
|
+
gap: 1rem;
|
|
87
|
+
padding-bottom: 1rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.hero > img,
|
|
91
|
+
.hero > .hero-html {
|
|
92
|
+
object-fit: contain;
|
|
93
|
+
width: min(70%, 20rem);
|
|
94
|
+
height: auto;
|
|
95
|
+
margin-inline: auto;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.stack {
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
|
|
101
|
+
text-align: center;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.copy {
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
gap: 1rem;
|
|
107
|
+
align-items: center;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.copy > * {
|
|
111
|
+
max-width: 50ch;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
h1 {
|
|
115
|
+
font-size: clamp(
|
|
116
|
+
var(--sl-text-3xl),
|
|
117
|
+
calc(0.25rem + 5vw),
|
|
118
|
+
var(--sl-text-6xl)
|
|
119
|
+
);
|
|
120
|
+
line-height: var(--sl-line-height-headings);
|
|
121
|
+
font-weight: 600;
|
|
122
|
+
color: var(--sl-color-white);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.tagline {
|
|
126
|
+
font-size: clamp(
|
|
127
|
+
var(--sl-text-base),
|
|
128
|
+
calc(0.0625rem + 2vw),
|
|
129
|
+
var(--sl-text-xl)
|
|
130
|
+
);
|
|
131
|
+
color: var(--sl-color-gray-2);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.actions {
|
|
135
|
+
gap: 1rem 2rem;
|
|
136
|
+
flex-wrap: wrap;
|
|
137
|
+
justify-content: center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@media (min-width: 50rem) {
|
|
141
|
+
.hero {
|
|
142
|
+
grid-template-columns: 7fr 4fr;
|
|
143
|
+
gap: 3%;
|
|
144
|
+
padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.hero > img,
|
|
148
|
+
.hero > .hero-html {
|
|
149
|
+
order: 2;
|
|
150
|
+
width: min(100%, 25rem);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.stack {
|
|
154
|
+
text-align: start;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.copy {
|
|
158
|
+
align-items: flex-start;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.actions {
|
|
162
|
+
justify-content: flex-start;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
</style>
|
|
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'astro/types'
|
|
|
3
3
|
|
|
4
4
|
interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
|
|
5
5
|
href: string | URL
|
|
6
|
-
variant?: 'primary' | 'secondary'
|
|
6
|
+
variant?: 'primary' | 'secondary' | 'minimal'
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
const { class: className, variant = 'primary', ...attrs } = Astro.props
|
|
@@ -13,14 +13,16 @@ const { class: className, variant = 'primary', ...attrs } = Astro.props
|
|
|
13
13
|
<a
|
|
14
14
|
class:list={[
|
|
15
15
|
'nova-link-button not-content',
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
{
|
|
17
|
+
'nova-link-button-primary': variant === 'primary',
|
|
18
|
+
'nova-link-button-secondary': variant === 'secondary',
|
|
19
|
+
'nova-link-button-minimal': variant === 'minimal',
|
|
20
|
+
},
|
|
19
21
|
className,
|
|
20
22
|
]}
|
|
21
23
|
{...attrs}
|
|
22
24
|
>
|
|
23
|
-
<slot
|
|
25
|
+
<span><slot /></span>
|
|
24
26
|
<div class="nova-link-button-icon"></div>
|
|
25
27
|
</a>
|
|
26
28
|
</span>
|
|
@@ -5,6 +5,18 @@ import Default from '@astrojs/starlight/components/Search.astro'
|
|
|
5
5
|
<Default />
|
|
6
6
|
|
|
7
7
|
<style is:global>
|
|
8
|
+
site-search {
|
|
9
|
+
& dialog {
|
|
10
|
+
background-color: var(--sl-color-bg);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
& input:focus-visible {
|
|
14
|
+
outline-style: solid;
|
|
15
|
+
outline-width: 1px;
|
|
16
|
+
outline-color: var(--sl-color-accent);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
8
20
|
::backdrop {
|
|
9
21
|
--sl-color-backdrop-overlay: hsl(0 0 0% / 0.9);
|
|
10
22
|
}
|
|
@@ -26,14 +38,14 @@ import Default from '@astrojs/starlight/components/Search.astro'
|
|
|
26
38
|
}
|
|
27
39
|
|
|
28
40
|
& dialog {
|
|
29
|
-
animation-name:
|
|
41
|
+
animation-name: nova-search-dialog-zoom-out;
|
|
30
42
|
animation-duration: 150ms;
|
|
31
43
|
transform: translateZ(0);
|
|
32
44
|
}
|
|
33
45
|
|
|
34
46
|
& dialog[open] {
|
|
35
47
|
animation-duration: 50ms;
|
|
36
|
-
animation-name:
|
|
48
|
+
animation-name: nova-search-dialog-zoom-in;
|
|
37
49
|
}
|
|
38
50
|
|
|
39
51
|
& dialog::backdrop {
|
|
@@ -41,17 +53,17 @@ import Default from '@astrojs/starlight/components/Search.astro'
|
|
|
41
53
|
backdrop-filter: none;
|
|
42
54
|
|
|
43
55
|
animation-duration: 150ms;
|
|
44
|
-
animation-name:
|
|
56
|
+
animation-name: nova-search-backdrop-fade-out;
|
|
45
57
|
}
|
|
46
58
|
|
|
47
59
|
& dialog[open]::backdrop {
|
|
48
60
|
animation-duration: 50ms;
|
|
49
|
-
animation-name:
|
|
61
|
+
animation-name: nova-search-backdrop-fade-in;
|
|
50
62
|
}
|
|
51
63
|
}
|
|
52
64
|
}
|
|
53
65
|
|
|
54
|
-
@keyframes
|
|
66
|
+
@keyframes nova-search-backdrop-fade-in {
|
|
55
67
|
from {
|
|
56
68
|
background-color: transparent;
|
|
57
69
|
}
|
|
@@ -60,7 +72,7 @@ import Default from '@astrojs/starlight/components/Search.astro'
|
|
|
60
72
|
}
|
|
61
73
|
}
|
|
62
74
|
|
|
63
|
-
@keyframes
|
|
75
|
+
@keyframes nova-search-backdrop-fade-out {
|
|
64
76
|
from {
|
|
65
77
|
background-color: var(--sl-color-backdrop-overlay);
|
|
66
78
|
}
|
|
@@ -69,23 +81,23 @@ import Default from '@astrojs/starlight/components/Search.astro'
|
|
|
69
81
|
}
|
|
70
82
|
}
|
|
71
83
|
|
|
72
|
-
|
|
73
|
-
--
|
|
74
|
-
--
|
|
84
|
+
site-search {
|
|
85
|
+
--nova-search-dialog-zoom-scale: 1;
|
|
86
|
+
--nova-search-dialog-zoom-translate-y: 0;
|
|
75
87
|
}
|
|
76
88
|
|
|
77
89
|
@media (min-width: 72rem) {
|
|
78
|
-
|
|
79
|
-
--
|
|
80
|
-
--
|
|
90
|
+
site-search {
|
|
91
|
+
--nova-search-dialog-zoom-scale: 0.95;
|
|
92
|
+
--nova-search-dialog-zoom-translate-y: -1rem;
|
|
81
93
|
}
|
|
82
94
|
}
|
|
83
95
|
|
|
84
|
-
@keyframes
|
|
96
|
+
@keyframes nova-search-dialog-zoom-in {
|
|
85
97
|
from {
|
|
86
98
|
opacity: 0;
|
|
87
|
-
transform: scale(var(--
|
|
88
|
-
translateY(var(--
|
|
99
|
+
transform: scale(var(--nova-search-dialog-zoom-scale))
|
|
100
|
+
translateY(var(--nova-search-dialog-zoom-translate-y));
|
|
89
101
|
}
|
|
90
102
|
to {
|
|
91
103
|
opacity: 1;
|
|
@@ -93,15 +105,15 @@ import Default from '@astrojs/starlight/components/Search.astro'
|
|
|
93
105
|
}
|
|
94
106
|
}
|
|
95
107
|
|
|
96
|
-
@keyframes
|
|
108
|
+
@keyframes nova-search-dialog-zoom-out {
|
|
97
109
|
from {
|
|
98
110
|
opacity: 1;
|
|
99
111
|
transform: scale(1) translateY(0);
|
|
100
112
|
}
|
|
101
113
|
to {
|
|
102
114
|
opacity: 0;
|
|
103
|
-
transform: scale(var(--
|
|
104
|
-
translateY(var(--
|
|
115
|
+
transform: scale(var(--nova-search-dialog-zoom-scale))
|
|
116
|
+
translateY(var(--nova-search-dialog-zoom-translate-y));
|
|
105
117
|
}
|
|
106
118
|
}
|
|
107
119
|
</style>
|
package/src/constants.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const PAGE_TITLE_ID = '_top'
|
package/src/index.ts
CHANGED
|
@@ -19,6 +19,9 @@ const components = {
|
|
|
19
19
|
MobileMenuToggle: 'starlight-theme-nova/components/MobileMenuToggle.astro',
|
|
20
20
|
TwoColumnContent: 'starlight-theme-nova/components/TwoColumnContent.astro',
|
|
21
21
|
MarkdownContent: 'starlight-theme-nova/components/MarkdownContent.astro',
|
|
22
|
+
Hero: 'starlight-theme-nova/components/Hero.astro',
|
|
23
|
+
MobileTableOfContents:
|
|
24
|
+
'starlight-theme-nova/components/MobileTableOfContents.astro',
|
|
22
25
|
} as const
|
|
23
26
|
|
|
24
27
|
export type { ThemeNovaOptions }
|
|
@@ -33,9 +36,7 @@ export default function starlightThemeNova(
|
|
|
33
36
|
const newConfig = {
|
|
34
37
|
customCss: [
|
|
35
38
|
// Including any user CSS *after* our own.
|
|
36
|
-
'starlight-theme-nova/styles.
|
|
37
|
-
'starlight-theme-nova/shiki.css',
|
|
38
|
-
'starlight-theme-nova/markdown.css',
|
|
39
|
+
'starlight-theme-nova/styles.css',
|
|
39
40
|
...(config.customCss || []),
|
|
40
41
|
],
|
|
41
42
|
components: {
|
package/src/shiki-config.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
transformerMetaHighlight,
|
|
3
|
+
transformerMetaWordHighlight,
|
|
3
4
|
transformerNotationDiff,
|
|
4
5
|
transformerNotationHighlight,
|
|
6
|
+
transformerNotationWordHighlight,
|
|
5
7
|
} from '@shikijs/transformers'
|
|
6
8
|
import { transformerTwoslash } from '@shikijs/twoslash'
|
|
7
9
|
import type { ShikiTransformer } from '@shikijs/types'
|
|
@@ -12,9 +14,12 @@ import { transformerCopyButton } from './shiki-transformer-copy-button'
|
|
|
12
14
|
|
|
13
15
|
export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
|
|
14
16
|
const transformers: ShikiTransformer[] = [
|
|
17
|
+
transformerMetaHighlight(),
|
|
18
|
+
transformerMetaWordHighlight(),
|
|
15
19
|
transformerNotationDiff(),
|
|
16
20
|
transformerNotationHighlight(),
|
|
17
|
-
|
|
21
|
+
transformerNotationWordHighlight(),
|
|
22
|
+
|
|
18
23
|
transformerCopyButton(),
|
|
19
24
|
options.twoslash
|
|
20
25
|
? transformerTwoslash({
|