mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
7 changed files with 145 additions and 239 deletions
@ -0,0 +1,66 @@ |
|||
name: Deploy preview |
|||
on: [push, pull_request] |
|||
|
|||
jobs: |
|||
vercel-deployment: |
|||
runs-on: ubuntu-latest |
|||
steps: |
|||
- uses: actions/checkout@v2 |
|||
- name: Vercel action |
|||
uses: amondnet/vercel-action@v19.0.1+1 |
|||
id: vercel-deployment-preview |
|||
with: |
|||
vercel-token: ${{ secrets.VERCEL_TOKEN }} |
|||
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} |
|||
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} |
|||
scope: ${{ secrets.VERCEL_SCOPE }} |
|||
- name: Comment on PR |
|||
uses: actions/github-script@v2 |
|||
id: comment |
|||
with: |
|||
github-token: ${{ secrets.GITHUB_TOKEN }} |
|||
script: | |
|||
const firstLine = `The Blockstack docs have been deployed with Vercel using the code from this PR!`; |
|||
|
|||
let comment = undefined; |
|||
|
|||
try { |
|||
const comments = await github.paginate( |
|||
'GET /repos/:owner/:repo/issues/:issue_number/comments', |
|||
{ ...context.repo, issue_number: context.issue.number}, |
|||
response => response.data.map(issue => issue.body) |
|||
); |
|||
|
|||
comment = comments.find((c) => |
|||
c.body.includes(firstLine) |
|||
); |
|||
} catch(e) { |
|||
console.log('Comment could not be made!', e) |
|||
} |
|||
|
|||
const commentId = comment && comment.id || undefined; |
|||
|
|||
const commentBody = ` |
|||
#### Deploy preview ready! |
|||
${firstLine} |
|||
|
|||
- [Click here to view the deploy preview.](${{ steps.vercel-deployment-preview.outputs.preview-url }}) |
|||
|
|||
Built with commit ${context.sha}. |
|||
`; |
|||
|
|||
if(context.issue.number){ |
|||
if (commentId) { |
|||
await github.issues.updateComment({ |
|||
...context.repo, |
|||
comment_id: commentId, |
|||
body: commentBody, |
|||
}); |
|||
} else { |
|||
await github.issues.createComment({ |
|||
...context.repo, |
|||
issue_number: context.issue.number, |
|||
body: commentBody, |
|||
}); |
|||
} |
|||
} |
|||
@ -1,50 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Box, Flex, space } from '@blockstack/ui'; |
|||
import { ExampleComponent } from '@components/example'; |
|||
|
|||
import { CodeExamples } from '@components/home/code-examples'; |
|||
import { BodyLarge, H2 } from '@components/home/text'; |
|||
import { Section, SectionWrapper } from '@components/home/common'; |
|||
|
|||
export const CodeSection = () => { |
|||
return ( |
|||
<Section mt="64px" pb={0}> |
|||
<Box |
|||
minHeight={['790px', '650px', '400px', '400px']} |
|||
bg="black" |
|||
width="100%" |
|||
position="absolute" |
|||
top={0} |
|||
left={0} |
|||
/> |
|||
<SectionWrapper> |
|||
<Flex |
|||
flexDirection={['column', 'row', 'column', 'column']} |
|||
align={['unset', 'center', 'unset', 'unset']} |
|||
> |
|||
<Box mb={space(['base-loose', 'none', 'none', 'none'])}> |
|||
<H2 color="white" mb={space('extra-loose')}> |
|||
Iterate quickly |
|||
</H2> |
|||
<BodyLarge minWidth="16ch" color="white" mb={space('extra-loose')}> |
|||
Build complex UI easily with primitives and highly composable components. |
|||
</BodyLarge> |
|||
</Box> |
|||
<Box |
|||
display={['block', 'block', 'none', 'none']} |
|||
mb={space('extra-loose')} |
|||
pl={space(['none', 'base-loose', 'base-loose', 'base-loose'])} |
|||
flexShrink={0} |
|||
position="relative" |
|||
> |
|||
<ExampleComponent opacity={0} /> |
|||
<ExampleComponent top={0} position="absolute" /> |
|||
</Box> |
|||
</Flex> |
|||
<CodeExamples /> |
|||
</SectionWrapper> |
|||
</Section> |
|||
); |
|||
}; |
|||
|
|||
export default CodeSection; |
|||
@ -1,83 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Box, Grid, space, color, themeColor } from '@blockstack/ui'; |
|||
import { CONTENT_MAX_WIDTH } from '@common/constants'; |
|||
import { BoxIcon } from '@components/icons/box'; |
|||
import { StackIcon } from '@components/icons/stack'; |
|||
import { PackageIcon } from '@components/icons/package'; |
|||
import { Card } from '@components/home/card'; |
|||
import { Body, SubHeading, H2 } from '@components/home/text'; |
|||
import { CircleIcon, Section, SectionWrapper } from '@components/home/common'; |
|||
|
|||
export const CTASection = () => ( |
|||
<Section bg={color('invert')} minHeight="320px"> |
|||
<SectionWrapper> |
|||
<H2 mb={space('extra-loose')} mx="auto" textAlign="center" color="white"> |
|||
Get started with Blockstack UI |
|||
</H2> |
|||
<Grid |
|||
maxWidth={`${CONTENT_MAX_WIDTH}px`} |
|||
width="100%" |
|||
gridGap={space('extra-loose')} |
|||
minHeight="200px" |
|||
gridTemplateColumns={['repeat(1, 1fr)', 'repeat(1, 1fr)', 'repeat(3, 1fr)']} |
|||
mx="auto" |
|||
pt={space('extra-loose')} |
|||
> |
|||
<Card dark href="/getting-started" textAlign="center"> |
|||
{({ hover, active }) => ( |
|||
<Box> |
|||
<CircleIcon |
|||
icon={PackageIcon} |
|||
dark |
|||
hover={hover} |
|||
mx="auto" |
|||
mb={space('base-loose')} |
|||
/> |
|||
<SubHeading |
|||
color={hover || active ? themeColor('blue.400') : 'white'} |
|||
mb={space('base-loose')} |
|||
> |
|||
Installation & usage |
|||
</SubHeading> |
|||
<Body color={themeColor('ink.300')}> |
|||
Our getting started guide, add Blockstack UI to your app. |
|||
</Body> |
|||
</Box> |
|||
)} |
|||
</Card> |
|||
<Card dark href="/design-graph/system-props" textAlign="center"> |
|||
{({ hover, active }) => ( |
|||
<Box> |
|||
<CircleIcon hover={hover} icon={StackIcon} dark mx="auto" mb={space('base-loose')} /> |
|||
<SubHeading |
|||
color={hover || active ? themeColor('blue.400') : 'white'} |
|||
mb={space('base-loose')} |
|||
> |
|||
System props |
|||
</SubHeading> |
|||
<Body color={themeColor('ink.300')}> |
|||
See how to use props to style your components. |
|||
</Body> |
|||
</Box> |
|||
)} |
|||
</Card> |
|||
<Card dark href="/components/box" textAlign="center"> |
|||
{({ hover, active }) => ( |
|||
<Box> |
|||
<CircleIcon hover={hover} icon={BoxIcon} dark mx="auto" mb={space('base-loose')} /> |
|||
<SubHeading |
|||
color={hover || active ? themeColor('blue.400') : 'white'} |
|||
mb={space('base-loose')} |
|||
> |
|||
Box component |
|||
</SubHeading> |
|||
<Body color={themeColor('ink.300')}> |
|||
Learn about the base component everything is built with. |
|||
</Body> |
|||
</Box> |
|||
)} |
|||
</Card> |
|||
</Grid> |
|||
</SectionWrapper> |
|||
</Section> |
|||
); |
|||
@ -1,53 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Grid, space } from '@blockstack/ui'; |
|||
import { AccessibleIcon } from '@components/icons/accessible'; |
|||
import { AtomIcon } from '@components/icons/atom'; |
|||
import { PaletteIcon } from '@components/icons/palette'; |
|||
import { PaintIcon } from '@components/icons/paint'; |
|||
import { LayersIntersectIcon } from '@components/icons/layers-intersect'; |
|||
import { H2 } from '@components/home/text'; |
|||
import { GridItem } from '@components/home/grid'; |
|||
import { Section, SectionWrapper } from '@components/home/common'; |
|||
|
|||
export const PatternsSection = () => ( |
|||
<Section> |
|||
<SectionWrapper> |
|||
<H2 mb={space('extra-loose')}>Patterns & Principles</H2> |
|||
<Grid |
|||
width="100%" |
|||
mt="64px" |
|||
mb={space('base-loose')} |
|||
gridGap={space('extra-loose')} |
|||
gridRowGap={'64px'} |
|||
gridTemplateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)']} |
|||
gridTemplateRows={['repeat(1, 1fr)', 'repeat(1, 1fr)', 'repeat(2, 1fr)']} |
|||
> |
|||
<GridItem |
|||
icon={AccessibleIcon} |
|||
title="Accessible" |
|||
body="Blockstack UI follows WAI-ARIA standards. All components come with proper attributes and keyboard interactions out of the box." |
|||
/> |
|||
<GridItem |
|||
icon={AtomIcon} |
|||
title="Base primitives" |
|||
body="All components are built with a set of primitives that can take any css property as a prop for on-the-fly adjustments." |
|||
/> |
|||
<GridItem |
|||
icon={PaletteIcon} |
|||
title="Design graph" |
|||
body="Components built out of constraints, using token based design: scales of sizes, colors, and other variables." |
|||
/> |
|||
<GridItem |
|||
icon={PaintIcon} |
|||
title="Theming" |
|||
body="Blockstack UI is built with the Theme UI Spec in mind, allowing for theming such as light and dark modes." |
|||
/> |
|||
<GridItem |
|||
icon={LayersIntersectIcon} |
|||
title="Composability" |
|||
body="All components are built with composition in mind. Combine any components to build complex UI." |
|||
/> |
|||
</Grid> |
|||
</SectionWrapper> |
|||
</Section> |
|||
); |
|||
Loading…
Reference in new issue