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

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

Browse Source 
* 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
pull/26459/head^2
Paul Wackerow 2 years ago committed by GitHub
parent 3a2a4b1cbf
commit 2ae5698622
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 133 additions and 84 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 130
      src/components/UI/docs/DocsLinks.tsx
  2. 72
      src/components/UI/docs/LinkList.tsx
  3. 15
      src/data/documentation-links.yaml

130
src/components/UI/docs/DocsLinks.tsx
Unescape View File

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

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

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

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

Write Preview
Loading…
Cancel
Save