From 8e12b7dfcc5874daf0b80ac6bc611fd823233e0c Mon Sep 17 00:00:00 2001 From: Kevin F Date: Tue, 10 Sep 2024 12:10:51 +0200 Subject: [PATCH] add autolink with rehype --- astro.config.mjs | 24 ++++++++ package-lock.json | 64 ++++++++++++++++++++++ package.json | 2 + src/components/CircleGraphNavigation.astro | 6 +- src/layouts/MarkdownLayout.astro | 14 ++++- 5 files changed, 106 insertions(+), 4 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index a9627e2..2167d43 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -2,10 +2,34 @@ import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; +import rehypeSlug from 'rehype-slug'; +import rehypeAutolinkHeadings from 'rehype-autolink-headings'; + // https://astro.build/config export default defineConfig({ integrations: [tailwind()], site: 'https://freymaurer.github.io', base: 'astro-poc', + markdown: { + rehypePlugins: [ + rehypeSlug, + [ + rehypeAutolinkHeadings, + { + behavior: 'prepend', + content: { + type: 'text', + value: '#', + }, + headingProperties: { + className: ['anchor'], + }, + properties: { + className: ['anchor-link'], + }, + }, + ] + ] + }, }); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c559401..6db4cc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@astrojs/tailwind": "^5.1.0", "@tailwindcss/typography": "^0.5.15", "astro": "^4.15.4", + "rehype-autolink-headings": "^7.1.0", + "rehype-slug": "^6.0.0", "tailwindcss": "^3.4.10", "typescript": "^5.5.4" }, @@ -115,6 +117,7 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-5.2.0.tgz", "integrity": "sha512-vWGM24KZXz11jR3JO+oqYU3T2qpuOi4uGivJ9SQLCAI01+vEkHC60YJMRvHPc+hwd60F7euNs1PeOEixIIiNQw==", + "license": "MIT", "dependencies": { "@astrojs/prism": "3.1.0", "github-slugger": "^2.0.0", @@ -3128,6 +3131,19 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-heading-rank": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz", + "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-is-element": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz", @@ -3216,6 +3232,19 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-to-string": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz", + "integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-text": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz", @@ -5127,6 +5156,24 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/rehype-autolink-headings": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz", + "integrity": "sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "@ungap/structured-clone": "^1.0.0", + "hast-util-heading-rank": "^3.0.0", + "hast-util-is-element": "^3.0.0", + "unified": "^11.0.0", + "unist-util-visit": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/rehype-parse": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.0.tgz", @@ -5155,6 +5202,23 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/rehype-slug": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz", + "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "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" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/rehype-stringify": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.0.tgz", diff --git a/package.json b/package.json index 0a005d9..f18860e 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "@astrojs/tailwind": "^5.1.0", "@tailwindcss/typography": "^0.5.15", "astro": "^4.15.4", + "rehype-autolink-headings": "^7.1.0", + "rehype-slug": "^6.0.0", "tailwindcss": "^3.4.10", "typescript": "^5.5.4" }, diff --git a/src/components/CircleGraphNavigation.astro b/src/components/CircleGraphNavigation.astro index 8fe181c..98cc21e 100644 --- a/src/components/CircleGraphNavigation.astro +++ b/src/components/CircleGraphNavigation.astro @@ -1,6 +1,6 @@ --- const circles = [ - { id: 1, cx: 8, cy: 10, r: 5, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Rick', angle: 230 }, + { id: 1, cx: 8, cy: 10, r: 5, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Rick', angle: 80 }, { id: 2, cx: 30, cy: 40, r: 5, href: '#link2', text: 'Link 2', angle: 20 }, { id: 3, cx: 60, cy: 35, r: 5, href: '#link3', text: 'Link 3', angle: 130 }, { id: 4, cx: 90, cy: 15, r: 5, href: '#link4', text: 'Link 4', angle: 315 }, @@ -10,7 +10,7 @@ const circles = [ // Function to calculate positions for text and arcs const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: number) => { const arcOffset = r + 2; - const textOffset = arcOffset + 3; + const textOffset = arcOffset + 5; const angleRadians = (angleDegrees - 90) * (Math.PI / 180); // Convert degrees to radians and adjust for SVG coordinate system const startAngle = angleRadians - (35 * Math.PI) / 180; // Start angle for the arc (35 degrees before the given angle) const endAngle = angleRadians + (35 * Math.PI) / 180; // End angle for the arc (35 degrees after the given angle) @@ -72,7 +72,7 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num text-anchor="middle" alignment-baseline="middle" class="fill-black cursor-pointer" - font-size="2" + font-size="3" > {circle.text} diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro index ee07959..3b9c85b 100644 --- a/src/layouts/MarkdownLayout.astro +++ b/src/layouts/MarkdownLayout.astro @@ -6,7 +6,6 @@ const { frontmatter } = Astro.props; function createTagLink(tag: string) { return `/astro-poc/posts/tags/${tag}`; } - --- @@ -27,6 +26,19 @@ function createTagLink(tag: string) {