npm - @eventcatalog/core - Versions diffs - 2.42.10 → 2.43.1 - Mend

@eventcatalog/core 2.42.10 → 2.43.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/eventcatalog/src/pages/auth/login.astro ADDED Viewed

@@ -0,0 +1,267 @@
+---
+import config from '@config';
+const { title, logo } = config;
+import { getSession } from 'auth-astro/server';
+import { join } from 'node:path';
+import { isAuthEnabled, isSSR } from '@utils/feature';
+const session = await getSession(Astro.request);
+const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
+let hasAuthConfigurationFile = false;
+let providers: string[] = [];
+try {
+  const authConfig = await import(/* @vite-ignore */ join(catalogDirectory, 'eventcatalog.auth.js'));
+  providers = Object.keys(authConfig.default.providers);
+  hasAuthConfigurationFile = true;
+} catch (error) {
+  hasAuthConfigurationFile = false;
+}
+// Check if we should show login (auth file exists, SSR enabled, auth enabled, and has providers)
+const shouldShowLogin = hasAuthConfigurationFile && isSSR() && isAuthEnabled() && providers.length > 0;
+// Check if configuration exists but no providers are set up
+const hasConfigButNoProviders = hasAuthConfigurationFile && isSSR() && isAuthEnabled() && providers.length === 0;
+if (session) {
+  return Astro.redirect('/');
+}
+// Provider configurations
+const providerConfig = {
+  github: {
+    name: 'GitHub',
+    icon: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+    </svg>`,
+  },
+  google: {
+    name: 'Google',
+    icon: `<svg class="w-5 h-5" viewBox="0 0 24 24">
+      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+    </svg>`,
+  },
+  okta: {
+    name: 'Okta',
+    icon: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8zm-1-13h2v6h-2V7zm0 8h2v2h-2v-2z"></path>
+    </svg>`,
+  },
+  auth0: {
+    name: 'Auth0',
+    icon: `<svg class="w-5 h-5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#000000" d="M12.549 1h-4.55l1.407 4.38h4.548l-3.68 2.61 1.406 4.405c2.37-1.725 3.143-4.336 2.274-7.016L12.55 1zM2.045 5.38h4.55L8 1H3.45L2.045 5.38c-.868 2.68-.094 5.29 2.275 7.015L5.725 7.99l-3.68-2.612zm2.275 7.015L8 15l3.68-2.605L8 9.745l-3.68 2.65z"></path></g></svg>`,
+  },
+};
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Sign In | {title}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'Inter', sans-serif;
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+      }
+    </style>
+  </head>
+  <body class="min-h-screen">
+    <div class="flex min-h-screen flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <!-- Logo at the top -->
+      <div class="mb-8">
+        {
+          logo && (
+            <div class="flex flex-col items-center space-y-4">
+              <img alt={logo.alt} src={logo.src} class="w-12 h-12" />
+              <h1 class="text-2xl font-bold text-gray-900">{title}</h1>
+            </div>
+          )
+        }
+      </div>
+      {
+        shouldShowLogin ? (
+          <div class="w-full max-w-md">
+            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 space-y-6">
+              <div class="text-center">
+                <h2 class="text-2xl font-bold text-gray-900">Sign in to your account</h2>
+              </div>
+              <div class="space-y-4">
+                {providers.map((provider) => {
+                  const config = providerConfig[provider as keyof typeof providerConfig];
+                  if (!config) return null;
+                  return (
+                    <button
+                      data-provider={provider}
+                      class="provider-login-btn flex w-full items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-sm hover:bg-purple-50 hover:border-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all duration-200"
+                    >
+                      <span class="mr-3" set:html={config.icon} />
+                      Sign in with {config.name}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+            <div class="mt-6 text-center">
+              <p class="text-gray-600 text-sm">
+                Missing integration?
+                <a
+                  href="https://github.com/event-catalog/eventcatalog/issues"
+                  target="_blank"
+                  class="text-purple-600 hover:text-purple-700 underline font-medium"
+                >
+                  Let us know
+                </a>
+              </p>
+            </div>
+          </div>
+        ) : hasConfigButNoProviders ? (
+          <div class="w-full max-w-2xl">
+            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 space-y-6">
+              <div class="text-center">
+                <h2 class="text-2xl font-bold text-gray-900">No Authentication Providers Configured</h2>
+                <p class="mt-4 text-gray-600">
+                  Authentication is enabled but no providers are configured in your auth configuration file.
+                </p>
+              </div>
+              <div class="bg-purple-50 border border-purple-100 rounded-lg p-6 space-y-4">
+                <h3 class="text-lg font-semibold text-gray-900">To add authentication providers:</h3>
+                <ol class="list-decimal list-inside space-y-2 text-gray-700">
+                  <li>
+                    Update your{' '}
+                    <code class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm font-mono">eventcatalog.auth.js</code>{' '}
+                    file to include at least one provider (GitHub, Google, Okta, etc.)
+                  </li>
+                  <li>Configure the provider with the necessary credentials and settings</li>
+                  <li>Restart your EventCatalog server to apply the changes</li>
+                </ol>
+              </div>
+              <div class="text-center">
+                <a
+                  href="#"
+                  class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200"
+                >
+                  Read Authentication Documentation
+                </a>
+              </div>
+            </div>
+            <div class="mt-6 text-center">
+              <p class="text-gray-600 text-sm">
+                Missing integration?
+                <a
+                  href="https://github.com/event-catalog/eventcatalog/issues"
+                  target="_blank"
+                  class="text-purple-600 hover:text-purple-700 underline font-medium"
+                >
+                  Let us know
+                </a>
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div class="w-full max-w-2xl">
+            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 space-y-6">
+              <div class="text-center">
+                <h2 class="text-2xl font-bold text-gray-900">Authentication Not Configured</h2>
+                <p class="mt-4 text-gray-600">
+                  {!hasAuthConfigurationFile
+                    ? 'No authentication configuration file found.'
+                    : 'Authentication is not properly enabled.'}
+                </p>
+              </div>
+              <div class="bg-purple-50 border border-purple-100 rounded-lg p-6 space-y-4">
+                <h3 class="text-lg font-semibold text-gray-900">To enable authentication:</h3>
+                <ol class="list-decimal list-inside space-y-2 text-gray-700">
+                  {!hasAuthConfigurationFile && (
+                    <li>
+                      Create an{' '}
+                      <code class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm font-mono">eventcatalog.auth.js</code>{' '}
+                      configuration file in your project root
+                    </li>
+                  )}
+                  {!isSSR() && (
+                    <li>
+                      Enable SSR (Server-Side Rendering) in your{' '}
+                      <code class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm font-mono">
+                        eventcatalog.config.js
+                      </code>{' '}
+                      file by setting{' '}
+                      <code class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm font-mono">output: 'server'</code>
+                    </li>
+                  )}
+                  {!isAuthEnabled() && (
+                    <li>
+                      Enable authentication in your{' '}
+                      <code class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm font-mono">
+                        eventcatalog.config.js
+                      </code>{' '}
+                      file by setting{' '}
+                      <code class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm font-mono">
+                        auth: {`{ enabled: true }`}
+                      </code>
+                    </li>
+                  )}
+                </ol>
+              </div>
+              <div class="text-center">
+                <a
+                  href="#"
+                  class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200"
+                >
+                  Read Authentication Documentation
+                </a>
+              </div>
+            </div>
+            <div class="mt-6 text-center">
+              <p class="text-gray-600 text-sm">
+                Missing integration?
+                <a
+                  href="https://github.com/event-catalog/eventcatalog/issues"
+                  target="_blank"
+                  class="text-purple-600 hover:text-purple-700 underline font-medium"
+                >
+                  Let us know
+                </a>
+              </p>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  </body>
+</html>
+<script>
+  import { signIn } from 'auth-astro/client';
+  // Add event listeners to all provider login buttons
+  const providerButtons = document.querySelectorAll('.provider-login-btn');
+  providerButtons.forEach((button) => {
+    const provider = button.getAttribute('data-provider');
+    if (provider) {
+      button.addEventListener('click', () => signIn(provider));
+    }
+  });
+</script>

package/eventcatalog/src/pages/directory/[type]/_index.data.ts ADDED Viewed

@@ -0,0 +1,63 @@
+// pages/directory/[type]/index.page.ts
+import { isSSR } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+export class Page extends HybridPage {
+  static get prerender(): boolean {
+    return !isSSR();
+  }
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    const { getUsers } = await import('@utils/users');
+    const { getTeams } = await import('@utils/teams');
+    const loaders = {
+      users: getUsers,
+      teams: getTeams,
+    };
+    const itemTypes = ['users', 'teams'] as const;
+    const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
+    return allItems.flatMap((items, index) => ({
+      params: {
+        type: itemTypes[index],
+      },
+      props: {
+        data: items,
+        type: itemTypes[index],
+      },
+    }));
+  }
+  protected static async fetchData(params: any) {
+    const { type } = params;
+    if (!type) {
+      return null;
+    }
+    const { getUsers } = await import('@utils/users');
+    const { getTeams } = await import('@utils/teams');
+    const loaders = {
+      users: getUsers,
+      teams: getTeams,
+    };
+    // Get all items of the specified type
+    const items = await loaders[type as keyof typeof loaders]();
+    return {
+      type,
+      data: items,
+    };
+  }
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Directory type not found',
+    });
+  }
+}

package/eventcatalog/src/pages/directory/[type]/index.astro CHANGED Viewed

@@ -1,30 +1,13 @@
 ---
-import { getUsers } from '@utils/users';
-import { getTeams } from '@utils/teams';
+import type { CollectionEntry } from 'astro:content';
 import DirectoryLayout, { type Props as DirectoryLayoutProps } from '@layouts/DirectoryLayout.astro';
+import { Page } from './_index.data';
-export async function getStaticPaths() {
-  const loaders = {
-    users: getUsers,
-    teams: getTeams,
-  };
-  const itemTypes = ['users', 'teams'] as const;
-  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
-  return allItems.flatMap((items, index) => ({
-    params: {
-      type: itemTypes[index],
-    },
-    props: {
-      data: items,
-      type: itemTypes[index],
-    },
-  }));
-}
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
-const { type, data } = Astro.props;
+const { type, data } = await Page.getData(Astro);
 function mapToItem(i: any) {
   return {
@@ -42,7 +25,7 @@ function mapToItem(i: any) {
   title={`${type} (${data.length})`}
   subtitle={`Find, filter and search for any ${type} in your system.`}
   data={data.map(
-    (d) =>
+    (d: CollectionEntry<'users' | 'teams'>) =>
       ({
         collection: d.collection,
         data: {

package/eventcatalog/src/pages/discover/[type]/_index.data.ts ADDED Viewed

@@ -0,0 +1,62 @@
+// pages/discover/[type]/index.page.ts
+import { isSSR } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+export class Page extends HybridPage {
+  static get prerender(): boolean {
+    return !isSSR();
+  }
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    const { getFlows } = await import('@utils/collections/flows');
+    const loaders = {
+      ...pageDataLoader,
+      flows: getFlows,
+    };
+    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) => ({
+      params: {
+        type: itemTypes[index],
+      },
+      props: {
+        data: items,
+        type: itemTypes[index],
+      },
+    }));
+  }
+  protected static async fetchData(params: any) {
+    const { type } = params;
+    if (!type) {
+      return null;
+    }
+    const { getFlows } = await import('@utils/collections/flows');
+    const loaders = {
+      ...pageDataLoader,
+      flows: getFlows,
+    };
+    // @ts-ignore
+    const items = await loaders[type]();
+    return {
+      type,
+      data: items,
+    };
+  }
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Collection type not found',
+    });
+  }
+}

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

@@ -1,30 +1,13 @@
 ---
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionTypes } from '@types';
 import DiscoverLayout, { type Props as DiscoverLayoutProps } from '@layouts/DiscoverLayout.astro';
-import { getFlows } from '@utils/collections/flows';
+import { Page } from './_index.data';
-import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
-export async function getStaticPaths() {
-  const loaders = {
-    ...pageDataLoader,
-    flows: getFlows,
-  };
-  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) => ({
-    params: {
-      type: itemTypes[index],
-    },
-    props: {
-      data: items,
-      type: itemTypes[index],
-    },
-  }));
-}
-const { type, data } = Astro.props;
+const { type, data } = await Page.getData(Astro);
 function mapToItem(i: any) {
   return {
@@ -42,7 +25,7 @@ function mapToItem(i: any) {
   title={`${type} (${data.length})`}
   subtitle={`Find, filter and search for any ${type} in your system.`}
   data={data.map(
-    (d) =>
+    (d: CollectionEntry<CollectionTypes>) =>
       ({
         collection: d.collection,
         data: {

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/_index.data.ts ADDED Viewed

@@ -0,0 +1,62 @@
+import { isSSR } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import type { PageTypes } from '@types';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+/**
+ * Documentation page class for all collection types with versioning
+ */
+export class Page extends HybridPage {
+  static async getStaticPaths() {
+    if (isSSR()) {
+      return [];
+    }
+    const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'channels', 'entities'];
+    const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
+    return allItems.flatMap((items, index) =>
+      items.map((item) => ({
+        params: {
+          type: itemTypes[index],
+          id: item.data.id,
+          version: item.data.version,
+        },
+        props: {
+          type: itemTypes[index],
+          ...item,
+        },
+      }))
+    );
+  }
+  protected static async fetchData(params: any) {
+    const { type, id, version } = params;
+    if (!type || !id || !version) {
+      return null;
+    }
+    // Get all items of the specified type
+    const items = await pageDataLoader[type as PageTypes]();
+    // Find the specific item by id and version
+    const item = items.find((i) => i.data.id === id && i.data.version === version);
+    if (!item) {
+      return null;
+    }
+    return {
+      type,
+      ...item,
+    };
+  }
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Documentation not found',
+    });
+  }
+}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/asyncapi/[filename].astro CHANGED Viewed

@@ -5,53 +5,21 @@ import { renderToString } from 'react-dom/server';
 import { Parser } from '@asyncapi/parser';
 import { AvroSchemaParser } from '@asyncapi/avro-schema-parser';
 import fs from 'fs';
-import { getSpecificationsForService } from '@utils/collections/services';
-import type { CollectionTypes, PageTypes } from '@types';
 import '@asyncapi/react-component/styles/default.min.css';
 import js from '@asyncapi/react-component/browser/standalone/without-parser.js?url';
 import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
-import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
-import type { CollectionEntry } from 'astro:content';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import Config from '@utils/eventcatalog-config/catalog';
+import { Page } from './_[filename].data';
-export async function getStaticPaths() {
-  const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
-  const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
-  const hasSpecifications = (item: CollectionEntry<CollectionTypes>) => {
-    const specifications = getSpecificationsForService(item);
-    // Ensure there is at least one 'asyncapi' specification
-    return specifications && specifications.some((spec) => spec.type === 'asyncapi');
-  };
-  const filteredItems = allItems.map((items) => items.filter(hasSpecifications));
-  return filteredItems.flatMap((items, index) =>
-    items.flatMap((item) => {
-      const asyncApiSpecifications = getSpecificationsForService(item).filter((spec) => spec.type === 'asyncapi');
-      return asyncApiSpecifications.map((spec) => ({
-        params: {
-          type: itemTypes[index],
-          id: item.data.id,
-          version: item.data.version,
-          filename: spec.filenameWithoutExtension || spec.type,
-        },
-        props: {
-          type: itemTypes[index],
-          filenameWithoutExtension: spec.filenameWithoutExtension || spec.type,
-          filename: spec.filename || spec.type,
-          ...item,
-        },
-      }));
-    })
-  );
-}
+// Get data
+const { collection, data, filePath, filename } = await Page.getData(Astro);
 // @ts-ignore
-const { collection, catalog, data, filePath, filename } = Astro.props;
 const fileName = filename || 'asyncapi.yaml';
 const directory = path.dirname(filePath || '');
 const pathToSpec = path.join(directory, fileName);