@astrojs/starlight 0.5.6 → 0.6.0

package/components/MarkdownContent.astro

@@ -1,135 +1,123 @@
 <div class="content"><slot /></div>
 
 <style>
-  .content
-    :global(
-      :not(a, strong, em, del, span, input)
-        + :not(a, strong, em, del, span, input, :where(.not-content *))
-    ) {
-    margin-top: 1.5rem;
-  }
+	.content
+		:global(
+			:not(a, strong, em, del, span, input)
+				+ :not(a, strong, em, del, span, input, :where(.not-content *))
+		) {
+		margin-top: 1.5rem;
+	}
 
-  /* Headings after non-headings have more spacing. */
-  .content
-    :global(
-      :not(h1, h2, h3, h4, h5, h6)
-        + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))
-    ) {
-    margin-top: 2.5rem;
-  }
+	/* Headings after non-headings have more spacing. */
+	.content
+		:global(
+			:not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))
+		) {
+		margin-top: 2.5rem;
+	}
 
-  .content :global(li + li:not(:where(.not-content *))),
-  .content :global(dt + dt:not(:where(.not-content *))),
-  .content :global(dt + dd:not(:where(.not-content *))),
-  .content :global(dd + dd:not(:where(.not-content *))) {
-    margin-top: 0.25rem;
-  }
+	.content :global(li + li:not(:where(.not-content *))),
+	.content :global(dt + dt:not(:where(.not-content *))),
+	.content :global(dt + dd:not(:where(.not-content *))),
+	.content :global(dd + dd:not(:where(.not-content *))) {
+		margin-top: 0.25rem;
+	}
 
-  .content
-    :global(
-      li
-        > :last-child:not(li, ul, ol):not(
-          a,
-          strong,
-          em,
-          del,
-          span,
-          input,
-          :where(.not-content *)
-        )
-    ) {
-    margin-bottom: 1.25rem;
-  }
+	.content
+		:global(
+			li > :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *))
+		) {
+		margin-bottom: 1.25rem;
+	}
 
-  .content :global(dt:not(:where(.not-content *))) {
-    font-weight: 700;
-  }
-  .content :global(dd:not(:where(.not-content *))) {
-    padding-inline-start: 1rem;
-  }
+	.content :global(dt:not(:where(.not-content *))) {
+		font-weight: 700;
+	}
+	.content :global(dd:not(:where(.not-content *))) {
+		padding-inline-start: 1rem;
+	}
 
-  .content :global(:is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))) {
-    color: var(--sl-color-white);
-    line-height: var(--sl-line-height-headings);
-    font-weight: 600;
-  }
+	.content :global(:is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))) {
+		color: var(--sl-color-white);
+		line-height: var(--sl-line-height-headings);
+		font-weight: 600;
+	}
 
-  .content
-    :global(
-      :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *))
-    ) {
-    display: block;
-    max-width: 100%;
-    height: auto;
-  }
+	.content :global(:is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *))) {
+		display: block;
+		max-width: 100%;
+		height: auto;
+	}
 
-  .content :global(h1:not(:where(.not-content *))) {
-    font-size: var(--sl-text-h1);
-  }
-  .content :global(h2:not(:where(.not-content *))) {
-    font-size: var(--sl-text-h2);
-  }
-  .content :global(h3:not(:where(.not-content *))) {
-    font-size: var(--sl-text-h3);
-  }
-  .content :global(h4:not(:where(.not-content *))) {
-    font-size: var(--sl-text-h4);
-  }
-  .content :global(h5:not(:where(.not-content *))) {
-    font-size: var(--sl-text-h5);
-  }
-  .content :global(h6:not(:where(.not-content *))) {
-    font-size: var(--sl-text-h6);
-  }
+	.content :global(h1:not(:where(.not-content *))) {
+		font-size: var(--sl-text-h1);
+	}
+	.content :global(h2:not(:where(.not-content *))) {
+		font-size: var(--sl-text-h2);
+	}
+	.content :global(h3:not(:where(.not-content *))) {
+		font-size: var(--sl-text-h3);
+	}
+	.content :global(h4:not(:where(.not-content *))) {
+		font-size: var(--sl-text-h4);
+	}
+	.content :global(h5:not(:where(.not-content *))) {
+		font-size: var(--sl-text-h5);
+	}
+	.content :global(h6:not(:where(.not-content *))) {
+		font-size: var(--sl-text-h6);
+	}
 
