summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChris Swithinbank2023-05-30 15:48:38 +0200
committerGitHub2023-05-30 15:48:38 +0200
commitd162b2fc0795248fa89d45f2e5d4207126a59256 (patch)
tree7bba8cd27fe72a24e456b26c62fbad44d5d86626
parent8b6b9a3f17c1c4b897e3ee25ae7ca078f598f0da (diff)
downloadIT.starlight-d162b2fc0795248fa89d45f2e5d4207126a59256.tar.gz
IT.starlight-d162b2fc0795248fa89d45f2e5d4207126a59256.tar.bz2
IT.starlight-d162b2fc0795248fa89d45f2e5d4207126a59256.zip
Layout refactoring (#99)
-rw-r--r--.changeset/forty-dogs-bathe.md5
-rw-r--r--.changeset/rare-feet-cry.md5
-rw-r--r--.changeset/six-pants-cough.md5
-rw-r--r--.changeset/smart-drinks-tie.md5
-rw-r--r--docs/src/content/docs/de/index.mdx2
-rw-r--r--docs/src/content/docs/de/reference/configuration.md2
-rw-r--r--docs/src/content/docs/es/index.mdx1
-rw-r--r--docs/src/content/docs/es/reference/configuration.md2
-rw-r--r--docs/src/content/docs/index.mdx1
-rw-r--r--docs/src/content/docs/ja/index.mdx1
-rw-r--r--docs/src/content/docs/ja/reference/configuration.md2
-rw-r--r--docs/src/content/docs/reference/configuration.md2
-rw-r--r--docs/src/content/docs/reference/frontmatter.md16
-rw-r--r--packages/starlight/components/ContentPanel.astro2
-rw-r--r--packages/starlight/components/EditLink.astro22
-rw-r--r--packages/starlight/components/Footer.astro41
-rw-r--r--packages/starlight/components/Header.astro31
-rw-r--r--packages/starlight/components/Icons.ts2
-rw-r--r--packages/starlight/components/LastUpdated.astro8
-rw-r--r--packages/starlight/components/RightSidebar.astro42
-rw-r--r--packages/starlight/components/RightSidebarPanel.astro2
-rw-r--r--packages/starlight/components/TableOfContents.astro25
-rw-r--r--packages/starlight/components/TableOfContents/MobileTableOfContents.astro22
-rw-r--r--packages/starlight/index.astro40
-rw-r--r--packages/starlight/layout/PageFrame.astro16
-rw-r--r--packages/starlight/layout/TwoColumnContent.astro24
-rw-r--r--packages/starlight/schema.ts10
-rw-r--r--packages/starlight/schemas/tableOfContents.ts23
-rw-r--r--packages/starlight/style/props.css1
-rw-r--r--packages/starlight/utils/navigation.ts2
-rw-r--r--packages/starlight/utils/user-config.ts15
31 files changed, 265 insertions, 112 deletions
diff --git a/.changeset/forty-dogs-bathe.md b/.changeset/forty-dogs-bathe.md
new file mode 100644
index 00000000..21e53922
--- /dev/null
+++ b/.changeset/forty-dogs-bathe.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Fix “next page” arrow showing on pages not in sidebar
diff --git a/.changeset/rare-feet-cry.md b/.changeset/rare-feet-cry.md
new file mode 100644
index 00000000..cb64821c
--- /dev/null
+++ b/.changeset/rare-feet-cry.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Add support for a “splash” layout
diff --git a/.changeset/six-pants-cough.md b/.changeset/six-pants-cough.md
new file mode 100644
index 00000000..dc7e0d91
--- /dev/null
+++ b/.changeset/six-pants-cough.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Support hiding right sidebar table of contents
diff --git a/.changeset/smart-drinks-tie.md b/.changeset/smart-drinks-tie.md
new file mode 100644
index 00000000..0bd6064c
--- /dev/null
+++ b/.changeset/smart-drinks-tie.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Move edit page link to page footer so it is accessible on mobile
diff --git a/docs/src/content/docs/de/index.mdx b/docs/src/content/docs/de/index.mdx
index 6bd2e532..f710c658 100644
--- a/docs/src/content/docs/de/index.mdx
+++ b/docs/src/content/docs/de/index.mdx
@@ -1,5 +1,7 @@
---
title: Wilkommen, Welt
+description: Erstelle schöne, leistungsstarke Dokumentations-Websites mit Starlight und Astro.
+template: splash
---
:::caution[Laufende Arbeiten]
diff --git a/docs/src/content/docs/de/reference/configuration.md b/docs/src/content/docs/de/reference/configuration.md
index eef5a857..015acc6a 100644
--- a/docs/src/content/docs/de/reference/configuration.md
+++ b/docs/src/content/docs/de/reference/configuration.md
@@ -44,7 +44,7 @@ type LogoConfig = { alt?: string; replacesTitle?: boolean } & (
### `tableOfContents`
-**Typ:** `{ minHeadingLevel?: number; maxHeadingLevel?: number; }`
+**Typ:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }`
**Voreinstellung:** `{ minHeadingLevel: 2; maxHeadingLevel: 3; }`
Konfiguriere das Inhaltsverzeichnis, das rechts auf jeder Seite angezeigt wird. Standardmäßig werden `<h2>` und `<h3>` Überschriften in dieses Inhaltsverzeichnis aufgenommen.
diff --git a/docs/src/content/docs/es/index.mdx b/docs/src/content/docs/es/index.mdx
index 1d8fe501..b6bf9d0b 100644
--- a/docs/src/content/docs/es/index.mdx
+++ b/docs/src/content/docs/es/index.mdx
@@ -1,6 +1,7 @@
---
title: Bienvenido, mundo
description: Starlight te ayuda a construir sitios web de documentación hermosos y de alto rendimiento con Astro.
+template: splash
---
:::caution[Trabajo en progreso]
diff --git a/docs/src/content/docs/es/reference/configuration.md b/docs/src/content/docs/es/reference/configuration.md
index ea004e1e..7761ee63 100644
--- a/docs/src/content/docs/es/reference/configuration.md
+++ b/docs/src/content/docs/es/reference/configuration.md
@@ -44,7 +44,7 @@ type LogoConfig = { alt?: string; replacesTitle?: boolean } & (
### `tableOfContents`
-**tipo:** `{ minHeadingLevel?: number; maxHeadingLevel?: number; }`
+**tipo:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }`
**por defecto:** `{ minHeadingLevel: 2; maxHeadingLevel: 3; }`
Configura la tabla de contenidos que se muestra a la derecha de cada página. De forma predeterminada, los encabezados `<h2>` y `<h3>` se incluirán en esta tabla de contenidos.
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index eed7f0dc..56d15de8 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -1,6 +1,7 @@
---
title: Welcome, world
description: Starlight helps you build beautiful, high-performance documentation websites with Astro.
+template: splash
---
:::caution[Work in progress]
diff --git a/docs/src/content/docs/ja/index.mdx b/docs/src/content/docs/ja/index.mdx
index 37d8a623..d8bdcdae 100644
--- a/docs/src/content/docs/ja/index.mdx
+++ b/docs/src/content/docs/ja/index.mdx
@@ -1,6 +1,7 @@
---
title: ようこそ、世界
description: Starlightは、Astroを使って美しく高性能なドキュメントサイトを作るためのテーマです。
+template: splash
---
:::caution[作業中]
diff --git a/docs/src/content/docs/ja/reference/configuration.md b/docs/src/content/docs/ja/reference/configuration.md
index 0e069a28..65501ed9 100644
--- a/docs/src/content/docs/ja/reference/configuration.md
+++ b/docs/src/content/docs/ja/reference/configuration.md
@@ -44,7 +44,7 @@ type LogoConfig = { alt?: string; replacesTitle?: boolean } & (
### `tableOfContents`
-**type:** `{ minHeadingLevel?: number; maxHeadingLevel?: number; }`
+**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }`
**default:** `{ minHeadingLevel: 2; maxHeadingLevel: 3; }`
各ページの右側に表示される目次を設定します。デフォルトでは、`<h2>`と`<h3>`の見出しがこの目次に含まれます。
diff --git a/docs/src/content/docs/reference/configuration.md b/docs/src/content/docs/reference/configuration.md
index 4413311d..aafacf99 100644
--- a/docs/src/content/docs/reference/configuration.md
+++ b/docs/src/content/docs/reference/configuration.md
@@ -44,7 +44,7 @@ type LogoConfig = { alt?: string; replacesTitle?: boolean } & (
### `tableOfContents`
-**type:** `{ minHeadingLevel?: number; maxHeadingLevel?: number; }`
+**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }`
**default:** `{ minHeadingLevel: 2; maxHeadingLevel: 3; }`
Configure the table of contents shown on the right of each page. By default, `<h2>` and `<h3>` headings will be included in this table of contents.
diff --git a/docs/src/content/docs/reference/frontmatter.md b/docs/src/content/docs/reference/frontmatter.md
index cdd2279a..4d947100 100644
--- a/docs/src/content/docs/reference/frontmatter.md
+++ b/docs/src/content/docs/reference/frontmatter.md
@@ -34,6 +34,15 @@ The page description is used for page metadata and will be picked up by search e
Overrides the [global `editLink` config](/reference/configuration/#editlink). Set to `false` to disable the “Edit page” link for a specific page or provide an alternative URL where the content of this page is editable.
+### `template`
+
+**type:** `'doc' | 'splash'`
+**default:** `'doc'`
+
+Set the layout template for this page.
+Pages use the `'doc'` layout by default.
+Set to `'splash'` to use a wider layout without any sidebars designed for landing pages.
+
### `head`
**type:** [`HeadConfig[]`](/reference/configuration/#headconfig)
@@ -49,3 +58,10 @@ head:
content: Custom about title
---
```
+
+### `tableOfContents`
+
+**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }`
+
+Overrides the [global `tableOfContents` config](/reference/configuration/#tableofcontents).
+Customize the heading levels to be included or set to `false` to hide the table of contents on this page.
diff --git a/packages/starlight/components/ContentPanel.astro b/packages/starlight/components/ContentPanel.astro
index 4f3aaa2a..4d8a75a8 100644
--- a/packages/starlight/components/ContentPanel.astro
+++ b/packages/starlight/components/ContentPanel.astro
@@ -19,7 +19,7 @@
@media (min-width: 72rem) {
.container {
- margin-inline-start: auto;
+ margin-inline: var(--sl-content-margin-inline, auto);
}
}
</style>
diff --git a/packages/starlight/components/EditLink.astro b/packages/starlight/components/EditLink.astro
index c72c25ac..f4fcbef2 100644
--- a/packages/starlight/components/EditLink.astro
+++ b/packages/starlight/components/EditLink.astro
@@ -2,6 +2,7 @@
import type { CollectionEntry } from 'astro:content';
import config from 'virtual:starlight/user-config';
import { useTranslations } from '../utils/translations';
+import Icon from './Icon.astro';
interface Props {
data: CollectionEntry<'docs'>['data'];
@@ -23,4 +24,23 @@ const url =
: undefined;
---
-{editUrl !== false && url && <a href={url}>{t('page.editLink')}</a>}
+{
+ editUrl !== false && url && (
+ <a href={url} class="flex">
+ <Icon name="pencil" size="1.2em" />
+ {t('page.editLink')}
+ </a>
+ )
+}
+
+<style>
+ a {
+ gap: 0.5rem;
+ align-items: center;
+ text-decoration: none;
+ color: var(--sl-color-gray-3);
+ }
+ a:hover {
+ color: var(--sl-color-white);
+ }
+</style>
diff --git a/packages/starlight/components/Footer.astro b/packages/starlight/components/Footer.astro
new file mode 100644
index 00000000..c550d31d
--- /dev/null
+++ b/packages/starlight/components/Footer.astro
@@ -0,0 +1,41 @@
+---
+import config from 'virtual:starlight/user-config';
+import { SidebarEntry, getPrevNextLinks } from '../utils/navigation';
+import type { StarlightDocsEntry } from '../utils/routing';
+import type { LocaleData } from '../utils/slugs';
+
+import LastUpdated from '../components/LastUpdated.astro';
+import PrevNextLinks from '../components/PrevNextLinks.astro';
+import EditLink from './EditLink.astro';
+
+interface Props extends LocaleData {
+ entry: StarlightDocsEntry;
+ sidebar: SidebarEntry[];
+}
+
+const { entry, dir, lang, locale, sidebar } = Astro.props;
+const prevNextLinks = getPrevNextLinks(sidebar);
+---
+
+<footer>
+ <div class="meta flex">
+ {
+ config.editLink.baseUrl && (
+ <EditLink data={entry.data} id={entry.id} {locale} />
+ )
+ }
+ <LastUpdated id={entry.id} {lang} {locale} />
+ </div>
+ <PrevNextLinks {...prevNextLinks} {dir} {locale} />
+</footer>
+
+<style>
+ .meta {
+ gap: 0.75rem 3rem;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ margin-block: 3rem 1.5rem;
+ font-size: var(--sl-text-sm);
+ color: var(--sl-color-gray-3);
+ }
+</style>
diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
index 1d80e49e..594b1690 100644
--- a/packages/starlight/components/Header.astro
+++ b/packages/starlight/components/Header.astro
@@ -9,7 +9,7 @@ interface Props {
locale: string | undefined;
}
-const { locale } = Astro.props
+const { locale } = Astro.props;
---
<div class="header">
@@ -18,7 +18,7 @@ const { locale } = Astro.props
<div class="hidden md:flex right-group">
<SocialIcons />
<ThemeSelect {locale} />
- <LanguageSelect {locale}/>
+ <LanguageSelect {locale} />
</div>
</div>
@@ -37,17 +37,34 @@ const { locale } = Astro.props
}
@media (min-width: 50rem) {
+ :global(:root[data-has-sidebar]) {
+ --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+ }
+ :global(:root:not([data-has-toc])) {
+ --__toc-width: 0rem;
+ }
.header {
- --__sidebar-width: var(--sl-sidebar-width) - var(--sl-nav-pad-x);
+ --__sidebar-width: max(
+ 0rem,
+ var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x)
+ );
--__main-column-fr: calc(
- (100% - var(--sl-content-width) - 2 * var(--sl-sidebar-width)) / 2
+ (
+ 100% + var(--__sidebar-pad, 0rem) -
+ var(--__toc-width, var(--sl-sidebar-width)) -
+ (2 * var(--__toc-width, var(--sl-nav-pad-x))) -
+ var(--sl-content-inline-start, 0rem) - var(--sl-content-width)
+ ) / 2
);
display: grid;
grid-template-columns:
/* 1 (site title): runs up until the main content column’s left edge. */
- calc(
- var(--__sidebar-width) +
- max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))
+ max(
+ var(--sl-title-min-width),
+ calc(
+ var(--__sidebar-width) +
+ max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))
+ )
)
/* 2 (search box): all free space that is available. */
1fr
diff --git a/packages/starlight/components/Icons.ts b/packages/starlight/components/Icons.ts
index c85472e4..4aa2f179 100644
--- a/packages/starlight/components/Icons.ts
+++ b/packages/starlight/components/Icons.ts
@@ -12,6 +12,8 @@ export const Icons = {
bars: '<path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" />',
translate:
'<path fill-rule="evenodd" clip-rule="evenodd" d="M8.51562 3C7.99605 3 7.57486 3.42119 7.57486 3.94076V5.09057H2.94076C2.42119 5.09057 2 5.51176 2 6.03133C2 6.5509 2.42119 6.97209 2.94076 6.97209H10.3025C10.1154 8.43628 9.49493 9.81581 8.51605 10.9298C7.89546 10.2235 7.41119 9.40161 7.09425 8.50519C6.92107 8.01534 6.38356 7.75864 5.89371 7.93183C5.40386 8.10501 5.14715 8.64252 5.32034 9.13237C5.71804 10.2572 6.32594 11.2885 7.10503 12.1745C5.88484 13.0016 4.43607 13.4529 2.94076 13.4529C2.42119 13.4529 2 13.8741 2 14.3936C2 14.9132 2.42119 15.3344 2.94076 15.3344C4.96251 15.3344 6.91641 14.6763 8.51606 13.4787C8.58325 13.529 8.65118 13.5784 8.71984 13.627C9.88827 14.4533 11.2259 14.995 12.6263 15.2183L11.8634 16.7441C11.8576 16.7552 11.8519 16.7665 11.8465 16.7779L10.4616 19.5478C10.2292 20.0125 10.4176 20.5776 10.8823 20.8099C11.347 21.0423 11.9121 20.8539 12.1445 20.3892L13.2782 18.1218H19.0839L20.2176 20.3892C20.45 20.8539 21.015 21.0423 21.4798 20.8099C21.9445 20.5776 22.1328 20.0125 21.9005 19.5478L20.5162 16.7792C20.5104 16.7669 20.5043 16.7548 20.498 16.7428L17.0225 9.79176C16.8631 9.47304 16.5374 9.27172 16.181 9.27172C15.8247 9.27172 15.4989 9.47304 15.3396 9.79176L13.52 13.4309C12.236 13.3317 10.9971 12.8998 9.92708 12.1745C11.2086 10.7172 12.0005 8.89713 12.1961 6.97209H14.0905C14.61 6.97209 15.0312 6.5509 15.0312 6.03133C15.0312 5.51176 14.61 5.09057 14.0905 5.09057H9.45638V3.94076C9.45638 3.42119 9.03519 3 8.51562 3ZM14.9419 14.7944C14.9357 14.8074 14.9293 14.8203 14.9226 14.833L14.2189 16.2403H18.1431L16.181 12.3161L14.9419 14.7944Z"></path>',
+ pencil:
+ '<path d="M22 7.24a1 1 0 0 0-.29-.71l-4.24-4.24a1 1 0 0 0-1.1-.22 1 1 0 0 0-.32.22l-2.83 2.83L2.29 16.05a1 1 0 0 0-.29.71V21a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .76-.29l10.87-10.93L21.71 8c.1-.1.17-.2.22-.33a1 1 0 0 0 0-.24v-.14l.07-.05ZM6.83 20H4v-2.83l9.93-9.93 2.83 2.83L6.83 20ZM18.17 8.66l-2.83-2.83 1.42-1.41 2.82 2.82-1.41 1.42Z"/>',
moon: '<path d="M21.64 13C21.4957 12.8807 21.3207 12.8043 21.1351 12.7796C20.9494 12.7548 20.7606 12.7827 20.59 12.86C19.5326 13.3439 18.3829 13.593 17.22 13.59C15.0689 13.5874 13.006 12.7345 11.4812 11.2171C9.95632 9.69979 9.09321 7.64114 9.08001 5.49003C9.08457 4.81586 9.16848 4.14458 9.33001 3.49003C9.36429 3.31557 9.35143 3.13512 9.29277 2.96728C9.2341 2.79944 9.13175 2.65028 8.99626 2.53516C8.86076 2.42004 8.69702 2.34313 8.52191 2.31234C8.3468 2.28156 8.16665 2.29802 8.00001 2.36003C6.43234 3.06494 5.06958 4.15679 4.03977 5.53301C3.00996 6.90924 2.34689 8.52465 2.11286 10.2275C1.87883 11.9304 2.08152 13.6648 2.70188 15.2678C3.32225 16.8708 4.33993 18.2898 5.65931 19.3915C6.9787 20.4932 8.55649 21.2414 10.2445 21.5658C11.9324 21.8903 13.6752 21.7803 15.309 21.2463C16.9428 20.7122 18.414 19.7716 19.5844 18.5128C20.7548 17.254 21.5861 15.7183 22 14.05C22.0504 13.859 22.0431 13.6574 21.9791 13.4705C21.915 13.2836 21.797 13.1199 21.64 13ZM12.14 19.69C10.4618 19.6782 8.82821 19.1479 7.46301 18.1718C6.0978 17.1956 5.06768 15.8214 4.5137 14.2372C3.95971 12.6529 3.90895 10.9362 4.36835 9.32203C4.82776 7.70785 5.77487 6.27513 7.08001 5.22003V5.49003C7.08266 8.17851 8.15183 10.7561 10.0529 12.6572C11.9539 14.5582 14.5315 15.6274 17.22 15.63C17.9259 15.6326 18.63 15.5589 19.32 15.41C18.6299 16.7155 17.5965 17.8079 16.3312 18.5692C15.0659 19.3305 13.6167 19.7319 12.14 19.73V19.69Z"></path>',
sun: '<path d="M5 12C5 11.7348 4.89464 11.4804 4.70711 11.2929C4.51957 11.1054 4.26522 11 4 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H4C4.26522 13 4.51957 12.8946 4.70711 12.7071C4.89464 12.5196 5 12.2652 5 12ZM5.64 17L4.93 17.71C4.74375 17.8974 4.63921 18.1508 4.63921 18.415C4.63921 18.6792 4.74375 18.9326 4.93 19.12C5.11736 19.3063 5.37081 19.4108 5.635 19.4108C5.89919 19.4108 6.15264 19.3063 6.34 19.12L7.05 18.41C7.21383 18.2187 7.29943 17.9726 7.28971 17.7209C7.27999 17.4693 7.17566 17.2305 6.99756 17.0524C6.81947 16.8743 6.58073 16.77 6.32905 16.7603C6.07738 16.7506 5.8313 16.8362 5.64 17ZM12 5C12.2652 5 12.5196 4.89464 12.7071 4.70711C12.8946 4.51957 13 4.26522 13 4V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4C11 4.26522 11.1054 4.51957 11.2929 4.70711C11.4804 4.89464 11.7348 5 12 5ZM17.66 7.34C17.9223 7.3389 18.1737 7.23474 18.36 7.05L19.07 6.34C19.1747 6.25035 19.2597 6.14004 19.3197 6.01597C19.3797 5.89191 19.4135 5.75677 19.4188 5.61905C19.4241 5.48133 19.4009 5.344 19.3506 5.21568C19.3004 5.08735 19.2241 4.9708 19.1266 4.87335C19.0292 4.77589 18.9126 4.69964 18.7843 4.64936C18.656 4.59909 18.5187 4.57588 18.3809 4.5812C18.2432 4.58652 18.1081 4.62025 17.984 4.68027C17.86 4.7403 17.7496 4.82532 17.66 4.93L17 5.64C16.8137 5.82736 16.7092 6.08081 16.7092 6.345C16.7092 6.60919 16.8137 6.86264 17 7.05C17.1763 7.22536 17.4116 7.32875 17.66 7.34ZM5.66 7.05C5.84626 7.23474 6.09766 7.3389 6.36 7.34C6.49161 7.34076 6.62207 7.31554 6.74391 7.26577C6.86574 7.21601 6.97656 7.14268 7.07 7.05C7.25625 6.86264 7.36079 6.60919 7.36079 6.345C7.36079 6.08081 7.25625 5.82736 7.07 5.64L6.36 4.93C6.26742 4.8361 6.15725 4.76136 6.03578 4.71005C5.91432 4.65873 5.78393 4.63184 5.65207 4.63091C5.52021 4.62998 5.38946 4.65503 5.26728 4.70463C5.14511 4.75424 5.0339 4.82742 4.94 4.92C4.8461 5.01258 4.77136 5.12275 4.72005 5.24422C4.66873 5.36568 4.64184 5.49607 4.64091 5.62793C4.63903 5.89423 4.74302 6.15037 4.93 6.34L5.66 7.05ZM21 11H20C19.7348 11 19.4804 11.1054 19.2929 11.2929C19.1054 11.4804 19 11.7348 19 12C19 12.2652 19.1054 12.5196 19.2929 12.7071C19.4804 12.8946 19.7348 13 20 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11ZM18.36 17C18.17 16.8943 17.9508 16.8534 17.7355 16.8835C17.5202 16.9136 17.3205 17.0131 17.1668 17.1668C17.0131 17.3205 16.9136 17.5202 16.8835 17.7355C16.8534 17.9508 16.8943 18.17 17 18.36L17.71 19.07C17.8974 19.2563 18.1508 19.3608 18.415 19.3608C18.6792 19.3608 18.9326 19.2563 19.12 19.07C19.3063 18.8826 19.4108 18.6292 19.4108 18.365C19.4108 18.1008 19.3063 17.8474 19.12 17.66L18.36 17ZM12 6.5C10.9122 6.5 9.84883 6.82257 8.94436 7.42692C8.03989 8.03126 7.33494 8.89025 6.91866 9.89524C6.50238 10.9002 6.39346 12.0061 6.60568 13.073C6.8179 14.1399 7.34172 15.1199 8.11091 15.8891C8.8801 16.6583 9.86011 17.1821 10.927 17.3943C11.9939 17.6065 13.0998 17.4976 14.1048 17.0813C15.1098 16.6651 15.9687 15.9601 16.5731 15.0556C17.1774 14.1512 17.5 13.0878 17.5 12C17.4974 10.5421 16.917 9.14471 15.8862 8.11383C14.8553 7.08295 13.4579 6.50264 12 6.5ZM12 15.5C11.3078 15.5 10.6311 15.2947 10.0555 14.9101C9.47993 14.5256 9.03133 13.9789 8.76642 13.3394C8.50151 12.6999 8.4322 11.9961 8.56725 11.3172C8.7023 10.6383 9.03564 10.0146 9.52513 9.52513C10.0146 9.03564 10.6383 8.7023 11.3172 8.56725C11.9961 8.4322 12.6999 8.50151 13.3394 8.76642C13.9789 9.03133 14.5256 9.47993 14.9101 10.0555C15.2947 10.6311 15.5 11.3078 15.5 12C15.5 12.9283 15.1313 13.8185 14.4749 14.4749C13.8185 15.1313 12.9283 15.5 12 15.5ZM12 19C11.7348 19 11.4804 19.1054 11.2929 19.2929C11.1054 19.4804 11 19.7348 11 20V21C11 21.2652 11.1054 21.5196 11.2929 21.7071C11.4804 21.8946 11.7348 22 12 22C12.2652 22 12.5196 21.8946 12.7071 21.7071C12.8946 21.5196 13 21.2652 13 21V20C13 19.7348 12.8946 19.4804 12.7071 19.2929C12.5196 19.1054 12.2652 19 12 19Z"></path>',
laptop:
diff --git a/packages/starlight/components/LastUpdated.astro b/packages/starlight/components/LastUpdated.astro
index 349b190e..c1e0476d 100644
--- a/packages/starlight/components/LastUpdated.astro
+++ b/packages/starlight/components/LastUpdated.astro
@@ -34,11 +34,3 @@ try {
</p>
)
}
-
-<style>
- p {
- margin-block: 3rem 1.5rem;
- font-size: var(--sl-text-sm);
- color: var(--sl-color-gray-3);
- }
-</style>
diff --git a/packages/starlight/components/RightSidebar.astro b/packages/starlight/components/RightSidebar.astro
index d9c73139..54083dd6 100644
--- a/packages/starlight/components/RightSidebar.astro
+++ b/packages/starlight/components/RightSidebar.astro
@@ -1,30 +1,36 @@
---
import type { MarkdownHeading } from 'astro';
-import config from 'virtual:starlight/user-config';
-import type { StarlightDocsEntry } from '../utils/routing';
-import EditLink from './EditLink.astro';
import RightSidebarPanel from './RightSidebarPanel.astro';
+import MobileTableOfContents from './TableOfContents/MobileTableOfContents.astro';
import TableOfContents from './TableOfContents.astro';
+import { generateToC } from './TableOfContents/generateToC';
+import { useTranslations } from '../utils/translations';
interface Props {
- entry: StarlightDocsEntry;
headings: MarkdownHeading[];
locale: string | undefined;
+ tocConfig: { maxHeadingLevel: number; minHeadingLevel: number } | false;
}
-const { entry, headings, locale } = Astro.props;
+const { headings, locale, tocConfig } = Astro.props;
+const t = useTranslations(locale);
+const tocProps = tocConfig && {
+ ...tocConfig,
+ locale,
+ toc: generateToC(headings, {
+ ...tocConfig,
+ title: t('tableOfContents.overview'),
+ }),
+};
---
-<RightSidebarPanel>
- <TableOfContents {headings} {locale} />
-</RightSidebarPanel>
-<RightSidebarPanel>
- {
- config.editLink.baseUrl && (
- <>
- <h2>Contribute</h2>
- <EditLink data={entry.data} id={entry.id} {locale} />
- </>
- )
- }
-</RightSidebarPanel>
+{
+ tocProps && (
+ <>
+ <MobileTableOfContents {...tocProps} />
+ <RightSidebarPanel>
+ <TableOfContents {...tocProps} />
+ </RightSidebarPanel>
+ </>
+ )
+}
diff --git a/packages/starlight/components/RightSidebarPanel.astro b/packages/starlight/components/RightSidebarPanel.astro
index d1344c74..b4a3b5f8 100644
--- a/packages/starlight/components/RightSidebarPanel.astro
+++ b/packages/starlight/components/RightSidebarPanel.astro
@@ -1,4 +1,4 @@
-<div class="right-sidebar-panel">
+<div class="right-sidebar-panel hidden lg:block">
<div class="container">
<slot />
</div>
diff --git a/packages/starlight/components/TableOfContents.astro b/packages/starlight/components/TableOfContents.astro
index f54483ce..32aa6604 100644
--- a/packages/starlight/components/TableOfContents.astro
+++ b/packages/starlight/components/TableOfContents.astro
@@ -1,32 +1,23 @@
---
-import type { MarkdownHeading } from 'astro';
-import config from 'virtual:starlight/user-config';
import { useTranslations } from '../utils/translations';
import TableOfContentsList from './TableOfContents/TableOfContentsList.astro';
-import { generateToC } from './TableOfContents/generateToC';
+import type { TocItem } from './TableOfContents/generateToC';
interface Props {
- headings: MarkdownHeading[];
+ toc: TocItem[];
locale: string | undefined;
+ maxHeadingLevel: number;
+ minHeadingLevel: number;
}
-const { locale, headings } = Astro.props;
+const { locale, toc, maxHeadingLevel, minHeadingLevel } = Astro.props;
const t = useTranslations(locale);
-const toc = generateToC(headings, {
- ...config.tableOfContents,
- title: t('tableOfContents.overview'),
-});
---
-<starlight-toc
- data-min-h={config.tableOfContents.minHeadingLevel}
- data-max-h={config.tableOfContents.maxHeadingLevel}
->
+<starlight-toc data-min-h={minHeadingLevel} data-max-h={maxHeadingLevel}>
<nav aria-labelledby="starlight__on-this-page">
- <h2 id="starlight__on-this-page">
- {t('tableOfContents.onThisPage')}
- </h2>
- <TableOfContentsList toc={toc} />
+ <h2 id="starlight__on-this-page">{t('tableOfContents.onThisPage')}</h2>
+ <TableOfContentsList {toc} />
</nav>
</starlight-toc>
diff --git a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro
index 1ed6600d..a638658e 100644
--- a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro
+++ b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro
@@ -1,27 +1,21 @@
---
-import type { MarkdownHeading } from 'astro';
-import config from 'virtual:starlight/user-config';
import { useTranslations } from '../../utils/translations';
import Icon from '../Icon.astro';
import TableOfContentsList from './TableOfContentsList.astro';
-import { generateToC } from './generateToC';
+import type { TocItem } from './generateToC';
interface Props {
- headings: MarkdownHeading[];
+ toc: TocItem[];
locale: string | undefined;
+ maxHeadingLevel: number;
+ minHeadingLevel: number;
}
-const t = useTranslations(Astro.props.locale);
-const toc = generateToC(Astro.props.headings, {
- ...config.tableOfContents,
- title: t('tableOfContents.overview'),
-});
+const { locale, toc, maxHeadingLevel, minHeadingLevel } = Astro.props;
+const t = useTranslations(locale);
---
-<mobile-starlight-toc
- data-min-h={config.tableOfContents.minHeadingLevel}
- data-max-h={config.tableOfContents.maxHeadingLevel}
->
+<mobile-starlight-toc data-min-h={minHeadingLevel} data-max-h={maxHeadingLevel}>
<nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden">
<details id="starlight__mobile-toc">
<summary id="starlight__on-this-page--mobile" class="flex">
@@ -48,7 +42,7 @@ const toc = generateToC(Astro.props.headings, {
}
@media (min-width: 50rem) {
nav {
- inset-inline-start: var(--sl-sidebar-width);
+ inset-inline-start: var(--sl-content-inline-start, 0);
}
}
diff --git a/packages/starlight/index.astro b/packages/starlight/index.astro
index cea4d2e4..b906a80c 100644
--- a/packages/starlight/index.astro
+++ b/packages/starlight/index.astro
@@ -1,7 +1,8 @@
---
import type { InferGetStaticPropsType } from 'astro';
+import config from 'virtual:starlight/user-config';
-import { getPrevNextLinks, getSidebar } from './utils/navigation';
+import { getSidebar } from './utils/navigation';
import { paths } from './utils/routing';
// Built-in CSS styles.
@@ -15,13 +16,11 @@ import ContentPanel from './components/ContentPanel.astro';
import FallbackContentNotice from './components/FallbackContentNotice.astro';
import HeadSEO from './components/HeadSEO.astro';
import Header from './components/Header.astro';
-import LastUpdated from './components/LastUpdated.astro';
+import Footer from './components/Footer.astro';
import MarkdownContent from './components/MarkdownContent.astro';
-import PrevNextLinks from './components/PrevNextLinks.astro';
import RightSidebar from './components/RightSidebar.astro';
import Sidebar from './components/Sidebar.astro';
import SkipLink from './components/SkipLink.astro';
-import MobileTableOfContents from './components/TableOfContents/MobileTableOfContents.astro';
import ThemeProvider from './components/ThemeProvider.astro';
import PageFrame from './layout/PageFrame.astro';
import TwoColumnContent from './layout/TwoColumnContent.astro';
@@ -41,13 +40,23 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { dir, entry, entryMeta, isFallback, lang, locale } = Astro.props;
const { Content, headings } = await entry.render();
const sidebar = getSidebar(Astro.url.pathname, locale);
-const prevNextLinks = getPrevNextLinks(sidebar);
+
+const hasSidebar = entry.data.template !== 'splash';
+const tocConfig = !hasSidebar
+ ? false
+ : entry.data.tableOfContents !== undefined
+ ? entry.data.tableOfContents
+ : config.tableOfContents;
+const hasToC = Boolean(tocConfig);
---
-<html lang={lang} dir={dir}>
+<html lang={lang} dir={dir} data-has-toc={hasToC} data-has-sidebar={hasSidebar}>
<head>
<HeadSEO data={entry.data} lang={lang} />
<style>
+ html:not([data-has-toc]) {
+ --sl-mobile-toc-height: 0rem;
+ }
/* Add scroll padding to ensure anchor headings aren't obscured by nav */
html {
/* Additional padding is needed to account for the mobile TOC */
@@ -55,6 +64,11 @@ const prevNextLinks = getPrevNextLinks(sidebar);
1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height)
);
}
+ @media (min-width: 50em) {
+ [data-has-sidebar] {
+ --sl-content-inline-start: var(--sl-sidebar-width);
+ }
+ }
@media (min-width: 72em) {
html {
scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
@@ -65,12 +79,11 @@ const prevNextLinks = getPrevNextLinks(sidebar);
<body>
<ThemeProvider />
<SkipLink {locale} />
- <PageFrame {locale}>
+ <PageFrame {locale} {hasSidebar}>
<Header slot="header" {locale} />
- <Sidebar slot="sidebar" {sidebar} {locale} />
- <MobileTableOfContents {headings} {locale} />
- <TwoColumnContent>
- <RightSidebar slot="right-sidebar" {entry} {headings} {locale} />
+ {hasSidebar && <Sidebar slot="sidebar" {sidebar} {locale} />}
+ <TwoColumnContent {hasToC}>
+ <RightSidebar slot="right-sidebar" {headings} {locale} {tocConfig} />
<main data-pagefind-body lang={entryMeta.lang} dir={entryMeta.dir}>
<ContentPanel>
<h1
@@ -83,10 +96,7 @@ const prevNextLinks = getPrevNextLinks(sidebar);
</ContentPanel>
<ContentPanel>
<MarkdownContent><Content /></MarkdownContent>
- <footer>
- <LastUpdated id={entry.id} {lang} {locale} />
- <PrevNextLinks {...prevNextLinks} {dir} {locale} />
- </footer>
+ <Footer {...{ entry, dir, lang, locale, sidebar }} />
</ContentPanel>
</main>
</TwoColumnContent>
diff --git a/packages/starlight/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro
index 6aa7bc2c..1775be8b 100644
--- a/packages/starlight/layout/PageFrame.astro
+++ b/packages/starlight/layout/PageFrame.astro
@@ -3,16 +3,15 @@ import MobileMenuToggle from '../components/MobileMenuToggle.astro';
import { useTranslations } from '../utils/translations';
interface Props {
+ hasSidebar: boolean;
locale: string | undefined;
}
-const { locale } = Astro.props;
+const { hasSidebar, locale } = Astro.props;
const t = useTranslations(locale);
-
-const hasSidebar = Astro.slots.has('sidebar');
---
-<div class:list={['page', { hasSidebar }]}>
+<div class="page">
<header class="header"><slot name="header" /></header>
{
hasSidebar && (
@@ -49,7 +48,7 @@ const hasSidebar = Astro.slots.has('sidebar');
background-color: var(--sl-color-bg-nav);
}
- .hasSidebar .header {
+ :global([data-has-sidebar]) .header {
padding-inline-end: calc(
var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
);
@@ -77,10 +76,11 @@ const hasSidebar = Astro.slots.has('sidebar');
.main-frame {
padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+ padding-inline-start: var(--sl-content-inline-start);
}
@media (min-width: 50rem) {
- .hasSidebar .header {
+ :global([data-has-sidebar]) .header {
padding-inline-end: var(--sl-nav-pad-x);
}
.sidebar-pane {
@@ -89,9 +89,5 @@ const hasSidebar = Astro.slots.has('sidebar');
background-color: var(--sl-color-bg-sidebar);
border-inline-end: 1px solid var(--sl-color-hairline-shade);
}
-
- .hasSidebar .main-frame {
- padding-inline-start: var(--sl-sidebar-width);
- }
}
</style>
diff --git a/packages/starlight/layout/TwoColumnContent.astro b/packages/starlight/layout/TwoColumnContent.astro
index c951ca52..e6c6bede 100644
--- a/packages/starlight/layout/TwoColumnContent.astro
+++ b/packages/starlight/layout/TwoColumnContent.astro
@@ -1,7 +1,19 @@
+---
+interface Props {
+ hasToC: boolean;
+}
+---
+
<div class="container">
- <aside class="right-sidebar-container hidden lg:block">
- <div class="right-sidebar"><slot name="right-sidebar" /></div>
- </aside>
+ {
+ Astro.props.hasToC && (
+ <aside class="right-sidebar-container">
+ <div class="right-sidebar">
+ <slot name="right-sidebar" />
+ </div>
+ </aside>
+ )
+ }
<div class="main-pane"><slot /></div>
</div>
@@ -32,6 +44,12 @@
}
.main-pane {
+ width: 100%;
+ }
+
+ :global([data-has-sidebar]) .main-pane {
+ --sl-content-margin-inline: auto 0;
+
order: 1;
width: calc(
var(--sl-content-width) +
diff --git a/packages/starlight/schema.ts b/packages/starlight/schema.ts
index 451b0406..74c8843b 100644
--- a/packages/starlight/schema.ts
+++ b/packages/starlight/schema.ts
@@ -1,5 +1,6 @@
import { z } from 'astro/zod';
import { HeadConfigSchema } from './schemas/head';
+import { TableOfContentsSchema } from './schemas/tableOfContents';
export { i18nSchema } from './schemas/i18n';
export function docsSchema() {
@@ -24,5 +25,14 @@ export function docsSchema() {
/** Set custom `<head>` tags just for this page. */
head: HeadConfigSchema(),
+
+ /** Override global table of contents configuration for this page. */
+ tableOfContents: TableOfContentsSchema().optional(),
+
+ /**
+ * Set the layout style for this page.
+ * Can be `'doc'` (the default) or `'splash'` for a wider layout without any sidebars.
+ */
+ template: z.enum(['doc', 'splash']).default('doc'),
});
}
diff --git a/packages/starlight/schemas/tableOfContents.ts b/packages/starlight/schemas/tableOfContents.ts
new file mode 100644
index 00000000..6dc82537
--- /dev/null
+++ b/packages/starlight/schemas/tableOfContents.ts
@@ -0,0 +1,23 @@
+import { z } from 'astro/zod';
+
+const defaults = { minHeadingLevel: 2, maxHeadingLevel: 3 };
+
+export const TableOfContentsSchema = () =>
+ z
+ .union([
+ z.object({
+ /** The level to start including headings at in the table of contents. Default: 2. */
+ minHeadingLevel: z.number().int().min(1).max(6).optional().default(2),
+ /** The level to stop including headings at in the table of contents. Default: 3. */
+ maxHeadingLevel: z.number().int().min(1).max(6).optional().default(3),
+ }),
+ z.boolean().transform((enabled) => (enabled ? defaults : false)),
+ ])
+ .default(defaults)
+ .refine(
+ (toc) => (toc ? toc.minHeadingLevel <= toc.maxHeadingLevel : true),
+ {
+ message:
+ 'minHeadingLevel must be less than or equal to maxHeadingLevel',
+ }
+ );
diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css
index f2526469..7c3081d1 100644
--- a/packages/starlight/style/props.css
+++ b/packages/starlight/style/props.css
@@ -116,6 +116,7 @@
--sl-nav-height: 3.5rem;
--sl-nav-pad-x: 1.5rem;
--sl-nav-pad-y: 0.75rem;
+ --sl-title-min-width: 10rem;
--sl-mobile-toc-height: 3rem;
--sl-sidebar-width: 18.75rem;
--sl-sidebar-pad-x: 1rem;
diff --git a/packages/starlight/utils/navigation.ts b/packages/starlight/utils/navigation.ts
index bcdf79cf..394990ac 100644
--- a/packages/starlight/utils/navigation.ts
+++ b/packages/starlight/utils/navigation.ts
@@ -233,6 +233,6 @@ export function getPrevNextLinks(sidebar: SidebarEntry[]): {
const entries = flattenSidebar(sidebar);
const currentIndex = entries.findIndex((entry) => entry.isCurrent);
const prev = entries[currentIndex - 1];
- const next = entries[currentIndex + 1];
+ const next = currentIndex > -1 ? entries[currentIndex + 1] : undefined;
return { prev, next };
}
diff --git a/packages/starlight/utils/user-config.ts b/packages/starlight/utils/user-config.ts
index bca6cfff..cb2cf7ad 100644
--- a/packages/starlight/utils/user-config.ts
+++ b/packages/starlight/utils/user-config.ts
@@ -2,6 +2,7 @@ import { z } from 'astro/zod';
import { parse as bcpParse, stringify as bcpStringify } from 'bcp-47';
import { HeadConfigSchema } from '../schemas/head';
import { LogoConfigSchema } from '../schemas/logo';
+import { TableOfContentsSchema } from '../schemas/tableOfContents';
const LocaleSchema = z.object({
/** The label for this language to show in UI, e.g. `"English"`, `"العربية"`, or `"简体中文"`. */
@@ -139,18 +140,7 @@ const UserConfigSchema = z.object({
tagline: z.string().optional().describe('The tagline for your website.'),
/** Configure the defaults for the table of contents on each page. */
- tableOfContents: z
- .object({
- /** The level to start including headings at in the table of contents. Default: 2. */
- minHeadingLevel: z.number().int().min(1).max(6).optional().default(2),
- /** The level to stop including headings at in the table of contents. Default: 3. */
- maxHeadingLevel: z.number().int().min(1).max(6).optional().default(3),
- })
- .optional()
- .default({ minHeadingLevel: 2, maxHeadingLevel: 3 })
- .refine((toc) => toc.minHeadingLevel <= toc.maxHeadingLevel, {
- message: 'minHeadingLevel must be less than or equal to maxHeadingLevel',
- }),
+ tableOfContents: TableOfContentsSchema(),
/** Enable and configure “Edit this page” links. */
editLink: z
@@ -293,6 +283,7 @@ export const StarlightConfigSchema = UserConfigSchema.strict().transform(
label: 'English',
lang: 'en',
dir: 'ltr',
+ locale: undefined,
...locales?.root,
},
locales: undefined,