feat: support collapse

astro.config.mjs

@@ -7,6 +7,7 @@ import {remarkModifiedTime} from "./src/remarkPlugin/remark-modified-time.mjs";
 import {resetRemark} from "./src/remarkPlugin/reset-remark.js";
 import remarkDirective from "remark-directive";
 import {remarkAsides} from  './src/remarkPlugin/remark-asides.js'
+import {remarkCollapse} from "./src/remarkPlugin/remark-collapse.js";
 
 import expressiveCode from "astro-expressive-code";
 import {pluginLineNumbers} from '@expressive-code/plugin-line-numbers'
@@ -39,7 +40,7 @@ export default defineConfig({
     themeCssSelector: (theme) => `[data-theme="${theme.type}"]`
   }), mdx()],
   markdown: {
-    remarkPlugins: [remarkModifiedTime, resetRemark, remarkDirective, remarkAsides({}) ],
+    remarkPlugins: [remarkModifiedTime, resetRemark, remarkDirective, remarkAsides({}),remarkCollapse({})],
     rehypePlugins: [customRehypeLazyLoadImage],
   }
 });

src/content/blog/new-features.md

@@ -6,6 +6,18 @@ mermaid: true
 mathjax: true
 ---
 
+### Support collapse
+
+```bash
+:::collapse
+Hello World!
+:::
+```
+
+
+:::collapse
+Hello World!
+:::
 
 ### Support admonitions
 
@@ -36,7 +48,7 @@ hello world
 note
 
 ```js
-console.log(hello world)
+console.log('hello world')
 ```
 
 :::
@@ -114,7 +126,7 @@ classDiagram
     }
 ```
 
-### Support Mathjax
+### Support mathjax
 
 + set markdown frontmatter `mathjax: true`.
 

src/i18n/en.ts

@@ -29,6 +29,7 @@ export  const en = {
   'pagination.unit': 'Pages',
   'post.dateFormat': 'Do MMMM YYYY',
   'post.lastUpdated': 'Last updated',
+  'remark.open': 'Open',
   'search.labelOne':'Viewing articles under the ',
   'search.labelTwo':'',
   'search.placeholder': 'Enter title or abstract keywords',

src/i18n/zhCn.ts

@@ -1,43 +1,44 @@
-export  const zhCn = {
+export const zhCn = {
   'aside.note': '注意',
-  'aside.tip':'提示',
+  'aside.tip': '提示',
   'aside.caution': '警告',
-  'aside.danger':'危险',
+  'aside.danger': '危险',
   'home.sticky': '置顶',
   'home.goBack': '返回',
   'home.moreArticles': '更多文章',
   'home.readMore': '阅读全文',
   'message.welcome': '欢迎留言',
   'message.welcomeTips': '既然来了就留个脚印吧！',
   'post.lastUpdated': '最后更新',
+  'remark.open': '展开',
   'sidebar.categories': '分类',
   'sidebar.uncategorized': '未分类',
   'sidebar.tags': '标签',
   'sidebar.recentArticle': '最近文章',
   'sidebar.recentComments': '最近评论',
-  'footer.articleTitle':'本文标题',
-  'footer.articleAuthor':'文章作者',
-  'footer.releaseTime':'发布时间',
-  'footer.originalLink':'原始链接',
+  'footer.articleTitle': '本文标题',
+  'footer.articleAuthor': '文章作者',
+  'footer.releaseTime': '发布时间',
+  'footer.originalLink': '原始链接',
   'footer.copyrightOne': '版权声明：本作品采用',
   'footer.copyrightTwo': '「署名-非商业性使用-相同方式共享 4.0 国际」',
   'footer.copyrightThree': '许可协议进行许可',
-  'footer.sitemap':'站点地图',
-  'footer.busuanziSitePV':'总访问量',
-  'footer.busuanziSitePVUnit':'次',
-  'footer.busuanziSiteUV':'总访客数',
-  'footer.busuanziSiteUVUnit':'人次',
-  'feed.publishedIn':'发表于',
-  'pagination.total':'共',
+  'footer.sitemap': '站点地图',
+  'footer.busuanziSitePV': '总访问量',
+  'footer.busuanziSitePVUnit': '次',
+  'footer.busuanziSiteUV': '总访客数',
+  'footer.busuanziSiteUVUnit': '人次',
+  'feed.publishedIn': '发表于',
+  'pagination.total': '共',
   'pagination.unit': '页',
-  'title.minutes':'分钟',
-  'title.words':'字',
+  'title.minutes': '分钟',
+  'title.words': '字',
   'title.draft': '草稿',
-  'blog.tableOfContent':'文章目录',
-  'search.labelOne':'正在查看',
-  'search.labelTwo':'下的文章',
+  'blog.tableOfContent': '文章目录',
+  'search.labelOne': '正在查看',
+  'search.labelTwo': '下的文章',
   'search.search': '搜索',
-  'search.searchLabelOne':'共找到 ',
+  'search.searchLabelOne': '共找到 ',
   'search.searchLabelTwo': ' 篇文章',
   'search.placeholder': '输入标题或摘要关键字',
   'feed.previous': '上一条动态',

src/remarkPlugin/remark-collapse.js

@@ -0,0 +1,61 @@
+import {h as _h, s as _s} from "hastscript";
+import {remove} from "unist-util-remove";
+import {visit} from "unist-util-visit";
+import {t} from '../i18n/utils.ts';
+
+/** Hacky function that generates an mdast HTML tree ready for conversion to HTML by rehype. */
+function h(el, attrs = {}, children = []) {
+  const {tagName, properties} = _h(el, attrs);
+  return {
+    type: "paragraph",
+    data: {hName: tagName, hProperties: properties},
+    children,
+  };
+}
+
+export function remarkCollapse(options) {
+  options = {
+    label: t('remark.open') || "Open",
+    ...options,
+  };
+
+  const transformer = (tree) => {
+    visit(tree, (node, index, parent) => {
+      if (node.type !== "containerDirective" && node.type !== "leafDirective") {
+        return;
+      }
+      if (!parent || index === undefined) {
+        return;
+      }
+      if (node.name !== "collapse" && node.name !== "details") {
+        return;
+      }
+
+      // remark-directive converts a container’s “label” to a paragraph in
+      // its children, but we want to pass it as the title prop to <Aside>, so
+      // we iterate over the children, find a directive label, store it for the
+      // title prop, and remove the paragraph from children.
+      let title = options.label;
+
+      remove(node, (child)=> {
+        if (child.data && "directiveLabel" in child.data && child.data.directiveLabel) {
+          if ("children" in child && Array.isArray(child.children) && "value" in child.children[0]) {
+            title = child.children[0].value;
+          }
+          return true;
+        }
+      });
+
+      parent.children[index] = h(
+        "details",
+        {
+          class: "remark-collapse"
+        }, [
+          h("summary", {class: "remark-collapse__summary"}, [{type: "text", value: title}]),
+          h("div", {class: "remark-collapse__content"}, node.children),
+        ]);
+    });
+  };
+
+  return () => transformer;
+}