@eventcatalog/core 3.5.2 → 3.6.1

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

@@ -1,7 +1,21 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import type { CollectionTypes } from '@types';
-import DiscoverLayout, { type Props as DiscoverLayoutProps } from '@layouts/DiscoverLayout.astro';
+import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
+import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
+import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
+import { DatabaseIcon } from 'lucide-react';
+import { getCommands } from '@utils/collections/commands';
+import { getDomains, getDomainsForService } from '@utils/collections/domains';
+import { getFlows } from '@utils/collections/flows';
+import { getEvents } from '@utils/collections/events';
+import { getServices } from '@utils/collections/services';
+import { getQueries } from '@utils/collections/queries';
+import { getContainers } from '@utils/collections/containers';
+import { getUsers } from '@utils/collections/users';
+import { getTeams } from '@utils/collections/teams';
+import { buildUrl } from '@utils/url-builder';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { DiscoverTable, type DiscoverTableData, type CollectionType } from '@components/Tables/Discover';
+import config from '@config';
 import { Page } from './_index.data';
 
 export const prerender = Page.prerender;
@@ -9,12 +23,165 @@ export const getStaticPaths = Page.getStaticPaths;
 
 const { type, data } = await Page.getData(Astro);
 
-let title = `${type} (${data.length})`;
+// Fetch all collections for tabs
+const events = await getEvents();
+const queries = await getQueries();
+const commands = await getCommands();
+const services = await getServices();
+const domains = await getDomains({ getAllVersions: false });
+const flows = await getFlows();
+const containers = await getContainers();
+const users = await getUsers();
+const teams = await getTeams();
 
