@astrojs/starlight 0.22.4 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/__e2e__/fixtures/basics/node_modules/.bin/astro +2 -2
  3. package/__e2e__/fixtures/basics/package.json +1 -1
  4. package/index.ts +9 -2
  5. package/package.json +4 -4
  6. package/style/asides.css +5 -5
  7. package/style/markdown.css +70 -0
  8. package/utils/translations.ts +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,42 @@
1
1
  # @astrojs/starlight
2
2
 
3
+ ## 0.23.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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
8
+
9
+ ⚠️ **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).
10
+
11
+ 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`:
12
+
13
+ ```diff
14
+ import { defineConfig } from 'astro/config';
15
+ + import mdx from '@astrojs/mdx';
16
+ import starlight from '@astrojs/starlight';
17
+
18
+ // https://astro.build/config
19
+ export default defineConfig({
20
+ integrations: [
21
+ starlight({
22
+ title: 'My docs',
23
+ // ...
24
+ }),
25
+ + mdx(),
26
+ ],
27
+ });
28
+ ```
29
+
30
+ - [#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.
31
+
32
+ - [#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
33
+
34
+ Please update Astro and Starlight together:
35
+
36
+ ```sh
37
+ npx @astrojs/upgrade
38
+ ```
39
+
3
40
  ## 0.22.4
4
41
 
5
42
  ### Patch Changes
package/__e2e__/fixtures/basics/node_modules/.bin/astro CHANGED
@@ -6,9 +6,9 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- 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"
9
+ 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"
10
10
  else
11
- 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"
11
+ 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"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
14
  exec "$basedir/node" "$basedir/../astro/astro.js" "$@"
package/__e2e__/fixtures/basics/package.json CHANGED
@@ -4,6 +4,6 @@
4
4
  "private": true,
5
5
  "dependencies": {
6
6
  "@astrojs/starlight": "workspace:*",
7
- "astro": "^4.3.5"
7
+ "astro": "^4.8.6"
8
8
  }
9
9
  }
package/index.ts CHANGED
@@ -63,10 +63,17 @@ export default function StarlightIntegration({
63
63
  integrations.push(starlightSitemap(starlightConfig));
64
64
  }
65
65
  if (!allIntegrations.find(({ name }) => name === '@astrojs/mdx')) {
66
- integrations.push(mdx());
66
+ integrations.push(mdx({ optimize: true }));
67
67
  }
68
+
69
+ // Add integrations immediately after Starlight in the config array.
70
+ // e.g. if a user has `integrations: [starlight(), tailwind()]`, then the order will be
71
+ // `[starlight(), expressiveCode(), sitemap(), mdx(), tailwind()]`.
72
+ // This ensures users can add integrations before/after Starlight and we respect that order.
73
+ const selfIndex = config.integrations.findIndex((i) => i.name === '@astrojs/starlight');
74
+ config.integrations.splice(selfIndex + 1, 0, ...integrations);
75
+
68
76
  updateConfig({
69
- integrations,
70
77
  vite: {
71
78
  plugins: [vitePluginStarlightUserConfig(starlightConfig, config)],
72
79
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astrojs/starlight",
3
- "version": "0.22.4",
3
+ "version": "0.23.0",
4
4
  "description": "Build beautiful, high-performance documentation websites with Astro",
5
5
  "keywords": [
6
6
  "docs",
@@ -175,18 +175,18 @@
175
175
  "./style/markdown.css": "./style/markdown.css"
176
176
  },
177
177
  "peerDependencies": {
178
- "astro": "^4.2.7"
178
+ "astro": "^4.8.6"
179
179
  },
180
180
  "devDependencies": {
181
181
  "@astrojs/markdown-remark": "^4.2.1",
182
182
  "@playwright/test": "^1.43.1",
183
183
  "@types/node": "^18.16.19",
184
184
  "@vitest/coverage-v8": "^1.6.0",
185
- "astro": "^4.3.5",
185
+ "astro": "^4.8.6",
186
186
  "vitest": "^1.6.0"
187
187
  },
188
188
  "dependencies": {
189
- "@astrojs/mdx": "^2.1.1",
189
+ "@astrojs/mdx": "^3.0.0",
190
190
  "@astrojs/sitemap": "^3.0.5",
191
191
  "@pagefind/default-ui": "^1.0.3",
192
192
  "@types/hast": "^3.0.3",
package/style/asides.css CHANGED
@@ -1,26 +1,26 @@
1
1
  .starlight-aside {
2
2
  padding: 1rem;
3
- border-inline-start: 0.25rem solid;
3
+ border-inline-start: 0.25rem solid var(--sl-color-asides-border);
4
4
  color: var(--sl-color-white);
5
5
  }
6
6
  .starlight-aside--note {
7
7
  --sl-color-asides-text-accent: var(--sl-color-blue-high);
8
- border-color: var(--sl-color-blue);
8
+ --sl-color-asides-border: var(--sl-color-blue);
9
9
  background-color: var(--sl-color-blue-low);
10
10
  }
11
11
  .starlight-aside--tip {
12
12
  --sl-color-asides-text-accent: var(--sl-color-purple-high);
13
- border-color: var(--sl-color-purple);
13
+ --sl-color-asides-border: var(--sl-color-purple);
14
14
  background-color: var(--sl-color-purple-low);
15
15
  }
16
16
  .starlight-aside--caution {
17
17
  --sl-color-asides-text-accent: var(--sl-color-orange-high);
18
- border-color: var(--sl-color-orange);
18
+ --sl-color-asides-border: var(--sl-color-orange);
19
19
  background-color: var(--sl-color-orange-low);
20
20
  }
21
21
  .starlight-aside--danger {
22
22
  --sl-color-asides-text-accent: var(--sl-color-red-high);
23
- border-color: var(--sl-color-red);
23
+ --sl-color-asides-border: var(--sl-color-red);
24
24
  background-color: var(--sl-color-red-low);
25
25
  }
26
26
 
package/style/markdown.css CHANGED
@@ -117,3 +117,73 @@
117
117
  border: 0;
118
118
  border-bottom: 1px solid var(--sl-color-hairline);
119
119
  }
120
+
121
+ /* <details> and <summary> styles */
122
+ .sl-markdown-content details:not(:where(.not-content *)) {
123
+ --sl-details-border-color: var(--sl-color-gray-5);
124
+
125
+ border-inline-start: 2px solid var(--sl-details-border-color);
126
+ padding-inline-start: 1rem;
127
+ }
128
+ .sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
129
+ .sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
130
+ --sl-details-border-color: var(--sl-color-text-accent);
131
+ }
132
+ .sl-markdown-content summary:not(:where(.not-content *)) {
133
+ color: var(--sl-color-white);
134
+ cursor: pointer;
135
+ display: block; /* Needed to hide the default marker in some browsers. */
136
+ font-weight: 600;
137
+ /* Expand the outline so that the marker cannot distort it. */
138
+ margin-inline-start: -0.5rem;
139
+ padding-inline-start: 0.5rem;
140
+ }
141
+ .sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
142
+ margin-bottom: 1rem;
143
+ }
144
+
145
+ /* <summary> marker styles */
146
+ .sl-markdown-content summary:not(:where(.not-content *))::marker,
147
+ .sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
148
+ display: none;
149
+ }
150
+ .sl-markdown-content summary:not(:where(.not-content *))::before {
151
+ --sl-details-marker-size: 1.25rem;
152
+
153
+ background-color: currentColor;
154
+ content: '';
155
+ display: inline-block;
156
+ height: var(--sl-details-marker-size);
157
+ width: var(--sl-details-marker-size);
158
+ margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
159
+ vertical-align: middle;
160
+ -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");
161
+ 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");
162
+ -webkit-mask-repeat: no-repeat;
163
+ mask-repeat: no-repeat;
164
+ }
165
+ @media (prefers-reduced-motion: no-preference) {
166
+ .sl-markdown-content summary:not(:where(.not-content *))::before {
167
+ transition: transform 0.2s ease-in-out;
168
+ }
169
+ }
170
+ .sl-markdown-content details[open] > summary:not(:where(.not-content *))::before {
171
+ transform: rotateZ(90deg);
172
+ }
173
+ [dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before,
174
+ .sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before {
175
+ transform: rotateZ(180deg);
176
+ }
177
+ /* <summary> with only a paragraph automatically added when using MDX */
178
+ .sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
179
+ display: inline;
180
+ }
181
+
182
+ /* <details> styles inside asides */
183
+ .sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
184
+ --sl-details-border-color: var(--sl-color-asides-border);
185
+ }
186
+ .sl-markdown-content .starlight-aside details:not([open]):hover:not(:where(.not-content *)),
187
+ .sl-markdown-content .starlight-aside details:has(> summary:hover):not(:where(.not-content *)) {
188
+ --sl-details-border-color: var(--sl-color-asides-text-accent);
189
+ }
package/utils/translations.ts CHANGED
@@ -4,7 +4,9 @@ import type { i18nSchemaOutput } from '../schemas/i18n';
4
4
  import { createTranslationSystem } from './createTranslationSystem';
5
5
 
6
6
  type UserI18nSchema = 'i18n' extends DataCollectionKey
7
- ? CollectionEntry<'i18n'>['data']
7
+ ? CollectionEntry<'i18n'> extends { data: infer T }
8
+ ? T
9
+ : i18nSchemaOutput
8
10
  : i18nSchemaOutput;
9
11
 
10
12
  /** Get all translation data from the i18n collection, keyed by `id`, which matches locale. */