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 = { |
module.exports = { |
||||
presets: ['next/babel'], |
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 SIDEBAR_WIDTH = 280; |
||||
export const TOC_WIDTH = 200; |
export const TOC_WIDTH = 280; |
||||
export const CONTENT_MAX_WIDTH = 1104; |
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 React from 'react'; |
||||
import { DocsLayout } from '@components/docs-layout'; |
import { Contents } from '@components/layouts/docs-layout'; |
||||
import Head from 'next/head'; |
import Head from 'next/head'; |
||||
export default function Layout(frontMatter) { |
const Layout = frontMatter => props => { |
||||
const { |
const { |
||||
title, |
title, |
||||
description = 'The Blockstack design system, built with React and styled-system.', |
description = 'The Blockstack design system, built with React and styled-system.', |
||||
headings, |
headings, |
||||
} = frontMatter; |
} = frontMatter; |
||||
|
|
||||
return ({ children }) => { |
|
||||
return ( |
return ( |
||||
<> |
<> |
||||
<Head> |
<Head> |
||||
<title>{title || headings[0]} | Blockstack Docs</title> |
<title>{title || headings[0].content} | Blockstack Docs</title> |
||||
<meta name="description" content={description} /> |
<meta name="description" content={description} /> |
||||
</Head> |
</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