@astrojs/starlight 0.22.3 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @astrojs/starlight
 
+## 0.23.0
+
+### Minor Changes
+
+- [#1846](https://github.com/withastro/starlight/pull/1846) [`2de67039`](https://github.com/withastro/starlight/commit/2de6703971908cfc0df2915ebf89a63e0141f954) Thanks [@delucis](https://github.com/delucis)! - Updates `@astrojs/mdx` to v3 and enables MDX optimization by default
+
+  ⚠️ **Potentially breaking change:** MDX optimization speeds up builds (Starlight’s docs are building ~40% faster for example), but restricts some advanced MDX features. See full details in the [MDX optimization documentation](https://docs.astro.build/en/guides/integrations-guide/mdx/#optimize).
+
+  Most Starlight users should be unaffected, but if you are using MDX files outside of Starlight pages with the `components` prop, you may see issues. You can disable optimization by adding MDX manually to your `integrations` array in `astro.config.mjs`:
+
+  ```diff
+  import { defineConfig } from 'astro/config';
+  + import mdx from '@astrojs/mdx';
+  import starlight from '@astrojs/starlight';
+
+  // https://astro.build/config
+  export default defineConfig({
+  	integrations: [
+  		starlight({
+  			title: 'My docs',
+  			// ...
+  		}),
+  +		mdx(),
+  	],
+  });
+  ```
+
+- [#1735](https://github.com/withastro/starlight/pull/1735) [`1a9ab50d`](https://github.com/withastro/starlight/commit/1a9ab50d458d6274994ffe66a23fe7a30681337a) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds custom styles for `<details>` and `<summary>` elements in Markdown content.
+
+- [#1846](https://github.com/withastro/starlight/pull/1846) [`2de67039`](https://github.com/withastro/starlight/commit/2de6703971908cfc0df2915ebf89a63e0141f954) Thanks [@delucis](https://github.com/delucis)! - ⚠️ **BREAKING CHANGE:** The minimum supported version of Astro is now 4.8.6
+
+  Please update Astro and Starlight together:
+
+  ```sh
+  npx @astrojs/upgrade
+  ```
+
+## 0.22.4
+
+### Patch Changes
+
+- [#1871](https://github.com/withastro/starlight/pull/1871) [`03bb126b`](https://github.com/withastro/starlight/commit/03bb126b74d9adaba1be2f0df3f34566815dd77f) Thanks [@delucis](https://github.com/delucis)! - Adds a `blueSky` icon and social link option
+
+- [#1873](https://github.com/withastro/starlight/pull/1873) [`13f33b81`](https://github.com/withastro/starlight/commit/13f33b81fd51d18165eb52f2a0c02b890084e4bd) Thanks [@ekfuhrmann](https://github.com/ekfuhrmann)! - Adds 1 new icon: `alpine`
+
+- [#1857](https://github.com/withastro/starlight/pull/1857) [`32cdfaf0`](https://github.com/withastro/starlight/commit/32cdfaf0155e65ff6fbe9c0cfacd6969ab0015d9) Thanks [@tarikcoskun](https://github.com/tarikcoskun)! - Updates Turkish UI translations
+
+- [#1736](https://github.com/withastro/starlight/pull/1736) [`cfa94a34`](https://github.com/withastro/starlight/commit/cfa94a346ef10804b90db28d217be175e1c1d5ed) Thanks [@julien-deramond](https://github.com/julien-deramond)! - Prevent list items from overflowing Markdown content
+
 ## 0.22.3
 
 ### Patch Changes

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.3.5_@types+node@18.16.19_typescript@5.4.5/node_modules/astro/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.3.5_@types+node@18.16.19_typescript@5.4.5/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.8.6_@types+node@18.16.19_typescript@5.4.5/node_modules/astro/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.8.6_@types+node@18.16.19_typescript@5.4.5/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.3.5_@types+node@18.16.19_typescript@5.4.5/node_modules/astro/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.3.5_@types+node@18.16.19_typescript@5.4.5/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.8.6_@types+node@18.16.19_typescript@5.4.5/node_modules/astro/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.8.6_@types+node@18.16.19_typescript@5.4.5/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -4,6 +4,6 @@
   "private": true,
   "dependencies": {
     "@astrojs/starlight": "workspace:*",
-    "astro": "^4.3.5"
+    "astro": "^4.8.6"
   }
 }

package/components/Icons.ts

@@ -119,8 +119,11 @@ export const BuiltInIcons = {
 		'<path d="M7.2 0Q6.5 0 6 .3a1 1 0 0 0-.4.8v21.8q0 .4.4.7.5.4 1.2.4t1.2-.3q.5-.4.5-.8V1c0-.3-.2-.6-.5-.8Q7.9 0 7.2 0m9.5 8.7q-.7 0-1.1.3L11 11.7c-.2.2-.3.5-.2.9q0 .6.5 1c.3.4.7.7 1 .7q.7.2 1-.1l1.7-1v9.7q0 .4.5.7c.3.3.7.4 1.1.4q.7 0 1.2-.3c.4-.3.5-.5.5-.8V9.7q0-.4-.5-.7-.4-.3-1.2-.3"/>',
 	openCollective:
 		'<path d="M21.86 5.17a11.94 11.94 0 0 1 0 13.66l-3.1-3.1a7.68 7.68 0 0 0 0-7.46l3.1-3.1Zm-3.03-3.03-3.1 3.1a7.71 7.71 0 1 0 0 13.51l3.1 3.11a12 12 0 1 1 0-19.73Z"/><path d="M21.86 5.17a11.94 11.94 0 0 1 0 13.66l-3.1-3.1a7.68 7.68 0 0 0 0-7.46l3.1-3.1Z"/>',
+	blueSky:
+		'<path d="M12 10.8c-1-2.1-4-6-6.8-8C2.6 1 1.6 1.3.9 1.6.1 1.9 0 3 0 3.8c0 .7.4 5.6.6 6.4C1.4 13 4.3 14 7 13.6h.4H7c-4 .6-7.4 2-2.8 7 5 5.3 6.8-1 7.8-4.2 1 3.2 2 9.3 7.7 4.3 4.3-4.3 1.2-6.5-2.7-7a9 9 0 0 1-.4-.1h.4c2.7.3 5.6-.6 6.4-3.4.2-.8.6-5.7.6-6.4 0-.7-.1-1.9-.9-2.2-.7-.3-1.7-.7-4.3 1.2-2.8 2-5.7 5.9-6.8 8"/>',
 	astro:
 		'<path d="M7.233 15.856c-.456 1.5-.132 3.586.948 4.57v-.036l.036-.096c.132-.636.648-1.032 1.309-1.008.612.012.96.336 1.044 1.044.036.264.036.528.048.803v.084c0 .6.168 1.176.504 1.68.3.48.72.851 1.284 1.103l-.024-.048-.024-.096c-.42-1.26-.12-2.135.984-2.879l.336-.227.745-.492a3.647 3.647 0 0 0 1.536-2.603c.06-.456 0-.9-.132-1.331l-.18.12c-1.668.887-3.577 1.2-5.425.84-1.117-.169-2.197-.48-3-1.416l.011-.012ZM2 15.592s3.205-1.559 6.421-1.559l2.437-7.508c.084-.36.348-.6.648-.6.3 0 .552.24.648.612l2.425 7.496c3.816 0 6.421 1.56 6.421 1.56L15.539.72c-.144-.444-.42-.72-.768-.72H8.24c-.348 0-.6.276-.768.72L2 15.592Z"/>',
+	alpine: '<path d="m18.7 6 5.3 5.3-5.3 5.3-5.4-5.3L18.7 6zM5.3 6l11 11H5.8L0 11.2 5.3 6z"/>',
 	pnpm: '<path d="M0 0v7.5h7.5V0H0Zm8.25 0v7.5h7.498V0H8.25Zm8.25 0v7.5H24V0h-7.5ZM8.25 8.25v7.5h7.498v-7.5H8.25Zm8.25 0v7.5H24v-7.5h-7.5ZM0 16.5V24h7.5v-7.5H0Zm8.25 0V24h7.498v-7.5H8.25Zm8.25 0V24H24v-7.5h-7.5Z"/>',
 	biome:
 		'<path d="m12 2-5.346 9.259a12.065 12.065 0 0 1 6.326-.22l1.807.427-1.7 7.208-1.81-.427c-2.223-.524-4.36.644-5.263 2.507l-1.672-.809c1.276-2.636 4.284-4.232 7.363-3.505l.848-3.593A10.213 10.213 0 0 0 0 22.785h24L12 2Z"/>',

package/index.ts

@@ -63,10 +63,17 @@ export default function StarlightIntegration({
 					integrations.push(starlightSitemap(starlightConfig));
 				}
 				if (!allIntegrations.find(({ name }) => name === '@astrojs/mdx')) {
-					integrations.push(mdx());
+					integrations.push(mdx({ optimize: true }));
 				}
+
+				// Add integrations immediately after Starlight in the config array.
+				// e.g. if a user has `integrations: [starlight(), tailwind()]`, then the order will be
+				// `[starlight(), expressiveCode(), sitemap(), mdx(), tailwind()]`.
+				// This ensures users can add integrations before/after Starlight and we respect that order.
+				const selfIndex = config.integrations.findIndex((i) => i.name === '@astrojs/starlight');
+				config.integrations.splice(selfIndex + 1, 0, ...integrations);
+
 				updateConfig({
-					integrations,
 					vite: {
 						plugins: [vitePluginStarlightUserConfig(starlightConfig, config)],
 					},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.22.3",
+  "version": "0.23.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -175,18 +175,18 @@
     "./style/markdown.css": "./style/markdown.css"
   },
   "peerDependencies": {
-    "astro": "^4.2.7"
+    "astro": "^4.8.6"
   },
   "devDependencies": {
     "@astrojs/markdown-remark": "^4.2.1",
     "@playwright/test": "^1.43.1",
     "@types/node": "^18.16.19",
-    "@vitest/coverage-v8": "^1.3.1",
-    "astro": "^4.3.5",
-    "vitest": "^1.3.1"
+    "@vitest/coverage-v8": "^1.6.0",
+    "astro": "^4.8.6",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.1.1",
+    "@astrojs/mdx": "^3.0.0",
     "@astrojs/sitemap": "^3.0.5",
     "@pagefind/default-ui": "^1.0.3",
     "@types/hast": "^3.0.3",

package/schemas/social.ts

@@ -29,6 +29,7 @@ export const socialLinks = [
 	'matrix',
 	'openCollective',
 	'hackerOne',
+	'blueSky',
 ] as const;
 
 export const SocialLinksSchema = () =>
@@ -73,6 +74,7 @@ export const SocialLinksSchema = () =>
 					matrix: 'Matrix',
 					openCollective: 'Open Collective',
 					hackerOne: 'Hacker One',
+					blueSky: 'BlueSky',
 				}[key];
 				labelledLinks[key] = { label, url };
 			}

package/style/asides.css

@@ -1,26 +1,26 @@
 .starlight-aside {
 	padding: 1rem;
-	border-inline-start: 0.25rem solid;
+	border-inline-start: 0.25rem solid var(--sl-color-asides-border);
 	color: var(--sl-color-white);
 }
 .starlight-aside--note {
 	--sl-color-asides-text-accent: var(--sl-color-blue-high);
-	border-color: var(--sl-color-blue);
+	--sl-color-asides-border: var(--sl-color-blue);
 	background-color: var(--sl-color-blue-low);
 }
 .starlight-aside--tip {
 	--sl-color-asides-text-accent: var(--sl-color-purple-high);
-	border-color: var(--sl-color-purple);
+	--sl-color-asides-border: var(--sl-color-purple);
 	background-color: var(--sl-color-purple-low);
 }
 .starlight-aside--caution {
 	--sl-color-asides-text-accent: var(--sl-color-orange-high);
-	border-color: var(--sl-color-orange);
+	--sl-color-asides-border: var(--sl-color-orange);
 	background-color: var(--sl-color-orange-low);
 }
 .starlight-aside--danger {
 	--sl-color-asides-text-accent: var(--sl-color-red-high);
-	border-color: var(--sl-color-red);
+	--sl-color-asides-border: var(--sl-color-red);
 	background-color: var(--sl-color-red-low);
 }
 

package/style/markdown.css

@@ -18,6 +18,10 @@
 	margin-top: 0.25rem;
 }
 
+.sl-markdown-content li:not(:where(.not-content *)) {
+	overflow-wrap: anywhere;
+}
+
 .sl-markdown-content
 	li
 	> :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) {
@@ -113,3 +117,73 @@
 	border: 0;
 	border-bottom: 1px solid var(--sl-color-hairline);
 }
+
+/* <details> and <summary> styles */
+.sl-markdown-content details:not(:where(.not-content *)) {
+	--sl-details-border-color: var(--sl-color-gray-5);
+
+	border-inline-start: 2px solid var(--sl-details-border-color);
+	padding-inline-start: 1rem;
+}
+.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
+.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
+	--sl-details-border-color: var(--sl-color-text-accent);
+}
+.sl-markdown-content summary:not(:where(.not-content *)) {
+	color: var(--sl-color-white);
+	cursor: pointer;
+	display: block; /* Needed to hide the default marker in some browsers. */
+	font-weight: 600;
+	/* Expand the outline so that the marker cannot distort it. */
+	margin-inline-start: -0.5rem;
+	padding-inline-start: 0.5rem;
+}
+.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
+	margin-bottom: 1rem;
+}
+
+/* <summary> marker styles */
+.sl-markdown-content summary:not(:where(.not-content *))::marker,
+.sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
+	display: none;
+}
+.sl-markdown-content summary:not(:where(.not-content *))::before {
+	--sl-details-marker-size: 1.25rem;
+
+	background-color: currentColor;
+	content: '';
+	display: inline-block;
+	height: var(--sl-details-marker-size);
+	width: var(--sl-details-marker-size);
+	margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
+	vertical-align: middle;
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+}
+@media (prefers-reduced-motion: no-preference) {
+	.sl-markdown-content summary:not(:where(.not-content *))::before {
+		transition: transform 0.2s ease-in-out;
+	}
+}
+.sl-markdown-content details[open] > summary:not(:where(.not-content *))::before {
+	transform: rotateZ(90deg);
+}
+[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before,
+.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before {
+	transform: rotateZ(180deg);
+}
+/* <summary> with only a paragraph automatically added when using MDX */
+.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
+	display: inline;
+}
+
+/* <details> styles inside asides */
+.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
+	--sl-details-border-color: var(--sl-color-asides-border);
+}
+.sl-markdown-content .starlight-aside details:not([open]):hover:not(:where(.not-content *)),
+.sl-markdown-content .starlight-aside details:has(> summary:hover):not(:where(.not-content *)) {
+	--sl-details-border-color: var(--sl-color-asides-text-accent);
+}

package/translations/tr.json

@@ -18,11 +18,11 @@
   "page.lastUpdated": "Son güncelleme:",
   "page.previousLink": "Önceki",
   "page.nextLink": "Sonraki",
-  "page.draft": "This content is a draft and will not be included in production builds.",
+  "page.draft": "Bu içerik taslaktır ve canlı sürümde bulunmayacaktır.",
   "404.text": "Sayfa bulunamadı. URL'i kontrol edin ya da arama çubuğunu kullanmayı deneyin.",
-  "aside.note": "Note",
-  "aside.tip": "Tip",
-  "aside.caution": "Caution",
-  "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "aside.note": "Not",
+  "aside.tip": "İpucu",
+  "aside.caution": "Dikkat",
+  "aside.danger": "Tehlike",
+  "fileTree.directory": "Dizin"
 }

package/user-components/Tabs.astro

@@ -65,6 +65,7 @@ const { html, panels } = processPanels(panelHtml);
 		border-bottom: 2px solid var(--sl-color-gray-5);
 		color: var(--sl-color-gray-3);
 		outline-offset: var(--sl-outline-offset-inside);
+		overflow-wrap: initial;
 	}
 	.tab [role='tab'][aria-selected='true'] {
 		color: var(--sl-color-white);

package/utils/translations.ts

@@ -4,7 +4,9 @@ import type { i18nSchemaOutput } from '../schemas/i18n';
 import { createTranslationSystem } from './createTranslationSystem';
 
 type UserI18nSchema = 'i18n' extends DataCollectionKey
-	? CollectionEntry<'i18n'>['data']
+	? CollectionEntry<'i18n'> extends { data: infer T }
+		? T
+		: i18nSchemaOutput
 	: i18nSchemaOutput;
 
 /** Get all translation data from the i18n collection, keyed by `id`, which matches locale. */