feat(core): added admonitions using markdown (#1025)

* feat(core): added admonitions using markdown * Create breezy-chefs-appear.md
event-catalog · Dec 15, 2024 · f73eb3d · f73eb3d
1 parent 21584f3
commit f73eb3d
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 8 deletions.
diff --git a/.changeset/breezy-chefs-appear.md b/.changeset/breezy-chefs-appear.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): added admonitions using markdown
diff --git a/eventcatalog/astro.config.mjs b/eventcatalog/astro.config.mjs
@@ -5,6 +5,8 @@ import react from '@astrojs/react';
 import pagefind from "astro-pagefind";
 import { mermaid } from "./src/remark-plugins/mermaid"
 import { join } from 'node:path';
+import remarkDirective from 'remark-directive';
+import { remarkDirectives } from "./src/remark-plugins/directives"
 
 /** @type {import('bin/eventcatalog.config').Config} */
 import config from './eventcatalog.config';
@@ -42,7 +44,7 @@ export default defineConfig({
     mdx({
       // https://docs.astro.build/en/guides/integrations-guide/mdx/#optimize
       optimize: config.mdxOptimize || false,
-      remarkPlugins: [mermaid],
+      remarkPlugins: [remarkDirective, remarkDirectives, mermaid],
       gfm: false,
     }),
     pagefind(),

diff --git a/eventcatalog/src/components/MDX/components.tsx b/eventcatalog/src/components/MDX/components.tsx
@@ -33,7 +33,7 @@ const components = (props: any) => {
     Steps,
     Tabs,
     TabItem,
-    Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
+    Admonition,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
     ChannelInformation: (mdxProp: any) => ChannelInformation({ ...props.data, ...mdxProp }),

diff --git a/eventcatalog/src/remark-plugins/directives.ts b/eventcatalog/src/remark-plugins/directives.ts
@@ -0,0 +1,109 @@
+// src/remark-plugins/directives.js
+import { visit } from 'unist-util-visit';
+
+export function remarkDirectives() {
+  return (tree: any) => {
+    visit(tree, (node) => {
+      if (node.type === 'containerDirective') {
+        const blockTypes = {
+          info: 'bg-blue-50 border-l-4 border-blue-500',
+          warning: 'bg-yellow-50 border-l-4 border-yellow-500',
+          danger: 'bg-red-50 border-l-4 border-red-500',
+          tip: 'bg-green-50 border-l-4 border-green-500',
+          note: 'bg-gray-50 border-l-4 border-gray-500',
+        };
+
+        // Lucide icon paths
+        const iconPaths = {
+          info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+          warning:
+            'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+          danger:
+            'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+          tip: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
+          note: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
+        };
+
+        node.data = node.data || {};
+        node.data.hName = 'div';
+        node.data.hProperties = {
+          class: `rounded-lg p-4 my-4 ${blockTypes[node.name as keyof typeof blockTypes] || ''}`,
+        };
+
+        // Create header div that will contain icon and type
+        const headerNode = {
+          type: 'element',
+          data: {
+            hName: 'div',
+            hProperties: {
+              class: 'flex items-center gap-2 font-semibold mb-2',
+            },
+          },
+          children: [
+            // Lucide Icon SVG
+            {
+              type: 'element',
+              data: {
+                hName: 'svg',
+                hProperties: {
+                  xmlns: 'http://www.w3.org/2000/svg',
+                  width: '26',
+                  height: '26',
+                  viewBox: '0 0 24 24',
+                  fill: 'none',
+                  stroke: 'currentColor',
+                  strokeWidth: '2',
+                  strokeLinecap: 'round',
+                  strokeLinejoin: 'round',
+                  class: 'lucide',
+                },
+              },
+              children: [
+                {
+                  type: 'element',
+                  data: {
+                    hName: 'path',
+                    hProperties: {
+                      d: iconPaths[node.name as keyof typeof iconPaths] || '',
+                    },
+                  },
+                },
+              ],
+            },
+            // Type label
+            {
+              type: 'element',
+              data: {
+                hName: 'span',
+                hProperties: {
+                  class: '',
+                },
+              },
+              children: [
+                {
+                  type: 'text',
+                  value: node.name.charAt(0).toUpperCase() + node.name.slice(1),
+                },
+              ],
+            },
+          ],
+        };
+
+        // Create content div for the rest of the children
+        const contentNode = {
+          type: 'element',
+          data: {
+            hName: 'div',
+            hProperties: {
+              class: 'prose prose-md w-full !max-w-none ',
+            },
+          },
+          children: node.children,
+        };
+
+        // Replace node's children with header and content
+        node.children = [headerNode, contentNode];
+      }
+    });
+  };
+}
diff --git a/examples/default/domains/Orders/index.md b/examples/default/domains/Orders/index.md
@@ -22,7 +22,9 @@ import Footer from '@catalog/components/footer.astro';
 
 ## Overview
 
-<Admonition type="warning">Please ensure all services are updated to the latest version for compatibility and performance improvements.</Admonition>
+:::warning
+Please ensure all services are updated to the latest version for compatibility and performance improvements.
+:::
 
 The Orders domain handles all operations related to customer orders, from creation to fulfillment. This documentation provides an overview of the events and services involved in the Orders domain, helping developers and stakeholders understand the event-driven architecture.
 

diff --git a/...ers/services/InventoryService/events/InventoryAdjusted/versioned/0.0.1/index.md b/...ers/services/InventoryService/events/InventoryAdjusted/versioned/0.0.1/index.md
@@ -12,7 +12,9 @@ badges:
       textColor: green
 ---
 
-<Admonition>When firing this event make sure you set the `correlation-id` in the headers. Our schemas have standard metadata make sure you read and follow it.</Admonition>
+:::warning
+When firing this event make sure you set the `correlation-id` in the headers. Our schemas have standard metadata make sure you read and follow it.
+:::
 
 ### Details
 

diff --git a/examples/default/domains/Orders/versioned/0.0.2/index.md b/examples/default/domains/Orders/versioned/0.0.2/index.md
@@ -21,7 +21,9 @@ badges:
 
 The Orders domain handles all operations related to customer orders, from creation to fulfillment. This documentation provides an overview of the events and services involved in the Orders domain, helping developers and stakeholders understand the event-driven architecture.
 
-<Admonition type="warning">Please ensure all services are updated to the latest version for compatibility and performance improvements.</Admonition>
+:::warning
+Please ensure all services are updated to the latest version for compatibility and performance improvements.
+:::
 
 ## Bounded context
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-slug": "^6.0.0",
+    "remark-directive": "^3.0.0",
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.7",
     "semver": "7.6.3",

diff --git a/...s__/example-catalog/events/Inventory/InventoryAdjusted/versioned/0.0.1/index.md b/...s__/example-catalog/events/Inventory/InventoryAdjusted/versioned/0.0.1/index.md
@@ -12,7 +12,9 @@ badges:
       textColor: green
 ---
 
-<Admonition>When firing this event make sure you set the `correlation-id` in the headers. Our schemas have standard metadata make sure you read and follow it.</Admonition>
+:::warning
+When firing this event make sure you set the `correlation-id` in the headers. Our schemas have standard metadata make sure you read and follow it.
+:::
 
 ### Details