fix/schema-styles (#963)

* fix: use Code component into Schema

It uses Code component from astro-expressive-code to load the needed
styles. Code component should be used with astro components or .mdx

Fix #932

* Create weak-poems-walk.md

---------

Co-authored-by: David Boyne <boyneyy123@gmail.com>

.changeset/weak-poems-walk.md

@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+fix(core): fixed issue with styling of schema files

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>
+  )
+}

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 }),
   };
 };