@eventcatalog/core 3.29.2 → 3.31.1

package/eventcatalog/src/pages/api/settings/ai.ts

@@ -0,0 +1,57 @@
+import type { APIRoute } from 'astro';
+import { isDevMode } from '@utils/feature';
+import { aiSettingsSchema } from '@utils/eventcatalog-config/config-schema';
+import {
+  applyConfigUpdate,
+  readConfigSource,
+  writeConfigUpdate,
+  type ConfigUpdate,
+} from '@utils/eventcatalog-config/config-writer';
+
+export const prerender = !isDevMode();
+
+const json = (status: number, body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+export const POST: APIRoute = async ({ request }) => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Settings can only be edited when running in dev mode (EVENTCATALOG_DEV_MODE=true).' });
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json(400, { error: 'Invalid JSON body' });
+  }
+
+  const parsed = aiSettingsSchema.safeParse(body);
+  if (!parsed.success) {
+    return json(400, { error: 'Validation failed', issues: parsed.error.issues });
+  }
+
+  let source: string;
+  try {
+    source = readConfigSource();
+  } catch (err) {
+    return json(500, { error: `Could not read eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  const data = parsed.data;
+  const update: ConfigUpdate = {
+    llmsTxt: { enabled: data.llmsTxtEnabled },
+    chat: { enabled: data.chatEnabled },
+  };
+
+  try {
+    applyConfigUpdate(source, update);
+    writeConfigUpdate(update);
+  } catch (err) {
+    return json(500, { error: `Could not update eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true, settings: data });
+};

package/eventcatalog/src/pages/api/settings/general.ts

@@ -0,0 +1,71 @@
+import type { APIRoute } from 'astro';
+import { isDevMode } from '@utils/feature';
+import { generalSettingsSchema } from '@utils/eventcatalog-config/config-schema';
+import {
+  applyConfigUpdate,
+  readConfigSource,
+  writeConfigUpdate,
+  type ConfigUpdate,
+} from '@utils/eventcatalog-config/config-writer';
+
+export const prerender = !isDevMode();
+
+const json = (status: number, body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+export const POST: APIRoute = async ({ request }) => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Settings can only be edited when running in dev mode (EVENTCATALOG_DEV_MODE=true).' });
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json(400, { error: 'Invalid JSON body' });
+  }
+
+  const parsed = generalSettingsSchema.safeParse(body);
+  if (!parsed.success) {
+    return json(400, { error: 'Validation failed', issues: parsed.error.issues });
+  }
+
+  // Verify the config file exists and is parseable before we attempt the write.
+  let source: string;
+  try {
+    source = readConfigSource();
+  } catch (err) {
+    return json(500, { error: `Could not read eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  const data = parsed.data;
+  const update: ConfigUpdate = {
+    title: data.title,
+    tagline: data.tagline ?? null,
+    organizationName: data.organizationName ?? null,
+    homepageLink: data.homepageLink ?? null,
+    editUrl: data.editUrl ?? null,
+    repositoryUrl: data.repositoryUrl ?? null,
+    theme: data.theme,
+  };
+
+  if (data.logo) {
+    update.logo = {
+      alt: data.logo.alt ?? null,
+      text: data.logo.text ?? null,
+    };
+  }
+
+  try {
+    // Dry-run the write first to surface parse errors before touching disk.
+    applyConfigUpdate(source, update);
+    writeConfigUpdate(update);
+  } catch (err) {
+    return json(500, { error: `Could not update eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true, settings: data });
+};

package/eventcatalog/src/pages/api/settings/logo.ts

