@f5-sales-demo/docs-theme 4.11.4 → 4.11.6

package/components/Footer.astro

@@ -1,47 +1,23 @@
 ---
 import Default from '@astrojs/starlight/components/Footer.astro';
-import Icon from './Icon.astro';
 ---
 
 <Default {...Astro.props}><slot /></Default>
 
-{process.env.DOCS_PROFILE !== 'canonical-provider' && <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>}
+{process.env.DOCS_PROFILE !== 'canonical-provider' && <nav class="project-links" aria-label="Project information">
+  <a href="https://f5-sales-demo.github.io/en/ecosystem/">Ecosystem directory</a>
+  <a href="https://github.com/f5-sales-demo">Project sources</a>
+  <a href="https://docs.cloud.f5.com/">Official F5 documentation</a>
+</nav>}
 
 <style>
-  .social-links {
+  .project-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;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.5rem;
+    border-top: 1px solid var(--sl-color-gray-5);
+    margin-top: 2rem;
+    padding-block: 1rem;
   }
+  .project-links a { padding-block: 0.5rem; }
 </style>

package/components/Head.astro

@@ -0,0 +1,10 @@
+---
+import { pageTitle } from '../src/utils/page-title';
+
+const route = Astro.locals.starlightRoute;
+const head = route.head.map((entry) => entry.tag === 'title'
+  ? { ...entry, content: pageTitle(route.entry.data.title, route.siteTitle, entry.content || '') }
+  : entry);
+---
+
+{head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}

package/components/LinkCard.astro

