@eventcatalog/core 2.30.7 → 2.31.0

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/index.astro

@@ -3,7 +3,14 @@ import Footer from '@layouts/Footer.astro';
 
 import type { PageTypes } from '@types';
 import { getChangeLogs } from '@utils/collections/changelogs';
-import { RectangleGroupIcon, ServerIcon, BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import {
+  RectangleGroupIcon,
+  ServerIcon,
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  MagnifyingGlassIcon,
+  QueueListIcon,
+} from '@heroicons/react/24/outline';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { render, getEntry } from 'astro:content';
 import 'diff2html/bundles/css/diff2html.min.css';
@@ -15,7 +22,7 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { ClientRouter } from 'astro:transitions';
 
 export async function getStaticPaths() {
-  const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
+  const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows'];
   const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
   return allItems.flatMap((items, index) =>
@@ -44,7 +51,7 @@ const logs = await getChangeLogs(props);
 const { data } = props;
 const latestVersion = data.latestVersion;
 
-const renderedLogs = await logs.map(async (log) => {
+const renderedLogs = logs.map(async (log) => {
   const logEntry = await getEntry('changelogs', log.id);
   const { Content } = await render(logEntry as any);
   return {
@@ -104,6 +111,9 @@ const getBadge = () => {
       class: 'text-yellow-400',
     };
   }
+  if (props.collection === 'flows') {
+    return { backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon, class: 'text-teal-400' };
+  }
 };
 
 const badges = [getBadge()];

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -11,12 +11,12 @@ import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
 import MessageSideBar from '@components/SideBars/MessageSideBar.astro';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 import ChannelSideBar from '@components/SideBars/ChannelSideBar.astro';
+import FlowSideBar from '@components/SideBars/FlowSideBar.astro';
 
 import { QueueListIcon, RectangleGroupIcon, ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import type { PageTypes } from '@types';
 
 import { buildUrl } from '@utils/url-builder';
-import { getFlows } from '@utils/collections/flows';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { ClientRouter } from 'astro:transitions';
 import { render } from 'astro:content';
@@ -24,16 +24,9 @@ import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 
 import config from '@config';
 
-type PageTypesWithFlows = PageTypes | 'flows';
-
 export async function getStaticPaths() {
-  const loaders = {
-    ...pageDataLoader,
-    flows: getFlows,
-  };
-
-  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'channels'];
-  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
+  const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'channels'];
+  const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
   return allItems.flatMap((items, index) =>
     items.map((item) => ({
@@ -123,10 +116,19 @@ const getSpecificationBadges = () => {
 };
 
 const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
+
+// Index only the latest version
+const pagefindAttributes =
+  props.data.version === props.data.latestVersion
+    ? {
+        'data-pagefind-body': '',
+        'data-pagefind-meta': `title:${pageTitle}`,
+      }
+    : {};
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
-  <main class="flex sm:px-8 docs-layout h-full">
+  <main class="flex sm:px-8 docs-layout h-full" {...pagefindAttributes}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
         <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">
@@ -159,7 +161,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
           </div>
         </div>
 
-        <div>
+        <div data-pagefind-ignore>
           {
             props.data.version !== props.data.latestVersion && (
               <div class="rounded-md bg-gradient-to-r from-purple-50 to-purple-100 p-4 not-prose my-4">
@@ -198,7 +200,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
         <div class="prose prose-md py-4 w-full">
           <Content components={components(props)} />
         </div>
-        <div>
+        <div data-pagefind-ignore>
           <!-- @ts-ignore -->
           <SchemaViewer id={props.data.id} catalog={props.catalog} filePath={props.filePath} />
           <NodeGraph
@@ -215,7 +217,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
         </div>
         <Footer />
       </div>
-      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2">
+      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2" data-pagefind-ignore>
         <!-- @ts-ignore -->
         {
           (props?.collection === 'events' || props.collection === 'commands' || props.collection === 'queries') && (
@@ -225,6 +227,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
         {props?.collection === 'services' && <ServiceSideBar service={props} />}
         {props?.collection === 'domains' && <DomainSideBar domain={props} />}
         {props?.collection === 'channels' && <ChannelSideBar channel={props} />}
+        {props?.collection === 'flows' && <FlowSideBar flow={props} />}
       </aside>
     </div>
     <ClientRouter />
@@ -265,12 +268,126 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
       if (document.getElementsByClassName('mermaid').length > 0) {
         renderDiagrams(graphs);
       }
+
+      // Set up TOC highlighting and scrolling
+      setupTOCHighlighting();
     });
 
     /**
-     * @params {HTMLCollectionOf<HTMLElement>} graphs
+     * Setup TOC highlighting and scrolling
+     */
+    function setupTOCHighlighting() {
+      // Check if there's a sidebar with navigation
+      const sidebarNav = document.querySelector('aside nav');
+      if (!sidebarNav) return;
+
+      const observerOptions = {
+        rootMargin: '0px 0px -40% 0px',
+        threshold: 0.1,
+      };
+
+      // Flag to temporarily disable observer after click
+      let observerPaused = false;
+
+      /**
+       * Highlights a TOC item and scrolls it into view
+       * @param {string} id - The ID of the heading to highlight in the TOC
+       */
+      function highlightTocItem(id) {
+        // Remove active class from all links
+        document.querySelectorAll('.active-toc-item').forEach((link) => {
+          link.classList.remove('active-toc-item', 'text-primary-600', 'font-medium');
+          link.classList.add('text-gray-400');
+        });
+
+        // Add active class to current link
+        const tocLink = document.querySelector(`aside nav a[href="#${id}"]`);
+        if (tocLink) {
+          tocLink.classList.add('active-toc-item', 'text-primary-600', 'font-medium');
+          tocLink.classList.remove('text-gray-400');
+
+          // Scroll the highlighted item into view with a small delay to ensure DOM updates first
+          setTimeout(() => {
+            tocLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+          }, 10);
+        }
+      }
+
+      // Set up the intersection observer for scrolling
+      const observer = new IntersectionObserver((entries) => {
+        // If observer is paused, don't process entries
+        if (observerPaused) return;
+
+        entries.forEach((entry) => {
+          try {
+            const id = entry.target.getAttribute('id');
+            if (entry.isIntersecting && id) {
+              highlightTocItem(id);
+            }
+          } catch (entryError) {
+            console.error('Error processing intersection entry:', entryError);
+          }
+        });
+      }, observerOptions);
+
+      // Find all headings in the content area
+      const prose = document.querySelector('.prose');
+      if (!prose) return;
+
+      // First try to find headings with IDs
+      const headings = prose.querySelectorAll('h1[id], h2[id], h3[id]');
+
+      if (headings.length > 0) {
+        headings.forEach((heading) => {
+          observer.observe(heading);
+        });
+      } else {
+        // Fallback: If no headings with IDs found, attach IDs to them
+        const allHeadings = prose.querySelectorAll('h1, h2, h3');
+
+        allHeadings.forEach((heading) => {
+          // Only add ID if it doesn't exist
+          if (!heading.id) {
+            const text = heading.textContent || '';
+            const slug = text
+              .toLowerCase()
+              .replace(/[^\w\s-]/g, '')
+              .replace(/\s+/g, '-');
+            heading.id = slug;
+          }
+          observer.observe(heading);
+        });
+      }
+
+      // Add click event listeners to all TOC links
+      const tocLinks = document.querySelectorAll('aside nav a[href^="#"]');
+      tocLinks.forEach((link) => {
+        link.addEventListener('click', (e) => {
+          // Get the ID from the href attribute
+          const hrefAttr = link.getAttribute('href');
+          if (!hrefAttr) return;
+
+          const id = hrefAttr.substring(1);
+
+          // Highlight the clicked item
+          highlightTocItem(id);
+
+          // Temporarily pause the observer to prevent immediate highlighting changes
+          observerPaused = true;
+
+          // Resume the observer after a delay
+          setTimeout(() => {
+            observerPaused = false;
+          }, 500);
+        });
+      });
+    }
+
+    /**
+     * Renders mermaid diagrams in the page
+     * @param {HTMLCollectionOf<HTMLElement>} graphs - The collection of mermaid graph elements
      */
-    async function renderDiagrams(graphs: any) {
+    async function renderDiagrams(graphs) {
       const { default: mermaid } = await import('mermaid');
 
       if (window.eventcatalog.mermaid) {
@@ -278,7 +395,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
         const { iconPacks = [] } = window.eventcatalog.mermaid ?? {};
 
         if (iconPacks.length > 0) {
-          const iconPacksToRegister = iconPacks.map((name: string) => {
+          const iconPacksToRegister = iconPacks.map((name) => {
             return {
               name,
               icons,

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/index.astro

@@ -35,7 +35,7 @@ export async function getStaticPaths() {
 }
 
 // @ts-ignore
-const { data, catalog, filePath } = Astro.props;
+const { collection, data, catalog, filePath } = Astro.props;
 const fileName = data.specifications?.openapiPath || 'openapi.yml';
 
 const directory = path.dirname(filePath || '');
@@ -44,12 +44,24 @@ const fileExists = fs.existsSync(pathToSpec);
 
 let content = '';
 
+// Capitalize the first letter of a string
+const pageTitle = `${collection} | ${data.name} | OpenAPI Spec`.replace(/^\w/, (c) => c.toUpperCase());
+
+// Index only the latest version
+const pagefindAttributes =
+  data.version === data.latestVersion
+    ? {
+        'data-pagefind-body': '',
+        'data-pagefind-meta': `title:${pageTitle}`,
+      }
+    : {};
+
 if (fileExists) {
   content = fs.readFileSync(pathToSpec, 'utf8');
 }
 ---
 
-<VerticalSideBarLayout title="OpenAPI Spec">
+<VerticalSideBarLayout title={pageTitle}>
   {
     !fileExists ? (
       <div class="text-center h-screen  flex flex-col justify-center ">
@@ -60,7 +72,13 @@ if (fileExists) {
         </p>
       </div>
     ) : (
-      <div>
+      <div {...pagefindAttributes}>
+        {
+          // Currently, Pagefind does not index metadata (such as the title),
+          // so we need to ensure it is included as text on the page.
+          // https://github.com/CloudCannon/pagefind/issues/437
+        }
+        <h2 class="hidden">{pageTitle}</h2>
         <OpenAPISpec client:only="react" spec={content} />
       </div>
     )

package/eventcatalog/src/pages/docs/[type]/[id]/language/[dictionaryId]/index.astro

@@ -68,7 +68,7 @@ const badges = [
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={ubiquitousLanguage.summary}>
-  <main class="flex sm:px-8 docs-layout h-full max-w-7xl">
+  <main class="flex sm:px-8 docs-layout h-full max-w-7xl" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
         <nav class="flex mb-4" aria-label="Breadcrumb">

package/eventcatalog/src/pages/docs/[type]/[id]/language.astro

@@ -34,7 +34,7 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
-  <main class="flex sm:px-8 docs-layout h-full">
+  <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
         <nav class="flex mb-4" aria-label="Breadcrumb">

package/eventcatalog/src/pages/docs/custom/[...path]/index.astro

@@ -0,0 +1,260 @@
+---
+import CustomDocumentationPage from '@enterprise/custom-documentation/pages/index.astro';
+import { getCollection } from 'astro:content';
+import type { GetStaticPaths } from 'astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { Code } from 'astro-expressive-code/components';
+import { isEventCatalogProEnabled } from '@utils/feature';
+import path from 'node:path';
+import fs from 'node:fs';
+
+const PROJECT_DIR = path.resolve(process.env.PROJECT_DIR || process.cwd());
+const CUSTOM_DOCS_DIR = path.resolve(PROJECT_DIR, 'docs/');
+const directoryExists = fs.existsSync(CUSTOM_DOCS_DIR);
+
+export const getStaticPaths = (async () => {
+  const docs = await getCollection('customPages');
+  const paths = docs.map((doc) => ({
+    params: { path: doc.id.replace('docs/', '') },
+    props: doc,
+  }));
+  console.log(
+    'paths',
+    paths.map((path) => path.params.path)
+  );
+  return paths;
+}) satisfies GetStaticPaths;
+
+const props = Astro.props;
+
+// Example for folder structure
+const folderStructureExample = `my-catalog/
+  └── docs/
+      ├── getting-started/
+      │   ├── 01-introduction.mdx
+      │   └── 02-quick-start.mdx
+      ├── architecture-decisions/
+      │   ├── 01-what-are-architecture-decisions.mdx
+      │   ├── 02-how-to-create-architecture-decisions.mdx
+      │   ├── published/
+      │   │   ├── 01-adr-001-event-driven.mdx
+      │   │   └── 02-adr-002-api-first.mdx
+      │   └── drafts/
+      │       ├── 01-adr-003-microservices.mdx
+      │       └── 02-adr-004-monolith.mdx
+      └`;
+// Example MDX file content
+const mdxFileExample = `---
+title: Getting Started
+description: How to get started with our event-driven architecture
+---
+
+# Getting Started with our Event-Driven Architecture
+
+This guide will help you understand how our services communicate using events.
+
+## Prerequisites
+
+- Understanding of basic messaging patterns
+- Node.js installed on your machine
+
+## Key Concepts
+
+Events are the backbone of our architecture. They represent facts that have happened in our system.
+`;
+
+// Example config file
+const configExample = `// eventcatalog.config.js
+  
+module.exports = {
+  // Your existing config...
+  
+  customDocs: {
+    sidebar: [
+      {
+        label: 'Getting Started',
+        badge: {
+          text: 'New', color: 'green'
+        },
+        collapsed: false,
+        items: [
+          { label: 'Introduction', slug: 'getting-started/01-introduction' },
+          { label: 'Quick Start', slug: 'getting-started/02-quick-start' }
+        ]
+      },
+      {
+        label: 'Architecture Decisions',
+        badge: {
+          text: 'New', color: 'green'
+        },
+        collapsed: true,
+        items: [
+          { 
+            label: 'What are Architecture Decisions?', 
+            slug: 'architecture-decisions/01-what-are-architecture-decisions' 
+          },
+          { 
+            label: 'How to Create Architecture Decisions', 
+            slug: 'architecture-decisions/02-how-to-create-architecture-decisions' 
+          },
+          {
+            label: 'Published ADRs',
+            autogenerated: { 
+              directory: 'architecture-decisions/published', 
+              collapsed: true 
+            }
+          },
+          {
+            label: 'Draft ADRs',
+            autogenerated: { 
+              directory: 'architecture-decisions/drafts', 
+              collapsed: true 
+            }
+          }
+        ]
+      }
+    ]
+  }
+}`;
+---
+
+{
+  directoryExists && isEventCatalogProEnabled() ? (
+    <CustomDocumentationPage {...props} />
+  ) : (
+    <VerticalSideBarLayout title="Custom Documentation">
+      <body class="min-h-screen  font-inter">
+        <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
+          <div class="mb-12">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+              <div>
+                <div class="flex flex-wrap items-center gap-3 mb-3">
+                  <h1 class="text-4xl font-semibold text-gray-900 font-inter">Custom Documentation</h1>
+                  <div class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 border border-purple-200 shadow-sm">
+                    Pro feature
+                  </div>
+                </div>
+                <p class="text-base mb-0 text-gray-600 max-w-3xl">
+                  Add custom documentation to EventCatalog to create a unified source of truth for your team. Document your
+                  architecture decisions, patterns, and guidelines.
+                </p>
+              </div>
+              <div class="flex space-x-4 shrink-0">
+                <a
+                  href="https://www.eventcatalog.dev/docs/custom-documentation"
+                  class="inline-flex items-center justify-center px-5 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                >
+                  Read documentation &rarr;
+                </a>
+                {!isEventCatalogProEnabled() && (
+                  <a
+                    href="https://www.eventcatalog.dev/pro/trial"
+                    class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 shadow-sm"
+                  >
+                    Start 14-day trial
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <h2 class="text-2xl font-semibold mb-2 text-gray-900">Setup Guide</h2>
+          <p class="text-gray-600 mb-8 max-w-3xl">
+            Custom documentation let's you bring any documentation into EventCatalog. This is useful for documenting your
+            architecture decisions, patterns, and guidelines. Follow these steps to get started:
+          </p>
+
+          <div class="space-y-10 mb-12">
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  1
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Create the content structure</h3>
+                  <p class="text-gray-600 mb-4">Create a folder structure in your directory to organize your documentation.</p>
+                  <Code code={folderStructureExample} lang="bash" frame="terminal" />
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  2
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Add MDX files</h3>
+                  <p class="text-gray-600 mb-4">Create MDX files with frontmatter and markdown content.</p>
+                  <Code code={mdxFileExample} lang="mdx" frame="terminal" />
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  3
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Update your eventcatalog.config.js file</h3>
+                  <p class="text-gray-600 mb-4">
+                    Add the customDocs configuration to your eventcatalog.config.js file to define your sidebar structure.
+                  </p>
+                  <Code code={configExample} lang="js" frame="terminal" />
+                  <p class="text-gray-600 mt-4">
+                    This configuration defines the sidebar structure for your custom documentation:
+                  </p>
+                  <ul class="list-disc list-inside text-gray-600 mt-2 ml-2 space-y-1">
+                    <li>
+                      <strong>label</strong>: The display name for each sidebar section
+                    </li>
+                    <li>
+                      <strong>badge</strong>: Optional badge to highlight new sections
+                    </li>
+                    <li>
+                      <strong>collapsed</strong>: Whether the section is collapsed by default
+                    </li>
+                    <li>
+                      <strong>autogenerated</strong>: Automatically generate sidebar items from a directory
+                    </li>
+                    <li>
+                      <strong>slug</strong>: Direct link to a specific page
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  4
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Restart EventCatalog</h3>
+                  <p class="text-gray-600 mb-4">
+                    After configuring your documentation, restart EventCatalog to see your custom documentation.
+                  </p>
+                  <div class="mb-4">
+                    <Code code="npm run dev" lang="bash" frame="terminal" />
+                  </div>
+                  <p class="text-gray-600 mb-4">
+                    Once restarted, you'll see your custom documentation displayed with the sidebar structure you defined:
+                  </p>
+                  <div class="border border-gray-200 rounded-lg overflow-hidden">
+                    <img
+                      src="/images/custom-docs-placeholder.png"
+                      alt="Example of custom documentation interface"
+                      class="w-full"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </body>
+    </VerticalSideBarLayout>
+  )
+}

package/eventcatalog/src/pages/docs/teams/[id]/index.astro

@@ -69,11 +69,13 @@ const ownedQueriesList = queries.map((p) => ({
   collection: p.collection,
   tag: `v${p.data.version}`,
 }));
+
+const pageTitle = `Team | ${props.data.name}`;
 ---
 
-<VerticalSideBarLayout title={`Team | ${props.data.name}`} description={props.data.summary}>
+<VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
   <div class="flex min-h-screen docs-layout sm:px-8">
-    <main class="flex-1 w-full pr-10 pt-4">
+    <main class="flex-1 w-full pr-10 pt-4" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
       <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
 
       <div class="border-b border-gray-200 py-4 pb-2">
@@ -131,7 +133,7 @@ const ownedQueriesList = queries.map((p) => ({
         <NodeGraph id={props.data.id} type={props?.catalog?.type} nodes={props.nodes} masterNode={{ name: props.data.name, id: props.data.id }} client:load />
       </div> -->
     </main>
-    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto">
+    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto" data-pagefind-ignore>
       <div class="divide-y-2 divide-gray-100">
         <PillListFlat
           color="pink"

package/eventcatalog/src/pages/docs/users/[id]/index.astro

@@ -59,10 +59,12 @@ const associatedTeams = teams.map((o) => ({
   badge: 'Team',
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
+
+const pageTitle = `User | ${props.data.name}`;
 ---
 
-<VerticalSideBarLayout title={`User | ${props.data.name}`}>
-  <main class="flex sm:px-8 docs-layout h-full">
+<VerticalSideBarLayout title={pageTitle}>
+  <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-6 pr-8 overflow-y-auto py-4">
         <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
@@ -105,7 +107,7 @@ const associatedTeams = teams.map((o) => ({
             </div>
           </div>
         </div>
-        <div class="border-b border-gray-200">
+        <div class="border-b border-gray-200" data-pagefind-ignore>
           <div class="mx-auto max-w-7xl px-6 lg:px-8">
             <div class="mx-auto max-w-2xl lg:max-w-none">
               <dl
@@ -139,7 +141,10 @@ const associatedTeams = teams.map((o) => ({
           <Content components={components(props)} />
         </div>
       </div>
-      <aside class="hidden lg:block sticky top-0 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto py-2">
+      <aside
+        class="hidden lg:block sticky top-0 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto py-2"
+        data-pagefind-ignore
+      >
         <div class="divide-y-2 divide-gray-100 pr-6">
           {
             ownedDomainsList.length > 0 && (