From c989c3454928f59194d400955e1da1e0f4aecb54 Mon Sep 17 00:00:00 2001 From: kolaente Date: Mon, 8 Jul 2024 18:03:18 +0200 Subject: [PATCH] feat: add heading links to text --- astro.config.mjs | 22 +++++++++++++++++- markdoc.config.mjs | 8 ++++++- package.json | 2 ++ pnpm-lock.yaml | 43 ++++++++++++++++++++++++++++++++++++ src/components/Heading.astro | 16 ++++++++++++++ tailwind.config.mjs | 5 ++++- 6 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 src/components/Heading.astro diff --git a/astro.config.mjs b/astro.config.mjs index d325b42..c4a7d51 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -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: { diff --git a/markdoc.config.mjs b/markdoc.config.mjs index 058fd3c..92f51dd 100644 --- a/markdoc.config.mjs +++ b/markdoc.config.mjs @@ -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'), + }, + }, }) \ No newline at end of file diff --git a/package.json b/package.json index 8060ce0..4f23d98 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c147f1..d8175d3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/src/components/Heading.astro b/src/components/Heading.astro new file mode 100644 index 0000000..3c55419 --- /dev/null +++ b/src/components/Heading.astro @@ -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 +--- + + + + # + diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 8ced2d4..04a1052 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -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: {