@eventcatalog/core 3.14.6 → 3.15.0-beta.0

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 = "3.14.6";
+var version = "3.15.0-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-TERDXO46.js";
-import "../chunk-NYVQSLA5.js";
+} from "../chunk-7RPTQBIY.js";
+import "../chunk-FRILQLHV.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -111,7 +111,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.14.6";
+var version = "3.15.0-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-KWCAGR52.js";
-import "../chunk-TERDXO46.js";
+} from "../chunk-VUARMJ2E.js";
+import "../chunk-7RPTQBIY.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-NYVQSLA5.js";
+import "../chunk-FRILQLHV.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-6NRRWRLT.js → chunk-4JTLFCQ7.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-NYVQSLA5.js";
+} from "./chunk-FRILQLHV.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-TERDXO46.js → chunk-7RPTQBIY.js}

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

package/dist/{chunk-LNIPDPVB.js → chunk-CVH4LGYA.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-6NRRWRLT.js";
+} from "./chunk-4JTLFCQ7.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-NYVQSLA5.js → chunk-FRILQLHV.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.14.6";
+var version = "3.15.0-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-KWCAGR52.js → chunk-VUARMJ2E.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-TERDXO46.js";
+} from "./chunk-7RPTQBIY.js";
 import {
   countResources,
   serializeCounts

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -115,7 +115,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.14.6";
+var version = "3.15.0-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-KWCAGR52.js";
-import "./chunk-TERDXO46.js";
+} from "./chunk-VUARMJ2E.js";
+import "./chunk-7RPTQBIY.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-3KXCGYET.js";
 import {
   generate
-} from "./chunk-LNIPDPVB.js";
+} from "./chunk-CVH4LGYA.js";
 import {
   logger
-} from "./chunk-6NRRWRLT.js";
+} from "./chunk-4JTLFCQ7.js";
 import {
   VERSION
-} from "./chunk-NYVQSLA5.js";
+} from "./chunk-FRILQLHV.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -78,7 +78,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.14.6";
+var version = "3.15.0-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-LNIPDPVB.js";
-import "./chunk-6NRRWRLT.js";
-import "./chunk-NYVQSLA5.js";
+} from "./chunk-CVH4LGYA.js";
+import "./chunk-4JTLFCQ7.js";
+import "./chunk-FRILQLHV.js";
 import "./chunk-5T63CXKU.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.14.6";
