Skip to content

Commit c7bf80e

Browse files
timothyiskodiakhq[bot]
timothyis
authored and
kodiakhq[bot]
committed
Update quickstart card design (#1448)
* (WIP) update quickstart card design * Update design
1 parent 44e55c9 commit c7bf80e

File tree

6 files changed

+98
-73
lines changed

6 files changed

+98
-73
lines changed

‎components/buttons/deploy.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@ import Logo from '~/components/icons/logo-light'
22
import Button from './button'
33

44
export default function DeployButton({ url }) {
5+
const deployUrl = url.includes('github.com/zeit/now-examples')
6+
? `https://zeit.co/new/project?template=${url}`
7+
: `https://zeit.co/new/${url}`
8+
59
return (
610
<div className="deploy-button">
7-
<a href={url} target="_blank" rel="noopener">
11+
<a href={deployUrl} target="_blank" rel="noopener">
812
<Button type="success" icon={<Logo height={16} width={16} />}>
913
Deploy
1014
</Button>

‎components/deploy-banner/index.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@ import { DeployButton } from '~/components/buttons'
33
import Link from '~/components/text/link'
44

55
export default function DeployBanner({ example, demo }) {
6-
const deployUrl = example.includes('github.com/zeit/now-examples')
7-
? `https://zeit.co/new/project?template=${example}`
8-
: `https://zeit.co/new/${example}`
9-
106
return (
117
<div className="deploy-banner">
128
<Note label={false}>
@@ -16,7 +12,7 @@ export default function DeployBanner({ example, demo }) {
1612
{demo}
1713
</Link>
1814
</span>
19-
<DeployButton url={deployUrl} />
15+
<DeployButton url={example} />
2016
</Note>
2117
<style jsx>{`
2218
.deploy-banner {

‎components/quickstarts/quickstart.js

+42-17
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useAmp } from 'next/amp'
2-
import { H4 } from '~/components/text'
3-
import { DeployButton } from '~/components/buttons'
2+
import { H5 } from '~/components/text'
3+
import { DeployButton, Button } from '~/components/buttons'
44
import Link from '~/components/text/link'
55

6-
export default function({ quickstart, icons, href, deployUrl }) {
6+
export default function({ quickstart, icons, href, example, demo }) {
77
const isAmp = useAmp()
88

99
const Icon = ({ source }) =>
@@ -41,10 +41,17 @@ export default function({ quickstart, icons, href, deployUrl }) {
4141
<Icon source={icons} />
4242
)}
4343
</span>
44-
<H4>{quickstart}</H4>
44+
<H5>{quickstart}</H5>
4545
<span className="note">Read the guide</span>
4646
</Link>
47-
{deployUrl && <DeployButton url={deployUrl} />}
47+
<div className="buttons">
48+
{example && <DeployButton url={example} />}
49+
{demo && (
50+
<a href={demo} target="_blank">
51+
<Button type="secondary">Live Example</Button>
52+
</a>
53+
)}
54+
</div>
4855

4956
<style jsx>{`
5057
.quickstart {
@@ -67,10 +74,6 @@ export default function({ quickstart, icons, href, deployUrl }) {
6774
display: block;
6875
}
6976
70-
.quickstart :global(.deploy-button) {
71-
margin-top: 24px;
72-
}
73-
7477
.quickstart :global(figure) {
7578
margin: 0;
7679
}
@@ -81,14 +84,14 @@ export default function({ quickstart, icons, href, deployUrl }) {
8184
height: 48px;
8285
}
8386
84-
.quickstart :global(h4) {
85-
margin-bottom: 8px;
86-
margin-top: 24px;
87+
.quickstart :global(h5) {
88+
margin-bottom: 4px;
89+
margin-top: 16px;
8790
transition: color 0.1s ease;
8891
color: var(--accents-7);
8992
}
9093
91-
.quickstart :global(a:hover h4) {
94+
.quickstart :global(a:hover h5) {
9295
color: var(--geist-foreground);
9396
}
9497
@@ -130,10 +133,32 @@ export default function({ quickstart, icons, href, deployUrl }) {
130133
color: var(--accents-7);
131134
}
132135
133-
@media screen and (max-width: 600px) {
134-
.quickstart :global(.deploy-button .button) {
135-
width: 100%;
136-
}
136+
.quickstart .buttons {
137+
display: flex;
138+
justify-content: space-between;
139+
margin-top: 24px;
140+
}
141+
142+
.quickstart .buttons :global(> *) {
143+
flex: 1 1 50%;
144+
}
145+
146+
.quickstart .buttons :global(> *:not(:last-child)) {
147+
margin-right: 8px;
148+
}
149+
150+
.quickstart .buttons :global(> *:not(:first-child)) {
151+
margin-left: 8px;
152+
}
153+
154+
.quickstart .buttons :global(.button) {
155+
width: 100%;
156+
min-width: 104px;
157+
padding: 0;
158+
}
159+
160+
.quickstart .buttons a {
161+
text-decoration: none;
137162
}
138163
`}</style>
139164
</div>

‎components/text/link.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
11
import React from 'react'
22
import NextLink from 'next/link'
33
import PropTypes from 'prop-types'
4+
import canPrefetch from '~/lib/can-prefetch'
45

56
import IconAnchor from '~/components/icons/link'
67
import IconExternal from '~/components/icons/external-link'
78
import CircledQuestion from '~/components/icons/circled-question'
89

9-
function canPrefetch(href) {
10-
if (!href) {
11-
return false
12-
}
13-
14-
return (
15-
href.startsWith('/docs') &&
16-
href.startsWith('/api') &&
17-
href.startsWith('/error') &&
18-
href.startsWith('/guides')
19-
)
20-
}
21-
2210
const External = props => {
2311
const {
2412
href,

‎lib/can-prefetch.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function canPrefetch(href) {
2+
if (!href) {
3+
return false
4+
}
5+
6+
return (
7+
href.startsWith('/docs') &&
8+
href.startsWith('/api') &&
9+
href.startsWith('/error') &&
10+
href.startsWith('/guides')
11+
)
12+
}

‎pages/docs/v2/quickstarts.mdx

+37-37
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,29 @@ export const quickstarts = [
66
name: 'Next.js',
77
href: '/guides/deploying-nextjs-with-now',
88
icons: `${process.env.ASSETS}/topics/icons/next.svg`,
9-
deployUrl:
10-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/nextjs'
9+
example: 'nextjs',
10+
demo: 'https://nextjs.now-examples.now.sh'
1111
},
1212
{
1313
name: 'Gatsby',
1414
href: '/guides/deploying-gatsby-with-now',
1515
icons: `${process.env.ASSETS}/topics/icons/gatsby.svg`,
16-
deployUrl:
17-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/gatsby'
16+
example: 'gatsby',
17+
demo: 'https://gatsby.now-examples.now.sh'
1818
},
1919
{
2020
name: 'Vue.js',
2121
href: '/guides/deploying-vuejs-to-now/',
2222
icons: `${process.env.ASSETS}/topics/icons/vue.svg`,
23-
deployUrl:
24-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/vue'
23+
example: 'vue',
24+
demo: 'https://vue.now-examples.now.sh'
2525
},
2626
{
2727
name: 'Svelte',
2828
href: '/guides/deploying-svelte-with-zeit-now',
2929
icons: `${process.env.ASSETS}/topics/icons/svelte.svg`,
30-
deployUrl:
31-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/svelte'
30+
example: 'svelte',
31+
demo: 'https://svelte.now-examples.now.sh'
3232
},
3333
{
3434
name: 'Create React App',
@@ -37,36 +37,36 @@ export const quickstarts = [
3737
src: `${process.env.ASSETS}/topics/icons/react.svg`,
3838
color: '#20232a'
3939
},
40-
deployUrl:
41-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/create-react-app'
40+
example: 'create-react-app',
41+
demo: 'https://create-react-app.now-examples.now.sh'
4242
},
4343
{
4444
name: 'Angular',
4545
href: '/guides/deploying-angular-with-now/',
4646
icons: `${process.env.ASSETS}/topics/icons/angular.svg`,
47-
deployUrl:
48-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/angular'
47+
example: 'angular',
48+
demo: 'https://angular.now-examples.now.sh'
4949
},
5050
{
5151
name: 'Charge',
5252
href: '/guides/deploying-charge-with-now/',
5353
icons: `${process.env.ASSETS}/topics/icons/charge.svg`,
54-
deployUrl:
55-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/charge'
54+
example: 'charge',
55+
demo: 'https://charge.now-examples.now.sh'
5656
},
5757
{
5858
name: 'Aurelia',
5959
href: '/guides/deploying-aurelia-with-zeit-now',
6060
icons: `${process.env.ASSETS}/topics/icons/aurelia.svg`,
61-
deployUrl:
62-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/aurelia'
61+
example: 'aurelia',
62+
demo: 'https://aurelia.now-examples.now.sh'
6363
},
6464
{
6565
name: 'Ember.js',
6666
href: '/guides/deploying-ember-with-zeit-now',
6767
icons: `${process.env.ASSETS}/topics/icons/ember.svg`,
68-
deployUrl:
69-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/ember'
68+
example: 'ember',
69+
demo: 'https://ember.now-examples.now.sh'
7070
},
7171
{
7272
name: 'Hugo',
@@ -75,22 +75,22 @@ export const quickstarts = [
7575
src: `${process.env.ASSETS}/topics/icons/hugo.svg`,
7676
color: '#0a1921'
7777
},
78-
deployUrl:
79-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/hugo'
78+
example: 'hugo',
79+
demo: 'https://hugo.now-examples.now.sh'
8080
},
8181
{
8282
name: 'Preact',
8383
href: '/guides/deploying-preact-with-zeit-now',
8484
icons: `${process.env.ASSETS}/topics/icons/preact.svg`,
85-
deployUrl:
86-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/preact'
85+
example: 'preact',
86+
demo: 'https://preact.now-examples.now.sh'
8787
},
8888
{
8989
name: 'VuePress',
9090
href: '/guides/deploying-vuepress-to-now/',
9191
icons: `${process.env.ASSETS}/topics/icons/vue.svg`,
92-
deployUrl:
93-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/vuepress'
92+
example: 'vuepress',
93+
demo: 'https://vuepress.now-examples.now.sh'
9494
},
9595
{
9696
name: 'Docusaurus',
@@ -99,8 +99,8 @@ export const quickstarts = [
9999
src: `${process.env.ASSETS}/topics/icons/docusaurus.svg`,
100100
color: '#2b3137'
101101
},
102-
deployUrl:
103-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/docusaurus'
102+
example: 'docusaurus',
103+
demo: 'https://docusaurus.now-examples.now.sh'
104104
},
105105
{
106106
name: 'Gridsome',
@@ -109,36 +109,36 @@ export const quickstarts = [
109109
src: `${process.env.ASSETS}/topics/icons/gridsome.svg`,
110110
color: '#0d2538'
111111
},
112-
deployUrl:
113-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/gridsome'
112+
example: 'gridsome',
113+
demo: 'https://gridsome.now-examples.now.sh'
114114
},
115115
{
116116
name: 'Nuxt.js',
117117
href: '/guides/deploying-nuxtjs-with-zeit-now',
118118
icons: `${process.env.ASSETS}/topics/icons/nuxt.svg`,
119-
deployUrl:
120-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/nuxtjs'
119+
example: 'nuxtjs',
120+
demo: 'https://nuxtjs.now-examples.now.sh'
121121
},
122122
{
123123
name: 'MDX Deck',
124124
href: '/guides/deploying-mdx-deck-with-zeit-now',
125125
icons: `${process.env.ASSETS}/topics/icons/mdx-deck.svg`,
126-
deployUrl:
127-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/mdx-deck'
126+
example: 'mdx-deck',
127+
demo: 'https://mdx-deck.now-examples.now.sh'
128128
},
129129
{
130130
name: 'Eleventy',
131131
href: '/guides/deploying-eleventy-with-zeit-now',
132132
icons: `${process.env.ASSETS}/topics/icons/eleventy.svg`,
133-
deployUrl:
134-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/eleventy'
133+
example: 'eleventy',
134+
demo: 'https://eleventy.now-examples.now.sh'
135135
},
136136
{
137137
name: 'Hexo',
138138
href: '/guides/deploying-hexo-with-zeit-now',
139139
icons: `${process.env.ASSETS}/topics/icons/hexo.svg`,
140-
deployUrl:
141-
'https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/hexo'
140+
example: 'hexo',
141+
demo: 'https://hexo.now-examples.now.sh'
142142
}
143143
]
144144

@@ -147,7 +147,7 @@ export const meta = {
147147
description:
148148
'A collection of technologies to quickstart your project with, deployed instantly with ZEIT now.',
149149
editUrl: 'pages/docs/v2/quickstarts.mdx',
150-
lastEdited: '2019-11-04T17:24:55.000Z'
150+
lastEdited: '2019-11-07T17:31:43.000Z'
151151
}
152152

153153
Quickstarts let you get started quickly. The following quickstarts are paired with guides and a deploy button, based on [ZEIT Now examples](https://github.com/zeit/now-examples), to help you get going with your project as fast as possible.

0 commit comments

Comments
 (0)