@f5-sales-demo/docs-theme 4.4.3 → 4.4.5

package/components/ProviderHeader.astro

@@ -0,0 +1,116 @@
+---
+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';
+---
+
+<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,
+		.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: 50rem) {
+			: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) */
+					auto
+					/* 2 (mega-menu nav) */
+					1fr
+					/* 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/index.ts

@@ -25,7 +25,10 @@ export default function f5xcDocsTheme(): StarlightPlugin {
           components: {
             ...config.components,
             ...(process.env.DOCS_PROFILE === 'canonical-provider'
-              ? { Sidebar: '@f5-sales-demo/docs-theme/components/ProviderSidebar.astro' }
+              ? {
+                  Header: '@f5-sales-demo/docs-theme/components/ProviderHeader.astro',
+                  Sidebar: '@f5-sales-demo/docs-theme/components/ProviderSidebar.astro',
+                }
               : {}),
             Banner: '@f5-sales-demo/docs-theme/components/Banner.astro',
             EditLink: '@f5-sales-demo/docs-theme/components/EditLink.astro',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@f5-sales-demo/docs-theme",
-  "version": "4.4.3",
+  "version": "4.4.5",
   "description": "F5 Distributed Cloud branded Starlight documentation theme",
   "type": "module",
   "engines": {
@@ -42,7 +42,8 @@
     "./src/i18n/prompt.ts": "./src/i18n/prompt.ts",
     "./src/utils/localize-ecosystem-href.ts": "./src/utils/localize-ecosystem-href.ts",
     "./canonical-route-middleware": "./canonical-route-middleware.ts",
-    "./components/ProviderSidebar.astro": "./components/ProviderSidebar.astro"
+    "./components/ProviderSidebar.astro": "./components/ProviderSidebar.astro",
+    "./components/ProviderHeader.astro": "./components/ProviderHeader.astro"
   },
   "files": [
     "index.ts",

package/src/utils/share-provider-assets.mjs

@@ -1,6 +1,6 @@
 import { createHash } from 'node:crypto';
 import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
-import { join } from 'node:path';
+import { join, posix } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const hash = (value) => createHash('sha256').update(value).digest('hex').slice(0, 24);
@@ -11,6 +11,7 @@ export async function shareProviderAssets(root, base = '/') {
   const assetRoot = join(root, '_shared');
   const assets = new Map();
   const prefix = `${base.replace(/\/$/, '')}/_shared/`;
+  const tokenStyles = new Map();
   let saved = 0;
   await mkdir(assetRoot, { recursive: true });
   for (const file of files) {
@@ -23,14 +24,32 @@ export async function shareProviderAssets(root, base = '/') {
       assets.set(name, body);
       return `<script${attrs} src="${prefix}${name}"></script>`;
     });
+    html = html.replace(/<span style="(--0:[^"]+)"/g, (_, style) => {
+      const name = `t${hash(style).slice(0, 10)}`;
+      if (style.length <= name.length + 2) return `<span style="${style}"`;
+      tokenStyles.set(name, style);
+      return `<span class="${name}"`;
+    });
+    html = html.replace(/href="https:\/\/f5-sales-demo.github.io(\/terraform-provider-xcsh\/[^"#]*)/g, 'href="$1');
+    if (tokenStyles.size) html = html.replace('</head>', `<link rel="stylesheet" href="${prefix}tokens.css"></head>`);
     const islands = [];
     html = html.replace(/<astro-island\b[\s\S]*?<\/astro-island>/g, (island) => {
       islands.push(island);
       return `<!--provider-island-${islands.length - 1}-->`;
     });
+    const pagePath = `${base.replace(/\/$/, '')}/${file.replace(/index\.html$/, '')}`;
+    html = html.replace(/<a\b([^>]*?)href="([^"#]+)(#[^"]*)?"/g, (original, attrs, href, fragment = '') => {
+      if (!href.startsWith(`${base.replace(/\/$/, '')}/`)) return original;
+      const target = href.split('?')[0];
+      const query = href.slice(target.length);
+      let relative = posix.relative(pagePath, target) || '.';
+      if (target.endsWith('/')) relative += '/';
+      relative += query + fragment;
+      return relative.length < (href + fragment).length ? `<a${attrs}href="${relative}"` : original;
+    });
     html = html.replace(/<svg\b([^>]*)>([\s\S]*?)<\/svg>/g, (original, attrs, body) => {
       // Sprite definitions and interactive SVG content must remain inline.
-      if (/<(?:symbol|script|foreignObject)\b/.test(body) || /\bid=/.test(attrs) || /\bon\w+=/.test(attrs))
+      if (/<(?:use|symbol|script|foreignObject)\b/.test(body) || /\bid=/.test(attrs) || /\bon\w+=/.test(attrs))
         return original;
       const name = `${hash(body)}.svg`;
       assets.set(name, `<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon">${body}</symbol></svg>`);
@@ -40,6 +59,8 @@ export async function shareProviderAssets(root, base = '/') {
     saved += Buffer.byteLength(before) - Buffer.byteLength(html);
     await writeFile(path, html);
   }
+  if (tokenStyles.size)
+    assets.set('tokens.css', [...tokenStyles].map(([name, style]) => `.${name}{${style}}`).join('\n'));
   let assetBytes = 0;
   for (const [name, body] of assets) {
     await writeFile(join(assetRoot, name), body);

package/src/utils/share-provider-assets.test.ts

@@ -23,3 +23,35 @@ it('shares identical generated assets, preserving script order and SVG dimension
     await rm(root, { recursive: true, force: true });
   }
 });
+
+it('keeps already shared SVG use elements unchanged on repeated passes', async () => {
+  const root = await mkdtemp(join(tmpdir(), 'shared-provider-repeat-'));
+  try {
+    const html = '<svg width="16"><use href="/shared/icon.svg#icon"></use></svg>';
+    await writeFile(join(root, 'page.html'), html);
+    await shareProviderAssets(root, '/provider/');
+    expect(await readFile(join(root, 'page.html'), 'utf8')).toBe(html);
+  } finally {
+    await rm(root, { recursive: true, force: true });
+  }
+});
+
+it('shortens internal HTML links without changing resolved fragment destinations', async () => {
+  const root = await mkdtemp(join(tmpdir(), 'provider-links-'));
+  try {
+    const { mkdir } = await import('node:fs/promises');
+    await mkdir(join(root, 'resources/demo'), { recursive: true });
+    const href = '/provider/preview/main/resources/demo/properties/#schema-name';
+    await writeFile(join(root, 'resources/demo/index.html'), `<a href="${href}">Property</a>`);
+    await shareProviderAssets(root, '/provider/preview/main/');
+    const html = await readFile(join(root, 'resources/demo/index.html'), 'utf8');
+    const match = /href="([^"]+)"/.exec(html);
+    if (!match) throw new Error('missing link');
+    expect(new URL(match[1], 'https://example.test/provider/preview/main/resources/demo/').href).toBe(
+      `https://example.test${href}`,
+    );
+    expect(match[1]).toBe('properties/#schema-name');
+  } finally {
+    await rm(root, { recursive: true, force: true });
+  }
+});