mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
5 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