@astrojs/starlight 0.5.6 → 0.6.0

package/components/SocialIcons.astro

@@ -5,46 +5,48 @@ import Icon from '../user-components/Icon.astro';
 type Platform = keyof NonNullable<typeof config.social>;
 
 const labels: Record<Platform, string> = {
-  github: 'GitHub',
-  discord: 'Discord',
-  twitter: 'Twitter',
-  mastodon: 'Mastodon',
-  codeberg: 'Codeberg',
-  youtube: 'YouTube',
-  threads: 'Threads',
-  linkedin: 'LinkedIn',
-  twitch: 'Twitch',
+	github: 'GitHub',
+	gitlab: 'GitLab',
+	discord: 'Discord',
+	twitter: 'Twitter',
+	mastodon: 'Mastodon',
+	codeberg: 'Codeberg',
+	youtube: 'YouTube',
+	threads: 'Threads',
+	linkedin: 'LinkedIn',
+	twitch: 'Twitch',
 };
 
-const links = Object.entries(config.social || {}).filter(([, url]) =>
-  Boolean(url)
-) as [platform: Platform, url: string][];
+const links = Object.entries(config.social || {}).filter(([, url]) => Boolean(url)) as [
+	platform: Platform,
+	url: string,
+][];
 ---
 
 {
-  links.length > 0 && (
-    <>
-      {links.map(([platform, url]) => (
-        <a href={url} rel="me">
-          <span class="sr-only">{labels[platform]}</span>
-          <Icon name={platform} />
-        </a>
-      ))}
-      <div class="divider" />
-    </>
-  )
+	links.length > 0 && (
+		<>
+			{links.map(([platform, url]) => (
+				<a href={url} rel="me">
+					<span class="sr-only">{labels[platform]}</span>
+					<Icon name={platform} />
+				</a>
+			))}
+			<div class="divider" />
+		</>
+	)
 }
 
 <style>
-  a {
-    display: flex;
-    color: var(--sl-color-text-accent);
-  }
-  a:hover {
-    opacity: 0.66;
-  }
-  .divider {
-    height: 2rem;
-    border-inline-end: 1px solid var(--sl-color-gray-5);
-  }
+	a {
+		display: flex;
+		color: var(--sl-color-text-accent);
+	}
+	a:hover {
+		opacity: 0.66;
+	}
+	.divider {
+		height: 2rem;
+		border-inline-end: 1px solid var(--sl-color-gray-5);
+	}
 </style>

package/components/TableOfContents/MobileTableOfContents.astro

@@ -5,10 +5,10 @@ import TableOfContentsList from './TableOfContentsList.astro';
 import type { TocItem } from './generateToC';
 
 interface Props {
-  toc: TocItem[];
-  locale: string | undefined;
-  maxHeadingLevel: number;
-  minHeadingLevel: number;
+	toc: TocItem[];
+	locale: string | undefined;
+	maxHeadingLevel: number;
+	minHeadingLevel: number;
 }
 
 const { locale, toc, maxHeadingLevel, minHeadingLevel } = Astro.props;
@@ -16,138 +16,138 @@ const t = useTranslations(locale);
 ---
 
 <mobile-starlight-toc data-min-h={minHeadingLevel} data-max-h={maxHeadingLevel}>
-  <nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden">
-    <details id="starlight__mobile-toc">
-      <summary id="starlight__on-this-page--mobile" class="flex">
-        <div class="toggle flex">
-          {t('tableOfContents.onThisPage')}
-          <Icon name={'right-caret'} class="caret" size="1rem" />
-        </div>
-        <span class="display-current">{toc[0]?.text}</span>
-      </summary>
-      <div class="dropdown">
-        <TableOfContentsList toc={toc} isMobile />
-      </div>
-    </details>
-  </nav>
+	<nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden">
+		<details id="starlight__mobile-toc">
+			<summary id="starlight__on-this-page--mobile" class="flex">
+				<div class="toggle flex">
+					{t('tableOfContents.onThisPage')}
+					<Icon name={'right-caret'} class="caret" size="1rem" />
+				</div>
+				<span class="display-current">{toc[0]?.text}</span>
+			</summary>
+			<div class="dropdown">
+				<TableOfContentsList toc={toc} isMobile />
+			</div>
+		</details>
+	</nav>
 </mobile-starlight-toc>
 
 <style>
-  nav {
-    position: fixed;
-    top: calc(var(--sl-nav-height) - 1px);
-    inset-inline: 0;
-    border-top: 1px solid var(--sl-color-gray-5);
-    background-color: var(--sl-color-bg-nav);
-  }
-  @media (min-width: 50rem) {
-    nav {
-      inset-inline-start: var(--sl-content-inline-start, 0);
-    }
-  }
+	nav {
+		position: fixed;
+		top: calc(var(--sl-nav-height) - 1px);
+		inset-inline: 0;
+		border-top: 1px solid var(--sl-color-gray-5);
+		background-color: var(--sl-color-bg-nav);
+	}
+	@media (min-width: 50rem) {
+		nav {
+			inset-inline-start: var(--sl-content-inline-start, 0);
+		}
+	}
 
