👈 Disable hover modifier for mobile in HashLink (#516)

* fix: disable hover modifier for mobile * chore: add changeset * fix: only forcibly-show footnote links on mobile
jupyter-book · Jan 14, 2025 · a4350b4 · a4350b4
1 parent 1f873f8
commit a4350b4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/heavy-geese-flow.md 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
@@ -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
@@ -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"