@astrojs/starlight 0.17.0 → 0.17.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @astrojs/starlight
 
+## 0.17.2
+
+### Patch Changes
+
+- [#1442](https://github.com/withastro/starlight/pull/1442) [`1a642e4`](https://github.com/withastro/starlight/commit/1a642e4d74ee4c30e85bce37b41888b1eae0544a) Thanks [@delucis](https://github.com/delucis)! - Fixes URLs in language picker for sites with `build.format: 'file'`
+
+- [#1440](https://github.com/withastro/starlight/pull/1440) [`2ea1e88`](https://github.com/withastro/starlight/commit/2ea1e883186660b48f0ea8c4da7fead5fb74e313) Thanks [@hippotastic](https://github.com/hippotastic)! - Adds JS support to the `@astrojs/starlight/expressive-code` export to allow importing from non-TS environments.
+
+## 0.17.1
+
+### Patch Changes
+
+- [#1437](https://github.com/withastro/starlight/pull/1437) [`655aed4`](https://github.com/withastro/starlight/commit/655aed4840cae59e9abd64b4b585e60f1cfab209) Thanks [@hippotastic](https://github.com/hippotastic)! - Adds Starlight-specific types to `defineEcConfig` function and exports `StarlightExpressiveCodeOptions`.
+
+  This provides Starlight types and IntelliSense support for your Expressive Code configuration options inside an `ec.config.mjs` file. See the [Expressive Code documentation](https://expressive-code.com/key-features/code-component/#using-an-ecconfigmjs-file) for more information.
+
+- [#1420](https://github.com/withastro/starlight/pull/1420) [`275f87f`](https://github.com/withastro/starlight/commit/275f87fd7fc676b9ab323354078c06894e0832c7) Thanks [@abdelhalimjean](https://github.com/abdelhalimjean)! - Fix rare `font-family` issue if users have a font installed with a name of `""`
+
+- [#1365](https://github.com/withastro/starlight/pull/1365) [`a0af7cc`](https://github.com/withastro/starlight/commit/a0af7cc696da987a76edab96cdd2329779e87724) Thanks [@kevinzunigacuellar](https://github.com/kevinzunigacuellar)! - Correctly format Pagefind search result links when `trailingSlash: 'never'` is used
+
 ## 0.17.0
 
 ### Minor Changes

package/components/Search.astro

@@ -1,6 +1,7 @@
 ---
 import '@pagefind/default-ui/css/ui.css';
 import Icon from '../user-components/Icon.astro';
+import project from 'virtual:starlight/project-context';
 import type { Props } from '../props';
 
 const { labels } = Astro.props;
@@ -15,7 +16,10 @@ const pagefindTranslations = {
 };
 ---
 
-<site-search data-translations={JSON.stringify(pagefindTranslations)}>
+<site-search
+	data-translations={JSON.stringify(pagefindTranslations)}
+	data-strip-trailing-slash={project.trailingSlash === 'never'}
+>
 	<button data-open-modal disabled>
 		{
 			/* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
@@ -112,10 +116,15 @@ const pagefindTranslations = {
 				translations = JSON.parse(this.dataset.translations || '{}');
 			} catch {}
 
+			const shouldStrip = this.dataset.stripTrailingSlash !== undefined;
+			const stripTrailingSlash = (path: string) => path.replace(/(.)\/(#.*)?$/, '$1$2');
+			const formatURL = shouldStrip ? stripTrailingSlash : (path: string) => path;
+
 			window.addEventListener('DOMContentLoaded', () => {
 				if (import.meta.env.DEV) return;
 				const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
 				onIdle(async () => {
+					// @ts-expect-error — Missing types for @pagefind/default-ui package.
 					const { PagefindUI } = await import('@pagefind/default-ui');
 					new PagefindUI({
 						element: '#starlight__search',
@@ -124,6 +133,13 @@ const pagefindTranslations = {
 						showImages: false,
 						translations,
 						showSubResults: true,
+						processResult: (result: { url: string; sub_results: Array<{ url: string }> }) => {
+							result.url = formatURL(result.url);
+							result.sub_results = result.sub_results.map((sub_result) => {
+								sub_result.url = formatURL(sub_result.url);
+								return sub_result;
+							});
+						},
 					});
 				});
 			});

package/expressive-code.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file This file provides the types for Starlight's `@astrojs/starlight/expressive-code` export.
+ */
+
+export * from 'astro-expressive-code';
+
+import type { StarlightExpressiveCodeOptions } from './integrations/expressive-code';
+
+export type { StarlightExpressiveCodeOptions };
+
+/**
+ * A utility function that helps you define an Expressive Code configuration object. It is meant
+ * to be used inside the optional config file `ec.config.mjs` located in the root directory
+ * of your Starlight project, and its return value to be exported as the default export.
+ *
+ * Expressive Code will automatically detect this file and use the exported configuration object
+ * to override its own default settings.
+ *
+ * Using this function is recommended, but not required. It just passes through the given object,
+ * but it also provides type information for your editor's auto-completion and type checking.
+ *
+ * @example
+ * ```js
+ * // ec.config.mjs
+ * import { defineEcConfig } from '@astrojs/starlight/expressive-code'
+ *
+ * export default defineEcConfig({
+ *   themes: ['starlight-dark', 'github-light'],
+ *   styleOverrides: {
+ *     borderRadius: '0.5rem',
+ *   },
+ * })
+ * ```
+ */
+export function defineEcConfig(
+	config: StarlightExpressiveCodeOptions
+): StarlightExpressiveCodeOptions;

package/expressive-code.mjs

@@ -0,0 +1,21 @@
+/**
+ * @file This file is exported by Starlight as `@astrojs/starlight/expressive-code`.
+ *
+ * It is required by the `<Code>` component to access the same configuration preprocessor
+ * function as the one used by the integration.
+ *
+ * It also provides access to all of the Expressive Code classes and functions without having
+ * to install `astro-expressive-code` as an additional dependency into a user's project
+ * (and thereby risiking version conflicts).
+ *
+ * Note: This file is intentionally not a TypeScript module to allow access to all exported
+ * functionality even if TypeScript is not available, e.g. from the `ec.config.mjs` file
+ * that does not get processed by Vite.
+ */
+
+export * from 'astro-expressive-code';
+
+// @ts-ignore - Types are provided by the separate `expressive-code.d.ts` file
+export function defineEcConfig(config) {
+	return config;
+}

package/integrations/expressive-code/index.ts

@@ -179,8 +179,7 @@ export const starlightExpressiveCode = ({
 				}),
 				preprocessComponentConfig: `
 					import starlightConfig from 'virtual:starlight/user-config'
-					import { useTranslations } from '@astrojs/starlight/internal'
-					import { getStarlightEcConfigPreprocessor } from '@astrojs/starlight/expressive-code'
+					import { useTranslations, getStarlightEcConfigPreprocessor } from '@astrojs/starlight/internal'
 
 					export default getStarlightEcConfigPreprocessor({ starlightConfig, useTranslations })
 				`,

package/internal.ts

@@ -1 +1,6 @@
+/**
+ * @file This file contains utility functions imported by the `<Code>` component.
+ */
+
 export { useTranslations } from './utils/translations';
+export { getStarlightEcConfigPreprocessor } from './integrations/expressive-code';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -154,7 +154,10 @@
     "./props": "./props.ts",
     "./schema": "./schema.ts",
     "./types": "./types.ts",
-    "./expressive-code": "./integrations/expressive-code/exports.ts",
+    "./expressive-code": {
+      "types": "./expressive-code.d.ts",
+      "default": "./expressive-code.mjs"
+    },
     "./index.astro": "./index.astro",
     "./404.astro": "./404.astro",
     "./style/markdown.css": "./style/markdown.css"
@@ -165,9 +168,9 @@
   "devDependencies": {
     "@astrojs/markdown-remark": "^4.0.1",
     "@types/node": "^18.16.19",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/coverage-v8": "^1.2.2",
     "astro": "^4.2.1",
-    "vitest": "^0.33.0"
+    "vitest": "^1.2.2"
   },
   "dependencies": {
     "@astrojs/mdx": "^2.0.4",

package/style/props.css

@@ -87,8 +87,8 @@
 		'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);
-	--__sl-font-mono: var(--sl-font-mono, ''), var(--sl-font-system-mono);
+	--__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system);
+	--__sl-font-mono: var(--sl-font-mono, var(--sl-font-system-mono)), var(--sl-font-system-mono);
 
 	/** Key layout values */
 	--sl-nav-height: 3.5rem;

package/utils/localizedUrl.ts

@@ -17,14 +17,26 @@ export function localizedUrl(url: URL, locale: string | undefined): URL {
 	// Temporarily remove base to simplify
 	if (hasBase) url.pathname = url.pathname.replace(base, '');
 	const [_leadingSlash, baseSegment] = url.pathname.split('/');
-	if (baseSegment && baseSegment in config.locales) {
+	// Strip .html extension to handle file output builds where URL might be e.g. `/en.html`
+	const htmlExt = '.html';
+	const isRootHtml = baseSegment?.endsWith(htmlExt);
+	const baseSlug = isRootHtml ? baseSegment?.slice(0, -1 * htmlExt.length) : baseSegment;
+	if (baseSlug && baseSlug in config.locales) {
 		// We’re in a localized route, substitute the new locale (or strip for root lang).
-		url.pathname = locale
-			? url.pathname.replace(baseSegment, locale)
-			: url.pathname.replace('/' + baseSegment, '');
+		if (locale) {
+			url.pathname = url.pathname.replace(baseSlug, locale);
+		} else if (isRootHtml) {
+			url.pathname = '/index.html';
+		} else {
+			url.pathname = url.pathname.replace('/' + baseSlug, '');
+		}
 	} else if (locale) {
 		// We’re in the root language. Inject the new locale if we have one.
-		url.pathname = '/' + locale + url.pathname;
+		if (baseSegment === 'index.html') {
+			url.pathname = '/' + locale + '.html';
+		} else {
+			url.pathname = '/' + locale + url.pathname;
+		}
 	}
 	// Restore base
 	if (hasBase) url.pathname = base + url.pathname;

package/integrations/expressive-code/exports.ts

@@ -1,38 +0,0 @@
-/**
- * @file This file is exported by Starlight as `@astrojs/starlight/expressive-code`
- * and can be used in your site's configuration to customize Expressive Code.
- *
- * It provides access to all of the Expressive Code classes and functions without having
- * to install `astro-expressive-code` as an additional dependency into your project
- * (and thereby risiking version conflicts).
- *
- * For example, you can use this to load custom themes from a JSONC file (JSON with comments)
- * that would otherwise be difficult to import, and pass them to the `themes` option:
- *
- * @example
- * ```js
- * // astro.config.mjs
- * import fs from 'node:fs';
- * import { defineConfig } from 'astro/config';
- * import starlight from '@astrojs/starlight';
- * import { ExpressiveCodeTheme } from '@astrojs/starlight/expressive-code';
- *
- * const jsoncString = fs.readFileSync(new URL(`./my-theme.jsonc`, import.meta.url), 'utf-8');
- * const myTheme = ExpressiveCodeTheme.fromJSONString(jsoncString);
- *
- * export default defineConfig({
- *   integrations: [
- *     starlight({
- *       title: 'My Starlight site',
- *       expressiveCode: {
- *         themes: [myTheme],
- *       },
- *     }),
- *   ],
- * });
- * ```
- */
-
-export * from 'astro-expressive-code';
-
-export { getStarlightEcConfigPreprocessor } from './index';