diff --git a/astro.config.mjs b/astro.config.mjs index f8edafd..4a6e688 100644 --- a/astro.config.mjs +++ b/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], } }); diff --git a/package.json b/package.json index 3a31f2b..2067d7c 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a48ef64..22f2a7a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,8 +63,8 @@ importers: specifier: ^3.0.0 version: 3.0.0 remixicon: - specifier: ^4.5.0 - version: 4.5.0 + specifier: ^4.6.0 + version: 4.6.0 solid-js: specifier: ^1.8.15 version: 1.8.15 @@ -2015,8 +2015,8 @@ packages: remark-stringify@11.0.0: resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} - remixicon@4.5.0: - resolution: {integrity: sha512-IP/wNQGG3JCigaeFF3DERSTqMIZBlNu1yu8clNGB7wFe7ZN/ueKMplFHL5uEbnGpCzqfY6MlxIYn2vRzub+5cQ==} + remixicon@4.6.0: + resolution: {integrity: sha512-bKM5odjqE1yzVxEZGJE7F79WHhNrJFIKHXR+GG+P1IWXn8AnJZhl8SbIRDJsNAvIqx4VPkNwjuHfc42tutMDpQ==} resolve@1.22.8: resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} @@ -4961,7 +4961,7 @@ snapshots: mdast-util-to-markdown: 2.1.0 unified: 11.0.5 - remixicon@4.5.0: {} + remixicon@4.6.0: {} resolve@1.22.8: dependencies: diff --git a/src/content/blog/new-features.md b/src/content/blog/new-features.md index 866bd8d..84ae81c 100644 --- a/src/content/blog/new-features.md +++ b/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,12 +207,12 @@ 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) } @@ -190,7 +220,7 @@ 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) } diff --git a/src/plugins/remark-button.js b/src/plugins/remark-button.js new file mode 100644 index 0000000..c918084 --- /dev/null +++ b/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; +} diff --git a/src/plugins/remark-html.js b/src/plugins/remark-html.js new file mode 100644 index 0000000..df7c006 --- /dev/null +++ b/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; +} diff --git a/src/styles/github-markdown.css b/src/styles/github-markdown.css index 3877549..71f80d2 100644 --- a/src/styles/github-markdown.css +++ b/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; }