jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-01-15 08:02:56 -05:00
Code Issues Activity

do sub-heading anchor links manually instead of via rehype plugin

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-22 17:21:29 -05:00
parent 7b01f01c9d
commit f62c057f5d
5 changed files with 132 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/Heading/Heading.module.css
View File

@@ -19,23 +19,23 @@
}
/* sub-heading anchor styles */
.heading :global(.h-anchor) {
.anchor {
margin: 0 0.25em;
padding: 0 0.25em;
color: var(--medium-light);
background: none;
font-weight: 300;
background: none;
transition: none;
opacity: 0; /* overridden on hover */
user-select: none;
}
.heading :global(.h-anchor::before) {
.anchor::before {
content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
}
.heading :global(.h-anchor:hover) {
.anchor:hover {
color: var(--link);
}
/* make anchor `#` link show up on hover over the corresponding heading */
.heading:hover :global(.h-anchor) {
.heading:hover .anchor {
opacity: 1;
}

28
components/Heading/Heading.tsx
View File

@@ -4,19 +4,29 @@ import type { HTMLAttributes } from "react";
import styles from "./Heading.module.css";
type Props = HTMLAttributes<HTMLHeadingElement> & {
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
id?: string;
className?: string;
};
const Heading = ({ as: Component, className, ...rest }: Props) => {
return <Component className={classNames(styles.heading, styles[Component], className)} {...rest} />;
const Heading = ({ as: Component, id, className, children, ...rest }: Props) => {
return (
<Component className={classNames(styles.heading, styles[Component], className)} id={id} {...rest}>
{children}
{/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
{id && (Component === "h2" || Component === "h3") && (
<a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
)}
</Component>
);
};
export const H1 = (props: Props) => <Heading as="h1" {...props} />;
export const H2 = (props: Props) => <Heading as="h2" {...props} />;
export const H3 = (props: Props) => <Heading as="h3" {...props} />;
export const H4 = (props: Props) => <Heading as="h4" {...props} />;
export const H5 = (props: Props) => <Heading as="h5" {...props} />;
export const H6 = (props: Props) => <Heading as="h6" {...props} />;
export const H1 = (props: Omit<Props, "as">) => <Heading as="h1" {...props} />;
export const H2 = (props: Omit<Props, "as">) => <Heading as="h2" {...props} />;
export const H3 = (props: Omit<Props, "as">) => <Heading as="h3" {...props} />;
export const H4 = (props: Omit<Props, "as">) => <Heading as="h4" {...props} />;
export const H5 = (props: Omit<Props, "as">) => <Heading as="h5" {...props} />;
export const H6 = (props: Omit<Props, "as">) => <Heading as="h6" {...props} />;
export default Heading;