feat: markdown support button and icon

astro.config.mjs

@@ -10,10 +10,12 @@ import {pluginCollapsibleSections} from '@expressive-code/plugin-collapsible-sec
 
 import {remarkModifiedTime,} from "./src/plugins/remark-modified-time.mjs";
 import {resetRemark} from "./src/plugins/reset-remark.js";
-import {remarkAsides} from  './src/plugins/remark-asides.js'
+import {remarkAsides} from './src/plugins/remark-asides.js'
 import {remarkCollapse} from "./src/plugins/remark-collapse.js";
 import {remarkGithubCard} from './src/plugins/remark-github-card.js'
 import {lazyLoadImage} from "./src/plugins/lazy-load-image.js";
+import {remarkButton} from "./src/plugins/remark-button.js";
+import {remarkHtml} from "./src/plugins/remark-html.js";
 
 
 export default defineConfig({
@@ -28,7 +30,7 @@ export default defineConfig({
     themeCssSelector: (theme) => `[data-theme="${theme.type}"]`
   }), mdx()],
   markdown: {
-    remarkPlugins: [remarkModifiedTime, resetRemark, remarkDirective, remarkAsides({}),remarkCollapse({}),remarkGithubCard()],
+    remarkPlugins: [remarkModifiedTime, resetRemark, remarkDirective, remarkAsides({}), remarkCollapse({}), remarkGithubCard(), remarkButton(), remarkHtml()],
     rehypePlugins: [lazyLoadImage],
   }
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-blog",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -28,7 +28,7 @@
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "remark-directive": "^3.0.0",
-    "remixicon": "^4.5.0",
+    "remixicon": "^4.6.0",
     "solid-js": "^1.8.15",
     "tailwindcss": "^3.4.1",
     "tocbot": "^4.25.0",

src/content/blog/new-features.md

@@ -6,8 +6,40 @@ mermaid: true
 mathjax: true
 ---
 
+### Support Remixicon
+
+```text
+:i{class="ri-poker-hearts-fill"}
+:i{class="ri-poker-clubs-fill"}
+```
+
+:i{class="ri-poker-hearts-fill"}
+:i{class="ri-poker-clubs-fill"}
+
+### Support Button
+
+```text
+:btn[Google]{href="https://www.google.com"}
+```
+
+:btn[Google]{href="https://www.google.com"}
+
+```text
+:::btn{href="#"}
+:i{class="ri-share-box-line"} Open in new tab
+:::
+```
+
+:::btn{href="#"}
+:i{class="ri-share-box-line"} Open in new tab
+:::
+
 ### Support Github Card
 
+```text
+::github{repo="cirry/astro-yi"}
+```
+
 ::github{repo="cirry/astro-yi"}
 
 ### Support collapse
@@ -18,7 +50,6 @@ Hello World!
 :::
 ```
 
-
 :::collapse
 Hello World!
 :::
@@ -65,7 +96,6 @@ caution
 danger
 :::
 
-
 ### Support mermaid
 
 Use:
@@ -78,28 +108,28 @@ Mermaid Code:
 
 ```html title="mermaid.md"
 classDiagram
-    note "From Duck till Zebra"
-    Animal <|-- Duck
-    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-        +String beakColor
-        +swim()
-        +quack()
-    }
-    class Fish{
-        -int sizeInFeet
-        -canEat()
-    }
-    class Zebra{
-        +bool is_wild
-        +run()
-    }
+note "From Duck till Zebra"
+Animal <|-- Duck
+note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
+Animal <|-- Fish
+Animal <|-- Zebra
+Animal : +int age
+Animal : +String gender
+Animal: +isMammal()
+Animal: +mate()
+class Duck{
++String beakColor
++swim()
++quack()
+}
+class Fish{
+-int sizeInFeet
+-canEat()
+}
+class Zebra{
++bool is_wild
++run()
+}
 ```
 
 Result:
@@ -145,7 +175,7 @@ $$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$
 hello!
 ```
 
-hello! 
+hello!
 $$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$
 hello!
 
@@ -177,20 +207,20 @@ function demo() {
 ### Code folding is supported by default
 
 ```js
-var myArr = [1,2]
+var myArr = [1, 2]
 console.log(myArr)
 
 var myObj = {a: 1, b: 2}
 
-for(let key of myArr){
+for (let key of myArr) {
   console.log(key)
 }
 
 var it = myArr[Symbol.iterator]()
 it.next() // {value: 1, done: false}
 
 // VM704:12 Uncaught TypeError: myObj is not iterable
-for(let key of myObj){
+for (let key of myObj) {
   console.log(key)
 }
 

src/plugins/remark-button.js

@@ -0,0 +1,47 @@
+import {h as _h, s as _s} from "hastscript";
+import {visit} from "unist-util-visit";
+import {children} from "solid-js";
+
+/** 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 remarkButton() {
+  const transformer = (tree) => {
+    visit(tree, (node, index, parent) => {
+      if (node.type !== "containerDirective" && node.type !== "leafDirective" && node.type !== "textDirective") {
+        return;
+      }
+      if (!parent || index === undefined) {
+        return;
+      }
+      if (node.name === "btn" || node.name === 'button') {
+        console.log(node, parent)
+        const attributes = node.attributes || {};
+        parent.children[index] = h('a',
+          {
+            class: 'bg-skin-card rounded p-2 font-medium hover:text-skin-active inline hover:text-skin-active',
+            style: "text-decoration: none;color :",
+            ...attributes,
+          },
+          node.children.reduce((children, child) => {
+            if (child.type === "paragraph") {
+              children.push(...child.children);
+            } else {
+              children.push(child);
+            }
+            return children;
+          }, [])
+        )
+      }
+    });
+  };
+  return () => transformer;
+}

src/plugins/remark-html.js

@@ -0,0 +1,46 @@
+import {h as _h, s as _s} from "hastscript";
+import {visit} from "unist-util-visit";
+
+function h(el, attrs = {}, children = []) {
+  const {tagName, properties} = _h(el, attrs);
+  return {
+    type: "paragraph",
+    data: {hName: tagName, hProperties: properties},
+    children,
+  };
+}
+
+export function remarkHtml() {
+  const transformer = (tree) => {
+    visit(tree, (node, index, parent) => {
+      if (!parent || index === undefined) {
+        return;
+      }
+      if (node.type !== 'textDirective') {
+        return;
+      }
+      if (node.name !== 'i') {
+        return
+      }
+      /*
+      *{
+      *  type: 'textDirective',
+      *  name: 'i',
+      *  attributes: { class: '.ri-share-box-line' },
+      *  children: [],
+      *  position: {
+      *    start: { line: 16, column: 1, offset: 273 },
+      *    end: { line: 16, column: 31, offset: 303 }
+      *  }
+      *}
+      */
+
+      parent.children[index] = h(node.name,
+        {
+          ...node.attributes,
+        },
+      )
+    });
+  };
+  return () => transformer;
+}

src/styles/github-markdown.css

@@ -139,7 +139,7 @@
  }
 
  .markdown-body a {
-   background-color: transparent;
+   /*background-color: transparent;*/
    color: var(--color-accent-fg);
    text-decoration: none;
  }