mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
30 changed files with 566 additions and 1431 deletions
@ -0,0 +1,6 @@ |
|||
const memoize = require('micro-memoize'); |
|||
const { rehypeVscode } = require('unified-vscode'); |
|||
|
|||
const rehypePlugins = [memoize(rehypeVscode)]; |
|||
|
|||
module.exports = { rehypePlugins }; |
|||
@ -0,0 +1,42 @@ |
|||
// https://github.com/jake-low/remark-sectionize
|
|||
const findAfter = require('unist-util-find-after'); |
|||
const visit = require('unist-util-visit-parents'); |
|||
|
|||
const MAX_HEADING_DEPTH = 6; |
|||
|
|||
module.exports = plugin; |
|||
|
|||
function plugin() { |
|||
return transform; |
|||
} |
|||
|
|||
function transform(tree) { |
|||
for (let depth = MAX_HEADING_DEPTH; depth > 0; depth--) { |
|||
visit(tree, node => node.type === 'heading' && node.depth === depth, sectionize); |
|||
} |
|||
} |
|||
|
|||
function sectionize(node, ancestors) { |
|||
const start = node; |
|||
const depth = start.depth; |
|||
const parent = ancestors[ancestors.length - 1]; |
|||
|
|||
const isEnd = node => (node.type === 'heading' && node.depth <= depth) || node.type === 'export'; |
|||
const end = findAfter(parent, start, isEnd); |
|||
|
|||
const startIndex = parent.children.indexOf(start); |
|||
const endIndex = parent.children.indexOf(end); |
|||
|
|||
const between = parent.children.slice(startIndex, endIndex > 0 ? endIndex : undefined); |
|||
|
|||
const section = { |
|||
type: 'section', |
|||
depth: depth, |
|||
children: between, |
|||
data: { |
|||
hName: 'section', |
|||
}, |
|||
}; |
|||
|
|||
parent.children.splice(startIndex, section.children.length, section); |
|||
} |
|||
@ -1,11 +1,14 @@ |
|||
import { MDXComponents } from '@components/mdx/mdx-components'; |
|||
import renderToString from 'next-mdx-remote/render-to-string'; |
|||
const { remarkPlugins } = require('../../../lib/remark-plugins'); |
|||
const { rehypePlugins } = require('../../../lib/rehype-plugins'); |
|||
|
|||
export const wrapValueInTicks = value => '`' + value.replace('`', '').replace('`', '') + '`'; |
|||
|
|||
export const convertRemoteDataToMDX = async (arr: any[], key: string) => |
|||
Promise.all(arr.map(entry => renderToString(entry[key], MDXComponents, { remarkPlugins }))); |
|||
Promise.all( |
|||
arr.map(entry => renderToString(entry[key], MDXComponents, { remarkPlugins, rehypePlugins })) |
|||
); |
|||
|
|||
export const renderMdx = async (content: string) => |
|||
renderToString(content, MDXComponents, { remarkPlugins }); |
|||
renderToString(content, MDXComponents, { remarkPlugins, rehypePlugins }); |
|||
|
|||
@ -0,0 +1,10 @@ |
|||
import React from 'react'; |
|||
import { BaseSvg, SvgProps } from '@components/icons/_base'; |
|||
|
|||
export const SearchIcon: SvgProps = props => ( |
|||
<BaseSvg {...props}> |
|||
<path stroke="none" d="M0 0h24v24H0z" /> |
|||
<circle cx="10" cy="10" r="7" /> |
|||
<line x1="21" y1="21" x2="15" y2="15" /> |
|||
</BaseSvg> |
|||
); |
|||
@ -0,0 +1,12 @@ |
|||
import React from 'react'; |
|||
import { Box, BoxProps } from '@blockstack/ui'; |
|||
|
|||
export const Section: React.FC<BoxProps> = React.memo( |
|||
React.forwardRef(({ children, ...rest }, ref) => { |
|||
return ( |
|||
<Box ref={ref as any} as="section" {...rest}> |
|||
{children} |
|||
</Box> |
|||
); |
|||
}) |
|||
); |
|||
@ -1,56 +1,14 @@ |
|||
<table class="uk-table-striped uk-table-small"> |
|||
<thead> |
|||
<tr> |
|||
<th class="uk-width-1-2"><strong>Field</strong></th> |
|||
<th>Description</th> |
|||
</tr> |
|||
</thead> |
|||
<tr> |
|||
<td><strong>Your Name</strong></td> |
|||
<td>Your first and last name.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Your Email</strong></td> |
|||
<td>A valid email address. If you are submitting an example of Animal Kingdom sample,this is the email where we will send you instructions for getting your Zero to DApp t-shirt.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>App Name</strong></td> |
|||
<td>Name of your application. If you are submitting an example of Animal Kingdom sample, enter <code>USERNAME: Animal Kingdom</code>.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Short description</strong></td> |
|||
<td>Describe your application. </td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Website</strong></td> |
|||
<td>The URL of the website where you deployed your application. </td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>App icon URL</strong></td> |
|||
<td> <code>URL_DEPLOYED_SITE/icon-192x192.png</code> for example, <code>https://animalkingdoms.netlify.com/icon-192x192.png</code> </td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Open Source URL</strong></td> |
|||
<td>The URL where your source code lives. If you are submitting an example of Animal Kingdom sample, you can leave this blank for a sample application. </td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Twitter Handle</strong></td> |
|||
<td>Optionally enter a Twitter handle for your application, for example `@coolapp`.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Category</strong></td> |
|||
<td>If you are submitting an example of Animal Kingdom sample, make sure you choose the <strong>Sample Blockstack Apps</strong> category.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Blockchain</strong></td> |
|||
<td>If you are submitting an example of Animal Kingdom sample, leave this as is.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Storage</strong></td> |
|||
<td>Choose Gaia if you are using it.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><strong>Authentication</strong></td> |
|||
<td>Choose Blockstack; Blockstack Authentication is required to participate in Animal Kingdom.</td> |
|||
</tr> |
|||
</table> |
|||
| Field | Description | |
|||
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
|||
| Your Name | Your first and last name. | |
|||
| Your Email | A valid email address. If you are submitting an example of Animal Kingdom sample,this is the email where we will send you instructions for getting your Zero to DApp t-shirt. | |
|||
| App Name | Name of your application. If you are submitting an example of Animal Kingdom sample, enter USERNAME: Animal Kingdom. | |
|||
| Short description | Describe your application. | |
|||
| Website | The URL of the website where you deployed your application. | |
|||
| App icon URL | URL_DEPLOYED_SITE/icon-192x192.png for example, https://animalkingdoms.netlify.com/icon-192x192.png | |
|||
| Open Source URL | The URL where your source code lives. If you are submitting an example of Animal Kingdom sample, you can leave this blank for a sample application. | |
|||
| Twitter Handle | Optionally enter a Twitter handle for your application, for example `@coolapp`. | |
|||
| Category | If you are submitting an example of Animal Kingdom sample, make sure you choose the Sample Blockstack Apps category. | |
|||
| Blockchain | If you are submitting an example of Animal Kingdom sample, leave this as is. | |
|||
| Storage | Choose Gaia if you are using it. | |
|||
| Authentication | Choose Blockstack; Blockstack Authentication is required to participate in Animal Kingdom. | |
|||
|
|||
@ -1,23 +1,9 @@ |
|||
You use the Blockstack App Generator to create scaffolding for a starter application. The generator can create scaffolding for any of these frameworks: |
|||
|
|||
<table class="uk-table"> |
|||
<tr> |
|||
<th>Framework</th> |
|||
<th>Use this command to install</th> |
|||
</tr> |
|||
<tr> |
|||
<td>Plain Javascript</td> |
|||
<td><code> npx generator-blockstack --plain</code></td> |
|||
</tr> |
|||
<tr> |
|||
<td>React</td> |
|||
<td><code> npx generator-blockstack --react</code></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Vue</td> |
|||
<td><code> npx generator-blockstack --vue |
|||
</code></td> |
|||
</tr> |
|||
</table> |
|||
| Framework | Use this command to install | |
|||
| ---------------- | ---------------------------------- | |
|||
| Plain Javascript | `npx generator-blockstack --plain` | |
|||
| React | `npx generator-blockstack --react` | |
|||
| Vue | `npx generator-blockstack --vue` | |
|||
|
|||
For example, to install a Vue scaffolding, you would use the `npx generator-blockstack --vue` command. |
|||
|
|||
File diff suppressed because it is too large
Loading…
Reference in new issue