@astrojs/starlight 0.36.3 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @astrojs/starlight
 
+## 0.37.0
+
+### Minor Changes
+
+- [#3491](https://github.com/withastro/starlight/pull/3491) [`28810f0`](https://github.com/withastro/starlight/commit/28810f085faf017f3fedd1407e741bdf6c232848) Thanks [@JusticeMatthew](https://github.com/JusticeMatthew)! - Changes text overflow styling in Markdown content
+
+  ⚠️ **Potentially breaking change:** This release switches the [`overflow-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) CSS style for common elements to `break-word`. In most cases, there should be little visual impact, but this change can impact how layouts with implicit sizing (such as tables) look, improving legibility in how words wrap.
+
+  If you want to preserve the previous styling, you can add the following [custom CSS](https://starlight.astro.build/guides/css-and-tailwind/#custom-css-styles) to your site:
+
+  ```css
+  p, h1, h2, h3, h4, h5, h6, code {
+    overflow-wrap: anywhere;
+  }
+  ```
+
+- [#3351](https://github.com/withastro/starlight/pull/3351) [`239698c`](https://github.com/withastro/starlight/commit/239698c53625f5411792e314994d20c20f9ede77) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Ensures that Starlight CSS layer order is predictable in custom pages using the `<StarlightPage>` component.
+
+  Previously, due to how [import order](https://docs.astro.build/en/guides/styling/#import-order) works in Astro, the `<StarlightPage>` component had to be the first import in custom pages to set up [cascade layers](https://starlight.astro.build/guides/css-and-tailwind/#cascade-layers) used internally by Starlight to manage the order of its styles.
+
+  With this change, this restriction no longer applies and Starlight’s styles will be applied correctly regardless of the import order of the `<StarlightPage>` component.
+
+- [#3521](https://github.com/withastro/starlight/pull/3521) [`ca7b771`](https://github.com/withastro/starlight/commit/ca7b771e5bd4da3fe500bbad562e69d5880690ea) Thanks [@shubham-padia](https://github.com/shubham-padia)! - Fixes an issue where a vertical scrollbar could be displayed on the Starlight `<Tabs>` component when zooming the page
+
+  ⚠️ **Potentially breaking change:** The `<Tabs>` component no longer uses `margin-bottom` and `border-bottom` to highlight the current tab. This is now done with a `box-shadow`. If you have custom styling for your tabs, you may need to update it.
+
+  If you want to preserve the previous styling, you can add the following custom CSS to your site:
+
+  ```css
+  starlight-tabs .tab {
+    margin-bottom: -2px;
+  }
+
+  starlight-tabs .tab > [role='tab'] {
+    border-bottom: 2px solid var(--sl-color-gray-5);
+    box-shadow: none;
+  }
+
+  starlight-tabs .tab [role='tab'][aria-selected='true'] {
+    border-color: var(--sl-color-text-accent);
+  }
+  ```
+
+- [#3549](https://github.com/withastro/starlight/pull/3549) [`1cf50eb`](https://github.com/withastro/starlight/commit/1cf50ebb18c0232be581cf0aff0c192e4c421e55) Thanks [@jacobdalamb](https://github.com/jacobdalamb)! - Updates the default sans-serif system font stack, dropping support for the `-apple-system` and `BlinkMacSystemFont` font names used in older browsers. These are no longer needed in [browsers officially supported by Starlight](https://browsersl.ist/#q=%3E+0.5%25%2C+not+dead%2C+Chrome+%3E%3D+105%2C+Edge+%3E%3D+105%2C+Firefox+%3E%3D+121%2C+Safari+%3E%3D+15.4%2C+iOS+%3E%3D+15.4%2C+not+op_mini+all).
+
+  If you still need to support older browsers, you can add the following custom CSS to your site:
+
+  ```css
+  :root {
+    --sl-font-system: ui-sans-serif, system-ui, -apple-system,
+      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji';
+  }
+  ```
+
+- [#3332](https://github.com/withastro/starlight/pull/3332) [`f61f99d`](https://github.com/withastro/starlight/commit/f61f99dc09c59d26761ffebc611969e20b866191) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds a new [`markdown.processedDirs`](https://starlight.astro.build/reference/configuration/#processeddirs) configuration option to specify additional directories where files should be processed by Starlight’s Markdown pipeline.
+
+  By default, Starlight’s processing only applies to Markdown and MDX content loaded using Starlight’s `docsLoader()`. This new option allows to extend this processing to other directories, which can be useful if you are rendering content from a custom content collection using the `<StarlightPage>` component and expect Starlight’s Markdown processing to be applied to that content as well.
+
 ## 0.36.3
 
 ### Patch Changes

package/index.ts

@@ -13,11 +13,16 @@ import { AstroError } from 'astro/errors';
 import { spawn } from 'node:child_process';
 import { dirname, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { starlightAsides, starlightDirectivesRestorationIntegration } from './integrations/asides';
+import {
+	starlightRehypePlugins,
+	starlightRemarkPlugins,
+	type RemarkRehypePluginOptions,
+} from './integrations/remark-rehype';
+import { starlightDirectivesRestorationIntegration } from './integrations/asides';
 import { starlightExpressiveCode } from './integrations/expressive-code/index';
 import { starlightSitemap } from './integrations/sitemap';
+import { vitePluginStarlightCssLayerOrder } from './integrations/vite-layer-order';
 import { vitePluginStarlightUserConfig } from './integrations/virtual-user-config';
-import { rehypeRtlCodeSupport } from './integrations/code-rtl-support';
 import {
 	injectPluginTranslationsTypes,
 	runPlugins,
@@ -26,7 +31,6 @@ import {
 } from './utils/plugins';
 import { processI18nConfig } from './utils/i18n';
 import type { StarlightConfig } from './types';
-import { starlightAutolinkHeadings } from './integrations/heading-links';
 
 export default function StarlightIntegration(
 	userOpts: StarlightUserConfigWithPlugins
@@ -115,31 +119,23 @@ export default function StarlightIntegration(
 				const selfIndex = config.integrations.findIndex((i) => i.name === '@astrojs/starlight');
 				config.integrations.splice(selfIndex + 1, 0, ...integrations);
 
+				const remarkRehypeOptions: RemarkRehypePluginOptions = {
+					starlightConfig,
+					astroConfig: config,
+					useTranslations,
+					absolutePathToLang,
+				};
+
 				updateConfig({
 					vite: {
 						plugins: [
+							vitePluginStarlightCssLayerOrder(),
 							vitePluginStarlightUserConfig(command, starlightConfig, config, pluginTranslations),
 						],
 					},
 					markdown: {
-						remarkPlugins: [
-							...starlightAsides({
-								starlightConfig,
-								astroConfig: config,
-								useTranslations,
-								absolutePathToLang,
-							}),
-						],
-						rehypePlugins: [
-							rehypeRtlCodeSupport({ astroConfig: config }),
-							// Process headings and add anchor links.
-							...starlightAutolinkHeadings({
-								starlightConfig,
-								astroConfig: config,
-								useTranslations,
-								absolutePathToLang,
-							}),
-						],
+						remarkPlugins: [...starlightRemarkPlugins(remarkRehypeOptions)],
+						rehypePlugins: [...starlightRehypePlugins(remarkRehypeOptions)],
 					},
 					scopedStyleStrategy: 'where',
 					// If not already configured, default to prefetching all links on hover.

package/integrations/asides.ts

@@ -1,6 +1,6 @@
 /// <reference types="mdast-util-directive" />
 
-import type { AstroConfig, AstroIntegration, AstroUserConfig } from 'astro';
+import type { AstroIntegration } from 'astro';
 import { h as _h, s as _s, type Properties, type Result } from 'hastscript';
 import type { Node, Paragraph as P, Parent, PhrasingContent, Root } from 'mdast';
 import {
@@ -11,23 +11,15 @@ import {
 } from 'mdast-util-directive';
 import { toMarkdown } from 'mdast-util-to-markdown';
 import { toString } from 'mdast-util-to-string';
-import remarkDirective from 'remark-directive';
 import type { Plugin, Transformer } from 'unified';
 import { visit } from 'unist-util-visit';
-import type { HookParameters, StarlightConfig, StarlightIcon } from '../types';
-import { getRemarkRehypeDocsCollectionPath, shouldTransformFile } from './remark-rehype-utils';
+import type { RemarkRehypePluginOptions } from './remark-rehype';
+import type { StarlightIcon } from '../types';
 import { Icons } from '../components/Icons';
 import { fromHtml } from 'hast-util-from-html';
 import type { Element } from 'hast';
 import { throwInvalidAsideIconError } from './asides-error';
 
-interface AsidesOptions {
-	starlightConfig: Pick<StarlightConfig, 'defaultLocale' | 'locales'>;
-	astroConfig: { root: AstroConfig['root']; srcDir: AstroConfig['srcDir'] };
-	useTranslations: HookParameters<'config:setup'>['useTranslations'];
-	absolutePathToLang: HookParameters<'config:setup'>['absolutePathToLang'];
-}
-
 /** Hacky function that generates an mdast HTML tree ready for conversion to HTML by rehype. */
 function h(el: string, attrs: Properties = {}, children: unknown[] = []): P {
 	const { tagName, properties } = _h(el, attrs);
@@ -132,7 +124,7 @@ function makeSvgChildNodes(children: Result['children']): P[] {
  * </aside>
  * ```
  */
-function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
+export function remarkAsides(options: RemarkRehypePluginOptions): Plugin<[], Root> {
 	type Variant = 'note' | 'tip' | 'caution' | 'danger';
 	const variants = new Set(['note', 'tip', 'caution', 'danger']);
 	const isAsideVariant = (s: string): s is Variant => variants.has(s);
@@ -169,11 +161,7 @@ function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
 		],
 	};
 
-	const docsCollectionPath = getRemarkRehypeDocsCollectionPath(options.astroConfig.srcDir);
-
 	const transformer: Transformer<Root> = (tree, file) => {
-		if (!shouldTransformFile(file, docsCollectionPath)) return;
-
 		const lang = options.absolutePathToLang(file.path);
 		const t = options.useTranslations(lang);
 		visit(tree, (node, index, parent) => {
@@ -253,12 +241,6 @@ function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
 	};
 }
 
-type RemarkPlugins = NonNullable<NonNullable<AstroUserConfig['markdown']>['remarkPlugins']>;
-
-export function starlightAsides(options: AsidesOptions): RemarkPlugins {
-	return [remarkDirective, remarkAsides(options)];
-}
-
 export function remarkDirectivesRestoration() {
 	return function transformer(tree: Root) {
 		visit(tree, (node, index, parent) => {

package/integrations/code-rtl-support.ts

@@ -1,12 +1,7 @@
-import type { AstroConfig } from 'astro';
 import type { Root } from 'hast';
 import { CONTINUE, SKIP, visit } from 'unist-util-visit';
-import type { VFile } from 'vfile';
-import { getRemarkRehypeDocsCollectionPath, shouldTransformFile } from './remark-rehype-utils';
-
-interface RtlCodeSupportOptions {
-	astroConfig: Pick<AstroConfig, 'srcDir'>;
-}
+import type { Transformer } from 'unified';
+import type { RemarkRehypePluginOptions } from './remark-rehype';
 
 /**
  * rehype plugin that adds `dir` attributes to `<code>` and `<pre>`
@@ -22,13 +17,9 @@ interface RtlCodeSupportOptions {
  * - `<code>` is often LTR, but could also be RTL. `dir="auto"` ensures the bidirectional
  *   algorithm treats the contents of `<code>` in isolation and gives its best guess.
  */
-export function rehypeRtlCodeSupport({ astroConfig }: RtlCodeSupportOptions) {
-	const docsCollectionPath = getRemarkRehypeDocsCollectionPath(astroConfig.srcDir);
-
-	return () => (root: Root, file: VFile) => {
-		if (!shouldTransformFile(file, docsCollectionPath)) return;
-
-		visit(root, 'element', (el) => {
+export function rehypeRtlCodeSupport(_options: RemarkRehypePluginOptions) {
+	const transformer: Transformer<Root> = (tree) => {
+		visit(tree, 'element', (el) => {
 			if (el.tagName === 'pre' || el.tagName === 'code') {
 				el.properties ||= {};
 				if (!('dir' in el.properties)) {
@@ -39,4 +30,8 @@ export function rehypeRtlCodeSupport({ astroConfig }: RtlCodeSupportOptions) {
 			return CONTINUE;
 		});
 	};
+
+	return function attacher() {
+		return transformer;
+	};
 }

package/integrations/heading-links.ts

@@ -1,12 +1,9 @@
-import { rehypeHeadingIds } from '@astrojs/markdown-remark';
-import type { AstroConfig, AstroUserConfig } from 'astro';
 import type { Nodes, Root } from 'hast';
 import { toString } from 'hast-util-to-string';
 import { h } from 'hastscript';
 import type { Transformer } from 'unified';
 import { SKIP, visit } from 'unist-util-visit';
-import type { HookParameters, StarlightConfig } from '../types';
-import { getRemarkRehypeDocsCollectionPath, shouldTransformFile } from './remark-rehype-utils';
+import type { RemarkRehypePluginOptions } from './remark-rehype';
 
 const AnchorLinkIcon = h(
 	'span',
@@ -24,16 +21,13 @@ const AnchorLinkIcon = h(
 /**
  * Add anchor links to headings.
  */
-export default function rehypeAutolinkHeadings(
-	docsCollectionPath: string,
-	useTranslationsForLang: AutolinkHeadingsOptions['useTranslations'],
-	absolutePathToLang: AutolinkHeadingsOptions['absolutePathToLang']
-) {
+export default function rehypeAutolinkHeadings({
+	absolutePathToLang,
+	useTranslations,
+}: RemarkRehypePluginOptions) {
 	const transformer: Transformer<Root> = (tree, file) => {
-		if (!shouldTransformFile(file, docsCollectionPath)) return;
-
 		const pageLang = absolutePathToLang(file.path);
-		const t = useTranslationsForLang(pageLang);
+		const t = useTranslations(pageLang);
 
 		visit(tree, 'element', function (node, index, parent) {
 			if (!headingRank(node) || !node.properties.id || typeof index !== 'number' || !parent) {
@@ -69,36 +63,6 @@ export default function rehypeAutolinkHeadings(
 	};
 }
 
-interface AutolinkHeadingsOptions {
-	starlightConfig: Pick<StarlightConfig, 'markdown'>;
-	astroConfig: Pick<AstroConfig, 'srcDir'> & {
-		experimental: Pick<AstroConfig['experimental'], 'headingIdCompat'>;
-	};
-	useTranslations: HookParameters<'config:setup'>['useTranslations'];
-	absolutePathToLang: HookParameters<'config:setup'>['absolutePathToLang'];
-}
-type RehypePlugins = NonNullable<NonNullable<AstroUserConfig['markdown']>['rehypePlugins']>;
-
-export const starlightAutolinkHeadings = ({
-	starlightConfig,
-	astroConfig,
-	useTranslations,
-	absolutePathToLang,
-}: AutolinkHeadingsOptions): RehypePlugins =>
-	starlightConfig.markdown.headingLinks
-		? [
-				[
-					rehypeHeadingIds,
-					{ experimentalHeadingIdCompat: astroConfig.experimental?.headingIdCompat },
-				],
-				rehypeAutolinkHeadings(
-					getRemarkRehypeDocsCollectionPath(astroConfig.srcDir),
-					useTranslations,
-					absolutePathToLang
-				),
-			]
-		: [];
-
 // This utility is inlined from https://github.com/syntax-tree/hast-util-heading-rank
 // Copyright (c) 2020 Titus Wormer <tituswormer@gmail.com>
 // MIT License: https://github.com/syntax-tree/hast-util-heading-rank/blob/main/license

package/integrations/remark-rehype.ts

@@ -0,0 +1,126 @@
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { AstroConfig } from 'astro';
+import { rehypeHeadingIds } from '@astrojs/markdown-remark';
+import type { Root as RehypeRoot } from 'hast';
+import type { Root as RemarkRoot } from 'mdast';
+import remarkDirective from 'remark-directive';
+import type { Plugin } from 'unified';
+import type { VFile } from 'vfile';
+import { resolveCollectionPath } from '../utils/collection-fs';
+import type { HookParameters, StarlightConfig } from '../types';
+import { remarkAsides } from './asides';
+import { rehypeRtlCodeSupport } from './code-rtl-support';
+import rehypeAutolinkHeadings from './heading-links';
+
+/** List of remark plugins to apply. */
+export function starlightRemarkPlugins(options: RemarkRehypePluginOptions): RemarkPlugin[] {
+	return [remarkDirective, remarkPlugins(options)];
+}
+
+/** List of rehype plugins to apply. */
+export function starlightRehypePlugins(options: RemarkRehypePluginOptions): RehypePlugin[] {
+	return [
+		...(options.starlightConfig.markdown.headingLinks
+			? [
+					[
+						rehypeHeadingIds,
+						{ experimentalHeadingIdCompat: options.astroConfig.experimental?.headingIdCompat },
+					],
+				]
+			: []),
+		rehypePlugins(options),
+	] as RehypePlugin[];
+}
+
+/** Remark plugin applying other Starlight remark plugins if necessary. */
+function remarkPlugins(options: RemarkRehypePluginOptions): RemarkPlugin {
+	const remarkRehypePaths = getRemarkRehypePaths(options);
+
+	return function attacher(this) {
+		const remarkAsidesTransformer = remarkAsides(options).call(this)!;
+
+		return async function transformer(...args) {
+			const [, file] = args;
+
+			if (!shouldTransformFile(file, remarkRehypePaths)) return;
+
+			await remarkAsidesTransformer(...args);
+		};
+	};
+}
+
+/** Rehype plugin applying other Starlight rehype plugins if necessary. */
+function rehypePlugins(options: RemarkRehypePluginOptions): RehypePlugin {
+	const remarkRehypePaths = getRemarkRehypePaths(options);
+
+	return function attacher(this) {
+		const rehypeRtlCodeSupportTransformer = rehypeRtlCodeSupport(options).call(this);
+		const rehypeAutolinkHeadingsTransformer = rehypeAutolinkHeadings(options).call(this);
+
+		return async function transformer(...args) {
+			const [, file] = args;
+
+			if (!shouldTransformFile(file, remarkRehypePaths)) return;
+
+			await rehypeRtlCodeSupportTransformer(...args);
+
+			if (options.starlightConfig.markdown.headingLinks) {
+				await rehypeAutolinkHeadingsTransformer(...args);
+			}
+		};
+	};
+}
+
+/**
+ * Returns the paths to the Starlight docs collection and any additional paths defined in the
+ * `starlightConfig.markdown.processedDirs` option that can be used with the
+ * `shouldTransformFile()` utility to determine if a file should be transformed by a plugin or not.
+ */
+function getRemarkRehypePaths(options: RemarkRehypePluginOptions): string[] {
+	const paths = [normalizePath(resolveCollectionPath('docs', options.astroConfig.srcDir))];
+
+	for (const processedDir of options.starlightConfig.markdown.processedDirs) {
+		paths.push(normalizePath(resolve(fileURLToPath(options.astroConfig.root), processedDir)));
+	}
+
+	return paths;
+}
+
+/**
+ * Determines if a file should be transformed by a remark/rehype plugin, e.g. files without a known
+ * path or files that are not part of the allowed remark/rehype paths are skipped.
+ */
+function shouldTransformFile(file: VFile, remarkRehypePaths: string[]) {
+	// If the content is rendered using the content loader `renderMarkdown()` API, a file path
+	// is not provided.
+	// In that case, we skip the file.
+	if (!file?.path) return false;
+
+	const normalizedPath = normalizePath(file.path);
+
+	// If the document is not part of the allowed remark/rehype paths, skip it.
+	return remarkRehypePaths.some((path) => normalizedPath.startsWith(path));
+}
+
+/**
+ * File path separators seems to be inconsistent on Windows between remark/rehype plugins used on
+ * Markdown vs MDX files.
+ * For the time being, we normalize all paths to unix style paths.
+ */
+const backSlashRegex = /\\/g;
+function normalizePath(path: string) {
+	return path.replace(backSlashRegex, '/');
+}
+
+export interface RemarkRehypePluginOptions {
+	starlightConfig: Pick<StarlightConfig, 'defaultLocale' | 'locales' | 'markdown'>;
+	astroConfig: Pick<AstroConfig, 'root' | 'srcDir'> & {
+		experimental: Pick<AstroConfig['experimental'], 'headingIdCompat'>;
+	};
+	useTranslations: HookParameters<'config:setup'>['useTranslations'];
+	absolutePathToLang: HookParameters<'config:setup'>['absolutePathToLang'];
+}
+
+type RemarkPlugin = Plugin<[], RemarkRoot>;
+type RehypePlugin = Plugin<[], RehypeRoot>;

package/integrations/vite-layer-order.ts

@@ -0,0 +1,66 @@
+import type { ViteUserConfig } from 'astro';
+import MagicString from 'magic-string';
+
+const starlightPageImportSource = '@astrojs/starlight/components/StarlightPage.astro';
+
+/**
+ * Vite plugin that ensures the StarlightPage component is always imported first when imported in
+ * an Astro file.
+ *
+ * This is necessary to ensure a predictable CSS layer order which is defined by the `<Page />`
+ * imported by the `<StarlightPage />` component. If a user imports any other component using
+ * cascade layers before the `<StarlightPage />` component, it will result in undesired layers
+ * being created before we explicitly set the expected layer order.
+ */
+export function vitePluginStarlightCssLayerOrder(): VitePlugin {
+	return {
+		name: 'vite-plugin-starlight-css-layer-order',
+		enforce: 'pre',
+		transform(code, id) {
+			if (
+				!id.endsWith('.astro') ||
+				id.endsWith(starlightPageImportSource) ||
+				code.indexOf('StarlightPage.astro') === -1
+			) {
+				return;
+			}
+
+			let ast: ReturnType<typeof this.parse>;
+
+			try {
+				ast = this.parse(code);
+			} catch {
+				return;
+			}
+
+			let hasStarlightPageImport = false;
+
+			for (const node of ast.body) {
+				if (node.type !== 'ImportDeclaration') continue;
+				if (node.source.value !== starlightPageImportSource) continue;
+
+				const importDefaultSpecifier = node.specifiers.find(
+					(specifier) => specifier.type === 'ImportDefaultSpecifier'
+				);
+				if (!importDefaultSpecifier) continue;
+
+				hasStarlightPageImport = true;
+				break;
+			}
+
+			if (!hasStarlightPageImport) return;
+
+			// Format path to unix style path.
+			const filename = id.replace(/\\/g, '/');
+			const ms = new MagicString(code, { filename });
+			ms.prepend(`import "${starlightPageImportSource}";\n`);
+
+			return {
+				code: ms.toString(),
+				map: ms.generateMap({ hires: 'boundary' }),
+			};
+		},
+	};
+}
+
+type VitePlugin = NonNullable<ViteUserConfig['plugins']>[number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.36.3",
+  "version": "0.37.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -204,6 +204,7 @@
     "i18next": "^23.11.5",
     "js-yaml": "^4.1.0",
     "klona": "^2.0.6",
+    "magic-string": "^0.30.17",
     "mdast-util-directive": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.0",
     "mdast-util-to-string": "^4.0.0",

package/style/props.css

@@ -84,9 +84,9 @@
 		--sl-line-height: 1.75;
 		--sl-line-height-headings: 1.2;
 
-		--sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-			Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-			'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+		--sl-font-system: ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+			'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+			'Noto Color Emoji';
 		--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
 			'Courier New', monospace;
 		--__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system);

package/style/reset.css

@@ -41,7 +41,7 @@
 	h5,
 	h6,
 	code {
-		overflow-wrap: anywhere;
+		overflow-wrap: break-word;
 	}
 
 	code {

package/user-components/Tabs.astro

@@ -116,23 +116,23 @@ if (isSynced) {
 
 		.tab {
 			display: flex;
-			margin-bottom: -2px;
 		}
 		.tab > [role='tab'] {
+			--sl-tab-color-border: var(--sl-color-gray-5);
 			display: flex;
 			align-items: center;
 			gap: 0.5rem;
 			line-height: var(--sl-line-height-headings);
 			padding: 0.275rem 1.25rem;
 			text-decoration: none;
-			border-bottom: 2px solid var(--sl-color-gray-5);
+			box-shadow: 0 2px 0 var(--sl-tab-color-border);
 			color: var(--sl-color-gray-3);
 			outline-offset: var(--sl-outline-offset-inside);
 			overflow-wrap: initial;
 		}
 		.tab [role='tab'][aria-selected='true'] {
+			--sl-tab-color-border: var(--sl-color-text-accent);
 			color: var(--sl-color-white);
-			border-color: var(--sl-color-text-accent);
 			font-weight: 600;
 		}
 

package/utils/user-config.ts

@@ -272,6 +272,19 @@ const UserConfigSchema = z.object({
 				.describe(
 					'Define whether headings in content should be rendered with clickable anchor links. Default: `true`.'
 				),
+			/**
+			 * Define additional directories where files should be processed by Starlight’s Markdown pipeline.
+			 *
+			 * Supports local directories relative to the root of your project, e.g. './src/data/comments/'.
+			 * Content of the `docs` content collection is always processed by Starlight’s Markdown pipeline.
+			 */
+			processedDirs: z
+				.string()
+				.array()
+				.default([])
+				.describe(
+					'Define additional directories where files should be processed by Starlight’s Markdown pipeline. Default: `[]`.'
+				),
 		})
 		.default({})
 		.describe('Configure features that impact Starlight’s Markdown processing.'),

package/integrations/remark-rehype-utils.ts

@@ -1,38 +0,0 @@
-import type { AstroConfig } from 'astro';
-import type { VFile } from 'vfile';
-import { resolveCollectionPath } from '../utils/collection-fs';
-
-/**
- * Returns the path to the Starlight docs collection ready to be used in remark/rehype plugins,
- * e.g. with the `shouldTransformFile()` utility to determine if a file should be transformed
- * by a plugin or not.
- */
-export function getRemarkRehypeDocsCollectionPath(srcDir: AstroConfig['srcDir']) {
-	return normalizePath(resolveCollectionPath('docs', srcDir));
-}
-
-/**
- * Determines if a file should be transformed by a remark/rehype plugin, e.g. files without a known
- * path or files that are not part of the Starlight docs collection should be skipped.
- */
-export function shouldTransformFile(file: VFile, docsCollectionPath: string) {
-	// If the content is rendered using the content loader `renderMarkdown()` API, a file path
-	// is not provided.
-	// In that case, we skip the file.
-	if (!file?.path) return false;
-
-	// If the document is not part of the Starlight docs collection, skip it.
-	if (!normalizePath(file.path).startsWith(docsCollectionPath)) return false;
-
-	return true;
-}
-
-/**
- * File path separators seems to be inconsistent on Windows between remark/rehype plugins used on
- * Markdown vs MDX files.
- * For the time being, we normalize all paths to unix style paths.
- */
-const backSlashRegex = /\\/g;
-function normalizePath(path: string) {
-	return path.replace(backSlashRegex, '/');
-}