Incompatible with `starlight-blog`

[imtaotao]

Describe the bug

Incompatible with starlight-blog, when I use this plugin, starlight-blog will fail

To Reproduce

// astro.config.mjs
import starlightBlog from 'starlight-blog';
import starlightThemeRapide from 'starlight-theme-rapide';

export default defineConfig({
    plugins: [
        starlightThemeRapide(),
        starlightBlog({ title: 'Blog' }),
    ],
})

Expected behavior

Hope it can be compatible

How often does this bug happen?

Every time

System Info

No response

Additional Context

No response

[imtaotao]

If you can tell me how to change it, I'd be happy to submit a PR to participate.

[HiDeoo]

Thanks for your feedback :raised_hands:

Both plugins use Starlight component overrides to customize and add features to Starlight. When multiple plugins override the same component, there is a conflict that cannot be easily resolved automatically and this is what happens in this case. You should even see in your console some warnings, e.g.:

[WARN] [starlight-blog-plugin] It looks like you already have a `ThemeSelect` component override in your Starlight configuration.

In these cases, manually composing your own override for the <ThemeSelect/> component will be the best solution. To do so, you'll need to edit your configuration:

plugins: [starlightThemeRapide(), starlightBlog()],
components: {
  ThemeSelect: "./src/components/ThemeSelect.astro",
},

Then, create a new file ThemeSelect.astro in your src/components/ directory:

---
import RapideThemeSelect from 'starlight-theme-rapide/overrides/ThemeSelect.astro'
---

<div>
  <a href="/blog/">Blog</a>
</div>
<RapideThemeSelect {...Astro.props}><slot /></RapideThemeSelect>

<style>
  div {
    border-inline-end: 1px solid var(--sl-color-gray-5);
    display: none;
    padding-inline: 1rem;
  }

  @media (min-width: 50rem) {
    div {
      display: flex;
    }
  }

  a {
    color: var(--sl-color-text-accent);
    font-weight: 600;
    text-decoration: none;
  }

  :global(.sl-markdown-content .posts) {
    margin-top: 2rem;
  }
</style>

This override will render the theme theme select from the starlight-theme-rapide plugin and right before it, render a link to the blog just like the starlight-blog plugin does. You can even customize the link as you wish. Such a solution will render properly: