@astrojs/starlight 0.5.5 → 0.6.0

package/404.astro

@@ -14,22 +14,22 @@ const entryMeta = { dir, lang, locale };
 const t = useTranslations(locale);
 
 const fallbackEntry: StarlightDocsEntry = {
-  slug: '404',
-  id: '404.md' as StarlightDocsEntry['id'],
-  body: '',
-  collection: 'docs',
-  data: {
-    title: '404',
-    template: 'splash',
-    editUrl: false,
-    head: [],
-    hero: { tagline: t('404.text'), actions: [] },
-  },
-  render: async () => ({
-    Content: EmptyContent,
-    headings: [],
-    remarkPluginFrontmatter: {},
-  }),
+	slug: '404',
+	id: '404.md' as StarlightDocsEntry['id'],
+	body: '',
+	collection: 'docs',
+	data: {
+		title: '404',
+		template: 'splash',
+		editUrl: false,
+		head: [],
+		hero: { tagline: t('404.text'), actions: [] },
+	},
+	render: async () => ({
+		Content: EmptyContent,
+		headings: [],
+		remarkPluginFrontmatter: {},
+	}),
 };
 
 const userEntry = await getEntry('docs', '404');
@@ -38,5 +38,5 @@ const { Content, headings } = await entry.render();
 ---
 
 <Page {headings} entry={entry} id={entry.id} slug={entry.slug} {...entryMeta} {entryMeta}>
-  <Content />
+	<Content />
 </Page>

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @astrojs/starlight
 
