mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
73 changed files with 1553 additions and 1124 deletions
@ -1,8 +1,4 @@ |
|||
module.exports = { |
|||
presets: ['next/babel'], |
|||
plugins: [ |
|||
'./lib/babel-plugin-nextjs-mdx-patch', |
|||
'babel-plugin-macros', |
|||
['styled-components', { ssr: true }], |
|||
], |
|||
presets: ['next/babel', '@emotion/babel-preset-css-prop'], |
|||
plugins: ['./lib/babel-plugin-nextjs-mdx-patch', 'babel-plugin-macros', '@emotion'], |
|||
}; |
|||
|
|||
@ -1,87 +1,53 @@ |
|||
import { createGlobalStyle } from 'styled-components'; |
|||
import { generateCssVariables } from '@blockstack/ui'; |
|||
|
|||
export const ColorModes = createGlobalStyle` |
|||
:root{ |
|||
${generateCssVariables('light')}; |
|||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
|||
} |
|||
|
|||
/** @jsx jsx */ |
|||
import * as React from 'react'; |
|||
import { jsx, css, Global } from '@emotion/react'; |
|||
import { theme, generateCssVariables } from '@stacks/ui'; |
|||
|
|||
export const Base = ( |
|||
<Global |
|||
styles={css` |
|||
* { |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: dark) { |
|||
:root { |
|||
${generateCssVariables('dark')}; |
|||
--colors-highlight-line-bg: rgba(255,255,255,0.04); |
|||
} |
|||
* { |
|||
-webkit-font-smoothing: subpixel-antialiased; |
|||
-moz-osx-font-smoothing: auto; |
|||
} |
|||
} |
|||
${generateCssVariables('light')({ colorMode: 'light', theme })}; |
|||
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1); |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
${generateCssVariables('light')}; |
|||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
|||
} |
|||
* { |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
@media (prefers-color-scheme: dark) { |
|||
${generateCssVariables('dark')({ colorMode: 'dark', theme })}; |
|||
--colors-highlight-line-bg: rgba(255, 255, 255, 0.05); |
|||
} |
|||
} |
|||
|
|||
html, body, #__next { |
|||
html, |
|||
body, |
|||
#__next { |
|||
background: var(--colors-bg); |
|||
border-color: var(--colors-border); |
|||
|
|||
&.light { |
|||
${generateCssVariables('light')}; |
|||
--colors-highlight-line-bg: rgba(255,255,255,0.08); |
|||
:root { |
|||
${generateCssVariables('light')({ colorMode: 'light', theme })}; |
|||
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1); |
|||
} |
|||
* { |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
} |
|||
&.dark { |
|||
${generateCssVariables('dark')}; |
|||
--colors-highlight-line-bg: rgba(255,255,255,0.04); |
|||
:root { |
|||
${generateCssVariables('dark')({ colorMode: 'dark', theme })}; |
|||
--colors-highlight-line-bg: rgba(255, 255, 255, 0.04); |
|||
} |
|||
* { |
|||
-webkit-font-smoothing: subpixel-antialiased; |
|||
-moz-osx-font-smoothing: auto; |
|||
} |
|||
} |
|||
} |
|||
`}
|
|||
/> |
|||
); |
|||
|
|||
input:-webkit-autofill, |
|||
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; |
|||
} |
|||
`;
|
|||
export const ColorModes = Base; |
|||
|
|||
@ -1,14 +1,19 @@ |
|||
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 |
|||
flexShrink={0} |
|||
pt={space(['base', 'base', 'extra-loose'])} |
|||
pb={[4, 4, 6]} |
|||
flexDirection="column" |
|||
ref={ref} |
|||
{...props} |
|||
/> |
|||
); |
|||
)); |
|||
|
|||
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 { Box, BoxProps, Grid, space } from '@blockstack/ui'; |
|||
import { Box, BoxProps, Grid, space } from '@stacks/ui'; |
|||
import { transition } from '@common/utils'; |
|||
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 { Text } from '@components/typography'; |
|||
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 H2: React.FC<BoxProps> = props => <BaseHeading as="h2" {...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 H5: React.FC<BoxProps> = props => <BaseHeading as="h5" {...props} />; |
|||
export const H6: React.FC<BoxProps> = props => <BaseHeading as="h6" {...props} />; |
|||
export const H1: ForwardRefExoticComponentWithAs<BoxProps, 'h1'> = forwardRefWithAs<BoxProps, 'h1'>( |
|||
(props, ref) => <BaseHeading as="h1" ref={ref} {...props} /> |
|||
); |
|||
export const H2: ForwardRefExoticComponentWithAs<BoxProps, 'h2'> = forwardRefWithAs<BoxProps, 'h2'>( |
|||
(props, ref) => <BaseHeading as="h2" ref={ref} {...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 Hr: React.FC<BoxProps> = props => ( |
|||
<Box as="hr" borderTopWidth="1px" borderColor={color('border')} my={'64px'} {...props} /> |
|||
export const Br: ForwardRefExoticComponentWithAs<BoxProps, 'br'> = forwardRefWithAs<BoxProps, 'br'>( |
|||
props => <Box height="24px" {...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 Sup: React.FC<any> = props => <Text as="sup" mr={space('extra-tight')} {...props} />; |
|||
export const Pre: ForwardRefExoticComponentWithAs<BoxProps, 'pre'> = forwardRefWithAs< |
|||
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 { color } from '@blockstack/ui'; |
|||
import { createGlobalStyle } from 'styled-components'; |
|||
import { color } from '@stacks/ui'; |
|||
import { css, Global } from '@emotion/react'; |
|||
|
|||
const GlobalStyles = createGlobalStyle` |
|||
:root { |
|||
const GlobalStyles = ( |
|||
<Global |
|||
styles={css` |
|||
blockquote, |
|||
dl, |
|||
dd, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
hr, |
|||
figure, |
|||
p, |
|||
pre { |
|||
margin: 0px; |
|||
} |
|||
:root { |
|||
--reach-tooltip: 1; |
|||
} |
|||
|
|||
* { |
|||
font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1; |
|||
} |
|||
html, body { |
|||
} |
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
* { |
|||
font-feature-settings: 'onum' 1, 'pnum' 1, 'kern' 1, 'ss01' 1; |
|||
} |
|||
html, |
|||
body { |
|||
font-family: 'Soehne', Inter, sans-serif; |
|||
} |
|||
@counter-style list { |
|||
pad: "0"; |
|||
} |
|||
img{ |
|||
} |
|||
@counter-style list { |
|||
pad: '0'; |
|||
} |
|||
img { |
|||
image-rendering: crisp-edges; |
|||
will-change: transform; |
|||
} |
|||
:root{ |
|||
--docsearch-modal-background: ${color('bg')}; |
|||
--docsearch-text-color: ${color('text-title')}; |
|||
--docsearch-icon-color: ${color('text-caption')}; |
|||
--docsearch-primary-color: ${color('accent')}; |
|||
--docsearch-input-color: ${color('text-title')}; |
|||
--docsearch-highlight-color: ${color('bg-alt')}; |
|||
--docsearch-placeholder-color: ${color('text-caption')}; |
|||
--docsearch-container-background: rgba(22,22,22,0.75); |
|||
--docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
|||
--docsearch-searchbox-focus-background: ${color('bg')};; |
|||
--docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
|||
--docsearch-hit-active-color: ${color('text-title')}; |
|||
--docsearch-hit-background: ${color('bg')}; |
|||
--docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--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-footer-background: ${color('bg')}; |
|||
--docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--docsearch-logo-color: #5468ff; |
|||
--docsearch-muted-color: #969faf; |
|||
--docsearch-modal-width: 560px; |
|||
--docsearch-modal-height: 600px; |
|||
--docsearch-searchbox-height: 56px; |
|||
--docsearch-hit-height: 56px; |
|||
--docsearch-footer-height: 44px; |
|||
--docsearch-spacing: 12px; |
|||
--docsearch-icon-stroke-width: 1.4; |
|||
} |
|||
.DocSearch-Container{ |
|||
} |
|||
:root { |
|||
--docsearch-modal-background: ${color('bg')}; |
|||
--docsearch-text-color: ${color('text-title')}; |
|||
--docsearch-icon-color: ${color('text-caption')}; |
|||
--docsearch-primary-color: ${color('accent')}; |
|||
--docsearch-input-color: ${color('text-title')}; |
|||
--docsearch-highlight-color: ${color('bg-alt')}; |
|||
--docsearch-placeholder-color: ${color('text-caption')}; |
|||
--docsearch-container-background: rgba(22, 22, 22, 0.75); |
|||
--docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
|||
--docsearch-searchbox-focus-background: ${color('bg')}; |
|||
--docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
|||
--docsearch-hit-active-color: ${color('text-title')}; |
|||
--docsearch-hit-background: ${color('bg')}; |
|||
--docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--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-footer-background: ${color('bg')}; |
|||
--docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')}; |
|||
--docsearch-logo-color: #5468ff; |
|||
--docsearch-muted-color: #969faf; |
|||
--docsearch-modal-width: 560px; |
|||
--docsearch-modal-height: 600px; |
|||
--docsearch-searchbox-height: 56px; |
|||
--docsearch-hit-height: 56px; |
|||
--docsearch-footer-height: 44px; |
|||
--docsearch-spacing: 12px; |
|||
--docsearch-icon-stroke-width: 1.4; |
|||
} |
|||
.DocSearch-Container { |
|||
z-index: 99999; |
|||
} |
|||
.DocSearch-SearchBar{ |
|||
} |
|||
.DocSearch-SearchBar { |
|||
padding: var(--docsearch-spacing); |
|||
} |
|||
.DocSearch-Reset:hover{ |
|||
} |
|||
.DocSearch-Reset:hover { |
|||
color: ${color('accent')}; |
|||
} |
|||
.DocSearch-Form{ |
|||
input{ |
|||
} |
|||
.DocSearch-Form { |
|||
input { |
|||
color: ${color('text-title')}; |
|||
} |
|||
&:focus-within{ |
|||
&:focus-within { |
|||
box-shadow: 0 0 0 3px rgba(170, 179, 255, 0.75); |
|||
} |
|||
} |
|||
.DocSearch-Help{ |
|||
} |
|||
.DocSearch-Help { |
|||
text-align: center; |
|||
} |
|||
.DocSearch-Prefill{ |
|||
} |
|||
.DocSearch-Prefill { |
|||
color: ${color('accent')} !important; |
|||
} |
|||
.DocSearch-Hit{ |
|||
mark{ |
|||
} |
|||
.DocSearch-Hit { |
|||
mark { |
|||
color: ${color('accent')} !important; |
|||
} |
|||
} |
|||
.DocSearch-Hit-source{ |
|||
} |
|||
.DocSearch-Hit-source { |
|||
color: ${color('text-caption')}; |
|||
} |
|||
.DocSearch-MagnifierLabel{ |
|||
} |
|||
.DocSearch-MagnifierLabel { |
|||
color: ${color('accent')}; |
|||
} |
|||
} |
|||
|
|||
pre{ |
|||
pre { |
|||
display: inline-block; |
|||
} |
|||
p, ul, ol, table { |
|||
} |
|||
p, |
|||
ul, |
|||
ol, |
|||
table { |
|||
color: ${color('text-body')}; |
|||
a > pre { |
|||
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 type { AppProps } from 'next/app'; |
|||
|
|||
import { CSSReset, ThemeProvider } from '@blockstack/ui'; |
|||
import { AppProps } from 'next/app'; |
|||
import * as React from 'react'; |
|||
import 'modern-normalize/modern-normalize.css'; |
|||
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'; |
|||
|
|||
const MyApp: React.FC<AppProps> = ({ Component, pageProps, ...rest }) => ( |
|||
<ThemeProvider> |
|||
<CSSReset /> |
|||
<CacheProvider value={cache}> |
|||
<ThemeProvider theme={theme}> |
|||
<AppWrapper {...rest}> |
|||
<Component {...pageProps} /> |
|||
</AppWrapper> |
|||
</ThemeProvider> |
|||
</CacheProvider> |
|||
); |
|||
|
|||
export default MyApp; |
|||
|
|||
File diff suppressed because it is too large
Loading…
Reference in new issue