@robinmordasiewicz/f5xc-docs-theme 1.5.1 → 1.7.0

package/components/PageTitle.astro

@@ -0,0 +1,32 @@
+---
+import Default from '@astrojs/starlight/components/PageTitle.astro';
+
+const docsHome = process.env.DOCS_HOME || 'https://robinmordasiewicz.github.io/f5xc-docs/';
+const { sidebar, entry } = Astro.locals.starlightRoute;
+
+function findTrail(entries: typeof sidebar, trail: { label: string }[] = []): { label: string }[] | null {
+  for (const item of entries) {
+    if (item.type === 'link' && item.isCurrent) {
+      return trail;
+    }
+    if (item.type === 'group') {
+      const result = findTrail(item.entries, [...trail, { label: item.label }]);
+      if (result) return result;
+    }
+  }
+  return null;
+}
+
+const trail = findTrail(sidebar) || [];
+---
+
+<nav class="breadcrumbs" aria-label="Breadcrumb">
+  <ol>
+    <li><a href={docsHome}>Home</a></li>
+    {trail.map((crumb) => (
+      <li><span>{crumb.label}</span></li>
+    ))}
+    <li aria-current="page"><span>{entry.data.title}</span></li>
+  </ol>
+</nav>
+<Default {...Astro.props}><slot /></Default>

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/index.ts

@@ -15,6 +15,7 @@ export default function f5xcDocsTheme(): StarlightPlugin {
             ...config.components,
             Footer: 'f5xc-docs-theme/components/Footer.astro',
             SiteTitle: 'f5xc-docs-theme/components/SiteTitle.astro',
+            PageTitle: 'f5xc-docs-theme/components/PageTitle.astro',
           },
         });
         logger.info('F5 XC docs theme loaded');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robinmordasiewicz/f5xc-docs-theme",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "F5 Distributed Cloud branded Starlight documentation theme",
   "type": "module",
   "license": "MIT",
@@ -18,6 +18,7 @@
     "./styles/custom.css": "./styles/custom.css",
     "./components/Footer.astro": "./components/Footer.astro",
     "./components/SiteTitle.astro": "./components/SiteTitle.astro",
+    "./components/PageTitle.astro": "./components/PageTitle.astro",
     "./assets/f5-logo.svg": "./assets/f5-logo.svg"
   },
   "files": [

package/styles/custom.css

@@ -96,4 +96,34 @@ h1, h2, h3, h4, h5, h6 {
   background: #1a1b26 !important;
 }
 
+/* Breadcrumb navigation */
+.breadcrumbs ol {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0.5rem;
+  font-size: 0.85rem;
+  color: var(--sl-color-gray-3);
+}
+
+.breadcrumbs li + li::before {
+  content: '/';
+  padding-inline: 0.375rem;
+  color: var(--sl-color-gray-5);
+}
+
+.breadcrumbs a {
+  color: var(--sl-color-text-accent);
+  text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+  text-decoration: underline;
+}
+
+.breadcrumbs [aria-current="page"] {
+  color: var(--sl-color-white);
+}
+
 /* release pipeline verified */