@astrojs/starlight 0.5.6 → 0.6.0

package/components/Select.astro

@@ -2,83 +2,82 @@
 import Icon from '../user-components/Icon.astro';
 
 interface Props {
-  label: string;
-  value: string;
-  icon: Parameters<typeof Icon>[0]['name'];
-  width?: string;
-  options: Array<{
-    label: string;
-    value: string;
-    selected: boolean;
-  }>;
+	label: string;
+	value: string;
+	icon: Parameters<typeof Icon>[0]['name'];
+	width?: string;
+	options: Array<{
+		label: string;
+		value: string;
+		selected: boolean;
+	}>;
 }
 ---
 
 <label style={`--sl-select-width: ${Astro.props.width}`}>
-  <span class="sr-only">{Astro.props.label}</span>
-  <Icon name={Astro.props.icon} class="icon label-icon" />
-  <select value={Astro.props.value}>
-    {
-      Astro.props.options.map(({ value, selected, label }) => (
-        <option value={value} selected={selected} set:html={label} />
-      ))
-    }
-  </select>
-  <Icon name="down-caret" class="icon caret" />
+	<span class="sr-only">{Astro.props.label}</span>
+	<Icon name={Astro.props.icon} class="icon label-icon" />
+	<select value={Astro.props.value}>
+		{
+			Astro.props.options.map(({ value, selected, label }) => (
+				<option value={value} selected={selected} set:html={label} />
+			))
+		}
+	</select>
+	<Icon name="down-caret" class="icon caret" />
 </label>
 
 <style>
-  label {
-    --sl-label-icon-size: 0.875rem;
-    --sl-caret-size: 1.25rem;
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    color: var(--sl-color-gray-1);
-  }
+	label {
+		--sl-label-icon-size: 0.875rem;
+		--sl-caret-size: 1.25rem;
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--sl-color-gray-1);
+	}
 
-  label:hover {
-    color: var(--sl-color-gray-2);
-  }
+	label:hover {
+		color: var(--sl-color-gray-2);
+	}
 
