fix: some fixes for admonition and GitHub repo card

src/plugins/rehype-component-admonition.mjs

@@ -17,10 +17,15 @@ export function AdmonitionComponent(properties, children, type) {
     'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")'
   );
 
-  const title = properties?.title;
+  let label = null
+  if (properties && properties['has-directive-label']) {
+    label = children[0];            // The first child is the label
+    children = children.slice(1);
+    label.tagName = "div";          // Change the tag <p> to <div>
+  }
 
   return h(`blockquote`,
     { class: `admonition bdm-${type}` },
-    [ h("span", { class: `bdm-title` }, title ? title : type.toUpperCase()), ...children] 
+    [ h("span", { class: `bdm-title` }, label ? label : type.toUpperCase()), ...children]
   );
 }

src/plugins/rehype-component-github-card.mjs

@@ -26,7 +26,7 @@ export function GithubCardComponent(properties, children) {
   const cardUuid = `GC${Math.random().toString(36).slice(-6)}` // Collisions are not important
 
   const nAvatar = h(
-    `span#${cardUuid}-avatar`,
+    `div#${cardUuid}-avatar`,
     { class: "gc-avatar"},
   )
   const nLanguage = h(
@@ -39,12 +39,15 @@ export function GithubCardComponent(properties, children) {
     `div`,
     { class: "gc-titlebar" },
     [
-      h("span", { class: "gc-owner" }, [
-        nAvatar,
-        h("span", { class: "gc-user" }, repo.split("/")[0] ),
+      h("div", { class: "gc-titlebar-left"}, [
+        h("div", { class: "gc-owner" }, [
+            nAvatar,
+            h("div", { class: "gc-user" }, repo.split("/")[0] ),
+        ]),
+        h("div", { class: "gc-divider" }, "/" ),
+        h("div", { class: "gc-repo" }, repo.split("/")[1] )
       ]),
-      h("span", { class: "gc-divider" }, "/" ),
-      h("span", { class: "gc-repo" }, repo.split("/")[1] )
+      h("div", { class: "github-logo"})
     ]
   )
 
@@ -55,17 +58,17 @@ export function GithubCardComponent(properties, children) {
   )
 
   const nStars = h(
-    `span#${cardUuid}-stars`,
+    `div#${cardUuid}-stars`,
     { class: "gc-stars" },
     "00K"
   )
   const nForks = h(
-    `span#${cardUuid}-forks`,
+    `div#${cardUuid}-forks`,
     { class: "gc-forks" },
     "0K"
   )
   const nLicense = h(
-    `span#${cardUuid}-license`,
+    `div#${cardUuid}-license`,
     { class: "gc-license" },
     "0K"
   )
@@ -101,6 +104,7 @@ export function GithubCardComponent(properties, children) {
   return h(`a#${cardUuid}-card`,
     { class: "card-github fetch-waiting no-styling",
       href: `https://github.com/${repo}`,
+      target: '_blank',
       repo },
     [
       nTitle,

src/plugins/remark-directive-rehype.js

@@ -0,0 +1,27 @@
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import { h } from 'hastscript';
+import {visit} from 'unist-util-visit'
+
+export function parseDirectiveNode() {
+    return (tree, { data }) => {
+        visit(tree, function (node) {
+            if (
+                node.type === 'containerDirective' ||
+                node.type === 'leafDirective' ||
+                node.type === 'textDirective'
+            ) {
+                const data = node.data || (node.data = {})
+                node.attributes = node.attributes || {}
+                if (node.children.length > 0 && node.children[0].data && node.children[0].data.directiveLabel) {
+                    // Add a flag to the node to indicate that it has a directive label
+                    node.attributes['has-directive-label'] = true
+                }
+                const hast = h(node.name, node.attributes)
+
+                data.hName = hast.tagName
+                data.hProperties = hast.properties
+            }
+        })
+    }
+}
+