@astrojs/starlight@0.34.4

Patch Changes

• #3205 95d124a Thanks @sgalcheung! - Fixes an issue preventing to use the <StarlightPage> component when the docs content collection that Starlight uses does not exist.

• #3206 e6ea584 Thanks @HiDeoo! - Fixes a text selection issue for heading with a clickable anchor link when using double click to select text in Chrome and Safari.

• #3233 3064c40 Thanks @torn4dom4n! - Updates Vietnamese UI translations.

• #3248 16c1239 Thanks @HiDeoo! - Prevents icons in the <Card> component from being shrunk in some narrow viewports.

• #3225 21b93b8 Thanks @randomguy-2650! - Updates German UI translations

@astrojs/starlight@0.34.3

Patch Changes

• #3058 274cc06 Thanks @techfg! - Fixes display of focus indicator around site title

• #3181 449c822 Thanks @HiDeoo! - Fixes an issue where all headings in Markdown and MDX content were rendered with a clickable anchor link, even in non-Starlight pages.

• #3168 ca693fe Thanks @jsparkdev! - Updates Korean langage support with improvements and missing translations

@astrojs/starlight@0.34.2

Patch Changes

• #3153 ea31f46 Thanks @SuperKXT! - Fixes hover styles for highlighted directory in FileTree component.

• #2905 b5232bc Thanks @HiDeoo! - Fixes a potential issue for projects with dynamic routes added by an user, an Astro integration, or a Starlight plugin where some styles could end up being missing.

• #3165 80a7871 Thanks @KianNH! - Increases maxBuffer for an internal spawnSync() call to support larger Git commit histories when using Starlight's lastUpdated feature.

• #3158 d1f3c8b Thanks @heisenberg0924! - Adds Hungarian language support

@astrojs/starlight@0.34.1

Patch Changes

• #3140 f6eb1d5 Thanks @HiDeoo! - Fixes a text selection issue for heading with a clickable anchor link when using double or triple click to select text.

• #3148 dc8b6d5 Thanks @HiDeoo! - Fixes a regression of the Starlight icon color when using the credits configuration option.

@astrojs/starlight-tailwind@4.0.1

Patch Changes

• #3132 5959919 Thanks @HiDeoo! - Fixes an issue where all border styles were not reset by the Starlight’s Tailwind compatibility package like in Tailwind base styles.

@astrojs/starlight@0.34.0

Minor Changes

• #2322 f14eb0c Thanks @HiDeoo! - Groups all of Starlight's CSS declarations into a single starlight cascade layer.

  This change allows for easier customization of Starlight's CSS as any custom unlayered CSS will override the default styles. If you are using cascade layers in your custom CSS, you can use the @layer CSS at-rule to define the order of precedence for different layers including the ones used by Starlight.

  We recommend checking your site’s appearance when upgrading to make sure there are no style regressions caused by this change.

• #3122 3a087d8 Thanks @delucis! - Removes default attrs and content values from head entries parsed using Starlight’s schema.

  Previously when adding head metadata via frontmatter or user config, Starlight would automatically add values for attrs and content if not provided. Now, these properties are left undefined.

  This makes it simpler to add tags in route middleware for example as you no longer need to provide empty values for attrs and content:

  head.push({
    tag: 'style',
    content: 'div { color: red }'
  - attrs: {},
  });
  head.push({
    tag: 'link',
  - content: ''
    attrs: { rel: 'me', href: 'https://example.com' },
  });

  This is mostly an internal API but if you are overriding Starlight’s Head component or processing head entries in some way, you may wish to double check your handling of Astro.locals.starlightRoute.head is compatible with attrs and content potentially being undefined.

• #3033 8c19678 Thanks @delucis! - Adds support for generating clickable anchor links for headings.

  By default, Starlight now renders an anchor link beside headings in Markdown and MDX content. A new <AnchorHeading> component is available to achieve the same thing in custom pages built using <StarlightPage>.

  If you want to disable this new Markdown processing set the markdown.headingLinks option in your Starlight config to false:

  starlight({
    title: 'My docs',
    markdown: {
      headingLinks: false,
    },
  }),

  ⚠️ BREAKING CHANGE: The minimum supported version of Astro is now v5.5.0.

  Please update Starlight and Astro together:

  npx @astrojs/upgrade

