From a4350b4fe49bd1ecc4d3e327cf0dab4bdf1f77e8 Mon Sep 17 00:00:00 2001
From: Angus Hollands <goosey15@gmail.com>
Date: Tue, 14 Jan 2025 10:49:53 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=88=20Disable=20`hover`=20modifier=20f?=
 =?UTF-8?q?or=20mobile=20in=20`HashLink`=20(#516)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: disable hover modifier for mobile

* chore: add changeset

* fix: only forcibly-show footnote links on mobile
---
 .changeset/heavy-geese-flow.md             | 5 +++++
 packages/myst-to-react/src/hashLink.tsx    | 6 ++++--
 packages/site/src/components/Footnotes.tsx | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/heavy-geese-flow.md

diff --git a/.changeset/heavy-geese-flow.md b/.changeset/heavy-geese-flow.md
new file mode 100644
index 00000000..0b842a2b
--- /dev/null
+++ b/.changeset/heavy-geese-flow.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Always show hover HashLink on mobile
diff --git a/packages/myst-to-react/src/hashLink.tsx b/packages/myst-to-react/src/hashLink.tsx
index d4e2e8e4..9310a0b0 100644
--- a/packages/myst-to-react/src/hashLink.tsx
+++ b/packages/myst-to-react/src/hashLink.tsx
@@ -61,7 +61,7 @@ export function HashLink({
   id?: string;
   kind?: string;
   title?: string;
-  hover?: boolean;
+  hover?: boolean | 'desktop';
   children?: '#' | '¶' | React.ReactNode;
   canSelectText?: boolean;
   className?: string;
@@ -84,7 +84,9 @@ export function HashLink({
     <a
       className={classNames('no-underline text-inherit hover:text-inherit', className, {
         'select-none': !canSelectText,
-        'transition-opacity opacity-0 focus:opacity-100 group-hover:opacity-70': hover,
+        'transition-opacity opacity-0 focus:opacity-100 group-hover:opacity-70': hover === true,
+        '[@media(hover:hover)]:transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:focus:opacity-100 [@media(hover:hover)]:group-hover:opacity-70':
+          hover === 'desktop',
         'hover:underline': !hover,
       })}
       onClick={scroll}
diff --git a/packages/site/src/components/Footnotes.tsx b/packages/site/src/components/Footnotes.tsx
index badedc0e..dc9e0443 100644
--- a/packages/site/src/components/Footnotes.tsx
+++ b/packages/site/src/components/Footnotes.tsx
@@ -50,7 +50,7 @@ export function Footnotes({
                           key={(ref as GenericNode).key}
                           id={`fnref-${(ref as GenericNode).key}`}
                           title="Link to Content"
-                          hover
+                          hover="desktop"
                           className="p-1"
                           children="↩"
                           scrollBehavior="instant"