-  summary {
-    gap: 0.5rem;
-    align-items: center;
-    height: var(--sl-mobile-toc-height);
-    border-bottom: 1px solid var(--sl-color-hairline-shade);
-    padding: 0.5rem 1rem;
-    font-size: var(--sl-text-xs);
-    outline-offset: var(--sl-outline-offset-inside);
-  }
-  summary::marker,
-  summary::-webkit-details-marker {
-    display: none;
-  }
+	summary {
+		gap: 0.5rem;
+		align-items: center;
+		height: var(--sl-mobile-toc-height);
+		border-bottom: 1px solid var(--sl-color-hairline-shade);
+		padding: 0.5rem 1rem;
+		font-size: var(--sl-text-xs);
+		outline-offset: var(--sl-outline-offset-inside);
+	}
+	summary::marker,
+	summary::-webkit-details-marker {
+		display: none;
+	}
 
-  .toggle {
-    flex-shrink: 0;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.5rem;
-    padding-block: 0.5rem;
-    padding-inline-start: 0.75rem;
-    padding-inline-end: 0.5rem;
-    line-height: 1;
-    background-color: var(--sl-color-black);
-    user-select: none;
-    cursor: pointer;
-  }
-  details[open] .toggle {
-    color: var(--sl-color-white);
-    border-color: var(--sl-color-accent);
-  }
-  details .toggle:hover {
-    color: var(--sl-color-white);
-    border-color: var(--sl-color-gray-2);
-  }
+	.toggle {
+		flex-shrink: 0;
+		gap: 1rem;
+		align-items: center;
+		justify-content: space-between;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 0.5rem;
+		padding-block: 0.5rem;
+		padding-inline-start: 0.75rem;
+		padding-inline-end: 0.5rem;
+		line-height: 1;
+		background-color: var(--sl-color-black);
+		user-select: none;
+		cursor: pointer;
+	}
+	details[open] .toggle {
+		color: var(--sl-color-white);
+		border-color: var(--sl-color-accent);
+	}
+	details .toggle:hover {
+		color: var(--sl-color-white);
+		border-color: var(--sl-color-gray-2);
+	}
 
-  :global([dir='rtl']) .caret {
-    transform: rotateZ(180deg);
-  }
-  details[open] .caret {
-    transform: rotateZ(90deg);
-  }
+	:global([dir='rtl']) .caret {
+		transform: rotateZ(180deg);
+	}
+	details[open] .caret {
+		transform: rotateZ(90deg);
+	}
 
-  .display-current {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: var(--sl-color-white);
-  }
+	.display-current {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		color: var(--sl-color-white);
+	}
 
-  .dropdown {
-    --border-top: 1px;
-    margin-top: calc(-1 * var(--border-top));
-    border: var(--border-top) solid var(--sl-color-gray-6);
-    border-top-color: var(--sl-color-hairline-shade);
-    max-height: calc(85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height));
-    overflow-y: auto;
-    background-color: var(--sl-color-black);
-    box-shadow: var(--sl-shadow-md);
-  }
+	.dropdown {
+		--border-top: 1px;
+		margin-top: calc(-1 * var(--border-top));
+		border: var(--border-top) solid var(--sl-color-gray-6);
+		border-top-color: var(--sl-color-hairline-shade);
+		max-height: calc(85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height));
+		overflow-y: auto;
+		background-color: var(--sl-color-black);
+		box-shadow: var(--sl-shadow-md);
+	}
 </style>
 
 <script>
-  import { StarlightTOC } from './starlight-toc';
+	import { StarlightTOC } from './starlight-toc';
 
