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

package/components/Footer.astro

@@ -5,7 +5,7 @@ import Icon from './Icon.astro';
 
 <Default {...Astro.props}><slot /></Default>
 
-<div class="social-links">
+{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>
@@ -21,7 +21,7 @@ import Icon from './Icon.astro';
   <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>
+</div>}
 
 <style>
   .social-links {

package/components/MarkdownContent.astro

@@ -7,7 +7,5 @@ import ImageZoom from 'starlight-image-zoom/components/ImageZoom.astro';
 import StarlightVideosMarkdownContent from 'starlight-videos/components/MarkdownContent.astro';
 ---
 
-<ImageZoom />
-<StarlightVideosMarkdownContent>
-  {canonical ? <ProviderReference><slot /></ProviderReference> : <slot />}
-</StarlightVideosMarkdownContent>
+{!canonical && <ImageZoom />}
+{canonical ? <div class="sl-markdown-content"><ProviderReference><slot /></ProviderReference></div> : <StarlightVideosMarkdownContent><slot /></StarlightVideosMarkdownContent>}

package/components/ProviderSidebar.astro

@@ -0,0 +1,6 @@
+---
+import ProviderSidebarTree from './ProviderSidebarTree.astro';
+
+const { sidebar } = Astro.locals.starlightRoute;
+---
+<nav aria-label="Provider reference"><ProviderSidebarTree entries={sidebar} /></nav>

package/components/ProviderSidebarTree.astro

@@ -0,0 +1,21 @@
+---
+import type { StarlightRouteData } from '@astrojs/starlight/route-data';
+
+interface Props {
+  entries: StarlightRouteData['sidebar'];
+}
+const { entries } = Astro.props;
+---
+<ul>{entries.map(entry => <li>{entry.type === 'link'
+  ? <a href={entry.href} aria-current={entry.isCurrent ? 'page' : undefined}>{entry.label}</a>
+  : <details open={!entry.collapsed}><summary>{entry.label}</summary><Astro.self entries={entry.entries} /></details>}
+</li>)}</ul>
+<style>
+ul { list-style: none; padding: 0; margin: 0; }
+ul ul { padding-inline-start: .75rem; border-inline-start: 1px solid var(--sl-color-gray-5); }
+li { margin: .3rem 0; overflow-wrap: anywhere; }
+a { display: block; padding: .2rem .4rem; color: var(--sl-color-gray-2); text-decoration: none; font-size: var(--sl-text-sm); }
+a:hover { color: var(--sl-color-white); }
+a[aria-current] { background: var(--sl-color-accent-low); color: var(--sl-color-accent-high); border-inline-start: 2px solid var(--sl-color-accent); }
+summary { cursor: pointer; padding: .25rem; font-weight: 600; font-size: var(--sl-text-sm); }
+</style>

package/config.ts

@@ -33,6 +33,7 @@ import { sidebarTranslations } from './src/i18n/translations.ts';
 import remarkMermaid from './src/plugins/remark-mermaid.mjs';
 import { providerMegaMenu } from './src/utils/canonical-provider.ts';
 import { resolveMegaMenuIcon } from './src/utils/resolve-icon.ts';
+import providerSharedAssets from './src/utils/share-provider-assets.mjs';
 import { buildSubcategorySidebar } from './src/utils/subcategory-sidebar.ts';
 
 export type { LocaleConfig } from './src/i18n/locales.ts';
@@ -712,7 +713,7 @@ export function createF5xcDocsConfig(options: F5xcDocsConfigOptions = {}) {
     }
   }
   const megaMenuItems = options.megaMenuItems || (canonicalProvider ? providerMegaMenu(base) : defaultMegaMenuItems);
-  const head = options.head || defaultHead;
+  const head = options.head || (canonicalProvider ? [] : defaultHead);
   const logo = options.logo || { src: '@f5-sales-demo/docs-theme/assets/f5-distributed-cloud.svg' };
   const additionalRemarkPlugins = options.additionalRemarkPlugins || [];
   const additionalIntegrations = options.additionalIntegrations || [];
@@ -774,8 +775,7 @@ export function createF5xcDocsConfig(options: F5xcDocsConfigOptions = {}) {
       progressRingColor: '#e4002b',
       showOnHomepage: false,
     }),
-    starlightHeadingBadges(),
-    starlightPageActions(),
+    ...(!canonicalProvider ? [starlightHeadingBadges(), starlightPageActions()] : []),
     starlightIconsPlugin(),
     ...(openAPISpecs.length > 0
       ? [
@@ -870,7 +870,10 @@ export function createF5xcDocsConfig(options: F5xcDocsConfigOptions = {}) {
     site,
     base,
     ...(canonicalProvider
-      ? { experimental: { collectionStorage: { type: 'chunked' as const, chunkSize: 1024 * 1024 } } }
+      ? {
+          experimental: { collectionStorage: { type: 'chunked' as const, chunkSize: 1024 * 1024 } },
+          vite: { build: { assetsInlineLimit: 0 } },
+        }
       : {}),
     ...(resolvedLocales ? { redirects: { '/': `${normalizedBase}/${resolvedDefaultLocale}/` } } : {}),
     markdown: {
@@ -920,6 +923,7 @@ export function createF5xcDocsConfig(options: F5xcDocsConfigOptions = {}) {
         ],
       }),
       react(),
+      ...(canonicalProvider ? [providerSharedAssets()] : []),
       ...additionalIntegrations,
     ],
   });

