starlight-theme-nova 0.0.6 → 0.1.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.
Files changed (10) hide show
  1. package/lib/styles.gen.css +14 -9
  2. package/package.json +4 -4
  3. package/src/astro.d.ts +1 -1
  4. package/src/components/Hero.astro +165 -0
  5. package/src/components/LinkButton.astro +7 -5
  6. package/src/components/MobileTableOfContents.astro +13 -0
  7. package/src/components/Pagination.astro +1 -0
  8. package/src/constants.ts +1 -0
  9. package/src/index.ts +3 -0
  10. package/src/shiki-config.ts +0 -1
package/lib/styles.gen.css CHANGED
@@ -22,6 +22,7 @@
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);
25
26
  }
26
27
 
27
28
  /* Light mode Starlight theme variables */
@@ -42,23 +43,24 @@
42
43
 
43
44
  --sl-color-bg-inline-code: #f3f4f6;
44
45
  --sl-color-border-inline-code: #d1d5db;
46
+ --sl-color-bg-nav: color-mix(in srgb, #fff 80%, transparent);
45
47
  }
46
48
 
47
49
  /* layer: shortcuts */
48
50
  .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
51
  .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,
52
+ .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
53
  .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
54
  .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
55
  .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
56
  .nova-code-container{position:relative;}
55
57
  .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
58
  .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:rgb(255 255 255 / 0.8) /* #fff */;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);}
59
+ .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
60
  .nova-link-card-link::before{position:absolute;inset:0;content:'';}
59
61
  .nova-header-title{margin:-0.25rem;min-width:0;display:flex;overflow:clip;padding:0.25rem;}
60
62
  .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;--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;}
63
+ .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
64
  .nova-header{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:0.5rem;}
63
65
  .nova-header-actions{display:none;align-items:center;gap:0.5rem;}
64
66
  .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 +70,7 @@
68
70
  .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
71
  .nova-header-search{display:flex;}
70
72
  .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;}
73
+ .nova-pagination-divider{flex:1 1 0%;}
71
74
  .nova-pagination-link[rel="next"]{flex-direction:row;}
72
75
  .nova-pagination-link[rel="prev"]{flex-direction:row-reverse;}
73
76
  .nova-link-button:hover .nova-link-button-icon,
@@ -78,31 +81,33 @@
78
81
  .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
82
  .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
83
  .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 */;}
84
+ .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);}
85
+ .nova-mobile-table-of-contents summary{border-bottom-color:var(--sl-color-hairline);}
82
86
  .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
87
  .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 */;}
88
+ .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
89
  .dark .nova-link-button-secondary,
86
90
  .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
91
  .dark .nova-code-copy-button:hover{background-color:rgb(107 114 128 / 0.5) /* #6b7280 */;}
89
92
  .nova-code-copy-button:hover{background-color:rgb(229 231 235 / 0.5) /* #e5e7eb */;}
90
93
  .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 */;}
94
+ .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
95
  .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 */;}
96
+ .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
97
  .dark .nova-link-card:hover{--nova-bg-opacity:1;background-color:rgb(55 65 81 / var(--nova-bg-opacity)) /* #374151 */;}
95
98
  .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
99
  .nova-social-icons-link:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
97
100
  .nova-theme-select:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
98
101
  .nova-site-title *{font-size:1.125rem;line-height:1.75rem;color:var(--sl-color-text) /* var(--sl-color-text) */;font-weight:600;}
99
102
  .nova-header-nav-link{color:var(--sl-color-gray-3) /* var(--sl-color-gray-3) */;text-decoration:none;}
103
+ .dark .nova-link-button-minimal,
100
104
  .dark .nova-link-card-link{--nova-text-opacity:1;color:rgb(229 231 235 / var(--nova-text-opacity)) /* #e5e7eb */;}
105
+ .nova-link-button-minimal{--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;}
101
106
  .nova-header-nav-link:hover{color:var(--sl-color-white) /* var(--sl-color-white) */;}
102
107
  .nova-pagination-link:hover{color:var(--sl-color-white) /* var(--sl-color-white) */;}
103
108
  .nova-code-container .nova-code-copy-button{opacity:0;}
104
109
  .nova-code-container:hover .nova-code-copy-button{opacity:1;}
105
- .nova-link-button:hover{--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);}
110
+ .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
111
  @media print{
107
112
  .nova-header-actions,
108
113
  .nova-header-search{display:none;}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "starlight-theme-nova",
3
3
  "type": "module",
4
- "version": "0.0.6",
4
+ "version": "0.1.0",
5
5
  "description": "",
6
6
  "author": "ocavue <ocavue@gmail.com>",
7
7
  "license": "MIT",
@@ -29,12 +29,12 @@
29
29
  "@shikijs/transformers": "^3.2.1",
30
30
  "@shikijs/twoslash": "^3.2.1",
31
31
  "@shikijs/types": "^3.2.1",
32
- "astro-theme-toggle": "^0.5.1",
32
+ "astro-theme-toggle": "^0.6.0",
33
33
  "hast-util-is-element": "^3.0.0",
34
34
  "shiki-twoslash-renderer": "0.0.2"
35
35
  },
36
36
  "devDependencies": {
37
- "@astrojs/starlight": "^0.32.2",
37
+ "@astrojs/starlight": "^0.32.3",
38
38
  "@iconify-json/bxl": "^1.2.2",
39
39
  "@iconify-json/logos": "^1.2.4",
40
40
  "@iconify-json/lucide": "^1.2.30",
@@ -42,7 +42,7 @@
42
42
  "@ocavue/tsconfig": "^0.2.0",
43
43
  "@types/node": "^20.17.24",
44
44
  "@unocss/cli": "^66.0.0",
45
- "astro": "^5.5.2",
45
+ "astro": "^5.5.3",
46
46
  "typescript": "^5.7.2",
47
47
  "unocss": "^66.0.0",
48
48
  "unocss-preset-animations": "^1.1.1"
package/src/astro.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  declare module '*.astro' {
2
- import { type AstroComponentFactory } from 'astro/runtime/server/index.js'
2
+ import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
3
3
 
4
4
  const content: AstroComponentFactory
5
5
  export default content
package/src/components/Hero.astro ADDED
@@ -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>
package/src/components/LinkButton.astro CHANGED
@@ -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
- variant === 'primary'
17
- ? 'nova-link-button-primary'
18
- : 'nova-link-button-secondary',
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>
package/src/components/MobileTableOfContents.astro ADDED
@@ -0,0 +1,13 @@
1
+ ---
2
+ import Default from '@astrojs/starlight/components/MobileTableOfContents.astro'
3
+
4
+ const { toc } = Astro.locals.starlightRoute
5
+ ---
6
+
7
+ {
8
+ toc && (
9
+ <div class="nova-mobile-table-of-contents">
10
+ <Default />
11
+ </div>
12
+ )
13
+ }
package/src/components/Pagination.astro CHANGED
@@ -17,6 +17,7 @@ const isRtl = dir === 'rtl'
17
17
  />
18
18
  )
19
19
  }
20
+ <div class="nova-pagination-divider"></div>
20
21
  {
21
22
  next && (
22
23
  <PaginationLink
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 }
package/src/shiki-config.ts CHANGED
@@ -30,7 +30,6 @@ export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
30
30
  dark: 'github-dark-dimmed',
31
31
  },
32
32
  defaultColor: false,
33
- // @ts-expect-error: Astro is using outdated Shiki v1
34
33
  transformers: transformers,
35
34
  }
36
35
  }