@f5-sales-demo/docs-theme 4.11.7 → 4.12.0

package/components/Footer.astro

@@ -9,15 +9,3 @@ import Default from '@astrojs/starlight/components/Footer.astro';
   <a href="https://github.com/f5-sales-demo">Project sources</a>
   <a href="https://docs.cloud.f5.com/">Official F5 documentation</a>
 </nav>}
-
-<style>
-  .project-links {
-    display: flex;
-    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

@@ -1,10 +1,16 @@
 ---
+import { sharedMode, baseline } from '../src/shared/settings.mjs';
+const shared = sharedMode() !== 'local';
+const integrity = (receipt) => 'sha256-' + Buffer.from(receipt.sha256, 'hex').toString('base64');
 import { pageTitle } from '../src/utils/page-title';
 
 const route = Astro.locals.starlightRoute;
-const head = route.head.map((entry) => entry.tag === 'title'
+const head = route.head.filter(entry => !(shared && entry.tag === 'link' && entry.attrs?.rel === 'icon' && !process.env.DOCS_CUSTOM_FAVICON && process.env.GITHUB_REPOSITORY !== 'f5-sales-demo/canada')).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} />)}
+
+{shared && <link data-f5-baseline-css rel="stylesheet" href={baseline.assets.css.url} integrity={integrity(baseline.assets.css)} crossorigin="anonymous" />}
+{shared && !process.env.DOCS_CUSTOM_FAVICON && process.env.GITHUB_REPOSITORY !== 'f5-sales-demo/canada' && <link data-f5-shared-favicon rel="icon" type="image/svg+xml" href={baseline.assets.favicon.url} />}

package/components/LinkCard.astro

