@robinmordasiewicz/f5xc-docs-theme 1.6.0 → 1.7.0

package/components/SiteTitle.astro

@@ -1,41 +1,56 @@
 ---
-import Default from '@astrojs/starlight/components/SiteTitle.astro';
+import { logos } from 'virtual:starlight/user-images';
+import config from 'virtual:starlight/user-config';
 
 const docsHome = process.env.DOCS_HOME || 'https://robinmordasiewicz.github.io/f5xc-docs/';
+const { siteTitle } = Astro.locals.starlightRoute;
 ---
 
-<div class="home-title-group">
-  <a href={docsHome} class="home-link" aria-label="Documentation home">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-      <polyline points="9 22 9 12 15 12 15 22"/>
-    </svg>
-  </a>
-  <span class="home-separator" aria-hidden="true"></span>
-  <Default {...Astro.props}><slot /></Default>
-</div>
+<a href={docsHome} class="site-title sl-flex">
+  {config.logo && logos.dark && (
+    <>
+      <img
+        class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
+        alt={config.logo.alt}
+        src={logos.dark.src}
+        width={logos.dark.width}
+        height={logos.dark.height}
+      />
+      {!('src' in config.logo) && (
+        <img
+          class="dark:sl-hidden print:block"
+          alt={config.logo.alt}
+          src={logos.light?.src}
+          width={logos.light?.width}
+          height={logos.light?.height}
+        />
+      )}
+    </>
+  )}
+  <span class:list={{ 'sr-only': config.logo?.replacesTitle }} translate="no">
+    {siteTitle}
+  </span>
+</a>
 
 <style>
-  .home-title-group {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .home-link {
-    display: inline-flex;
+  .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);
-    transition: opacity 0.2s ease;
+    text-decoration: none;
+    white-space: nowrap;
+    min-width: 0;
   }
-
-  .home-link:hover {
-    opacity: 0.7;
+  span {
+    overflow: hidden;
   }
-
-  .home-separator {
-    width: 1px;
-    height: 1.25rem;
-    background-color: var(--sl-color-gray-5);
+  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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robinmordasiewicz/f5xc-docs-theme",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "F5 Distributed Cloud branded Starlight documentation theme",
   "type": "module",
   "license": "MIT",