-  .content :global(a:not(:where(.not-content *))) {
-    color: var(--sl-color-text-accent);
-  }
-  .content :global(a:hover:not(:where(.not-content *))) {
-    color: var(--sl-color-white);
-  }
+	.content :global(a:not(:where(.not-content *))) {
+		color: var(--sl-color-text-accent);
+	}
+	.content :global(a:hover:not(:where(.not-content *))) {
+		color: var(--sl-color-white);
+	}
 
-  .content :global(code:not(:where(.not-content *))) {
-    background-color: var(--sl-color-bg-inline-code);
-    margin-block: -0.125rem;
-    padding: 0.125rem 0.375rem;
-    font-size: var(--sl-text-code-sm);
-  }
-  .content :global(:is(h1, h2, h3, h4, h5, h6) code) {
-    font-size: inherit;
-  }
+	.content :global(code:not(:where(.not-content *))) {
+		background-color: var(--sl-color-bg-inline-code);
+		margin-block: -0.125rem;
+		padding: 0.125rem 0.375rem;
+		font-size: var(--sl-text-code-sm);
+	}
+	.content :global(:is(h1, h2, h3, h4, h5, h6) code) {
+		font-size: inherit;
+	}
 
-  .content :global(pre:not(:where(.not-content *))) {
-    border: 1px solid var(--sl-color-gray-5);
-    padding: 0.75rem 1rem;
-    font-size: var(--sl-text-code);
-  }
+	.content :global(pre:not(:where(.not-content *))) {
+		border: 1px solid var(--sl-color-gray-5);
+		padding: 0.75rem 1rem;
+		font-size: var(--sl-text-code);
+		tab-size: 2;
+	}
 
-  .content :global(pre code:not(:where(.not-content *))) {
-    all: unset;
-    font-family: var(--__sl-font-mono);
-  }
+	.content :global(pre code:not(:where(.not-content *))) {
+		all: unset;
+		font-family: var(--__sl-font-mono);
+	}
 
-  .content :global(blockquote:not(:where(.not-content *))) {
-    border-inline-start: 1px solid var(--sl-color-gray-5);
-    padding-inline-start: 1rem;
-  }
+	.content :global(blockquote:not(:where(.not-content *))) {
+		border-inline-start: 1px solid var(--sl-color-gray-5);
+		padding-inline-start: 1rem;
+	}
 
-  .content :global(table:not(:where(.not-content *))) {
-    display: block;
-    overflow: auto;
-    border-collapse: collapse;
-  }
-  .content :global(tr:nth-child(2n):not(:where(.not-content *))) {
-    background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
-  }
-  .content :global(:is(th, td):not(:where(.not-content *))) {
-    border: 1px solid var(--sl-color-hairline);
-    padding: 0.375rem 0.8125rem;
-  }
+	.content :global(table:not(:where(.not-content *))) {
+		display: block;
+		overflow: auto;
+		border-collapse: collapse;
+	}
+	.content :global(tr:nth-child(2n):not(:where(.not-content *))) {
+		background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
+	}
+	.content :global(:is(th, td):not(:where(.not-content *))) {
+		border: 1px solid var(--sl-color-hairline);
+		padding: 0.375rem 0.8125rem;
+	}
 
-  .content :global(hr:not(:where(.not-content *))) {
-    border: 0;
-    border-bottom: 1px solid var(--sl-color-hairline);
-  }
+	.content :global(hr:not(:where(.not-content *))) {
+		border: 0;
+		border-bottom: 1px solid var(--sl-color-hairline);
+	}
 </style>

package/components/MobileMenuToggle.astro

@@ -3,99 +3,99 @@ import Icon from '../user-components/Icon.astro';
 import { useTranslations } from '../utils/translations';
 
 interface Props {
-  locale: string | undefined;
+	locale: string | undefined;
 }
 
 const t = useTranslations(Astro.props.locale);
 ---
 
 <starlight-menu-button>
-  <button
-    aria-expanded="false"
-    aria-label={t('menuButton.accessibleLabel')}
-    aria-controls="starlight__sidebar"
-    class="flex md:hidden"
-  >
-    <Icon name="bars" />
-  </button>
+	<button
+		aria-expanded="false"
+		aria-label={t('menuButton.accessibleLabel')}
+		aria-controls="starlight__sidebar"
+		class="flex md:hidden"
+	>
+		<Icon name="bars" />
+	</button>
 </starlight-menu-button>
 
 <script>