@@ -30,90 +30,3 @@ if (attributes.href && localeSlug) {
   </span>
   <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: minmax(0, 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 minmax(0, 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 {
-    min-width: 0;
-    overflow-wrap: anywhere;
-    display: grid;
-    align-content: start;
-    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;
-    margin: 0;
-  }
-
-  .icon {
-    color: var(--sl-color-gray-3);
-  }
-
-  .card-icon {
-    color: var(--sl-color-white);
-    align-self: start;
-    position: relative;
-    width: 3rem;
-    height: 3rem;
-  }
-
-  .card-icon :global(svg) {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    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));
-    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/LocalHeader.astro

@@ -0,0 +1,57 @@
+---
+import MegaMenu from './SharedMegaMenu.tsx';
+import MegaMenuMobile from './SharedMegaMenuMobile.tsx';
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
+import Search from 'virtual:starlight/components/Search';
+import SiteTitle from 'virtual:starlight/components/SiteTitle';
+import SocialIcons from 'virtual:starlight/components/SocialIcons';
+import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
+import config from 'virtual:starlight/user-config';
+import { sharedMode, baseline } from '../src/shared/settings.mjs';
+import { stagedProviderSections } from '../src/utils/provider-sections.ts';
+const mode = sharedMode();
+const providerSections = process.env.DOCS_PROFILE === 'canonical-provider' ? stagedProviderSections() : [];
+const base = (process.env.DOCS_BASE || '/').replace(/\/+$/, '') + '/';
+const consumer = { contract: 'v1', repository: process.env.GITHUB_REPOSITORY, documentBase: base, locale: Astro.currentLocale || 'en', mounts: { desktop: '#f5-ecosystem-desktop', mobile: '#f5-ecosystem-mobile' } };
+
+
+/**
+ * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
+ */
+const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
+---
+
+<div class="header sl-mega-menu-header" data-f5-shared-consumer={mode !== 'local' ? JSON.stringify(consumer) : undefined} data-f5-shared-baseline={mode !== 'local' ? JSON.stringify(baseline.pointer) : undefined}>
+	<div class="title-wrapper sl-flex">
+		<SiteTitle />
+	</div>
+	<nav class="smm-desktop-nav" id="f5-ecosystem-desktop" aria-label="Ecosystem">
+		<MegaMenu client:only="react" />
+	</nav>
+	<div class="sl-flex print:hidden">
+		{shouldRenderSearch && <Search />}
+	</div>
+	<div class="sl-hidden md:sl-flex print:hidden right-group">
+		<div class="sl-flex social-icons">
+			<SocialIcons />
+		</div>
+		<ThemeSelect />
+		<LanguageSelect />
+	</div>
+	<div class="smm-mobile-toggle" id="f5-ecosystem-mobile">
+		<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 { startSharedShell } from '../src/shared/bootstrap.mjs';
+  const header = document.querySelector<HTMLElement>('[data-f5-shared-consumer]');
+  if (header) startSharedShell(JSON.parse(header.dataset.f5SharedConsumer!), JSON.parse(header.dataset.f5SharedBaseline!)).catch(() => {});
+</script>
+{providerSections.length > 0 && <nav class="provider-local-nav" aria-label="Provider documentation">
+  {providerSections.map(section => <a href={`${base}${section.path}/`}>{section.label}</a>)}
+</nav>}

package/components/ProviderHeader.astro

@@ -1,121 +1,4 @@
 ---
-import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
-import Search from 'virtual:starlight/components/Search';
-import SiteTitle from 'virtual:starlight/components/SiteTitle';
-import SocialIcons from 'virtual:starlight/components/SocialIcons';
-import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
-import config from 'virtual:starlight/user-config';
-import megaMenuConfig from 'virtual:starlight-mega-menu/config';
-import MegaMenu from '@f5-sales-demo/starlight-mega-menu/components/MegaMenu.tsx';
-import MegaMenuMobile from '@f5-sales-demo/starlight-mega-menu/components/MegaMenuMobile.tsx';
-
-/**
- * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
- */
-const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
+import SharedHeader from "./SharedHeader.astro";
 ---
-
-<div class="header sl-mega-menu-header">
-	<div class="title-wrapper sl-flex">
-		<SiteTitle />
-	</div>
-	<nav class="smm-desktop-nav">
-		<MegaMenu client:only="react" config={megaMenuConfig} />
-	</nav>
-	<div class="sl-flex print:hidden">
-		{shouldRenderSearch && <Search />}
-	</div>
-	<div class="smm-mobile-toggle">
-		<MegaMenuMobile client:only="react" config={megaMenuConfig} />
-	</div>
-</div>
-
-<style>
-	@layer starlight.core {
-		.header {
-			display: flex;
-			gap: var(--sl-nav-gap);
-			justify-content: space-between;
-			align-items: center;
-			height: 100%;
-		}
-
-		.title-wrapper {
-			/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
-			overflow: clip;
-			/* Avoid clipping focus ring around link inside title wrapper. */
-			padding: 0.25rem;
-			margin: -0.25rem;
-			min-width: 0;
-		}
-
-		.right-group { display: none; }
-		@media (min-width: 90rem) {
-			.right-group { display: flex; }
-		}
-
-		.right-group,
-		.social-icons {
-			gap: 1rem;
-			align-items: center;
-		}
-		.social-icons::after {
-			content: '';
-			height: 2rem;
-			border-inline-end: 1px solid var(--sl-color-gray-5);
-		}
-
-		/* Desktop nav is hidden on small screens */
-		.smm-desktop-nav {
-			display: none;
-		}
-
-		/* Mobile toggle is visible on small screens */
-		.smm-mobile-toggle {
-			display: flex;
-			align-items: center;
-		}
-
-		@media (min-width: 90rem) {
-			:global(:root[data-has-sidebar]) {
-				--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
-			}
-			:global(:root:not([data-has-toc])) {
-				--__toc-width: 0rem;
-			}
-			.header {
-				--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
-				--__main-column-fr: calc(
-					(
-							100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
-								(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
-								var(--sl-content-width)
-						) / 2
-				);
-				display: grid;
-				grid-template-columns:
-					/* 1 (site title) */
-					minmax(0, 1fr)
-					/* 2 (mega-menu nav) */
-					auto
-					/* 3 (search box) */
-					auto
-					/* 4 (right items) */
-					auto;
-				align-content: center;
-			}
-
-			/* Show desktop nav, hide mobile toggle */
-			.smm-desktop-nav {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				min-width: 0;
-			}
-
-			.smm-mobile-toggle {
-				display: none;
-			}
-		}
-	}
-</style>
+<SharedHeader />

package/components/SharedHeader.astro

@@ -5,9 +5,13 @@ import SiteTitle from 'virtual:starlight/components/SiteTitle';
 import SocialIcons from 'virtual:starlight/components/SocialIcons';
 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';
+import { sharedMode, baseline } from '../src/shared/settings.mjs';
+import { stagedProviderSections } from '../src/utils/provider-sections.ts';
+const mode = sharedMode();
+const providerSections = process.env.DOCS_PROFILE === 'canonical-provider' ? stagedProviderSections() : [];
+const base = (process.env.DOCS_BASE || '/').replace(/\/+$/, '') + '/';
+const consumer = { contract: 'v1', repository: process.env.GITHUB_REPOSITORY, documentBase: base, locale: Astro.currentLocale || 'en', mounts: { desktop: '#f5-ecosystem-desktop', mobile: '#f5-ecosystem-mobile' } };
+
 
 /**
  * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
@@ -15,12 +19,13 @@ import { federatedSearchSites } from '../src/utils/search-sites';
 const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
 ---
 
-<div class="header sl-mega-menu-header" data-search-sources={JSON.stringify(federatedSearchSites)}>
+<div class="header sl-mega-menu-header" data-f5-shared-consumer={mode !== 'local' ? JSON.stringify(consumer) : undefined} data-f5-shared-baseline={mode !== 'local' ? JSON.stringify(baseline.pointer) : undefined}>
 	<div class="title-wrapper sl-flex">
 		<SiteTitle />
 	</div>
-	<nav class="smm-desktop-nav">
-		<MegaMenu client:only="react" />
+  {providerSections.length > 0 && <details class="provider-local-nav"><summary>Provider documentation</summary><nav aria-label="Provider documentation">{providerSections.map(section => <a href={`${base}${section.path}/`}>{section.label}</a>)}</nav></details>}
+	<nav class="smm-desktop-nav" id="f5-ecosystem-desktop" aria-label="Ecosystem">
+		<a data-f5-fallback href="https://f5-sales-demo.github.io/en/ecosystem/">Ecosystem directory</a>
 	</nav>
 	<div class="sl-flex print:hidden">
 		{shouldRenderSearch && <Search />}
@@ -32,8 +37,8 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 		<ThemeSelect />
 		<LanguageSelect />
 	</div>
-	<div class="smm-mobile-toggle">
-		<MegaMenuMobile client:only="react" />
+	<div class="smm-mobile-toggle" id="f5-ecosystem-mobile">
+		<a data-f5-fallback href="https://f5-sales-demo.github.io/en/ecosystem/">Ecosystem directory</a>
 	</div>
 	<details class="compact-preferences">
 		<summary aria-label="Display and language">Aa</summary>
@@ -42,143 +47,7 @@ const shouldRenderSearch = config.pagefind || config.components.Search !== '@ast
 </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();
-		}
-	});
+  import { startSharedShell } from '../src/shared/bootstrap.mjs';
+  const header = document.querySelector<HTMLElement>('[data-f5-shared-consumer]');
+  if (header) (window as any).F5SharedReadyV1 = startSharedShell(JSON.parse(header.dataset.f5SharedConsumer!), JSON.parse(header.dataset.f5SharedBaseline!)).catch(() => {});
 </script>
-
-<style>
-	@layer starlight.core {
-		.header {
-			display: flex;
-			gap: var(--sl-nav-gap);
-			justify-content: space-between;
-			align-items: center;
-			height: 100%;
-		}
-
-		.title-wrapper {
-			/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
-			overflow: clip;
-			/* Avoid clipping focus ring around link inside title wrapper. */
-			padding: 0.25rem;
-			margin: -0.25rem;
-			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;
-			align-items: center;
-		}
-		.social-icons::after {
-			content: '';
-			height: 2rem;
-			border-inline-end: 1px solid var(--sl-color-gray-5);
-		}
-
-		/* Desktop nav is hidden on small screens */
-		.smm-desktop-nav {
-			display: none;
-		}
-
-		/* Mobile toggle is visible on small screens */
-		.smm-mobile-toggle {
-			display: flex;
-			align-items: center;
-		}
-
-		@media (min-width: 90rem) {
-			:global(:root[data-has-sidebar]) {
-				--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
-			}
-			:global(:root:not([data-has-toc])) {
-				--__toc-width: 0rem;
-			}
-			.header {
-				--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
-				--__main-column-fr: calc(
-					(
-							100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
-								(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
-								var(--sl-content-width)
-						) / 2
-				);
-				display: grid;
-				grid-template-columns:
-					/* 1 (site title) */
-					minmax(0, 1fr)
-					/* 2 (mega-menu nav) */
-					auto
-					/* 3 (search box) */
-					auto
-					/* 4 (right items) */
-					auto;
-				align-content: center;
-			}
-
-			/* Show desktop nav, hide mobile toggle */
-			.smm-desktop-nav {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				min-width: 0;
-			}
-
-			.smm-mobile-toggle {
-				display: none;
-			}
-		}
-	}
-</style>

package/components/SiteTitle.astro

@@ -1,4 +1,6 @@
 ---
+import { sharedMode, baseline } from '../src/shared/settings.mjs';
+const shared = sharedMode() !== 'local';
 import config from 'virtual:starlight/user-config';
 import { logos } from 'virtual:starlight/user-images';
 
@@ -7,6 +9,7 @@ const { siteTitle } = Astro.locals.starlightRoute;
 ---
 
 <a href={docsHome} class="site-title sl-flex">
+  {shared && !config.logo && <img data-f5-shared-brand="logo" src={baseline.assets.logo.url} alt="F5 Distributed Cloud" width="200" height="40" />}
   {config.logo && logos.dark && (
     <>
       <img
@@ -31,30 +34,3 @@ const { siteTitle } = Astro.locals.starlightRoute;
     {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;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-  }
-  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%;
-    flex-shrink: 0;
-  }
-</style>