-  .icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-  }
+	.icon {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
 
-  .label-icon {
-    font-size: var(--sl-label-icon-size);
-    inset-inline-start: 0;
-  }
+	.label-icon {
+		font-size: var(--sl-label-icon-size);
+		inset-inline-start: 0;
+	}
 
-  .caret {
-    font-size: var(--sl-caret-size);
-    inset-inline-end: 0;
-  }
+	.caret {
+		font-size: var(--sl-caret-size);
+		inset-inline-end: 0;
+	}
 
-  select {
-    border: 0;
-    padding-block: 0.625rem;
-    padding-inline: calc(var(--sl-label-icon-size) + 0.25rem)
-      calc(var(--sl-caret-size) + 0.25rem);
-    width: var(--sl-select-width);
-    background-color: transparent;
-    text-overflow: ellipsis;
-    color: inherit;
-    cursor: pointer;
-    appearance: none;
-  }
+	select {
+		border: 0;
+		padding-block: 0.625rem;
+		padding-inline: calc(var(--sl-label-icon-size) + 0.25rem) calc(var(--sl-caret-size) + 0.25rem);
+		width: var(--sl-select-width);
+		background-color: transparent;
+		text-overflow: ellipsis;
+		color: inherit;
+		cursor: pointer;
+		appearance: none;
+	}
 
-  option {
-    background-color: var(--sl-color-bg-nav);
-  }
+	option {
+		background-color: var(--sl-color-bg-nav);
+	}
 
-  @media (min-width: 50rem) {
-    select {
-      font-size: var(--sl-text-sm);
-    }
-  }
+	@media (min-width: 50rem) {
+		select {
+			font-size: var(--sl-text-sm);
+		}
+	}
 </style>

package/components/Sidebar.astro

@@ -5,38 +5,38 @@ import SidebarSublist from './SidebarSublist.astro';
 import ThemeSelect from './ThemeSelect.astro';
 
 interface Props {
-  sidebar: ReturnType<typeof getSidebar>;
-  locale: string | undefined;
+	sidebar: ReturnType<typeof getSidebar>;
+	locale: string | undefined;
 }
 
 const { sidebar, locale } = Astro.props;
 ---
 
 <div class="sidebar flex">
-  <SidebarSublist sublist={sidebar} />
-  <div class="mobile-preferences flex md:hidden">
-    <ThemeSelect {locale} />
-    <LanguageSelect {locale} />
-  </div>
+	<SidebarSublist sublist={sidebar} />
+	<div class="mobile-preferences flex md:hidden">
+		<ThemeSelect {locale} />
+		<LanguageSelect {locale} />
+	</div>
 </div>
 
 <style>
-  .sidebar {
-    height: 100%;
-    padding: 1rem var(--sl-sidebar-pad-x);
-    flex-direction: column;
-    gap: 1rem;
-  }
+	.sidebar {
+		height: 100%;
+		padding: 1rem var(--sl-sidebar-pad-x);
+		flex-direction: column;
+		gap: 1rem;
+	}
 
-  .mobile-preferences {
-    justify-content: space-between;
-    border-top: 1px solid var(--sl-color-gray-6);
-    padding: 0.5rem 0;
-  }
+	.mobile-preferences {
+		justify-content: space-between;
+		border-top: 1px solid var(--sl-color-gray-6);
+		padding: 0.5rem 0;
+	}
 
-  @media (min-width: 50rem) {
-    .sidebar > :global(:nth-last-child(2)) {
-      padding-bottom: 1rem;
-    }
-  }
+	@media (min-width: 50rem) {
+		.sidebar > :global(:nth-last-child(2)) {
+			padding-bottom: 1rem;
+		}
+	}
 </style>

package/components/SidebarSublist.astro

@@ -3,115 +3,116 @@ import { flattenSidebar, type SidebarEntry } from '../utils/navigation';
 import Icon from '../user-components/Icon.astro';
 
 interface Props {
-  sublist: SidebarEntry[];
-  nested?: boolean;
+	sublist: SidebarEntry[];
+	nested?: boolean;
 }
 ---
 
 <ul class:list={{ 'top-level': !Astro.props.nested }}>
-  {
-    Astro.props.sublist.map((entry) => (
-      <li>
-        {entry.type === 'link' ? (
-          <a
-            href={entry.href}
-            aria-current={entry.isCurrent && 'page'}
-            class:list={{ large: !Astro.props.nested }}
-          >
-            {entry.label}
-          </a>
-        ) : (
-          <details
-            open={flattenSidebar(entry.entries).some(i => i.isCurrent) || !entry.collapsed}
-          >
-            <summary>
-              <h2 class="large">{entry.label}</h2>
-              <Icon name="right-caret" class="caret" size="1.25rem" />
-            </summary>
-            <Astro.self sublist={entry.entries} nested />
-          </details>
-        )}
-      </li>
-    ))
-  }
+	{
+		Astro.props.sublist.map((entry) => (
+			<li>
+				{entry.type === 'link' ? (
+					<a
+						href={entry.href}
+						aria-current={entry.isCurrent && 'page'}
+						class:list={{ large: !Astro.props.nested }}
+					>
+						{entry.label}
+					</a>
+				) : (
+					<details
+						open={flattenSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed}
+					>
+						<summary>
+							<h2 class="large">{entry.label}</h2>
+							<Icon name="right-caret" class="caret" size="1.25rem" />
+						</summary>
+						<Astro.self sublist={entry.entries} nested />
+					</details>
+				)}
+			</li>
+		))
+	}
 </ul>
 
 <style>
-  ul {
-    --sl-sidebar-item-padding-inline: 0.5rem;
-    list-style: none;
-    padding: 0;
-  }
+	ul {
+		--sl-sidebar-item-padding-inline: 0.5rem;
+		list-style: none;
+		padding: 0;
+	}
 
-  ul ul li {
-    margin-inline-start: var(--sl-sidebar-item-padding-inline);
-    border-inline-start: 1px solid var(--sl-color-hairline-light);
-    padding-inline-start: var(--sl-sidebar-item-padding-inline);
-  }
+	ul ul li {
+		margin-inline-start: var(--sl-sidebar-item-padding-inline);
+		border-inline-start: 1px solid var(--sl-color-hairline-light);
+		padding-inline-start: var(--sl-sidebar-item-padding-inline);
+	}
 
-  .large {
-    font-size: var(--sl-text-lg);
-    font-weight: 600;
-    color: var(--sl-color-white);
-  }
+	.large {
+		font-size: var(--sl-text-lg);
+		font-weight: 600;
+		color: var(--sl-color-white);
+	}
 
-  .top-level > li + li {
-    margin-top: 0.75rem;
-  }
+	.top-level > li + li {
+		margin-top: 0.75rem;
+	}
 
-  summary {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-inline: var(--sl-sidebar-item-padding-inline);
-    cursor: pointer;
-    user-select: none;
-  }
-  summary::marker,
-  summary::-webkit-details-marker {
-    display: none;
-  }
+	summary {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-inline: var(--sl-sidebar-item-padding-inline);
+		cursor: pointer;
+		user-select: none;
+	}
+	summary::marker,
+	summary::-webkit-details-marker {
+		display: none;
+	}
 
-  .caret {
-    transition: transform 0.2s ease-in-out;
-  }
-  :global([dir='rtl']) .caret {
-    transform: rotateZ(180deg);
-  }
-  [open] > summary .caret {
-    transform: rotateZ(90deg);
-  }
+	.caret {
+		transition: transform 0.2s ease-in-out;
+	}
+	:global([dir='rtl']) .caret {
+		transform: rotateZ(180deg);
+	}
+	[open] > summary .caret {
+		transform: rotateZ(90deg);
+	}
 
-  a {
-    display: block;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    color: var(--sl-color-gray-2);
-    padding: 0.1em var(--sl-sidebar-item-padding-inline);
-  }
+	a {
+		display: block;
+		border-radius: 0.25rem;
+		text-decoration: none;
+		color: var(--sl-color-gray-2);
+		padding: 0.3em var(--sl-sidebar-item-padding-inline);
+		line-height: 1.4;
+	}
 
-  a:hover,
-  a:focus {
-    color: var(--sl-color-white);
-  }
+	a:hover,
+	a:focus {
+		color: var(--sl-color-white);
+	}
 
-  [aria-current='page'],
-  [aria-current='page']:hover,
-  [aria-current='page']:focus {
-    font-weight: 600;
-    color: var(--sl-color-text-invert);
-    background-color: var(--sl-color-text-accent);
-  }
+	[aria-current='page'],
+	[aria-current='page']:hover,
+	[aria-current='page']:focus {
+		font-weight: 600;
+		color: var(--sl-color-text-invert);
+		background-color: var(--sl-color-text-accent);
+	}
 
-  @media (min-width: 50rem) {
-    .top-level > li + li {
-      margin-top: 0.5rem;
-    }
-    .large {
-      font-size: var(--sl-text-base);
-    }
-    a {
-      font-size: var(--sl-text-sm);
-    }
-  }
+	@media (min-width: 50rem) {
+		.top-level > li + li {
+			margin-top: 0.5rem;
+		}
+		.large {
+			font-size: var(--sl-text-base);
+		}
+		a {
+			font-size: var(--sl-text-sm);
+		}
+	}
 </style>

package/components/SiteTitle.astro

@@ -4,79 +4,81 @@ import config from 'virtual:starlight/user-config';
 import { pathWithBase } from '../utils/base';
 
 interface Props {
-  locale: string | undefined;
+	locale: string | undefined;
 }
 
 if (config.logo) {
-  let err: string | undefined;
-  if ('src' in config.logo) {
-    if (!logos.dark || !logos.light) {
-      err = `Could not resolve logo import for "${config.logo.src}" (logo.src)`;
-    }
-  } else {
-    if (!logos.dark) {
-      err = `Could not resolve logo import for "${config.logo.dark}" (logo.dark)`;
-    } else if (!logos.light) {
-      err = `Could not resolve logo import for "${config.logo.light}" (logo.light)`;
-    }
-  }
-  if (err) throw new Error(err);
+	let err: string | undefined;
+	if ('src' in config.logo) {
+		if (!logos.dark || !logos.light) {
+			err = `Could not resolve logo import for "${config.logo.src}" (logo.src)`;
+		}
+	} else {
+		if (!logos.dark) {
+			err = `Could not resolve logo import for "${config.logo.dark}" (logo.dark)`;
+		} else if (!logos.light) {
+			err = `Could not resolve logo import for "${config.logo.light}" (logo.light)`;
+		}
+	}
+	if (err) throw new Error(err);
 }
 
 const href = pathWithBase(Astro.props.locale || '/');
 ---
 
 <a {href} class="site-title flex">
-  {
-    config.logo && logos.dark && (
-      <>
-        <img
-          class:list={{ 'dark-only': !('src' in config.logo) }}
-          alt={config.logo.alt}
-          src={logos.dark.src}
-          width={logos.dark.width}
-          height={logos.dark.height}
-        />
-        {/* Show light alternate if a user configure both light and dark logos. */}
-        {!('src' in config.logo) && (
-          <img
-            class="light-only"
-            alt={config.logo.alt}
-            src={logos.light?.src}
-            width={logos.light?.width}
-            height={logos.light?.height}
-          />
-        )}
-      </>
-    )
-  }
-  <span class:list={{ 'sr-only': config.logo?.replacesTitle }}>
-    {config.title}
-  </span>
+	{
+		config.logo && logos.dark && (
+			<>
+				<img
+					class:list={{ 'dark-only': !('src' in config.logo) }}
+					alt={config.logo.alt}
+					src={logos.dark.src}
+					width={logos.dark.width}
+					height={logos.dark.height}
+				/>
+				{/* Show light alternate if a user configure both light and dark logos. */}
+				{!('src' in config.logo) && (
+					<img
+						class="light-only"
+						alt={config.logo.alt}
+						src={logos.light?.src}
+						width={logos.light?.width}
+						height={logos.light?.height}
+					/>
+				)}
+			</>
+		)
+	}
+	<span class:list={{ 'sr-only': config.logo?.replacesTitle }}>
+		{config.title}
+	</span>
 </a>
 
 <style>
-  .site-title {
-    justify-self: flex-start;
-    align-items: center;
-    gap: var(--sl-nav-gap);
-    font-size: var(--sl-text-h4);
-    font-weight: 600;
-    color: var(--sl-color-text-accent);
-    text-decoration: none;
-    white-space: nowrap;
-  }
-  img {
-    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
-    width: auto;
-    max-width: 100%;
-    object-fit: contain;
-    object-position: 0 50%;
-  }
-  :global([data-theme='light']) .dark-only {
-    display: none;
-  }
-  :global([data-theme='dark']) .light-only {
-    display: none;
-  }
+	.site-title {
+		justify-self: flex-start;
+		max-width: 100%;
+		overflow: hidden;
+		align-items: center;
+		gap: var(--sl-nav-gap);
+		font-size: var(--sl-text-h4);
+		font-weight: 600;
+		color: var(--sl-color-text-accent);
+		text-decoration: none;
+		white-space: nowrap;
+	}
+	img {
+		height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+		width: auto;
+		max-width: 100%;
+		object-fit: contain;
+		object-position: 0 50%;
+	}
+	:global([data-theme='light']) .dark-only {
+		display: none;
+	}
+	:global([data-theme='dark']) .light-only {
+		display: none;
+	}
 </style>

package/components/SkipLink.astro

@@ -2,7 +2,7 @@
 import { useTranslations } from '../utils/translations';
 
 interface Props {
-  locale: string | undefined;
+	locale: string | undefined;
 }
 
 const t = useTranslations(Astro.props.locale);
@@ -11,20 +11,20 @@ const t = useTranslations(Astro.props.locale);
 <a href="#_top">{t('skipLink.label')}</a>
 
 <style>
-  a {
-    clip: rect(0, 0, 0, 0);
-    position: fixed;
-    top: 0.75rem;
-    inset-inline-start: 0.75rem;
-  }
-  a:focus {
-    clip: unset;
-    z-index: var(--sl-z-index-skiplink);
-    display: block;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    color: var(--sl-color-text-invert);
-    background-color: var(--sl-color-text-accent);
-    box-shadow: var(--sl-shadow-lg);
-  }
+	a {
+		clip: rect(0, 0, 0, 0);
+		position: fixed;
+		top: 0.75rem;
+		inset-inline-start: 0.75rem;
+	}
+	a:focus {
+		clip: unset;
+		z-index: var(--sl-z-index-skiplink);
+		display: block;
+		padding: 0.5rem 1rem;
+		text-decoration: none;
+		color: var(--sl-color-text-invert);
+		background-color: var(--sl-color-text-accent);
+		box-shadow: var(--sl-shadow-lg);
+	}
 </style>