@@ -0,0 +1,113 @@
+import type { APIRoute } from 'astro';
+import fs from 'node:fs';
+import path from 'node:path';
+import { isDevMode } from '@utils/feature';
+import { writeConfigUpdate } from '@utils/eventcatalog-config/config-writer';
+
+export const prerender = !isDevMode();
+
+const MAX_BYTES = 2 * 1024 * 1024;
+const ALLOWED: Record<string, string> = {
+  'image/png': 'png',
+  'image/jpeg': 'jpg',
+  'image/svg+xml': 'svg',
+  'image/webp': 'webp',
+};
+
+const json = (status: number, body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+const projectRoot = () => process.env.PROJECT_DIR ?? process.cwd();
+const publicDir = () => path.join(projectRoot(), 'public');
+const LOGO_BASENAME = 'eventcatalog-logo';
+
+const removeExistingLogos = () => {
+  const dir = publicDir();
+  if (!fs.existsSync(dir)) return;
+  for (const entry of fs.readdirSync(dir)) {
+    if (entry.startsWith(`${LOGO_BASENAME}.`)) {
+      fs.unlinkSync(path.join(dir, entry));
+    }
+  }
+};
+
+/**
+ * Best-effort SVG sanitization: strips <script> blocks and on* event handlers.
+ * Not a full sanitizer; we accept this as a v1 limitation for SVG uploads.
+ */
+const sanitizeSvg = (svg: string): string =>
+  svg
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/\son[a-z]+\s*=\s*"[^"]*"/gi, '')
+    .replace(/\son[a-z]+\s*=\s*'[^']*'/gi, '')
+    .replace(/javascript:/gi, '');
+
+export const POST: APIRoute = async ({ request }) => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Logo can only be changed when running in dev mode (EVENTCATALOG_DEV_MODE=true).' });
+  }
+
+  let form: FormData;
+  try {
+    form = await request.formData();
+  } catch {
+    return json(400, { error: 'Expected multipart/form-data body' });
+  }
+
+  const file = form.get('logo');
+  if (!(file instanceof File)) {
+    return json(400, { error: 'Missing `logo` file field' });
+  }
+
+  const ext = ALLOWED[file.type];
+  if (!ext) {
+    return json(400, { error: `Unsupported logo type: ${file.type}. Allowed: PNG, JPG, SVG, WebP.` });
+  }
+
+  if (file.size > MAX_BYTES) {
+    return json(413, { error: `Logo exceeds 2MB size limit (got ${file.size} bytes).` });
+  }
+
+  const buffer = Buffer.from(await file.arrayBuffer());
+  const dir = publicDir();
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+
+  removeExistingLogos();
+
+  const targetName = `${LOGO_BASENAME}.${ext}`;
+  const targetPath = path.join(dir, targetName);
+
+  if (ext === 'svg') {
+    const sanitized = sanitizeSvg(buffer.toString('utf8'));
+    fs.writeFileSync(targetPath, sanitized, 'utf8');
+  } else {
+    fs.writeFileSync(targetPath, buffer);
+  }
+
+  const src = `/${targetName}`;
+  try {
+    writeConfigUpdate({ logo: { src } });
+  } catch (err) {
+    return json(500, { error: `Logo saved but config update failed: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true, src });
+};
+
+export const DELETE: APIRoute = async () => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Logo can only be changed when running in dev mode.' });
+  }
+
+  removeExistingLogos();
+  try {
+    writeConfigUpdate({ logo: { src: null } });
+  } catch (err) {
+    return json(500, { error: `Logo files removed but config update failed: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true });
+};

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

@@ -22,9 +22,9 @@ const specifications = type === 'services' ? getSpecificationsForService(props)
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
-  <main class="flex docs-layout h-full bg-[rgb(var(--ec-page-bg))]">
-    <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))]">
+  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         {type === 'domains' && <DomainGrid domain={domain} client:load />}
         {type === 'services' && <MessageGrid service={props} specifications={specifications} client:load />}
       </div>

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

@@ -5,7 +5,7 @@ import VisualiserLayout from '@layouts/VisualiserLayout.astro';
 import components from '@components/MDX/components';
 import config from '@config';
 import { buildUrl } from '@utils/url-builder';
-import { ChevronDown, GitCompare, X, Rocket } from 'lucide-react';
+import { GitCompare, X, Rocket, AlignLeft, HistoryIcon } from 'lucide-react';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import { isLLMSTxtEnabled, isEventCatalogChatEnabled, isDiagramComparisonEnabled } from '@utils/feature';
 
