jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-04-21 12:25:31 -04: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
components/Heading/Heading.tsx
+19 -9
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;