@@ -18,7 +18,7 @@ if (attributes.href && localeSlug) {
 
 <div class:list={['sl-link-card', { 'has-icon': !!icon }]}>
   {icon && (
-    <span class="card-icon">
+    <span class="card-icon" aria-hidden="true">
       <Icon name={icon} />
     </span>
   )}
@@ -28,13 +28,13 @@ if (attributes.href && localeSlug) {
     </a>
     {description && <span class="description" set:html={description} />}
   </span>
-  <Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
+  <span aria-hidden="true"><Icon name="right-arrow" size="1.333em" class="icon rtl:flip" /></span>
 </div>
 
 <style>
   .sl-link-card {
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: minmax(0, 1fr) auto;
     gap: 0.5rem;
     border: 1px solid var(--sl-color-gray-5);
     border-radius: 0.5rem;
@@ -46,7 +46,7 @@ if (attributes.href && localeSlug) {
   }
 
   .sl-link-card.has-icon {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
   a {
@@ -62,7 +62,10 @@ if (attributes.href && localeSlug) {
   }
 
   .stack {
-    flex-direction: column;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    display: grid;
+    align-content: start;
     gap: 0.5rem;
   }
 
@@ -75,6 +78,7 @@ if (attributes.href && localeSlug) {
   .description {
     color: var(--sl-color-gray-3);
     line-height: 1.5;
+    margin: 0;
   }
 
   .icon {
@@ -83,10 +87,10 @@ if (attributes.href && localeSlug) {
 
   .card-icon {
     color: var(--sl-color-white);
-    align-self: stretch;
+    align-self: start;
     position: relative;
-    aspect-ratio: 1;
-    max-height: 3rem;
+    width: 3rem;
+    height: 3rem;
   }
 
   .card-icon :global(svg) {
@@ -96,6 +100,11 @@ if (attributes.href && localeSlug) {
     height: 100%;
   }
 
+  .sl-link-card:focus-within {
+    outline: 2px solid var(--sl-color-text-accent);
+    outline-offset: 3px;
+  }
+
   /* Hover state */
   .sl-link-card:hover {
     background: var(--sl-color-gray-7, var(--sl-color-gray-6));

package/components/ProviderHeader.astro

@@ -49,6 +49,11 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 			min-width: 0;
 		}
 
+		.right-group { display: none; }
+		@media (min-width: 90rem) {
+			.right-group { display: flex; }
+		}
+
 		.right-group,
 		.social-icons {
 			gap: 1rem;
@@ -71,7 +76,7 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 			align-items: center;
 		}
 
-		@media (min-width: 50rem) {
+		@media (min-width: 90rem) {
 			:global(:root[data-has-sidebar]) {
 				--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
 			}
@@ -90,9 +95,9 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 				display: grid;
 				grid-template-columns:
 					/* 1 (site title) */
-					auto
+					minmax(0, 1fr)
 					/* 2 (mega-menu nav) */
-					1fr
+					auto
 					/* 3 (search box) */
 					auto
 					/* 4 (right items) */

package/components/SharedHeader.astro

@@ -7,6 +7,7 @@ import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
 import config from 'virtual:starlight/user-config';
 import MegaMenu from './SharedMegaMenu.tsx';
 import MegaMenuMobile from './SharedMegaMenuMobile.tsx';
+import { federatedSearchSites } from '../src/utils/search-sites';
 
 /**
  * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
@@ -14,7 +15,7 @@ import MegaMenuMobile from './SharedMegaMenuMobile.tsx';
 const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
 ---
 
-<div class="header sl-mega-menu-header">
+<div class="header sl-mega-menu-header" data-search-sources={JSON.stringify(federatedSearchSites)}>
 	<div class="title-wrapper sl-flex">
 		<SiteTitle />
 	</div>
@@ -34,8 +35,38 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 	<div class="smm-mobile-toggle">
 		<MegaMenuMobile client:only="react" />
 	</div>
+	<details class="compact-preferences">
+		<summary aria-label="Display and language">Aa</summary>
+		<div class="preferences-panel"><ThemeSelect /><LanguageSelect /></div>
+	</details>
 </div>
 
+<script>
+	import { searchSource } from '../src/utils/search-source';
+	const header = document.querySelector<HTMLElement>('[data-search-sources]');
+	const sources = JSON.parse(header?.dataset.searchSources || '[]');
+	const annotateResults = () => {
+		for (const link of document.querySelectorAll<HTMLAnchorElement>('.pagefind-ui__result-link')) {
+			if (link.dataset.sourceAnnotated) continue;
+			link.dataset.sourceAnnotated = 'true';
+			const label = searchSource(link.href, sources);
+			if (!label) continue;
+			const source = document.createElement('span');
+			source.className = 'search-project-source';
+			source.textContent = label;
+			link.closest('.pagefind-ui__result-title')?.append(source);
+		}
+	};
+	new MutationObserver(annotateResults).observe(document.body, { childList: true, subtree: true });
+	document.addEventListener('keydown', (event) => {
+		const preferences = document.querySelector<HTMLDetailsElement>('.compact-preferences[open]');
+		if (event.key === 'Escape' && preferences) {
+			preferences.open = false;
+			preferences.querySelector('summary')?.focus();
+		}
+	});
+</script>
+
 <style>
 	@layer starlight.core {
 		.header {
@@ -55,6 +86,37 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 			min-width: 0;
 		}
 
+		.right-group { display: none; }
+		.compact-preferences { position: relative; flex-shrink: 0; }
+		.compact-preferences summary {
+			cursor: pointer;
+			padding: 0.75rem;
+			min-height: 44px;
+			list-style: none;
+		}
+		.preferences-panel {
+			position: absolute;
+			inset-inline-end: 0;
+			top: calc(100% + 0.5rem);
+			display: grid;
+			gap: 0.5rem;
+			padding: 0.75rem;
+			background: var(--sl-color-bg-nav);
+			border: 1px solid var(--sl-color-gray-5);
+			border-radius: 0.5rem;
+		}
+		:global(.search-project-source) {
+			display: block;
+			font-size: var(--sl-text-sm);
+			font-weight: 400;
+			color: var(--sl-color-gray-2);
+			margin-top: 0.25rem;
+		}
+		@media (min-width: 90rem) {
+			.right-group { display: flex; }
+			.compact-preferences { display: none; }
+		}
+
 		.right-group,
 		.social-icons {
 			gap: 1rem;
@@ -77,7 +139,7 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 			align-items: center;
 		}
 
-		@media (min-width: 50rem) {
+		@media (min-width: 90rem) {
 			:global(:root[data-has-sidebar]) {
 				--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
 			}
@@ -96,9 +158,9 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 				display: grid;
 				grid-template-columns:
 					/* 1 (site title) */
-					auto
+					minmax(0, 1fr)
 					/* 2 (mega-menu nav) */
-					1fr
+					auto
 					/* 3 (search box) */
 					auto
 					/* 4 (right items) */