-  class StarlightMenuButton extends HTMLElement {
-    btn = this.querySelector('button')!;
-
-    constructor() {
-      super();
-      // Toggle `aria-expanded` state when a user clicks the button.
-      this.btn.addEventListener('click', () => this.toggleExpanded());
-
-      // Close the menu when a user presses the escape key.
-      const parentNav = this.closest('nav');
-      if (parentNav) {
-        parentNav.addEventListener('keyup', (e) => this.closeOnEscape(e));
-      }
-    }
-
-    setExpanded(expanded: boolean) {
-      this.setAttribute('aria-expanded', String(expanded));
-      document.body.toggleAttribute('data-mobile-menu-expanded', expanded);
-    }
-
-    toggleExpanded() {
-      this.setExpanded(this.getAttribute('aria-expanded') !== 'true');
-    }
-
-    closeOnEscape(e: KeyboardEvent) {
-      if (e.code === 'Escape') {
-        this.setExpanded(false);
-        this.btn.focus();
-      }
-    }
-  }
-
-  customElements.define('starlight-menu-button', StarlightMenuButton);
+	class StarlightMenuButton extends HTMLElement {
+		btn = this.querySelector('button')!;
+
+		constructor() {
+			super();
+			// Toggle `aria-expanded` state when a user clicks the button.
+			this.btn.addEventListener('click', () => this.toggleExpanded());
+
+			// Close the menu when a user presses the escape key.
+			const parentNav = this.closest('nav');
+			if (parentNav) {
+				parentNav.addEventListener('keyup', (e) => this.closeOnEscape(e));
+			}
+		}
+
+		setExpanded(expanded: boolean) {
+			this.setAttribute('aria-expanded', String(expanded));
+			document.body.toggleAttribute('data-mobile-menu-expanded', expanded);
+		}
+
+		toggleExpanded() {
+			this.setExpanded(this.getAttribute('aria-expanded') !== 'true');
+		}
+
+		closeOnEscape(e: KeyboardEvent) {
+			if (e.code === 'Escape') {
+				this.setExpanded(false);
+				this.btn.focus();
+			}
+		}
+	}
+
+	customElements.define('starlight-menu-button', StarlightMenuButton);
 </script>
 
 <style>
-  button {
-    position: fixed;
-    top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
-    inset-inline-end: var(--sl-nav-pad-x);
-    z-index: var(--sl-z-index-navbar);
-    border: 0;
-    border-radius: 50%;
-    width: var(--sl-menu-button-size);
-    height: var(--sl-menu-button-size);
-    padding: 0.5rem;
-    background-color: var(--sl-color-white);
-    color: var(--sl-color-black);
-    box-shadow: var(--sl-shadow-md);
-    cursor: pointer;
-  }
-
-  [aria-expanded='true'] button {
-    background-color: var(--sl-color-gray-2);
-    box-shadow: none;
-  }
-
-  :global([data-theme='light']) button {
-    background-color: var(--sl-color-black);
-    color: var(--sl-color-white);
-  }
-
-  :global([data-theme='light']) [aria-expanded='true'] button {
-    background-color: var(--sl-color-gray-5);
-  }
+	button {
+		position: fixed;
+		top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
+		inset-inline-end: var(--sl-nav-pad-x);
+		z-index: var(--sl-z-index-navbar);
+		border: 0;
+		border-radius: 50%;
+		width: var(--sl-menu-button-size);
+		height: var(--sl-menu-button-size);
+		padding: 0.5rem;
+		background-color: var(--sl-color-white);
+		color: var(--sl-color-black);
+		box-shadow: var(--sl-shadow-md);
+		cursor: pointer;
+	}
+
+	[aria-expanded='true'] button {
+		background-color: var(--sl-color-gray-2);
+		box-shadow: none;
+	}
+
+	:global([data-theme='light']) button {
+		background-color: var(--sl-color-black);
+		color: var(--sl-color-white);
+	}
+
+	:global([data-theme='light']) [aria-expanded='true'] button {
+		background-color: var(--sl-color-gray-5);
+	}
 </style>
 
 <style is:global>
-  [data-mobile-menu-expanded] {
-    overflow: hidden;
-  }
-
-  @media (min-width: 50rem) {
-    [data-mobile-menu-expanded] {
-      overflow: auto;
-    }
-  }
+	[data-mobile-menu-expanded] {
+		overflow: hidden;
+	}
+
+	@media (min-width: 50rem) {
+		[data-mobile-menu-expanded] {
+			overflow: auto;
+		}
+	}
 </style>

package/components/PrevNextLinks.astro

@@ -4,10 +4,10 @@ import { useTranslations } from '../utils/translations';
 import Icon from '../user-components/Icon.astro';
 
 interface Props {
-  prev: Link | undefined;
-  next: Link | undefined;
-  dir: 'ltr' | 'rtl';
-  locale: string | undefined;
+	prev: Link | undefined;
+	next: Link | undefined;
+	dir: 'ltr' | 'rtl';
+	locale: string | undefined;
 }
 
 const { prev, next, dir, locale } = Astro.props;
