fix(callout): Grid-based callout collapsible animation (#1944)

Stephen Tse

2025-04-26 4bd714b7be4a5d891ab187a94e64e537cb43809e

 quartz/plugins/transformers/ofm.ts

@@ -464,6 +464,30 @@
                  })
                }

                // For the rest of the MD callout elements other than the title, wrap them with
                // two nested HTML <div>s (use some hacked mdhast component to achieve this) of
                // class `callout-content` and `callout-content-inner` respectively for
                // grid-based collapsible animation.
                if (calloutContent.length > 0) {
                  node.children = [
                    node.children[0],
                    {
                      data: { hProperties: { className: ["callout-content"] }, hName: "div" },
                      type: "blockquote",
                      children: [
                        {
                          data: {
                            hProperties: { className: ["callout-content-inner"] },
                            hName: "div",
                          },
                          type: "blockquote",
                          children: [...calloutContent],
                        },
                      ],
                    },
                  ]
                }

                // replace first line of blockquote with title and rest of the paragraph text
                node.children.splice(0, 1, ...blockquoteContent)

@@ -485,21 +509,6 @@
                    "data-callout-metadata": calloutMetaData,
                  },
                }

                // Add callout-content class to callout body if it has one.
                if (calloutContent.length > 0) {
                  const contentData: BlockContent | DefinitionContent = {
                    data: {
                      hProperties: {
                        className: "callout-content",
                      },
                      hName: "div",
                    },
                    type: "blockquote",
                    children: [...calloutContent],
                  }
                  node.children = [node.children[0], contentData]
                }
              }
            })
          }