• #2322 f14eb0c Thanks @HiDeoo! - Removes Shiki css-variables theme fallback.

  ⚠️ BREAKING CHANGE:

  Previously, Starlight used to automatically provide a fallback theme for Shiki, the default syntax highlighter built into Astro if the configured Shiki theme was not github-dark.

  This fallback was only relevant when the default Starlight code block renderer, Expressive Code, was disabled and Shiki was used. Starlight no longer provides this fallback.

  If you were relying on this behavior, you now manually need to update your Astro configuration to use the Shiki css-variables theme to match the previous behavior.

  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
  + markdown: {
  +   shikiConfig: {
  +     theme: 'css-variables',
  +   },
  + },
  });

  Additionally, you can use custom CSS to control the appearance of the code blocks. Here are the previously used CSS variables for the fallback theme:

  :root {
    --astro-code-foreground: var(--sl-color-white);
    --astro-code-background: var(--sl-color-gray-6);
    --astro-code-token-constant: var(--sl-color-blue-high);
    --astro-code-token-string: var(--sl-color-green-high);
    --astro-code-token-comment: var(--sl-color-gray-2);
    --astro-code-token-keyword: var(--sl-color-purple-high);
    --astro-code-token-parameter: var(--sl-color-red-high);
    --astro-code-token-function: var(--sl-color-red-high);
    --astro-code-token-string-expression: var(--sl-color-green-high);
    --astro-code-token-punctuation: var(--sl-color-gray-2);
    --astro-code-token-link: var(--sl-color-blue-high);
  }

Patch Changes

• #3118 77a1104 Thanks @delucis! - Fixes passing imported SVGs to the frontmatter prop of the <StarlightPage> component in Astro ≥5.7.0

@astrojs/starlight-tailwind@4.0.0

Major Changes

• #2322 f14eb0c Thanks @HiDeoo! - ⚠️ BREAKING CHANGE: The minimum supported version of Starlight is now 0.34.0

  Please use the @astrojs/upgrade command to upgrade your project:

  npx @astrojs/upgrade

