jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 10:01:18 -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

9
components/Heading/Heading.tsx
View File

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

21
components/HeadingAnchor/HeadingAnchor.tsx
View File

@@ -1,22 +1,27 @@
import { LinkIcon } from "../Icons";
import { styled } from "../../lib/styles/stitches.config"; import { styled } from "../../lib/styles/stitches.config";
import type { ComponentProps } from "react"; import type { ComponentProps } from "react";
const PoundSignLink = styled("a", { const AnchorLink = styled("a", {
textDecoration: "none", textDecoration: "none",
lineHeight: 1,
"&::before": {
// pound sign `#`, done here to keep content DOM cleaner
content: "\\0023",
},
}); });
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; id: string;
title: string; title: string;
}; };
const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => ( 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; export default HeadingAnchor;

1
components/Icons/index.ts
View File

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