+var version = "3.15.0-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-6NRRWRLT.js";
-import "../chunk-NYVQSLA5.js";
+} from "../chunk-4JTLFCQ7.js";
+import "../chunk-FRILQLHV.js";
 export {
   logger
 };

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -723,6 +723,7 @@ export default function NestedSideBar() {
   const renderGroup = (group: NavNode, groupKey: string | null, index: number) => {
     // Get optional icon for group
     const GroupIcon = group.icon ? (LucideIcons as unknown as Record<string, LucideIcons.LucideIcon>)[group.icon] : null;
+    const isSubtleGroup = group.subtle === true;
 
     // Get visible children
     const visibleChildren =
@@ -730,43 +731,82 @@ export default function NestedSideBar() {
         const child = resolveRef(childRef);
         return child && isVisible(child);
       }) ?? [];
+    const shouldFlattenSubtleChildren =
+      !isSubtleGroup &&
+      visibleChildren.length > 0 &&
+      visibleChildren.every((childRef) => {
+        const child = resolveRef(childRef);
+        return !!child && isGroup(child) && child.subtle === true;
+      });
 
     const groupId = groupKey || `group-${index}`;
-    const isCollapsed = collapsedSections.has(groupId);
     const canCollapse = visibleChildren.length > 3;
+    const isCollapsed = collapsedSections.has(groupId);
 
     const headerContent = (
       <>
         <div className="flex items-center gap-2">
           {GroupIcon && (
-            <span className="flex items-center justify-center w-5 h-5 rounded bg-[rgb(var(--ec-group-icon-bg))] text-[rgb(var(--ec-group-icon-text))]">
-              <GroupIcon className="w-3 h-3" />
+            <span
+              className={cn(
+                'flex items-center justify-center',
+                isSubtleGroup
+                  ? 'w-4 h-4 text-[rgb(var(--ec-content-text-muted))]'
+                  : 'w-5 h-5 rounded bg-[rgb(var(--ec-group-icon-bg))] text-[rgb(var(--ec-group-icon-text))]'
+              )}
+            >
+              <GroupIcon className={cn(isSubtleGroup ? 'w-3 h-3' : 'w-3 h-3')} />
             </span>
           )}
-          <span className="text-[13px] text-[rgb(var(--ec-content-text))] font-semibold tracking-tight">{group.title}</span>
+          <span
+            className={cn(
+              'tracking-tight',
+              isSubtleGroup
+                ? 'text-[12px] text-[rgb(var(--ec-content-text-muted))] font-medium'
+                : 'text-[13px] text-[rgb(var(--ec-content-text))] font-semibold'
+            )}
+          >
+            {group.title}
+          </span>
         </div>
         {canCollapse && (
           <ChevronDown
-            className={cn('w-4 h-4 text-[rgb(var(--ec-icon-color))] transition-transform', isCollapsed && '-rotate-90')}
+            className={cn(
+              isSubtleGroup ? 'w-3.5 h-3.5' : 'w-4 h-4',
+              'text-[rgb(var(--ec-icon-color))] transition-transform',
+              isCollapsed && '-rotate-90'
+            )}
           />
         )}
       </>
     );
 
     return (
-      <div key={`group-${groupKey || index}`} className="mb-5 last:mb-2">
+      <div key={`group-${groupKey || index}`} className={cn(isSubtleGroup ? 'mb-3 last:mb-1' : 'mb-5 last:mb-2')}>
         {canCollapse ? (
           <button
             onClick={() => toggleSectionCollapse(groupId)}
-            className="flex items-center justify-between w-full px-2 py-1.5 hover:bg-[rgb(var(--ec-content-hover))] rounded-md transition-colors cursor-pointer"
+            className={cn(
+              'flex items-center justify-between w-full rounded-md transition-colors cursor-pointer',
+              isSubtleGroup
+                ? 'px-1.5 py-1 hover:bg-[rgb(var(--ec-content-hover))]/60'
+                : 'px-2 py-1.5 hover:bg-[rgb(var(--ec-content-hover))]'
+            )}
           >
             {headerContent}
           </button>
         ) : (
-          <div className="flex items-center justify-between px-2 py-1.5">{headerContent}</div>
+          <div className={cn('flex items-center justify-between', isSubtleGroup ? 'px-1.5 py-1' : 'px-2 py-1.5')}>
+            {headerContent}
+          </div>
         )}
         {!isCollapsed && (
-          <div className="flex flex-col gap-0.5 border-l ml-4 mt-1 border-[rgb(var(--ec-content-border))]">
+          <div
+            className={cn(
+              'flex flex-col gap-0.5 border-[rgb(var(--ec-content-border))]',
+              isSubtleGroup ? 'border-l ml-3 mt-0.5' : shouldFlattenSubtleChildren ? 'mt-1' : 'border-l ml-4 mt-1'
+            )}
+          >
             {visibleChildren.map((childRef, childIndex) => {
               const child = resolveRef(childRef);
               if (!child) return null;
@@ -780,7 +820,13 @@ export default function NestedSideBar() {
                 return (
                   <div
                     key={`nested-group-${childKey || childIndex}`}
-                    className="ml-3 mt-1.5 pl-3 border-l border-[rgb(var(--ec-content-border))]"
+                    className={cn(
+                      child.subtle
+                        ? shouldFlattenSubtleChildren
+                          ? 'ml-5 mt-0.5'
+                          : 'ml-1.5 mt-1 pl-1.5'
+                        : 'ml-3 mt-1.5 pl-3 border-l border-[rgb(var(--ec-content-border))]'
+                    )}
                   >
                     {renderGroup(child, childKey, childIndex)}
                   </div>

package/eventcatalog/src/content.config.ts

@@ -511,6 +511,57 @@ const customPages = defineCollection({
   schema: customPagesSchema,
 });
 
+const resourceDocs = defineCollection({
+  loader: glob({
+    // Resource-level docs are restricted to known resource paths.
+    // This avoids scanning external docs such as node_modules/**/docs.
+    pattern: [
+      '{events,commands,queries,services,flows,containers,channels,entities,data-products}/*/docs/**/*.@(md|mdx)',
+      '{events,commands,queries,services,flows,containers,channels,entities,data-products}/*/versioned/*/docs/**/*.@(md|mdx)',
+      'domains/*/docs/**/*.@(md|mdx)',
+      'domains/*/versioned/*/docs/**/*.@(md|mdx)',
+      'domains/*/subdomains/*/docs/**/*.@(md|mdx)',
+      'domains/*/subdomains/*/versioned/*/docs/**/*.@(md|mdx)',
+    ],
+    base: projectDirBase,
+  }),
+  schema: z.object({
+    id: z.string().optional(),
+    type: z.string().optional(),
+    version: z.string().optional(),
+    order: z.number().optional(),
+    badges: z.array(badge).optional(),
+    title: z.string().optional(),
+    summary: z.string().optional(),
+    slug: z.string().optional(),
+    hidden: z.boolean().optional(),
+  }),
+});
+
+const resourceDocCategories = defineCollection({
+  loader: glob({
+    pattern: [
+      '{events,commands,queries,services,flows,containers,channels,entities,data-products}/*/docs/**/category.json',
+      '{events,commands,queries,services,flows,containers,channels,entities,data-products}/*/docs/**/_category_.json',
+      '{events,commands,queries,services,flows,containers,channels,entities,data-products}/*/versioned/*/docs/**/category.json',
+      '{events,commands,queries,services,flows,containers,channels,entities,data-products}/*/versioned/*/docs/**/_category_.json',
+      'domains/*/docs/**/category.json',
+      'domains/*/docs/**/_category_.json',
+      'domains/*/versioned/*/docs/**/category.json',
+      'domains/*/versioned/*/docs/**/_category_.json',
+      'domains/*/subdomains/*/docs/**/category.json',
+      'domains/*/subdomains/*/docs/**/_category_.json',
+      'domains/*/subdomains/*/versioned/*/docs/**/category.json',
+      'domains/*/subdomains/*/versioned/*/docs/**/_category_.json',
+    ],
+    base: projectDirBase,
+  }),
+  schema: z.object({
+    label: z.string().optional(),
+    position: z.number().optional(),
+  }),
+});
+
 const domains = defineCollection({
   loader: glob({
     pattern: [
@@ -778,6 +829,8 @@ export const collections = {
 
   // EventCatalog Pro Collections
   customPages,
+  resourceDocs,
+  resourceDocCategories,
 
   // EventCatalog Studio Collections
   designs,

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/[docVersion]/_index.data.ts

@@ -0,0 +1,85 @@
+import { isSSR, isResourceDocsEnabled } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { getResourceDocs, getResourceDocsForResource, type ResourceCollection } from '@utils/collections/resource-docs';
+
+const supportedResourceCollections = new Set<ResourceCollection>([
+  'domains',
+  'services',
+  'events',
+  'commands',
+  'queries',
+  'flows',
+  'containers',
+  'channels',
+  'entities',
+  'data-products',
+]);
+
+export class Page extends HybridPage {
+  static async getStaticPaths() {
+    if (isSSR() || !isResourceDocsEnabled()) {
+      return [];
+    }
+
+    const docs = await getResourceDocs();
+
+    return docs.map((doc) => ({
+      params: {
+        type: doc.data.resourceCollection,
+        id: doc.data.resourceId,
+        version: doc.data.resourceVersion,
+        docType: doc.data.type,
+        docId: doc.data.id,
+        docVersion: doc.data.version,
+      },
+      props: {},
+    }));
+  }
+
+  protected static async fetchData(params: any) {
+    if (!isResourceDocsEnabled()) {
+      return null;
+    }
+
+    const decodeParam = (value: string) => {
+      try {
+        return decodeURIComponent(value);
+      } catch {
+        return value;
+      }
+    };
+
+    const type = decodeParam(params.type);
+    const id = decodeParam(params.id);
+    const version = decodeParam(params.version);
+    const docType = decodeParam(params.docType);
+    const docId = decodeParam(params.docId);
+    const docVersion = decodeParam(params.docVersion);
+    if (!type || !id || !version || !docType || !docId || !docVersion) {
+      return null;
+    }
+
+    if (!supportedResourceCollections.has(type as ResourceCollection)) {
+      return null;
+    }
+
+    const docsForResource = await getResourceDocsForResource(type as ResourceCollection, id, version);
+    const doc = docsForResource.find(
+      (resourceDoc) =>
+        resourceDoc.data.type === docType && resourceDoc.data.id === docId && resourceDoc.data.version === docVersion
+    );
+
+    if (!doc) {
+      return null;
+    }
+
+    return doc;
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Resource documentation not found',
+    });
+  }
+}

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

@@ -0,0 +1,195 @@
+---
+import { render } from 'astro:content';
+
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import components from '@components/MDX/components';
+import { buildUrl } from '@utils/url-builder';
+import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
+import { isResourceDocsEnabled } from '@utils/feature';
+import { getIcon } from '@utils/badges';
+import { collectionToResourceMap } from '@utils/collections/util';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+if (!isResourceDocsEnabled()) {
+  return Astro.redirect(buildUrl('/docs/custom/feature'));
+}
+
+const props = await Page.getData(Astro);
+const { Content, headings } = await render(props);
+
+const title = props.data.title || props.data.id;
+const pageTitle = `${title} | ${props.data.resourceId}`;
+const versions = props.data.versions || [props.data.version];
+const badges = (props.data.badges || []).map((badge: any) => ({
+  ...badge,
+  iconComponent: badge.icon ? getIcon(badge.icon) : null,
+}));
+
+const docsBasePath = `/docs/${props.data.resourceCollection}/${props.data.resourceId}/${props.data.resourceVersion}/${encodeURIComponent(props.data.type)}/${encodeURIComponent(props.data.id)}`;
+const singularResourceName =
+  collectionToResourceMap[props.data.resourceCollection as keyof typeof collectionToResourceMap] ??
+  props.data.resourceCollection.slice(0, props.data.resourceCollection.length - 1);
+
+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 docs-layout h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
+    <div class="flex docs-layout w-full pl-16">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 bg-[rgb(var(--ec-page-bg))]">
+        <div class="border-b border-[rgb(var(--ec-page-border))] pb-4">
+          <p class="text-xs uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+            <a
+              href={buildUrl(`/docs/${props.data.resourceCollection}/${props.data.resourceId}/${props.data.resourceVersion}`)}
+              class="hover:underline"
+            >
+              {singularResourceName}: {props.data.resourceId}
+            </a>
+          </p>
+          <div class="flex items-center gap-2 pt-1">
+            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
+            <span
+              class="text-xs rounded-md px-2 py-1 bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))]"
+            >
+              v{props.data.version}
+              {props.data.version === props.data.latestVersion && ' (latest)'}
+            </span>
+          </div>
+          {
+            props.data.summary && (
+              <p class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>
+            )
+          }
+          {
+            badges.length > 0 && (
+              <div class="flex flex-wrap gap-3 pt-4">
+                {badges.map((badge: any) => (
+                  <span
+                    class={`
+                      inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
+                      bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                      text-[rgb(var(--ec-page-text))]
+                    `}
+                  >
+                    {badge.iconComponent && (
+                      <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
+                    )}
+                    <span>{badge.content}</span>
+                  </span>
+                ))}
+              </div>
+            )
+          }
+        </div>
+        <div data-pagefind-ignore>
+          {
+            props.data.version !== props.data.latestVersion && (
+              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fill-rule="evenodd"
+                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
+                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
+                      <p>
+                        You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
+                        <a
+                          class="underline hover:text-primary block pt-2"
+                          href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}
+                        >
+                          The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
+                        </a>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          }
+        </div>
+        <div class="prose py-8 max-w-none">
+          <Content components={components(props)} />
+        </div>
+      </div>
+      <aside class="hidden lg:block sticky top-0 pb-10 w-80 overflow-y-auto border-l border-[rgb(var(--ec-page-border))] py-2">
+        <div class="sticky top-28 left-0 h-full overflow-y-auto px-6 py-4">
+          <h3 class="text-sm text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2">
+            <AlignLeftIcon className="w-4 h-4" />
+            On this page
+          </h3>
+          <nav class="space-y-1 text-sm py-4">
+            {
+              headings.map((heading) => {
+                if (heading.depth > 3) {
+                  return null;
+                }
+                return (
+                  <a
+                    href={`#${heading.slug}`}
+                    class={`block text-[12px] py-0.5 ${heading.depth === 1 ? 'font-light' : ''} text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]`}
+                    style={`padding-left: ${(heading.depth - 1) * 8}px`}
+                  >
+                    {heading.text}
+                  </a>
+                );
+              })
+            }
+          </nav>
+          <div class="space-y-2 pb-4">
+            <span class="text-xs text-[rgb(var(--ec-page-text))] font-semibold capitalize">Versions ({versions.length})</span>
+            <ul role="list" class="space-y-2">
+              {
+                versions.map((version: string) => (
+                  <li class="version-item rounded-md px-1 group w-full">
+                    <a class="flex items-center space-x-2" href={buildUrl(`${docsBasePath}/${encodeURIComponent(version)}`)}>
+                      <HistoryIcon
+                        className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))] group-hover:text-[rgb(var(--ec-accent-text))]"
+                        strokeWidth={1}
+                      />
+                      <span
+                        class={`font-light text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent-text))] ${
+                          version === props.data.version ? 'underline' : ''
+                        }`}
+                      >
+                        {version === props.data.latestVersion ? `v${version} (latest)` : `v${version}`}
+                      </span>
+                    </a>
+                  </li>
+                ))
+              }
+            </ul>
+            <div class="border-b border-[rgb(var(--ec-page-border))] pt-2"></div>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </main>
+</VerticalSideBarLayout>
+
+<style is:global>
+  .docs-layout .prose {
+    max-width: none;
+    overflow: auto;
+  }
+
+  .version-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+  }
+</style>