AstroでAdmonitionsを実装する

import type { AdmonitionType } from "src/types";
import type { Node, Paragraph as P, Parent, Root, PhrasingContent } from "mdast";
import type { Directives, LeafDirective, TextDirective } from "mdast-util-directive";
import { directiveToMarkdown } from "mdast-util-directive";
import { toMarkdown } from "mdast-util-to-markdown";
import type { Plugin } from "unified";
import { visit } from "unist-util-visit";
import { type Properties, h as _h } from "hastscript";
import { toString as mdastToString } from "mdast-util-to-string";

const Admonitions = new Set<AdmonitionType>(["tip", "note", "important", "caution", "warning"]);

function isAdmonition(s: string): s is AdmonitionType {
  return Admonitions.has(s as AdmonitionType);
}

function isNodeDirective(node: Node): node is Directives {
  return node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective";
}

// textDirective や leafDirective の場合の処理（ディレクティブを Markdown に変換してテキストノードへ置き換える）
function transformUnhandledDirective(node: LeafDirective | TextDirective, index: number, parent: Parent) {
  const textNode = {
    type: "text",
    value: toMarkdown(node, { extensions: [directiveToMarkdown()] }),
  } as const;

  if (node.type === "textDirective") {
    parent.children[index] = textNode;
  } else {
    parent.children[index] = {
      children: [textNode],
      type: "paragraph",
    };
  }
}

// HAST ノードを生成するためのヘルパー関数
function h(el: string, attrs: Properties = {}, children: any[] = []): P {
  const { properties, tagName } = _h(el, attrs);
  return {
    children,
    data: { hName: tagName, hProperties: properties },
    type: "paragraph",
  };
}

export const remarkAdmonitions: Plugin<[], Root> = () => tree => {
  // AST を走査
  visit(tree, (node, index, parent) => {
    if (!parent || index === undefined || !isNodeDirective(node)) return;

    // textDirective や leafDirective は別処理
    if (node.type === "textDirective" || node.type === "leafDirective") {
      transformUnhandledDirective(node, index, parent);
      return;
    }

    // ここから containerDirective の処理
    const admonitionType = node.name;
    if (!isAdmonition(admonitionType)) return;

    // デフォルトではタイトルにアドモニションの種類をそのまま使用
    let title: string = admonitionType;
    let titleNode: PhrasingContent[] = [{ type: "text", value: title }];

    // カスタムタイトルが指定されているかチェック
    const firstChild = node.children[0];
    if (
      firstChild?.type === "paragraph" &&
      firstChild.data &&
      "directiveLabel" in firstChild.data &&
      firstChild.children.length > 0
    ) {
      titleNode = firstChild.children;
      title = mdastToString(firstChild.children);
      node.children.splice(0, 1);
    }

    // <aside> 要素を生成（class と data 属性のみ付与）
    const admonition = h(
      "aside",
      {
        "aria-label": title,
        class: "admonition",
        "data-admonition-type": admonitionType,
      },
      [
        h("p", { class: "admonition-title", "aria-hidden": "true" }, [...titleNode]),
        h("div", { class: "admonition-content" }, node.children),
      ]
    );

    parent.children[index] = admonition;
  });
};

import { defineConfig } from 'astro/config';
import { remarkAdmonitions } from "./src/plugins/remark-admonitions";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkAdmonitions],
  },
});