interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Stylize active docs link [Fixes #74, Fixes #115] (#108) 

* add bold for active docs link [Fixes #74]

* Add ::before indicator to active doc link

Removes bold styling per design

* Update documentation-links.yaml

Makes it so `id` is paired with either a `to` field OR a list of `items` but not both

* Updates hover styling for left docs nav

* clean up styling

Removes remaining underlines from links styled as buttons. Cleans up logic for conditionally showing the ::before pseudo element. Makes the ::before indicator slightly larger.

* tweak ::before indicator styling

* tweak ::before indicator styling
This commit is contained in:
Paul Wackerow 2022-12-05 16:13:47 +01:00 committed by GitHub
parent 3a2a4b1cbf
commit 2ae5698622
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 134 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/UI/docs/DocsLinks.tsx
View File

@ -11,6 +11,7 @@ import {
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { AddIcon, MinusIcon } from '@chakra-ui/icons'; import { AddIcon, MinusIcon } from '@chakra-ui/icons';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { useRouter } from 'next/router';
import { LinksList } from './'; import { LinksList } from './';
@ -20,62 +21,83 @@ interface Props {
navLinks: NavLink[]; navLinks: NavLink[];
} }
export const DocsLinks: FC<Props> = ({ navLinks }) => ( export const DocsLinks: FC<Props> = ({ navLinks }) => {
<Stack border='2px' borderColor='primary'> const router = useRouter();
{navLinks.map(({ id, to, items }, idx) => { const { slug } = router.query;
return ( return (
<Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}> <Stack border='2px' borderColor='primary'>
<AccordionItem border='none'> {navLinks.map(({ id, to, items }, idx) => {
{({ isExpanded }) => ( const split = to?.split('/')
<> const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
<AccordionButton return (
borderBottom={navLinks.length - 1 === idx ? 'none' : '2px'} <Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}>
p={0} <AccordionItem border='none'>
borderColor='primary' {({ isExpanded }) => (
justifyContent='space-between' <>
placeContent='flex-end' <AccordionButton
bg='button-bg' borderBottom={navLinks.length - 1 === idx ? 'none' : '2px'}
> p={0}
<Stack
p={4}
borderRight={items ? '2px' : 'none'}
borderColor='primary' borderColor='primary'
w='100%' justifyContent='space-between'
bg='bg' placeContent='flex-end'
bg='button-bg'
data-group
> >
{to ? ( <Stack
<NextLink href={to} passHref> p={4}
<Link> borderRight={items ? '2px' : 'none'}
<Text textStyle='docs-nav-dropdown'>{id}</Text> borderColor='primary'
</Link> w='100%'
</NextLink> bg='bg'
) : ( _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
<Text textStyle='docs-nav-dropdown'>{id}</Text> >
)} {to ? (
</Stack> <NextLink href={to} passHref>
<Link textDecoration='none !important'>
{items && ( <Text
<Stack minW='61px'> textStyle='docs-nav-dropdown'
<Center> color={isActive ? 'primary' : 'unset'}
{isExpanded ? ( _before={{
<MinusIcon w='20px' h='20px' color='primary' /> content: '"■"',
) : ( verticalAlign: '-1.25px',
<AddIcon w='20px' h='20px' color='primary' /> marginInlineEnd: 2,
)} fontSize: 'lg',
</Center> display: isActive ? 'unset' : 'none',
}}
_groupHover={{ color: 'bg' }}
>
{id}
</Text>
</Link>
</NextLink>
) : (
<Text textStyle='docs-nav-dropdown'>{id}</Text>
)}
</Stack> </Stack>
{items && (
<Stack minW='61px'>
<Center>
{isExpanded ? (
<MinusIcon w='20px' h='20px' color='primary' />
) : (
<AddIcon w='20px' h='20px' color='primary' />
)}
</Center>
</Stack>
)}
</AccordionButton>
{items && (
<AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}>
<LinksList links={items} />
</AccordionPanel>
)} )}
</AccordionButton> </>
{items && ( )}
<AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}> </AccordionItem>
<LinksList links={items} /> </Accordion>
</AccordionPanel> );
)} })}
</> </Stack>
)} );
</AccordionItem> }
</Accordion>
);
})}
</Stack>
);

72
src/components/UI/docs/LinkList.tsx
View File

@ -1,6 +1,7 @@
import { FC } from 'react'; import { FC } from 'react';
import { Link, Stack, Text } from '@chakra-ui/react'; import { Link, Stack, Text } from '@chakra-ui/react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { useRouter } from 'next/router';
import { NavLink } from '../../../types'; import { NavLink } from '../../../types';
@ -8,28 +9,49 @@ interface LinksListProps {
links: NavLink[]; links: NavLink[];
} }
export const LinksList: FC<LinksListProps> = ({ links }) => ( export const LinksList: FC<LinksListProps> = ({ links }) => {
<Stack px={4}> const router = useRouter();
{links.map(({ id, to, items }) => { const { slug } = router.query;
return to ? ( return (
<Stack key={id}> <Stack px={4}>
<NextLink href={to} passHref key={id}> {links.map(({ id, to, items }) => {
<Link> const split = to?.split('/')
<Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}> const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
{id} return to ? (
</Text> <Stack key={id} _hover={{ background: 'primary', color: 'bg' }} data-group>
</Link> <NextLink href={to} passHref key={id}>
</NextLink> <Link textDecoration='none !important'>
{items && <LinksList links={items} />} <Text
</Stack> textStyle='docs-nav-links'
) : ( color={items || isActive ? 'primary' : 'body'}
<Stack key={id}> _before={{
<Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}> content: '"■"',
{id} verticalAlign: '-1.25px',
</Text> marginInlineEnd: 2,
{items && <LinksList links={items} />} fontSize: 'lg',
</Stack> display: isActive ? 'unset' : 'none',
); }}
})} _groupHover={{
</Stack> color: 'bg',
); boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)',
}}
>
{id}
</Text>
</Link>
</NextLink>
{items && <LinksList links={items} />}
</Stack>
) : (
<Stack key={id}>
<Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
{id}
</Text>
{items && <LinksList links={items} />}
</Stack>
);
})}
</Stack>
);
};

15
src/data/documentation-links.yaml
View File

@ -1,6 +1,7 @@
- id: Getting started - id: Getting started
to: /docs/getting-started
items: items:
- id: Introduction
to: /docs/getting-started
- id: Hardware requirements - id: Hardware requirements
to: /docs/getting-started/hardware-requirements to: /docs/getting-started/hardware-requirements
- id: Installing Geth - id: Installing Geth
@ -8,8 +9,9 @@
- id: Consensus clients - id: Consensus clients
to: /docs/getting-started/consensus-clients to: /docs/getting-started/consensus-clients
- id: Fundamentals - id: Fundamentals
to: /docs/fundamentals
items: items:
- id: Introduction
to: /docs/fundamentals
- id: Node architecture - id: Node architecture
to: /docs/fundamentals/node-architecture to: /docs/fundamentals/node-architecture
- id: Command-line options - id: Command-line options
@ -35,8 +37,9 @@
- id: Interacting with Geth - id: Interacting with Geth
items: items:
- id: JSON-RPC Server - id: JSON-RPC Server
to: /docs/interacting-with-geth/rpc
items: items:
- id: Introduction
to: /docs/interacting-with-geth/rpc
- id: Batch requests - id: Batch requests
to: /docs/interacting-with-geth/rpc/batch to: /docs/interacting-with-geth/rpc/batch
- id: GraphQL server - id: GraphQL server
@ -70,8 +73,9 @@
- id: 'JavaScript Console 2: Contracts' - id: 'JavaScript Console 2: Contracts'
to: /docs/interacting-with-geth/javascript-console-contracts to: /docs/interacting-with-geth/javascript-console-contracts
- id: Developers - id: Developers
to: /docs/developers
items: items:
- id: Introduction
to: /docs/developers
- id: Dapp developers - id: Dapp developers
items: items:
- id: Go API - id: Go API
@ -83,8 +87,9 @@
- id: Geth for Mobile - id: Geth for Mobile
to: /docs/developers/dapp-developer/mobile to: /docs/developers/dapp-developer/mobile
- id: EVM tracing - id: EVM tracing
to: /docs/developers/evm-tracing
items: items:
- id: Introduction
to: /docs/developers/evm-tracing
- id: Basic traces - id: Basic traces
to: /docs/developers/evm-tracing/basic-traces to: /docs/developers/evm-tracing/basic-traces
- id: Built-in tracers - id: Built-in tracers