@eventcatalog/core 2.33.1 → 2.33.3

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

@@ -4,7 +4,7 @@ import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
+import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewerRoot.astro';
 
 // SideBars
 import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
@@ -23,6 +23,7 @@ import { render } from 'astro:content';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 
 import config from '@config';
+import { getIcon } from '@utils/badges';
 
 export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'channels'];
@@ -52,6 +53,12 @@ const { Content } = await render(props);
 const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
 const contentBadges = props.data.badges || [];
 
+const getContentBadges = () =>
+  contentBadges.map((badge) => ({
+    ...badge,
+    icon: badge.icon ? getIcon(badge.icon) : null,
+  }));
+
 const getBadge = () => {
   if (props.collection === 'services') {
     return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' };
@@ -115,7 +122,7 @@ const getSpecificationBadges = () => {
   return badges;
 };
 
-const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
+const badges = [getBadge(), ...getContentBadges(), ...getSpecificationBadges()];
 
 // Index only the latest version
 const pagefindAttributes =
@@ -202,7 +209,8 @@ const pagefindAttributes =
         </div>
         <div data-pagefind-ignore>
           <!-- @ts-ignore -->
-          <SchemaViewer id={props.data.id} catalog={props.catalog} filePath={props.filePath} />
+          <!-- <SchemaViewer id={props.data.id} catalog={props.catalog} filePath={props.filePath} /> -->
+          <SchemaViewer id={props.data.id} filePath={props.filePath} />
           <NodeGraph
             id={props.data.id}
             collection={props.collection}

package/eventcatalog/src/shared-collections.ts

@@ -5,6 +5,7 @@ export const badge = z.object({
   content: z.string(),
   backgroundColor: z.string(),
   textColor: z.string(),
+  icon: z.string().optional(),
 });
 
 // Create a union type for owners

package/eventcatalog/src/utils/badges.ts

@@ -0,0 +1,5 @@
+import * as HeroIcons from '@heroicons/react/24/outline';
+
+export function getIcon(iconName: string) {
+  return HeroIcons[iconName as keyof typeof HeroIcons] || null;
+}

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.33.1",
+  "version": "2.33.3",
   "publishConfig": {
     "access": "public"
   },
@@ -22,8 +22,8 @@
   ],
   "dependencies": {
     "@astrojs/markdown-remark": "^6.3.1",
-    "@astrojs/mdx": "^4.2.2",
-    "@astrojs/react": "^4.2.2",
+    "@astrojs/mdx": "^4.2.3",
+    "@astrojs/react": "^4.2.3",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/tailwind": "^6.0.2",
     "@asyncapi/avro-schema-parser": "^3.0.24",
@@ -42,11 +42,10 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@scalar/api-reference-react": "^0.4.37",
-    "@stoplight/json-schema-viewer": "^4.16.4",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
-    "astro": "^5.5.5",
+    "astro": "^5.5.6",
     "astro-expressive-code": "^0.40.1",
     "astro-pagefind": "^1.6.0",
     "astro-seo": "^0.8.4",
@@ -69,7 +68,6 @@
     "lucide-react": "^0.453.0",
     "marked": "^15.0.6",
     "mermaid": "^11.4.1",
-    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-slug": "^6.0.0",

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.tsx

@@ -1,62 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import 'prismjs';
-// @ts-ignore
-import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
-import './css/stoplight-mosaic-styles.css';
-import './css/stoplight-mosaic-theme-default.css';
-
-import { createPortal } from 'react-dom';
-
-type Props = {
-  id: string;
-  file: string;
-  renderRootTreeLines?: boolean;
-  hideExamples?: boolean;
-  defaultExpandedDepth?: number;
-  maxHeight?: string;
-  schema: any;
-  catalog: any;
-  title?: string;
-};
-
-const SchemaViewer = ({
-  id,
-  maxHeight = '500',
-  renderRootTreeLines = true,
-  hideExamples = false,
-  defaultExpandedDepth = 3,
-  title,
-  schema,
-}: Props) => {
-  const [elem, setElem] = useState(null);
-  useEffect(() => {
-    // @ts-ignore
-    setElem(document.getElementById(`${id}-SchemaViewer-portal`));
-  }, []);
-
-  if (!elem) return null;
-
-  return (
-    <div>
-      {createPortal(
-        <section className="not-prose space-y-2 ">
-          {title && <h2 className="text-3xl font-bold">{title}</h2>}
-          <div className="border border-gray-100 p-2 schemaViewer">
-            <JsonSchemaViewer
-              schema={schema}
-              emptyText="No schema defined"
-              maxHeight={parseInt(maxHeight, 10)}
-              defaultExpandedDepth={defaultExpandedDepth}
-              renderRootTreeLines={renderRootTreeLines}
-              hideExamples={hideExamples}
-            />
-          </div>
-        </section>,
-        elem
-      )}
-    </div>
-  );
-};
-
-export default SchemaViewer;