basecoat/site/src/components/SidebarHeader.astro

---
const { site } = Astro.props;
const escapeHtml = (value) =>
  String(value ?? "")
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
const logo = site.logo?.svg
  ? site.logo.svg
  : site.logo?.url
    ? `<img src="${escapeHtml(site.logo.url)}" alt="${escapeHtml(site.title)} logo" class="size-6" />`
    : "";
---

<a href="/" class="btn h-12 w-full justify-start p-2" data-variant="ghost" data-size="lg" hx-boost="false">
  {
    logo && (
      <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
        <Fragment set:html={logo} />
      </div>
    )
  }
  <div class="grid flex-1 text-left text-sm leading-tight">
    <span class="truncate font-semibold">{site.title}</span>
    {site.subtitle && <span class="truncate text-xs text-muted-foreground">{site.subtitle}</span>}
  </div>
</a>