• #2322 f14eb0c Thanks @HiDeoo! - Adds support for Tailwind v4, drops support for Tailwind v3.

  ⚠️ BREAKING CHANGE: Tailwind v3 is no longer supported. Tailwind v4 support in Astro is now provided using a Vite plugin and the Astro Tailwind integration is no longer required.

  1. Remove the Astro Tailwind integration. The Astro Tailwind integration is no longer required with Tailwind v4.

      // astro.config.mjs
      import { defineConfig } from "astro/config";
      import starlight from "@astrojs/starlight";
     -import tailwind from "@astrojs/tailwind";
     
      export default defineConfig({
        integrations: [
          starlight({
            title: "Docs with Tailwind",
            customCss: ["./src/tailwind.css"],
          }),
     -    tailwind({ applyBaseStyles: false }),
        ],
      });

  2. Install Tailwind v4. Install the latest version of the tailwindcss and @tailwindcss/vite packages.

     Use the astro add tailwind command to install and configure both packages:

     npx astro add tailwind

  3. Update Tailwind base styles. Tailwind CSS base styles needs to be updated for Tailwind v4 and also to use Starlight Tailwind CSS.

     /* src/tailwind.css */
     -@tailwind base;
     -@tailwind components;
     -@tailwind utilities;
     +@layer base, starlight, theme, components, utilities;
     +
     +@import '@astrojs/starlight-tailwind';
     +@import 'tailwindcss/theme.css' layer(theme);
     +@import 'tailwindcss/utilities.css' layer(utilities);
     +
     +@theme {
     +	/*
     +	Configure your Tailwind theme that will be used by Starlight.
     +	https://starlight.astro.build/guides/css-and-tailwind/#styling-starlight-with-tailwind
     +	*/
     +}
     +
     +/*
     +Add additional Tailwind styles to this file:
     +https://tailwindcss.com/docs/adding-custom-styles#using-custom-css
     +*/

  4. Update Tailwind customizations. If you previously customized your Tailwind theme configuration in the tailwind.config.mjs file, such customizations are now defined through CSS using the @theme block in your Tailwind base styles.

     1. Locate existing customizations in your tailwind.config.mjs file. The following example defines customizations for the accent colors, gray scale, and font families used by Starlight:

        // tailwind.config.mjs
        import starlightPlugin from '@astrojs/starlight-tailwind';
        import colors from 'tailwindcss/colors';
        
        /** @type {import('tailwindcss').Config} */
        export default {
          content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
          theme: {
            extend: {
              colors: {
                // Custom accent colors.
                accent: colors.fuchsia,
                // Custom gray scale.
                gray: colors.slate,
              },
              fontFamily: {
                // Custom text font.
                sans: ['"Atkinson Hyperlegible"'],
                // Custom code font.
                mono: ['"IBM Plex Mono"'],
              },
            },
          },
          plugins: [starlightPlugin()],
        };

     2. The above customizations can be migrated to the new @theme block in the file containing your Tailwind base styles as follows:

        /* src/tailwind.css */
        @layer base, starlight, theme, components, utilities;
        
        @import '@astrojs/starlight-tailwind';
        @import 'tailwindcss/theme.css' layer(theme);
        @import 'tailwindcss/utilities.css' layer(utilities);
        
        @theme {
          /* Custom accent colors. */
          --color-accent-50: var(--color-fuchsia-50);
          --color-accent-100: var(--color-fuchsia-100);
          --color-accent-200: var(--color-fuchsia-200);
          --color-accent-300: var(--color-fuchsia-300);
          --color-accent-400: var(--color-fuchsia-400);
          --color-accent-500: var(--color-fuchsia-500);
          --color-accent-600: var(--color-fuchsia-600);
          --color-accent-700: var(--color-fuchsia-700);
          --color-accent-800: var(--color-fuchsia-800);
          --color-accent-900: var(--color-fuchsia-900);
          --color-accent-950: var(--color-fuchsia-950);
          /* Custom gray scale. */
          --color-gray-50: var(--color-slate-50);
          --color-gray-100: var(--color-slate-100);
          --color-gray-200: var(--color-slate-200);
          --color-gray-300: var(--color-slate-300);
          --color-gray-400: var(--color-slate-400);
          --color-gray-500: var(--color-slate-500);
          --color-gray-600: var(--color-slate-600);
          --color-gray-700: var(--color-slate-700);
          --color-gray-800: var(--color-slate-800);
          --color-gray-900: var(--color-slate-900);
          --color-gray-950: var(--color-slate-950);
          /* Custom text font. */
          --font-sans: 'Atkinson Hyperlegible';
          /* Custom code font. */
          --font-mono: 'IBM Plex Mono';
        }

  We recommend checking your site’s appearance when upgrading to make sure there are no style regressions caused by this change.

  For full details about upgrading from Tailwind v3 to v4, see the official upgrade guide.

@astrojs/starlight-markdoc@0.4.0

Minor Changes

• #3033 8c19678 Thanks @delucis! - Adds support for generating clickable anchor links for headings.

  By default, the Starlight Markdoc preset now includes a default heading node, which renders an anchor link beside headings in your Markdoc content.

  If you want to disable this new feature, pass headingLinks: false in your Markdoc config:

  export default defineMarkdocConfig({
    // Disable the default heading anchor link support
    extends: [starlightMarkdoc({ headingLinks: false })],
  });

  ⚠️ BREAKING CHANGE: The minimum supported peer version of Starlight is now v0.34.0.

  Please update Starlight and the Starlight Markdoc preset together:

  npx @astrojs/upgrade

@astrojs/starlight@0.33.2

Patch Changes

• #3090 fc3ffa8 Thanks @delucis! - Updates internal @astrojs/mdx, @astrojs/sitemap, and astro-expressive-code dependencies

• #3109 b5cc1b4 Thanks @dhruvkb! - Updates Expressive Code to v0.41.1

@astrojs/starlight-markdoc@0.3.1

Patch Changes

• #3090 fc3ffa8 Thanks @delucis! - Adds support for newer versions of @astrojs/markdoc

• #3109 b5cc1b4 Thanks @dhruvkb! - Updates Expressive Code to v0.41.1