@f5xc-salesdemos/docs-theme 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Robin Mordasiewicz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# XC Docs Theme
+
+[![GitHub Pages Deploy](https://github.com/f5xc-salesdemos/docs-theme/actions/workflows/github-pages-deploy.yml/badge.svg)](https://github.com/f5xc-salesdemos/docs-theme/actions/workflows/github-pages-deploy.yml)
+[![Repo Settings](https://github.com/f5xc-salesdemos/docs-theme/actions/workflows/enforce-repo-settings.yml/badge.svg)](https://github.com/f5xc-salesdemos/docs-theme/actions/workflows/enforce-repo-settings.yml)
+[![License](https://img.shields.io/github/license/f5xc-salesdemos/docs-theme)](LICENSE)
+
+Shared branding and styling for F5 Distributed Cloud documentation sites
+
+## Documentation
+
+Full documentation is available at **[https://f5xc-salesdemos.github.io/docs-theme/](https://f5xc-salesdemos.github.io/docs-theme/)**.
+
+## Getting Started
+
+```bash
+git clone https://github.com/f5xc-salesdemos/docs-theme.git
+```
+
+See the [documentation](https://f5xc-salesdemos.github.io/docs-theme/) for detailed setup
+and usage guides.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for workflow rules,
+branch naming, and CI requirements.
+
+## License
+
+See [LICENSE](LICENSE).

package/assets/f5-distributed-cloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="#ffffff" stroke="none" d="M25.874 10.087a6.46 6.46 0 0 1 5.458-.09c1.064-2.792 3.802-4.78 7.012-4.78 4.135 0 7.488 3.299 7.488 7.368a7.2 7.2 0 0 1-.258 1.92c1.46.946 2.426 2.571 2.426 4.42 0 2.923-2.407 5.292-5.377 5.292h-4.925L14.151 28.217H6.308C3.929 28.217 2 26.318 2 23.978 2 21.642 3.92 19.75 6.289 19.739 6.289 16.258 9.156 13.438 12.692 13.438A6.5 6.5 0 0 1 15.332 13.998C16.396 11.205 19.134 9.217 22.344 9.217A7.55 7.55 0 0 1 25.874 10.087Z"/><path fill="#ffffff" stroke="none" d="M25.874 10.087c2.355 1.242 3.958 3.685 3.958 6.498 0 .494-.058.973-.155 1.438Z"/><path fill="none" stroke="#e4002b" stroke-linecap="round" stroke-linejoin="round" d="M25.874 10.087c2.355 1.242 3.958 3.685 3.958 6.498 0 .494-.058.973-.155 1.438m-3.803-7.936a7.55 7.55 0 0 0-3.53-.87c-3.21 0-5.948 1.988-7.012 4.781a6.5 6.5 0 0 0-2.64-.56c-3.536 0-6.403 2.82-6.403 6.3v.001C3.92 19.75 2 21.642 2 23.978c0 2.34 1.929 4.239 4.308 4.239h7.843"/><path fill="none" stroke="#e4002b" stroke-linecap="round" stroke-linejoin="round" d="M25.874 10.087a6.46 6.46 0 0 1 5.458-.09c1.064-2.792 3.802-4.78 7.012-4.78 4.135 0 7.488 3.299 7.488 7.368a7.2 7.2 0 0 1-.258 1.92c1.46.946 2.426 2.571 2.426 4.42 0 2.923-2.407 5.292-5.377 5.292h-4.925"/><g fill="#ffffff" stroke="#e4002b"><path stroke-linecap="round" stroke-linejoin="round" d="M16.787 37.27H14.28c-2.377 0-4.303-1.904-4.303-4.254 0-2.344 1.916-4.244 4.284-4.254q0 0 0 0c0-3.493 2.864-6.325 6.396-6.325.94 0 1.832.203 2.636.563a7.48 7.48 0 0 1 7.005-4.799c4.13 0 7.48 3.311 7.48 7.396 0 .666-.091 1.312-.258 1.926a5.29 5.29 0 0 1 2.423 4.437c0 2.732-2.083 5.01-4.767 5.304h-2.044"/><path stroke-linecap="round" stroke-linejoin="round" d="M29.041 29.67q-.428.022-.855.038l-.001-.004-2.044-1.57c-.675-.52-1.488-.531-2.17-.033l-2.202 1.607q-.427-.016-.855-.037c-1.616-.08-2.876-.539-2.876 1.676s.3 5.805.3 5.805-.18 2.693 2.935 4.967a254 254 0 0 0 3.694 2.664h0s1.035-.708 3.715-2.664c3.115-2.274 2.935-4.967 2.935-4.967s.3-3.591.3-5.805c0-2.215-1.26-1.756-2.876-1.676"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" d="m26.863 34.182-2.572 3.891-1.603-2.126"/><circle cx="24.978" cy="35.822" r="4.375" stroke-miterlimit="10"/></g></svg>

package/assets/f5-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><g data-name="Layer 2"><g data-name="Layer 1"><path fill="#e4002b" d="M940.37 894.53a30.85 30.85 0 0 1 9.47 22.94 32.43 32.43 0 0 1-55.4 23.08 32 32 0 0 1-9.44-23.08 32.54 32.54 0 0 1 32.37-32.57 30.88 30.88 0 0 1 23 9.63m3.81-3.75a36.65 36.65 0 0 0-26.8-11 37.72 37.72 0 1 0 26.8 64.32 37.71 37.71 0 0 0 0-53.36ZM923 915.65a18.8 18.8 0 0 1-6.93.92h-6.54v-15h6.23c4 0 7 .57 8.77 1.58s2.76 3.07 2.76 6a6.38 6.38 0 0 1-4.29 6.5m-20.75 22.29h7.28v-16.28h5.77c3.82 0 6.56.4 8.11 1.36 2.57 1.54 3.88 4.72 3.88 9.48v3.33l.14 1.25a3 3 0 0 1 .11.5c0 .2.06.27.19.36h6.76l-.24-.48a4.4 4.4 0 0 1-.35-2.11c-.09-1.14-.09-2.15-.09-3.07v-3.07a11.5 11.5 0 0 0-2.26-6.43c-1.54-2.21-3.95-3.51-7.19-4.08a17 17 0 0 0 6-2c2.77-1.75 4.06-4.56 4.06-8.2 0-5.18-2.06-8.73-6.4-10.49-2.39-1-6.14-1.49-11.3-1.49h-14.47Z"/><path fill="#fff" d="M958.59 620.31c2.68-53.34-7.17-110.8-53.58-162.79-47.7-51.41-128.17-95-293.72-105.22 8.6-26.83 16.12-51.41 24.06-76.52 99 3.48 187.06 10.61 262 20.34 5.92-26.85 9.13-53.1 15.26-78.43Q901.2 201 888.43 185.25c-35.65-4.12-71.2-13-109.46-17.9-51.73-6.68-105.88-11.45-164.38-14.15C577.75 262.93 531.7 401 484.46 543.7 730.72 565 825.42 631.37 820.1 725c-4.91 50.57-51.14 96.55-111.93 102-72.31 4.86-105.41-24.35-127.14-56.4-19.14-28.78-38.23-57.62-58.61-89-5.54-9.23-12.85-3.23-19.44 3.21a9738 9738 0 0 1-43.84 42.28c-9.48 8.24-7.37 15.32-4 22.23 13.77 32.46 26.59 62.22 39.54 91.76 21.56 13.21 122.9 31.25 198.69 25.58 51.36-4.32 115.57-24.18 168.65-64.16 52.43-40.71 90.65-95.5 96.57-182.19"/><path fill="#fff" d="M97.31 796.3q14.22 19.29 30.2 37.13c85.19 15.32 191.42 25.91 302.05 29.13-.37-11.48-.7-22.63-1-34.46-67.94-3.83-99.17-14.19-104.6-27.63-4.53-10.68-5.32-26.63-6.29-42.38-5.1-104.35-6.77-217.22-5-330.51 38-.66 75.83-1 115.53-1.43 19.24-8.77 37.34-17.44 56.54-26 0-13.72.09-26 .09-39.39-58.83.24-114.65 1.24-170.6 2.79 1.58-47.62 3.45-91.58 6.24-134.46 2-28.18 21.51-48.78 41.64-50.39 32.26-1.26 61.23 11.56 89.27 24 15.46 7.49 30.7 14.94 46.54 23.05 7.56 2 16.54 3.78 21.95-2.79 9.39-11.12 18.31-21.45 27.55-32.26 5-7.39 2.84-11.63.79-14.35-20.12-15.89-39.05-30.18-58.21-44.54-11.83-8-30.51-9.76-48.92-9.76-7.34 0-14.71.27-21.55.49-18.92 1-43 4-82.43 13.62-88.81 23.92-195.43 85.84-206.7 187.11-1.45 16.53-2.66 32.9-3.73 49.81-25.08 2.11-47.91 3.92-69.46 6-1.58 19.36-2.64 38-3.52 57.59 21.82-1.28 44.58-2.42 69.94-3.52-3.76 106.16-.2 212.1 9.77 310.22 1.67 14.91 3.3 29.69 1.36 39.24-1.59 9.12-16.27 13.85-37.45 13.69"/><path fill="#e4002b" d="M912.66 217.69c-6.13 25.33-9.34 51.58-15.26 78.43-75-9.73-163.08-16.86-262-20.34-7.94 25.11-15.46 49.69-24.06 76.52 165.55 10.18 246 53.81 293.72 105.22 46.41 52 56.26 109.45 53.58 162.79-5.97 86.69-44.19 141.48-96.64 182.1-53.08 40-117.29 59.84-168.65 64.16-75.79 5.67-177.13-12.37-198.69-25.57-13-29.54-25.77-59.3-39.54-91.76-3.35-6.91-5.46-14 4-22.23a9738 9738 0 0 0 43.84-42.28c6.59-6.44 13.9-12.44 19.44-3.21 20.38 31.43 39.48 60.27 58.61 89 21.73 32.05 54.83 61.26 127.14 56.4 60.79-5.44 107-51.42 111.93-102 5.32-93.6-89.38-160-335.64-181.27C531.7 401 577.75 262.93 614.59 153.2c58.5 2.7 112.65 7.47 164.38 14.15 38.26 4.87 73.81 13.78 109.46 17.9C796.77 72.26 656.88 0 500 0 223.87 0 0 223.86 0 500a497.64 497.64 0 0 0 97.31 296.3c21.18.16 35.86-4.57 37.45-13.7 1.94-9.55.31-24.33-1.36-39.24-10-98.12-13.53-204.06-9.77-310.22-25.36 1.1-48.12 2.24-69.94 3.52.88-19.63 1.94-38.23 3.52-57.59 21.55-2.07 44.38-3.88 69.46-6 1.07-16.91 2.28-33.28 3.74-49.81C141.67 222 248.29 160.08 337.1 136.18c39.41-9.6 63.51-12.63 82.43-13.62 6.84-.22 14.21-.49 21.55-.49 18.41 0 37.09 1.72 48.92 9.76 19.16 14.36 38.09 28.65 58.22 44.54 2 2.72 4.2 7-.8 14.35-9.24 10.81-18.16 21.14-27.55 32.26-5.41 6.57-14.39 4.84-21.95 2.79-15.84-8.11-31.08-15.56-46.54-23.05-28-12.46-57-25.28-89.27-24-20.13 1.61-39.62 22.21-41.64 50.39-2.79 42.88-4.66 86.84-6.24 134.46C370.18 362 426 361 484.85 360.74c0 13.39-.09 25.67-.09 39.39-19.2 8.58-37.3 17.25-56.54 26-39.7.46-77.48.77-115.53 1.43-1.76 113.29-.09 226.16 5 330.51 1 15.75 1.76 31.7 6.29 42.38 5.43 13.44 36.66 23.8 104.6 27.63.27 11.83.6 23 1 34.46-110.63-3.22-216.86-13.81-302-29.13C219.07 935.63 352 1000 500 1000c276.15 0 500-223.87 500-500a497.6 497.6 0 0 0-87.34-282.31"/></g></g></svg>

package/astro.config.mjs

@@ -0,0 +1,3 @@
+import { createF5xcDocsConfig } from '@f5xc-salesdemos/docs-theme/config';
+
+export default createF5xcDocsConfig();

package/components/Banner.astro

@@ -0,0 +1,52 @@
+---
+import Default from '@astrojs/starlight/components/Banner.astro';
+
+const docsHome = process.env.DOCS_HOME || 'https://f5xc-salesdemos.github.io/docs/';
+const { sidebar, entry, siteTitle, editUrl } = Astro.locals.starlightRoute;
+
+const isIndexPage = entry.filePath ? /(?:^|[\\/])index\.mdx?$/.test(entry.filePath) : false;
+const hideBreadcrumbs = isIndexPage;
+
+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) || [];
+const fixedEditUrl = editUrl
+  ? editUrl.href.replace('/src/content/docs/', '/docs/')
+  : undefined;
+---
+
+<Default {...Astro.props}><slot /></Default>
+{!hideBreadcrumbs && (
+  <nav class="breadcrumbs" aria-label="Breadcrumb">
+    <ol>
+      <li><a href={docsHome}>Home</a></li>
+      <li><a href={import.meta.env.BASE_URL}>{siteTitle}</a></li>
+      {trail.map((crumb) => (
+        <li><span>{crumb.label}</span></li>
+      ))}
+      <li aria-current="page"><span>{entry.data.title}</span></li>
+    </ol>
+    {fixedEditUrl && (
+      <a href={fixedEditUrl} target="_blank" rel="noopener noreferrer" class="edit-link">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+          <path d="m15 5 4 4" />
+        </svg>
+        <span>Edit</span>
+      </a>
+    )}
+  </nav>
+)}

package/components/EditLink.astro

@@ -0,0 +1,3 @@
+---
+// Intentionally empty — edit link is provided by Banner.astro in the breadcrumb bar
+---

package/components/Footer.astro

@@ -0,0 +1,47 @@
+---
+import Default from '@astrojs/starlight/components/Footer.astro';
+import Icon from './Icon.astro';
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<div class="social-links">
+  <a href="https://www.facebook.com/f5incorporated" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
+    <Icon name="hashicorp-flight:facebook-color" size="1.5rem" />
+  </a>
+  <a href="https://x.com/F5" target="_blank" rel="noopener noreferrer" aria-label="X">
+    <Icon name="hashicorp-flight:twitter-x" size="1.5rem" />
+  </a>
+  <a href="https://www.linkedin.com/company/f5/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+    <Icon name="hashicorp-flight:linkedin-color" size="1.5rem" />
+  </a>
+  <a href="https://www.instagram.com/f5.global/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+    <Icon name="hashicorp-flight:instagram-color" size="1.5rem" />
+  </a>
+  <a href="https://www.youtube.com/user/f5networksinc" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
+    <Icon name="hashicorp-flight:youtube-color" size="1.5rem" />
+  </a>
+</div>
+
+<style>
+  .social-links {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1.25rem;
+    padding: 1rem 0 0.5rem;
+  }
+
+  .social-links a {
+    display: inline-flex;
+    transition: opacity 0.2s ease;
+  }
+
+  .social-links a:hover {
+    opacity: 0.7;
+  }
+
+  .social-links :global(svg) {
+    display: block;
+  }
+</style>

package/components/Icon.astro

@@ -0,0 +1,101 @@
+---
+import { Icon as StarlightIcon } from '@astrojs/starlight/components';
+import { hasExplicitColors } from '../src/utils/resolve-icon';
+
+interface Props {
+  name: string;
+  label?: string;
+  color?: string;
+  size?: string;
+  class?: string;
+}
+
+const { name, label, color, size, class: className } = Astro.props;
+const isScoped = name.includes(':');
+
+let svgBody = '';
+let viewBox = '0 0 24 24';
+let iconData: any;
+
+if (isScoped) {
+  const colonIndex = name.indexOf(':');
+  const prefix = name.slice(0, colonIndex);
+  const iconName = name.slice(colonIndex + 1);
+
+  switch (prefix) {
+    case 'lucide':
+      iconData = (await import('@iconify-json/lucide/icons.json')).default;
+      break;
+    case 'carbon':
+      iconData = (await import('@iconify-json/carbon/icons.json')).default;
+      break;
+    case 'mdi':
+      iconData = (await import('@iconify-json/mdi/icons.json')).default;
+      break;
+    case 'phosphor':
+      iconData = (await import('@iconify-json/ph/icons.json')).default;
+      break;
+    case 'tabler':
+      iconData = (await import('@iconify-json/tabler/icons.json')).default;
+      break;
+    case 'f5-brand':
+      iconData = (await import('@f5xc-salesdemos/icons-f5-brand/icons.json')).default;
+      break;
+    case 'f5xc':
+      iconData = (await import('@f5xc-salesdemos/icons-f5xc/icons.json')).default;
+      break;
+    case 'hashicorp-flight':
+      iconData = (await import('@f5xc-salesdemos/icons-hashicorp-flight/icons.json')).default;
+      break;
+    default:
+      throw new Error(
+        `Unknown icon prefix "${prefix}". Available: lucide, carbon, mdi, phosphor, tabler, f5-brand, f5xc, hashicorp-flight`
+      );
+  }
+
+  const icon = iconData.icons?.[iconName];
+  if (!icon) {
+    throw new Error(`Icon "${iconName}" not found in "${prefix}" icon set.`);
+  }
+
+  svgBody = icon.body;
+  const w = icon.width ?? iconData.width ?? 24;
+  const h = icon.height ?? iconData.height ?? 24;
+  viewBox = `0 0 ${w} ${h}`;
+}
+
+const isPalette = isScoped && (iconData?.info?.palette === true || hasExplicitColors(svgBody));
+
+const a11yAttrs = label
+  ? { 'aria-label': label }
+  : { 'aria-hidden': 'true' };
+
+const styleParts: string[] = [];
+if (color) styleParts.push(`--sl-icon-color: ${color}`);
+if (size) styleParts.push(`--sl-icon-size: ${size}`);
+const inlineStyle = styleParts.length ? styleParts.join('; ') : undefined;
+---
+
+{isScoped ? (
+  <><svg
+    {...a11yAttrs}
+    class={className}
+    width="16"
+    height="16"
+    {...(isPalette ? {} : { fill: "currentColor" })}
+    viewBox={viewBox}
+    style={inlineStyle}
+    set:html={svgBody}
+  /></>
+) : (
+  <StarlightIcon name={name as any} label={label} color={color} size={size} class={className} />
+)}
+
+<style>
+  svg {
+    color: var(--sl-icon-color);
+    font-size: var(--sl-icon-size, 1em);
+    width: 1em;
+    height: 1em;
+  }
+</style>

package/components/LinkCard.astro

@@ -0,0 +1,105 @@
+---
+import Icon from './Icon.astro';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
+	title: string;
+	description?: string;
+	icon?: string;
+}
+
+const { title, description, icon, ...attributes } = Astro.props;
+---
+
+<div class:list={['sl-link-card', { 'has-icon': !!icon }]}>
+	{icon && (
+		<span class="card-icon">
+			<Icon name={icon} />
+		</span>
+	)}
+	<span class="sl-flex stack">
+		<a {...attributes}>
+			<span class="title" set:html={title} />
+		</a>
+		{description && <span class="description" set:html={description} />}
+	</span>
+	<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
+</div>
+
+<style>
+	.sl-link-card {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		gap: 0.5rem;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 0.5rem;
+		padding: 1rem;
+		box-shadow: var(--f5-shadow-low);
+		position: relative;
+		transition: box-shadow var(--f5-transition-base),
+		            transform var(--f5-transition-base);
+	}
+
+	.sl-link-card.has-icon {
+		grid-template-columns: auto 1fr auto;
+	}
+
+	a {
+		text-decoration: none;
+		line-height: var(--sl-line-height-headings);
+	}
+
+	/* a11y fix for https://github.com/withastro/starlight/issues/487 */
+	a::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
+
+	.stack {
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.title {
+		color: var(--sl-color-white);
+		font-weight: 600;
+		font-size: var(--sl-text-lg);
+	}
+
+	.description {
+		color: var(--sl-color-gray-3);
+		line-height: 1.5;
+	}
+
+	.icon {
+		color: var(--sl-color-gray-3);
+	}
+
+	.card-icon {
+		color: var(--sl-color-white);
+		align-self: stretch;
+		position: relative;
+		aspect-ratio: 1;
+		max-height: 3rem;
+	}
+
+	.card-icon :global(svg) {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	/* Hover state */
+	.sl-link-card:hover {
+		background: var(--sl-color-gray-7, var(--sl-color-gray-6));
+		border-color: var(--sl-color-gray-2);
+		box-shadow: var(--f5-shadow-mid);
+		transform: translateY(-1px);
+	}
+
+	.sl-link-card:hover .icon {
+		color: var(--sl-color-white);
+	}
+</style>

package/components/MarkdownContent.astro

@@ -0,0 +1,7 @@
+---
+import StarlightVideosMarkdownContent from 'starlight-videos/components/MarkdownContent.astro'
+import ImageZoom from 'starlight-image-zoom/components/ImageZoom.astro'
+---
+
+<ImageZoom />
+<StarlightVideosMarkdownContent><slot /></StarlightVideosMarkdownContent>

package/components/SiteTitle.astro

@@ -0,0 +1,56 @@
+---
+import { logos } from 'virtual:starlight/user-images';
+import config from 'virtual:starlight/user-config';
+
+const docsHome = process.env.DOCS_HOME || 'https://f5xc-salesdemos.github.io/docs/';
+const { siteTitle } = Astro.locals.starlightRoute;
+---
+
+<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>
+  .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;
+    min-width: 0;
+  }
+  span {
+    overflow: hidden;
+  }
+  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>