@eventcatalog/core 2.19.5 → 2.19.7

package/README.md

@@ -29,7 +29,7 @@
 
 
 
-<h4>Features: Documentation generator for Event Driven Architectures, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
+<h4>Features: Documentation generator for Event Driven Architectures, Integration with any broker, Docs and Code, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 [![All Contributors](https://img.shields.io/badge/all_contributors-47-orange.svg?style=flat-square)](#contributors-)
@@ -52,6 +52,7 @@
 - ⭐ Discoverability feature (search, filter and more) ([demo](https://demo.eventcatalog.dev/discover/events))
 - ⭐ Document teams and users ([demo](https://demo.eventcatalog.dev/docs/teams/full-stack))
 - 🤖 Automate your catalogs with [generators](https://www.eventcatalog.dev/docs/development/plugins/plugin-overview) (e.g generate your catalogs from your [AsyncAPI](https://www.eventcatalog.dev/docs/ascynapi)/[OpenAPI](https://www.eventcatalog.dev/docs/openapi) documents)
+- 👨🏼‍💻 Follows [Docs as code](https://www.writethedocs.org/guide/docs-as-code/) principles
 - ⭐ And much more...
 
 
@@ -90,9 +91,9 @@ EventCatalog is focused on discovery and documentation and allows you to:
 
 EventCatalog is technology agnostic, which means you can integrate your Catalog with any EDA technology of your choice and any schema formats.
 
-EventCatalog supports a [Plugin Architecture](https://eventcatalog-website-v2.vercel.app/docs/development/plugins/plugin-overview) which will let you generate documentation from your systems.
+EventCatalog supports a [Plugin Architecture](https://github.com/event-catalog/generators) which lets you generate documentation from your systems including OpenAPI, AsyncAPI, Event Brokers and more.
 
-You can read more on [how it works on the website](https://eventcatalog.dev)
+You can read more on [how it works on GitHub](https://github.com/event-catalog/eventcatalog)
 
 # Getting Started
 
@@ -126,8 +127,6 @@ Thank you to our project  sponsors.
   <a href="https://hookdeck.com/?ref=eventcatalog-sponsor" target="_blank" >Learn more</a>
 </div> -->
 
-<hr />
-
 <div align="center">
   <img alt="hookdeck" src="./images/sponsors/gravitee-logo-black.svg" width="50%" />
   <p style="margin: 0; padding: 0;">Manage, secure, and govern every API in your organization</p>

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.19.5";
+var version = "2.19.7";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-Q6OST5JI.js";
-import "../chunk-OKHQFK4L.js";
+} from "../chunk-3CL5OM5M.js";
+import "../chunk-GHC5YZDP.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.19.5";
+var version = "2.19.7";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-TWY4P4FZ.js";
-import "../chunk-Q6OST5JI.js";
-import "../chunk-OKHQFK4L.js";
+} from "../chunk-SBVM6HJV.js";
+import "../chunk-3CL5OM5M.js";
+import "../chunk-GHC5YZDP.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-Q6OST5JI.js → chunk-3CL5OM5M.js}

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

package/dist/{chunk-OKHQFK4L.js → chunk-GHC5YZDP.js}

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

package/dist/{chunk-TWY4P4FZ.js → chunk-SBVM6HJV.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-Q6OST5JI.js";
+} from "./chunk-3CL5OM5M.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -3,14 +3,14 @@ import {
 } from "./chunk-SHCMAL37.js";
 import {
   log_build_default
-} from "./chunk-TWY4P4FZ.js";
-import "./chunk-Q6OST5JI.js";
+} from "./chunk-SBVM6HJV.js";
+import "./chunk-3CL5OM5M.js";
 import {
   catalogToAstro
 } from "./chunk-WF34R5UT.js";
 import {
   VERSION
-} from "./chunk-OKHQFK4L.js";
+} from "./chunk-GHC5YZDP.js";
 import {
   generate
 } from "./chunk-YEQVKHST.js";

package/eventcatalog/src/components/Header.astro

@@ -12,7 +12,7 @@ const logo = {
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm z-10"
+  class="fixed top-0 left-0 right-0 h-header bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm z-10"
 >
   <div class="px-4 sm:px-4 lg:px-4">
     <div class="flex justify-between items-center">
@@ -76,7 +76,7 @@ const logo = {
   </div>
 </nav>
 
-<div id="eventcatalog-header-spacer" class="h-16"></div>
+<div id="eventcatalog-header-spacer" class="h-header"></div>
 <!-- Spacer to prevent content from being hidden under the fixed header -->
 
 <script>

package/eventcatalog/src/components/Tables/Table.tsx

@@ -9,34 +9,100 @@ import {
   useReactTable,
   type Column,
   type ColumnFiltersState,
-  type Row,
 } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
 import DebouncedInput from './DebouncedInput';
 
 import { getColumnsByCollection } from './columns';
-import { useEffect, useMemo, useState, type EventHandler } from 'react';
-import type { CollectionTypes } from '@types';
+import { useEffect, useMemo, useState } from 'react';
+import type { CollectionMessageTypes } from '@types';
 import { isSameVersion } from '@utils/collections/util';
 
 declare module '@tanstack/react-table' {
   // @ts-ignore
   interface ColumnMeta<TData extends RowData, TValue> {
     filterVariant?: 'collection' | 'name' | 'badges';
-    collectionFilterKey?: string;
+    collectionFilterKey?: 'producers' | 'consumers' | 'sends' | 'receives' | 'services';
     showFilter?: boolean;
     className?: string;
   }
 }
 
-export const Table = ({
+export type TCollectionTypes = 'domains' | 'services' | CollectionMessageTypes | 'flows';
+
+export type TData<T extends TCollectionTypes> = {
+  collection: T;
+  data: {
+    id: string;
+    name: string;
+    summary: string;
+    version: string;
+    latestVersion?: string; // Defined on getter collection utility
+    badges?: Array<{
+      id: string; // Where is it defined?
+      content: string;
+      backgroundColor: string;
+      textColor: string;
+      icon: any; // Where is it defined?
+    }>;
+    // ---------------------------------------------------------------------------
+    // Domains
+    services?: Array<{
+      collection: string; // Be more specific;
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // ---------------------------------------------------------------------------
+    // Services
+    receives?: Array<{
+      collection: string; // Be more specific;
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    sends?: Array<{
+      collection: string; // Be more specific;
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // ---------------------------------------------------------------------------
+    // Messages
+    producers?: Array<{
+      collection: string; // Specify only 'services'?
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // Only for messages
+    consumers?: Array<{
+      collection: string; // Specify only 'services'?
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // ---------------------------------------------------------------------------
+  };
+};
+
+export const Table = <T extends TCollectionTypes>({
   data: initialData,
   collection,
   mode = 'simple',
   checkboxLatestId,
 }: {
-  data: CollectionEntry<'events'>[];
-  collection: string;
+  data: TData<T>[];
+  collection: T;
   checkboxLatestId: string;
   mode?: 'simple' | 'full';
 }) => {
@@ -68,7 +134,6 @@ export const Table = ({
   const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
 
   const table = useReactTable({
-    // @ts-ignore
     data,
     columns,
     onColumnFiltersChange: setColumnFilters,
@@ -106,7 +171,6 @@ export const Table = ({
                       <div className="text-md">
                         {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                       </div>
-                      {/* @ts-ignore */}
                       <div className="">
                         {header.column.columnDef.meta?.showFilter !== false && <Filter column={header.column} />}
                         {header.column.columnDef.meta?.showFilter == false && <div className="h-10" />}
@@ -201,23 +265,17 @@ export const Table = ({
   );
 };
 
-function Filter({ column }: { column: Column<any, unknown> }) {
-  const { filterVariant, collectionFilterKey = '' } = column.columnDef.meta ?? {};
+function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T>, unknown> }) {
+  const { filterVariant, collectionFilterKey } = column.columnDef.meta ?? {};
 
   const columnFilterValue = column.getFilterValue();
 
   const sortedUniqueValues = useMemo(() => {
-    if (filterVariant === 'collection') {
+    if (filterVariant === 'collection' && collectionFilterKey) {
       const rows = column.getFacetedRowModel().rows;
-      const data = rows
-        .map((row: Row<CollectionEntry<CollectionTypes>>) => {
-          // @ts-ignore
-          const items = row.original.data[collectionFilterKey];
-          return items as CollectionEntry<CollectionTypes>[];
-        })
-        .flat();
+      const data = rows.map((row) => row.original.data?.[collectionFilterKey] ?? []).flat();
 
-      const allItems = data.map((item) => `${item.data.name} (v${item.data.version})`);
+      const allItems = data.map((item) => `${item?.data.name} (v${item?.data.version})`);
       const uniqueItemsInList = Array.from(new Set(allItems));
 
       return uniqueItemsInList.sort().slice(0, 2000);
@@ -225,10 +283,9 @@ function Filter({ column }: { column: Column<any, unknown> }) {
     if (filterVariant === 'name') {
       const rows = column.getFacetedRowModel().rows;
       const data = rows
-        .map((row: Row<CollectionEntry<CollectionTypes>>) => {
-          // @ts-ignore
+        .map((row) => {
           const data = row.original;
-          return data as CollectionEntry<CollectionTypes>;
+          return data;
         })
         .flat();
 

package/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx

@@ -1,13 +1,12 @@
 import { ServerIcon } from '@heroicons/react/20/solid';
 import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
-import { filterByBadge, filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
-import { Tag } from 'lucide-react';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
 
-const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
+const columnHelper = createColumnHelper<TData<'domains'>>();
 
 export const columns = () => [
   columnHelper.accessor('data.name', {
@@ -65,7 +64,7 @@ export const columns = () => [
 
       return (
         <ul>
-          {services.map((consumer: any) => {
+          {services.map((consumer) => {
             const color = 'pink';
             return (
               <li key={consumer.data.id} className="py-1 group ">

package/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx

@@ -1,11 +1,11 @@
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
 import { filterByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { QueueListIcon } from '@heroicons/react/24/solid';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
 
-const columnHelper = createColumnHelper<CollectionEntry<'flows'>>();
+const columnHelper = createColumnHelper<TData<'flows'>>();
 
 export const columns = () => [
   columnHelper.accessor('data.name', {

package/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx

@@ -1,13 +1,13 @@
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionMessageTypes } from '@types';
-import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
-import { filterByName, filterCollectionByName, filterByBadge } from '../filters/custom-filters';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
+import type { CollectionMessageTypes } from '@types';
 
-const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
+const columnHelper = createColumnHelper<TData<CollectionMessageTypes>>();
 
 export const getColorAndIconForMessageType = (type: string) => {
   switch (type) {
@@ -80,7 +80,7 @@ export const columns = () => [
         return <div className="font-light text-sm text-gray-400/60 text-left italic">No producers documented</div>;
       return (
         <ul className="">
-          {producers.map((producer: any, index: number) => {
+          {producers.map((producer, index) => {
             return (
               <li className="py-2 group flex items-center space-x-2" key={`${producer.data.id}-${index}`}>
                 <a
@@ -120,7 +120,7 @@ export const columns = () => [
 
       return (
         <ul>
-          {consumers.map((consumer: any, index: number) => {
+          {consumers.map((consumer, index) => {
             return (
               <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
                 <a

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -1,13 +1,13 @@
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
 import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForMessageType } from './MessageTableColumns';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
 
-const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
+const columnHelper = createColumnHelper<TData<'services'>>();
 
 export const columns = () => [
   columnHelper.accessor('data.name', {
@@ -65,7 +65,7 @@ export const columns = () => [
 
       const receiversWithIcons = useMemo(
         () =>
-          receives?.map((consumer: any) => {
+          receives?.map((consumer) => {
             const type = consumer.collection.slice(0, -1);
             return {
               ...consumer,
@@ -87,7 +87,7 @@ export const columns = () => [
           )}
           {isExpanded && (
             <ul>
-              {receiversWithIcons.map((consumer: any, index: number) => (
+              {receiversWithIcons.map((consumer, index: number) => (
                 <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
                   <a
                     href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
@@ -137,7 +137,7 @@ export const columns = () => [
           )}
           {isExpanded && (
             <ul>
-              {sends.map((consumer: any, index: number) => {
+              {sends.map((consumer, index) => {
                 const type = consumer.collection.slice(0, -1);
                 const color = type === 'event' ? 'orange' : 'blue';
                 const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;

package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx

@@ -1,7 +1,9 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { Tag } from 'lucide-react';
 import { filterByBadge } from '../filters/custom-filters';
-export const createBadgesColumn = <T extends { data: { badges?: any[] } }>(
+import type { TCollectionTypes, TData } from '../Table';
+
+export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'badges'> }, U extends TCollectionTypes>(
   columnHelper: ReturnType<typeof createColumnHelper<T>>
 ) => {
   return columnHelper.accessor((row) => row.data.badges, {
@@ -16,7 +18,7 @@ export const createBadgesColumn = <T extends { data: { badges?: any[] } }>(
 
       return (
         <ul>
-          {badges.map((badge: any, index: number) => {
+          {badges.map((badge, index) => {
             return (
               <li key={`${badge.id}-${index}`} className="py-1 group font-light ">
                 <div className="group-hover:text-primary flex space-x-1 items-center ">

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -1,5 +1,5 @@
 ---
-import { Table } from '@components/Tables/Table';
+import { Table, type TData, type TCollectionTypes } from '@components/Tables/Table';
 import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
 import { getCommands } from '@utils/commands';
@@ -20,6 +20,13 @@ const services = await getServices();
 const domains = await getDomains();
 const flows = await getFlows();
 
+export interface Props<T extends TCollectionTypes> {
+  title: string;
+  subtitle: string;
+  data: TData<T>[];
+  type: T;
+}
+
 const { title, subtitle, data, type } = Astro.props;
 const currentPath = Astro.url.pathname;
 

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -202,12 +202,15 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
 
         <div
           id="sidebar"
-          class={`sidebar-transition h-[100vh]  max-h-screen px-5 py-4 overflow-y-auto bg-white bg-gradient-to-b from-white  to-gray-100 border-r border-gray-200 w-60 shadow-lg ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
+          class={`sidebar-transition h-content px-5 py-4 overflow-y-auto bg-white bg-gradient-to-b from-white  to-gray-100 border-r border-gray-200 w-60 shadow-lg ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
         >
           <CatalogResourcesSideBar resources={sideNav} currentPath={currentPath} client:load />
         </div>
       </aside>
-      <main class={`sidebar-transition w-full max-h-screen ${showSideBarOnLoad ? 'ml-0' : 'ml-16'}`} id="content">
+      <main
+        class={`sidebar-transition w-full max-h-content overflow-y-auto ${showSideBarOnLoad ? 'ml-0' : 'ml-16'}`}
+        id="content"
+      >
         <slot />
       </main>
     </div>

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -1,10 +1,8 @@
 ---
-import DiscoverLayout from '@layouts/DiscoverLayout.astro';
-import type { PageTypes } from '@types';
+import DiscoverLayout, { type Props as DiscoverLayoutProps } from '@layouts/DiscoverLayout.astro';
 import { getFlows } from '@utils/collections/flows';
 
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
-type PageTypesWithFlows = PageTypes | 'flows';
 
 export async function getStaticPaths() {
   const loaders = {
@@ -12,7 +10,7 @@ export async function getStaticPaths() {
     flows: getFlows,
   };
 
-  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'channels'];
+  const itemTypes = ['events', 'commands', 'queries', 'services', 'domains', 'flows'] as const;
   const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
   return allItems.flatMap((items, index) => ({
@@ -27,11 +25,45 @@ export async function getStaticPaths() {
 }
 
 const { type, data } = Astro.props;
+
+function mapToItem(i: any) {
+  return {
+    collection: i.collection,
+    data: {
+      id: i.data.id,
+      name: i.data.name,
+      version: i.data.version,
+    },
+  };
+}
 ---
 
 <DiscoverLayout
   title={`${type} (${data.length})`}
   subtitle={`Find, filter and search for any ${type} in your system.`}
-  data={data}
+  data={data.map(
+    (d) =>
+      ({
+        collection: d.collection,
+        data: {
+          id: d.data.id,
+          name: d.data.name,
+          summary: d.data?.summary,
+          version: d.data.version,
+          latestVersion: d.data?.latestVersion,
+          badges: d.data?.badges,
+          // @ts-ignore
+          consumers: d.data?.consumers?.map(mapToItem) ?? [],
+          // @ts-ignore
+          producers: d.data?.producers?.map(mapToItem) ?? [],
+          // @ts-ignore
+          receives: d.data?.receives?.map(mapToItem) ?? [],
+          // @ts-ignore
+          sends: d.data?.sends?.map(mapToItem) ?? [],
+          // @ts-ignore
+          services: d.data?.services?.map(mapToItem) ?? [],
+        },
+      }) as DiscoverLayoutProps<typeof type>['data'][0]
+  )}
   type={type}
 />

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

@@ -42,7 +42,7 @@ const pathOnDisk = path.join(process.cwd(), 'public', pathToSpec);
 const fileExists = fs.existsSync(pathOnDisk);
 ---
 
-<VerticalSideBarLayout title="OpenAPI Spec" }>
+<VerticalSideBarLayout title="OpenAPI Spec">
   {
     !fileExists ? (
       <div class="text-center h-screen  flex flex-col justify-center ">
@@ -65,7 +65,7 @@ const fileExists = fs.existsSync(pathOnDisk);
         theme="light"
         schema-style="table"
         class="relative top-0"
-        style={{ height: '100vh', width: '100%', zIndex: 100 }}
+        style={{ height: '100%', width: '100%', zIndex: 100 }}
         regular-font="ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
         bg-color="#ffffff"
         primary-color="#6b21a8"

package/eventcatalog/tailwind.config.mjs

@@ -1,10 +1,21 @@
-/** @type {import('tailwindcss').Config} */
 import config from './eventcatalog.config.js';
+
+const HEADER_HEIGHT = '4rem';
 const theme = config.theme || {};
+
+/** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     extend: {
+      height: {
+        header: HEADER_HEIGHT,
+        content: `calc(100vh - ${HEADER_HEIGHT})`,
+      },
+      spacing: {
+        header: HEADER_HEIGHT,
+        content: `calc(100vh - ${HEADER_HEIGHT})`,
+      },
       screens: {
         xxl: '1990px',
       },
@@ -17,7 +28,7 @@ export default {
           DEFAULT: '#ff6633',
           dark: '#cc3300',
         },
-        ...theme
+        ...theme,
       },
     },
   },

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.19.5",
+  "version": "2.19.7",
   "publishConfig": {
     "access": "public"
   },