From 4bd714b7be4a5d891ab187a94e64e537cb43809e Mon Sep 17 00:00:00 2001
From: Stephen Tse <Stephen-X@users.noreply.github.com>
Date: Sat, 26 Apr 2025 18:05:51 +0000
Subject: [PATCH] fix(callout): Grid-based callout collapsible animation (#1944)
---
quartz/plugins/transformers/ofm.ts | 39 ++++++++++++++++++++++++---------------
1 files changed, 24 insertions(+), 15 deletions(-)
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 983fd73..e958027 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/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]
- }
}
})
}
--
Gitblit v1.10.0