@astrojs/starlight 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/README.md +1 -1
- package/components/Header.astro +1 -1
- package/components/RightSidebar.astro +29 -0
- package/components/TableOfContents/MobileTableOfContents.astro +125 -0
- package/components/TableOfContents/TableOfContentsList.astro +29 -8
- package/index.astro +4 -19
- package/layout/PageFrame.astro +2 -1
- package/layout/TwoColumnContent.astro +1 -1
- package/package.json +8 -1
- package/style/props.css +7 -1
- package/style/util.css +11 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @astrojs/starlight
|
|
2
2
|
|
|
3
|
+
## 0.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`1f62c75`](https://github.com/withastro/starlight/commit/1f62c75297ed44da721350840744823876a64bc5) Thanks [@delucis](https://github.com/delucis)! - Add repo, issues & homepage links to package.json
|
|
8
|
+
|
|
9
|
+
- [#36](https://github.com/withastro/starlight/pull/36) [`62265e4`](https://github.com/withastro/starlight/commit/62265e4a653d161483e3844b568ab150334e9238) Thanks [@delucis](https://github.com/delucis)! - Collapse table of contents in dropdown on narrower viewports
|
|
10
|
+
|
|
3
11
|
## 0.0.2
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
package/README.md
CHANGED
package/components/Header.astro
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { MarkdownHeading } from 'astro';
|
|
3
|
+
import type { CollectionEntry } from 'astro:content';
|
|
4
|
+
import config from 'virtual:starlight/user-config';
|
|
5
|
+
import EditLink from './EditLink.astro';
|
|
6
|
+
import RightSidebarPanel from './RightSidebarPanel.astro';
|
|
7
|
+
import TableOfContents from './TableOfContents.astro';
|
|
8
|
+
|
|
9
|
+
interface Props {
|
|
10
|
+
entry: CollectionEntry<'docs'>;
|
|
11
|
+
headings: MarkdownHeading[];
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const { entry, headings } = Astro.props;
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
<RightSidebarPanel>
|
|
18
|
+
<TableOfContents headings={headings} />
|
|
19
|
+
</RightSidebarPanel>
|
|
20
|
+
<RightSidebarPanel>
|
|
21
|
+
{
|
|
22
|
+
config.editLink.baseUrl && (
|
|
23
|
+
<>
|
|
24
|
+
<h2>Contribute</h2>
|
|
25
|
+
<EditLink data={entry.data} id={entry.id} />
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
</RightSidebarPanel>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { MarkdownHeading } from 'astro';
|
|
3
|
+
import config from 'virtual:starlight/user-config';
|
|
4
|
+
import { generateToC } from './generateToC';
|
|
5
|
+
import TableOfContentsList from './TableOfContentsList.astro';
|
|
6
|
+
import Icon from '../Icon.astro';
|
|
7
|
+
|
|
8
|
+
interface Props {
|
|
9
|
+
headings: MarkdownHeading[];
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const toc = generateToC(Astro.props.headings, config.tableOfContents);
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
<nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden">
|
|
16
|
+
<details id="starlight__mobile-toc">
|
|
17
|
+
<summary id="starlight__on-this-page--mobile" class="flex">
|
|
18
|
+
<div class="toggle flex">
|
|
19
|
+
On this page
|
|
20
|
+
<Icon name={'right-caret'} class="caret" size="1rem" />
|
|
21
|
+
</div>
|
|
22
|
+
</summary>
|
|
23
|
+
<div class="dropdown">
|
|
24
|
+
<TableOfContentsList toc={toc} isMobile />
|
|
25
|
+
</div>
|
|
26
|
+
</details>
|
|
27
|
+
</nav>
|
|
28
|
+
|
|
29
|
+
<style>
|
|
30
|
+
nav {
|
|
31
|
+
position: fixed;
|
|
32
|
+
top: calc(var(--sl-nav-height) - 1px);
|
|
33
|
+
inset-inline: 0;
|
|
34
|
+
border-top: 1px solid var(--sl-color-gray-5);
|
|
35
|
+
background-color: var(--sl-color-bg-nav);
|
|
36
|
+
}
|
|
37
|
+
@media (min-width: 50rem) {
|
|
38
|
+
nav {
|
|
39
|
+
inset-inline-start: var(--sl-sidebar-width);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
summary {
|
|
44
|
+
height: var(--sl-mobile-toc-height);
|
|
45
|
+
border-bottom: 1px solid var(--sl-color-hairline-shade);
|
|
46
|
+
padding: 0.5rem 1rem;
|
|
47
|
+
outline-offset: var(--sl-outline-offset-inside);
|
|
48
|
+
}
|
|
49
|
+
summary::marker,
|
|
50
|
+
summary::-webkit-details-marker {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.toggle {
|
|
55
|
+
gap: 1rem;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: space-between;
|
|
58
|
+
border: 1px solid var(--sl-color-gray-5);
|
|
59
|
+
border-radius: 0.5rem;
|
|
60
|
+
padding-block: 0.5rem;
|
|
61
|
+
padding-inline-start: 0.75rem;
|
|
62
|
+
padding-inline-end: 0.5rem;
|
|
63
|
+
font-size: var(--sl-text-xs);
|
|
64
|
+
line-height: 1;
|
|
65
|
+
background-color: var(--sl-color-black);
|
|
66
|
+
user-select: none;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
details[open] .toggle {
|
|
70
|
+
color: var(--sl-color-white);
|
|
71
|
+
border-color: var(--sl-color-accent);
|
|
72
|
+
}
|
|
73
|
+
details .toggle:hover {
|
|
74
|
+
color: var(--sl-color-white);
|
|
75
|
+
border-color: var(--sl-color-gray-2);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
:global([dir='rtl']) .caret {
|
|
79
|
+
transform: rotateZ(180deg);
|
|
80
|
+
}
|
|
81
|
+
details[open] .caret {
|
|
82
|
+
transform: rotateZ(90deg);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.dropdown {
|
|
86
|
+
--border-top: 1px;
|
|
87
|
+
margin-top: calc(-1 * var(--border-top));
|
|
88
|
+
border: var(--border-top) solid var(--sl-color-gray-6);
|
|
89
|
+
border-top-color: var(--sl-color-hairline-shade);
|
|
90
|
+
max-height: calc(85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height));
|
|
91
|
+
overflow-y: auto;
|
|
92
|
+
background-color: var(--sl-color-black);
|
|
93
|
+
box-shadow: var(--sl-shadow-md);
|
|
94
|
+
}
|
|
95
|
+
</style>
|
|
96
|
+
|
|
97
|
+
<script>
|
|
98
|
+
const details = document.querySelector<HTMLDetailsElement>(
|
|
99
|
+
'#starlight__mobile-toc'
|
|
100
|
+
);
|
|
101
|
+
if (details) {
|
|
102
|
+
const closeToC = () => {
|
|
103
|
+
details.open = false;
|
|
104
|
+
};
|
|
105
|
+
// Close the table of contents whenever a link is clicked.
|
|
106
|
+
details.querySelectorAll('a').forEach((a) => {
|
|
107
|
+
a.addEventListener('click', closeToC);
|
|
108
|
+
});
|
|
109
|
+
// Close the table of contents when a user clicks outside of it.
|
|
110
|
+
window.addEventListener('click', (e) => {
|
|
111
|
+
if (!details.contains(e.target as Node)) closeToC();
|
|
112
|
+
});
|
|
113
|
+
// Or when they press the escape key.
|
|
114
|
+
window.addEventListener('keydown', (e) => {
|
|
115
|
+
if (e.key === 'Escape' && details.open) {
|
|
116
|
+
const hasFocus = details.contains(document.activeElement);
|
|
117
|
+
closeToC();
|
|
118
|
+
if (hasFocus) {
|
|
119
|
+
const summary = details.querySelector('summary');
|
|
120
|
+
if (summary) summary.focus();
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
</script>
|
|
@@ -3,33 +3,54 @@ import type { generateToC } from './generateToC';
|
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
5
|
toc: ReturnType<typeof generateToC>;
|
|
6
|
-
|
|
6
|
+
depth?: number;
|
|
7
|
+
isMobile?: boolean;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
const { toc,
|
|
10
|
+
const { toc, isMobile = false, depth = 0 } = Astro.props;
|
|
10
11
|
---
|
|
11
12
|
|
|
12
|
-
<ul class:list={{
|
|
13
|
+
<ul class:list={{ isMobile }}>
|
|
13
14
|
{
|
|
14
15
|
toc.map((heading) => (
|
|
15
16
|
<li>
|
|
16
17
|
<a href={'#' + heading.slug}>{heading.text}</a>
|
|
17
18
|
{heading.children.length > 0 && (
|
|
18
|
-
<Astro.self
|
|
19
|
+
<Astro.self
|
|
20
|
+
toc={heading.children}
|
|
21
|
+
depth={depth + 1}
|
|
22
|
+
isMobile={isMobile}
|
|
23
|
+
/>
|
|
19
24
|
)}
|
|
20
25
|
</li>
|
|
21
26
|
))
|
|
22
27
|
}
|
|
23
28
|
</ul>
|
|
24
29
|
|
|
25
|
-
<style>
|
|
30
|
+
<style define:vars={{ depth }}>
|
|
26
31
|
ul {
|
|
27
32
|
padding: 0;
|
|
28
33
|
}
|
|
29
|
-
.nested {
|
|
30
|
-
padding-inline-start: 1rem;
|
|
31
|
-
}
|
|
32
34
|
ul :global(::marker) {
|
|
33
35
|
color: transparent;
|
|
34
36
|
}
|
|
37
|
+
a {
|
|
38
|
+
--pad-inline: 0rem;
|
|
39
|
+
display: block;
|
|
40
|
+
padding-inline: calc(1rem * var(--depth) + var(--pad-inline))
|
|
41
|
+
var(--pad-inline);
|
|
42
|
+
}
|
|
43
|
+
.isMobile a {
|
|
44
|
+
--pad-inline: 1rem;
|
|
45
|
+
border-top: 1px solid var(--sl-color-gray-6);
|
|
46
|
+
padding-block: 0.5rem;
|
|
47
|
+
color: var(--sl-color-text);
|
|
48
|
+
font-size: var(--sl-text-sm);
|
|
49
|
+
line-height: 1.25;
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
outline-offset: var(--sl-outline-offset-inside);
|
|
52
|
+
}
|
|
53
|
+
.isMobile:first-child > li:first-child > a {
|
|
54
|
+
border-top: 0;
|
|
55
|
+
}
|
|
35
56
|
</style>
|
package/index.astro
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { InferGetStaticPropsType } from 'astro';
|
|
3
|
-
import config from 'virtual:starlight/user-config';
|
|
4
3
|
|
|
5
4
|
import { getPrevNextLinks, getSidebar } from './utils/navigation';
|
|
6
5
|
import { paths } from './utils/routing';
|
|
@@ -13,17 +12,16 @@ import './style/util.css';
|
|
|
13
12
|
|
|
14
13
|
// Components — can override built-in CSS, but not user CSS.
|
|
15
14
|
import ContentPanel from './components/ContentPanel.astro';
|
|
16
|
-
import EditLink from './components/EditLink.astro';
|
|
17
15
|
import FallbackContentNotice from './components/FallbackContentNotice.astro';
|
|
18
16
|
import HeadSEO from './components/HeadSEO.astro';
|
|
19
17
|
import Header from './components/Header.astro';
|
|
20
18
|
import LastUpdated from './components/LastUpdated.astro';
|
|
21
19
|
import MarkdownContent from './components/MarkdownContent.astro';
|
|
22
20
|
import PrevNextLinks from './components/PrevNextLinks.astro';
|
|
23
|
-
import
|
|
21
|
+
import RightSidebar from './components/RightSidebar.astro';
|
|
24
22
|
import Sidebar from './components/Sidebar.astro';
|
|
25
23
|
import SkipLink from './components/SkipLink.astro';
|
|
26
|
-
import
|
|
24
|
+
import MobileTableOfContents from './components/TableOfContents/MobileTableOfContents.astro';
|
|
27
25
|
import ThemeProvider from './components/ThemeProvider.astro';
|
|
28
26
|
import PageFrame from './layout/PageFrame.astro';
|
|
29
27
|
import TwoColumnContent from './layout/TwoColumnContent.astro';
|
|
@@ -58,22 +56,9 @@ const prevNextLinks = getPrevNextLinks(sidebar);
|
|
|
58
56
|
<PageFrame>
|
|
59
57
|
<Header slot="header" locale={locale} />
|
|
60
58
|
<Sidebar slot="sidebar" sidebar={sidebar} locale={locale} />
|
|
59
|
+
<MobileTableOfContents headings={headings} />
|
|
61
60
|
<TwoColumnContent>
|
|
62
|
-
<
|
|
63
|
-
<RightSidebarPanel>
|
|
64
|
-
<TableOfContents headings={headings} />
|
|
65
|
-
</RightSidebarPanel>
|
|
66
|
-
<RightSidebarPanel>
|
|
67
|
-
{
|
|
68
|
-
config.editLink.baseUrl && (
|
|
69
|
-
<>
|
|
70
|
-
<h2>Contribute</h2>
|
|
71
|
-
<EditLink data={entry.data} id={entry.id} />
|
|
72
|
-
</>
|
|
73
|
-
)
|
|
74
|
-
}
|
|
75
|
-
</RightSidebarPanel>
|
|
76
|
-
</Fragment>
|
|
61
|
+
<RightSidebar slot="right-sidebar" entry={entry} headings={headings} />
|
|
77
62
|
<main
|
|
78
63
|
id="starlight__overview"
|
|
79
64
|
data-pagefind-body
|
package/layout/PageFrame.astro
CHANGED
|
@@ -50,6 +50,7 @@ const hasSidebar = Astro.slots.has('sidebar');
|
|
|
50
50
|
.sidebar-pane {
|
|
51
51
|
visibility: var(--sl-sidebar-visibility, hidden);
|
|
52
52
|
position: fixed;
|
|
53
|
+
z-index: var(--sl-z-index-menu);
|
|
53
54
|
inset-block: 0;
|
|
54
55
|
inset-inline-start: 0;
|
|
55
56
|
padding-top: var(--sl-nav-height);
|
|
@@ -67,7 +68,7 @@ const hasSidebar = Astro.slots.has('sidebar');
|
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
.main-frame {
|
|
70
|
-
padding-top: var(--sl-nav-height);
|
|
71
|
+
padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
|
|
71
72
|
}
|
|
72
73
|
|
|
73
74
|
@media (min-width: 50rem) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astrojs/starlight",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Build beautiful, high-performance documentation websites with Astro",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"docs",
|
|
@@ -10,6 +10,13 @@
|
|
|
10
10
|
],
|
|
11
11
|
"author": "Chris Swithinbank <swithinbank@gmail.com>",
|
|
12
12
|
"license": "MIT",
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "https://github.com/withastro/starlight",
|
|
16
|
+
"directory": "packages/starlight"
|
|
17
|
+
},
|
|
18
|
+
"bugs": "https://github.com/withastro/starlight/issues",
|
|
19
|
+
"homepage": "https://starlight.astro.build",
|
|
13
20
|
"type": "module",
|
|
14
21
|
"exports": {
|
|
15
22
|
".": "./index.ts",
|
package/style/props.css
CHANGED
|
@@ -113,17 +113,21 @@
|
|
|
113
113
|
--__sb-font-mono: var(--sl-font-mono, ''), var(--sl-font-system-mono);
|
|
114
114
|
|
|
115
115
|
/** Key layout values */
|
|
116
|
-
--sl-nav-height:
|
|
116
|
+
--sl-nav-height: 3.5rem;
|
|
117
117
|
--sl-nav-pad-x: 1.5rem;
|
|
118
118
|
--sl-nav-pad-y: 0.75rem;
|
|
119
|
+
--sl-mobile-toc-height: 3rem;
|
|
119
120
|
--sl-sidebar-width: 18.75rem;
|
|
120
121
|
--sl-sidebar-pad-x: 1rem;
|
|
121
122
|
--sl-content-width: 45rem;
|
|
122
123
|
--sl-content-pad-x: 1rem;
|
|
123
124
|
--sl-menu-button-size: 2rem;
|
|
124
125
|
--sl-nav-gap: var(--sl-content-pad-x);
|
|
126
|
+
/* Offset required to show outline inside an element instead of round the outside */
|
|
127
|
+
--sl-outline-offset-inside: -0.1875rem;
|
|
125
128
|
|
|
126
129
|
/* Global z-index values */
|
|
130
|
+
--sl-z-index-menu: 5;
|
|
127
131
|
--sl-z-index-navbar: 10;
|
|
128
132
|
--sl-z-index-skiplink: 20;
|
|
129
133
|
}
|
|
@@ -183,6 +187,7 @@
|
|
|
183
187
|
|
|
184
188
|
@media (min-width: 50em) {
|
|
185
189
|
:root {
|
|
190
|
+
--sl-nav-height: 4rem;
|
|
186
191
|
--sl-text-h1: var(--sl-text-5xl);
|
|
187
192
|
--sl-text-h2: var(--sl-text-4xl);
|
|
188
193
|
--sl-text-h3: var(--sl-text-3xl);
|
|
@@ -193,5 +198,6 @@
|
|
|
193
198
|
@media (min-width: 72rem) {
|
|
194
199
|
:root {
|
|
195
200
|
--sl-content-pad-x: 1.5rem;
|
|
201
|
+
--sl-mobile-toc-height: 0rem;
|
|
196
202
|
}
|
|
197
203
|
}
|