mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
5 years ago
85 changed files with 3650 additions and 2643 deletions
@ -1,4 +1,4 @@ |
|||
module.exports = { |
|||
presets: ['next/babel'], |
|||
plugins: [['styled-components', { ssr: true }]], |
|||
plugins: ['babel-plugin-macros', ['styled-components', { ssr: true }]], |
|||
}; |
|||
|
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,112 +0,0 @@ |
|||
The command line is intended for developers only. Developers can use the command |
|||
line to test and debug Blockstack applications in ways that the Blockstack |
|||
Browser does not yet support. Using the command line, developers can: |
|||
|
|||
- Generate and Broadcast all supported types of Blockstack transactions |
|||
- Load, store, and list data in Gaia hubs |
|||
- Generate owner, payment and application keys from a seed phrase |
|||
- Query Stacks Nodes |
|||
- Implement a minimum viable authentication flow |
|||
|
|||
{% include warning.html content="Many of the commands operate on unencrypted |
|||
private keys. For this reason, DO NOT use this tool for day-to-day tasks as you |
|||
risk the security of your keys." %} |
|||
|
|||
You must <a href="#installCommandLine">install the command line</a> before you |
|||
can use the commands. |
|||
|
|||
## List of commands |
|||
|
|||
{:.no_toc} |
|||
|
|||
To see the usage and options for the command in general, enter `blockstack-cli` without any subcommands. To see a list of subcommands enter `blockstack-cli help`. Enter `blockstack-cli SUBCOMMAND_NAME help` to see a subcommand with its usage. The following are the available subcommands: |
|||
|
|||
- TOC |
|||
{:toc} |
|||
|
|||
{% for entry in site.data.cliRef %} |
|||
|
|||
## {{ entry.command }} |
|||
|
|||
**Group**: {{ entry.group }} |
|||
|
|||
{{ entry.usage }} |
|||
|
|||
### Arguments |
|||
|
|||
{:.no_toc} |
|||
|
|||
<table class="uk-table uk-table-small uk-table-striped"> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Type</th> |
|||
<th>Value</th> |
|||
<th>Format</th> |
|||
</tr> |
|||
{% for arg in entry.args %} |
|||
<tr> |
|||
<td class="uk-text-bold">{{ arg.name }}</td> |
|||
<td>{{ arg.type }}</td> |
|||
<td>{{ arg.value }}</td> |
|||
<td><code style="font-size:10px">{{ arg.format }}</code></td> |
|||
</tr> |
|||
|
|||
{% endfor %} |
|||
|
|||
</table> |
|||
|
|||
{% endfor %} |
|||
|
|||
<p><a name="installCommandLine"> </a></p> |
|||
|
|||
## How to install the command line |
|||
|
|||
{:.no_toc} |
|||
|
|||
You must have [Node.js](https://nodejs.org/en/download/) v8 or higher (v10 recommended). macOS and Linux users can avoid `sudo` or [permissions problems](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) or by using [`nvm`](https://github.com/nvm-sh/nvm). These instructions assume you are using a macOS or Linux system. |
|||
|
|||
To install the command line, do the following: |
|||
|
|||
1. <a href="https://github.com/blockstack/cli-blockstack" target="\_blank">Download or `git clone` the command line repository code</a>. |
|||
|
|||
Downloading or cloning the repo creates a `cli-blockstack` repository on your system. |
|||
|
|||
2. Change directory into the `cli-blockstack` directory. |
|||
|
|||
``` |
|||
cd cli-blockstack |
|||
``` |
|||
|
|||
``` |
|||
|
|||
|
|||
3. Install the dependencies with `npm`. |
|||
|
|||
``` |
|||
|
|||
npm install |
|||
|
|||
``` |
|||
|
|||
4. Build the command line command. |
|||
|
|||
``` |
|||
|
|||
npm run build |
|||
|
|||
``` |
|||
|
|||
5. Link the command. |
|||
|
|||
``` |
|||
|
|||
sudo npm link |
|||
|
|||
``` |
|||
|
|||
### Troubleshooting the CLI installation |
|||
|
|||
If you run into `EACCES` permissions errors, try the following: |
|||
* See https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally. |
|||
* Use [`Node Version Manager`](https://github.com/nvm-sh/nvm). |
|||
``` |
|||
@ -1,3 +1,3 @@ |
|||
export const SIDEBAR_WIDTH = 280; |
|||
export const TOC_WIDTH = 200; |
|||
export const TOC_WIDTH = 280; |
|||
export const CONTENT_MAX_WIDTH = 1104; |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
import preval from 'preval.macro'; |
|||
|
|||
const routes = preval`module.exports = require('./get-routes')`; |
|||
|
|||
export default routes; |
|||
@ -0,0 +1,52 @@ |
|||
import React from 'react'; |
|||
import clarityRefData from '@common/_data/clarityRef.json'; |
|||
import MDX from '@mdx-js/runtime'; |
|||
import { MDXComponents } from '@components/mdx/mdx-components'; |
|||
import { slugify } from '@common/utils'; |
|||
|
|||
export const ClarityKeywordReference = () => |
|||
clarityRefData.keywords.map((entry, key) => { |
|||
return ( |
|||
<React.Fragment key={key}> |
|||
<MDXComponents.h3 id={slugify(entry.name)}>{entry.name}</MDXComponents.h3> |
|||
<MDXComponents.p> |
|||
<MDXComponents.inlineCode>{entry.output_type}</MDXComponents.inlineCode> |
|||
</MDXComponents.p> |
|||
<MDXComponents.p> |
|||
<MDX components={MDXComponents}>{entry.description}</MDX> |
|||
</MDXComponents.p> |
|||
<MDXComponents.h4 id={slugify(entry.name) + '-example'}>Example</MDXComponents.h4> |
|||
<MDXComponents.pre> |
|||
{/* @ts-ignore*/} |
|||
<MDXComponents.code children={entry.example.toString()} /> |
|||
</MDXComponents.pre> |
|||
</React.Fragment> |
|||
); |
|||
}); |
|||
export const ClarityFunctionReference = () => |
|||
clarityRefData.functions.map((entry, key) => { |
|||
return ( |
|||
<React.Fragment key={key}> |
|||
<MDXComponents.h3 id={slugify(entry.name)}>{entry.name}</MDXComponents.h3> |
|||
<MDXComponents.p> |
|||
<MDXComponents.inlineCode>{entry.signature}</MDXComponents.inlineCode> |
|||
</MDXComponents.p> |
|||
<MDXComponents.p> |
|||
<strong>INPUT:</strong>{' '} |
|||
<MDXComponents.inlineCode>{entry.input_type}</MDXComponents.inlineCode> |
|||
</MDXComponents.p> |
|||
<MDXComponents.p> |
|||
<strong>OUTPUT:</strong>{' '} |
|||
<MDXComponents.inlineCode>{entry.output_type}</MDXComponents.inlineCode> |
|||
</MDXComponents.p> |
|||
<MDXComponents.p> |
|||
<MDX components={MDXComponents}>{entry.description}</MDX> |
|||
</MDXComponents.p> |
|||
<MDXComponents.h4 id={slugify(entry.name) + '-example'}>Example</MDXComponents.h4> |
|||
<MDXComponents.pre> |
|||
{/* @ts-ignore*/} |
|||
<MDXComponents.code children={entry.example.toString() as string} /> |
|||
</MDXComponents.pre> |
|||
</React.Fragment> |
|||
); |
|||
}); |
|||
@ -0,0 +1,45 @@ |
|||
import React from 'react'; |
|||
import { cliReferenceData } from '@common/_data/cliRef'; |
|||
import { H2, P } from '@components/mdx/mdx-components'; |
|||
import { Text } from '@components/typography'; |
|||
import MDX from '@mdx-js/runtime'; |
|||
import { MDXComponents } from '@components/mdx/mdx-components'; |
|||
|
|||
export const CLIReferenceTable = () => { |
|||
return ( |
|||
<> |
|||
{cliReferenceData.map((entry, key) => { |
|||
return ( |
|||
<React.Fragment key={key}> |
|||
<H2>{entry.command}</H2> |
|||
<P> |
|||
<Text fontWeight="bold">Group</Text>: {entry.group} |
|||
</P> |
|||
<MDX components={MDXComponents}>{entry.usage}</MDX> |
|||
<MDXComponents.h3>Arguments</MDXComponents.h3> |
|||
|
|||
<MDXComponents.table> |
|||
<tr> |
|||
<MDXComponents.th>Name</MDXComponents.th> |
|||
<MDXComponents.th>Type</MDXComponents.th> |
|||
<MDXComponents.th>Value</MDXComponents.th> |
|||
<MDXComponents.th>Format</MDXComponents.th> |
|||
</tr> |
|||
|
|||
{entry.args.map((arg, argKey) => ( |
|||
<tr key={argKey}> |
|||
<MDXComponents.td>{arg.name}</MDXComponents.td> |
|||
<MDXComponents.td>{arg.type}</MDXComponents.td> |
|||
<MDXComponents.td>{arg.value}</MDXComponents.td> |
|||
<MDXComponents.td> |
|||
<MDXComponents.inlineCode>{arg.format}</MDXComponents.inlineCode> |
|||
</MDXComponents.td> |
|||
</tr> |
|||
))} |
|||
</MDXComponents.table> |
|||
</React.Fragment> |
|||
); |
|||
})} |
|||
</> |
|||
); |
|||
}; |
|||
@ -1,198 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Flex, color, space } from '@blockstack/ui'; |
|||
import { SideNav } from './side-nav'; |
|||
import { Header } from './header'; |
|||
import { Main } from './main'; |
|||
import { Footer } from './footer'; |
|||
import { useRouter } from 'next/router'; |
|||
import { ContentWrapper } from './content-wrapper'; |
|||
import NotFoundPage from '@pages/404'; |
|||
import { createGlobalStyle } from 'styled-components'; |
|||
import { TableOfContents } from '@components/toc'; |
|||
|
|||
import { css } from '@styled-system/css'; |
|||
import { SIDEBAR_WIDTH, TOC_WIDTH } from '@common/constants'; |
|||
export const MdxOverrides = createGlobalStyle` |
|||
.DocSearch-Container{ |
|||
z-index: 99999; |
|||
} |
|||
:root{ |
|||
--docsearch-modal-background: ${color('bg')}; |
|||
--docsearch-primary-color-R: 84; |
|||
--docsearch-primary-color-G: 104; |
|||
--docsearch-primary-color-B: 255; |
|||
--docsearch-primary-color: ${color('accent')}; |
|||
--docsearch-input-color: ${color('text-title')}; |
|||
--docsearch-highlight-color: var(--docsearch-primary-color); |
|||
--docsearch-placeholder-color: ${color('text-caption')}; |
|||
--docsearch-container-background: rgba(22,22,22,0.75); |
|||
--docsearch-modal-shadow: inset 1px 1px 0px 0px hsla(0,0%,100%,0.5),0px 3px 8px 0px #555a64; |
|||
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
|||
--docsearch-searchbox-focus-background: #fff; |
|||
--docsearch-searchbox-shadow: inset 0px 0px 0px 2px rgba(var(--docsearch-primary-color-R),var(--docsearch-primary-color-G),var(--docsearch-primary-color-B),0.5); |
|||
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
|||
--docsearch-hit-active-color: #fff; |
|||
--docsearch-hit-background: #fff; |
|||
--docsearch-hit-shadow: 0px 1px 3px 0px #d4d9e1; |
|||
--docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8); |
|||
--docsearch-key-shadow: inset 0px -2px 0px 0px #cdcde6,inset 0px 0px 1px 1px #fff,0px 1px 2px 1px rgba(30,35,90,0.4); |
|||
--docsearch-footer-background: #fff; |
|||
--docsearch-footer-shadow: 0px -1px 0px 0px #e0e3e8; |
|||
--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; |
|||
} |
|||
|
|||
pre{ |
|||
display: inline-block; |
|||
} |
|||
p, ul, ol, table { |
|||
color: ${color('text-body')}; |
|||
a > pre { |
|||
color: ${color('accent')} !important; |
|||
} |
|||
} |
|||
`;
|
|||
|
|||
const DocsLayout: React.FC<{ headings?: string[] }> = ({ children, headings }) => { |
|||
const router = useRouter(); |
|||
let isErrorPage = false; |
|||
|
|||
// get if NotFoundPage
|
|||
React.Children.forEach(children, (child: any) => { |
|||
if (child?.type === NotFoundPage) { |
|||
isErrorPage = true; |
|||
} |
|||
}); |
|||
return ( |
|||
<Flex minHeight="100vh" flexDirection="column"> |
|||
<Header /> |
|||
<Flex width="100%" flexGrow={1}> |
|||
<SideNav display={['none', 'none', 'block']} /> |
|||
<Flex |
|||
flexGrow={1} |
|||
maxWidth={[ |
|||
'100%', |
|||
'100%', |
|||
`calc(100% - ${SIDEBAR_WIDTH}px)`, |
|||
`calc(100% - ${SIDEBAR_WIDTH}px)`, |
|||
]} |
|||
mt={'50px'} |
|||
flexDirection="column" |
|||
> |
|||
<Main mx="unset" width={'100%'}> |
|||
<Flex |
|||
flexDirection={['column', 'column', 'row', 'row']} |
|||
maxWidth="108ch" |
|||
mx="auto" |
|||
flexGrow={1} |
|||
> |
|||
<ContentWrapper |
|||
width={ |
|||
headings?.length |
|||
? ['100%', '100%', `calc(100% - ${TOC_WIDTH}px)`, `calc(100% - ${TOC_WIDTH}px)`] |
|||
: '100%' |
|||
} |
|||
mx="unset" |
|||
px="unset" |
|||
pt="unset" |
|||
pr={space('base-tight')} |
|||
css={css({ |
|||
'& > *:not(pre):not(ul):not(ol)': { |
|||
px: space('extra-loose'), |
|||
}, |
|||
'& > ul, & > ol': { |
|||
pr: space('extra-loose'), |
|||
pl: '64px ', |
|||
}, |
|||
p: { |
|||
'& + p': { |
|||
mt: space('extra-loose'), |
|||
}, |
|||
}, |
|||
'& > *:not(pre) a > code': { |
|||
color: color('accent'), |
|||
'&:hover': { |
|||
textDecoration: 'underline', |
|||
}, |
|||
}, |
|||
pre: { |
|||
'& + h2': { |
|||
mt: space('base'), |
|||
}, |
|||
'& + h3': { |
|||
mt: space('base'), |
|||
}, |
|||
}, |
|||
h1: { |
|||
'& + *': { |
|||
mt: space('base-loose'), |
|||
}, |
|||
}, |
|||
h2: { |
|||
'& + h3': { |
|||
mt: 0, |
|||
}, |
|||
}, |
|||
'h1, h2, h3, h4, h5, h6': { |
|||
'& + pre': { |
|||
mt: '0', |
|||
}, |
|||
'& + ul, & + ol': { |
|||
mt: '0', |
|||
}, |
|||
'& + blockquote': { |
|||
mt: '0', |
|||
}, |
|||
}, |
|||
blockquote: { |
|||
'& + pre': { |
|||
mt: '0', |
|||
}, |
|||
'& + h2': { |
|||
mt: '0', |
|||
}, |
|||
}, |
|||
'& > pre > *:not(pre)': { |
|||
border: 'none', |
|||
px: space(['extra-loose', 'extra-loose', 'none', 'none']), |
|||
}, |
|||
'& > pre > div[style]': { |
|||
px: space(['base-loose', 'base-loose', 'none', 'none']), |
|||
}, |
|||
'& > pre > .code-editor': { |
|||
pl: space(['base', 'base', 'none', 'none']), |
|||
}, |
|||
'& > pre': { |
|||
px: space(['none', 'none', 'extra-loose', 'extra-loose']), |
|||
border: 'none', |
|||
boxShadow: 'none', |
|||
my: space('extra-loose'), |
|||
}, |
|||
'li pre': { |
|||
display: 'block', |
|||
my: space('base'), |
|||
}, |
|||
})} |
|||
> |
|||
{children} |
|||
</ContentWrapper> |
|||
{headings?.length && headings.length > 1 ? ( |
|||
<TableOfContents headings={headings} /> |
|||
) : null} |
|||
</Flex> |
|||
</Main> |
|||
<Footer justifySelf="flex-end" /> |
|||
</Flex> |
|||
</Flex> |
|||
</Flex> |
|||
); |
|||
}; |
|||
|
|||
export { DocsLayout }; |
|||
@ -0,0 +1,281 @@ |
|||
import React from 'react'; |
|||
import { Flex, color, space } from '@blockstack/ui'; |
|||
import { SideNav } from '../side-nav'; |
|||
import { Header } from '../header'; |
|||
import { Main } from '../main'; |
|||
import { Footer } from '../footer'; |
|||
import { useRouter } from 'next/router'; |
|||
import { ContentWrapper } from '../content-wrapper'; |
|||
import NotFoundPage from '@pages/404'; |
|||
import { createGlobalStyle } from 'styled-components'; |
|||
import { TableOfContents } from '@components/toc'; |
|||
import { getHeadingStyles } from '@components/mdx/typography'; |
|||
import { css } from '@styled-system/css'; |
|||
import { SIDEBAR_WIDTH, TOC_WIDTH } from '@common/constants'; |
|||
export const MdxOverrides = createGlobalStyle` |
|||
.DocSearch-Container{ |
|||
z-index: 99999; |
|||
} |
|||
:root{ |
|||
--docsearch-modal-background: ${color('bg')}; |
|||
--docsearch-primary-color-R: 84; |
|||
--docsearch-primary-color-G: 104; |
|||
--docsearch-primary-color-B: 255; |
|||
--docsearch-primary-color: ${color('accent')}; |
|||
--docsearch-input-color: ${color('text-title')}; |
|||
--docsearch-highlight-color: var(--docsearch-primary-color); |
|||
--docsearch-placeholder-color: ${color('text-caption')}; |
|||
--docsearch-container-background: rgba(22,22,22,0.75); |
|||
--docsearch-modal-shadow: inset 1px 1px 0px 0px hsla(0,0%,100%,0.5),0px 3px 8px 0px #555a64; |
|||
--docsearch-searchbox-background: var(--ifm-color-emphasis-300); |
|||
--docsearch-searchbox-focus-background: #fff; |
|||
--docsearch-searchbox-shadow: inset 0px 0px 0px 2px rgba(var(--docsearch-primary-color-R),var(--docsearch-primary-color-G),var(--docsearch-primary-color-B),0.5); |
|||
--docsearch-hit-color: var(--ifm-color-emphasis-800); |
|||
--docsearch-hit-active-color: #fff; |
|||
--docsearch-hit-background: #fff; |
|||
--docsearch-hit-shadow: 0px 1px 3px 0px #d4d9e1; |
|||
--docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8); |
|||
--docsearch-key-shadow: inset 0px -2px 0px 0px #cdcde6,inset 0px 0px 1px 1px #fff,0px 1px 2px 1px rgba(30,35,90,0.4); |
|||
--docsearch-footer-background: #fff; |
|||
--docsearch-footer-shadow: 0px -1px 0px 0px #e0e3e8; |
|||
--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; |
|||
} |
|||
|
|||
pre{ |
|||
display: inline-block; |
|||
} |
|||
p, ul, ol, table { |
|||
color: ${color('text-body')}; |
|||
a > pre { |
|||
color: ${color('accent')} !important; |
|||
} |
|||
} |
|||
`;
|
|||
|
|||
const styleOverwrites = { |
|||
'& > *:not(pre):not(ul):not(ol):not(img)': { |
|||
px: space('extra-loose'), |
|||
}, |
|||
'& > ul, & > ol': { |
|||
pr: space('extra-loose'), |
|||
pl: '64px ', |
|||
}, |
|||
p: { |
|||
'& + p': { |
|||
mt: space('extra-loose'), |
|||
}, |
|||
'&, ol, ul': { |
|||
'& code': { |
|||
fontSize: '14px', |
|||
}, |
|||
'&, & > *': { |
|||
display: 'inline-block', |
|||
fontSize: '16.5px', |
|||
lineHeight: '28px', |
|||
':before': { |
|||
content: "''", |
|||
marginTop: '-0.4878787878787879em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
':after': { |
|||
content: "''", |
|||
marginBottom: '-0.4878787878787879em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
'& > *:not(pre) a > code': { |
|||
color: color('accent'), |
|||
'&:hover': { |
|||
textDecoration: 'underline', |
|||
}, |
|||
}, |
|||
pre: { |
|||
'& + h2, & + h3': { |
|||
mt: space('extra-loose'), |
|||
}, |
|||
'& + h4, & + h5, & + h6': { |
|||
mt: 0, |
|||
}, |
|||
}, |
|||
h2: { |
|||
mt: '64px', |
|||
'&, & > *': { |
|||
...getHeadingStyles('h2'), |
|||
}, |
|||
'& > code': { |
|||
px: space('tight'), |
|||
py: space('extra-tight'), |
|||
mr: '2px', |
|||
fontSize: '22px', |
|||
}, |
|||
'& + h3': { |
|||
mt: 0, |
|||
}, |
|||
}, |
|||
h3: { |
|||
mt: '64px', |
|||
'&, & > *': { |
|||
...getHeadingStyles('h3'), |
|||
}, |
|||
'& + h4': { |
|||
mt: 0, |
|||
}, |
|||
}, |
|||
h4: { |
|||
mt: space('extra-loose'), |
|||
'&, & > *': { |
|||
...getHeadingStyles('h4'), |
|||
}, |
|||
'& + h5': { |
|||
mt: 0, |
|||
}, |
|||
}, |
|||
h5: { |
|||
mt: space('extra-loose'), |
|||
'&, & > *': { |
|||
...getHeadingStyles('h5'), |
|||
}, |
|||
}, |
|||
h6: { |
|||
mt: space('extra-loose'), |
|||
'&, & > *': { |
|||
...getHeadingStyles('h6'), |
|||
}, |
|||
}, |
|||
h1: { |
|||
mt: space('extra-loose'), |
|||
'&, & > *': { |
|||
...getHeadingStyles('h1'), |
|||
}, |
|||
'& + *': { |
|||
mt: space('extra-loose'), |
|||
}, |
|||
}, |
|||
'h1, h2, h3, h4, h5, h6': { |
|||
mb: space('extra-loose'), |
|||
'& + pre': { |
|||
mt: '0', |
|||
}, |
|||
'& + ul, & + ol': { |
|||
mt: '0', |
|||
}, |
|||
'& + blockquote': { |
|||
mt: '0', |
|||
}, |
|||
}, |
|||
'ol, ul': { |
|||
'& + blockquote': { |
|||
mt: space('extra-tight'), |
|||
}, |
|||
}, |
|||
blockquote: { |
|||
'& > div > div > *:first-child': { |
|||
mt: 0, |
|||
}, |
|||
'& + pre': { |
|||
mt: '0', |
|||
}, |
|||
'& + h2': { |
|||
mt: '0', |
|||
}, |
|||
}, |
|||
img: { |
|||
my: space('extra-loose'), |
|||
}, |
|||
'& > pre > *:not(pre)': { |
|||
border: 'none', |
|||
px: space(['extra-loose', 'extra-loose', 'none', 'none']), |
|||
}, |
|||
'& > pre > div[style]': { |
|||
px: space(['base-loose', 'base-loose', 'none', 'none']), |
|||
}, |
|||
'& > pre > .code-editor': { |
|||
pl: space(['base', 'base', 'none', 'none']), |
|||
}, |
|||
'& > pre': { |
|||
px: space(['none', 'none', 'extra-loose', 'extra-loose']), |
|||
border: 'none', |
|||
boxShadow: 'none', |
|||
my: space('extra-loose'), |
|||
}, |
|||
'li pre': { |
|||
display: 'block', |
|||
my: space('base'), |
|||
}, |
|||
}; |
|||
|
|||
export const Contents = ({ headings, children }) => ( |
|||
<> |
|||
<ContentWrapper |
|||
width={ |
|||
headings?.length |
|||
? ['100%', '100%', `calc(100% - ${TOC_WIDTH}px)`, `calc(100% - ${TOC_WIDTH}px)`] |
|||
: '100%' |
|||
} |
|||
mx="unset" |
|||
px="unset" |
|||
pt="unset" |
|||
pr={space('base-tight')} |
|||
css={css(styleOverwrites)} |
|||
> |
|||
{children} |
|||
</ContentWrapper> |
|||
{headings?.length && headings.length > 1 ? <TableOfContents headings={headings} /> : null} |
|||
</> |
|||
); |
|||
|
|||
const DocsLayout: React.FC<{ isHome?: boolean }> = ({ children, isHome }) => { |
|||
let isErrorPage = false; |
|||
|
|||
// get if NotFoundPage
|
|||
React.Children.forEach(children, (child: any) => { |
|||
if (child?.type === NotFoundPage) { |
|||
isErrorPage = true; |
|||
} |
|||
}); |
|||
return ( |
|||
<Flex minHeight="100vh" flexDirection="column"> |
|||
<Header /> |
|||
<Flex width="100%" flexGrow={1}> |
|||
{!isHome && <SideNav display={['none', 'none', 'block']} />} |
|||
<Flex |
|||
flexGrow={1} |
|||
maxWidth={[ |
|||
'100%', |
|||
'100%', |
|||
`calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`, |
|||
`calc(100% - ${isHome ? 0 : SIDEBAR_WIDTH}px)`, |
|||
]} |
|||
mt={'50px'} |
|||
flexDirection="column" |
|||
> |
|||
<Main mx="unset" width={'100%'}> |
|||
<Flex |
|||
flexDirection={['column', 'column', 'row', 'row']} |
|||
maxWidth="108ch" |
|||
mx="auto" |
|||
flexGrow={1} |
|||
> |
|||
{children} |
|||
</Flex> |
|||
</Main> |
|||
<Footer justifySelf="flex-end" /> |
|||
</Flex> |
|||
</Flex> |
|||
</Flex> |
|||
); |
|||
}; |
|||
|
|||
export { DocsLayout }; |
|||
@ -1,22 +1,22 @@ |
|||
import React from 'react'; |
|||
import { DocsLayout } from '@components/docs-layout'; |
|||
import { Contents } from '@components/layouts/docs-layout'; |
|||
import Head from 'next/head'; |
|||
export default function Layout(frontMatter) { |
|||
const Layout = frontMatter => props => { |
|||
const { |
|||
title, |
|||
description = 'The Blockstack design system, built with React and styled-system.', |
|||
headings, |
|||
} = frontMatter; |
|||
|
|||
return ({ children }) => { |
|||
return ( |
|||
<> |
|||
<Head> |
|||
<title>{title || headings[0]} | Blockstack Docs</title> |
|||
<title>{title || headings[0].content} | Blockstack Docs</title> |
|||
<meta name="description" content={description} /> |
|||
</Head> |
|||
<DocsLayout headings={headings}>{children}</DocsLayout> |
|||
<Contents headings={headings}>{props.children}</Contents> |
|||
</> |
|||
); |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
export default Layout; |
|||
|
|||
@ -0,0 +1,6 @@ |
|||
import React from 'react'; |
|||
export default function Layout(frontMatter) { |
|||
return ({ children }) => { |
|||
return <>{children}</>; |
|||
}; |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
export const baseTypeStyles = { |
|||
letterSpacing: '-0.01em', |
|||
dispay: 'flex', |
|||
fontFeatureSettings: `'ss01' on`, |
|||
}; |
|||
|
|||
const h1 = { |
|||
fontWeight: 'bolder', |
|||
fontSize: '44px', |
|||
lineHeight: '52px', |
|||
padding: '0.05px 0', |
|||
':before': { |
|||
content: "''", |
|||
marginTop: '-0.2284090909090909em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
':after': { |
|||
content: "''", |
|||
marginBottom: '-0.22840909090909092em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
}; |
|||
const h2 = { |
|||
fontWeight: 600, |
|||
fontSize: '27.5px', |
|||
lineHeight: '34px', |
|||
padding: '0.05px 0', |
|||
':before': { |
|||
content: "''", |
|||
marginTop: '-0.25636363636363635em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
':after': { |
|||
content: "''", |
|||
marginBottom: '-0.2563636363636364em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
}; |
|||
|
|||
const h3 = { |
|||
fontWeight: 500, |
|||
fontSize: '22px', |
|||
lineHeight: '32px', |
|||
padding: '0.05px 0', |
|||
':before': { |
|||
content: "''", |
|||
marginTop: '-0.3659090909090909em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
':after': { |
|||
content: "''", |
|||
marginBottom: '-0.3659090909090909em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
}; |
|||
|
|||
const h4 = { |
|||
fontSize: '19.25px', |
|||
lineHeight: '28px', |
|||
padding: '0.05px 0', |
|||
':before': { |
|||
content: "''", |
|||
marginTop: '-0.36623376623376624em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
':after': { |
|||
content: "''", |
|||
marginBottom: '-0.36623376623376624em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
}; |
|||
const h5 = { |
|||
fontSize: '16px', |
|||
lineHeight: '28px', |
|||
fontWeight: 'bold', |
|||
}; |
|||
|
|||
const h6 = { |
|||
fontSize: '14px', |
|||
lineHeight: '28px', |
|||
fontWeight: 'bold', |
|||
}; |
|||
|
|||
const headings = { |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
}; |
|||
|
|||
export const getHeadingStyles = (as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => { |
|||
return { |
|||
...headings[as], |
|||
}; |
|||
}; |
|||
@ -0,0 +1,41 @@ |
|||
const is = require('unist-util-is'); |
|||
const visit = require('unist-util-visit'); |
|||
|
|||
const sigils = { |
|||
'=>': 'success', |
|||
'->': 'info', |
|||
'~>': 'warning', |
|||
'!>': 'danger', |
|||
}; |
|||
|
|||
module.exports = function paragraphCustomAlertsPlugin() { |
|||
return function transformer(tree) { |
|||
visit(tree, 'paragraph', (pNode, _, parent) => { |
|||
visit(pNode, 'text', textNode => { |
|||
Object.keys(sigils).forEach(symbol => { |
|||
if (textNode.value.startsWith(`${symbol} `)) { |
|||
// Remove the literal sigil symbol from string contents
|
|||
textNode.value = textNode.value.replace(`${symbol} `, ''); |
|||
|
|||
// Wrap matched nodes with <div> (containing proper attributes)
|
|||
parent.children = parent.children.map(node => { |
|||
return is(pNode, node) |
|||
? { |
|||
type: 'wrapper', |
|||
children: [node], |
|||
data: { |
|||
hName: 'blockquote', |
|||
hProperties: { |
|||
className: ['alert', `alert-${sigils[symbol]}`], |
|||
role: 'alert', |
|||
}, |
|||
}, |
|||
} |
|||
: node; |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
}; |
|||
}; |
|||
@ -1,5 +0,0 @@ |
|||
# About this `docs` directory |
|||
|
|||
The contents of this directory acts as source for material for |
|||
[docs.blockstack.org](https://docs.blockstack.org/), a searchable documentation |
|||
site for all things Blockstack. |
|||
@ -1,3 +1,69 @@ |
|||
# blockstack_cli reference |
|||
--- |
|||
title: Blockstack CLI Reference |
|||
--- |
|||
|
|||
{% include commandline.md %} |
|||
import { CLIReferenceTable } from '@components/cli-reference' |
|||
|
|||
# Blockstack CLI reference |
|||
|
|||
The command line is intended for developers only. Developers can use the command |
|||
line to test and debug Blockstack applications in ways that the Blockstack |
|||
Browser does not yet support. Using the command line, developers can: |
|||
|
|||
- Generate and Broadcast all supported types of Blockstack transactions |
|||
- Load, store, and list data in Gaia hubs |
|||
- Generate owner, payment and application keys from a seed phrase |
|||
- Query Stacks Nodes |
|||
- Implement a minimum viable authentication flow |
|||
|
|||
!> Many of the commands operate on unencrypted private keys. For this reason, |
|||
DO NOT use this tool for day-to-day tasks as you risk the security of your keys. |
|||
|
|||
You must install the command line before you can use the commands. |
|||
|
|||
## How to install the command line |
|||
|
|||
You must have [Node.js](https://nodejs.org/en/download/) v8 or higher (v10 recommended). macOS and Linux users can avoid `sudo` or [permissions problems](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) or by using [`nvm`](https://github.com/nvm-sh/nvm). These instructions assume you are using a macOS or Linux system. |
|||
|
|||
To install the command line, do the following: |
|||
|
|||
### Step 1: [Download or `git clone` the command line repository code](https://github.com/blockstack/cli-blockstack). |
|||
|
|||
Downloading or cloning the repo creates a `cli-blockstack` repository on your system. |
|||
|
|||
### Step 2: Change directory into the `cli-blockstack` directory. |
|||
|
|||
```bash |
|||
cd cli-blockstack |
|||
``` |
|||
|
|||
### Step 3: Install the dependencies with `npm`. |
|||
|
|||
```bash |
|||
npm install |
|||
``` |
|||
|
|||
### Step 4: Build the command line command. |
|||
|
|||
```bash |
|||
npm run build |
|||
``` |
|||
|
|||
### Step 5: Link the command. |
|||
|
|||
```bash |
|||
sudo npm link |
|||
``` |
|||
|
|||
### Troubleshooting the CLI installation |
|||
|
|||
If you run into `EACCES` permissions errors, try the following: |
|||
|
|||
- See https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally. |
|||
- Use [`Node Version Manager`](https://github.com/nvm-sh/nvm). |
|||
|
|||
## List of commands |
|||
|
|||
To see the usage and options for the command in general, enter `blockstack-cli` without any subcommands. To see a list of subcommands enter `blockstack-cli help`. Enter `blockstack-cli SUBCOMMAND_NAME help` to see a subcommand with its usage. The following are the available subcommands: |
|||
|
|||
<CLIReferenceTable /> |
|||
|
|||
@ -1 +0,0 @@ |
|||
The documentation has been moved to [docs.blockstack.org](https://docs.blockstack.org/), please update your bookmarks. |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue