Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add anchor icon

Browse Source
This commit is contained in:
iCrawl
2022-08-23 03:06:21 +02:00
parent 434f696397
commit caa5c0332f
7 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/website/src/components/CodeListing.tsx
View File

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

2
packages/website/src/components/DocContainer.tsx
View File

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

17
packages/website/src/components/MethodItem.tsx
View File

@@ -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
id={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`}
className="scroll-mt-30"
spacing="xs"
>
<Stack id={key} 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

2
packages/website/src/components/MethodList.tsx
View File

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

2
packages/website/src/components/Sections.tsx
View File

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

10
packages/website/src/components/SidebarItems.tsx
View File

@@ -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,
},
},
},
}));

2
packages/website/src/components/TableOfContentItems.tsx
View File

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