mirror of https://github.com/lukechilds/docs.git
73 changed files with 1553 additions and 1124 deletions
@ -1,8 +1,4 @@ |
|||||
module.exports = { |
module.exports = { |
||||
presets: ['next/babel'], |
presets: ['next/babel', '@emotion/babel-preset-css-prop'], |
||||
plugins: [ |
plugins: ['./lib/babel-plugin-nextjs-mdx-patch', 'babel-plugin-macros', '@emotion'], |
||||
'./lib/babel-plugin-nextjs-mdx-patch', |
|
||||
'babel-plugin-macros', |
|
||||
['styled-components', { ssr: true }], |
|
||||
], |
|
||||
}; |
}; |
||||
|
@ -1,87 +1,53 @@ |
|||||
import { createGlobalStyle } from 'styled-components'; |
/** @jsx jsx */ |
||||
import { generateCssVariables } from '@blockstack/ui'; |
import * as React from 'react'; |
||||
|
import { jsx, css, Global } from '@emotion/react'; |
||||
export const ColorModes = createGlobalStyle` |
import { theme, generateCssVariables } from '@stacks/ui'; |
||||
:root{ |
|
||||
${generateCssVariables('light')}; |
export const Base = ( |
||||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
<Global |
||||
} |
styles={css` |
||||
|
|
||||
* { |
* { |
||||
-webkit-font-smoothing: antialiased; |
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
-moz-osx-font-smoothing: grayscale; |
||||
} |
} |
||||
|
|
||||
@media (prefers-color-scheme: dark) { |
|
||||
:root { |
:root { |
||||
${generateCssVariables('dark')}; |
${generateCssVariables('light')({ colorMode: 'light', theme })}; |
||||
--colors-highlight-line-bg: rgba(255,255,255,0.04); |
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1); |
||||
} |
|
||||
* { |
|
||||
-webkit-font-smoothing: subpixel-antialiased; |
|
||||
-moz-osx-font-smoothing: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (prefers-color-scheme: light) { |
@media (prefers-color-scheme: dark) { |
||||
:root { |
${generateCssVariables('dark')({ colorMode: 'dark', theme })}; |
||||
${generateCssVariables('light')}; |
--colors-highlight-line-bg: rgba(255, 255, 255, 0.05); |
||||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
|
||||
} |
|
||||
* { |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
} |
||||
} |
} |
||||
|
html, |
||||
html, body, #__next { |
body, |
||||
|
#__next { |
||||
background: var(--colors-bg); |
background: var(--colors-bg); |
||||
border-color: var(--colors-border); |
border-color: var(--colors-border); |
||||
|
|
||||
&.light { |
&.light { |
||||
${generateCssVariables('light')}; |
:root { |
||||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
${generateCssVariables('light')({ colorMode: 'light', theme })}; |
||||
|
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
* { |
* { |
||||
-webkit-font-smoothing: antialiased; |
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
-moz-osx-font-smoothing: grayscale; |
||||
} |
} |
||||
} |
} |
||||
&.dark { |
&.dark { |
||||
${generateCssVariables('dark')}; |
:root { |
||||
--colors-highlight-line-bg: rgba(255,255,255,0.04); |
${generateCssVariables('dark')({ colorMode: 'dark', theme })}; |
||||
|
--colors-highlight-line-bg: rgba(255, 255, 255, 0.04); |
||||
|
} |
||||
* { |
* { |
||||
-webkit-font-smoothing: subpixel-antialiased; |
-webkit-font-smoothing: subpixel-antialiased; |
||||
-moz-osx-font-smoothing: auto; |
-moz-osx-font-smoothing: auto; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
`}
|
||||
|
/> |
||||
|
); |
||||
|
|
||||
input:-webkit-autofill, |
export const ColorModes = Base; |
||||
input:-webkit-autofill:hover, |
|
||||
input:-webkit-autofill:focus, |
|
||||
textarea:-webkit-autofill, |
|
||||
textarea:-webkit-autofill:hover, |
|
||||
textarea:-webkit-autofill:focus, |
|
||||
select:-webkit-autofill, |
|
||||
select:-webkit-autofill:hover, |
|
||||
select:-webkit-autofill:focus { |
|
||||
-webkit-text-fill-color: var(--colors-text-body); |
|
||||
font-size: 16px !important; |
|
||||
transition: background-color 5000s ease-in-out 0s; |
|
||||
} |
|
||||
|
|
||||
input:-ms-input-placeholder, |
|
||||
textarea:-ms-input-placeholder { |
|
||||
color: var(--colors-input-placeholder) !important; |
|
||||
} |
|
||||
|
|
||||
input::-ms-input-placeholder, |
|
||||
textarea::-ms-input-placeholder { |
|
||||
color: var(--colors-input-placeholder) !important; |
|
||||
} |
|
||||
|
|
||||
input::placeholder, |
|
||||
textarea::placeholder { |
|
||||
color: var(--colors-input-placeholder) !important; |
|
||||
} |
|
||||
`;
|
|
||||
|
@ -1,14 +1,19 @@ |
|||||
import React from 'react'; |
import React from 'react'; |
||||
import { Flex, FlexProps, space } from '@blockstack/ui'; |
import { Flex, FlexProps, space } from '@stacks/ui'; |
||||
|
import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; |
||||
|
|
||||
const ContentWrapper: React.FC<FlexProps> = props => ( |
const ContentWrapper: ForwardRefExoticComponentWithAs<FlexProps, 'div'> = forwardRefWithAs< |
||||
|
FlexProps, |
||||
|
'div' |
||||
|
>((props, ref) => ( |
||||
<Flex |
<Flex |
||||
flexShrink={0} |
flexShrink={0} |
||||
pt={space(['base', 'base', 'extra-loose'])} |
pt={space(['base', 'base', 'extra-loose'])} |
||||
pb={[4, 4, 6]} |
pb={[4, 4, 6]} |
||||
flexDirection="column" |
flexDirection="column" |
||||
|
ref={ref} |
||||
{...props} |
{...props} |
||||
/> |
/> |
||||
); |
)); |
||||
|
|
||||
export { ContentWrapper }; |
export { ContentWrapper }; |
||||
|
@ -1,65 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { Box, Grid, space, color } from '@blockstack/ui'; |
|
||||
import { CircleIcon } from '@components/home/common'; |
|
||||
import { CONTENT_MAX_WIDTH } from '@common/constants'; |
|
||||
import { Card } from '@components/home/card'; |
|
||||
import { Body, H1, BodyLarge, SubHeading } from '@components/home/text'; |
|
||||
import { HEADER_HEIGHT } from '@components/header'; |
|
||||
|
|
||||
export const Hero = ({ cards }: { cards?: any }) => { |
|
||||
return ( |
|
||||
<> |
|
||||
<Grid pb="64px" pt="64px" style={{ placeItems: 'center' }}> |
|
||||
<Box maxWidth="62ch" textAlign="center"> |
|
||||
<H1 mb={space('base')}>Easily build decentralized apps</H1> |
|
||||
<BodyLarge maxWidth="42ch" mt="64px" mx="auto"> |
|
||||
Blockstack is a developer-friendly toolkit for building decentralized apps, anchored in |
|
||||
the Bitcoin blockchain. |
|
||||
</BodyLarge> |
|
||||
</Box> |
|
||||
</Grid> |
|
||||
<Grid |
|
||||
maxWidth={`${CONTENT_MAX_WIDTH}px`} |
|
||||
width="100%" |
|
||||
gridGap={space('extra-loose')} |
|
||||
minHeight="200px" |
|
||||
gridTemplateColumns={[ |
|
||||
'repeat(1, 1fr)', |
|
||||
'repeat(1, 1fr)', |
|
||||
'repeat(2, 1fr)', |
|
||||
'repeat(3, 1fr)', |
|
||||
]} |
|
||||
mx="auto" |
|
||||
mt={space('extra-loose')} |
|
||||
px={space('extra-loose')} |
|
||||
> |
|
||||
{cards.map(({ href, title, subtitle, icon: Icon }, index) => ( |
|
||||
<Card href={href} textAlign="center" key={index}> |
|
||||
{({ hover, active }) => ( |
|
||||
<Box as="span"> |
|
||||
<CircleIcon |
|
||||
as="span" |
|
||||
hover={hover || active} |
|
||||
icon={Icon} |
|
||||
mx="auto" |
|
||||
mb={space('base-loose')} |
|
||||
/> |
|
||||
<SubHeading |
|
||||
as="span" |
|
||||
display="block" |
|
||||
color={hover || active ? color('accent') : color('text-title')} |
|
||||
mb={space('base-loose')} |
|
||||
> |
|
||||
{title} |
|
||||
</SubHeading> |
|
||||
<Body as="p" maxWidth="26ch" mx="auto"> |
|
||||
{subtitle} |
|
||||
</Body> |
|
||||
</Box> |
|
||||
)} |
|
||||
</Card> |
|
||||
))} |
|
||||
</Grid> |
|
||||
</> |
|
||||
); |
|
||||
}; |
|
@ -1,5 +1,5 @@ |
|||||
import React from 'react'; |
import React from 'react'; |
||||
import { Box, BoxProps, Grid, space } from '@blockstack/ui'; |
import { Box, BoxProps, Grid, space } from '@stacks/ui'; |
||||
import { transition } from '@common/utils'; |
import { transition } from '@common/utils'; |
||||
import { Img } from '@components/mdx/image'; |
import { Img } from '@components/mdx/image'; |
||||
|
|
@ -1,21 +1,44 @@ |
|||||
import { Box, BoxProps, color, space } from '@blockstack/ui'; |
import { Box, BoxProps, color, space } from '@stacks/ui'; |
||||
import React from 'react'; |
import React from 'react'; |
||||
import { Text } from '@components/typography'; |
import { Text } from '@components/typography'; |
||||
import { BaseHeading } from '@components/mdx/components/heading'; |
import { BaseHeading } from '@components/mdx/components/heading'; |
||||
|
import { forwardRefWithAs, ForwardRefExoticComponentWithAs } from '@stacks/ui-core'; |
||||
|
|
||||
export const H1: React.FC<BoxProps> = props => <BaseHeading as="h1" {...props} />; |
export const H1: ForwardRefExoticComponentWithAs<BoxProps, 'h1'> = forwardRefWithAs<BoxProps, 'h1'>( |
||||
export const H2: React.FC<BoxProps> = props => <BaseHeading as="h2" {...props} />; |
(props, ref) => <BaseHeading as="h1" ref={ref} {...props} /> |
||||
export const H3: React.FC<BoxProps> = props => <BaseHeading as="h3" {...props} />; |
); |
||||
export const H4: React.FC<BoxProps> = props => <BaseHeading as="h4" {...props} />; |
export const H2: ForwardRefExoticComponentWithAs<BoxProps, 'h2'> = forwardRefWithAs<BoxProps, 'h2'>( |
||||
export const H5: React.FC<BoxProps> = props => <BaseHeading as="h5" {...props} />; |
(props, ref) => <BaseHeading as="h2" ref={ref} {...props} /> |
||||
export const H6: React.FC<BoxProps> = props => <BaseHeading as="h6" {...props} />; |
); |
||||
|
export const H3: ForwardRefExoticComponentWithAs<BoxProps, 'h3'> = forwardRefWithAs<BoxProps, 'h3'>( |
||||
|
(props, ref) => <BaseHeading as="h3" ref={ref} {...props} /> |
||||
|
); |
||||
|
export const H4: ForwardRefExoticComponentWithAs<BoxProps, 'h4'> = forwardRefWithAs<BoxProps, 'h4'>( |
||||
|
(props, ref) => <BaseHeading as="h4" ref={ref} {...props} /> |
||||
|
); |
||||
|
export const H5: ForwardRefExoticComponentWithAs<BoxProps, 'h5'> = forwardRefWithAs<BoxProps, 'h5'>( |
||||
|
(props, ref) => <BaseHeading as="h5" ref={ref} {...props} /> |
||||
|
); |
||||
|
export const H6: ForwardRefExoticComponentWithAs<BoxProps, 'h6'> = forwardRefWithAs<BoxProps, 'h6'>( |
||||
|
(props, ref) => <BaseHeading as="h6" ref={ref} {...props} /> |
||||
|
); |
||||
|
|
||||
export const Br: React.FC<BoxProps> = props => <Box height="24px" {...props} />; |
export const Br: ForwardRefExoticComponentWithAs<BoxProps, 'br'> = forwardRefWithAs<BoxProps, 'br'>( |
||||
export const Hr: React.FC<BoxProps> = props => ( |
props => <Box height="24px" {...props} /> |
||||
<Box as="hr" borderTopWidth="1px" borderColor={color('border')} my={'64px'} {...props} /> |
); |
||||
|
export const Hr: ForwardRefExoticComponentWithAs<BoxProps, 'hr'> = forwardRefWithAs<BoxProps, 'hr'>( |
||||
|
props => <Box as="hr" borderTopWidth="1px" borderColor={color('border')} my={'64px'} {...props} /> |
||||
); |
); |
||||
|
|
||||
export const P: React.FC<BoxProps> = props => <Text as="p" {...props} />; |
export const P: ForwardRefExoticComponentWithAs<BoxProps, 'p'> = forwardRefWithAs<BoxProps, 'p'>( |
||||
|
(props, ref) => <Text as="p" ref={ref} {...props} /> |
||||
|
); |
||||
|
|
||||
export const Pre = (props: any) => <Text as="pre" {...props} />; |
export const Pre: ForwardRefExoticComponentWithAs<BoxProps, 'pre'> = forwardRefWithAs< |
||||
export const Sup: React.FC<any> = props => <Text as="sup" mr={space('extra-tight')} {...props} />; |
BoxProps, |
||||
|
'pre' |
||||
|
>((props, ref) => <Text as="pre" ref={ref} {...props} />); |
||||
|
export const Sup: ForwardRefExoticComponentWithAs<BoxProps, 'sup'> = forwardRefWithAs< |
||||
|
BoxProps, |
||||
|
'sup' |
||||
|
>((props, ref) => <Text as="sup" ref={ref} mr={space('extra-tight')} {...props} />); |
||||
|
@ -1,103 +1,125 @@ |
|||||
import React from 'react'; |
import React from 'react'; |
||||
import { color } from '@blockstack/ui'; |
import { color } from '@stacks/ui'; |
||||
import { createGlobalStyle } from 'styled-components'; |
import { css, Global } from '@emotion/react'; |
||||
|
|
||||
const GlobalStyles = createGlobalStyle` |
const GlobalStyles = ( |
||||
:root { |
<Global |
||||
|
styles={css` |
||||
|
blockquote, |
||||
|
dl, |
||||
|
dd, |
||||
|
h1, |
||||
|
h2, |
||||
|
h3, |
||||
|
h4, |
||||
|
h5, |
||||
|
h6, |
||||
|
hr, |
||||
|
figure, |
||||
|
p, |
||||
|
pre { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
:root { |
||||
--reach-tooltip: 1; |
--reach-tooltip: 1; |
||||
} |
} |
||||
|
a { |
||||
* { |
text-decoration: none; |
||||
font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1; |
} |
||||
} |
* { |
||||
html, body { |
font-feature-settings: 'onum' 1, 'pnum' 1, 'kern' 1, 'ss01' 1; |
||||
|
} |
||||
|
html, |
||||
|
body { |
||||
font-family: 'Soehne', Inter, sans-serif; |
font-family: 'Soehne', Inter, sans-serif; |
||||
} |
} |
||||
@counter-style list { |
@counter-style list { |
||||
pad: "0"; |
pad: '0'; |
||||
} |
} |
||||
img{ |
img { |
||||
image-rendering: crisp-edges; |
image-rendering: crisp-edges; |
||||
will-change: transform; |
will-change: transform; |
||||
} |
} |
||||
:root{ |
:root { |
||||
--docsearch-modal-background: ${color('bg')}; |
--docsearch-modal-background: ${color('bg')}; |
||||
--docsearch-text-color: ${color('text-title')}; |
--docsearch-text-color: ${color('text-title')}; |
||||
--docsearch-icon-color: ${color('text-caption')}; |
--docsearch-icon-color: ${color('text-caption')}; |
||||
--docsearch-primary-color: ${color('accent')}; |
--docsearch-primary-color: ${color('accent')}; |
||||
--docsearch-input-color: ${color('text-title')}; |
--docsearch-input-color: ${color('text-title')}; |
||||
--docsearch-highlight-color: ${color('bg-alt')}; |
--docsearch-highlight-color: ${color('bg-alt')}; |
||||
--docsearch-placeholder-color: ${color('text-caption')}; |
--docsearch-placeholder-color: ${color('text-caption')}; |
||||
--docsearch-container-background: rgba(22,22,22,0.75); |
--docsearch-container-background: rgba(22, 22, 22, 0.75); |
||||
--docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')}; |
--docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
||||
--docsearch-searchbox-focus-background: ${color('bg')};; |
--docsearch-searchbox-focus-background: ${color('bg')}; |
||||
--docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')}; |
--docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
||||
--docsearch-hit-active-color: ${color('text-title')}; |
--docsearch-hit-active-color: ${color('text-title')}; |
||||
--docsearch-hit-background: ${color('bg')}; |
--docsearch-hit-background: ${color('bg')}; |
||||
--docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')}; |
--docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
--docsearch-key-gradient: transparent; |
--docsearch-key-gradient: transparent; |
||||
--docsearch-key-shadow: inset 0px -2px 0px 0px transparent,inset 0px 0px 1px 1px transparent,0px 1px 2px 1px transparent; |
--docsearch-key-shadow: inset 0px -2px 0px 0px transparent, |
||||
--docsearch-footer-background: ${color('bg')}; |
inset 0px 0px 1px 1px transparent, 0px 1px 2px 1px transparent; |
||||
--docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')}; |
--docsearch-footer-background: ${color('bg')}; |
||||
--docsearch-logo-color: #5468ff; |
--docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')}; |
||||
--docsearch-muted-color: #969faf; |
--docsearch-logo-color: #5468ff; |
||||
--docsearch-modal-width: 560px; |
--docsearch-muted-color: #969faf; |
||||
--docsearch-modal-height: 600px; |
--docsearch-modal-width: 560px; |
||||
--docsearch-searchbox-height: 56px; |
--docsearch-modal-height: 600px; |
||||
--docsearch-hit-height: 56px; |
--docsearch-searchbox-height: 56px; |
||||
--docsearch-footer-height: 44px; |
--docsearch-hit-height: 56px; |
||||
--docsearch-spacing: 12px; |
--docsearch-footer-height: 44px; |
||||
--docsearch-icon-stroke-width: 1.4; |
--docsearch-spacing: 12px; |
||||
} |
--docsearch-icon-stroke-width: 1.4; |
||||
.DocSearch-Container{ |
} |
||||
|
.DocSearch-Container { |
||||
z-index: 99999; |
z-index: 99999; |
||||
} |
} |
||||
.DocSearch-SearchBar{ |
.DocSearch-SearchBar { |
||||
padding: var(--docsearch-spacing); |
padding: var(--docsearch-spacing); |
||||
} |
} |
||||
.DocSearch-Reset:hover{ |
.DocSearch-Reset:hover { |
||||
color: ${color('accent')}; |
color: ${color('accent')}; |
||||
} |
} |
||||
.DocSearch-Form{ |
.DocSearch-Form { |
||||
input{ |
input { |
||||
color: ${color('text-title')}; |
color: ${color('text-title')}; |
||||
} |
} |
||||
&:focus-within{ |
&:focus-within { |
||||
box-shadow: 0 0 0 3px rgba(170, 179, 255, 0.75); |
box-shadow: 0 0 0 3px rgba(170, 179, 255, 0.75); |
||||
} |
} |
||||
} |
} |
||||
.DocSearch-Help{ |
.DocSearch-Help { |
||||
text-align: center; |
text-align: center; |
||||
} |
} |
||||
.DocSearch-Prefill{ |
.DocSearch-Prefill { |
||||
color: ${color('accent')} !important; |
color: ${color('accent')} !important; |
||||
} |
} |
||||
.DocSearch-Hit{ |
.DocSearch-Hit { |
||||
mark{ |
mark { |
||||
color: ${color('accent')} !important; |
color: ${color('accent')} !important; |
||||
} |
} |
||||
} |
} |
||||
.DocSearch-Hit-source{ |
.DocSearch-Hit-source { |
||||
color: ${color('text-caption')}; |
color: ${color('text-caption')}; |
||||
} |
} |
||||
.DocSearch-MagnifierLabel{ |
.DocSearch-MagnifierLabel { |
||||
color: ${color('accent')}; |
color: ${color('accent')}; |
||||
} |
} |
||||
|
|
||||
pre{ |
pre { |
||||
display: inline-block; |
display: inline-block; |
||||
} |
} |
||||
p, ul, ol, table { |
p, |
||||
|
ul, |
||||
|
ol, |
||||
|
table { |
||||
color: ${color('text-body')}; |
color: ${color('text-body')}; |
||||
a > pre { |
a > pre { |
||||
color: ${color('accent')} !important; |
color: ${color('accent')} !important; |
||||
} |
} |
||||
} |
} |
||||
`;
|
`}
|
||||
export const MdxOverrides: React.FC<any> = props => ( |
/> |
||||
<> |
|
||||
<GlobalStyles /> |
|
||||
</> |
|
||||
); |
); |
||||
|
export const MdxOverrides = GlobalStyles; |
||||
|
@ -1,18 +1,21 @@ |
|||||
import React from 'react'; |
import { AppProps } from 'next/app'; |
||||
import type { AppProps } from 'next/app'; |
import * as React from 'react'; |
||||
|
import 'modern-normalize/modern-normalize.css'; |
||||
import { CSSReset, ThemeProvider } from '@blockstack/ui'; |
|
||||
import { AppWrapper } from '@components/app-wrapper'; |
import { AppWrapper } from '@components/app-wrapper'; |
||||
|
import { theme } from '@stacks/ui'; |
||||
|
import { CacheProvider, ThemeProvider } from '@emotion/react'; |
||||
|
import { cache } from '@emotion/css'; |
||||
|
|
||||
import '@docsearch/css'; |
import '@docsearch/css'; |
||||
|
|
||||
const MyApp: React.FC<AppProps> = ({ Component, pageProps, ...rest }) => ( |
const MyApp: React.FC<AppProps> = ({ Component, pageProps, ...rest }) => ( |
||||
<ThemeProvider> |
<CacheProvider value={cache}> |
||||
<CSSReset /> |
<ThemeProvider theme={theme}> |
||||
<AppWrapper {...rest}> |
<AppWrapper {...rest}> |
||||
<Component {...pageProps} /> |
<Component {...pageProps} /> |
||||
</AppWrapper> |
</AppWrapper> |
||||
</ThemeProvider> |
</ThemeProvider> |
||||
|
</CacheProvider> |
||||
); |
); |
||||
|
|
||||
export default MyApp; |
export default MyApp; |
||||
|
File diff suppressed because it is too large
Loading…
Reference in new issue