Skip to content

Commit 6fab7ac

Browse files
aulneauaulneau
committed
fix: update content, improve various components
1 parent 335255d commit 6fab7ac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+712
-495
lines changed

‎lib/md-loader.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ module.exports = async function (src) {
3333
const { content, data } = fm(src);
3434
const headings = getHeadings(content);
3535
const code =
36-
`import { Layout as DefaultLayout } from '@components/layouts/default-layout';
37-
export const meta = ${JSON.stringify({ ...data, headings })};
36+
`import { MDWrapper } from '@components/layouts/markdown-wrapper';
37+
export const frontmatter = ${JSON.stringify({ ...data, headings })};
3838
const Layout = ({ children, ...props }) => (
39-
<DefaultLayout meta={meta} {...props}>{children}</DefaultLayout>
39+
<MDWrapper frontmatter={frontmatter} {...props}>{children}</MDWrapper>
4040
)
4141
export default Layout;
4242

‎next.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const remarkPlugins = [
1919
require('remark-unwrap-images'),
2020
require('remark-normalize-headings'),
2121
require('remark-slug'),
22+
require('remark-footnotes'),
2223
];
2324

2425
module.exports = withBundleAnalyzer({

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"remark": "^12.0.1",
6161
"remark-emoji": "2.1.0",
6262
"remark-external-links": "^6.1.0",
63+
"remark-footnotes": "^1.0.0",
6364
"remark-frontmatter": "^2.0.0",
6465
"remark-images": "2.0.0",
6566
"remark-normalize-headings": "^2.0.0",

‎src/common/constants.ts

+2
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ export const TOC_WIDTH = 280;
33
export const CONTENT_MAX_WIDTH = 1104;
44

55
export const SHIKI_THEME = 'Material-Theme-Default';
6+
7+
export const THEME_STORAGE_KEY = 'theme';

‎src/components/cli-reference.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { cliReferenceData } from '@common/../_data/cliRef';
33
import { MDXComponents } from '@components/mdx/mdx-components';
4-
import { Grid, Box } from '@blockstack/ui';
4+
import { Grid, Box, color } from '@blockstack/ui';
55
import { border } from '@common/utils';
66
import { hydrate } from '@common/hydrate-mdx';
77

@@ -37,6 +37,7 @@ const ReferenceEntry = ({ entry, usage }) => (
3737
borderBottom={border()}
3838
gridGap="base"
3939
gridTemplateColumns="repeat(4, minmax(0,25%))"
40+
color={color('text-caption')}
4041
>
4142
<Box fontSize="14px" fontWeight="bold">
4243
Name
@@ -61,6 +62,7 @@ const ReferenceEntry = ({ entry, usage }) => (
6162
gridGap="base"
6263
gridTemplateColumns="repeat(4, minmax(0,25%))"
6364
key={index}
65+
color={color('text-body')}
6466
>
6567
<Box>
6668
<InlineCode>${name}</InlineCode>

‎src/components/code-block/index.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { Highlighter, HighlighterProps } from '../highlighter';
3-
import { Box, BoxProps } from '@blockstack/ui';
3+
import { Box, BoxProps, color } from '@blockstack/ui';
44
import { css } from '@styled-system/css';
55

66
// Languages used in docs
@@ -55,18 +55,26 @@ const CodeBlock = React.memo(
5555
) => {
5656
const language = className && className.replace(/language-/, '');
5757

58+
const displayNumbers = showLineNumbers || (language && language !== 'bash');
59+
5860
return (
5961
<Box
60-
className={language && language !== 'bash' ? 'line-numbers' : ''}
62+
className={displayNumbers ? 'line-numbers' : ''}
6163
bg="ink"
64+
border="1px solid"
65+
borderColor={color('border')}
66+
borderRightWidth={['0px', '0px', '1px']}
67+
borderLeftWidth={['0px', '0px', '1px']}
6268
borderRadius={[0, 0, '12px']}
63-
overflowX="auto"
69+
overflow="hidden"
6470
>
6571
<Box
6672
ref={ref}
6773
css={css({
6874
...style,
6975
// @ts-ignore
76+
overflowX: 'auto',
77+
// @ts-ignore
7078
color: 'white',
7179
// @ts-ignore
7280
whiteSpace: 'pre',
@@ -76,7 +84,7 @@ const CodeBlock = React.memo(
7684
<Highlighter
7785
language={language as any}
7886
code={children.toString().trim()}
79-
showLineNumbers={showLineNumbers || (language && language !== 'bash')}
87+
showLineNumbers={displayNumbers}
8088
highlightedLines={getHighlightLineNumbers(highlight)}
8189
hideLineHover
8290
/>

‎src/components/color-mode-button.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { forwardRef, Ref } from 'react';
22
import { LinkProps } from '@components/typography';
3-
import { useColorMode } from '@blockstack/ui';
43
import { DarkModeIcon } from '@components/icons/dark-mode';
54
import { LightModeIcon } from '@components/icons/light-mode';
65
import { IconButton } from '@components/icon-button';
6+
import { useColorMode } from '@pages/_app';
77

88
export const ColorModeButton = forwardRef((props: LinkProps, ref: Ref<HTMLDivElement>) => {
9-
const { colorMode, toggleColorMode } = useColorMode();
9+
const [colorMode, toggleColorMode] = useColorMode();
1010
return (
1111
<IconButton onClick={toggleColorMode} title="Toggle color mode" {...props} ref={ref}>
1212
{colorMode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}

‎src/components/color-modes/styles.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { createGlobalStyle } from 'styled-components';
2+
import { generateCssVariables } from '@blockstack/ui';
3+
4+
export const ColorModes = createGlobalStyle`
5+
:root{
6+
${generateCssVariables('light')};
7+
}
8+
9+
@media (prefers-color-scheme: dark) {
10+
:root {
11+
${generateCssVariables('dark')};
12+
}
13+
}
14+
15+
@media (prefers-color-scheme: light) {
16+
:root {
17+
${generateCssVariables('light')};
18+
}
19+
}
20+
21+
html, body, #__next {
22+
background: var(--colors-bg);
23+
border-color: var(--colors-border);
24+
25+
&.light {
26+
${generateCssVariables('light')};
27+
}
28+
&.dark {
29+
${generateCssVariables('dark')};
30+
}
31+
}
32+
33+
input:-webkit-autofill,
34+
input:-webkit-autofill:hover,
35+
input:-webkit-autofill:focus,
36+
textarea:-webkit-autofill,
37+
textarea:-webkit-autofill:hover,
38+
textarea:-webkit-autofill:focus,
39+
select:-webkit-autofill,
40+
select:-webkit-autofill:hover,
41+
select:-webkit-autofill:focus {
42+
-webkit-text-fill-color: var(--colors-text-body);
43+
font-size: 16px !important;
44+
transition: background-color 5000s ease-in-out 0s;
45+
}
46+
47+
input:-ms-input-placeholder,
48+
textarea:-ms-input-placeholder {
49+
color: var(--colors-input-placeholder) !important;
50+
}
51+
52+
input::-ms-input-placeholder,
53+
textarea::-ms-input-placeholder {
54+
color: var(--colors-input-placeholder) !important;
55+
}
56+
57+
input::placeholder,
58+
textarea::placeholder {
59+
color: var(--colors-input-placeholder) !important;
60+
}
61+
`;

‎src/components/feedback.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,14 @@ import { useRouter } from 'next/router';
2121
const Icon: React.FC<BoxProps & { icon: React.FC<any> }> = ({ icon: IconComponent, ...props }) => {
2222
const [isHovered, bind] = useHover();
2323
return (
24-
<Box _hover={{ color: color('accent'), cursor: 'pointer' }} size="42px" {...props} {...bind}>
25-
<IconComponent bg={isHovered ? themeColor('blue.200') : themeColor('ink.200')} />
24+
<Box
25+
color={color('text-caption')}
26+
_hover={{ color: color('bg'), cursor: 'pointer' }}
27+
size="42px"
28+
{...props}
29+
{...bind}
30+
>
31+
<IconComponent bg={isHovered ? color('accent') : color('bg-light')} />
2632
</Box>
2733
);
2834
};
@@ -60,6 +66,7 @@ const FeedbackCard = ({ show, onClose }) => {
6066
Leave feedback
6167
</Button>
6268
<Box
69+
color={color('text-body')}
6370
_hover={{ color: color('accent'), textDecoration: 'underline', cursor: 'pointer' }}
6471
onClick={onClose}
6572
mt={space('tight')}

‎src/components/header.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
Stack,
77
color,
88
space,
9-
themeColor,
109
transition,
1110
ChevronIcon,
1211
} from '@blockstack/ui';
@@ -24,6 +23,7 @@ import { css } from '@styled-system/css';
2423
import NextLink from 'next/link';
2524
import MagnifyIcon from 'mdi-react/MagnifyIcon';
2625
import { useRouter } from 'next/router';
26+
import { ColorModeButton } from '@components/color-mode-button';
2727

2828
const MenuButton = ({ ...rest }: any) => {
2929
const { isOpen, handleOpen, handleClose } = useMobileMenuState();
@@ -142,7 +142,7 @@ const SubBar: React.FC<any> = props => (
142142
height="60px"
143143
width="100%"
144144
px={['extra-loose', 'extra-loose', 'base', 'base']}
145-
bg="rgba(255,255,255, 0.8)"
145+
bg={color('bg')}
146146
borderBottom={border()}
147147
style={{
148148
backdropFilter: 'blur(5px)',
@@ -152,14 +152,15 @@ const SubBar: React.FC<any> = props => (
152152
<Flex
153153
align="center"
154154
justifyContent="flex-end"
155-
bg={themeColor('ink.150')}
155+
bg={color('bg-alt')}
156156
height="32px"
157157
width="32px"
158158
borderRadius="32px"
159159
transition={transition}
160160
px={space('tight')}
161+
color={color('invert')}
161162
_hover={{
162-
bg: themeColor('ink.200'),
163+
bg: color('bg-light'),
163164
width: ['32px', '32px', '225px', '225px'],
164165
cursor: 'pointer',
165166
justifyContent: 'flex-end',
@@ -180,7 +181,7 @@ const Header = ({ hideSubBar, ...rest }: any) => {
180181
justifyContent="space-between"
181182
align="center"
182183
px={['extra-loose', 'extra-loose', 'base', 'base']}
183-
bg="rgba(255,255,255, 0.8)"
184+
bg={color('bg')}
184185
borderBottom={border()}
185186
style={{
186187
backdropFilter: 'blur(5px)',
@@ -234,6 +235,7 @@ const Header = ({ hideSubBar, ...rest }: any) => {
234235
))}
235236
</Stack>
236237
</Box>
238+
<ColorModeButton />
237239
<GithubButton />
238240
<MenuButton />
239241
</Flex>

‎src/components/highlighter/index.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -149,10 +149,11 @@ const Lines = ({
149149
hideLineHover?: boolean;
150150
highlightedLines?: number[];
151151
} & RenderProps) => {
152+
const displayNumbers = lines?.length > 2 && showLineNumbers;
152153
return (
153154
<Box display="block" className={className}>
154-
<Box display="block" style={{ fontFamily: 'Fira Code' }}>
155-
<Spacer showLineNumbers={showLineNumbers} />
155+
<Box display="block">
156+
<Spacer showLineNumbers={displayNumbers} />
156157
{lines.map((tokens, i) => (
157158
<Box
158159
css={css({
@@ -181,7 +182,7 @@ const Lines = ({
181182
tokens={tokens}
182183
getTokenProps={getTokenProps}
183184
length={lines.length + 1}
184-
showLineNumbers={showLineNumbers}
185+
showLineNumbers={displayNumbers}
185186
highlighted={
186187
highlightedLines?.length &&
187188
!!highlightedLines.find(lineNumber => lineNumber === i + 1)
@@ -191,7 +192,7 @@ const Lines = ({
191192
/>
192193
</Box>
193194
))}
194-
<Spacer showLineNumbers={showLineNumbers} />
195+
<Spacer showLineNumbers={displayNumbers} />
195196
</Box>
196197
</Box>
197198
);

‎src/components/home/card.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Grid, Box, Flex, space, color, transition, FlexProps } from '@blockstack/ui';
33
import NextLink from 'next/link';
4-
import { useActive, useHover } from 'use-events';
4+
import { useTouchable } from 'touchable-hook';
55

66
interface CardProps extends FlexProps {
77
href?: string;
@@ -15,16 +15,15 @@ const LinkComponent = ({ href }: { href: string }) =>
1515
) : null;
1616

1717
export const Card: React.FC<CardProps> = ({ children, onClick, dark = false, href, ...rest }) => {
18-
const [hover, hoverBind] = useHover();
19-
const [active, activeBind] = useActive();
20-
18+
const { bind, hover, active } = useTouchable({
19+
behavior: 'link',
20+
});
2121
return (
2222
<Flex
2323
width="100%"
2424
cursor={(hover || active) && 'pointer'}
2525
position="relative"
26-
{...hoverBind}
27-
{...activeBind}
26+
{...bind}
2827
{...rest}
2928
>
3029
<LinkComponent href={href} />

‎src/components/home/common.tsx

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Grid, Flex, BoxProps, transition, space, themeColor } from '@blockstack/ui';
2+
import { Box, Grid, Flex, BoxProps, transition, space, themeColor, color } from '@blockstack/ui';
33
import { GridProps } from '@blockstack/ui/dist/ui/src/grid/types';
44
import { CONTENT_MAX_WIDTH } from '@common/constants';
55

@@ -11,17 +11,11 @@ export const CircleIcon: React.FC<
1111
align="center"
1212
justify="center"
1313
borderRadius={size}
14-
bg={
15-
dark
16-
? hover
17-
? themeColor('blue.900')
18-
: 'rgb(39, 41, 46)'
19-
: themeColor(hover ? 'blue' : 'blue.100')
20-
}
14+
bg={color(hover ? 'accent' : 'bg-alt')}
2115
transition={transition}
2216
{...rest}
2317
>
24-
<Box size="34px" color={dark ? 'white' : hover ? 'white' : themeColor('blue')}>
18+
<Box size="34px" color={color(hover ? 'bg' : 'invert')}>
2519
<Icon transition={transition} />
2620
</Box>
2721
</Flex>

‎src/components/home/sections/hero.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Hero = ({ cards }: { cards?: any }) => {
3939
<Box as="span">
4040
<CircleIcon
4141
as="span"
42-
hover={hover}
42+
hover={hover || active}
4343
icon={Icon}
4444
mx="auto"
4545
mb={space('base-loose')}

‎src/components/home/text.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
2-
import { Box, BoxProps } from '@blockstack/ui';
2+
import { Box, BoxProps, color } from '@blockstack/ui';
33
import { Text } from '@components/typography';
44
import { css } from '@styled-system/css';
55

66
export const H1: React.FC<BoxProps> = ({ children, ...rest }) => (
77
<Box {...rest}>
88
<Text
99
css={css({
10+
color: color('text-title'),
1011
display: 'block',
1112
fontWeight: 'bolder',
1213
fontSize: ['44px', '44px', '66px'],
@@ -40,6 +41,7 @@ export const H2: React.FC<BoxProps> = ({ children, ...rest }) => (
4041
<Box {...rest}>
4142
<Text
4243
css={css({
44+
color: color('text-title'),
4345
display: 'block',
4446
fontWeight: 'bold',
4547
fontSize: '38.5px',
@@ -68,6 +70,7 @@ export const BodyLarge: React.FC<BoxProps> = ({ children, ...rest }) => (
6870
<Text
6971
as="h2"
7072
css={css({
73+
color: color('text-body'),
7174
display: 'block',
7275
fontSize: '22px',
7376
lineHeight: '32px',

0 commit comments

Comments
 (0)