@astrojs/starlight 0.0.5 → 0.0.6
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/404.astro +16 -11
- package/CHANGELOG.md +16 -0
- package/README.md +4 -0
- package/components/HeadSEO.astro +4 -1
- package/components/RightSidebarPanel.astro +11 -3
- package/components/SidebarSublist.astro +4 -4
- package/components/TableOfContents/MobileTableOfContents.astro +66 -38
- package/components/TableOfContents/TableOfContentsList.astro +33 -6
- package/components/TableOfContents/generateToC.ts +5 -13
- package/components/TableOfContents/starlight-toc.ts +85 -0
- package/components/TableOfContents.astro +11 -4
- package/index.astro +2 -6
- package/package.json +1 -1
package/404.astro
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
import
|
|
3
|
-
import MarkdownContent from './components/MarkdownContent.astro';
|
|
4
|
-
import ThemeProvider from './components/ThemeProvider.astro';
|
|
5
|
-
import PageFrame from './layout/PageFrame.astro';
|
|
2
|
+
import config from 'virtual:starlight/user-config';
|
|
6
3
|
|
|
7
4
|
// Built-in CSS styles.
|
|
8
5
|
import './style/props.css';
|
|
@@ -10,10 +7,18 @@ import './style/reset.css';
|
|
|
10
7
|
import './style/shiki.css';
|
|
11
8
|
import './style/util.css';
|
|
12
9
|
|
|
13
|
-
//
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
// Layout
|
|
11
|
+
import PageFrame from './layout/PageFrame.astro';
|
|
12
|
+
|
|
13
|
+
// Components
|
|
14
|
+
import Header from './components/Header.astro';
|
|
15
|
+
import MarkdownContent from './components/MarkdownContent.astro';
|
|
16
|
+
import ThemeProvider from './components/ThemeProvider.astro';
|
|
17
|
+
|
|
18
|
+
// Important that this is the last import so it can override built-in styles.
|
|
19
|
+
import 'virtual:starlight/user-css';
|
|
20
|
+
|
|
21
|
+
const { lang = 'en', dir = 'ltr', locale } = config.defaultLocale || {};
|
|
17
22
|
---
|
|
18
23
|
|
|
19
24
|
<html lang={lang} dir={dir}>
|
|
@@ -26,9 +31,9 @@ const locale = undefined;
|
|
|
26
31
|
<ThemeProvider />
|
|
27
32
|
<PageFrame>
|
|
28
33
|
<Header slot="header" locale={locale} />
|
|
29
|
-
<main
|
|
34
|
+
<main>
|
|
30
35
|
<MarkdownContent>
|
|
31
|
-
<h1>404</h1>
|
|
36
|
+
<h1 id="starlight__overview">404</h1>
|
|
32
37
|
<p>Houston, we have a problem.</p>
|
|
33
38
|
<p>
|
|
34
39
|
We couldn’t find that link. Check the address or <a
|
|
@@ -40,7 +45,7 @@ const locale = undefined;
|
|
|
40
45
|
</PageFrame>
|
|
41
46
|
|
|
42
47
|
<style>
|
|
43
|
-
|
|
48
|
+
main {
|
|
44
49
|
margin: auto;
|
|
45
50
|
padding: clamp(2rem, 10vmin, 6rem) var(--sl-nav-pad-x);
|
|
46
51
|
max-width: var(--sl-content-width);
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @astrojs/starlight
|
|
2
2
|
|
|
3
|
+
## 0.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#47](https://github.com/withastro/starlight/pull/47) [`e96d9a7`](https://github.com/withastro/starlight/commit/e96d9a7628c5c04fe34dbc65ddd6fabdc0667a6d) Thanks [@delucis](https://github.com/delucis)! - Fix CSS ordering issue caused by imports in 404 route.
|
|
8
|
+
|
|
9
|
+
- [#47](https://github.com/withastro/starlight/pull/47) [`e96d9a7`](https://github.com/withastro/starlight/commit/e96d9a7628c5c04fe34dbc65ddd6fabdc0667a6d) Thanks [@delucis](https://github.com/delucis)! - Highlight current page section in table of contents.
|
|
10
|
+
|
|
11
|
+
- [`1028119`](https://github.com/withastro/starlight/commit/10281196aba65075e4ac202dc0f23927c44403ee) Thanks [@delucis](https://github.com/delucis)! - Use default locale in `404.astro`.
|
|
12
|
+
|
|
13
|
+
- [`05f8fd4`](https://github.com/withastro/starlight/commit/05f8fd4c3114e4c25075b35086c5b3e7d0ff49d7) Thanks [@delucis](https://github.com/delucis)! - Include `initial-scale=1` in viewport meta tag.
|
|
14
|
+
|
|
15
|
+
- [#47](https://github.com/withastro/starlight/pull/47) [`e96d9a7`](https://github.com/withastro/starlight/commit/e96d9a7628c5c04fe34dbc65ddd6fabdc0667a6d) Thanks [@delucis](https://github.com/delucis)! - Fix usage of `aria-current` in navigation sidebar to use `page` value.
|
|
16
|
+
|
|
17
|
+
- [#48](https://github.com/withastro/starlight/pull/48) [`a49485d`](https://github.com/withastro/starlight/commit/a49485def3fe4f505e90bf934eedcb135b3d3f51) Thanks [@delucis](https://github.com/delucis)! - Improve right sidebar layout.
|
|
18
|
+
|
|
3
19
|
## 0.0.5
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -12,6 +12,9 @@ Starlight is a documentation website framework for [Astro][astro].
|
|
|
12
12
|
|
|
13
13
|
## Contributing
|
|
14
14
|
|
|
15
|
+
Join us as a Starlight contributor! These links will help you get started:
|
|
16
|
+
|
|
17
|
+
- [Contributor Manual][contributing]
|
|
15
18
|
- [Code of Conduct][coc]
|
|
16
19
|
- [Community Guide][community]
|
|
17
20
|
|
|
@@ -23,6 +26,7 @@ Copyright (c) 2023–present [Starlight contributors][contributors]
|
|
|
23
26
|
|
|
24
27
|
[astro]: https://astro.build/
|
|
25
28
|
[docs]: https://starlight.astro.build/
|
|
29
|
+
[contributing]: https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md
|
|
26
30
|
[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
|
|
27
31
|
[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
|
|
28
32
|
[contributors]: https://github.com/withastro/starlight/graphs/contributors
|
package/components/HeadSEO.astro
CHANGED
|
@@ -20,7 +20,10 @@ const description = data.description || config.description;
|
|
|
20
20
|
|
|
21
21
|
const headDefaults: z.input<ReturnType<typeof HeadConfigSchema>> = [
|
|
22
22
|
{ tag: 'meta', attrs: { charset: 'utf-8' } },
|
|
23
|
-
{
|
|
23
|
+
{
|
|
24
|
+
tag: 'meta',
|
|
25
|
+
attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
|
26
|
+
},
|
|
24
27
|
{ tag: 'title', content: title },
|
|
25
28
|
{ tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } },
|
|
26
29
|
{ tag: 'meta', attrs: { name: 'generator', content: Astro.generator } },
|
|
@@ -12,18 +12,21 @@
|
|
|
12
12
|
border-top: 1px solid var(--sl-color-hairline);
|
|
13
13
|
}
|
|
14
14
|
.container {
|
|
15
|
-
width: var(--sl-sidebar-width);
|
|
15
|
+
width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
|
|
16
16
|
}
|
|
17
17
|
.right-sidebar-panel :global(h2) {
|
|
18
18
|
color: var(--sl-color-white);
|
|
19
|
-
font-size: var(--sl-text-
|
|
19
|
+
font-size: var(--sl-text-h5);
|
|
20
20
|
font-weight: 600;
|
|
21
|
+
line-height: var(--sl-line-height-headings);
|
|
22
|
+
margin-bottom: 0.5rem;
|
|
21
23
|
}
|
|
22
24
|
.right-sidebar-panel :global(a) {
|
|
23
25
|
display: block;
|
|
24
26
|
font-size: var(--sl-text-xs);
|
|
25
27
|
text-decoration: none;
|
|
26
28
|
color: var(--sl-color-gray-3);
|
|
29
|
+
word-break: break-word;
|
|
27
30
|
}
|
|
28
31
|
.right-sidebar-panel :global(a:hover) {
|
|
29
32
|
color: var(--sl-color-white);
|
|
@@ -31,7 +34,12 @@
|
|
|
31
34
|
@media (min-width: 72rem) {
|
|
32
35
|
.container {
|
|
33
36
|
max-width: calc(
|
|
34
|
-
|
|
37
|
+
(
|
|
38
|
+
(
|
|
39
|
+
100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
|
|
40
|
+
var(--sl-sidebar-pad-x)
|
|
41
|
+
) * 0.25 /* MAGIC NUMBER 🥲 */
|
|
42
|
+
)
|
|
35
43
|
);
|
|
36
44
|
}
|
|
37
45
|
}
|
|
@@ -11,7 +11,7 @@ interface Props {
|
|
|
11
11
|
Astro.props.sublist.map((entry) => (
|
|
12
12
|
<li class:list={{ 'sidebar-group': entry.type === 'group' }}>
|
|
13
13
|
{entry.type === 'link' ? (
|
|
14
|
-
<a href={entry.href} aria-current={entry.isCurrent && '
|
|
14
|
+
<a href={entry.href} aria-current={entry.isCurrent && 'page'}>
|
|
15
15
|
{entry.label}
|
|
16
16
|
</a>
|
|
17
17
|
) : (
|
|
@@ -56,9 +56,9 @@ interface Props {
|
|
|
56
56
|
color: var(--sl-color-white);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
[aria-current='
|
|
60
|
-
[aria-current='
|
|
61
|
-
[aria-current='
|
|
59
|
+
[aria-current='page'],
|
|
60
|
+
[aria-current='page']:hover,
|
|
61
|
+
[aria-current='page']:focus {
|
|
62
62
|
font-weight: 600;
|
|
63
63
|
color: var(--sl-color-text-invert);
|
|
64
64
|
background-color: var(--sl-color-text-accent);
|
|
@@ -12,19 +12,25 @@ interface Props {
|
|
|
12
12
|
const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
13
13
|
---
|
|
14
14
|
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
<mobile-starlight-toc
|
|
16
|
+
data-min-h={config.tableOfContents.minHeadingLevel}
|
|
17
|
+
data-max-h={config.tableOfContents.maxHeadingLevel}
|
|
18
|
+
>
|
|
19
|
+
<nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden">
|
|
20
|
+
<details id="starlight__mobile-toc">
|
|
21
|
+
<summary id="starlight__on-this-page--mobile" class="flex">
|
|
22
|
+
<div class="toggle flex">
|
|
23
|
+
On this page
|
|
24
|
+
<Icon name={'right-caret'} class="caret" size="1rem" />
|
|
25
|
+
</div>
|
|
26
|
+
<span class="display-current">{toc[0]?.text}</span>
|
|
27
|
+
</summary>
|
|
28
|
+
<div class="dropdown">
|
|
29
|
+
<TableOfContentsList toc={toc} isMobile />
|
|
21
30
|
</div>
|
|
22
|
-
</
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</div>
|
|
26
|
-
</details>
|
|
27
|
-
</nav>
|
|
31
|
+
</details>
|
|
32
|
+
</nav>
|
|
33
|
+
</mobile-starlight-toc>
|
|
28
34
|
|
|
29
35
|
<style>
|
|
30
36
|
nav {
|
|
@@ -41,9 +47,12 @@ const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
summary {
|
|
50
|
+
gap: 0.5rem;
|
|
51
|
+
align-items: center;
|
|
44
52
|
height: var(--sl-mobile-toc-height);
|
|
45
53
|
border-bottom: 1px solid var(--sl-color-hairline-shade);
|
|
46
54
|
padding: 0.5rem 1rem;
|
|
55
|
+
font-size: var(--sl-text-xs);
|
|
47
56
|
outline-offset: var(--sl-outline-offset-inside);
|
|
48
57
|
}
|
|
49
58
|
summary::marker,
|
|
@@ -52,6 +61,7 @@ const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
|
52
61
|
}
|
|
53
62
|
|
|
54
63
|
.toggle {
|
|
64
|
+
flex-shrink: 0;
|
|
55
65
|
gap: 1rem;
|
|
56
66
|
align-items: center;
|
|
57
67
|
justify-content: space-between;
|
|
@@ -60,7 +70,6 @@ const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
|
60
70
|
padding-block: 0.5rem;
|
|
61
71
|
padding-inline-start: 0.75rem;
|
|
62
72
|
padding-inline-end: 0.5rem;
|
|
63
|
-
font-size: var(--sl-text-xs);
|
|
64
73
|
line-height: 1;
|
|
65
74
|
background-color: var(--sl-color-black);
|
|
66
75
|
user-select: none;
|
|
@@ -82,6 +91,13 @@ const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
|
82
91
|
transform: rotateZ(90deg);
|
|
83
92
|
}
|
|
84
93
|
|
|
94
|
+
.display-current {
|
|
95
|
+
white-space: nowrap;
|
|
96
|
+
text-overflow: ellipsis;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
color: var(--sl-color-white);
|
|
99
|
+
}
|
|
100
|
+
|
|
85
101
|
.dropdown {
|
|
86
102
|
--border-top: 1px;
|
|
87
103
|
margin-top: calc(-1 * var(--border-top));
|
|
@@ -95,31 +111,43 @@ const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
|
95
111
|
</style>
|
|
96
112
|
|
|
97
113
|
<script>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
114
|
+
import { StarlightTOC } from './starlight-toc';
|
|
115
|
+
|
|
116
|
+
class MobileStarlightTOC extends StarlightTOC {
|
|
117
|
+
override set current(link: HTMLAnchorElement) {
|
|
118
|
+
super.current = link;
|
|
119
|
+
const display = this.querySelector('.display-current') as HTMLSpanElement;
|
|
120
|
+
if (display) display.textContent = link.textContent;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
constructor() {
|
|
124
|
+
super();
|
|
125
|
+
const details = this.querySelector('details');
|
|
126
|
+
if (!details) return;
|
|
127
|
+
const closeToC = () => {
|
|
128
|
+
details.open = false;
|
|
129
|
+
};
|
|
130
|
+
// Close the table of contents whenever a link is clicked.
|
|
131
|
+
details.querySelectorAll('a').forEach((a) => {
|
|
132
|
+
a.addEventListener('click', closeToC);
|
|
133
|
+
});
|
|
134
|
+
// Close the table of contents when a user clicks outside of it.
|
|
135
|
+
window.addEventListener('click', (e) => {
|
|
136
|
+
if (!details.contains(e.target as Node)) closeToC();
|
|
137
|
+
});
|
|
138
|
+
// Or when they press the escape key.
|
|
139
|
+
window.addEventListener('keydown', (e) => {
|
|
140
|
+
if (e.key === 'Escape' && details.open) {
|
|
141
|
+
const hasFocus = details.contains(document.activeElement);
|
|
142
|
+
closeToC();
|
|
143
|
+
if (hasFocus) {
|
|
144
|
+
const summary = details.querySelector('summary');
|
|
145
|
+
if (summary) summary.focus();
|
|
146
|
+
}
|
|
121
147
|
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
148
|
+
});
|
|
149
|
+
}
|
|
124
150
|
}
|
|
151
|
+
|
|
152
|
+
customElements.define('mobile-starlight-toc', MobileStarlightTOC);
|
|
125
153
|
</script>
|
|
@@ -14,7 +14,9 @@ const { toc, isMobile = false, depth = 0 } = Astro.props;
|
|
|
14
14
|
{
|
|
15
15
|
toc.map((heading) => (
|
|
16
16
|
<li>
|
|
17
|
-
<a href={'#' + heading.slug}
|
|
17
|
+
<a href={'#' + heading.slug} aria-current={heading.current && 'true'}>
|
|
18
|
+
<span>{heading.text}</span>
|
|
19
|
+
</a>
|
|
18
20
|
{heading.children.length > 0 && (
|
|
19
21
|
<Astro.self
|
|
20
22
|
toc={heading.children}
|
|
@@ -30,27 +32,52 @@ const { toc, isMobile = false, depth = 0 } = Astro.props;
|
|
|
30
32
|
<style define:vars={{ depth }}>
|
|
31
33
|
ul {
|
|
32
34
|
padding: 0;
|
|
33
|
-
|
|
34
|
-
ul :global(::marker) {
|
|
35
|
-
color: transparent;
|
|
35
|
+
list-style: none;
|
|
36
36
|
}
|
|
37
37
|
a {
|
|
38
|
-
--pad-inline:
|
|
38
|
+
--pad-inline: 0.5rem;
|
|
39
39
|
display: block;
|
|
40
|
+
border-radius: 0.25rem;
|
|
41
|
+
padding-block: 0.25rem;
|
|
40
42
|
padding-inline: calc(1rem * var(--depth) + var(--pad-inline))
|
|
41
43
|
var(--pad-inline);
|
|
44
|
+
line-height: 1.25;
|
|
45
|
+
}
|
|
46
|
+
a[aria-current='true'],
|
|
47
|
+
a[aria-current='true']:hover,
|
|
48
|
+
a[aria-current='true']:focus {
|
|
49
|
+
font-weight: 600;
|
|
50
|
+
color: var(--sl-color-text-invert);
|
|
51
|
+
background-color: var(--sl-color-text-accent);
|
|
42
52
|
}
|
|
43
53
|
.isMobile a {
|
|
44
54
|
--pad-inline: 1rem;
|
|
55
|
+
display: flex;
|
|
56
|
+
justify-content: space-between;
|
|
57
|
+
gap: var(--pad-inline);
|
|
45
58
|
border-top: 1px solid var(--sl-color-gray-6);
|
|
59
|
+
border-radius: 0;
|
|
46
60
|
padding-block: 0.5rem;
|
|
47
61
|
color: var(--sl-color-text);
|
|
48
62
|
font-size: var(--sl-text-sm);
|
|
49
|
-
line-height: 1.25;
|
|
50
63
|
text-decoration: none;
|
|
51
64
|
outline-offset: var(--sl-outline-offset-inside);
|
|
52
65
|
}
|
|
53
66
|
.isMobile:first-child > li:first-child > a {
|
|
54
67
|
border-top: 0;
|
|
55
68
|
}
|
|
69
|
+
.isMobile a[aria-current='true'],
|
|
70
|
+
.isMobile a[aria-current='true']:hover,
|
|
71
|
+
.isMobile a[aria-current='true']:focus {
|
|
72
|
+
color: var(--sl-color-white);
|
|
73
|
+
background-color: unset;
|
|
74
|
+
}
|
|
75
|
+
.isMobile a[aria-current='true']::after {
|
|
76
|
+
content: '';
|
|
77
|
+
width: 1rem;
|
|
78
|
+
background-color: var(--sl-color-text-accent);
|
|
79
|
+
/* Check mark SVG icon */
|
|
80
|
+
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
|
|
81
|
+
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
|
|
82
|
+
}
|
|
56
83
|
</style>
|
|
@@ -2,6 +2,7 @@ import type { MarkdownHeading } from 'astro';
|
|
|
2
2
|
|
|
3
3
|
export interface TocItem extends MarkdownHeading {
|
|
4
4
|
children: TocItem[];
|
|
5
|
+
current?: boolean;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
function diveChildren(item: TocItem, depth: number): TocItem[] {
|
|
@@ -35,10 +36,7 @@ export function generateToC(
|
|
|
35
36
|
|
|
36
37
|
for (const heading of headings) {
|
|
37
38
|
if (toc.length === 0) {
|
|
38
|
-
toc.push({
|
|
39
|
-
...heading,
|
|
40
|
-
children: [],
|
|
41
|
-
});
|
|
39
|
+
toc.push({ ...heading, children: [], current: true });
|
|
42
40
|
} else {
|
|
43
41
|
const lastItemInToc = toc.at(-1)!;
|
|
44
42
|
if (heading.depth < lastItemInToc.depth) {
|
|
@@ -46,19 +44,13 @@ export function generateToC(
|
|
|
46
44
|
}
|
|
47
45
|
if (heading.depth === lastItemInToc.depth) {
|
|
48
46
|
// same depth
|
|
49
|
-
toc.push({
|
|
50
|
-
...heading,
|
|
51
|
-
children: [],
|
|
52
|
-
});
|
|
47
|
+
toc.push({ ...heading, children: [] });
|
|
53
48
|
} else {
|
|
54
49
|
// higher depth
|
|
55
|
-
// push into children, or children' children alike
|
|
50
|
+
// push into children, or children's children alike
|
|
56
51
|
const gap = heading.depth - lastItemInToc.depth;
|
|
57
52
|
const target = diveChildren(lastItemInToc, gap);
|
|
58
|
-
target.push({
|
|
59
|
-
...heading,
|
|
60
|
-
children: [],
|
|
61
|
-
});
|
|
53
|
+
target.push({ ...heading, children: [] });
|
|
62
54
|
}
|
|
63
55
|
}
|
|
64
56
|
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
export class StarlightTOC extends HTMLElement {
|
|
2
|
+
private _current = this.querySelector(
|
|
3
|
+
'a[aria-current="true"]'
|
|
4
|
+
) as HTMLAnchorElement | null;
|
|
5
|
+
private minH = parseInt(this.dataset.minH || '2', 10);
|
|
6
|
+
private maxH = parseInt(this.dataset.maxH || '3', 10);
|
|
7
|
+
|
|
8
|
+
protected set current(link: HTMLAnchorElement) {
|
|
9
|
+
if (link === this._current) return;
|
|
10
|
+
if (this._current) this._current.removeAttribute('aria-current');
|
|
11
|
+
link.setAttribute('aria-current', 'true');
|
|
12
|
+
this._current = link;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
constructor() {
|
|
16
|
+
super();
|
|
17
|
+
|
|
18
|
+
/** All the links in the table of contents. */
|
|
19
|
+
const links = [...this.querySelectorAll('a')];
|
|
20
|
+
|
|
21
|
+
/** Test if an element is a table-of-contents heading. */
|
|
22
|
+
const isHeading = (el: Element): el is HTMLHeadingElement => {
|
|
23
|
+
if (el instanceof HTMLHeadingElement) {
|
|
24
|
+
// Special case for page title h1
|
|
25
|
+
if (el.id === 'starlight__overview') return true;
|
|
26
|
+
// Check the heading level is within the user-configured limits for the ToC
|
|
27
|
+
const level = el.tagName[1];
|
|
28
|
+
if (level) {
|
|
29
|
+
const int = parseInt(level, 10);
|
|
30
|
+
if (int >= this.minH && int <= this.maxH) return true;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
return false;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
/** Walk up the DOM to find the nearest heading. */
|
|
37
|
+
const getElementHeading = (
|
|
38
|
+
el: Element | null
|
|
39
|
+
): HTMLHeadingElement | null => {
|
|
40
|
+
if (!el) return null;
|
|
41
|
+
const origin = el;
|
|
42
|
+
while (el) {
|
|
43
|
+
if (isHeading(el)) return el;
|
|
44
|
+
// Assign the previous sibling’s last, most deeply nested child to el.
|
|
45
|
+
el = el.previousElementSibling;
|
|
46
|
+
while (el?.lastElementChild) {
|
|
47
|
+
el = el.lastElementChild;
|
|
48
|
+
}
|
|
49
|
+
// Look for headings amongst siblings.
|
|
50
|
+
const h = getElementHeading(el);
|
|
51
|
+
if (h) return h;
|
|
52
|
+
}
|
|
53
|
+
// Walk back up the parent.
|
|
54
|
+
return getElementHeading(origin.parentElement);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
/** Handle intersections and set the current link to the heading for the current intersection. */
|
|
58
|
+
const setCurrent: IntersectionObserverCallback = (entries) => {
|
|
59
|
+
for (const { isIntersecting, target } of entries) {
|
|
60
|
+
if (!isIntersecting) continue;
|
|
61
|
+
const heading = getElementHeading(target);
|
|
62
|
+
if (!heading) continue;
|
|
63
|
+
const link = links.find((link) => link.hash === '#' + heading.id);
|
|
64
|
+
if (link) {
|
|
65
|
+
this.current = link;
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
const headingsObserver = new IntersectionObserver(setCurrent, {
|
|
72
|
+
rootMargin: '5% 0% -85%',
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
// Observe elements with an `id` (most likely headings) and their siblings.
|
|
76
|
+
// Also observe direct children of `.content` to include elements before
|
|
77
|
+
// the first heading.
|
|
78
|
+
const toObserve = document.querySelectorAll(
|
|
79
|
+
'main [id], main [id] ~ *, main .content > *'
|
|
80
|
+
);
|
|
81
|
+
toObserve.forEach((h) => headingsObserver.observe(h));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
customElements.define('starlight-toc', StarlightTOC);
|
|
@@ -11,7 +11,14 @@ interface Props {
|
|
|
11
11
|
const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
<starlight-toc
|
|
15
|
+
data-min-h={config.tableOfContents.minHeadingLevel}
|
|
16
|
+
data-max-h={config.tableOfContents.maxHeadingLevel}
|
|
17
|
+
>
|
|
18
|
+
<nav aria-labelledby="starlight__on-this-page">
|
|
19
|
+
<h2 id="starlight__on-this-page">On this page</h2>
|
|
20
|
+
<TableOfContentsList toc={toc} />
|
|
21
|
+
</nav>
|
|
22
|
+
</starlight-toc>
|
|
23
|
+
|
|
24
|
+
<script src="./TableOfContents/starlight-toc"></script>
|
package/index.astro
CHANGED
|
@@ -57,14 +57,10 @@ const prevNextLinks = getPrevNextLinks(sidebar);
|
|
|
57
57
|
<MobileTableOfContents headings={headings} />
|
|
58
58
|
<TwoColumnContent>
|
|
59
59
|
<RightSidebar slot="right-sidebar" entry={entry} headings={headings} />
|
|
60
|
-
<main
|
|
61
|
-
id="starlight__overview"
|
|
62
|
-
data-pagefind-body
|
|
63
|
-
lang={entryMeta.lang}
|
|
64
|
-
dir={entryMeta.dir}
|
|
65
|
-
>
|
|
60
|
+
<main data-pagefind-body lang={entryMeta.lang} dir={entryMeta.dir}>
|
|
66
61
|
<ContentPanel>
|
|
67
62
|
<h1
|
|
63
|
+
id="starlight__overview"
|
|
68
64
|
style="font-size: var(--sl-text-h1); line-height: var(--sl-line-height-headings); font-weight: 600; color: var(--sl-color-white); margin-top: 1rem;"
|
|
69
65
|
>
|
|
70
66
|
{entry.data.title}
|