From 59d312db4187a9bd8260c3202a543c5c9ad661f5 Mon Sep 17 00:00:00 2001
From: Andrew Deniszczyc <adeniszczyc@bloomberg.net>
Date: Fri, 14 Jan 2022 16:14:13 +0000
Subject: [PATCH] Add support for anchor links on hover on members

---
 .../themes/default/partials/anchor-icon.tsx   | 20 +++++++++++++++++++
 .../output/themes/default/partials/member.tsx |  7 ++++---
 static/style.css                              | 16 +++++++++++++++
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/output/themes/default/partials/anchor-icon.tsx

diff --git a/src/lib/output/themes/default/partials/anchor-icon.tsx b/src/lib/output/themes/default/partials/anchor-icon.tsx
new file mode 100644
index 000000000..e585b39a3
--- /dev/null
+++ b/src/lib/output/themes/default/partials/anchor-icon.tsx
@@ -0,0 +1,20 @@
+import { JSX } from "../../../../utils";
+
+export const anchorIcon = (anchor: string | undefined) => (
+    <a href={`#${anchor}`} aria-label="Permalink" class="tsd-anchor-icon">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon icon-tabler icon-tabler-link"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+        </svg>
+    </a>
+);
diff --git a/src/lib/output/themes/default/partials/member.tsx b/src/lib/output/themes/default/partials/member.tsx
index 5b106da6f..9d15f3113 100644
--- a/src/lib/output/themes/default/partials/member.tsx
+++ b/src/lib/output/themes/default/partials/member.tsx
@@ -2,14 +2,15 @@ import { renderFlags, wbr } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 import { JSX } from "../../../../utils";
 import { DeclarationReflection, ReferenceReflection } from "../../../../models";
+import { anchorIcon } from "./anchor-icon";
 
 export const member = (context: DefaultThemeRenderContext, props: DeclarationReflection) => (
-    <section class={"tsd-panel tsd-member " + props.cssClasses}>
-        <a id={props.anchor} class="tsd-anchor"></a>
+    <section class={"tsd-panel tsd-member" + props.cssClasses} id={props.anchor}>
         {!!props.name && (
-            <h3>
+            <h3 class="tsd-anchor-link">
                 {renderFlags(props.flags)}
                 {wbr(props.name)}
+                {anchorIcon(props.anchor)}
             </h3>
         )}
         {props.signatures
diff --git a/static/style.css b/static/style.css
index f994df901..a16ed029e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1395,3 +1395,19 @@ input[type="checkbox"]:checked + .tsd-widget:before {
 img {
     max-width: 100%;
 }
+
+.tsd-anchor-icon {
+    margin-left: 10px;
+    vertical-align: middle;
+    color: var(--color-text);
+}
+
+.tsd-anchor-icon svg {
+    width: 1em;
+    height: 1em;
+    visibility: hidden;
+}
+
+.tsd-anchor-link:hover > .tsd-anchor-icon svg {
+    visibility: visible;
+}