blog/markdoc.config.mjs

import {
  defineMarkdocConfig,
  component,
  nodes,
  Markdoc,
} from '@astrojs/markdoc/config';

export default defineMarkdocConfig({
  nodes: {
    table: {
      ...nodes.table,
      render: component('./src/components/markdoc/Table.astro'),
    },
  },
  tags: {
    ElementSymbol: {
      render: component('./src/components/content/ElementSymbol.astro'),
      attributes: {
        element: { type: String },
        size: { type: String },
        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}]`],
          ),
        ]);
      },
    },
  },
});