Prevent "copy link" styling/behavior when a link is used inside a heading (#1020)

Fixes #868 - and also prevents the "Copy link" underline/prompt from
appearing when the link is hovered, for clarity about what action
clicking will perform


https://unicorn-utterances-git-fix-links-inside-headings-oceanbit.vercel.app/posts/example_noindex#Heading-with-a-link-inside-of-it

content/blog/example/index.md

@@ -154,3 +154,7 @@ This is regular text.
    2. Padded sub-item 2
 
 3. List item 3
+
+# Heading `with a code snippet` inside of it
+
+# Heading [with a link](https://example.com) inside of it

src/views/base/scripts/heading-link-script.astro

@@ -31,6 +31,10 @@ import style from "./heading-link.module.scss";
 		) as HTMLTemplateElement;
 
 		function handleClick(e: Event) {
+			if ((e.target as HTMLElement).tagName === "A") {
+				return;
+			}
+
 			const target = e.currentTarget as HTMLElement;
 			const headingAnchorEl = target.hasAttribute("data-heading-anchor")
 				? target

src/views/base/scripts/heading-link.module.scss

@@ -87,6 +87,17 @@
 	}
 }
 
+// If the heading contains an <a> which is hovered,
+// click will follow the anchor href, so the "Copy link"
+// button should not be displayed
+@supports selector(:has(*)) {
+	:global(.heading-linked):has(a:hover, a:focus-visible) {
+		.headingLink {
+			opacity: 0 !important;
+		}
+	}
+}
+
 .headingLinkContainer:focus-visible .headingLink {
 	outline: var(--heading-link_outline-width) solid var(--heading-link_outline-color);
 }
@@ -116,13 +127,17 @@
 	--heading_background_outline-width: var(--border-width_focus);
 }
 
-:global(.heading-linked):hover,
-:global(.heading-linked):focus-within,
-:global(.heading-linked):has(.headingLinkContainer:hover) {
-	text-decoration: underline;
-}
-
 @supports selector(:has(*)) {
+	:global(.heading-linked):hover,
+	:global(.heading-linked):focus-within,
+	:global(.heading-linked):has(.headingLinkContainer:hover) {
+		// The underline should not be applied if an inner <a> is focused
+		// as clicking will follow the link, not interact with the heading
+		&:not(:has(a:hover, a:focus-visible)) {
+			text-decoration: underline;
+		}
+	}
+
 	:global(.heading-linked):has(.headingLinkContainer:focus-visible) {
 		&> span {
 			border-radius: calc(var(--heading_background_corner-radius) - var(--heading_background_padding));
@@ -133,6 +148,11 @@
 }
 
 @supports not selector(:has(*)) {
+	:global(.heading-linked):hover,
+	:global(.heading-linked):focus-within {
+		text-decoration: underline;
+	}
+
 	:global(.heading-linked):focus-within {
 		&> span {
 			border-radius: calc(var(--heading_background_corner-radius) - var(--heading_background_padding));