feat(www): add code snippet with install command to starters (#16972)

gatsbyjs · Aug 22, 2019 · f7382ae · f7382ae
1 parent 3299192
commit f7382ae
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/www/src/templates/template-starter-page.js b/www/src/templates/template-starter-page.js
@@ -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"
 
@@ -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}

diff --git a/www/src/views/starter/installation.js b/www/src/views/starter/installation.js
@@ -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