-  class MobileStarlightTOC extends StarlightTOC {
-    override set current(link: HTMLAnchorElement) {
-      super.current = link;
-      const display = this.querySelector('.display-current') as HTMLSpanElement;
-      if (display) display.textContent = link.textContent;
-    }
+	class MobileStarlightTOC extends StarlightTOC {
+		override set current(link: HTMLAnchorElement) {
+			super.current = link;
+			const display = this.querySelector('.display-current') as HTMLSpanElement;
+			if (display) display.textContent = link.textContent;
+		}
 
-    constructor() {
-      super({ smallViewport: true });
-      const details = this.querySelector('details');
-      if (!details) return;
-      const closeToC = () => {
-        details.open = false;
-      };
-      // Close the table of contents whenever a link is clicked.
-      details.querySelectorAll('a').forEach((a) => {
-        a.addEventListener('click', closeToC);
-      });
-      // Close the table of contents when a user clicks outside of it.
-      window.addEventListener('click', (e) => {
-        if (!details.contains(e.target as Node)) closeToC();
-      });
-      // Or when they press the escape key.
-      window.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && details.open) {
-          const hasFocus = details.contains(document.activeElement);
-          closeToC();
-          if (hasFocus) {
-            const summary = details.querySelector('summary');
-            if (summary) summary.focus();
-          }
-        }
-      });
-    }
-  }
+		constructor() {
+			super({ smallViewport: true });
+			const details = this.querySelector('details');
+			if (!details) return;
+			const closeToC = () => {
+				details.open = false;
+			};
+			// Close the table of contents whenever a link is clicked.
+			details.querySelectorAll('a').forEach((a) => {
+				a.addEventListener('click', closeToC);
+			});
+			// Close the table of contents when a user clicks outside of it.
+			window.addEventListener('click', (e) => {
+				if (!details.contains(e.target as Node)) closeToC();
+			});
+			// Or when they press the escape key.
+			window.addEventListener('keydown', (e) => {
+				if (e.key === 'Escape' && details.open) {
+					const hasFocus = details.contains(document.activeElement);
+					closeToC();
+					if (hasFocus) {
+						const summary = details.querySelector('summary');
+						if (summary) summary.focus();
+					}
+				}
+			});
+		}
+	}
 
-  customElements.define('mobile-starlight-toc', MobileStarlightTOC);
+	customElements.define('mobile-starlight-toc', MobileStarlightTOC);
 </script>

package/components/TableOfContents/TableOfContentsList.astro

@@ -2,82 +2,77 @@
 import type { TocItem } from './generateToC';
 
 interface Props {
-  toc: TocItem[];
-  depth?: number;
-  isMobile?: boolean;
+	toc: TocItem[];
+	depth?: number;
+	isMobile?: boolean;
 }
 
 const { toc, isMobile = false, depth = 0 } = Astro.props;
 ---
 
 <ul class:list={{ isMobile }}>
-  {
-    toc.map((heading) => (
-      <li>
-        <a href={'#' + heading.slug} aria-current={heading.current && 'true'}>
-          <span>{heading.text}</span>
-        </a>
-        {heading.children.length > 0 && (
-          <Astro.self
-            toc={heading.children}
-            depth={depth + 1}
-            isMobile={isMobile}
-          />
-        )}
-      </li>
-    ))
-  }
+	{
+		toc.map((heading) => (
+			<li>
+				<a href={'#' + heading.slug} aria-current={heading.current && 'true'}>
+					<span>{heading.text}</span>
+				</a>
+				{heading.children.length > 0 && (
+					<Astro.self toc={heading.children} depth={depth + 1} isMobile={isMobile} />
+				)}
+			</li>
+		))
+	}
 </ul>
 
 <style define:vars={{ depth }}>
-  ul {
-    padding: 0;
-    list-style: none;
-  }
-  a {
-    --pad-inline: 0.5rem;
-    display: block;
-    border-radius: 0.25rem;
-    padding-block: 0.25rem;
-    padding-inline: calc(1rem * var(--depth) + var(--pad-inline))
-      var(--pad-inline);
-    line-height: 1.25;
-  }
-  a[aria-current='true'],
-  a[aria-current='true']:hover,
-  a[aria-current='true']:focus {
-    font-weight: 600;
-    color: var(--sl-color-text-invert);
-    background-color: var(--sl-color-text-accent);
-  }
-  .isMobile a {
-    --pad-inline: 1rem;
-    display: flex;
-    justify-content: space-between;
-    gap: var(--pad-inline);
-    border-top: 1px solid var(--sl-color-gray-6);
-    border-radius: 0;
-    padding-block: 0.5rem;
-    color: var(--sl-color-text);
-    font-size: var(--sl-text-sm);
-    text-decoration: none;
-    outline-offset: var(--sl-outline-offset-inside);
-  }
-  .isMobile:first-child > li:first-child > a {
-    border-top: 0;
-  }
-  .isMobile a[aria-current='true'],
-  .isMobile a[aria-current='true']:hover,
-  .isMobile a[aria-current='true']:focus {
-    color: var(--sl-color-white);
-    background-color: unset;
-  }
-  .isMobile a[aria-current='true']::after {
-    content: '';
-    width: 1rem;
-    background-color: var(--sl-color-text-accent);
-    /* Check mark SVG icon */
-    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
-    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
-  }
+	ul {
+		padding: 0;
+		list-style: none;
+	}
+	a {
+		--pad-inline: 0.5rem;
+		display: block;
+		border-radius: 0.25rem;
+		padding-block: 0.25rem;
+		padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline);
+		line-height: 1.25;
+	}
+	a[aria-current='true'],
+	a[aria-current='true']:hover,
+	a[aria-current='true']:focus {
+		font-weight: 600;
+		color: var(--sl-color-text-invert);
+		background-color: var(--sl-color-text-accent);
+	}
+	.isMobile a {
+		--pad-inline: 1rem;
+		display: flex;
+		justify-content: space-between;
+		gap: var(--pad-inline);
+		border-top: 1px solid var(--sl-color-gray-6);
+		border-radius: 0;
+		padding-block: 0.5rem;
+		color: var(--sl-color-text);
+		font-size: var(--sl-text-sm);
+		text-decoration: none;
+		outline-offset: var(--sl-outline-offset-inside);
+	}
+	.isMobile:first-child > li:first-child > a {
+		border-top: 0;
+	}
+	.isMobile a[aria-current='true'],
+	.isMobile a[aria-current='true']:hover,
+	.isMobile a[aria-current='true']:focus {
+		color: var(--sl-color-white);
+		background-color: unset;
+	}
+	.isMobile a[aria-current='true']::after {
+		content: '';
+		width: 1rem;
+		background-color: var(--sl-color-text-accent);
+		/* Check mark SVG icon */
+		-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
+		mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
+	}
 </style>