+## 0.6.0
+
+### Minor Changes
+
+- [#424](https://github.com/withastro/starlight/pull/424) [`4485d90`](https://github.com/withastro/starlight/commit/4485d90fbddf7c9458b43f9d9b7560b41ec9e98f) Thanks [@delucis](https://github.com/delucis)! - Add support for customising autogenerated sidebar link labels from page frontmatter, overriding the page title:
+
+  ```md
+  ---
+  title: About this project
+  sidebar:
+    label: About
+  ---
+  ```
+
+- [#359](https://github.com/withastro/starlight/pull/359) [`e733311`](https://github.com/withastro/starlight/commit/e73331133b0e2574a139409ba76d97cc1bd52a82) Thanks [@IDurward](https://github.com/IDurward)! - Add support for defining the order of auto-generated link groups in the sidebar using a frontmatter value:
+
+  ```md
+  ---
+  title: Page to display first
+  sidebar:
+    order: 1
+  ---
+  ```
+
+### Patch Changes
+
+- [#413](https://github.com/withastro/starlight/pull/413) [`5a9d8f1`](https://github.com/withastro/starlight/commit/5a9d8f11d59bd48322a1f2ff90e68333c3207ee1) Thanks [@delucis](https://github.com/delucis)! - Fix site title overflow bug for longer titles on narrow screens
+
+- [#381](https://github.com/withastro/starlight/pull/381) [`6e62909`](https://github.com/withastro/starlight/commit/6e629095e78da4bfd422cd0a9cd9beb0d85d9a1a) Thanks [@lorenzolewis](https://github.com/lorenzolewis)! - Preserve order of `social` config in navbar
+
+- [#419](https://github.com/withastro/starlight/pull/419) [`38ff53c`](https://github.com/withastro/starlight/commit/38ff53c216898efaa8c07394500e82da1d68ee8a) Thanks [@lorenzolewis](https://github.com/lorenzolewis)! - Improve styling of sidebar entries that wrap onto multiple lines
+
+- [#418](https://github.com/withastro/starlight/pull/418) [`c7b2a4e`](https://github.com/withastro/starlight/commit/c7b2a4e9c8c55564be75f0c0901e38577ac764ec) Thanks [@delucis](https://github.com/delucis)! - Set `tab-size: 2` on content code blocks to override default browser value of `8`
+
+- [#399](https://github.com/withastro/starlight/pull/399) [`31b8a5a`](https://github.com/withastro/starlight/commit/31b8a5aed2bca363c1b05c683b020e596b70bf4a) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Add new global `favicon` option defaulting to `'/favicon.svg'` to set the path of the default favicon for your website. Additional icons can be specified using the `head` option.
+
+- [#414](https://github.com/withastro/starlight/pull/414) [`e951671`](https://github.com/withastro/starlight/commit/e95167174e3eab3790328b8e42517abcbca04ff3) Thanks [@delucis](https://github.com/delucis)! - Add GitLab to social link icons
+
+## 0.5.6
+
+### Patch Changes
+
+- [#383](https://github.com/withastro/starlight/pull/383) [`0ebc47e`](https://github.com/withastro/starlight/commit/0ebc47e52dc420240c8cb724c01f98dc22bdfc60) Thanks [@delucis](https://github.com/delucis)! - Fix edge case where index files in an index directory would end up with the wrong slug
+
+- [#373](https://github.com/withastro/starlight/pull/373) [`308b3aa`](https://github.com/withastro/starlight/commit/308b3aaeb0122af81a12514a81e160910f93d7a7) Thanks [@lorenzolewis](https://github.com/lorenzolewis)! - Fix visual overflow for wide logos
+
+- [#385](https://github.com/withastro/starlight/pull/385) [`fb35397`](https://github.com/withastro/starlight/commit/fb35397f107f7bbb2cb4929b7837f105f565a659) Thanks [@lorenzolewis](https://github.com/lorenzolewis)! - Fix nested elements in markdown content
+
+- [#386](https://github.com/withastro/starlight/pull/386) [`e6f6f30`](https://github.com/withastro/starlight/commit/e6f6f304437203d5ee6770092ac79063448b821f) Thanks [@huijing](https://github.com/huijing)! - Prevent search keyboard shortcuts from triggering when input elements are focused
+
 ## 0.5.5
 
 ### Patch Changes
@@ -301,8 +351,8 @@
 
   ```json
   {
-    "search.label": "Suchen",
-    "search.shortcutLabel": "(Drücke / zum Suchen)"
+  	"search.label": "Suchen",
+  	"search.shortcutLabel": "(Drücke / zum Suchen)"
   }
   ```
 

package/components/CallToAction.astro

@@ -3,49 +3,46 @@ import Icon from '../user-components/Icon.astro';
 import type { Icons } from './Icons';
 
 interface Props {
-  variant: 'primary' | 'secondary' | 'minimal';
-  link: string;
-  icon?:
-    | undefined
-    | { type: 'icon'; name: keyof typeof Icons }
-    | { type: 'raw'; html: string };
+	variant: 'primary' | 'secondary' | 'minimal';
+	link: string;
+	icon?: undefined | { type: 'icon'; name: keyof typeof Icons } | { type: 'raw'; html: string };
 }
 
 const { link, variant, icon } = Astro.props;
 ---
 
 <a class:list={['flex action', variant]} href={link}>
-  <slot />
-  {icon?.type === 'icon' && <Icon name={icon.name} size="1.5rem" />}
-  {icon?.type === 'raw' && <Fragment set:html={icon.html} />}
+	<slot />
+	{icon?.type === 'icon' && <Icon name={icon.name} size="1.5rem" />}
+	{icon?.type === 'raw' && <Fragment set:html={icon.html} />}
 </a>
 
 <style>
-  .action {
-    gap: 0.5em;
-    align-items: center;
-    border-radius: 999rem;
-    padding: 0.5rem 1.125rem;
-    color: var(--sl-color-white);
-    line-height: 1.1875;
-    text-decoration: none;
-    font-size: var(--sl-text-sm);
-  }
-  .action.primary {
-    background: var(--sl-color-text-accent);
-    color: var(--sl-color-black);
-  }
-  .action.secondary {
-    border: 1px solid;
-  }
-  .action.minimal {
-    padding-inline: 0;
-  }
+	.action {
+		gap: 0.5em;
+		align-items: center;
+		border-radius: 999rem;
+		padding: 0.5rem 1.125rem;
+		color: var(--sl-color-white);
+		line-height: 1.1875;
+		text-decoration: none;
+		font-size: var(--sl-text-sm);
+	}
+	.action.primary {
+		background: var(--sl-color-text-accent);
+		color: var(--sl-color-black);
+	}
+	.action.secondary {
+		border: 1px solid;
+	}
+	.action.minimal {
+		padding-inline: 0;
+	}
 
-  @media (min-width: 50rem) {
-    .action {
-      font-size: var(--sl-text-base);
-      padding: 1rem 1.25rem;
-    }
-  }
+	@media (min-width: 50rem) {
+		.action {
+			font-size: var(--sl-text-base);
+			padding: 1rem 1.25rem;
+		}
+	}
 </style>

package/components/ContentPanel.astro

@@ -1,25 +1,25 @@
 <div class="content-panel">
-  <div class="container"><slot /></div>
+	<div class="container"><slot /></div>
 </div>
 
 <style>
-  .content-panel {
-    padding: 1.5rem var(--sl-content-pad-x);
-  }
-  .content-panel + .content-panel {
-    border-top: 1px solid var(--sl-color-hairline);
-  }
-  .container {
-    max-width: var(--sl-content-width);
-  }
+	.content-panel {
+		padding: 1.5rem var(--sl-content-pad-x);
+	}
+	.content-panel + .content-panel {
+		border-top: 1px solid var(--sl-color-hairline);
+	}
+	.container {
+		max-width: var(--sl-content-width);
+	}
 
-  .container > :global(* + *) {
-    margin-top: 1.5rem;
-  }
+	.container > :global(* + *) {
+		margin-top: 1.5rem;
+	}
 
-  @media (min-width: 72rem) {
-    .container {
-      margin-inline: var(--sl-content-margin-inline, auto);
-    }
-  }
+	@media (min-width: 72rem) {
+		.container {
+			margin-inline: var(--sl-content-margin-inline, auto);
+		}
+	}
 </style>

package/components/EditLink.astro

@@ -5,9 +5,9 @@ import { useTranslations } from '../utils/translations';
 import Icon from '../user-components/Icon.astro';
 
 interface Props {
-  data: CollectionEntry<'docs'>['data'];
-  id: CollectionEntry<'docs'>['id'];
-  locale: string | undefined;
+	data: CollectionEntry<'docs'>['data'];
+	id: CollectionEntry<'docs'>['id'];
+	locale: string | undefined;
 }
 
 const t = useTranslations(Astro.props.locale);
@@ -17,30 +17,30 @@ let { baseUrl } = config.editLink;
 if (baseUrl && baseUrl.at(-1) !== '/') baseUrl += '/';
 
 const url =
-  typeof editUrl === 'string'
-    ? editUrl
-    : baseUrl
-    ? baseUrl + 'src/content/docs/' + Astro.props.id
-    : undefined;
+	typeof editUrl === 'string'
+		? editUrl
+		: baseUrl
+		? baseUrl + 'src/content/docs/' + Astro.props.id
+		: undefined;
 ---
 
 {
-  editUrl !== false && url && (
-    <a href={url} class="flex">
-      <Icon name="pencil" size="1.2em" />
-      {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);
-  }
+	a {
+		gap: 0.5rem;
+		align-items: center;
+		text-decoration: none;
+		color: var(--sl-color-gray-3);
+	}
+	a:hover {
+		color: var(--sl-color-white);
+	}
 </style>

package/components/FallbackContentNotice.astro

@@ -3,31 +3,29 @@ import { useTranslations } from '../utils/translations';
 import Icon from '../user-components/Icon.astro';
 
 interface Props {
-  locale: string | undefined;
+	locale: string | undefined;
 }
 
 const t = useTranslations(Astro.props.locale);
 ---
 
 <p class="flex">
-  <Icon
-    name={'warning'}
-    size="1.5em"
-    color="var(--sl-color-orange-high)"
-  /><span>{t('i18n.untranslatedContent')}</span>
+	<Icon name={'warning'} size="1.5em" color="var(--sl-color-orange-high)" /><span
+		>{t('i18n.untranslatedContent')}</span
+	>
 </p>
 
 <style>
-  p {
-    border: 1px solid var(--sl-color-orange);
-    padding: 0.75em 1em;
-    background-color: var(--sl-color-orange-low);
-    color: var(--sl-color-orange-high);
-    width: max-content;
-    max-width: 100%;
-    align-items: center;
-    gap: 0.75em;
-    font-size: var(--sl-text-body-sm);
-    line-height: var(--sl-line-height-headings);
-  }
+	p {
+		border: 1px solid var(--sl-color-orange);
+		padding: 0.75em 1em;
+		background-color: var(--sl-color-orange-low);
+		color: var(--sl-color-orange-high);
+		width: max-content;
+		max-width: 100%;
+		align-items: center;
+		gap: 0.75em;
+		font-size: var(--sl-text-body-sm);
+		line-height: var(--sl-line-height-headings);
+	}
 </style>

package/components/Footer.astro

@@ -9,49 +9,43 @@ import PrevNextLinks from '../components/PrevNextLinks.astro';
 import EditLink from './EditLink.astro';
 
 interface Props extends LocaleData {
-  entry: StarlightDocsEntry;
-  sidebar: SidebarEntry[];
+	entry: StarlightDocsEntry;
+	sidebar: SidebarEntry[];
 }
 
 const { entry, dir, lang, locale, sidebar } = Astro.props;
 const prevNextLinks = getPrevNextLinks(sidebar, config.pagination, {
-  prev: entry.data.prev,
-  next: entry.data.next
+	prev: entry.data.prev,
+	next: entry.data.next,
 });
 ---
 
 <footer>
-  <div class="meta flex">
-    {
-      config.editLink.baseUrl && (
-        <EditLink data={entry.data} id={entry.id} {locale} />
-      )
-    }
-    {
-      (entry.data.lastUpdated ?? config.lastUpdated) && (
-        <LastUpdated
-          id={entry.id}
-          {lang}
-          lastUpdated={
-            typeof entry.data.lastUpdated !== 'boolean'
-              ? entry.data.lastUpdated
-              : undefined
-          }
-          {locale}
-        />
-      )
-    }
-  </div>
-  <PrevNextLinks {...prevNextLinks} {dir} {locale} />
+	<div class="meta flex">
+		{config.editLink.baseUrl && <EditLink data={entry.data} id={entry.id} {locale} />}
+		{
+			(entry.data.lastUpdated ?? config.lastUpdated) && (
+				<LastUpdated
+					id={entry.id}
+					{lang}
+					lastUpdated={
+						typeof entry.data.lastUpdated !== 'boolean' ? entry.data.lastUpdated : undefined
+					}
+					{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);
-  }
+	.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>

package/components/HeadSEO.astro

@@ -8,105 +8,99 @@ import { fileWithBase } from '../utils/base';
 import { version } from '../package.json';
 
 interface Props {
-  data: CollectionEntry<'docs'>['data'];
-  lang: string;
+	data: CollectionEntry<'docs'>['data'];
+	lang: string;
 }
 
 const { data, lang } = Astro.props;
 
-const canonical = Astro.site
-  ? new URL(Astro.url.pathname, Astro.site)
-  : undefined;
+const canonical = Astro.site ? new URL(Astro.url.pathname, Astro.site) : undefined;
 const title = data.title || config.title;
 const description = data.description || config.description;
 
 const headDefaults: z.input<ReturnType<typeof HeadConfigSchema>> = [
-  { tag: 'meta', attrs: { charset: 'utf-8' } },
-  {
-    tag: 'meta',
-    attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-  },
-  { tag: 'title', content: title },
-  { tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } },
-  { tag: 'meta', attrs: { name: 'generator', content: Astro.generator } },
-  {
-    tag: 'meta',
-    attrs: { name: 'generator', content: `Starlight v${version}` },
-  },
-  // Favicon
-  {
-    tag: 'link',
-    attrs: {
-      rel: 'shortcut icon',
-      href: fileWithBase('/favicon.svg'),
-      type: 'image/svg+xml',
-    },
-  },
-  // OpenGraph Tags
-  { tag: 'meta', attrs: { property: 'og:title', content: title } },
-  { tag: 'meta', attrs: { property: 'og:type', content: 'article' } },
-  { tag: 'meta', attrs: { property: 'og:url', content: canonical?.href } },
-  { tag: 'meta', attrs: { property: 'og:locale', content: lang } },
-  { tag: 'meta', attrs: { property: 'og:description', content: description } },
-  { tag: 'meta', attrs: { property: 'og:site_name', content: config.title } },
-  // Twitter Tags
-  {
-    tag: 'meta',
-    attrs: { name: 'twitter:card', content: 'summary_large_image' },
-  },
-  { tag: 'meta', attrs: { name: 'twitter:title', content: title } },
-  { tag: 'meta', attrs: { name: 'twitter:description', content: description } },
+	{ tag: 'meta', attrs: { charset: 'utf-8' } },
+	{
+		tag: 'meta',
+		attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+	},
+	{ tag: 'title', content: title },
+	{ tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } },
+	{ tag: 'meta', attrs: { name: 'generator', content: Astro.generator } },
+	{
+		tag: 'meta',
+		attrs: { name: 'generator', content: `Starlight v${version}` },
+	},
+	// Favicon
+	{
+		tag: 'link',
+		attrs: {
+			rel: 'shortcut icon',
+			href: fileWithBase(config.favicon.href),
+			type: config.favicon.type,
+		},
+	},
+	// OpenGraph Tags
+	{ tag: 'meta', attrs: { property: 'og:title', content: title } },
+	{ tag: 'meta', attrs: { property: 'og:type', content: 'article' } },
+	{ tag: 'meta', attrs: { property: 'og:url', content: canonical?.href } },
+	{ tag: 'meta', attrs: { property: 'og:locale', content: lang } },
+	{ tag: 'meta', attrs: { property: 'og:description', content: description } },
+	{ tag: 'meta', attrs: { property: 'og:site_name', content: config.title } },
+	// Twitter Tags
+	{
+		tag: 'meta',
+		attrs: { name: 'twitter:card', content: 'summary_large_image' },
+	},
+	{ tag: 'meta', attrs: { name: 'twitter:title', content: title } },
+	{ tag: 'meta', attrs: { name: 'twitter:description', content: description } },
 ];
 
 if (description)
-  headDefaults.push({
-    tag: 'meta',
-    attrs: { name: 'description', content: description },
-  });
+	headDefaults.push({
+		tag: 'meta',
+		attrs: { name: 'description', content: description },
+	});
 
 // Link to language alternates.
 if (canonical && config.isMultilingual) {
-  for (const locale in config.locales) {
-    const localeOpts = config.locales[locale];
-    if (!localeOpts) continue;
-    headDefaults.push({
-      tag: 'link',
-      attrs: {
-        rel: 'alternate',
-        hreflang: localeOpts.lang,
-        href: localizedUrl(canonical, locale).href,
-      },
-    });
-  }
+	for (const locale in config.locales) {
+		const localeOpts = config.locales[locale];
+		if (!localeOpts) continue;
+		headDefaults.push({
+			tag: 'link',
+			attrs: {
+				rel: 'alternate',
+				hreflang: localeOpts.lang,
+				href: localizedUrl(canonical, locale).href,
+			},
+		});
+	}
 }
 
 // Link to sitemap, but only when `site` is set.
 if (Astro.site) {
-  headDefaults.push({
-    tag: 'link',
-    attrs: {
-      rel: 'sitemap',
-      href: fileWithBase('/sitemap-index.xml'),
-    },
-  });
+	headDefaults.push({
+		tag: 'link',
+		attrs: {
+			rel: 'sitemap',
+			href: fileWithBase('/sitemap-index.xml'),
+		},
+	});
 }
 
 // Link to Twitter account if set in Starlight config.
 if (config.social?.twitter) {
-  headDefaults.push({
-    tag: 'meta',
-    attrs: {
-      name: 'twitter:site',
-      content: new URL(config.social.twitter).pathname,
-    },
-  });
+	headDefaults.push({
+		tag: 'meta',
+		attrs: {
+			name: 'twitter:site',
+			content: new URL(config.social.twitter).pathname,
+		},
+	});
 }
 
 const head = createHead(headDefaults, config.head, data.head);
 ---
 
-{
-  head.map(({ tag: Tag, attrs, content }) => (
-    <Tag {...attrs} set:html={content} />
-  ))
-}
+{head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}