Skip to content

Commit

Permalink
Layout refactoring (#99)
Browse files Browse the repository at this point in the history
  • Loading branch information
delucis committed May 30, 2023
1 parent 8b6b9a3 commit d162b2f
Show file tree
Hide file tree
Showing 31 changed files with 265 additions and 112 deletions.
5 changes: 5 additions & 0 deletions .changeset/forty-dogs-bathe.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@astrojs/starlight": patch
---

Fix “next page” arrow showing on pages not in sidebar
5 changes: 5 additions & 0 deletions .changeset/rare-feet-cry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@astrojs/starlight": patch
---

Add support for a “splash” layout
5 changes: 5 additions & 0 deletions .changeset/six-pants-cough.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@astrojs/starlight": patch
---

Support hiding right sidebar table of contents
5 changes: 5 additions & 0 deletions .changeset/smart-drinks-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@astrojs/starlight": patch
---

Move edit page link to page footer so it is accessible on mobile
2 changes: 2 additions & 0 deletions docs/src/content/docs/de/index.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
---
title: Wilkommen, Welt
description: Erstelle schöne, leistungsstarke Dokumentations-Websites mit Starlight und Astro.
template: splash
---

:::caution[Laufende Arbeiten]
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/de/reference/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
1 change: 1 addition & 0 deletions docs/src/content/docs/es/index.mdx
Original file line number Diff line number Diff line change
@@ -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]
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/es/reference/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
1 change: 1 addition & 0 deletions docs/src/content/docs/index.mdx
Original file line number Diff line number Diff line change
@@ -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]
Expand Down
1 change: 1 addition & 0 deletions docs/src/content/docs/ja/index.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: ようこそ、世界
description: Starlightは、Astroを使って美しく高性能なドキュメントサイトを作るためのテーマです。
template: splash
---

:::caution[作業中]
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/ja/reference/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>`の見出しがこの目次に含まれます。
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/reference/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
16 changes: 16 additions & 0 deletions docs/src/content/docs/reference/frontmatter.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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.
2 changes: 1 addition & 1 deletion packages/starlight/components/ContentPanel.astro
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

@media (min-width: 72rem) {
.container {
margin-inline-start: auto;
margin-inline: var(--sl-content-margin-inline, auto);
}
}
</style>
22 changes: 21 additions & 1 deletion packages/starlight/components/EditLink.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Expand All @@ -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>
41 changes: 41 additions & 0 deletions packages/starlight/components/Footer.astro
Original file line number Diff line number Diff line change
@@ -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>
31 changes: 24 additions & 7 deletions packages/starlight/components/Header.astro
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface Props {
locale: string | undefined;
}
const { locale } = Astro.props
const { locale } = Astro.props;
---

<div class="header">
Expand All @@ -18,7 +18,7 @@ const { locale } = Astro.props
<div class="hidden md:flex right-group">
<SocialIcons />
<ThemeSelect {locale} />
<LanguageSelect {locale}/>
<LanguageSelect {locale} />
</div>
</div>

Expand All @@ -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
Expand Down
2 changes: 2 additions & 0 deletions packages/starlight/components/Icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
8 changes: 0 additions & 8 deletions packages/starlight/components/LastUpdated.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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>
42 changes: 24 additions & 18 deletions packages/starlight/components/RightSidebar.astro
Original file line number Diff line number Diff line change
@@ -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>
</>
)
}
2 changes: 1 addition & 1 deletion packages/starlight/components/RightSidebarPanel.astro
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="right-sidebar-panel">
<div class="right-sidebar-panel hidden lg:block">
<div class="container">
<slot />
</div>
Expand Down
25 changes: 8 additions & 17 deletions packages/starlight/components/TableOfContents.astro
Original file line number Diff line number Diff line change
@@ -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>

Expand Down

0 comments on commit d162b2f

Please sign in to comment.