From eaeceaa58fd612947e53ca965585e23ebb57d680 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Sat, 30 Apr 2022 09:17:52 -0400
Subject: [PATCH] =?UTF-8?q?update=20heading=20link=20icon=20=F0=9F=94=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Heading/Heading.tsx             | 12 +++++++-----
 components/HeadingAnchor/HeadingAnchor.tsx |  1 -
 components/Icons/index.ts                  |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/Heading/Heading.tsx b/components/Heading/Heading.tsx
index f3b2255e..3839eb93 100644
--- a/components/Heading/Heading.tsx
+++ b/components/Heading/Heading.tsx
@@ -6,8 +6,7 @@ import type { ComponentProps } from "react";
 const Anchor = styled(HeadingAnchor, {
   margin: "0 0.4em",
   padding: "0 0.2em",
-  color: "$mediumLight",
-  fontWeight: 300,
+  color: "$medium",
   opacity: 0, // overridden on hover below (except on small screens)
 
   "&:hover": {
@@ -36,12 +35,14 @@ const H = styled("h1", {
     scrollMarginTop: "6.5rem",
   },
 
+  // show anchor link when hovering anywhere over the heading line
   [`&:hover ${Anchor}`]: {
     opacity: 1,
   },
 
   variants: {
-    underline: {
+    // subtle horizontal rule under the heading, set by default on `<h2>`s
+    divider: {
       true: {
         paddingBottom: "0.25em",
         borderBottom: "1px solid $kindaLight",
@@ -52,11 +53,12 @@ const H = styled("h1", {
 
 export type HeadingProps = ComponentProps<typeof H> & {
   as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  divider?: boolean;
 };
 
-const Heading = ({ as, id, children, ...rest }: HeadingProps) => {
+const Heading = ({ as, id, divider, children, ...rest }: HeadingProps) => {
   return (
-    <H as={as} underline={as === "h2"} id={id} {...rest}>
+    <H as={as} divider={divider ?? as === "h2"} id={id} {...rest}>
       {children}
 
       {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
diff --git a/components/HeadingAnchor/HeadingAnchor.tsx b/components/HeadingAnchor/HeadingAnchor.tsx
index d4444e81..7e7c06d1 100644
--- a/components/HeadingAnchor/HeadingAnchor.tsx
+++ b/components/HeadingAnchor/HeadingAnchor.tsx
@@ -8,7 +8,6 @@ const AnchorLink = styled("a", {
 });
 
 const Icon = styled(LinkIcon, {
-  fill: "currentColor",
   width: "0.8em",
   height: "0.8em",
 });
diff --git a/components/Icons/index.ts b/components/Icons/index.ts
index 1213fc2c..abcdf94e 100644
--- a/components/Icons/index.ts
+++ b/components/Icons/index.ts
@@ -7,6 +7,7 @@ export { default as ContactIcon } from "feather-icons/dist/icons/mail.svg";
 export { default as DateIcon } from "feather-icons/dist/icons/calendar.svg";
 export { default as EditIcon } from "feather-icons/dist/icons/edit.svg";
 export { default as HomeIcon } from "feather-icons/dist/icons/home.svg";
+export { default as LinkIcon } from "feather-icons/dist/icons/link.svg";
 export { default as NotesIcon } from "feather-icons/dist/icons/edit-3.svg";
 export { default as ProjectsIcon } from "feather-icons/dist/icons/code.svg";
 export { default as TagIcon } from "feather-icons/dist/icons/tag.svg";
@@ -17,7 +18,6 @@ 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";