Skip to content

Commit

Permalink
feat(www): add code snippet with install command to starters (#16972)
Browse files Browse the repository at this point in the history
  • Loading branch information
gillkyle authored and GatsbyJS Bot committed Aug 22, 2019
1 parent 3299192 commit f7382ae
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 0 deletions.
2 changes: 2 additions & 0 deletions www/src/templates/template-starter-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import StarterHeader from "../views/starter/header"
import StarterMeta from "../views/starter/meta"
import StarterScreenshot from "../views/starter/screenshot"
import StarterSource from "../views/starter/source"
import StarterInstallation from "../views/starter/installation"
import StarterDetails from "../views/starter/details"
import FooterLinks from "../components/shared/footer-links"

Expand Down Expand Up @@ -115,6 +116,7 @@ class StarterTemplate extends React.Component {
<StarterScreenshot imageSharp={screenshot} repoName={repoName} />
</div>
<StarterSource repoUrl={repoUrl} startersYaml={startersYaml} />
<StarterInstallation repoName={repoName} repoUrl={repoUrl} />
<StarterDetails
startersYaml={startersYaml}
allDeps={allDeps}
Expand Down
64 changes: 64 additions & 0 deletions www/src/views/starter/installation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from "react"
import Copy from "../../components/copy"
import {
colors,
space,
radii,
mediaQueries,
fontSizes,
} from "../../utils/presets"

const StarterInstallation = ({ repoName, repoUrl }) => {
const content = `gatsby new ${repoName || `my-gatsby-project`} ${repoUrl}`
return (
<div
css={{
padding: `0px ${space[6]}`,
[mediaQueries.lg]: {
padding: `0px ${space[8]}`,
display: `grid`,
gridTemplateRows: `auto auto`,
gridRowGap: space[2],
},
}}
>
<div css={{ fontSize: fontSizes[1], color: colors.text.secondary }}>
Install this starter locally:
</div>
<pre
css={{
padding: 0,
background: colors.code.bg,
}}
>
<code
css={{
display: `flex`,
alignItems: `center`,
justifyContent: `space-between`,
padding: space[2],
overflowWrap: `break-word`,
[mediaQueries.lg]: {
padding: space[3],
},
"&:before": {
display: `none`,
},
"&:after": {
display: `none`,
},
}}
>
{content}
<Copy
fileName="Install command"
content={content}
css={{ borderRadius: `${radii[1]}px` }}
/>
</code>
</pre>
</div>
)
}

export default StarterInstallation

0 comments on commit f7382ae

Please sign in to comment.