From 092f8589a3ae80e88f2bcacf0a2244dffae250cb Mon Sep 17 00:00:00 2001 From: Alexander Daichendt Date: Sun, 31 Jul 2022 15:11:04 +0200 Subject: [PATCH] feat: copy hyperlinks of headings in blogpost --- mdsvex.config.js | 2 +- src/lib/layouts/blog.svelte | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/mdsvex.config.js b/mdsvex.config.js index 37475ac..9e87fda 100644 --- a/mdsvex.config.js +++ b/mdsvex.config.js @@ -16,7 +16,7 @@ const config = defineConfig({ }, remarkPlugins: [remarkGFM, remarkEmoji, remarkFootnotes], - rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings], + rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behaviour: 'append' }]], }); export default config; diff --git a/src/lib/layouts/blog.svelte b/src/lib/layouts/blog.svelte index 0f2c56b..ebe8a4c 100644 --- a/src/lib/layouts/blog.svelte +++ b/src/lib/layouts/blog.svelte @@ -41,4 +41,22 @@ font-size: 0.8rem; margin-bottom: 1rem; } + :global(h1, h2, h3, h4) { + display: flex; + align-items: center; + justify-content: flex-start; + } + :global(h1 a, h2 a, h3 a, h4 a) { + text-decoration: none; + font-size: 0.7em; + margin-left: 0.5rem; + opacity: 0; + transition: opacity 0.2s ease-in-out 0.1s; + } + :global(h1:hover a, h2:hover a, h3:hover a, h4:hover a) { + opacity: 0.8; + } + :global(.icon-link::before) { + content: '🔗'; + }