@@ -15,7 +15,7 @@ export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const props = await Page.getData(Astro);
-const { Content } = await render(props);
+const { Content, headings } = await render(props);
 
 const pageTitle = `Diagram | ${props.data.name}`;
 const currentVersion = props.data.version;
@@ -29,73 +29,123 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
 
 <VisualiserLayout title={pageTitle} description={props.data.summary}>
   <div class="diagram-page min-h-[calc(100vh-64px)] bg-[rgb(var(--ec-page-bg))]">
-    <header class="diagram-header border-b border-[rgb(var(--ec-page-border))]">
-      <div class="px-6 py-6 flex items-center justify-between gap-4">
-        <div class="min-w-0">
-          <div class="flex items-center gap-3">
-            <h1 class="text-2xl md:text-2xl font-bold text-[rgb(var(--ec-page-text))] truncate">
-              {props.data.name}
-            </h1>
-            {
-              hasMultipleVersions ? (
-                <div class="relative flex-shrink-0">
-                  <select
-                    id="version-select"
-                    class="appearance-none text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-transparent border border-[rgb(var(--ec-page-border))] rounded-md pl-2 pr-6 py-1 cursor-pointer hover:border-[rgb(var(--ec-accent))] transition-colors"
-                  >
-                    {allVersions.map((version: string) => (
-                      <option value={buildUrl(`/diagrams/${props.data.id}/${version}`)} selected={version === currentVersion}>
-                        v{version}
-                        {version === props.data.latestVersion ? ' (latest)' : ''}
-                      </option>
-                    ))}
-                  </select>
-                  <ChevronDown className="absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-[rgb(var(--ec-icon-color))] pointer-events-none" />
-                </div>
-              ) : (
-                <span class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">v{currentVersion}</span>
-              )
-            }
+    <div
+      class="flex docs-layout w-full"
+      style="padding-left: var(--ec-app-content-padding-left, 5rem); padding-right: var(--ec-app-content-padding-right, 5rem);"
+    >
+      <main class="diagram-content w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
+        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
+          <div class="flex items-start justify-between gap-4">
+            <div class="min-w-0">
+              <h1 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] truncate">
+                {props.data.name}
+              </h1>
+              {
+                props.data.summary && (
+                  <p class="pt-2 text-base font-light text-[rgb(var(--ec-page-text-muted))]">{props.data.summary}</p>
+                )
+              }
+            </div>
+
+            <div class="flex items-center gap-2">
+              <CopyAsMarkdown
+                client:only="react"
+                schemas={[]}
+                chatQuery={chatQuery}
+                chatEnabled={chatEnabled}
+                editUrl=""
+                markdownDownloadEnabled={markdownDownloadEnabled}
+                rssFeedEnabled={false}
+                preferChatAsDefault={chatEnabled}
+                chatButtonText="Ask about this diagram"
+              />
+            </div>
           </div>
-          {props.data.summary && <p class="mt-1 text-sm text-[rgb(var(--ec-page-text-muted))]">{props.data.summary}</p>}
         </div>
 
-        <div class="flex items-center gap-2">
-          {
-            hasMultipleVersions && (
-              <button
-                id="compare-btn"
-                type="button"
-                data-scale-enabled={scaleEnabled}
-                class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] bg-[rgb(var(--ec-dropdown-bg))] border border-[rgb(var(--ec-dropdown-border))] rounded-md shadow-xs hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))] transition-colors"
-              >
-                <GitCompare className="w-4 h-4" />
-                Compare diagram versions
-              </button>
-            )
-          }
-          <CopyAsMarkdown
-            client:only="react"
-            schemas={[]}
-            chatQuery={chatQuery}
-            chatEnabled={chatEnabled}
-            editUrl=""
-            markdownDownloadEnabled={markdownDownloadEnabled}
-            rssFeedEnabled={false}
-            preferChatAsDefault={chatEnabled}
-            chatButtonText="Ask about this diagram"
-          />
-        </div>
-      </div>
-    </header>
+        <article
+          class="diagram-article prose prose-md w-full max-w-none py-4 text-[15px] dark:prose-invert prose-headings:text-[rgb(var(--ec-page-text))] prose-p:text-[rgb(var(--ec-page-text))] prose-strong:text-[rgb(var(--ec-page-text))] prose-code:text-[rgb(var(--ec-page-text))]"
+        >
+          <Content components={components(props)} />
+        </article>
+      </main>
 
