From d162b2fc0795248fa89d45f2e5d4207126a59256 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Tue, 30 May 2023 15:48:38 +0200 Subject: Layout refactoring (#99) --- .changeset/forty-dogs-bathe.md | 5 +++ .changeset/rare-feet-cry.md | 5 +++ .changeset/six-pants-cough.md | 5 +++ .changeset/smart-drinks-tie.md | 5 +++ docs/src/content/docs/de/index.mdx | 2 ++ .../src/content/docs/de/reference/configuration.md | 2 +- docs/src/content/docs/es/index.mdx | 1 + .../src/content/docs/es/reference/configuration.md | 2 +- docs/src/content/docs/index.mdx | 1 + docs/src/content/docs/ja/index.mdx | 1 + .../src/content/docs/ja/reference/configuration.md | 2 +- docs/src/content/docs/reference/configuration.md | 2 +- docs/src/content/docs/reference/frontmatter.md | 16 +++++++++ packages/starlight/components/ContentPanel.astro | 2 +- packages/starlight/components/EditLink.astro | 22 +++++++++++- packages/starlight/components/Footer.astro | 41 +++++++++++++++++++++ packages/starlight/components/Header.astro | 31 ++++++++++++---- packages/starlight/components/Icons.ts | 2 ++ packages/starlight/components/LastUpdated.astro | 8 ----- packages/starlight/components/RightSidebar.astro | 42 ++++++++++++---------- .../starlight/components/RightSidebarPanel.astro | 2 +- .../starlight/components/TableOfContents.astro | 25 +++++-------- .../TableOfContents/MobileTableOfContents.astro | 22 +++++------- packages/starlight/index.astro | 40 +++++++++++++-------- packages/starlight/layout/PageFrame.astro | 16 ++++----- packages/starlight/layout/TwoColumnContent.astro | 24 +++++++++++-- packages/starlight/schema.ts | 10 ++++++ packages/starlight/schemas/tableOfContents.ts | 23 ++++++++++++ packages/starlight/style/props.css | 1 + packages/starlight/utils/navigation.ts | 2 +- packages/starlight/utils/user-config.ts | 15 ++------ 31 files changed, 265 insertions(+), 112 deletions(-) create mode 100644 .changeset/forty-dogs-bathe.md create mode 100644 .changeset/rare-feet-cry.md create mode 100644 .changeset/six-pants-cough.md create mode 100644 .changeset/smart-drinks-tie.md create mode 100644 packages/starlight/components/Footer.astro create mode 100644 packages/starlight/schemas/tableOfContents.ts 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 `

` und `

` Ü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 `

` y `

` 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; }` 各ページの右側に表示される目次を設定します。デフォルトでは、`

`と`

`の見出しがこの目次に含まれます。 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, `

` and `

` 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); } } 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 && {t('page.editLink')}} +{ + editUrl !== false && url && ( + + + {t('page.editLink')} + + ) +} + + 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); +--- + + + + 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; ---
@@ -18,7 +18,7 @@ const { locale } = Astro.props
@@ -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: '', translate: '', + pencil: + '', moon: '', sun: '', 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 {

) } - - 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'), + }), +}; --- - - - - - { - config.editLink.baseUrl && ( - <> -

Contribute

- - - ) - } - +{ + tocProps && ( + <> + + + + + + ) +} 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 @@ -
+