jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 01:01:17 -04:00
Code Issues Activity

nicer heading anchor links

Browse Source
This commit is contained in:
Jake Jarvis
2022-04-28 12:47:09 -04:00
parent e1da53a1fe
commit 9e8c3eaa67
3 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/HeadingAnchor/HeadingAnchor.tsx
View File

@@ -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;