package/index.ts

@@ -24,6 +24,9 @@ export default function f5xcDocsTheme(): StarlightPlugin {
           ],
           components: {
             ...config.components,
+            ...(process.env.DOCS_PROFILE === 'canonical-provider'
+              ? { 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',
             Footer: '@f5-sales-demo/docs-theme/components/Footer.astro',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@f5-sales-demo/docs-theme",
-  "version": "4.4.1",
+  "version": "4.4.3",
   "description": "F5 Distributed Cloud branded Starlight documentation theme",
   "type": "module",
   "engines": {
@@ -41,7 +41,8 @@
     "./src/i18n/translator.ts": "./src/i18n/translator.ts",
     "./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"
+    "./canonical-route-middleware": "./canonical-route-middleware.ts",
+    "./components/ProviderSidebar.astro": "./components/ProviderSidebar.astro"
   },
   "files": [
     "index.ts",

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

@@ -0,0 +1,61 @@
+import { createHash } from 'node:crypto';
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const hash = (value) => createHash('sha256').update(value).digest('hex').slice(0, 24);
+// Input is Astro-generated HTML. Keep each asset's original execution position
+// and SVG attributes; only identical generated bytes share a file.
+export async function shareProviderAssets(root, base = '/') {
+  const files = (await readdir(root, { recursive: true })).filter((file) => file.endsWith('.html'));
+  const assetRoot = join(root, '_shared');
+  const assets = new Map();
+  const prefix = `${base.replace(/\/$/, '')}/_shared/`;
+  let saved = 0;
+  await mkdir(assetRoot, { recursive: true });
+  for (const file of files) {
+    const path = join(root, file);
+    const before = await readFile(path, 'utf8');
+    let html = before.replace(/<script\b([^>]*)>([\s\S]*?)<\/script>/g, (original, attrs, body) => {
+      if (/\bsrc\s*=/.test(attrs) || !body.trim() || /type=["'](?:application\/|text\/template)/.test(attrs))
+        return original;
+      const name = `${hash(body)}.js`;
+      assets.set(name, body);
+      return `<script${attrs} src="${prefix}${name}"></script>`;
+    });
+    const islands = [];
+    html = html.replace(/<astro-island\b[\s\S]*?<\/astro-island>/g, (island) => {
+      islands.push(island);
+      return `<!--provider-island-${islands.length - 1}-->`;
+    });
+    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))
+        return original;
+      const name = `${hash(body)}.svg`;
+      assets.set(name, `<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon">${body}</symbol></svg>`);
+      return `<svg${attrs}><use href="${prefix}${name}#icon"></use></svg>`;
+    });
+    html = html.replace(/<!--provider-island-(\d+)-->/g, (_, index) => islands[Number(index)]);
+    saved += Buffer.byteLength(before) - Buffer.byteLength(html);
+    await writeFile(path, html);
+  }
+  let assetBytes = 0;
+  for (const [name, body] of assets) {
+    await writeFile(join(assetRoot, name), body);
+    assetBytes += Buffer.byteLength(body);
+  }
+  return { pages: files.length, assets: assets.size, savedBytes: saved - assetBytes };
+}
+
+export default function providerSharedAssets() {
+  return {
+    name: 'f5-canonical-shared-assets',
+    hooks: {
+      'astro:build:done': async ({ dir, logger }) => {
+        const result = await shareProviderAssets(fileURLToPath(dir), process.env.DOCS_BASE || '/');
+        logger.info(`Shared canonical assets: ${JSON.stringify(result)}`);
+      },
+    },
+  };
+}

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

@@ -0,0 +1,25 @@
+import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { expect, it } from 'vitest';
+import { shareProviderAssets } from './share-provider-assets.mjs';
+
+it('shares identical generated assets, preserving script order and SVG dimensions', async () => {
+  const root = await mkdtemp(join(tmpdir(), 'shared-provider-'));
+  try {
+    const text =
+      '<h1>Reference</h1><script>window.example=1;</script><svg width="16" viewBox="0 0 24 24"><path d="M1 2"/></svg><script src="keep.js"></script>';
+    await writeFile(join(root, 'one.html'), text);
+    await writeFile(join(root, 'two.html'), text);
+    const result = await shareProviderAssets(root, '/provider/version/');
+    expect(result.assets).toBe(2);
+    const html = await readFile(join(root, 'one.html'), 'utf8');
+    expect(html).toContain('<h1>Reference</h1>');
+    expect(html).toMatch(/<script src="\/provider\/version\/_shared\/[a-f0-9]+\.js"><\/script>/);
+    expect(html).toContain('<svg width="16" viewBox="0 0 24 24"><use');
+    expect(html).toContain('<script src="keep.js"></script>');
+    expect(await readFile(join(root, 'two.html'), 'utf8')).toBe(html);
+  } finally {
+    await rm(root, { recursive: true, force: true });
+  }
+});