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 { MDXComponents } from '@components/mdx/mdx-components'; |
||||
import renderToString from 'next-mdx-remote/render-to-string'; |
import renderToString from 'next-mdx-remote/render-to-string'; |
||||
const { remarkPlugins } = require('../../../lib/remark-plugins'); |
const { remarkPlugins } = require('../../../lib/remark-plugins'); |
||||
|
const { rehypePlugins } = require('../../../lib/rehype-plugins'); |
||||
|
|
||||
export const wrapValueInTicks = value => '`' + value.replace('`', '').replace('`', '') + '`'; |
export const wrapValueInTicks = value => '`' + value.replace('`', '').replace('`', '') + '`'; |
||||
|
|
||||
export const convertRemoteDataToMDX = async (arr: any[], key: string) => |
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) => |
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"> |
| Field | Description | |
||||
<thead> |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
||||
<tr> |
| Your Name | Your first and last name. | |
||||
<th class="uk-width-1-2"><strong>Field</strong></th> |
| 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. | |
||||
<th>Description</th> |
| App Name | Name of your application. If you are submitting an example of Animal Kingdom sample, enter USERNAME: Animal Kingdom. | |
||||
</tr> |
| Short description | Describe your application. | |
||||
</thead> |
| Website | The URL of the website where you deployed your application. | |
||||
<tr> |
| App icon URL | URL_DEPLOYED_SITE/icon-192x192.png for example, https://animalkingdoms.netlify.com/icon-192x192.png | |
||||
<td><strong>Your Name</strong></td> |
| 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. | |
||||
<td>Your first and last name.</td> |
| Twitter Handle | Optionally enter a Twitter handle for your application, for example `@coolapp`. | |
||||
</tr> |
| Category | If you are submitting an example of Animal Kingdom sample, make sure you choose the Sample Blockstack Apps category. | |
||||
<tr> |
| Blockchain | If you are submitting an example of Animal Kingdom sample, leave this as is. | |
||||
<td><strong>Your Email</strong></td> |
| Storage | Choose Gaia if you are using it. | |
||||
<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> |
| Authentication | Choose Blockstack; Blockstack Authentication is required to participate in Animal Kingdom. | |
||||
</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> |
|
||||
|
|||||
@ -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: |
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"> |
| Framework | Use this command to install | |
||||
<tr> |
| ---------------- | ---------------------------------- | |
||||
<th>Framework</th> |
| Plain Javascript | `npx generator-blockstack --plain` | |
||||
<th>Use this command to install</th> |
| React | `npx generator-blockstack --react` | |
||||
</tr> |
| Vue | `npx generator-blockstack --vue` | |
||||
<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> |
|
||||
|
|
||||
For example, to install a Vue scaffolding, you would use the `npx generator-blockstack --vue` command. |
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