SiteTitle

SiteTitle.astro

---
import { logos } from 'virtual:starlight/user-images';
import config from 'virtual:starlight/user-config';
import type { Props } from '@astrojs/starlight/props';
import { formatPath } from 'starlight-ion-theme/utils/format-path.js';

const { siteTitle } = Astro.props;

const href = formatPath(Astro.props.locale || '/');
---

<a href={href} class="site-title sl-flex">
  {
    config.logo && logos.dark && (
      <>
        <img
          class:list={{ 'light:sl-hidden': !('src' in config.logo) }}
          alt={config.logo.alt}
          src={logos.dark.src}
          width={logos.dark.width}
          height={logos.dark.height}
        />
        {/* Show light alternate if a user configure both light and dark logos. */}
        {!('src' in config.logo) && (
          <img
            class="dark:sl-hidden"
            alt={config.logo.alt}
            src={logos.light?.src}
            width={logos.light?.width}
            height={logos.light?.height}
          />
        )}
      </>
    )
  }
  <span class:list={{ 'sr-only': config.logo?.replacesTitle }}>
    {siteTitle.split(" ").map((titlePiece: string) => {
      return <span>{titlePiece}</span>
    })}
  </span>
</a>

<style>
  .site-title {
    align-items: center;
    gap: var(--sl-nav-gap);
    font-size: var(--sl-text-h4);
    font-weight: 600;
    color: var(--sl-color-text-accent);
    text-decoration: none;
    white-space: nowrap;
  }
  img {
    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: 0 50%;
  }
</style>