@astrojs/starlight 0.30.1 → 0.30.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @astrojs/starlight
 
+## 0.30.3
+
+### Patch Changes
+
+- [#2717](https://github.com/withastro/starlight/pull/2717) [`c5fcbb3`](https://github.com/withastro/starlight/commit/c5fcbb33a7a0511ac372f5d006a69f4195d1e266) Thanks [@delucis](https://github.com/delucis)! - Fixes a list item spacing issue where line break elements (`<br>`) could receive a margin, breaking layout in Firefox
+
+- [#2724](https://github.com/withastro/starlight/pull/2724) [`02d7ac6`](https://github.com/withastro/starlight/commit/02d7ac66a0bdca3f26001f556de070027d4e0faf) Thanks [@dionysuzx](https://github.com/dionysuzx)! - Adds social link support for Farcaster
+
+- [#2635](https://github.com/withastro/starlight/pull/2635) [`ec4b851`](https://github.com/withastro/starlight/commit/ec4b85154ea301d9144ff49f3abd009e3a929387) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue where the language picker in multilingual sites could display the wrong language when navigating between pages with the browser back/forward buttons.
+
+- [#2726](https://github.com/withastro/starlight/pull/2726) [`e54ebd5`](https://github.com/withastro/starlight/commit/e54ebd5c879deb3fdff2180426b377181773b85f) Thanks [@techfg](https://github.com/techfg)! - Adds icon for phone
+
+## 0.30.2
+
+### Patch Changes
+
+- [#2702](https://github.com/withastro/starlight/pull/2702) [`02d16f3`](https://github.com/withastro/starlight/commit/02d16f3638db609501897c5e3647cc20eb5ec142) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue with autogenerated sidebars when using Starlight with Astro's new Content Layer API with directories containing spaces or special characters.
+
+- [#2704](https://github.com/withastro/starlight/pull/2704) [`fd16470`](https://github.com/withastro/starlight/commit/fd164704b25ec5c000a2765eb0930b87e9a4e61e) Thanks [@delucis](https://github.com/delucis)! - Fixes display of focus indicator around site title
+
 ## 0.30.1
 
 ### Patch Changes

package/components/Header.astro

@@ -41,7 +41,10 @@ const shouldRenderSearch =
 
 	.title-wrapper {
 		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
-		overflow: hidden;
+		overflow: clip;
+		/* Avoid clipping focus ring around link inside title wrapper. */
+		padding: 0.25rem;
+		margin: -0.25rem;
 	}
 
 	.right-group,

package/components/Icons.ts

@@ -108,6 +108,8 @@ export const BuiltInIcons = {
 		'<path d="M20.9 2H3.1A1.1 1.1 0 0 0 2 3.1v17.8A1.1 1.1 0 0 0 3.1 22h9.58v-7.75h-2.6v-3h2.6V9a3.64 3.64 0 0 1 3.88-4 20.26 20.26 0 0 1 2.33.12v2.7H17.3c-1.26 0-1.5.6-1.5 1.47v1.93h3l-.39 3H15.8V22h5.1a1.1 1.1 0 0 0 1.1-1.1V3.1A1.1 1.1 0 0 0 20.9 2Z"/>',
 	email:
 		'<path d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm-.41 2-5.88 5.88a1 1 0 0 1-1.42 0L5.41 6ZM20 17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7.41l5.88 5.88a3 3 0 0 0 4.24 0L20 7.41Z"/>',
+	phone:
+		'<path d="M19.44 13c-.22 0-.45-.07-.67-.12a9.44 9.44 0 0 1-1.31-.39 2 2 0 0 0-2.48 1l-.22.45a12.18 12.18 0 0 1-2.66-2 12.18 12.18 0 0 1-2-2.66l.42-.28a2 2 0 0 0 1-2.48 10.33 10.33 0 0 1-.39-1.31c-.05-.22-.09-.45-.12-.68a3 3 0 0 0-3-2.49h-3a3 3 0 0 0-3 3.41 19 19 0 0 0 16.52 16.46h.38a3 3 0 0 0 2-.76 3 3 0 0 0 1-2.25v-3a3 3 0 0 0-2.47-2.9Zm.5 6a1 1 0 0 1-.34.75 1.05 1.05 0 0 1-.82.25A17 17 0 0 1 4.07 5.22a1.09 1.09 0 0 1 .25-.82 1 1 0 0 1 .75-.34h3a1 1 0 0 1 1 .79q.06.41.15.81a11.12 11.12 0 0 0 .46 1.55l-1.4.65a1 1 0 0 0-.49 1.33 14.49 14.49 0 0 0 7 7 1 1 0 0 0 .76 0 1 1 0 0 0 .57-.52l.62-1.4a13.69 13.69 0 0 0 1.58.46q.4.09.81.15a1 1 0 0 1 .79 1Z"/>',
 	reddit:
 		'<path d="M14.41 16.87a3.38 3.38 0 0 1-2.37.63 3.37 3.37 0 0 1-2.36-.63 1 1 0 0 0-1.42 1.41 5.11 5.11 0 0 0 3.78 1.22 5.12 5.12 0 0 0 3.78-1.22 1 1 0 1 0-1.41-1.41ZM9.2 15a1 1 0 1 0-1-1 1 1 0 0 0 1 1Zm6-2a1 1 0 1 0 1 1 1 1 0 0 0-1-1Zm7.8-1.22a3.77 3.77 0 0 0-6.8-2.26 16.5 16.5 0 0 0-3.04-.48l.85-5.7 2.09.7a3 3 0 0 0 6-.06v-.02a3.03 3.03 0 0 0-3-2.96 2.98 2.98 0 0 0-2.34 1.16l-3.24-1.1a1 1 0 0 0-1.3.8l-1.09 7.17a16.66 16.66 0 0 0-3.34.49 3.77 3.77 0 0 0-6.22 4.23A4.86 4.86 0 0 0 1 16c0 3.92 4.83 7 11 7s11-3.08 11-7a4.86 4.86 0 0 0-.57-2.25 3.78 3.78 0 0 0 .57-1.97ZM19.1 3a1 1 0 1 1-1 1 1.02 1.02 0 0 1 1-1ZM4.77 10a1.76 1.76 0 0 1 .88.25A9.98 9.98 0 0 0 3 11.92v-.14A1.78 1.78 0 0 1 4.78 10ZM12 21c-4.88 0-9-2.29-9-5s4.12-5 9-5 9 2.29 9 5-4.12 5-9 5Zm8.99-9.08a9.98 9.98 0 0 0-2.65-1.67 1.76 1.76 0 0 1 .88-.25A1.78 1.78 0 0 1 21 11.78l-.01.14Z"/>',
 	patreon:

package/components/LanguageSelect.astro

@@ -42,6 +42,16 @@ function localizedPathname(locale: string | undefined): string {
 						window.location.pathname = e.currentTarget.value;
 					}
 				});
+				window.addEventListener('pageshow', (event) => {
+					if (!event.persisted) return;
+					// If the page was loaded from a cache, the language select selected index might not be
+					// in sync with the current page.
+					const markupSelectedIndex =
+						select.querySelector<HTMLOptionElement>('option[selected]')?.index;
+					if (markupSelectedIndex !== select.selectedIndex) {
+						select.selectedIndex = markupSelectedIndex ?? 0;
+					}
+				});
 			}
 		}
 	}

package/components/Select.astro

@@ -12,12 +12,21 @@ interface Props {
 		selected: boolean;
 	}>;
 }
+
+/**
+ * The `autocomplete="off"` attribute is used to prevent the browser from automatically selecting a
+ * value for this input, e.g. based on the user's previous selections, as this could lead to
+ * incorrect values being selected for example when the user switches between languages and uses
+ * the back button.
+ * Note that this attribute is only useful when a value is not restored at a later stage, e.g. the
+ * bfcache that ignores this attribute when restoring the value.
+ */
 ---
 
 <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}>
