feat: add anchor icon

packages/website/src/components/CodeListing.tsx

@@ -1,5 +1,7 @@
-import { Badge, Group, Stack, Title } from '@mantine/core';
+import { ActionIcon, Badge, Group, Stack, Title } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import type { ReactNode } from 'react';
+import { FiLink } from 'react-icons/fi';
 import { HyperlinkedText } from './HyperlinkedText';
 import { InheritanceText } from './InheritanceText';
 import { TSDoc } from './tsdoc/TSDoc';
@@ -35,9 +37,14 @@ export function CodeListing({
 	deprecation?: AnyDocNodeJSON | null;
 	inheritanceData?: InheritanceData | null;
 }) {
+	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
+
 	return (
 		<Stack id={name} className="scroll-mt-30" spacing="xs">
-			<Group>
+			<Group ml={matches ? 0 : -45}>
+				<ActionIcon component="a" href={`#${name}`} variant="transparent">
+					<FiLink size={20} />
+				</ActionIcon>
 				{deprecation ? (
 					<Badge variant="filled" color="red">
 						Deprecated

packages/website/src/components/DocContainer.tsx

@@ -97,7 +97,7 @@ export function DocContainer({
 				</Skeleton>
 
 				{extendsTokens?.length ? (
-					<Group noWrap>
+					<Group pb="xs" noWrap>
 						<Title order={3} ml="xs">
 							Extends
 						</Title>

packages/website/src/components/MethodItem.tsx

@@ -1,4 +1,6 @@
-import { Badge, Group, Stack, Title } from '@mantine/core';
+import { ActionIcon, Badge, Group, Stack, Title } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { FiLink } from 'react-icons/fi';
 import { HyperlinkedText } from './HyperlinkedText';
 import { InheritanceText } from './InheritanceText';
 import { ParameterTable } from './ParameterTable';
@@ -17,17 +19,18 @@ function getShorthandName(data: ApiMethodJSON | ApiMethodSignatureJSON) {
 }
 
 export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJSON }) {
+	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 	const method = data as ApiMethodJSON;
+	const key = `${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`;
 
 	return (
-		<Stack
+		<Stack id={key} className="scroll-mt-30" spacing="xs">
-			id={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`}
-			className="scroll-mt-30"
-			spacing="xs"
-		>
 			<Group>
 				<Stack>
-					<Group>
+					<Group ml={matches ? 0 : -45}>
+						<ActionIcon component="a" href={`#${key}`} variant="transparent">
+							<FiLink size={20} />
+						</ActionIcon>
 						{data.deprecated ? (
 							<Badge variant="filled" color="red">
 								Deprecated

packages/website/src/components/MethodList.tsx

@@ -11,7 +11,7 @@ export function MethodList({ data }: { data: (ApiMethodJSON | ApiMethodSignature
 					key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
 				>
 					<MethodItem data={method} />
-					<Divider className="bg-gray-100" size="md" />
+					<Divider size="md" />
 				</Fragment>
 			))}
 		</Stack>

packages/website/src/components/Sections.tsx

@@ -53,7 +53,7 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
 
 	return data.parameters.length ? (
 		<Section title="Constructor" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
-			<Stack id={`${data.name}`} className="scroll-mt-30" spacing="xs">
+			<Stack id={data.name} className="scroll-mt-30" spacing="xs">
 				<Group>
 					<Stack>
 						<Group>

packages/website/src/components/SidebarItems.tsx

@@ -78,13 +78,15 @@ const useStyles = createStyles((theme) => ({
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.colors.gray![7],
 		borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
 
+		'&[data-active]': {
+			'&:hover': {
+				color: theme.white,
+			},
+		},
+
 		'&:hover': {
 			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
 			color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-
-			'&[data-active]': {
-				color: theme.white,
-			},
 		},
 	},
 }));

packages/website/src/components/TableOfContentItems.tsx

@@ -50,7 +50,7 @@ export function TableOfContentItems({
 		const key = `${member.name}${member.overloadIndex && member.overloadIndex > 1 ? `:${member.overloadIndex}` : ''}`;
 
 		return (
-			<Box<'a'> key={key} href={`#${key}`} component="a" className={classes.link}>
+			<Box<'a'> key={key} component="a" href={`#${key}`} className={classes.link}>
 				<Group>
 					<Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} className="line-clamp-1">
 						{member.name}