From 36a5b9cf50358a66ca136be2e882ff893cc0165d Mon Sep 17 00:00:00 2001
From: James Fenn <me@jfenn.me>
Date: Sun, 21 Jan 2024 02:35:49 -0500
Subject: [PATCH] fix #868 - prevent "copy link" styling/behavior when a link
 is used inside a heading

---
 content/blog/example/index.md                 |  4 +++
 .../base/scripts/heading-link-script.astro    |  4 +++
 .../base/scripts/heading-link.module.scss     | 32 +++++++++++++++----
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/content/blog/example/index.md b/content/blog/example/index.md
index 1bd43477..21caa714 100644
--- a/content/blog/example/index.md
+++ b/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
diff --git a/src/views/base/scripts/heading-link-script.astro b/src/views/base/scripts/heading-link-script.astro
index eb7d831b..ec537d98 100644
--- a/src/views/base/scripts/heading-link-script.astro
+++ b/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
diff --git a/src/views/base/scripts/heading-link.module.scss b/src/views/base/scripts/heading-link.module.scss
index 1b7c7504..a37b7914 100644
--- a/src/views/base/scripts/heading-link.module.scss
+++ b/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) {
+		.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)) {
+			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));