-    <main class="diagram-content p-6">
-      <article
-        class="diagram-article prose prose-lg max-w-none dark:prose-invert prose-headings:text-[rgb(var(--ec-page-text))] prose-p:text-[rgb(var(--ec-page-text))] prose-strong:text-[rgb(var(--ec-page-text))] prose-code:text-[rgb(var(--ec-page-text))]"
-      >
-        <Content components={components(props)} />
-      </article>
-    </main>
+      {
+        headings.length > 0 && (
+          <aside
+            id="eventcatalog-docs-sidebar"
+            class="hidden xl:block sticky top-[4rem] self-start w-[280px] max-h-[calc(100vh-4rem)] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
+          >
+            <div class="mt-8 space-y-8">
+              <div>
+                <h3 class="text-xs text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2 mb-4">
+                  <AlignLeft className="w-4 h-4" />
+                  On this page
+                </h3>
+                <nav class="text-xs border-l border-[rgb(var(--ec-page-border))]">
+                  {headings.map((heading) => {
+                    const level = heading.depth > 2 ? heading.depth : 1;
+                    if (heading.depth > 3) {
+                      return null;
+                    }
+                    return (
+                      <a
+                        href={`#${heading.slug}`}
+                        class="block py-1.5 pr-2.5 leading-5 text-[rgb(var(--ec-page-text-muted))] hover:border-[rgb(var(--ec-page-border))] hover:text-[rgb(var(--ec-page-text))] border-l-2 border-transparent -ml-px transition-all duration-200"
+                        style={`padding-left: ${level * 0.75}rem`}
+                      >
+                        {heading.text}
+                      </a>
+                    );
+                  })}
+                </nav>
+              </div>
+              {hasMultipleVersions && (
+                <div>
+                  <h3 class="text-xs text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2 mb-4">
+                    <HistoryIcon className="w-4 h-4" />
+                    {`Versions (${allVersions.length})`}
+                  </h3>
+                  <ul role="list" class="space-y-2">
+                    {allVersions.map((version: string) => {
+                      const isCurrent = version === currentVersion;
+                      return (
+                        <li>
+                          <a
+                            href={buildUrl(`/diagrams/${props.data.id}/${version}`)}
+                            class={`flex items-center gap-2 text-xs transition-colors ${
+                              isCurrent
+                                ? 'text-[rgb(var(--ec-accent))] font-medium'
+                                : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
+                            }`}
+                          >
+                            <HistoryIcon className="h-4 w-4 flex-shrink-0" />
+                            <span>{version === props.data.latestVersion ? `v${version} (latest)` : `v${version}`}</span>
+                          </a>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+              {hasMultipleVersions && (
+                <div>
+                  <button
+                    id="compare-btn"
+                    type="button"
+                    data-scale-enabled={scaleEnabled}
+                    class="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-[rgb(var(--ec-dropdown-border))] bg-[rgb(var(--ec-dropdown-bg))] px-3 py-2 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] shadow-xs transition-colors hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
+                  >
+                    <GitCompare className="w-4 h-4" />
+                    Compare diagram versions
+                  </button>
+                </div>
+              )}
+            </div>
+          </aside>
+        )
+      }
+    </div>
   </div>
 
   {/* Upgrade modal - shown when Scale is not enabled */}
@@ -203,6 +253,21 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
   <ClientRouter />
 </VisualiserLayout>
 
+<style is:global>
+  .diagram-page .prose {
+    max-width: none;
+    overflow: auto;
+  }
+
+  .toc-active-text {
+    color: rgb(var(--ec-accent));
+  }
+
+  .toc-active-border {
+    border-color: rgb(var(--ec-accent));
+  }
+</style>
+
 <script is:inline define:vars={{ config, baseUrl: import.meta.env.BASE_URL }}>
   window.eventcatalog = window.eventcatalog || {};
   window.eventcatalog.mermaid = config?.mermaid;
@@ -213,14 +278,6 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
   import { destroyZoomInstances, renderMermaidWithZoom } from '@utils/mermaid-zoom';
 
   function initDiagramPage() {
-    // Version selector
-    const versionSelect = document.getElementById('version-select') as HTMLSelectElement;
-    if (versionSelect) {
-      versionSelect.onchange = () => {
-        window.location.href = versionSelect.value;
-      };
-    }
-
     // Compare modal (Scale) and Upgrade modal (non-Scale)
     const compareBtn = document.getElementById('compare-btn') as HTMLButtonElement;
     const compareModal = document.getElementById('compare-modal');
@@ -316,6 +373,99 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
   document.addEventListener('astro:page-load', initDiagramPage);
 </script>
 
+<script>
+  // @ts-nocheck
+  function setupDiagramTocObserver() {
+    try {
+      const tocRoot = document.getElementById('eventcatalog-docs-sidebar');
+      if (!tocRoot) return;
+
+      const observerOptions = {
+        rootMargin: '0px 0px -40% 0px',
+        threshold: 0.1,
+      };
+
+      let observerPaused = false;
+
+      function highlightTocItem(id) {
+        tocRoot.querySelectorAll('.active-toc-item').forEach((link) => {
+          link.classList.remove('active-toc-item', 'toc-active-text', 'font-medium', 'toc-active-border');
+          link.classList.add('border-transparent');
+        });
+
+        const tocLink = tocRoot.querySelector(`nav a[href="#${id}"]`);
+        if (tocLink) {
+          tocLink.classList.add('active-toc-item', 'toc-active-text', 'font-medium', 'toc-active-border');
+          tocLink.classList.remove('border-transparent');
+
+          setTimeout(() => {
+            tocLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+          }, 10);
+        }
+      }
+
+      const observer = new IntersectionObserver((entries) => {
+        if (observerPaused) return;
+
+        entries.forEach((entry) => {
+          try {
+            const id = entry.target.getAttribute('id');
+            if (entry.isIntersecting && id) {
+              highlightTocItem(id);
+            }
+          } catch (entryError) {
+            console.error('Error processing intersection entry:', entryError);
+          }
+        });
+      }, observerOptions);
+
+      const prose = document.querySelector('.diagram-article.prose');
+      if (!prose) return;
+
+      const proseHeadings = prose.querySelectorAll('h1[id], h2[id], h3[id]');
+
+      if (proseHeadings.length > 0) {
+        proseHeadings.forEach((heading) => observer.observe(heading));
+      } else {
+        const allHeadings = prose.querySelectorAll('h1, h2, h3');
+
+        allHeadings.forEach((heading) => {
+          if (!heading.id) {
+            const text = heading.textContent || '';
+            const slug = text
+              .toLowerCase()
+              .replace(/[^\w\s-]/g, '')
+              .replace(/\s+/g, '-');
+            heading.id = slug;
+          }
+          observer.observe(heading);
+        });
+      }
+
+      const tocLinks = tocRoot.querySelectorAll('nav a[href^="#"]');
+      tocLinks.forEach((link) => {
+        link.addEventListener('click', () => {
+          const hrefAttr = link.getAttribute('href');
+          if (!hrefAttr) return;
+
+          const id = hrefAttr.substring(1);
+          highlightTocItem(id);
+          observerPaused = true;
+
+          setTimeout(() => {
+            observerPaused = false;
+          }, 500);
+        });
+      });
+    } catch (error) {
+      console.error('Error setting up diagram TOC highlighting:', error);
+    }
+  }
+
+  setupDiagramTocObserver();
+  document.addEventListener('astro:page-load', setupDiagramTocObserver);
+</script>
+
 <script>
   import { renderPlantUMLWithZoom } from '@utils/mermaid-zoom';