jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 15:08:27 -04:00
Code Issues

update heading link icon 🔗

Browse Source
This commit is contained in:
Jake Jarvis 2022-04-30 09:17:52 -04:00
parent 3547d14576
commit eaeceaa58f
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Heading/Heading.tsx
View File

@ -6,8 +6,7 @@ import type { ComponentProps } from "react";
const Anchor = styled(HeadingAnchor, { const Anchor = styled(HeadingAnchor, {
margin: "0 0.4em", margin: "0 0.4em",
padding: "0 0.2em", padding: "0 0.2em",
color: "$mediumLight", color: "$medium",
fontWeight: 300,
opacity: 0, // overridden on hover below (except on small screens) opacity: 0, // overridden on hover below (except on small screens)
"&:hover": { "&:hover": {
@ -36,12 +35,14 @@ const H = styled("h1", {
scrollMarginTop: "6.5rem", scrollMarginTop: "6.5rem",
}, },
// show anchor link when hovering anywhere over the heading line
[`&:hover ${Anchor}`]: { [`&:hover ${Anchor}`]: {
opacity: 1, opacity: 1,
}, },
variants: { variants: {
underline: { // subtle horizontal rule under the heading, set by default on `<h2>`s
divider: {
true: { true: {
paddingBottom: "0.25em", paddingBottom: "0.25em",
borderBottom: "1px solid $kindaLight", borderBottom: "1px solid $kindaLight",
@ -52,11 +53,12 @@ const H = styled("h1", {
export type HeadingProps = ComponentProps<typeof H> & { export type HeadingProps = ComponentProps<typeof H> & {
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; 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 ( return (
<H as={as} underline={as === "h2"} id={id} {...rest}> <H as={as} divider={divider ?? as === "h2"} id={id} {...rest}>
{children} {children}
{/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */} {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}

1
components/HeadingAnchor/HeadingAnchor.tsx
View File

@ -8,7 +8,6 @@ const AnchorLink = styled("a", {
}); });
const Icon = styled(LinkIcon, { const Icon = styled(LinkIcon, {
fill: "currentColor",
width: "0.8em", width: "0.8em",
height: "0.8em", height: "0.8em",
}); });

2
components/Icons/index.ts
View File

@ -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 DateIcon } from "feather-icons/dist/icons/calendar.svg";
export { default as EditIcon } from "feather-icons/dist/icons/edit.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 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 NotesIcon } from "feather-icons/dist/icons/edit-3.svg";
export { default as ProjectsIcon } from "feather-icons/dist/icons/code.svg"; export { default as ProjectsIcon } from "feather-icons/dist/icons/code.svg";
export { default as TagIcon } from "feather-icons/dist/icons/tag.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 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 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 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 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 OctocatOcticon } from "@primer/octicons/build/svg/mark-github-16.svg";
export { default as StarOcticon } from "@primer/octicons/build/svg/star-16.svg"; export { default as StarOcticon } from "@primer/octicons/build/svg/star-16.svg";