feat(core): add export to PDF for service pages

.changeset/bright-rivers-flow.md

@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": minor
+---
+
+Add export to PDF for service pages with summary and documentation pack views

packages/core/eventcatalog/integrations/eventcatalog-features.ts

@@ -88,6 +88,15 @@ export default function eventCatalogIntegration(): AstroIntegration {
 
         // Export to PDF print pages (Scale plan)
         if (isExportPDFEnabled()) {
+          // Service print pages must be registered before the generic [type] route
+          params.injectRoute({
+            pattern: '/docs/print/services/[id]/[version]/docs',
+            entrypoint: path.join(catalogDirectory, 'src/enterprise/print/service-docs.astro'),
+          });
+          params.injectRoute({
+            pattern: '/docs/print/services/[id]/[version]',
+            entrypoint: path.join(catalogDirectory, 'src/enterprise/print/service.astro'),
+          });
           params.injectRoute({
             pattern: '/docs/print/[type]/[id]/[version]',
             entrypoint: path.join(catalogDirectory, 'src/enterprise/print/message.astro'),

packages/core/eventcatalog/src/components/CopyAsMarkdown.tsx

@@ -258,7 +258,7 @@ export function CopyPageMenu({
 
       {/* Adjust styling for the content dropdown */}
       <DropdownMenu.Content
-        className="w-72 bg-[rgb(var(--ec-dropdown-bg))] rounded-lg shadow-lg border border-[rgb(var(--ec-dropdown-border))] mt-1 py-1"
+        className="z-50 w-72 bg-[rgb(var(--ec-dropdown-bg))] rounded-lg shadow-lg border border-[rgb(var(--ec-dropdown-border))] mt-1 py-1"
         sideOffset={5}
         align="end"
       >

packages/core/eventcatalog/src/enterprise/print/_service.data.ts

@@ -0,0 +1,48 @@
+import { isSSR } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+
+export class ServicePrintPage extends HybridPage {
+  static async getStaticPaths() {
+    if (isSSR()) {
+      return [];
+    }
+
+    const items = await pageDataLoader['services']();
+
+    return items.map((item) => ({
+      params: {
+        id: item.data.id,
+        version: item.data.version,
+      },
+      props: {},
+    }));
+  }
+
+  protected static async fetchData(params: any) {
+    const { id, version } = params;
+
+    if (!id || !version) {
+      return null;
+    }
+
+    const items = await pageDataLoader['services']();
+    const item = items.find((i) => i.data.id === id && i.data.version === version);
+
+    if (!item) {
+      return null;
+    }
+
+    return {
+      type: 'services',
+      ...item,
+    };
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Service not found',
+    });
+  }
+}

packages/core/eventcatalog/src/enterprise/print/components/PrintLayout.astro

@@ -15,12 +15,17 @@ const { title, stamp } = Astro.props;
     <style is:global>
       @import '../../../styles/tailwind.css';
 
+      @page {
+        margin: 0;
+      }
+
       @media print {
         body {
           font-size: 11pt;
           background: #fff;
           -webkit-print-color-adjust: exact;
           print-color-adjust: exact;
+          padding: 10mm;
         }
 
         .no-print {

packages/core/eventcatalog/src/enterprise/print/components/PrintMessagesTable.astro

@@ -0,0 +1,70 @@
+---
+interface MessageEntry {
+  name: string;
+  version: string;
+  type: string;
+  isLatest: boolean;
+}
+
+interface Props {
+  messages: MessageEntry[];
+  emptyMessage: string;
+}
+
+const { messages, emptyMessage } = Astro.props;
+
+const dotColors: Record<string, string> = {
+  event: '#ea580c',
+  command: '#2563eb',
+  query: '#16a34a',
+};
+---
+
+{
+  messages.length > 0 ? (
+    <table class="w-full text-sm border-separate border-spacing-0 border border-slate-200 rounded-lg overflow-hidden table-fixed">
+      <thead>
+        <tr>
+          <th class="w-[50%] text-left font-semibold text-slate-500 px-4 py-2.5 bg-slate-100 border-b border-slate-200 text-[0.6875rem] uppercase tracking-wider">
+            Message
+          </th>
+          <th class="w-[20%] text-left font-semibold text-slate-500 px-4 py-2.5 bg-slate-100 border-b border-slate-200 text-[0.6875rem] uppercase tracking-wider">
+            Type
+          </th>
+          <th class="w-[30%] text-left font-semibold text-slate-500 px-4 py-2.5 bg-slate-100 border-b border-slate-200 text-[0.6875rem] uppercase tracking-wider">
+            Version
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {messages.map((msg, i) => {
+          const dotColor = dotColors[msg.type] || '#6b7280';
+          return (
+            <tr>
+              <td class={`px-4 py-2.5 ${i < messages.length - 1 ? 'border-b border-slate-100' : ''}`}>
+                <span class="flex items-center gap-2">
+                  <span class="w-1.5 h-1.5 rounded-full shrink-0 mt-0.5" style={`background: ${dotColor};`} />
+                  <span class="font-medium text-slate-700">{msg.name}</span>
+                </span>
+              </td>
+              <td class={`px-4 py-2.5 text-slate-500 capitalize ${i < messages.length - 1 ? 'border-b border-slate-100' : ''}`}>
+                {msg.type}
+              </td>
+              <td class={`px-4 py-2.5 ${i < messages.length - 1 ? 'border-b border-slate-100' : ''}`}>
+                {msg.isLatest ? (
+                  <span class="inline-flex items-center text-xs font-semibold text-green-700 bg-green-50 border border-green-200 px-2 py-0.5 rounded-full">
+                    Latest
+                  </span>
+                ) : (
+                  <span class="text-slate-500">v{msg.version}</span>
+                )}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  ) : (
+    <p class="text-sm italic text-slate-400 py-3">{emptyMessage}</p>
+  )
+}