+	<select value={Astro.props.value} autocomplete="off">
 		{
 			Astro.props.options.map(({ value, selected, label }) => (
 				<option value={value} selected={selected} set:html={label} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.30.1",
+  "version": "0.30.3",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",

package/schemas/social.ts

@@ -37,6 +37,7 @@ export const socialLinks = [
 	'tiktok',
 	'nostr',
 	'backstage',
+	'farcaster',
 ] as const;
 
 export const SocialLinksSchema = () =>
@@ -89,6 +90,7 @@ export const SocialLinksSchema = () =>
 					tiktok: 'TikTok',
 					nostr: 'Nostr',
 					backstage: 'Backstage',
+					farcaster: 'Farcaster',
 				}[key];
 				labelledLinks[key] = { label, url };
 			}

package/style/markdown.css

@@ -24,7 +24,7 @@
 
 .sl-markdown-content
 	li
-	> :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) {
+	> :last-child:not(li, ul, ol, a, strong, em, del, span, input, code, br, :where(.not-content *)) {
 	margin-bottom: 1.25rem;
 }
 

package/utils/navigation.ts

@@ -24,6 +24,8 @@ const SlugKey = Symbol('SlugKey');
 
 const neverPathFormatter = createPathFormatter({ trailingSlash: 'never' });
 
+const docsCollectionPathFromRoot = getCollectionPathFromRoot('docs', project);
+
 export interface Link {
 	type: 'link';
 	label: string;
@@ -103,13 +105,15 @@ function groupFromAutogenerateConfig(
 ): Group {
 	const { collapsed: subgroupCollapsed, directory } = item.autogenerate;
 	const localeDir = locale ? locale + '/' + directory : directory;
-	const dirDocs = routes.filter(
-		(doc) =>
+	const dirDocs = routes.filter((doc) => {
+		const filePathFromContentDir = getRoutePathRelativeToCollectionRoot(doc, locale);
+		return (
 			// Match against `foo.md` or `foo/index.md`.
-			stripExtension(doc.id) === localeDir ||
+			stripExtension(filePathFromContentDir) === localeDir ||
 			// Match against `foo/anything/else.md`.
-			doc.id.startsWith(localeDir + '/')
-	);
+			filePathFromContentDir.startsWith(localeDir + '/')
+		);
+	});
 	const tree = treeify(dirDocs, locale, localeDir);
 	const label = pickLang(item.translations, localeToLang(locale)) || item.label;
 	return {
@@ -219,24 +223,22 @@ function getBreadcrumbs(path: string, baseDir: string): string[] {
 	return relativePath.split('/');
 }
 
+/** Return the path of a route relative to the root of the collection, which is equivalent to legacy IDs. */
+function getRoutePathRelativeToCollectionRoot(route: Route, locale: string | undefined) {
+	return project.legacyCollections
+		? route.id
+		: // For collections with a loader, use a localized filePath relative to the collection
+			localizedId(route.entry.filePath.replace(`${docsCollectionPathFromRoot}/`, ''), locale);
+}
+
 /** Turn a flat array of routes into a tree structure. */
 function treeify(routes: Route[], locale: string | undefined, baseDir: string): Dir {
 	const treeRoot: Dir = makeDir(baseDir);
-	const collectionPathFromRoot = getCollectionPathFromRoot('docs', project);
 	routes
 		// Remove any entries that should be hidden
 		.filter((doc) => !doc.entry.data.sidebar.hidden)
 		// Compute the path of each entry from the root of the collection ahead of time.
-		.map(
-			(doc) =>
-				[
-					project.legacyCollections
-						? doc.id
-						: // For collections with a loader, use a localized filePath relative to the collection
-							localizedId(doc.entry.filePath.replace(`${collectionPathFromRoot}/`, ''), locale),
-					doc,
-				] as const
-		)
+		.map((doc) => [getRoutePathRelativeToCollectionRoot(doc, locale), doc] as const)
 		// Sort by depth, to build the tree depth first.
 		.sort(([a], [b]) => b.split('/').length - a.split('/').length)
 		// Build the tree