-if (type === 'containers') {
-  title = `Data (${data.length})`;
-}
+// Create lookup maps for users and teams
+const userMap = new Map(users.map((u) => [u.data.id, u]));
+const teamMap = new Map(teams.map((t) => [t.data.id, t]));
+
+// Type configuration for property options
+const typeConfig: Record<
+  string,
+  {
+    label: string;
+    propertyOptions: Array<{ id: string; label: string }>;
+  }
+> = {
+  events: {
+    label: 'Events',
+    propertyOptions: [
+      { id: 'hasProducers', label: 'Has Producers' },
+      { id: 'hasConsumers', label: 'Has Consumers' },
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
+  commands: {
+    label: 'Commands',
+    propertyOptions: [
+      { id: 'hasProducers', label: 'Has Producers' },
+      { id: 'hasConsumers', label: 'Has Consumers' },
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
+  queries: {
+    label: 'Queries',
+    propertyOptions: [
+      { id: 'hasProducers', label: 'Has Producers' },
+      { id: 'hasConsumers', label: 'Has Consumers' },
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
+  domains: {
+    label: 'Domains',
+    propertyOptions: [
+      { id: 'hasServices', label: 'Has Services' },
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'isSubdomain', label: 'Is Subdomain' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
+  services: {
+    label: 'Services',
+    propertyOptions: [
+      { id: 'hasSpecifications', label: 'Has Specifications' },
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'hasRepository', label: 'Has Repository' },
+      { id: 'hasDataDependencies', label: 'Has Data Dependencies' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
+  flows: {
+    label: 'Flows',
+    propertyOptions: [
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
+  containers: {
+    label: 'Data',
+    propertyOptions: [
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'hasWriters', label: 'Has Writers' },
+      { id: 'hasReaders', label: 'Has Readers' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
+};
+
+const currentTypeConfig = typeConfig[type] || typeConfig.events;
+
+// @ts-ignore
+const tableConfiguration = config[type as keyof typeof config]?.tableConfiguration ?? { columns: {} };
 
+const tabs = [
+  {
+    label: `Domains (${domains.length})`,
+    href: buildUrl('/discover/domains'),
+    isActive: type === 'domains',
+    icon: RectangleGroupIcon,
+    activeColor: 'yellow',
+    enabled: domains.length > 0,
+    visible: domains.length > 0,
+  },
+  {
+    label: `Services (${services.length})`,
+    href: buildUrl('/discover/services'),
+    isActive: type === 'services',
+    icon: ServerIcon,
+    activeColor: 'pink',
+    enabled: services.length > 0,
+    visible: services.length > 0,
+  },
+  {
+    label: `Data (${containers.length})`,
+    href: buildUrl('/discover/containers'),
+    isActive: type === 'containers',
+    icon: DatabaseIcon,
+    activeColor: 'blue',
+    enabled: containers.length > 0,
+    visible: containers.length > 0,
+  },
+  {
+    label: `Events (${events.length})`,
+    href: buildUrl('/discover/events'),
+    isActive: type === 'events',
+    icon: BoltIcon,
+    activeColor: 'orange',
+    enabled: events.length > 0,
+    visible: events.length > 0,
+  },
+  {
+    label: `Queries (${queries.length})`,
+    href: buildUrl('/discover/queries'),
+    isActive: type === 'queries',
+    icon: MagnifyingGlassIcon,
+    activeColor: 'green',
+    enabled: queries.length > 0,
+    visible: queries.length > 0,
+  },
+  {
+    label: `Commands (${commands.length})`,
+    href: buildUrl('/discover/commands'),
+    isActive: type === 'commands',
+    icon: ChatBubbleLeftIcon,
+    activeColor: 'blue',
+    enabled: commands.length > 0,
+    visible: commands.length > 0,
+  },
+  {
+    label: `Flows (${flows.length})`,
+    href: buildUrl('/discover/flows'),
+    isActive: type === 'flows',
+    icon: QueueListIcon,
+    activeColor: 'teal',
+    enabled: flows.length > 0,
+    visible: flows.length > 0,
+  },
+];
+
+// Map data to match the expected structure for the table
 function mapToItem(i: any) {
   return {
     collection: i.collection,
@@ -25,39 +192,191 @@ function mapToItem(i: any) {
     },
   };
 }
+
+// Helper to map owner references with type detection
+function mapOwner(o: any) {
+  if (!o) return null;
+  const id = typeof o === 'string' ? o : o.data?.id || o.id || o;
+
+  // Look up in users first, then teams
+  const user = userMap.get(id);
+  if (user) {
+    return { id, name: user.data.name || id, type: 'user' as const };
+  }
+
+  const team = teamMap.get(id);
+  if (team) {
+    return { id, name: team.data.name || id, type: 'team' as const };
+  }
+
+  // Fallback if not found in either
+  const name = typeof o === 'string' ? o : o.data?.name || o.name || id;
+  return { id, name, type: 'user' as const };
+}
+
+// Helper to check if service has specifications
+function hasSpecifications(service: any): boolean {
+  const specs = service.data?.specifications;
+  if (!specs) return false;
+  if (Array.isArray(specs)) return specs.length > 0;
+  return !!(specs.openapiPath || specs.asyncapiPath || specs.graphqlPath);
+}
+
+// Build a Set of subdomain IDs (domains that are nested within other domains)
+const allSubdomainIds = new Set(
+  domains.flatMap((d: any) => (d.data?.domains || []).map((sd: any) => sd.data?.id || sd.id)).filter(Boolean)
+);
+
+// For services, enrich with domain information
+const enrichedData =
+  type === 'services'
+    ? await Promise.all(
+        data.map(async (service: any) => {
+          const serviceDomains = await getDomainsForService(service);
+          return {
+            ...service,
+            enrichedDomains: serviceDomains.map((d: any) => ({
+              id: d.data.id,
+              name: d.data.name,
+              version: d.data.version,
+            })),
+          };
+        })
+      )
+    : data;
+
+const tableData = enrichedData.map((d: any) => ({
+  collection: d.collection,
+  owners: (d.data?.owners || []).map(mapOwner).filter(Boolean),
+  hasOwners: (d.data?.owners || []).length > 0,
+  hasServices: type === 'domains' ? (d.data?.services || []).length > 0 : false,
+  isSubdomain: type === 'domains' ? allSubdomainIds.has(d.data.id) : false,
+  // Service-specific properties
+  domains: type === 'services' ? d.enrichedDomains : undefined,
+  hasSpecifications: type === 'services' ? hasSpecifications(d) : false,
+  hasRepository: type === 'services' ? !!d.data?.repository?.url : false,
+  hasDataDependencies: type === 'services' ? (d.data?.writesTo || []).length > 0 || (d.data?.readsFrom || []).length > 0 : false,
+  isDeprecated: d.data?.deprecated === true || (typeof d.data?.deprecated === 'object' && d.data?.deprecated !== null),
+  data: {
+    id: d.data.id,
+    name: d.data.name,
+    summary: d.data?.summary,
+    version: d.data.version,
+    latestVersion: d.data?.latestVersion,
+    draft: d.data?.draft,
+    badges: d.data?.badges,
+    producers: d.data?.producers?.map(mapToItem) ?? [],
+    consumers: d.data?.consumers?.map(mapToItem) ?? [],
+    receives: d.data?.receives?.map(mapToItem) ?? [],
+    sends: d.data?.sends?.map(mapToItem) ?? [],
+    services: d.data?.services?.map(mapToItem) ?? [],
+    servicesThatWriteToContainer: d.data?.servicesThatWriteToContainer?.map(mapToItem) ?? [],
+    servicesThatReadFromContainer: d.data?.servicesThatReadFromContainer?.map(mapToItem) ?? [],
+  },
+}));
+
+// Get unique owners from all items
+const uniqueOwners = Array.from(new Map(tableData.flatMap((d: any) => d.owners || []).map((o: any) => [o.id, o])).values()).sort(
+  (a: any, b: any) => a.name.localeCompare(b.name)
+);
+
+// Get unique producers (services) for message types
+// Check for duplicate names and add version if needed
+const servicesByName = new Map<string, typeof services>();
+services.forEach((s) => {
+  const name = s.data.name;
+  if (!servicesByName.has(name)) servicesByName.set(name, []);
+  servicesByName.get(name)!.push(s);
+});
+
+const uniqueProducers = services
+  .map((s) => {
+    const hasDuplicateName = (servicesByName.get(s.data.name)?.length ?? 0) > 1;
+    const isLatest = s.data.version === s.data.latestVersion;
+    const versionLabel = isLatest ? 'latest' : `v${s.data.version}`;
+    return {
+      id: s.data.id,
+      name: hasDuplicateName ? `${s.data.name} (${versionLabel})` : s.data.name,
+    };
+  })
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+// Show producers/consumers filter only for events, commands, queries
+const showProducersFilter = ['events', 'commands', 'queries'].includes(type);
+const showConsumersFilter = ['events', 'commands', 'queries'].includes(type);
+
+// Consumers are the same services list
+const uniqueConsumers = uniqueProducers;
+
+// Get unique domains for the services filter
+const uniqueDomains = domains.map((d) => ({
+  id: d.data.id,
+  name: d.data.name,
+  version: d.data.version,
+}));
+
+// Show domains filter only for services
+const showDomainsFilter = type === 'services';
+
+const title = `${currentTypeConfig.label} (${data.length})`;
 ---
 
-<DiscoverLayout
-  title={title}
-  subtitle={`Find, filter and search for any ${type} in your system.`}
-  data={data.map(
-    (d: CollectionEntry<CollectionTypes>) =>
-      ({
-        collection: d.collection,
-        data: {
-          id: d.data.id,
-          name: d.data.name,
-          summary: d.data?.summary,
-          version: d.data.version,
-          latestVersion: d.data?.latestVersion,
-          draft: d.data?.draft,
-          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) ?? [],
-          // @ts-ignore
-          servicesThatWriteToContainer: d.data?.servicesThatWriteToContainer?.map(mapToItem) ?? [],
-          // @ts-ignore
-          servicesThatReadFromContainer: d.data?.servicesThatReadFromContainer?.map(mapToItem) ?? [],
-        },
-      }) as DiscoverLayoutProps<typeof type>['data'][0]
-  )}
-  type={type}
-/>
+<VerticalSideBarLayout title={`Explore | ${title}`} showNestedSideBar={false}>
+  <main class="ml-0 bg-[rgb(var(--ec-page-bg))] min-h-content">
+    <div id="discover-collection-tabs">
+      <div class="hidden sm:block">
+        <div class="border-b border-[rgb(var(--ec-page-border))]">
+          <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
+            {
+              tabs
+                .filter((tab) => tab.visible)
+                .map((tab) => (
+                  <a
+                    href={tab.href}
+                    class:list={[
+                      'group inline-flex items-center py-4 px-1 text-sm font-light text-[rgb(var(--ec-page-text))]',
+                      tab.isActive && 'border-b-[2px] border-[rgb(var(--ec-accent))] text-[rgb(var(--ec-accent))]',
+                      !tab.isActive && 'opacity-70 hover:opacity-100',
+                      !tab.enabled && 'disabled',
+                    ]}
+                    aria-current="page"
+                  >
+                    <tab.icon
+                      className={`w-6 h-6 -ml-0.5 mr-2 ${tab.isActive ? 'text-[rgb(var(--ec-accent))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
+                    />
+                    <span>{tab.label}</span>
+                  </a>
+                ))
+            }
+          </nav>
+        </div>
+      </div>
+    </div>
+
+    <div class="py-4 px-6 md:pr-10">
+      <DiscoverTable
+        data={tableData as DiscoverTableData[]}
+        collectionType={type as CollectionType}
+        collectionLabel={currentTypeConfig.label}
+        domains={uniqueDomains}
+        owners={uniqueOwners as Array<{ id: string; name: string; type?: 'user' | 'team' }>}
+        producers={uniqueProducers}
+        consumers={uniqueConsumers}
+        propertyOptions={currentTypeConfig.propertyOptions}
+        tableConfiguration={tableConfiguration}
+        showDomainsFilter={showDomainsFilter}
+        showProducersFilter={showProducersFilter}
+        showConsumersFilter={showConsumersFilter}
+        client:only="react"
+      />
+    </div>
+  </main>
+</VerticalSideBarLayout>
+
+<style>
+  a.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.25;
+  }
+</style>

package/eventcatalog/src/pages/docs/custom/feature.astro

@@ -4,19 +4,21 @@ import { BookOpenIcon, FileText } from 'lucide-react';
 ---
 
 <VerticalSideBarLayout title="Custom Documentation" showNestedSideBar={false}>
-  <div class="min-h-[calc(100vh-60px)] bg-white">
+  <div class="min-h-[calc(100vh-60px)] bg-[rgb(var(--ec-page-bg))]">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
       {/* Hero Section */}
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
         <div>
-          <div class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 font-medium text-sm mb-6">
+          <div
+            class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 font-medium text-sm mb-6"
+          >
             <FileText className="w-4 h-4 mr-2" />
             New: Bring your documentation into EventCatalog
           </div>
-          <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">
+          <h1 class="text-4xl font-bold text-[rgb(var(--ec-page-text))] tracking-tight mb-4">
             Document Everything. Share Knowledge. Build Better.
           </h1>
-          <p class="text-xl text-gray-600 mb-8">
+          <p class="text-xl text-[rgb(var(--ec-page-text-muted))] mb-8">
             Add your own documentation to EventCatalog — from ADRs and system guides to runbooks and onboarding material. Connect
             your knowledge to your architecture.
           </p>
@@ -37,14 +39,14 @@ import { BookOpenIcon, FileText } from 'lucide-react';
             <a
               href="https://www.eventcatalog.cloud"
               target="_blank"
-              class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
+              class="inline-flex items-center justify-center px-6 py-3 border border-[rgb(var(--ec-page-border))] text-base font-medium rounded-lg text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors duration-150"
             >
               Try for free
             </a>
           </div>
-          <p class="text-sm text-gray-500">
+          <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">
             Available with EventCatalog Starter or Scale plans
-            <a href="https://www.eventcatalog.dev/pricing" class="text-blue-600 font-medium block"
+            <a href="https://www.eventcatalog.dev/pricing" class="text-blue-600 dark:text-blue-400 font-medium block"
               >Try free for 14 days, no credit card required</a
             >
           </p>
@@ -62,7 +64,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
             <img
               src="/images/custom-docs-placeholder.png"
               alt="Custom Documentation Preview"
-              class="rounded-xl shadow-xl border border-gray-200"
+              class="rounded-xl shadow-xl border border-[rgb(var(--ec-page-border))]"
             />
           </div>
         </div>
@@ -70,75 +72,79 @@ import { BookOpenIcon, FileText } from 'lucide-react';
 
       {/* Features Section */}
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
               <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Centralized Knowledge</h3>
-          <p class="text-gray-600">
+          <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Centralized Knowledge</h3>
+          <p class="text-[rgb(var(--ec-page-text-muted))]">
             Keep architecture decisions, system guides, and runbooks in one place — easy to access, easy to trust.
           </p>
         </div>
 
-        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
               <path
                 d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
               ></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Rich Formatting</h3>
-          <p class="text-gray-600">
+          <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Rich Formatting</h3>
+          <p class="text-[rgb(var(--ec-page-text-muted))]">
             Use Markdown, diagrams, code blocks, and EventCatalog components to create structured, useful documentation.
           </p>
         </div>
 
-        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
               <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"
               ></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Version Control</h3>
-          <p class="text-gray-600">Track changes and ensure your documentation grows alongside your system.</p>
+          <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Version Control</h3>
+          <p class="text-[rgb(var(--ec-page-text-muted))]">
+            Track changes and ensure your documentation grows alongside your system.
+          </p>
         </div>
 
-        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
               <path
                 d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
               ></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Documentation Ownership</h3>
-          <p class="text-gray-600">Assign and track document owners, making it easy to find the right person in seconds.</p>
+          <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Documentation Ownership</h3>
+          <p class="text-[rgb(var(--ec-page-text-muted))]">
+            Assign and track document owners, making it easy to find the right person in seconds.
+          </p>
         </div>
 
-        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
               <path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Customizable Sidebars</h3>
-          <p class="text-gray-600">
+          <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Customizable Sidebars</h3>
+          <p class="text-[rgb(var(--ec-page-text-muted))]">
             Auto-generated and fully customizable navigation sidebars to organize your documentation perfectly.
           </p>
         </div>
 
-        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
               <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path>
             </svg>
           </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">EventCatalog Chat</h3>
-          <p class="text-gray-600">
+          <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">EventCatalog Chat</h3>
+          <p class="text-[rgb(var(--ec-page-text-muted))]">
             Interact with your documentation using AI-powered chat to find answers quickly and efficiently.
           </p>
         </div>
@@ -149,7 +155,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
         <a
           href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
           target="_blank"
-          class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
+          class="text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors duration-150"
         >
           Not ready for custom documentation? You can hide this feature in settings
         </a>

package/eventcatalog/src/remark-plugins/resource-ref.ts

@@ -0,0 +1,51 @@
+import { findAndReplace } from 'mdast-util-find-and-replace';
+
+/**
+ * Remark plugin that transforms [[type|Name]] or [[Name]] syntax into ResourceRef MDX components.
+ *
+ * Supported patterns:
+ * - [[entity|Order]] -> <ResourceRef type="entity">Order</ResourceRef>
+ * - [[service|OrderService@1.0.0]] -> <ResourceRef type="service" version="1.0.0">OrderService</ResourceRef>
+ * - [[diagram|target-architecture]] -> <ResourceRef type="diagram">target-architecture</ResourceRef>
+ * - [[Order]] -> <ResourceRef type="entity">Order</ResourceRef> (defaults to entity)
+ * - [[Order@0.0.1]] -> <ResourceRef type="entity" version="0.0.1">Order</ResourceRef>
+ */
+export function remarkResourceRef() {
+  return function (tree: any) {
+    // First pass: match [[type|Name]] or [[type|Name@version]] pattern
+    findAndReplace(tree, [
+      /\[\[([a-z]+)\|([\w-]+)(?:@([\d.]+))?\]\]/g,
+      // @ts-ignore: Types are complex but it works
+      function (_match: string, type: string, resourceId: string, version?: string) {
+        const attributes: any[] = [{ type: 'mdxJsxAttribute', name: 'type', value: type }];
+        if (version) {
+          attributes.push({ type: 'mdxJsxAttribute', name: 'version', value: version });
+        }
+        return {
+          type: 'mdxJsxTextElement',
+          name: 'ResourceRef',
+          attributes,
+          children: [{ type: 'text', value: resourceId }],
+        };
+      },
+    ]);
+
+    // Second pass: match [[Name]] or [[Name@version]] pattern (defaults to entity)
+    findAndReplace(tree, [
+      /\[\[([\w-]+)(?:@([\d.]+))?\]\]/g,
+      // @ts-ignore: Types are complex but it works
+      function (_match: string, resourceId: string, version?: string) {
+        const attributes: any[] = [{ type: 'mdxJsxAttribute', name: 'type', value: 'entity' }];
+        if (version) {
+          attributes.push({ type: 'mdxJsxAttribute', name: 'version', value: version });
+        }
+        return {
+          type: 'mdxJsxTextElement',
+          name: 'ResourceRef',
+          attributes,
+          children: [{ type: 'text', value: resourceId }],
+        };
+      },
+    ]);
+  };
+}

package/eventcatalog/src/stores/sidebar-store/builders/shared.ts

@@ -31,7 +31,7 @@ export type NavNode = {
  */
 export type NavigationData = {
   roots: ChildRef[]; // What to show at top level
-  nodes: Record<string, NavNode>; // Flat map of all nodes by key
+  nodes: Record<string, NavNode | string>; // Flat map of nodes by key, strings are references to other keys (e.g., unversioned aliases)
 };
 
 export const uniqueBy = <T>(array: T[], key: keyof T): T[] => {