@f5xc-salesdemos/docs-theme 2.0.0

package/route-middleware.ts

@@ -0,0 +1,69 @@
+import { defineRouteMiddleware } from '@astrojs/starlight/route-data';
+import type { StarlightRouteData } from '@astrojs/starlight/route-data';
+
+type SidebarEntry = StarlightRouteData['sidebar'][number];
+
+function isIndexPage(filePath: string | undefined): boolean {
+  if (!filePath) return false;
+  return /(?:^|[\\/])index\.mdx?$/.test(filePath);
+}
+
+function hrefToSlug(href: string): string {
+  const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+  let s = href;
+  if (base && s.startsWith(base)) s = s.slice(base.length);
+  s = s.replace(/^\/+|\/+$/g, '');
+  if (s.endsWith('.html')) s = s.slice(0, -5);
+  if (s === 'index') s = '';
+  return s;
+}
+
+// Discover all index pages at build time via Vite glob — no astro:content needed
+const indexPaths = Object.keys(
+  import.meta.glob(
+    ['/src/content/docs/**/index.md', '/src/content/docs/**/index.mdx'],
+    { eager: false }
+  )
+);
+
+const indexSlugs = new Set<string>(
+  indexPaths.map((p) =>
+    p.replace(/^\/src\/content\/docs\//, '').replace(/\/?index\.mdx?$/, '')
+  )
+);
+
+function filterIndexPages(
+  entries: SidebarEntry[],
+  slugs: Set<string>
+): SidebarEntry[] {
+  return entries.reduce<SidebarEntry[]>((acc, entry) => {
+    if (entry.type === 'link') {
+      const slug = hrefToSlug(entry.href);
+      if (!slugs.has(slug)) {
+        acc.push(entry);
+      }
+    } else {
+      acc.push({
+        ...entry,
+        entries: filterIndexPages(entry.entries, slugs),
+      });
+    }
+    return acc;
+  }, []);
+}
+
+export const onRequest = defineRouteMiddleware(async (context, next) => {
+  const route = context.locals.starlightRoute;
+  const entry = route.entry;
+
+  if (isIndexPage(entry.filePath)) {
+    // Unconditionally hide TOC on index pages
+    route.toc = undefined;
+  }
+
+  if (indexSlugs.size > 0) {
+    route.sidebar = filterIndexPages(route.sidebar, indexSlugs);
+  }
+
+  await next();
+});

package/src/content.config.ts

@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};

package/src/plugins/remark-mermaid.mjs

@@ -0,0 +1,24 @@
+import { visit } from 'unist-util-visit';
+
+export default function remarkMermaid() {
+  return (tree) => {
+    visit(tree, 'code', (node, index, parent) => {
+      if (node.lang !== 'mermaid') return;
+      if (index === undefined || !parent) return;
+
+      const escaped = node.value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+
+      parent.children[index] = {
+        type: 'html',
+        value: `<div class="mermaid-container" data-mermaid-src="${escaped}"><pre class="mermaid">${escaped}</pre></div>`,
+      };
+    });
+
+    // Note: Mermaid CDN script is loaded via Starlight head config in astro.config.mjs.
+    // Script injection via remark HTML nodes is stripped by MDX/Astro for security.
+  };
+}

package/src/utils/resolve-icon.ts

@@ -0,0 +1,69 @@
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+/**
+ * Returns true if the SVG body contains explicit color fills (hex, CSS vars,
+ * gradient refs, named colors) — i.e. anything other than "none" or "currentColor".
+ */
+export function hasExplicitColors(body: string): boolean {
+  const fills = body.match(/fill="([^"]*)"/g) || [];
+  return fills.some(f => f !== 'fill="none"' && f !== 'fill="currentColor"');
+}
+
+/**
+ * Resolves a `prefix:name` icon identifier to a complete SVG string
+ * using the installed Iconify JSON packages. Designed for synchronous
+ * use at module scope (e.g. in config.ts default values).
+ */
+export function resolveIcon(name: string): string {
+  const colonIndex = name.indexOf(':');
+  if (colonIndex === -1) {
+    throw new Error(`Invalid icon name "${name}". Expected "prefix:name" format.`);
+  }
+  const prefix = name.slice(0, colonIndex);
+  const iconName = name.slice(colonIndex + 1);
+
+  let iconData: any;
+  switch (prefix) {
+    case 'lucide':
+      iconData = require('@iconify-json/lucide/icons.json');
+      break;
+    case 'carbon':
+      iconData = require('@iconify-json/carbon/icons.json');
+      break;
+    case 'mdi':
+      iconData = require('@iconify-json/mdi/icons.json');
+      break;
+    case 'phosphor':
+      iconData = require('@iconify-json/ph/icons.json');
+      break;
+    case 'tabler':
+      iconData = require('@iconify-json/tabler/icons.json');
+      break;
+    case 'f5-brand':
+      iconData = require('@f5xc-salesdemos/icons-f5-brand/icons.json');
+      break;
+    case 'f5xc':
+      iconData = require('@f5xc-salesdemos/icons-f5xc/icons.json');
+      break;
+    case 'hashicorp-flight':
+      iconData = require('@f5xc-salesdemos/icons-hashicorp-flight/icons.json');
+      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.`);
+  }
+
+  const w = icon.width ?? iconData.width ?? 24;
+  const h = icon.height ?? iconData.height ?? 24;
+  const isPalette = iconData.info?.palette === true || hasExplicitColors(icon.body);
+  const fillAttr = isPalette ? '' : ' fill="currentColor"';
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 ${w} ${h}"${fillAttr}>${icon.body}</svg>`;
+}