nicer heading anchor links

components/Heading/Heading.tsx

@@ -4,8 +4,8 @@ import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 
 const Anchor = styled(HeadingAnchor, {
-  margin: "0 0.25em",
-  padding: "0 0.25em",
+  margin: "0 0.4em",
+  padding: "0 0.2em",
   color: "$mediumLight",
   fontWeight: 300,
   opacity: 0, // overridden on hover below (except on small screens)
@@ -14,8 +14,11 @@ const Anchor = styled(HeadingAnchor, {
     color: "$link",
   },
 
-  // don't require hover to show anchor link on small (likely touch) screens
   "@medium": {
+    margin: "0 0.2em",
+    padding: "0 0.4em",
+
+    // don't require hover to show anchor link on small (likely touch) screens
     opacity: 1,
   },
 });

components/HeadingAnchor/HeadingAnchor.tsx

@@ -1,22 +1,27 @@
+import { LinkIcon } from "../Icons";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 
-const PoundSignLink = styled("a", {
+const AnchorLink = styled("a", {
   textDecoration: "none",
-
-  "&::before": {
-    // pound sign `#`, done here to keep content DOM cleaner
-    content: "\\0023",
-  },
+  lineHeight: 1,
 });
 
-export type HeadingAnchorProps = ComponentProps<typeof PoundSignLink> & {
+const Icon = styled(LinkIcon, {
+  fill: "currentColor",
+  width: "0.8em",
+  height: "0.8em",
+});
+
+export type HeadingAnchorProps = ComponentProps<typeof AnchorLink> & {
   id: string;
   title: string;
 };
 
 const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => (
-  <PoundSignLink href={`#${id}`} title={`Jump to "${title}"`} tabIndex={-1} aria-hidden={true} {...rest} />
+  <AnchorLink href={`#${id}`} title={`Jump to "${title}"`} tabIndex={-1} aria-hidden={true} {...rest}>
+    <Icon />
+  </AnchorLink>
 );
 
 export default HeadingAnchor;

components/Icons/index.ts

@@ -17,6 +17,7 @@ export { default as CheckOcticon } from "@primer/octicons/build/svg/check-16.svg
 export { default as ClipboardOcticon } from "@primer/octicons/build/svg/paste-16.svg";
 export { default as ForkOcticon } from "@primer/octicons/build/svg/repo-forked-16.svg";
 export { default as HeartIcon } from "@primer/octicons/build/svg/heart-fill-16.svg";
+export { default as LinkIcon } from "@primer/octicons/build/svg/link-16.svg";
 export { default as MarkdownIcon } from "@primer/octicons/build/svg/markdown-16.svg";
 export { default as OctocatOcticon } from "@primer/octicons/build/svg/mark-github-16.svg";
 export { default as StarOcticon } from "@primer/octicons/build/svg/star-16.svg";