package/components/TableOfContents/generateToC.ts

@@ -1,58 +1,56 @@
 import type { MarkdownHeading } from 'astro';
 
 export interface TocItem extends MarkdownHeading {
-  children: TocItem[];
-  current?: boolean;
+	children: TocItem[];
+	current?: boolean;
 }
 
 function diveChildren(item: TocItem, depth: number): TocItem[] {
-  if (depth === 1) {
-    return item.children;
-  } else if (item.children.length > 0) {
-    return diveChildren(item.children.at(-1)!, depth - 1);
-  } else {
-    return [];
-  }
+	if (depth === 1) {
+		return item.children;
+	} else if (item.children.length > 0) {
+		return diveChildren(item.children.at(-1)!, depth - 1);
+	} else {
+		return [];
+	}
 }
 
 interface TocOpts {
-  minHeadingLevel: number;
-  maxHeadingLevel: number;
-  title?: string;
+	minHeadingLevel: number;
+	maxHeadingLevel: number;
+	title?: string;
 }
 
 export function generateToC(
-  headings: MarkdownHeading[],
-  { minHeadingLevel, maxHeadingLevel, title = 'Overview' }: TocOpts
+	headings: MarkdownHeading[],
+	{ minHeadingLevel, maxHeadingLevel, title = 'Overview' }: TocOpts
 ) {
-  const overview = { depth: 2, slug: '_top', text: title };
-  headings = [
-    overview,
-    ...headings.filter(
-      ({ depth }) => depth >= minHeadingLevel && depth <= maxHeadingLevel
-    ),
-  ];
-  const toc: Array<TocItem> = [];
+	const overview = { depth: 2, slug: '_top', text: title };
+	headings = [
+		overview,
+		...headings.filter(({ depth }) => depth >= minHeadingLevel && depth <= maxHeadingLevel),
+	];
+	const toc: Array<TocItem> = [];
 
-  for (const heading of headings) {
-    if (toc.length === 0) {
-      toc.push({ ...heading, children: [], current: true });
-    } else {
-      const lastItemInToc = toc.at(-1)!;
-      if (heading.depth < lastItemInToc.depth) {
-        throw new Error(`Orphan heading found: ${heading.text}.`);
-      }
-      if (heading.depth === lastItemInToc.depth) {
-        // same depth
-        toc.push({ ...heading, children: [] });
-      } else {
-        // higher depth
-        // push into children, or children's children alike
-        const gap = heading.depth - lastItemInToc.depth;
-        const target = diveChildren(lastItemInToc, gap);
-        target.push({ ...heading, children: [] });
-      }
-    }
-  }
-  return toc;
+	for (const heading of headings) {
+		if (toc.length === 0) {
+			toc.push({ ...heading, children: [], current: true });
+		} else {
+			const lastItemInToc = toc.at(-1)!;
+			if (heading.depth < lastItemInToc.depth) {
+				throw new Error(`Orphan heading found: ${heading.text}.`);
+			}
+			if (heading.depth === lastItemInToc.depth) {
+				// same depth
+				toc.push({ ...heading, children: [] });
+			} else {
+				// higher depth
+				// push into children, or children's children alike
+				const gap = heading.depth - lastItemInToc.depth;
+				const target = diveChildren(lastItemInToc, gap);
+				target.push({ ...heading, children: [] });
+			}
+		}
+	}
+	return toc;
 }