@eventcatalog/core 2.13.2 → 2.13.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.13.3
+
+### Patch Changes
+
+- b893559: fix(core): fixed issue with styling of schema files
+
 ## 2.13.2
 
 ### Patch Changes

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "publishConfig": {
     "access": "public"
   },

package/src/components/MDX/Schema.astro

@@ -0,0 +1,32 @@
+---
+import fs from 'fs';
+import path from 'path';
+import { Code } from 'astro-expressive-code/components';
+
+interface Props {
+  file?: string;
+  catalog: {
+    filePath: string;
+  };
+  title?: string;
+}
+
+const { file = 'schema.json', catalog, title } = Astro.props;
+
+let code: string | null = null;
+
+const exists = fs.existsSync(path.join(catalog.filePath, file));
+if (exists) {
+  code = fs.readFileSync(path.join(catalog.filePath, file), 'utf-8');
+}
+---
+
+{
+  code ? (
+    <div class="not-prose max-w-4xl overflow-x-auto">
+      <Code code={code} title={title || file} lang="json" />
+    </div>
+  ) : (
+    <div class="italic">Tried to load schema from {path.join(catalog.filePath, file)}, but no schema can be found</div>
+  )
+}

package/src/components/MDX/components.tsx

@@ -1,5 +1,5 @@
 // React components
-import Schema from '@components/MDX/Schema';
+import Schema from '@components/MDX/Schema.astro';
 import File from '@components/MDX/File';
 import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
@@ -16,6 +16,7 @@ import ChannelInformation from '@components/MDX/ChannelInformation/ChannelInform
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
+import { jsx } from 'astro/jsx-runtime';
 
 const components = (props: any) => {
   return {
@@ -33,7 +34,7 @@ const components = (props: any) => {
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
     ChannelInformation: (mdxProp: any) => ChannelInformation({ ...props.data, ...mdxProp }),
     SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
-    Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
+    Schema: (mdxProp: any) => jsx(Schema, { ...props, ...mdxProp }),
   };
 };
 

package/src/components/MDX/Schema.tsx

@@ -1,45 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-const Schema = ({ file = 'schema.json', catalog, title }: any) => {
-  try {
-    const exists = fs.existsSync(path.join(catalog.filePath, file));
-
-    if (exists) {
-      const text = fs.readFileSync(path.join(catalog.filePath, file), 'utf-8');
-      return (
-        <div className="not-prose max-w-4xl overflow-x-auto">
-          <pre className="expressive-code" data-language="json">
-            <figure className="frame has-title">
-              <figcaption className="header">
-                {title && <span className="title">{title}</span>}
-                {!title && <span className="title">{file}</span>}
-              </figcaption>
-              <pre data-language="js">
-                <code>
-                  <div className="ec-line">
-                    <div className="code">{text}</div>
-                  </div>
-                </code>
-              </pre>
-              <div className="copy">
-                <button title="Copy to clipboard" data-copied="Copied!" data-code={text}>
-                  <div></div>
-                </button>
-              </div>
-            </figure>
-          </pre>
-        </div>
-      );
-    } else {
-      return (
-        <div className="italic">Tried to load schema from {path.join(catalog.filePath, file)}, but no schema can be found</div>
-      );
-    }
-  } catch (error) {
-    console.log('Failed to load schema file', error);
-    return null;
-  }
-};
-
-export default Schema;