@eventcatalog/core 2.45.1 → 2.45.3

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.45.1";
+var version = "2.45.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-77HCL77S.js";
-import "../chunk-DDM6QEBV.js";
+} from "../chunk-ZOCINDXG.js";
+import "../chunk-KLNIUFPG.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.45.1";
+var version = "2.45.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-P23CLNWF.js";
-import "../chunk-77HCL77S.js";
-import "../chunk-DDM6QEBV.js";
+} from "../chunk-YIR6C2W3.js";
+import "../chunk-ZOCINDXG.js";
+import "../chunk-KLNIUFPG.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-DDM6QEBV.js → chunk-KLNIUFPG.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.45.1";
+var version = "2.45.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-P23CLNWF.js → chunk-YIR6C2W3.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-77HCL77S.js";
+} from "./chunk-ZOCINDXG.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-77HCL77S.js → chunk-ZOCINDXG.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-DDM6QEBV.js";
+} from "./chunk-KLNIUFPG.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.45.1";
+var version = "2.45.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-DDM6QEBV.js";
+} from "./chunk-KLNIUFPG.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.45.1";
+var version = "2.45.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-DCLTVJDP.js";
 import {
   log_build_default
-} from "./chunk-P23CLNWF.js";
-import "./chunk-77HCL77S.js";
+} from "./chunk-YIR6C2W3.js";
+import "./chunk-ZOCINDXG.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-EXAALOQA.js";
 import {
   VERSION
-} from "./chunk-DDM6QEBV.js";
+} from "./chunk-KLNIUFPG.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

package/eventcatalog/astro.config.mjs

@@ -9,7 +9,8 @@ import remarkDirective from 'remark-directive';
 import { remarkDirectives } from "./src/remark-plugins/directives"
 import node from '@astrojs/node';
 import remarkComment from 'remark-comment'
-import auth from 'auth-astro';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 /** @type {import('bin/eventcatalog.config').Config} */
 import config from './eventcatalog.config';
@@ -60,6 +61,17 @@ export default defineConfig({
       // https://docs.astro.build/en/guides/integrations-guide/mdx/#optimize
       optimize: config.mdxOptimize || false,
       remarkPlugins: [remarkDirective, remarkDirectives, remarkComment, mermaid],
+      rehypePlugins: [
+        rehypeSlug,
+        [
+          rehypeAutolinkHeadings,
+          {
+            behavior: 'append',
+            properties: { className: ['anchor-link'] },
+            
+          },
+        ],
+      ],
       gfm: true,
     }),
     config.output !== 'server' && pagefind(),

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaProperty.astro

@@ -7,9 +7,10 @@ interface Props {
   isRequired: boolean;
   level: number;
   isListItem?: boolean;
+  expand?: boolean;
 }
 
-const { name, details, isRequired, level, isListItem = false } = Astro.props;
+const { name, details, isRequired, level, isListItem = false, expand = false } = Astro.props;
 
 const hasNestedProperties = details.type === 'object' && details.properties && Object.keys(details.properties).length > 0;
 const hasArrayItems = details.type === 'array' && details.items;
