@astrojs/starlight 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @astrojs/starlight
 
+## 0.7.0
+
+### Minor Changes
+
+- [#441](https://github.com/withastro/starlight/pull/441) [`0119a49`](https://github.com/withastro/starlight/commit/0119a49b9a5f7844e7689df5577e8132bf871535) Thanks [@lorenzolewis](https://github.com/lorenzolewis)! - Add support for hiding entries from an autogenerated sidebar:
+
+  ```md
+  ---
+  title: About this project
+  sidebar:
+    hidden: true
+  ---
+  ```
+
+- [#470](https://github.com/withastro/starlight/pull/470) [`d076aec`](https://github.com/withastro/starlight/commit/d076aec856921c2fe8a5204a0c31580a846af180) Thanks [@delucis](https://github.com/delucis)! - Drop support for the `--sl-hue-accent` CSS custom property.
+
+  ⚠️ **BREAKING CHANGE** — In previous Starlight versions you could control the accent color by setting the `--sl-hue-accent` custom property. This could result in inaccessible color contrast and unpredictable results.
+
+  You must now set accent colors directly. If you relied on setting `--sl-hue-accent`, migrate by setting light and dark mode colors in your custom CSS:
+
+  ```css
+  :root {
+  	--sl-hue-accent: 234;
+  	--sl-color-accent-low: hsl(var(--sl-hue-accent), 54%, 20%);
+  	--sl-color-accent: hsl(var(--sl-hue-accent), 100%, 60%);
+  	--sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 87%);
+  }
+
+  :root[data-theme='light'] {
+  	--sl-color-accent-high: hsl(var(--sl-hue-accent), 80%, 30%);
+  	--sl-color-accent: hsl(var(--sl-hue-accent), 90%, 60%);
+  	--sl-color-accent-low: hsl(var(--sl-hue-accent), 88%, 90%);
+  }
+  ```
+
+  The [new color theme editor](https://starlight.astro.build/guides/css-and-tailwind/#color-theme-editor) might help if you’d prefer to set a new color scheme.
+
+- [#397](https://github.com/withastro/starlight/pull/397) [`73eb5e6`](https://github.com/withastro/starlight/commit/73eb5e6ac6511dc4a6f5c4ca6c0c60d521f1db3c) Thanks [@lorenzolewis](https://github.com/lorenzolewis)! - Add `LinkCard` component
+
+### Patch Changes
+
+- [#460](https://github.com/withastro/starlight/pull/460) [`2e0fb90`](https://github.com/withastro/starlight/commit/2e0fb9053e96839287071e8a9c523796570cb0f6) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fix current page highlight in sidebar for URLs with no trailing slash
+
+- [#467](https://github.com/withastro/starlight/pull/467) [`461a5d5`](https://github.com/withastro/starlight/commit/461a5d5c0424b03fb95b7ff7b27c944d04430244) Thanks [@delucis](https://github.com/delucis)! - Fix type error for downstream `tsc` users
+
+- [#475](https://github.com/withastro/starlight/pull/475) [`06a205e`](https://github.com/withastro/starlight/commit/06a205e0e673f505bbb87dfcfcb0f35b051677e9) Thanks [@Yan-Thomas](https://github.com/Yan-Thomas)! - Locales whose language tag includes a regional subtag now use built-in UI translations for their base language. For example, a locale with a language of `pt-BR` will use our `pt` UI translations.
+
+- [#473](https://github.com/withastro/starlight/pull/473) [`6a7692a`](https://github.com/withastro/starlight/commit/6a7692ae3178f9f9f727cc17b8ae860604afd78f) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fix issue with nested `<Tabs>` components
+
+## 0.6.1
+
+### Patch Changes
+
+- [#442](https://github.com/withastro/starlight/pull/442) [`42c0abd`](https://github.com/withastro/starlight/commit/42c0abdd245f2f6595d67e203965f463829ef870) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Increase Markdown table border contrast
+
+- [#443](https://github.com/withastro/starlight/pull/443) [`cb8bcec`](https://github.com/withastro/starlight/commit/cb8bcec533c9a7849eda01a4a4157b4726c9902c) Thanks [@delucis](https://github.com/delucis)! - Add icons for Bitbucket, Gitter, CodePen, and Microsoft Teams
+
+- [#445](https://github.com/withastro/starlight/pull/445) [`a80e180`](https://github.com/withastro/starlight/commit/a80e180ca5abb85aa0c9db111ef5ae8e0c1bb539) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Prevent repeated table of contents mark on mobile
+
 ## 0.6.0
 
 ### Minor Changes

package/components/Icons.ts

@@ -52,12 +52,20 @@ export const Icons = {
 		'<path d="M17 22H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1a4 4 0 0 1 7.3-2.18c.448.64.692 1.4.7 2.18h3a1 1 0 0 1 1 1v3a4 4 0 0 1 2.18 7.3A3.86 3.86 0 0 1 18 18v3a1 1 0 0 1-1 1ZM5 8a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11v-3.18a1 1 0 0 1 1.33-.95 1.77 1.77 0 0 0 1.74-.23 2 2 0 0 0 .93-1.37 2 2 0 0 0-.48-1.59 1.89 1.89 0 0 0-2.17-.55 1 1 0 0 1-1.33-.95V8h-3.2a1 1 0 0 1-1-1.33 1.77 1.77 0 0 0-.23-1.74 1.939 1.939 0 0 0-3-.43A2 2 0 0 0 8 6c.002.23.046.456.13.67A1 1 0 0 1 7.18 8H5Z"/>',
 	'list-format':
 		'<path d="M3.71 16.29C3.6149 16.199 3.50276 16.1276 3.38 16.08C3.13654 15.98 2.86346 15.98 2.62 16.08C2.49725 16.1276 2.38511 16.199 2.29 16.29C2.19896 16.3851 2.1276 16.4972 2.08 16.62C2.00342 16.8021 1.9825 17.0028 2.01988 17.1968C2.05725 17.3908 2.15125 17.5694 2.29 17.71C2.3872 17.7983 2.49882 17.8694 2.62 17.92C2.7397 17.9729 2.86913 18.0002 3 18.0002C3.13087 18.0002 3.2603 17.9729 3.38 17.92C3.50119 17.8694 3.6128 17.7983 3.71 17.71C3.84876 17.5694 3.94276 17.3908 3.98013 17.1968C4.01751 17.0028 3.99658 16.8021 3.92 16.62C3.87241 16.4972 3.80104 16.3851 3.71 16.29ZM7 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H7C6.73479 6 6.48043 6.10536 6.2929 6.29289C6.10536 6.48043 6 6.73478 6 7C6 7.26522 6.10536 7.51957 6.2929 7.70711C6.48043 7.89464 6.73479 8 7 8ZM3.71 11.29C3.56938 11.1512 3.39081 11.0572 3.19682 11.0199C3.00283 10.9825 2.80211 11.0034 2.62 11.08C2.49882 11.1306 2.3872 11.2017 2.29 11.29C2.19896 11.3851 2.1276 11.4972 2.08 11.62C2.0271 11.7397 1.99977 11.8691 1.99977 12C1.99977 12.1309 2.0271 12.2603 2.08 12.38C2.13065 12.5012 2.20167 12.6128 2.29 12.71C2.3872 12.7983 2.49882 12.8694 2.62 12.92C2.7397 12.9729 2.86913 13.0002 3 13.0002C3.13087 13.0002 3.2603 12.9729 3.38 12.92C3.50119 12.8694 3.6128 12.7983 3.71 12.71C3.79833 12.6128 3.86936 12.5012 3.92 12.38C3.97291 12.2603 4.00024 12.1309 4.00024 12C4.00024 11.8691 3.97291 11.7397 3.92 11.62C3.87241 11.4972 3.80104 11.3851 3.71 11.29ZM21 11H7C6.73479 11 6.48043 11.1054 6.2929 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.2929 12.7071C6.48043 12.8946 6.73479 13 7 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11ZM3.71 6.29C3.6149 6.19896 3.50276 6.12759 3.38 6.08C3.19789 6.00342 2.99718 5.9825 2.80319 6.01987C2.6092 6.05725 2.43063 6.15124 2.29 6.29C2.20167 6.3872 2.13065 6.49882 2.08 6.62C2.0271 6.7397 1.99977 6.86913 1.99977 7C1.99977 7.13087 2.0271 7.2603 2.08 7.38C2.13065 7.50119 2.20167 7.6128 2.29 7.71C2.3872 7.79833 2.49882 7.86936 2.62 7.92C2.80211 7.99658 3.00283 8.0175 3.19682 7.98013C3.39081 7.94275 3.56938 7.84876 3.71 7.71C3.79833 7.6128 3.86936 7.50119 3.92 7.38C3.97291 7.2603 4.00024 7.13087 4.00024 7C4.00024 6.86913 3.97291 6.7397 3.92 6.62C3.86936 6.49882 3.79833 6.3872 3.71 6.29ZM21 16H7C6.73479 16 6.48043 16.1054 6.2929 16.2929C6.10536 16.4804 6 16.7348 6 17C6 17.2652 6.10536 17.5196 6.2929 17.7071C6.48043 17.8946 6.73479 18 7 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16Z"></path>',
+	random:
+		'<path d="M8.7 10a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-6.27-6.3a1 1 0 0 0-1.42 1.42ZM21 14a1 1 0 0 0-1 1v3.59L15.44 14A1 1 0 0 0 14 15.44L18.59 20H15a1 1 0 0 0 0 2h6a1 1 0 0 0 .38-.08 1 1 0 0 0 .54-.54A1 1 0 0 0 22 21v-6a1 1 0 0 0-1-1Zm.92-11.38a1 1 0 0 0-.54-.54A1 1 0 0 0 21 2h-6a1 1 0 0 0 0 2h3.59L2.29 20.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L20 5.41V9a1 1 0 0 0 2 0V3a1 1 0 0 0-.08-.38Z"/>',
 	github:
 		'<path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/>',
 	gitlab:
 		'<path d="m22.63 9.8-.03-.09-3-7.81a.78.78 0 0 0-.76-.5.8.8 0 0 0-.46.18.8.8 0 0 0-.26.4L16.1 8.17H7.9l-2-6.19a.79.79 0 0 0-1.5-.08l-3 7.81-.02.08a5.56 5.56 0 0 0 1.84 6.43h.01l.03.02 4.56 3.42 2.26 1.7 1.37 1.05a.92.92 0 0 0 1.12 0l1.38-1.04 2.25-1.71 4.6-3.44a5.56 5.56 0 0 0 1.84-6.43Z"/>',
+	bitbucket:
+		'<path d="M1 1.5a.8.8 0 0 0-.7.9l3.2 19.3c0 .5.5.8 1 .8h15.2c.4 0 .7-.2.8-.6l3.2-19.5a.7.7 0 0 0-.8-.9H1zm13.4 14H9.6l-1.3-7h7.3l-1.2 7z"/>',
+	codePen:
+		'<path d="M23.5 7.5 12.5.2a1 1 0 0 0-1 0L.4 7.5a1 1 0 0 0-.5.8v7.4c0 .3.2.6.5.8l11 7.3c.3.3.7.3 1 0l11-7.3c.3-.2.5-.5.5-.8V8.3a1 1 0 0 0-.5-.8zM13 3l8.1 5.3-3.6 2.5-4.5-3V3zm-2 0v4.8l-4.5 3-3.6-2.5 8-5.3zm-9 7.3L4.7 12l-2.5 1.7v-3.4zM11 21l-8.1-5.3 3.6-2.5 4.5 3V21zm1-6.6L8.4 12 12 9.6l3.6 2.4-3.6 2.4zm1 6.6v-4.8l4.5-3 3.6 2.5-8 5.3zm9-7.3L19.3 12l2.5-1.7v3.4z"/>',
 	discord:
 		'<path d="M20.32 4.37a19.8 19.8 0 0 0-4.93-1.51 13.78 13.78 0 0 0-.64 1.28 18.27 18.27 0 0 0-5.5 0 12.64 12.64 0 0 0-.64-1.28h-.05A19.74 19.74 0 0 0 3.64 4.4 20.26 20.26 0 0 0 .11 18.09l.02.02a19.9 19.9 0 0 0 6.04 3.03l.04-.02a14.24 14.24 0 0 0 1.23-2.03.08.08 0 0 0-.05-.07 13.1 13.1 0 0 1-1.9-.92.08.08 0 0 1 .02-.1 10.2 10.2 0 0 0 .41-.31h.04a14.2 14.2 0 0 0 12.1 0l.04.01a9.63 9.63 0 0 0 .4.32.08.08 0 0 1-.03.1 12.29 12.29 0 0 1-1.9.91.08.08 0 0 0-.02.1 15.97 15.97 0 0 0 1.27 2.01h.04a19.84 19.84 0 0 0 6.03-3.05v-.03a20.12 20.12 0 0 0-3.57-13.69ZM8.02 15.33c-1.18 0-2.16-1.08-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.34-.96 2.42-2.16 2.42Zm7.97 0c-1.18 0-2.15-1.08-2.15-2.42 0-1.33.95-2.42 2.15-2.42 1.22 0 2.18 1.1 2.16 2.42 0 1.34-.94 2.42-2.16 2.42Z"/>',
+	gitter:
+		'<path d="M6.11 15.12H3.75V0h2.36v15.12zm4.71-11.55H8.46V24h2.36V3.57zm4.72 0h-2.36V24h2.36V3.57zm4.71 0h-2.36v11.57h2.36V3.56z"/>',
 	twitter:
 		'<path d="M24 4.4a10 10 0 0 1-2.83.78 5.05 5.05 0 0 0 2.17-2.79 9.7 9.7 0 0 1-3.13 1.23 4.89 4.89 0 0 0-5.94-1.03 5 5 0 0 0-2.17 2.38 5.15 5.15 0 0 0-.3 3.25c-1.95-.1-3.86-.63-5.61-1.53a14.04 14.04 0 0 1-4.52-3.74 5.2 5.2 0 0 0-.09 4.91c.39.74.94 1.35 1.61 1.82a4.77 4.77 0 0 1-2.23-.63v.06c0 1.16.4 2.29 1.12 3.18a4.9 4.9 0 0 0 2.84 1.74c-.73.22-1.5.26-2.24.12a4.89 4.89 0 0 0 4.59 3.49A9.78 9.78 0 0 1 0 19.73 13.65 13.65 0 0 0 7.55 22a13.63 13.63 0 0 0 9.96-4.16A14.26 14.26 0 0 0 21.6 7.65V7c.94-.72 1.75-1.6 2.4-2.6Z"/>',
 	mastodon:
@@ -72,4 +80,6 @@ export const Icons = {
 		'<path d="M20.47 2H3.53a1.45 1.45 0 0 0-1.47 1.43v17.14A1.45 1.45 0 0 0 3.53 22h16.94a1.45 1.45 0 0 0 1.47-1.43V3.43A1.45 1.45 0 0 0 20.47 2ZM8.09 18.74h-3v-9h3v9ZM6.59 8.48a1.56 1.56 0 0 1 0-3.12 1.57 1.57 0 1 1 0 3.12Zm12.32 10.26h-3v-4.83c0-1.21-.43-2-1.52-2A1.65 1.65 0 0 0 12.85 13a2 2 0 0 0-.1.73v5h-3v-9h3V11a3 3 0 0 1 2.71-1.5c2 0 3.45 1.29 3.45 4.06v5.18Z"/>',
 	twitch:
 		'<path d="M2.5 1 1 4.8v15.4h5.5V23h3.1l3-2.8H17l6-5.7V1H2.6ZM21 13.5l-3.4 3.3H12l-3 2.8v-2.8H4.5V3H21v10.5Zm-3.4-6.8v5.8h-2V6.7h2Zm-5.5 0v5.8h-2V6.7h2Z"/>',
+	microsoftTeams:
+		'<path d="M13.78 7.2a3.63 3.63 0 1 0-4.3-3.68h1.78a2.52 2.52 0 0 1 2.52 2.53V7.2zM7.34 18.8h3.92a2.52 2.52 0 0 0 2.52-2.52V8.37h4.17c.58.01 1.04.5 1.03 1.07v6.45a6.3 6.3 0 0 1-6.14 6.43 6.3 6.3 0 0 1-5.5-3.52zm16.1-14.06a2.51 2.51 0 1 1-5.02 0 2.51 2.51 0 0 1 5.02 0zm-3.36 14.24h-.17c.4-1 .59-2.05.57-3.11V9.46c0-.38-.07-.75-.23-1.09h2.69c.58 0 1.06.48 1.06 1.06v5.65a3.9 3.9 0 0 1-3.9 3.9h-.02z"/><path d="M1.02 5.02h10.24c.56 0 1.02.46 1.02 1.03v10.23a1.02 1.02 0 0 1-1.02 1.02H1.02A1.02 1.02 0 0 1 0 16.28V6.04c0-.56.46-1.02 1.02-1.02zm7.81 3.9V7.84H3.45v1.08h2.03v5.57h1.3V8.92h2.05z"/>',
 };

package/components/MarkdownContent.astro

@@ -112,7 +112,7 @@
 		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);
+		border: 1px solid var(--sl-color-hairline-light);
 		padding: 0.375rem 0.8125rem;
 	}
 

package/components/SocialIcons.astro

@@ -7,14 +7,18 @@ type Platform = keyof NonNullable<typeof config.social>;
 const labels: Record<Platform, string> = {
 	github: 'GitHub',
 	gitlab: 'GitLab',
+	bitbucket: 'Bitbucket',
 	discord: 'Discord',
+	gitter: 'Gitter',
 	twitter: 'Twitter',
 	mastodon: 'Mastodon',
 	codeberg: 'Codeberg',
+	codePen: 'CodePen',
 	youtube: 'YouTube',
 	threads: 'Threads',
 	linkedin: 'LinkedIn',
 	twitch: 'Twitch',
+	microsoftTeams: 'Microsoft Teams',
 };
 
 const links = Object.entries(config.social || {}).filter(([, url]) => Boolean(url)) as [

package/components/TableOfContents/TableOfContentsList.astro

@@ -74,5 +74,8 @@ const { toc, isMobile = false, depth = 0 } = Astro.props;
 		/* 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==');
+		-webkit-mask-repeat: no-repeat;
+		mask-repeat: no-repeat;
+		flex-shrink: 0;
 	}
 </style>

package/components.ts

@@ -3,3 +3,4 @@ export { default as CardGrid } from './user-components/CardGrid.astro';
 export { default as Icon } from './user-components/Icon.astro';
 export { default as Tabs } from './user-components/Tabs.astro';
 export { default as TabItem } from './user-components/TabItem.astro';
+export { default as LinkCard } from './user-components/LinkCard.astro';

package/index.ts

@@ -44,7 +44,11 @@ export default function StarlightIntegration(opts: StarlightUserConfig): AstroIn
 							config.markdown.shikiConfig.theme !== 'github-dark' ? {} : { theme: 'css-variables' },
 					},
 					build: { inlineStylesheets: 'auto' },
-					experimental: { assets: true, inlineStylesheets: 'auto' },
+					experimental: {
+						assets: true,
+						// @ts-ignore - Needed for older versions of Astro, but an error since astro@2.6.0
+						inlineStylesheets: 'auto',
+					},
 				};
 				updateConfig(newConfig);
 			},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@types/node": "^18.16.19",
     "@vitest/coverage-v8": "^0.33.0",
-    "astro": "^2.9.3",
+    "astro": "^2.10.4",
     "vitest": "^0.33.0"
   },
   "dependencies": {

package/schema.ts

@@ -142,6 +142,11 @@ export function docsSchema() {
 					 * Defaults to the page `title` if not set.
 					 */
 					label: z.string().optional(),
+
+					/**
+					 * Prevents this page from being included in autogenerated sidebar groups.
+					 */
+					hidden: z.boolean().default(false),
 				})
 				.default({}),
 		});

package/style/props.css

@@ -2,13 +2,13 @@
 ::backdrop {
 	/* Colors (dark mode) */
 	--sl-color-white: hsl(0, 0%, 100%); /* “white” */
-	--sl-color-gray-1: hsl(231, 23%, 94%);
-	--sl-color-gray-2: hsl(228, 8%, 77%);
-	--sl-color-gray-3: hsl(221, 8%, 56%);
-	--sl-color-gray-4: hsl(225, 9%, 36%);
-	--sl-color-gray-5: hsl(222, 11%, 23%);
-	--sl-color-gray-6: hsl(222, 13%, 16%);
-	--sl-color-black: hsl(223, 13%, 10%);
+	--sl-color-gray-1: hsl(224, 20%, 94%);
+	--sl-color-gray-2: hsl(224, 6%, 77%);
+	--sl-color-gray-3: hsl(224, 6%, 56%);
+	--sl-color-gray-4: hsl(224, 7%, 36%);
+	--sl-color-gray-5: hsl(224, 10%, 23%);
+	--sl-color-gray-6: hsl(224, 14%, 16%);
+	--sl-color-black: hsl(224, 10%, 10%);
 
 	--sl-hue-orange: 41;
 	--sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);
@@ -31,10 +31,9 @@
 	--sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);
 	--sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);
 
-	--sl-hue-accent: var(--sl-hue-blue);
-	--sl-color-accent-low: hsl(var(--sl-hue-accent), 54%, 20%);
-	--sl-color-accent: hsl(var(--sl-hue-accent), 100%, 60%);
-	--sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 87%);
+	--sl-color-accent-low: hsl(224, 54%, 20%);
+	--sl-color-accent: hsl(224, 100%, 60%);
+	--sl-color-accent-high: hsl(224, 100%, 85%);
 
 	--sl-color-text: var(--sl-color-gray-2);
 	--sl-color-text-accent: var(--sl-color-accent-high);
@@ -113,14 +112,14 @@
 :root[data-theme='light'],
 [data-theme='light'] ::backdrop {
 	/* Colours (light mode) */
-	--sl-color-white: hsl(223, 13%, 10%);
-	--sl-color-gray-1: hsl(222, 13%, 16%);
-	--sl-color-gray-2: hsl(222, 11%, 23%);
-	--sl-color-gray-3: hsl(225, 9%, 36%);
-	--sl-color-gray-4: hsl(221, 8%, 56%);
-	--sl-color-gray-5: hsl(228, 8%, 77%);
-	--sl-color-gray-6: hsl(231, 23%, 94%);
-	--sl-color-gray-7: hsl(240, 20%, 97%);
+	--sl-color-white: hsl(224, 10%, 10%);
+	--sl-color-gray-1: hsl(224, 14%, 16%);
+	--sl-color-gray-2: hsl(224, 10%, 23%);
+	--sl-color-gray-3: hsl(224, 7%, 36%);
+	--sl-color-gray-4: hsl(224, 6%, 56%);
+	--sl-color-gray-5: hsl(224, 6%, 77%);
+	--sl-color-gray-6: hsl(224, 20%, 94%);
+	--sl-color-gray-7: hsl(224, 19%, 97%);
 	--sl-color-black: hsl(0, 0%, 100%);
 
 	--sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%);
@@ -139,9 +138,9 @@
 	--sl-color-red: hsl(var(--sl-hue-red), 90%, 60%);
 	--sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%);
 
-	--sl-color-accent-high: hsl(var(--sl-hue-accent), 80%, 30%);
-	--sl-color-accent: hsl(var(--sl-hue-accent), 90%, 60%);
-	--sl-color-accent-low: hsl(var(--sl-hue-accent), 88%, 90%);
+	--sl-color-accent-high: hsl(234, 80%, 30%);
+	--sl-color-accent: hsl(234, 90%, 60%);
+	--sl-color-accent-low: hsl(234, 88%, 90%);
 
 	--sl-color-text-accent: var(--sl-color-accent);
 	--sl-color-text-invert: var(--sl-color-black);

package/style/util.css

@@ -41,3 +41,15 @@
 		display: block;
 	}
 }
+
+/*
+Flip an element around the y-axis when in an RTL context.
+Primarily useful for things where we can’t rely on writing direction like icons.
+
+<Icon name="right-arrow" class="rtl:flip" />
+
+In a LTR context: →					In a RTL context: ←
+*/
+[dir='rtl'] .rtl\:flip:not(:where([dir='rtl'] [dir='ltr'] *)) {
+	transform: matrix(-1, 0, 0, 1, 0, 0);
+}

package/user-components/LinkCard.astro

@@ -0,0 +1,65 @@
+---
+import Icon from './Icon.astro';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
+	title: string;
+	description?: string;
+}
+
+const { title, description, ...attributes } = Astro.props;
+---
+
+<div>
+	<a {...attributes}>
+		<span class="flex stack">
+			<span class="title" set:html={title} />
+			{description && <span class="description" set:html={description} />}
+		</span>
+		<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
+	</a>
+</div>
+
+<style>
+	a {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		gap: 0.5rem;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 0.5rem;
+		padding: 1rem;
+		text-decoration: none;
+		box-shadow: var(--sl-shadow-sm);
+	}
+
+	.stack {
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.title {
+		color: var(--sl-color-white);
+		font-weight: 600;
+		font-size: var(--sl-text-lg);
+		line-height: var(--sl-line-height-headings);
+	}
+
+	.description {
+		color: var(--sl-color-gray-3);
+		line-height: 1.5;
+	}
+
+	.icon {
+		color: var(--sl-color-gray-3);
+	}
+
+	/* Hover state */
+	a:hover {
+		background: var(--sl-color-gray-7, var(--sl-color-gray-6));
+		border-color: var(--sl-color-gray-2);
+	}
+
+	a:hover .icon {
+		color: var(--sl-color-white);
+	}
+</style>

package/user-components/Tabs.astro

@@ -77,7 +77,7 @@ const { html, panels } = processPanels(panelHtml);
 			super();
 			const tablist = this.querySelector<HTMLUListElement>('[role="tablist"]')!;
 			this.tabs = [...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]')];
-			this.panels = [...this.querySelectorAll<HTMLElement>('[role="tabpanel"]')];
+			this.panels = [...this.querySelectorAll<HTMLElement>(':scope > [role="tabpanel"]')];
 
 			this.tabs.forEach((tab, i) => {
 				// Handle clicks for mouse users

package/utils/base.ts

@@ -1,20 +1,15 @@
+import { stripLeadingAndTrailingSlashes, stripTrailingSlash } from './path';
+
 const base = stripTrailingSlash(import.meta.env.BASE_URL);
 
 /** Get the a root-relative URL path with the site’s `base` prefixed. */
 export function pathWithBase(path: string) {
-	path = stripLeadingSlash(stripTrailingSlash(path));
+	path = stripLeadingAndTrailingSlashes(path);
 	return path ? base + '/' + path + '/' : base + '/';
 }
 
 /** Get the a root-relative file URL path with the site’s `base` prefixed. */
 export function fileWithBase(path: string) {
-	path = stripLeadingSlash(stripTrailingSlash(path));
+	path = stripLeadingAndTrailingSlashes(path);
 	return path ? base + '/' + path : base;
 }
-
-function stripLeadingSlash(path: string) {
-	return path.replace(/^\//, '');
-}
-function stripTrailingSlash(path: string) {
-	return path.replace(/\/$/, '');
-}

package/utils/navigation.ts

@@ -6,6 +6,7 @@ import { pickLang } from './i18n';
 import { getLocaleRoutes, type Route } from './routing';
 import { localeToLang, slugToPathname } from './slugs';
 import type { AutoSidebarGroup, SidebarItem, SidebarLinkItem } from './user-config';
+import { ensureLeadingAndTrailingSlashes, ensureTrailingSlash } from './path';
 
 const DirKey = Symbol('DirKey');
 
@@ -82,9 +83,11 @@ function groupFromAutogenerateConfig(
 	const dirDocs = routes.filter(
 		(doc) =>
 			// Match against `foo.md` or `foo/index.md`.
-			stripExtension(doc.id) === localeDir ||
-			// Match against `foo/anything/else.md`.
-			doc.id.startsWith(localeDir + '/')
+			(stripExtension(doc.id) === localeDir ||
+				// Match against `foo/anything/else.md`.
+				doc.id.startsWith(localeDir + '/')) &&
+			// Remove any entries that should be hidden
+			!doc.entry.data.sidebar.hidden
 	);
 	const tree = treeify(dirDocs, localeDir);
 	return {
@@ -98,13 +101,6 @@ function groupFromAutogenerateConfig(
 /** Check if a string starts with one of `http://` or `https://`. */
 const isAbsolute = (link: string) => /^https?:\/\//.test(link);
 
-/** Ensure the passed path starts and ends with trailing slashes. */
-function ensureLeadingAndTrailingSlashes(href: string): string {
-	if (href[0] !== '/') href = '/' + href;
-	if (href[href.length - 1] !== '/') href += '/';
-	return href;
-}
-
 /** Create a link entry from a user config object. */
 function linkFromConfig(
 	item: SidebarLinkItem,
@@ -124,7 +120,7 @@ function linkFromConfig(
 /** Create a link entry. */
 function makeLink(href: string, label: string, currentPathname: string): Link {
 	if (!isAbsolute(href)) href = pathWithBase(href);
-	const isCurrent = href === currentPathname;
+	const isCurrent = href === ensureTrailingSlash(currentPathname);
 	return { type: 'link', label, href, isCurrent };
 }
 

package/utils/path.ts

@@ -0,0 +1,37 @@
+/** Ensure the passed path starts with a leading slash. */
+export function ensureLeadingSlash(href: string): string {
+	if (href[0] !== '/') href = '/' + href;
+	return href;
+}
+
+/** Ensure the passed path ends with a trailing slash. */
+export function ensureTrailingSlash(href: string): string {
+	if (href[href.length - 1] !== '/') href += '/';
+	return href;
+}
+
+/** Ensure the passed path starts and ends with slashes. */
+export function ensureLeadingAndTrailingSlashes(href: string): string {
+	href = ensureLeadingSlash(href);
+	href = ensureTrailingSlash(href);
+	return href;
+}
+
+/** Ensure the passed path does not start with a leading slash. */
+export function stripLeadingSlash(href: string) {
+	if (href[0] === '/') href = href.slice(1);
+	return href;
+}
+
+/** Ensure the passed path does not end with a trailing slash. */
+export function stripTrailingSlash(href: string) {
+	if (href[href.length - 1] === '/') href = href.slice(0, -1);
+	return href;
+}
+
+/** Ensure the passed path does not start and end with slashes. */
+export function stripLeadingAndTrailingSlashes(href: string): string {
+	href = stripLeadingSlash(href);
+	href = stripTrailingSlash(href);
+	return href;
+}

package/utils/translations.ts

@@ -19,10 +19,20 @@ try {
 const defaults = buildDictionary(
 	builtinTranslations.en!,
 	userTranslations.en,
-	builtinTranslations[defaultLocale],
+	builtinTranslations[defaultLocale] || builtinTranslations[stripLangRegion(defaultLocale)],
 	userTranslations[defaultLocale]
 );
 
+/**
+ * Strips the region subtag from a BCP-47 lang string.
+ * @param {string} [lang]
+ * @example
+ * const lang = stripLangRegion('en-GB'); // => 'en'
+ */
+export function stripLangRegion(lang: string) {
+	return lang.replace(/-[a-zA-Z]{2}/, '');
+}
+
 /**
  * Generate a utility function that returns UI strings for the given `locale`.
  * @param {string | undefined} [locale]
@@ -31,9 +41,12 @@ const defaults = buildDictionary(
  * const label = t('search.label'); // => 'Search'
  */
 export function useTranslations(locale: string | undefined) {
-	// TODO: Use better mapping, e.g. so that `en-GB` matches `en`.
 	const lang = localeToLang(locale);
-	const dictionary = buildDictionary(defaults, builtinTranslations[lang], userTranslations[lang]);
+	const dictionary = buildDictionary(
+		defaults,
+		builtinTranslations[lang] || builtinTranslations[stripLangRegion(lang)],
+		userTranslations[lang]
+	);
 	const t = <K extends keyof typeof dictionary>(key: K) => dictionary[key];
 	t.pick = (startOfKey: string) =>
 		Object.fromEntries(Object.entries(dictionary).filter(([k]) => k.startsWith(startOfKey)));

package/utils/user-config.ts

@@ -137,12 +137,16 @@ const UserConfigSchema = z.object({
 				'mastodon',
 				'github',
 				'gitlab',
+				'bitbucket',
 				'discord',
+				'gitter',
 				'codeberg',
+				'codePen',
 				'youtube',
 				'threads',
 				'linkedin',
 				'twitch',
+				'microsoftTeams',
 			]),
 			// Link to the respective social profile for this site
 			z.string().url()