diff --git a/.changeset/polite-colts-turn.md b/.changeset/polite-colts-turn.md deleted file mode 100644 index 0e46da7f828..00000000000 --- a/.changeset/polite-colts-turn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@astrojs/starlight': patch ---- - -Internal: fix import issue in translation string loading mechanism diff --git a/.changeset/quiet-humans-lie.md b/.changeset/quiet-humans-lie.md deleted file mode 100644 index 08611098bcc..00000000000 --- a/.changeset/quiet-humans-lie.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@astrojs/starlight': patch ---- - -Fix last updated dates for pages displaying fallback content diff --git a/docs/src/content/docs/reference/overrides.md b/docs/src/content/docs/reference/overrides.md index b3d95be95dd..a9938ad7f0d 100644 --- a/docs/src/content/docs/reference/overrides.md +++ b/docs/src/content/docs/reference/overrides.md @@ -342,6 +342,8 @@ The default implementation shows a large title, tagline, and call-to-action link Component rendered around each page’s main content. The default implementation sets up basic styles to apply to Markdown content. +The Markdown content styles are also exposed in `@astrojs/starlight/style/markdown.css` and scoped to the `.sl-markdown-content` CSS class. + --- ### Footer diff --git a/examples/basics/package.json b/examples/basics/package.json index b7a528788f1..926d71d4b80 100644 --- a/examples/basics/package.json +++ b/examples/basics/package.json @@ -11,7 +11,7 @@ "astro": "astro" }, "dependencies": { - "@astrojs/starlight": "^0.12.0", + "@astrojs/starlight": "^0.12.1", "astro": "^3.2.3", "sharp": "^0.32.5" } diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json index 25851c56001..35727482b5b 100644 --- a/examples/tailwind/package.json +++ b/examples/tailwind/package.json @@ -11,7 +11,7 @@ "astro": "astro" }, "dependencies": { - "@astrojs/starlight": "^0.12.0", + "@astrojs/starlight": "^0.12.1", "@astrojs/starlight-tailwind": "^2.0.1", "@astrojs/tailwind": "^5.0.0", "astro": "^3.2.3", diff --git a/packages/starlight/CHANGELOG.md b/packages/starlight/CHANGELOG.md index 901e1a813cb..01931083f14 100644 --- a/packages/starlight/CHANGELOG.md +++ b/packages/starlight/CHANGELOG.md @@ -1,5 +1,17 @@ # @astrojs/starlight +## 0.12.1 + +### Patch Changes + +- [#1069](https://github.com/withastro/starlight/pull/1069) [`b86f360`](https://github.com/withastro/starlight/commit/b86f3608f03be9455ec1d5ba11820c9bf601ad1e) Thanks [@Genteure](https://github.com/Genteure)! - Fix sidebar highlighting and navigation buttons for pages with path containing non-ASCII characters + +- [#1025](https://github.com/withastro/starlight/pull/1025) [`0d1e75e`](https://github.com/withastro/starlight/commit/0d1e75e17269ddac3eb15b7dfb4480da1bb01c6c) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Internal: fix import issue in translation string loading mechanism + +- [#1044](https://github.com/withastro/starlight/pull/1044) [`a5a9754`](https://github.com/withastro/starlight/commit/a5a9754f111b97abfd277d99759e9857aa0fb22b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fix last updated dates for pages displaying fallback content + +- [#1049](https://github.com/withastro/starlight/pull/1049) [`c27495d`](https://github.com/withastro/starlight/commit/c27495da61f9376236519ed3f08a169f245a189c) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Expose Markdown content styles in `@astrojs/starlight/style/markdown.css` + ## 0.12.0 ### Minor Changes diff --git a/packages/starlight/__tests__/sidebar/navigation-unicode.test.ts b/packages/starlight/__tests__/sidebar/navigation-unicode.test.ts new file mode 100644 index 00000000000..5e280af7ddf --- /dev/null +++ b/packages/starlight/__tests__/sidebar/navigation-unicode.test.ts @@ -0,0 +1,117 @@ +import { describe, expect, test, vi } from 'vitest'; +import { getSidebar } from '../../utils/navigation'; + +vi.mock('astro:content', async () => + (await import('../test-utils')).mockedAstroContent({ + docs: [ + ['index.mdx', { title: 'Home Page' }], + ['environmental-impact.md', { title: 'Eco-friendly docs' }], + ['reference/configuration.mdx', { title: 'Config Reference' }], + ['reference/frontmatter.md', { title: 'Frontmatter Reference' }], + // @ts-expect-error — Using a slug not present in Starlight docs site + ['api/v1/用户.md', { title: 'Path with non-ASCII characters' }], + ['guides/components.mdx', { title: 'Components' }], + ], + }) +); + +describe('getSidebar', () => { + test('matches current page when path contains non-ascii characters', () => { + expect(getSidebar('/api/v1/%E7%94%A8%E6%88%B7', undefined)).toMatchInlineSnapshot(` + [ + { + "attrs": {}, + "badge": undefined, + "href": "/", + "isCurrent": false, + "label": "Home", + "type": "link", + }, + { + "badge": undefined, + "collapsed": false, + "entries": [ + { + "attrs": {}, + "badge": { + "text": "New", + "variant": "success", + }, + "href": "/intro/", + "isCurrent": false, + "label": "Introduction", + "type": "link", + }, + { + "attrs": {}, + "badge": { + "text": "Deprecated", + "variant": "default", + }, + "href": "/next-steps/", + "isCurrent": false, + "label": "Next Steps", + "type": "link", + }, + { + "attrs": { + "class": "showcase-link", + "target": "_blank", + }, + "badge": undefined, + "href": "/showcase/", + "isCurrent": false, + "label": "Showcase", + "type": "link", + }, + ], + "label": "Start Here", + "type": "group", + }, + { + "badge": { + "text": "Experimental", + "variant": "default", + }, + "collapsed": false, + "entries": [ + { + "attrs": {}, + "badge": undefined, + "href": "/reference/configuration/", + "isCurrent": false, + "label": "Config Reference", + "type": "link", + }, + { + "attrs": {}, + "badge": undefined, + "href": "/reference/frontmatter/", + "isCurrent": false, + "label": "Frontmatter Reference", + "type": "link", + }, + ], + "label": "Reference", + "type": "group", + }, + { + "badge": undefined, + "collapsed": false, + "entries": [ + { + "attrs": {}, + "badge": undefined, + "href": "/api/v1/用户/", + "isCurrent": true, + "label": "Path with non-ASCII characters", + "type": "link", + }, + ], + "label": "API v1", + "type": "group", + }, + ] + `); + }); +}); diff --git a/packages/starlight/components/MarkdownContent.astro b/packages/starlight/components/MarkdownContent.astro index ffb0108a6d0..0d40cd47ed2 100644 --- a/packages/starlight/components/MarkdownContent.astro +++ b/packages/starlight/components/MarkdownContent.astro @@ -1,127 +1,6 @@ --- import type { Props } from '../props'; +import '../style/markdown.css'; --- -
- - +
diff --git a/packages/starlight/package.json b/packages/starlight/package.json index 123de1f411f..3ff8403eaf0 100644 --- a/packages/starlight/package.json +++ b/packages/starlight/package.json @@ -1,6 +1,6 @@ { "name": "@astrojs/starlight", - "version": "0.12.0", + "version": "0.12.1", "description": "Build beautiful, high-performance documentation websites with Astro", "scripts": { "test": "vitest", @@ -158,7 +158,8 @@ "./schema": "./schema.ts", "./types": "./types.ts", "./index.astro": "./index.astro", - "./404.astro": "./404.astro" + "./404.astro": "./404.astro", + "./style/markdown.css": "./style/markdown.css" }, "peerDependencies": { "astro": "^3.2.0" diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css new file mode 100644 index 00000000000..c4f522eb5eb --- /dev/null +++ b/packages/starlight/style/markdown.css @@ -0,0 +1,115 @@ +.sl-markdown-content + :not(a, strong, em, del, span, input, code) + + :not(a, strong, em, del, span, input, code, :where(.not-content *)) { + margin-top: 1.5rem; +} + +/* Headings after non-headings have more spacing. */ +.sl-markdown-content + :not(h1, h2, h3, h4, h5, h6) + + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) { + margin-top: 2.5rem; +} + +.sl-markdown-content li + li:not(:where(.not-content *)), +.sl-markdown-content dt + dt:not(:where(.not-content *)), +.sl-markdown-content dt + dd:not(:where(.not-content *)), +.sl-markdown-content dd + dd:not(:where(.not-content *)) { + margin-top: 0.25rem; +} + +.sl-markdown-content + li + > :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) { + margin-bottom: 1.25rem; +} + +.sl-markdown-content dt:not(:where(.not-content *)) { + font-weight: 700; +} +.sl-markdown-content dd:not(:where(.not-content *)) { + padding-inline-start: 1rem; +} + +.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) { + color: var(--sl-color-white); + line-height: var(--sl-line-height-headings); + font-weight: 600; +} + +.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) { + display: block; + max-width: 100%; + height: auto; +} + +.sl-markdown-content h1:not(:where(.not-content *)) { + font-size: var(--sl-text-h1); +} +.sl-markdown-content h2:not(:where(.not-content *)) { + font-size: var(--sl-text-h2); +} +.sl-markdown-content h3:not(:where(.not-content *)) { + font-size: var(--sl-text-h3); +} +.sl-markdown-content h4:not(:where(.not-content *)) { + font-size: var(--sl-text-h4); +} +.sl-markdown-content h5:not(:where(.not-content *)) { + font-size: var(--sl-text-h5); +} +.sl-markdown-content h6:not(:where(.not-content *)) { + font-size: var(--sl-text-h6); +} + +.sl-markdown-content a:not(:where(.not-content *)) { + color: var(--sl-color-text-accent); +} +.sl-markdown-content a:hover:not(:where(.not-content *)) { + color: var(--sl-color-white); +} + +.sl-markdown-content code:not(:where(.not-content *)) { + background-color: var(--sl-color-bg-inline-code); + margin-block: -0.125rem; + padding: 0.125rem 0.375rem; + font-size: var(--sl-text-code-sm); +} +.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code { + font-size: inherit; +} + +.sl-markdown-content pre:not(:where(.not-content *)) { + border: 1px solid var(--sl-color-gray-5); + padding: 0.75rem 1rem; + font-size: var(--sl-text-code); + tab-size: 2; +} + +.sl-markdown-content pre code:not(:where(.not-content *)) { + all: unset; + font-family: var(--__sl-font-mono); +} + +.sl-markdown-content blockquote:not(:where(.not-content *)) { + border-inline-start: 1px solid var(--sl-color-gray-5); + padding-inline-start: 1rem; +} + +.sl-markdown-content table:not(:where(.not-content *)) { + display: block; + overflow: auto; + border-collapse: collapse; +} +.sl-markdown-content tr:nth-child(2n):not(:where(.not-content *)) { + background-color: var(--sl-color-gray-7, var(--sl-color-gray-6)); +} +.sl-markdown-content :is(th, td):not(:where(.not-content *)) { + border: 1px solid var(--sl-color-hairline-light); + padding: 0.375rem 0.8125rem; +} + +.sl-markdown-content hr:not(:where(.not-content *)) { + border: 0; + border-bottom: 1px solid var(--sl-color-hairline); +} diff --git a/packages/starlight/utils/navigation.ts b/packages/starlight/utils/navigation.ts index 5710f553206..1e74932f56e 100644 --- a/packages/starlight/utils/navigation.ts +++ b/packages/starlight/utils/navigation.ts @@ -135,7 +135,7 @@ function makeLink( attrs?: LinkHTMLAttributes ): Link { if (!isAbsolute(href)) href = pathWithBase(href); - const isCurrent = href === ensureTrailingSlash(currentPathname); + const isCurrent = encodeURI(href) === ensureTrailingSlash(currentPathname); return { type: 'link', label, href, isCurrent, badge, attrs: attrs ?? {} }; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3e9cf1d112..9946589d184 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,7 +103,7 @@ importers: examples/basics: dependencies: '@astrojs/starlight': - specifier: ^0.12.0 + specifier: ^0.12.1 version: link:../../packages/starlight astro: specifier: ^3.2.3 @@ -115,7 +115,7 @@ importers: examples/tailwind: dependencies: '@astrojs/starlight': - specifier: ^0.12.0 + specifier: ^0.12.1 version: link:../../packages/starlight '@astrojs/starlight-tailwind': specifier: ^2.0.1