feat: add heading links to text

This commit is contained in:
kolaente 2024-07-08 18:03:18 +02:00
parent 21642d36b0
commit c989c34549
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
6 changed files with 93 additions and 3 deletions

@ -1,7 +1,8 @@
import {defineConfig, envField} from 'astro/config'
import tailwind from '@astrojs/tailwind'
import markdoc from '@astrojs/markdoc'
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import node from '@astrojs/node'
// https://astro.build/config
@ -12,6 +13,25 @@ export default defineConfig({
adapter: node({
mode: 'standalone',
}),
markdown: {
rehypePlugins: [
rehypeSlug,
[
// When changing content here, also change in Heading component for mdoc files
rehypeAutolinkHeadings,
{
behavior: 'append',
content: {
type: 'text',
value: '#',
},
properties: {
className: ['anchor-link ml-1'],
},
},
],
],
},
experimental: {
env: {
schema: {

@ -1,4 +1,4 @@
import {defineMarkdocConfig, component} from '@astrojs/markdoc/config'
import {defineMarkdocConfig, nodes, component} from '@astrojs/markdoc/config'
import shiki from '@astrojs/markdoc/shiki'
export default defineMarkdocConfig({
@ -24,4 +24,10 @@ export default defineMarkdocConfig({
},
},
},
nodes: {
heading: {
...nodes.heading,
render: component('./src/components/Heading.astro'),
},
},
})

@ -23,6 +23,8 @@
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.13",
"astro": "^4.10.3",
"rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0",
"tailwindcss": "^3.4.4",
"typescript": "^5.4.5"
},

@ -41,6 +41,12 @@ importers:
astro:
specifier: ^4.10.3
version: 4.10.3(@types/node@20.14.9)(typescript@5.4.5)
rehype-autolink-headings:
specifier: ^7.1.0
version: 7.1.0
rehype-slug:
specifier: ^6.0.0
version: 6.0.0
tailwindcss:
specifier: ^3.4.4
version: 3.4.4
@ -1739,6 +1745,9 @@ packages:
hast-util-from-parse5@8.0.1:
resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
hast-util-heading-rank@3.0.0:
resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
hast-util-is-element@3.0.0:
resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
@ -1754,6 +1763,9 @@ packages:
hast-util-to-parse5@8.0.0:
resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
hast-util-to-string@3.0.0:
resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==}
hast-util-to-text@4.0.2:
resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
@ -2374,12 +2386,18 @@ packages:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
rehype-autolink-headings@7.1.0:
resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
rehype-parse@9.0.0:
resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==}
rehype-raw@7.0.0:
resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
rehype-slug@6.0.0:
resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
rehype-stringify@10.0.0:
resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==}
@ -4562,6 +4580,10 @@ snapshots:
vfile-location: 5.0.2
web-namespaces: 2.0.1
hast-util-heading-rank@3.0.0:
dependencies:
'@types/hast': 3.0.4
hast-util-is-element@3.0.0:
dependencies:
'@types/hast': 3.0.4
@ -4611,6 +4633,10 @@ snapshots:
web-namespaces: 2.0.1
zwitch: 2.0.4
hast-util-to-string@3.0.0:
dependencies:
'@types/hast': 3.0.4
hast-util-to-text@4.0.2:
dependencies:
'@types/hast': 3.0.4
@ -5350,6 +5376,15 @@ snapshots:
dependencies:
picomatch: 2.3.1
rehype-autolink-headings@7.1.0:
dependencies:
'@types/hast': 3.0.4
'@ungap/structured-clone': 1.2.0
hast-util-heading-rank: 3.0.0
hast-util-is-element: 3.0.0
unified: 11.0.5
unist-util-visit: 5.0.0
rehype-parse@9.0.0:
dependencies:
'@types/hast': 3.0.4
@ -5362,6 +5397,14 @@ snapshots:
hast-util-raw: 9.0.4
vfile: 6.0.1
rehype-slug@6.0.0:
dependencies:
'@types/hast': 3.0.4
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
rehype-stringify@10.0.0:
dependencies:
'@types/hast': 3.0.4

@ -0,0 +1,16 @@
---
interface Props {
level: number
id: string
}
const {level, id} = Astro.props
const HeadingTag = `h${level}`
// When changing content here, also change in astro.config.mjs for md files
---
<HeadingTag id={id}>
<slot/>
<a href={'#'+id}>#</a>
</HeadingTag>

@ -2,7 +2,10 @@ const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
content: [
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
'astro.config.mjs',
],
darkMode: 'selector',
theme: {
extend: {