@@ -34,12 +35,12 @@ const contentId = `prop-${name}-${level}-${Math.random().toString(36).substring(
       isCollapsible && (
         <button
           type="button"
-          aria-expanded="false"
+          aria-expanded={expand ? 'true' : 'false'}
           aria-controls={contentId}
           class="property-toggle text-gray-500 hover:text-gray-700 pt-0.5 focus:outline-none w-3 text-center flex-shrink-0"
         >
-          <span class="icon-collapsed font-mono text-xs">&gt;</span>
-          <span class="icon-expanded font-mono text-xs hidden">v</span>
+          <span class:list={['icon-collapsed font-mono text-xs', { hidden: expand }]}>&gt;</span>
+          <span class:list={['icon-expanded font-mono text-xs', { hidden: !expand }]}>v</span>
         </button>
       )
     }
@@ -124,7 +125,7 @@ const contentId = `prop-${name}-${level}-${Math.random().toString(36).substring(
       {
         (hasNestedProperties || hasArrayItems) && (
           // class:list with conditional object is standard and should be safe
-          <div id={contentId} class:list={['nested-content mt-1', { hidden: isCollapsible }]}>
+          <div id={contentId} class:list={['nested-content mt-1', { hidden: isCollapsible && !expand }]}>
             {/* Recursive component calls */}
             {hasNestedProperties &&
               details.properties &&
@@ -134,6 +135,7 @@ const contentId = `prop-${name}-${level}-${Math.random().toString(36).substring(
                   details={nestedDetails}
                   isRequired={details.required?.includes(nestedName) ?? false}
                   level={level + 1}
+                  expand={expand}
                 />
               ))}
 
@@ -148,6 +150,7 @@ const contentId = `prop-${name}-${level}-${Math.random().toString(36).substring(
                       isRequired={details.items.required?.includes(itemPropName) ?? false}
                       level={level + 1}
                       isListItem={true}
+                      expand={expand}
                     />
                   ))}
                 {(details.items.allOf || details.items.oneOf || details.items.$ref) && !details.items.properties && (

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -9,9 +9,36 @@ interface Props {
   maxHeight: string;
   file: string;
   id: string;
+  expand?: boolean | string;
+  search?: boolean | string;
 }
 
-const { id, file, title, maxHeight, schema } = Astro.props;
+const { id, file, title, maxHeight, schema, expand = false, search = true } = Astro.props;
+
+// Convert string props to booleans (MDX passes strings)
+const expandBool = expand === true || expand === 'true';
+const searchBool = search !== false && search !== 'false';
+
+// This will be used to pass expand state via data attribute
+const expandData = expandBool ? 'true' : 'false';
+const searchData = searchBool ? 'true' : 'false';
+
+// Count total properties recursively
+function countProperties(obj: any): number {
+  if (!obj || typeof obj !== 'object') return 0;
+
+  let count = 0;
+  if (obj.properties) {
+    count += Object.keys(obj.properties).length;
+    Object.values(obj.properties).forEach((prop: any) => {
+      count += countProperties(prop);
+    });
+  }
+  if (obj.items) {
+    count += countProperties(obj.items);
+  }
+  return count;
+}
 
 // Function to merge allOf schemas
 function mergeAllOfSchemas(schemaWithProcessor: any): any {
@@ -188,18 +215,84 @@ function processSchema(schema: any, rootSchema?: any): any {
 const processedSchema = processSchema(schema);
 const { description, properties, required = [], variants } = processedSchema;
 
+// Count total properties after processing
+const totalProperties = countProperties(processedSchema);
+
 // Generate a unique ID for this instance
-const instanceId = `${id}-${file}-${Math.random().toString(36).substring(2, 9)}`;
+const instanceId = `${id}-${Math.random().toString(36).substring(2, 9)}`;
 ---
 
-<div id={`${id}-${file}-SchemaViewer-client`} class="not-prose my-4">
+<div id={id} class="not-prose my-4" data-expand={expandData} data-search={searchData}>
   {title && <h2 class="text-3xl font-bold mb-2 !mt-0">{title}</h2>}
   <div
-    class="schema-viewer p-4 bg-white overflow-y-auto rounded-lg border border-gray-100 shadow-sm font-sans"
+    class="schema-viewer p-4 pt-0 bg-white overflow-y-auto rounded-lg border border-gray-100 shadow-sm font-sans"
     style={{
-      maxHeight: maxHeight ? `${maxHeight}em` : `100em`,
+      maxHeight: maxHeight ? `${maxHeight}px` : `30em`,
+      minHeight: '15em',
     }}
   >
+    {
+      searchBool && (
+        <div
+          class="schema-toolbar sticky top-0 z-10 bg-white pt-4 px-4 -mx-4 mb-4 pb-3 border-b border-gray-100 shadow-sm"
+          id={`${instanceId}-toolbar`}
+        >
+          <div class="flex flex-col sm:flex-row gap-3">
+            <div class="flex-1 relative">
+              <input
+                type="text"
+                id={`${instanceId}-search`}
+                placeholder="Search properties..."
+                class="w-full px-3 py-1.5 pr-20 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+              <div
+                class="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1"
+                id={`${instanceId}-nav-buttons`}
+              >
+                <button
+                  id={`${instanceId}-prev-match`}
+                  class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  disabled
+                  title="Previous match"
+                >
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+                <button
+                  id={`${instanceId}-next-match`}
+                  class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  disabled
+                  title="Next match"
+                >
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                id={`${instanceId}-expand-all`}
+                class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+              >
+                Expand All
+              </button>
+              <button
+                id={`${instanceId}-collapse-all`}
+                class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+              >
+                Collapse All
+              </button>
+              <div class="text-xs text-gray-500">
+                {totalProperties} {totalProperties === 1 ? 'property' : 'properties'}
+              </div>
+            </div>
+          </div>
+          <div id={`${instanceId}-search-results`} class="mt-2 text-xs text-gray-600 hidden" />
+        </div>
+      )
+    }
     {description && <p class="text-gray-600 text-xs mb-5">{description}</p>}
 
     {
@@ -222,10 +315,32 @@ const instanceId = `${id}-${file}-${Math.random().toString(36).substring(2, 9)}`
 
     {
       properties && (
-        <div id={`${instanceId}-properties`}>
-          {Object.entries(properties).map(([name, details]) => (
-            <SchemaProperty name={name} details={details} isRequired={variants ? false : required.includes(name)} level={0} />
-          ))}
+        <div>
+          <div id={`${instanceId}-properties`}>
+            {Object.entries(properties).map(([name, details]) => (
+              <SchemaProperty
+                name={name}
+                details={details}
+                isRequired={variants ? false : required.includes(name)}
+                level={0}
+                expand={expandBool}
+              />
+            ))}
+          </div>
+          <div id={`${instanceId}-no-results`} class="hidden text-center py-8">
+            <div class="text-gray-400 text-sm">
+              <svg class="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+              <p>No properties match your search</p>
+              <p class="text-xs mt-1">Try a different search term or clear the search to see all properties</p>
+            </div>
+          </div>
         </div>
       )
     }
@@ -234,7 +349,233 @@ const instanceId = `${id}-${file}-${Math.random().toString(36).substring(2, 9)}`
   </div>
 </div>
 
-<script define:vars={{ instanceId, variants }}>
+<script define:vars={{ instanceId, variants, id, file }}>
+  // Check if expand is set via data attribute (from portal movement)
+  function checkAndExpandAll() {
+    const schemaViewerClient = document.getElementById(`${id}-${file}-SchemaViewer-client`);
+    if (schemaViewerClient && schemaViewerClient.getAttribute('data-expand') === 'true') {
+      // Find all toggle buttons within this schema viewer
+      const toggleButtons = schemaViewerClient.querySelectorAll('.property-toggle');
+      toggleButtons.forEach((button) => {
+        if (button.getAttribute('aria-expanded') === 'false') {
+          button.click(); // Trigger the existing toggle logic
+        }
+      });
+    }
+  }
+
+  // Setup search and utilities
+  function setupSchemaUtilities() {
+    const schemaViewerClient = document.getElementById(id);
+    if (!schemaViewerClient || schemaViewerClient.getAttribute('data-search') !== 'true') return;
+
+    const searchInput = document.getElementById(`${instanceId}-search`);
+    const expandAllBtn = document.getElementById(`${instanceId}-expand-all`);
+    const collapseAllBtn = document.getElementById(`${instanceId}-collapse-all`);
+    const searchResults = document.getElementById(`${instanceId}-search-results`);
+    const propertiesContainer = document.getElementById(`${instanceId}-properties`);
+    const noResultsMessage = document.getElementById(`${instanceId}-no-results`);
+    const prevMatchBtn = document.getElementById(`${instanceId}-prev-match`);
+    const nextMatchBtn = document.getElementById(`${instanceId}-next-match`);
+
+    let currentMatches = [];
+    let currentMatchIndex = -1;
+
+    if (!searchInput || !propertiesContainer) return;
+
+    // Expand All functionality
+    if (expandAllBtn) {
+      expandAllBtn.addEventListener('click', () => {
+        const toggleButtons = schemaViewerClient.querySelectorAll('.property-toggle');
+        toggleButtons.forEach((button) => {
+          if (button.getAttribute('aria-expanded') === 'false') {
+            button.click();
+          }
+        });
+      });
+    }
+
+    // Collapse All functionality
+    if (collapseAllBtn) {
+      collapseAllBtn.addEventListener('click', () => {
+        const toggleButtons = schemaViewerClient.querySelectorAll('.property-toggle');
+        toggleButtons.forEach((button) => {
+          if (button.getAttribute('aria-expanded') === 'true') {
+            button.click();
+          }
+        });
+      });
+    }
+
+    // Helper functions
+    function scrollToMatch(container) {
+      container.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest',
+      });
+    }
+
+    function updateMatchDisplay() {
+      // Remove previous current match highlighting
+      currentMatches.forEach((match, index) => {
+        match.classList.remove('search-current-match');
+        if (index === currentMatchIndex) {
+          match.classList.add('search-current-match');
+        }
+      });
+
+      // Update navigation buttons
+      if (prevMatchBtn && nextMatchBtn) {
+        prevMatchBtn.disabled = currentMatches.length === 0 || currentMatchIndex <= 0;
+        nextMatchBtn.disabled = currentMatches.length === 0 || currentMatchIndex >= currentMatches.length - 1;
+      }
+
+      // Update search results with current position
+      if (searchResults && currentMatches.length > 0) {
+        searchResults.textContent = `${currentMatchIndex + 1} of ${currentMatches.length} ${currentMatches.length === 1 ? 'match' : 'matches'}`;
+      }
+    }
+
+    function performSearch(searchTerm) {
+      const propertyContainers = propertiesContainer.querySelectorAll('.property-container');
+      currentMatches = [];
+      currentMatchIndex = -1;
+
+      if (searchTerm === '') {
+        // Reset search
+        propertyContainers.forEach((container) => {
+          container.classList.remove('search-match', 'search-no-match', 'search-current-match', 'search-dimmed');
+          const nameEl = container.querySelector('.font-semibold');
+          if (nameEl) {
+            nameEl.innerHTML = nameEl.textContent;
+          }
+        });
+        searchResults.classList.add('hidden');
+        if (noResultsMessage) {
+          noResultsMessage.classList.add('hidden');
+        }
+        updateMatchDisplay();
+
+        // Scroll back to top when search is cleared
+        // Use the same container that we're already working with
+        const scrollableContainer = propertiesContainer.closest('.schema-viewer');
+        if (scrollableContainer) {
+          scrollableContainer.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+          });
+        }
+        return;
+      }
+
+      // Find all matches
+      propertyContainers.forEach((container) => {
+        const nameEl = container.querySelector('.font-semibold');
+
+        if (!nameEl) return;
+
+        const propName = nameEl.textContent.toLowerCase();
+
+        if (propName.includes(searchTerm)) {
+          container.classList.add('search-match');
+          container.classList.remove('search-dimmed');
+          currentMatches.push(container);
+
+          // Highlight the search term in the property name
+          const regex = new RegExp(`(${searchTerm})`, 'gi');
+          nameEl.innerHTML = nameEl.textContent.replace(regex, '<mark class="bg-yellow-200 rounded px-0.5">$1</mark>');
+
+          // Expand parent containers to show the match
+          let parent = container.parentElement;
+          while (parent && parent.id !== `${instanceId}-properties`) {
+            if (parent.classList.contains('nested-content') && parent.classList.contains('hidden')) {
+              const parentPropertyContainer = parent.closest('.property-container');
+              if (parentPropertyContainer) {
+                const toggleBtn = parentPropertyContainer.querySelector('.property-toggle');
+                if (toggleBtn && toggleBtn.getAttribute('aria-expanded') === 'false') {
+                  toggleBtn.click();
+                }
+              }
+            }
+            parent = parent.parentElement;
+          }
+        } else {
+          container.classList.remove('search-match', 'search-current-match');
+          container.classList.add('search-dimmed');
+          nameEl.innerHTML = nameEl.textContent;
+        }
+      });
+
+      // Show results
+      if (searchResults) {
+        searchResults.classList.remove('hidden');
+        if (currentMatches.length === 0) {
+          searchResults.textContent = 'No properties found';
+          searchResults.classList.add('text-red-600');
+          searchResults.classList.remove('text-gray-600');
+          if (noResultsMessage) {
+            noResultsMessage.classList.remove('hidden');
+          }
+        } else {
+          searchResults.classList.remove('text-red-600');
+          searchResults.classList.add('text-gray-600');
+          if (noResultsMessage) {
+            noResultsMessage.classList.add('hidden');
+          }
+          // Go to first match
+          currentMatchIndex = 0;
+          scrollToMatch(currentMatches[0]);
+        }
+      }
+
+      updateMatchDisplay();
+    }
+
+    // Search functionality
+    let searchTimeout;
+    searchInput.addEventListener('input', (e) => {
+      clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(() => {
+        const searchTerm = e.target.value.toLowerCase().trim();
+        performSearch(searchTerm);
+      }, 300);
+    });
+
+    // Navigation functionality
+    if (prevMatchBtn) {
+      prevMatchBtn.addEventListener('click', () => {
+        if (currentMatchIndex > 0) {
+          currentMatchIndex--;
+          scrollToMatch(currentMatches[currentMatchIndex]);
+          updateMatchDisplay();
+        }
+      });
+    }
+
+    if (nextMatchBtn) {
+      nextMatchBtn.addEventListener('click', () => {
+        if (currentMatchIndex < currentMatches.length - 1) {
+          currentMatchIndex++;
+          scrollToMatch(currentMatches[currentMatchIndex]);
+          updateMatchDisplay();
+        }
+      });
+    }
+
+    // Keyboard navigation
+    searchInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (e.shiftKey && prevMatchBtn && !prevMatchBtn.disabled) {
+          prevMatchBtn.click();
+        } else if (!e.shiftKey && nextMatchBtn && !nextMatchBtn.disabled) {
+          nextMatchBtn.click();
+        }
+      }
+    });
+  }
+
   if (variants) {
     const selector = document.getElementById(`${instanceId}-variant-selector`);
     const propertiesContainer = document.getElementById(`${instanceId}-properties`);
@@ -267,10 +608,42 @@ const instanceId = `${id}-${file}-${Math.random().toString(36).substring(2, 9)}`
     // Initialize with first variant
     updateRequiredFields();
   }
+
+  // Check expand state after page loads and after portal movement
+  document.addEventListener('astro:page-load', () => {
+    // Small delay to ensure portal movement has completed
+    setTimeout(() => {
+      checkAndExpandAll();
+      setupSchemaUtilities();
+    }, 100);
+  });
+
+  // Also check immediately in case the component is already in place
+  checkAndExpandAll();
+  setupSchemaUtilities();
 </script>
 
 <style>
   .schema-viewer code {
     font-family: 'Courier New', Courier, monospace;
   }
+
+  /* Search highlighting styles */
+  .search-dimmed {
+    opacity: 0.4;
+    transition: opacity 0.2s ease;
+  }
+
+  .search-match {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  .search-current-match {
+    background-color: rgba(59, 130, 246, 0.1);
+    border-left: 3px solid #3b82f6;
+    padding-left: 8px;
+    margin-left: -11px;
+    transition: all 0.2s ease;
+  }
 </style>

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewerPortal.tsx

@@ -1,5 +1,16 @@
 const SchemaViewerPortal = (props: any) => {
-  return <div id={`${props.id}-${props.file}-SchemaViewer-portal`} />;
+  // Convert string props to booleans (MDX passes strings)
+  const expandBool = props.expand === true || props.expand === 'true';
+  const searchBool = props.search !== false && props.search !== 'false';
+
+  return (
+    <div
+      id={`${props.id}-${props.file}-SchemaViewer-portal`}
+      data-expand={expandBool ? 'true' : 'false'}
+      data-max-height={props.maxHeight}
+      data-search={searchBool ? 'true' : 'false'}
+    />
+  );
 };
 
 export default SchemaViewerPortal;

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewerRoot.astro

@@ -15,7 +15,7 @@ try {
   const schemaViewers = getMDXComponentsByName(file, 'SchemaViewer');
 
   // Loop around all the possible SchemaViewers in the file.
-  const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
+  const getAllComponents = schemaViewers.map(async (schemaViewerProps: any, index: number) => {
     const schemaPath = path.join(path.dirname(filePath), schemaViewerProps.file);
     const exists = existsSync(schemaPath);
     let schema;
@@ -42,6 +42,7 @@ try {
       schemaPath,
       ...schemaViewerProps,
       render,
+      index,
     };
   });
 
@@ -59,7 +60,7 @@ try {
         if (!schema.render) return null;
         return (
           <div>
-            {schema.exists && <SchemaViewerClient {...schema} />}
+            {schema.exists && <SchemaViewerClient {...schema} id={`${schema.id}-${schema.file}-SchemaViewer-client`} />}
 
             {/* User has tried to load the schema, but it was not found on file system */}
             {!schema.exists && (
@@ -83,8 +84,33 @@ try {
   function moveSchemaViewerToPortal(schema) {
     const portalId = `${schema.id}-${schema.file}-SchemaViewer-portal`;
     const schemaViewerContainer = document.getElementById(portalId);
-    if (schemaViewerContainer) {
-      schemaViewerContainer.appendChild(document.getElementById(`${schema.id}-${schema.file}-SchemaViewer-client`));
+    const schemaViewerClient = document.getElementById(`${schema.id}-${schema.file}-SchemaViewer-client`);
+
+    if (schemaViewerContainer && schemaViewerClient) {
+      // Get attributes from the portal
+      const expand = schemaViewerContainer.getAttribute('data-expand') === 'true';
+      const maxHeight = schemaViewerContainer.getAttribute('data-max-height');
+      const search = schemaViewerContainer.getAttribute('data-search');
+
+      // Set the expand attribute on the schema viewer client
+      if (expand) {
+        schemaViewerClient.setAttribute('data-expand', 'true');
+      }
+
+      // Set the search attribute on the schema viewer client
+      if (search) {
+        schemaViewerClient.setAttribute('data-search', search);
+      }
+
+      // Set the maxHeight on the schema viewer element
+      if (maxHeight) {
+        const schemaViewerElement = schemaViewerClient.querySelector('.schema-viewer');
+        if (schemaViewerElement) {
+          schemaViewerElement.style.maxHeight = `${maxHeight}px`;
+        }
+      }
+
+      schemaViewerContainer.appendChild(schemaViewerClient);
     }
   }
 

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -189,6 +189,39 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
         visibility: visible;
         z-index: 100;
       }
+
+      /* Hide anchor link by default */
+      .anchor-link {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        margin-left: 0.5rem;
+        margin-top: 0.25rem;
+        background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m12.11%2015.39-3.88%203.88a2.52%202.52%200%200%201-3.5%200%202.47%202.47%200%200%201%200-3.5l3.88-3.88a1%201%200%200%200-1.42-1.42l-3.88%203.89a4.48%204.48%200%200%200%206.33%206.33l3.89-3.88a1%201%200%201%200-1.42-1.42Zm8.58-12.08a4.49%204.49%200%200%200-6.33%200l-3.89%203.88a1%201%200%200%200%201.42%201.42l3.88-3.88a2.52%202.52%200%200%201%203.5%200%202.47%202.47%200%200%201%200%203.5l-3.88%203.88a1%201%200%201%200%201.42%201.42l3.88-3.89a4.49%204.49%200%200%200%200-6.33ZM8.83%2015.17a1%201%200%200%200%201.1.22%201%201%200%200%200%20.32-.22l4.92-4.92a1%201%200%200%200-1.42-1.42l-4.92%204.92a1%201%200%200%200%200%201.42Z%22/%3E%3C/svg%3E');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 1em 1em;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+        text-decoration: none;
+        vertical-align: -2px;
+      }
+
+      /* Show icon on heading hover */
+      h1:hover .anchor-link,
+      h2:hover .anchor-link,
+      h3:hover .anchor-link,
+      h4:hover .anchor-link,
+      h5:hover .anchor-link,
+      h6:hover .anchor-link {
+        opacity: 1;
+      }
+
+      /* Show on keyboard focus */
+      .anchor-link:focus {
+        opacity: 1;
+        outline: none;
+      }
     </style>
   </head>
   <body>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.45.1",
+  "version": "2.45.3",
   "publishConfig": {
     "access": "public"
   },
@@ -85,6 +85,7 @@
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-comment": "^1.0.0",
     "remark-directive": "^3.0.0",