Try deploy

markdoc.config.mjs

@@ -1,4 +1,9 @@
-import { defineMarkdocConfig, component, nodes } from '@astrojs/markdoc/config';
+import {
+  defineMarkdocConfig,
+  component,
+  nodes,
+  Markdoc,
+} from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
   nodes: {
@@ -16,5 +21,70 @@ export default defineMarkdocConfig({
         color: { type: String },
       },
     },
+    Callout: {
+      render: component('./src/components/content/Callout.astro'),
+      attributes: {
+        type: {
+          type: String,
+          default: 'default',
+        },
+        title: { type: String },
+      },
+    },
+    Figure: {
+      render: component('./src/components/content/Figure.astro'),
+      selfClosing: true,
+      attributes: {
+        src: {
+          type: String,
+          required: true,
+        },
+        alt: {
+          type: String,
+          required: true,
+        },
+        caption: { type: String },
+        credit: { type: String },
+      },
+    },
+    Sidenote: {
+      selfClosing: true,
+      attributes: {
+        id: {
+          type: String,
+          required: true,
+        },
+        title: {
+          type: String,
+        },
+        marker: {
+          type: String,
+          default: '⋄',
+        },
+        content: {
+          type: String,
+          required: true,
+        },
+        type: {
+          type: String,
+          default: 'default',
+        },
+      },
+      transform(node, config) {
+        const attrs = node.transformAttributes(config);
+        return new Markdoc.Tag('sup', {}, [
+          new Markdoc.Tag(
+            'a',
+            {
+              href: `#${attrs.id}`,
+              id: `ref-${attrs.id}`,
+              class: 'sidenote-ref',
+              style: `anchor-name: --note-${attrs.id}`,
+            },
+            [`[${attrs.marker}]`],
+          ),
+        ]);
+      },
+    },
   },
 });