Integration of a Persistent Navigation Link between Blog and Documentation Sections

[bjorne84]

Is your feature request related to a problem?

Yes, it's related to navigation issues within the site.

Describe the solution you'd like

I would like a feature where a persistent navigation link or button is available that connects the blog section directly back to the documentation/wiki part of the site. This could be a simple "Back to Documentation" button or a more integrated navigational element in the site's header or sidebar.

Describe alternatives you've considered

No response

Additional Context

No response

[HiDeoo]

Thanks for the feedback, super appreciated :raised_hands:

This is definitely an area that I want to improve in the plugin but I have not yet figured out what would be the best way to do it:

• Should it be something simple like adding a Docs link next to the Blog existing one in the right part of the header? Something in the sidebar or at the top of the content section?
• Should the existing link to the blog just update based on the current route?
• What level of configuration would be useful? Some people do not use Starlight as documentation per se so the label of such link would need to be configurable. I can see some people wanting such links to be at the left of the header after the logo instead of the right.
• I would guess some people would want to prefer the existing behavior.

I am open to suggestions and feedback on this topic but until then, this is something that could be achieved using a Starlight override for the ThemeSelect component.

This is the component overriden by the blog plugin to add the link to the blog at the right of the header and by providing your own override, you would be able to have control over the link or add one for the documentation.

Just like the blog plugin override, you own override will need to reuse the built-in ThemeSelect component after adding your own custom links which would change based on the current route.

An example of the override could look like this:

---
import Default from '@astrojs/starlight/components/ThemeSelect.astro'
import type { Props } from '@astrojs/starlight/props'

const isBlog = Astro.props.slug.startsWith('blog')
---

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

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

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

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

[bjorne84]

Great, I think your example override works fine for desktop and for mobile just a simple link link in the Sidebar, just as the existing override adds a link to the blog if its not a blog !isBlog && (

<a href={getBlogPathWithBase('/')}>{config.title}

)

About the configuration, well a true/false to show the link or not and label text,

[abdulhakim-alshanqiti]

check out tauri docs it looks so good it compines different starlight plugins together to get this look

[HiDeoo]

Just released version 0.21.0 which now includes a new navigation configuration option to customize the type of navigation links to the blog to display on a page.

The default (header-end) remains the same, but now you can also choose between header-start to display the link right after the site title, or none to not add any link to the page. Setting the value to none would allow users to create navigation links like the ones discussed in the issue.