Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add heading anchor links

This commit is contained in:
saicaca 2023-11-12 19:35:53 +08:00
parent cff918dab3
commit 83e22e7e59
4 changed files with 73 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
astro.config.mjs
View File

@ -9,6 +9,8 @@ import rehypeKatex from "rehype-katex";
import Color from 'colorjs.io';
import remarkMath from "remark-math";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeSlug from "rehype-slug";
// https://astro.build/config
@ -37,7 +39,16 @@ export default defineConfig({
],
markdown: {
remarkPlugins: [remarkMath, remarkReadingTime],
rehypePlugins: [rehypeKatex]
rehypePlugins: [rehypeKatex, rehypeSlug,
[rehypeAutolinkHeadings, {
behavior: 'append',
properties: {className: ['anchor']},
content: {
type: 'element',
tagName: 'span',
properties: {className: ['anchor-icon']},
children: [{type: 'text', value: '#'}]
}}]]
},
redirects: {
'/': '/page/1',

2
package.json
View File

@ -22,7 +22,9 @@
"mdast-util-to-string": "^4.0.0",
"overlayscrollbars": "^2.4.4",
"reading-time": "^1.5.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-katex": "^7.0.0",
"rehype-slug": "^6.0.0",
"remark-math": "^6.0.0",
"sharp": "^0.32.6",
"tailwindcss": "^3.3.3",

51
pnpm-lock.yaml
View File

@ -38,9 +38,15 @@ dependencies:
reading-time:
specifier: ^1.5.0
version: 1.5.0
rehype-autolink-headings:
specifier: ^7.1.0
version: 7.1.0
rehype-katex:
specifier: ^7.0.0
version: 7.0.0
rehype-slug:
specifier: ^6.0.0
version: 6.0.0
remark-math:
specifier: ^6.0.0
version: 6.0.0
@ -3082,7 +3088,7 @@ packages:
/hast-util-from-parse5@8.0.1:
resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
dependencies:
'@types/hast': 3.0.1
'@types/hast': 3.0.3
'@types/unist': 3.0.0
devlop: 1.1.0
hastscript: 8.0.0
@ -3092,10 +3098,16 @@ packages:
web-namespaces: 2.0.1
dev: false
/hast-util-heading-rank@3.0.0:
resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
dependencies:
'@types/hast': 3.0.3
dev: false
/hast-util-is-element@3.0.0:
resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
dependencies:
'@types/hast': 3.0.1
'@types/hast': 3.0.3
dev: false
/hast-util-parse-selector@3.1.1:
@ -3107,7 +3119,7 @@ packages:
/hast-util-parse-selector@4.0.0:
resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
dependencies:
'@types/hast': 3.0.1
'@types/hast': 3.0.3
dev: false
/hast-util-raw@7.2.3:
@ -3200,6 +3212,12 @@ packages:
zwitch: 2.0.4
dev: false
/hast-util-to-string@3.0.0:
resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==}
dependencies:
'@types/hast': 3.0.3
dev: false
/hast-util-to-text@4.0.0:
resolution: {integrity: sha512-EWiE1FSArNBPUo1cKWtzqgnuRQwEeQbQtnFJRYV1hb1BWDgrAlBU0ExptvZMM/KSA82cDpm2sFGf3Dmc5Mza3w==}
dependencies:
@ -3232,7 +3250,7 @@ packages:
/hastscript@8.0.0:
resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
dependencies:
'@types/hast': 3.0.1
'@types/hast': 3.0.3
comma-separated-tokens: 2.0.3
hast-util-parse-selector: 4.0.0
property-information: 6.3.0
@ -4989,6 +5007,17 @@ packages:
resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
dev: false
/rehype-autolink-headings@7.1.0:
resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
dependencies:
'@types/hast': 3.0.3
'@ungap/structured-clone': 1.2.0
hast-util-heading-rank: 3.0.0
hast-util-is-element: 3.0.0
unified: 11.0.3
unist-util-visit: 5.0.0
dev: false
/rehype-katex@7.0.0:
resolution: {integrity: sha512-h8FPkGE00r2XKU+/acgqwWUlyzve1IiOKwsEkg4pDL3k48PiE0Pt+/uLtVHDVkN1yA4iurZN6UES8ivHVEQV6Q==}
dependencies:
@ -5018,6 +5047,16 @@ packages:
unified: 10.1.2
dev: false
/rehype-slug@6.0.0:
resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
dependencies:
'@types/hast': 3.0.3
github-slugger: 2.0.0
hast-util-heading-rank: 3.0.0
hast-util-to-string: 3.0.0
unist-util-visit: 5.0.0
dev: false
/rehype-stringify@9.0.4:
resolution: {integrity: sha512-Uk5xu1YKdqobe5XpSskwPvo1XeHUUucWEQSl8hTrXt5selvca1e8K1EZ37E6YoZ4BT8BCqCdVfQW7OfHfthtVQ==}
dependencies:
@ -5851,7 +5890,7 @@ packages:
/unist-util-visit@5.0.0:
resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
dependencies:
'@types/unist': 3.0.0
'@types/unist': 3.0.2
unist-util-is: 6.0.0
unist-util-visit-parents: 6.0.1
dev: false
@ -5918,7 +5957,7 @@ packages:
/vfile-location@5.0.2:
resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
dependencies:
'@types/unist': 3.0.0
'@types/unist': 3.0.2
vfile: 6.0.1
dev: false

14
src/components/misc/Markdown.astro
View File

@ -13,6 +13,20 @@ const className = Astro.props.class;
<style lang="stylus" is:global>
.custom-md
h1,h2,h3,h4,h5,h6
a
margin: -2px
padding: 2px
.anchor
margin-left: 0.2ch
opacity: 0
transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
.anchor-icon
margin-left: 0.45ch
margin-right: 0.45ch
&:hover
.anchor
opacity: 1
a
position: relative
background: none