@astrojs/starlight 0.35.3 → 0.36.1

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @astrojs/starlight
 
+## 0.36.1
+
+### Patch Changes
+
+- [#3479](https://github.com/withastro/starlight/pull/3479) [`2fec483`](https://github.com/withastro/starlight/commit/2fec4833d4867db35b77079ce3026b79ba1e0441) Thanks [@gboubeta-uvigo](https://github.com/gboubeta-uvigo)! - Updates Galician UI translations
+
+- [#3457](https://github.com/withastro/starlight/pull/3457) [`c6c0c51`](https://github.com/withastro/starlight/commit/c6c0c5114a659b22ffcc4c2085ad8c1fc4f43a5d) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Deduplicates sitemap link tags in the head.
+
+  When [enabling sitemap](https://starlight.astro.build/guides/customization/#enable-sitemap) in Starlight, a `<link rel="sitemap" href="/sitemap-index.xml">` tag is automatically added to the head of each page. Manually specifying sitemap link tags using the Starlight [`head` configuration option](https://starlight.astro.build/reference/configuration/#head) or the [`head` frontmatter field](https://starlight.astro.build/reference/frontmatter/#head) will now override the default sitemap link tag added by Starlight.
+
+  This change ensures that users manually adding the `@astrojs/sitemap` integration to the Astro `integrations` array for more fine-grained control over sitemap generation and also using the [`filenameBase` integration option](https://docs.astro.build/en/guides/integrations-guide/sitemap/#filenamebase) can customize the sitemap link tag in the head.
+
+- [#3448](https://github.com/withastro/starlight/pull/3448) [`1fc7501`](https://github.com/withastro/starlight/commit/1fc7501d16218c7f156c5e90df25ae6fbb8abfea) Thanks [@dionysuzx](https://github.com/dionysuzx)! - Enlarges the Farcaster icon to better match other social icons
+
+- [#3473](https://github.com/withastro/starlight/pull/3473) [`07204dd`](https://github.com/withastro/starlight/commit/07204dd7b8b6ee71bf24ff9c7d70fc7306bf2076) Thanks [@gboubeta](https://github.com/gboubeta)! - Fixes a typo in Galician table of contents label
+
+## 0.36.0
+
+### Minor Changes
+
+- [#3427](https://github.com/withastro/starlight/pull/3427) [`c3b2d0f`](https://github.com/withastro/starlight/commit/c3b2d0fc37bb9b7b6abc6c11b760a4114690ccd4) Thanks [@delucis](https://github.com/delucis)! - Fixes styling of labels that wrap across multiple lines in `<Tabs>` component
+
+  ⚠️ **Potentially breaking change:** Tab labels now have a narrower line-height and additional vertical padding. If you have custom CSS targetting the `<Tabs>` component, you may want to double check the visual appearance of your tabs when updating.
+
+  If you want to preserve the previous styling, you can add the following custom CSS to your site:
+
+  ```css
+  .tab > [role='tab'] {
+    line-height: var(--sl-line-height);
+    padding-block: 0;
+  }
+  ```
+
+- [#3380](https://github.com/withastro/starlight/pull/3380) [`3364af3`](https://github.com/withastro/starlight/commit/3364af31e535d62ee7b045e6d9cf97c7e58df981) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Makes head entry parsing stricter in Starlight config and content frontmatter.
+
+  **⚠️ Potentially breaking change:** Previously Starlight would accept a head entry for a `meta` tag defining some `content` which generates invalid HTML as `<meta>` is a void element which cannot have any child nodes. Now, it is an error to define a `meta` tag including some `content`.
+
+  If you see errors after updating, look for head entries in the Starlight configuration in the `astro.config.mjs` file or in the frontmatter of your content files that include a `content` property for a `meta` tag. To fix the error, move the `content` property to the `attrs` object with at least an additional attribute to identify the kind of metadata it represents:
+
+  ```diff
+  head: {
+    tag: 'meta',
+  - content: 'foo',
+    attrs: {
+      name: 'my-meta',
+  +   content: 'foo',
+    },
+  },
+  ```
+
+- [#3340](https://github.com/withastro/starlight/pull/3340) [`2018c31`](https://github.com/withastro/starlight/commit/2018c31b0f559d51478bfbf9f12cfba76b4e74fc) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds missing vertical spacing between Markdown content and UI Framework components using [client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives).
+
+  **⚠️ Potentially breaking change:** By default, Starlight applies some vertical spacing (`--sl-content-gap-y`) between Markdown content blocks. This change introduces similar spacing between Markdown content blocks and UI Framework components using client directives which was not present before.
+
+  If you were relying on the previous behavior, you can manually override the spacing by manually specifying the top margin on the component using [custom CSS](https://starlight.astro.build/guides/css-and-tailwind/#custom-css-styles), e.g. by relying on a CSS class to target the component.
+
+  ```css
+  .my-custom-component {
+    margin-top: 0;
+  }
+  ```
+
+### Patch Changes
+
+- [#3423](https://github.com/withastro/starlight/pull/3423) [`a0d0670`](https://github.com/withastro/starlight/commit/a0d0670bce5827b90fd0102fa3517814367760e7) Thanks [@andersk](https://github.com/andersk)! - Fixes HTML validity in sidebar groups by ensuring `<summary>` is the first child of `<details>`
+
 ## 0.35.3
 
 ### Patch Changes

package/components/Icons.ts

@@ -81,7 +81,7 @@ export const BuiltInIcons = {
 	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"/>',
 	farcaster:
-		'<path d="M6.187 3.733h11.627v16.533h-1.707v-7.573h-.017a4.107 4.107 0 0 0-8.18 0h-.017v7.573H6.186z"/><path d="m3.093 6.08.693 2.347h.587v9.493a.533.533 0 0 0-.533.533v.64h-.107a.533.533 0 0 0-.533.533v.64h5.973v-.64a.533.533 0 0 0-.533-.533h-.107v-.64A.533.533 0 0 0 8 17.92h-.64V6.08zM16.213 17.92a.533.533 0 0 0-.533.533v.64h-.107a.533.533 0 0 0-.533.533v.64h5.973v-.64a.533.533 0 0 0-.533-.533h-.107v-.64a.533.533 0 0 0-.533-.533V8.427h.587l.693-2.347h-4.267v11.84z"/>',
+		'<path d="M 4.572 1.25 h 14.59 v 20.746 h -2.142 v -9.503 h -0.021 a 5.154 5.154 0 0 0 -10.264 0 h -0.021 v 9.503 H 4.571 z"/><path d="m 0.69 4.195 0.87 2.945 h 0.737 v 11.912 a 0.669 0.669 0 0 0 -0.669 0.669 v 0.803 h -0.134 a 0.669 0.669 0 0 0 -0.669 0.669 v 0.803 h 7.495 v -0.803 a 0.669 0.669 0 0 0 -0.669 -0.669 h -0.134 v -0.803 A 0.669 0.669 0 0 0 6.847 19.052 h -0.803 V 4.195 z M 17.153 19.052 a 0.669 0.669 0 0 0 -0.669 0.669 v 0.803 h -0.134 a 0.669 0.669 0 0 0 -0.669 0.669 v 0.803 h 7.495 v -0.803 a 0.669 0.669 0 0 0 -0.669 -0.669 h -0.134 v -0.803 a 0.669 0.669 0 0 0 -0.669 -0.669 V 7.14 h 0.737 l 0.87 -2.945 h -5.354 v 14.857 z"/>',
 	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:

package/components/SidebarSublist.astro

@@ -37,7 +37,6 @@ const { sublist, nested } = Astro.props;
 					<details
 						open={flattenSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed}
 					>
-						<SidebarRestorePoint />
 						<summary>
 							<span class="group-label">
 								<span class="large">{entry.label}</span>
@@ -51,6 +50,7 @@ const { sublist, nested } = Astro.props;
 							</span>
 							<Icon name="right-caret" class="caret" size="1.25rem" />
 						</summary>
+						<SidebarRestorePoint />
 						<Astro.self sublist={entry.entries} nested />
 					</details>
 				)}

package/package.json

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

package/schema.ts

@@ -30,7 +30,7 @@ const StarlightFrontmatterSchema = (context: SchemaContext) =>
 		editUrl: z.union([z.string().url(), z.boolean()]).optional().default(true),
 
 		/** Set custom `<head>` tags just for this page. */
-		head: HeadConfigSchema(),
+		head: HeadConfigSchema({ source: 'content' }),
 
 		/** Override global table of contents configuration for this page. */
 		tableOfContents: TableOfContentsSchema().optional(),

package/schemas/head.ts

@@ -1,16 +1,47 @@
 import { z } from 'astro/zod';
+import yaml from 'js-yaml';
 
-export const HeadConfigSchema = () =>
+export const HeadConfigSchema = ({
+	source,
+}: {
+	/**
+	 * Depending on the content being validated, either a user's config or a page's frontmatter,
+	 * different error messages will be shown.
+	 */
+	source: 'config' | 'content';
+}) =>
 	z
 		.array(
-			z.object({
-				/** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
-				tag: z.enum(['title', 'base', 'link', 'style', 'meta', 'script', 'noscript', 'template']),
-				/** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
-				attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).optional(),
-				/** Content to place inside the tag (optional). */
-				content: z.string().optional(),
-			})
+			z
+				.object({
+					/** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
+					tag: z.enum(['title', 'base', 'link', 'style', 'meta', 'script', 'noscript', 'template']),
+					/** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
+					attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).optional(),
+					/** Content to place inside the tag (optional). */
+					content: z.string().optional(),
+				})
+				.superRefine((config, ctx) => {
+					if (config.tag !== 'meta' || config.content === undefined) return;
+					const { content, ...rest } = config;
+					const correctTag = {
+						...rest,
+						attrs: { ...(config.attrs ?? { name: 'identifier' }), content: config.content },
+					};
+					const code =
+						source === 'config' ? JSON.stringify(correctTag, null, 2) : yaml.dump([correctTag]);
+					ctx.addIssue({
+						code: 'custom',
+						message:
+							`The \`head\` configuration includes a \`meta\` tag with \`content\` which is invalid HTML.\n` +
+							`You should instead use a \`content\` attribute ` +
+							(Object.keys(rest.attrs ?? {}).length === 0
+								? 'with an additional attribute such as `name`, `property`, or `http-equiv` to identify the kind of metadata it represents '
+								: '') +
+							`in the \`attrs\` object:\n\n` +
+							code,
+					});
+				})
 		)
 		.default([]);
 

package/style/markdown.css

@@ -2,7 +2,15 @@
 	.sl-markdown-content
 		:not(a, strong, em, del, span, input, code, br)
 		+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
-		margin-top: 1rem;
+		margin-top: var(--sl-content-gap-y);
+	}
+
+	/* Vertical spacing between Markdown content blocks and UI Framework components using client directives. */
+	.sl-markdown-content
+		:not(a, strong, em, del, span, input, code, br)
+		+ :is(astro-island, astro-slot)
+		> :not(a, strong, em, del, span, input, code, br, :where(.not-content *)):first-child {
+		margin-top: var(--sl-content-gap-y);
 	}
 
 	/* Headings after non-headings have more spacing. */

package/style/props.css

@@ -101,6 +101,7 @@
 		--sl-sidebar-pad-x: 1rem;
 		--sl-content-width: 45rem;
 		--sl-content-pad-x: 1rem;
+		--sl-content-gap-y: 1rem;
 		--sl-main-pad: 0 0 3vh 0;
 		--sl-menu-button-size: 2rem;
 		--sl-nav-gap: var(--sl-content-pad-x);

package/translations/gl.json

@@ -4,27 +4,40 @@
   "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Deixar",
   "search.devWarning": "A busca só está dispoñible nas versións de producción. \nTrata de construir e ollear o sitio para probalo localmente.",
-  "themeSelect.accessibleLabel": "Seleciona tema",
+  "themeSelect.accessibleLabel": "Selecciona tema",
   "themeSelect.dark": "Escuro",
   "themeSelect.light": "Claro",
   "themeSelect.auto": "Auto",
   "languageSelect.accessibleLabel": "Seleciona linguaxe",
   "menuButton.accessibleLabel": "Menú",
   "sidebarNav.accessibleLabel": "Principal",
-  "tableOfContents.onThisPage": "Nesta paxina",
+  "tableOfContents.onThisPage": "Nesta páxina",
   "tableOfContents.overview": "Sinopse",
   "i18n.untranslatedContent": "Este contido aínda non está dispoñible no teu idioma.",
-  "page.editLink": "Editar paxina",
+  "page.editLink": "Editar páxina",
   "page.lastUpdated": "Última actualización:",
   "page.previousLink": "Anterior",
   "page.nextLink": "Seguinte",
-  "page.draft": "This content is a draft and will not be included in production builds.",
-  "404.text": "Paxina non atopada. Comproba a URL ou intenta usar a barra de busca.",
-  "aside.note": "Note",
-  "aside.tip": "Tip",
-  "aside.caution": "Caution",
-  "aside.danger": "Danger",
-  "fileTree.directory": "Directory",
-  "builtWithStarlight.label": "Built with Starlight",
-  "heading.anchorLabel": "Section titled “{{title}}”"
+  "page.draft": "Este contido é un borrador e non se incluirá nas versións de producción.",
+  "404.text": "Páxina non atopada. Comproba a URL ou intenta usar a barra de busca.",
+  "aside.note": "Nota",
+  "aside.tip": "Consello",
+  "aside.caution": "Precaución",
+  "aside.danger": "Perigo",
+  "expressiveCode.copyButtonCopied": "¡Copiado!",
+  "expressiveCode.copyButtonTooltip": "Copiar ao portapapeis",
+  "expressiveCode.terminalWindowFallbackTitle": "Fiestra do terminal",
+  "fileTree.directory": "Directorio",
+  "builtWithStarlight.label": "Feito con Starlight",
+  "pagefind.clear_search": "Limpar",
+  "pagefind.load_more": "Cargar máis resultados",
+  "pagefind.search_label": "Buscar páxina",
+  "pagefind.filters_label": "Filtros",
+  "pagefind.zero_results": "Ningún resultado para: [SEARCH_TERM]",
+  "pagefind.many_results": "[COUNT] resultados para: [SEARCH_TERM]",
+  "pagefind.one_result": "[COUNT] resultado para: [SEARCH_TERM]",
+  "pagefind.alt_search": "Ningún resultado para [SEARCH_TERM]. Amósanse resultados para: [DIFFERENT_TERM]",
+  "pagefind.search_suggestion": "Ningún resultado para [SEARCH_TERM]. Proba algunha destas buscas:",
+  "pagefind.searching": "Buscando [SEARCH_TERM]...",
+  "heading.anchorLabel": "Sección titulada «{{title}}»"
 }

package/user-components/Tabs.astro

@@ -115,13 +115,15 @@ if (isSynced) {
 		}
 
 		.tab {
+			display: flex;
 			margin-bottom: -2px;
 		}
 		.tab > [role='tab'] {
 			display: flex;
 			align-items: center;
 			gap: 0.5rem;
-			padding: 0 1.25rem;
+			line-height: var(--sl-line-height-headings);
+			padding: 0.275rem 1.25rem;
 			text-decoration: none;
 			border-bottom: 2px solid var(--sl-color-gray-5);
 			color: var(--sl-color-gray-3);

package/utils/head.ts

@@ -7,7 +7,7 @@ import { fileWithBase } from './base';
 import { formatCanonical } from './canonical';
 import { localizedUrl } from './localizedUrl';
 
-const HeadSchema = HeadConfigSchema();
+const HeadSchema = HeadConfigSchema({ source: 'content' });
 
 /** Get the head for the current page. */
 export function getHead(
@@ -120,7 +120,8 @@ function createHead(defaults: HeadUserConfig, ...heads: HeadConfig[]) {
 }
 
 /**
- * Test if a head config object contains a matching `<title>` or `<meta>` or `<link rel="canonical">` tag.
+ * Test if a head config object contains a matching `<title>`, `<meta>`, `<link rel="canonical">`
+ * or `<link rel="sitemap">` tag.
  *
  * For example, will return true if `head` already contains
  * `<meta name="description" content="A">` and the passed `tag`
@@ -135,7 +136,9 @@ function hasTag(head: HeadConfig, entry: HeadConfig[number]): boolean {
 			return hasOneOf(head, entry, ['name', 'property', 'http-equiv']);
 		case 'link':
 			return head.some(
-				({ attrs }) => entry.attrs?.rel === 'canonical' && attrs?.rel === 'canonical'
+				({ attrs }) =>
+					(entry.attrs?.rel === 'canonical' && attrs?.rel === 'canonical') ||
+					(entry.attrs?.rel === 'sitemap' && attrs?.rel === 'sitemap')
 			);
 		default:
 			return false;

package/utils/user-config.ts

@@ -149,7 +149,7 @@ const UserConfigSchema = z.object({
 	 *  ],
 	 * })
 	 */
-	head: HeadConfigSchema(),
+	head: HeadConfigSchema({ source: 'config' }),
 
 	/**
 	 * Provide CSS files to customize the look and feel of your Starlight site.