@@ -16,65 +16,65 @@ const t = useTranslations(locale);
 ---
 
 <div class="pagination-links flex" dir={dir}>
-  {
-    prev && (
-      <a href={prev.href} rel="prev">
-        <Icon name={isRtl ? 'right-arrow' : 'left-arrow'} size="1.5rem" />
-        <span>
-          {t('page.previousLink')}
-          <br />
-          <span class="link-title">{prev.label}</span>
-        </span>
-      </a>
-    )
-  }
-  {
-    next && (
-      <a href={next.href} rel="next">
-        <Icon name={isRtl ? 'left-arrow' : 'right-arrow'} size="1.5rem" />
-        <span>
-          {t('page.nextLink')}
-          <br />
-          <span class="link-title">{next.label}</span>
-        </span>
-      </a>
-    )
-  }
+	{
+		prev && (
+			<a href={prev.href} rel="prev">
+				<Icon name={isRtl ? 'right-arrow' : 'left-arrow'} size="1.5rem" />
+				<span>
+					{t('page.previousLink')}
+					<br />
+					<span class="link-title">{prev.label}</span>
+				</span>
+			</a>
+		)
+	}
+	{
+		next && (
+			<a href={next.href} rel="next">
+				<Icon name={isRtl ? 'left-arrow' : 'right-arrow'} size="1.5rem" />
+				<span>
+					{t('page.nextLink')}
+					<br />
+					<span class="link-title">{next.label}</span>
+				</span>
+			</a>
+		)
+	}
 </div>
 
 <style>
-  .pagination-links {
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
+	.pagination-links {
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
 
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0.5rem;
-    width: 100%;
-    flex-basis: calc(50% - 0.5rem);
-    flex-grow: 1;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    text-decoration: none;
-    color: var(--sl-color-gray-2);
-    box-shadow: var(--sl-shadow-md);
-  }
-  [rel='next'] {
-    justify-content: end;
-    text-align: end;
-    flex-direction: row-reverse;
-  }
-  a:hover {
-    border-color: var(--sl-color-gray-2);
-  }
+	a {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 0.5rem;
+		width: 100%;
+		flex-basis: calc(50% - 0.5rem);
+		flex-grow: 1;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 0.5rem;
+		padding: 1rem;
+		text-decoration: none;
+		color: var(--sl-color-gray-2);
+		box-shadow: var(--sl-shadow-md);
+	}
+	[rel='next'] {
+		justify-content: end;
+		text-align: end;
+		flex-direction: row-reverse;
+	}
+	a:hover {
+		border-color: var(--sl-color-gray-2);
+	}
 
-  .link-title {
-    color: var(--sl-color-white);
-    font-size: var(--sl-text-2xl);
-    line-height: var(--sl-line-height-headings);
-  }
+	.link-title {
+		color: var(--sl-color-white);
+		font-size: var(--sl-text-2xl);
+		line-height: var(--sl-line-height-headings);
+	}
 </style>

package/components/RightSidebar.astro

@@ -7,30 +7,30 @@ import { generateToC } from './TableOfContents/generateToC';
 import { useTranslations } from '../utils/translations';
 
 interface Props {
-  headings: MarkdownHeading[];
-  locale: string | undefined;
-  tocConfig: { maxHeadingLevel: number; minHeadingLevel: number } | false;
+	headings: MarkdownHeading[];
+	locale: string | undefined;
+	tocConfig: { maxHeadingLevel: number; minHeadingLevel: number } | false;
 }
 
 const { headings, locale, tocConfig } = Astro.props;
 const t = useTranslations(locale);
 const tocProps = tocConfig && {
-  ...tocConfig,
-  locale,
-  toc: generateToC(headings, {
-    ...tocConfig,
-    title: t('tableOfContents.overview'),
-  }),
+	...tocConfig,
+	locale,
+	toc: generateToC(headings, {
+		...tocConfig,
+		title: t('tableOfContents.overview'),
+	}),
 };
 ---
 
 {
-  tocProps && (
-    <>
-      <MobileTableOfContents {...tocProps} />
-      <RightSidebarPanel>
-        <TableOfContents {...tocProps} />
-      </RightSidebarPanel>
-    </>
-  )
+	tocProps && (
+		<>
+			<MobileTableOfContents {...tocProps} />
+			<RightSidebarPanel>
+				<TableOfContents {...tocProps} />
+			</RightSidebarPanel>
+		</>
+	)
 }