Skip to content

Commit c8b966e

Browse files
timothyisMatthew Sweeney
timothyis
authored and
Matthew Sweeney
committed
Add deploy banner (#1438)
* Add deploy banner to guides * Extra work * Remove duplicate noreferrer * Fix links * Fix link imports * Fix errors * Improve deploy banner * Fix cards * Fix note font-size * Fix spacing * Hint -> Note
1 parent 5ed8f87 commit c8b966e

File tree

143 files changed

+1176
-1340
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

143 files changed

+1176
-1340
lines changed

‎CONTRIBUTING.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ To make the creation of documentation and guides as simple as possible, we have
211211

212212
You can find multiple examples in each page of how to import and use these components, below is an example import statement:
213213

214-
`import { GenericLink } from '~/components/text/link'`
214+
`import Link from '~/components/text/link'`
215215

216216
We believe that these components should be enough to cover usage in nearly all situations, however, if you feel that a new component should be added then please do so in a separate pull request, stating clearly your reasons for adding it.
217217

‎components/api/section.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import HR from '~/components/text/hr'
77
import { UL, LI } from '../text/list'
88
import { H1, H2, H3, H4, P } from '../text'
99
import { InlineCode, Code } from '../text/code'
10-
import { GenericLink } from '../text/link'
10+
import Link from '../text/link'
1111

1212
class DocH2 extends React.PureComponent {
1313
render() {
@@ -87,7 +87,7 @@ export const components = {
8787
h4: DocH4,
8888
code: Code,
8989
inlineCode: InlineCode,
90-
a: GenericLink,
90+
a: Link,
9191
blockquote: Quote,
9292
hr: HR
9393
}

‎components/buttons/deploy.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Button from './button'
44
export default function DeployButton({ url }) {
55
return (
66
<div className="deploy-button">
7-
<a href={url}>
7+
<a href={url} target="_blank" rel="noopener">
88
<Button type="success" icon={<Logo height={16} width={16} />}>
99
Deploy
1010
</Button>
@@ -16,6 +16,7 @@ export default function DeployButton({ url }) {
1616
1717
.deploy-button :global(.button) {
1818
padding: 0;
19+
min-width: 124px;
1920
}
2021
2122
.deploy-button :global(.button:hover) {

‎components/card/card.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import cn from 'classnames'
22
import { Component } from 'react'
3-
import { GenericLink } from '~/components/text/link'
3+
import NextLink from 'next/link'
44
import Text, { H4 } from '~/components/text'
55

66
export default class Card extends Component {
@@ -9,10 +9,12 @@ export default class Card extends Component {
99

1010
return (
1111
<div className={cn('card', className)} {...props}>
12-
<GenericLink href={href} as={as}>
13-
{title && <H4>{title}</H4>}
14-
<Text small>{children}</Text>
15-
</GenericLink>
12+
<NextLink href={href} as={as}>
13+
<a>
14+
{title && <H4>{title}</H4>}
15+
<Text small>{children}</Text>
16+
</a>
17+
</NextLink>
1618

1719
<style jsx>{`
1820
.card {

‎components/deploy-banner/index.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Note from '~/components/text/note'
2+
import { DeployButton } from '~/components/buttons'
3+
import Link from '~/components/text/link'
4+
5+
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+
10+
return (
11+
<div className="deploy-banner">
12+
<Note label={false}>
13+
<span>
14+
Live demo:{' '}
15+
<Link color href={demo}>
16+
{demo}
17+
</Link>
18+
</span>
19+
<DeployButton url={deployUrl} />
20+
</Note>
21+
<style jsx>{`
22+
.deploy-banner {
23+
margin-bottom: 32px;
24+
}
25+
26+
.deploy-banner :global(.note) {
27+
display: flex;
28+
width: 100%;
29+
align-items: center;
30+
justify-content: space-between;
31+
font-size: 16px;
32+
padding-top: 8px;
33+
padding-bottom: 8px;
34+
}
35+
36+
@media screen and (max-width: 600px) {
37+
.deploy-banner :global(.note) {
38+
flex-direction: column;
39+
align-items: flex-start;
40+
padding-top: 16px;
41+
padding-bottom: 20px;
42+
}
43+
44+
.deploy-banner span {
45+
margin-bottom: 16px;
46+
}
47+
}
48+
`}</style>
49+
</div>
50+
)
51+
}

‎components/docs/case-study-card.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { memo } from 'react'
2-
import { AnchorLink } from '~/components/text/link'
2+
import Link from '~/components/text/link'
33
import { P } from '~/components/text'
44

55
function CaseStudyCard({ icon, description }) {
@@ -8,7 +8,7 @@ function CaseStudyCard({ icon, description }) {
88
<div className="case-study-card-container">
99
<Icon />
1010
<P>{description}</P>
11-
<AnchorLink>Read case study</AnchorLink>
11+
<Link href="#">Read case study</Link>
1212
<style jsx>{`
1313
.case-study-card-container {
1414
display: flex;

‎components/footer/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { memo } from 'react'
2-
import Link from 'next/link'
2+
import Link from '~/components/text/link'
33

44
// Components
55
import FullLogo from '../logos/full'

‎components/icons/external-link.js

+3-18
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,5 @@
1-
import PropTypes from 'prop-types'
2-
import React from 'react'
1+
import withIcon from '~/lib/with-icon'
32

4-
const ExternalLink = (props, { darkBg = false }) => (
5-
<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg">
6-
<g stroke={darkBg ? '#fff' : '#000'} fill="none" fillRule="evenodd">
7-
<path d="M6.2 6.7l5-5.3" strokeLinecap="square" />
8-
<g strokeLinecap="square">
9-
<path d="M7.9.9h4M11.9.9v4" />
10-
</g>
11-
<path d="M9.9 7.4v2.5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5c0-1.1.9-2 2-2h2.5" />
12-
</g>
13-
</svg>
14-
)
3+
const ExternalLink = `<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/>`
154

16-
ExternalLink.contextTypes = {
17-
darkBg: PropTypes.bool
18-
}
19-
20-
export default ExternalLink
5+
export default withIcon(ExternalLink)

‎components/icons/link.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import withIcon from '~/lib/with-icon'
2+
3+
const Link = `<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>`
4+
5+
export default withIcon(Link)

‎components/layout/content-footer.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { GenericLink } from '~/components/text/link'
1+
import Link from '~/components/text/link'
22
import formatDate from 'date-fns/format'
33

44
const ContentFooter = ({ lastEdited, editUrl }) => (
55
<footer>
66
<span>Last Edited on {formatDate(lastEdited, 'MMMM Do YYYY')}</span>
7-
<GenericLink href={`https://github.com/zeit/docs/edit/master/${editUrl}`}>
7+
<Link href={`https://github.com/zeit/docs/edit/master/${editUrl}`}>
88
Edit This Page on GitHub
9-
</GenericLink>
9+
</Link>
1010

1111
<style jsx>{`
1212
footer {

‎components/layout/docs.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import VersionSwitcher from '~/components/layout/version-switcher'
1313
import Content from '~/components/layout/content'
1414
import ContentFooter from '~/components/layout/content-footer'
1515
import DocsNavbarDesktop from '~/components/layout/navbar/desktop'
16-
import { GenericLink } from '~/components/text/link'
16+
import Link from '~/components/text/link'
1717
import components from '~/lib/mdx-components'
1818
import { H1, H2, H3, H4 } from '~/components/text'
1919
import HR from '~/components/text/hr'
@@ -148,13 +148,11 @@ class withDoc extends React.Component {
148148
<Note>
149149
This documentation is for <b>version 1</b> of the Now
150150
platform. For the latest features, please see{' '}
151-
<GenericLink href="/docs/v2">
152-
the version 2 documentation
153-
</GenericLink>
154-
. If you have yet to upgrade, see the{' '}
155-
<GenericLink href="/guides/migrate-to-zeit-now/">
151+
<Link href="/docs/v2">the version 2 documentation</Link>. If
152+
you have yet to upgrade, see the{' '}
153+
<Link href="/guides/migrate-to-zeit-now/">
156154
upgrade guide
157-
</GenericLink>
155+
</Link>
158156
.
159157
</Note>
160158
)}

‎components/layout/guide.js

+4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { H1, H2, H3, H4, H5, P } from '~/components/text'
1313
import { Avatar } from '~/components/avatar'
1414
import HR from '~/components/text/hr'
1515
import { FooterFeedback } from '~/components/feedback-input'
16+
import DeployBanner from '~/components/deploy-banner'
1617

1718
const DocH2 = ({ children }) => (
1819
<>
@@ -93,6 +94,9 @@ class Guide extends React.PureComponent {
9394

9495
<Wrapper width="768">
9596
<section className="guide content">
97+
{meta.example && meta.demo && (
98+
<DeployBanner example={meta.example} demo={meta.demo} />
99+
)}
96100
{this.props.children}
97101
<NonAmpOnly>
98102
<>

‎components/layout/header/menu-popover.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { Component } from 'react'
2-
import Link from 'next/link'
32

43
import * as PopOver from '~/components/popover'
54
import PopOverLink from '~/components/popover/popover-link'
65
import Badge from './badge'
76

8-
import { GenericLink } from '~/components/text/link'
7+
import Link from '~/components/text/link'
98

109
export class MenuPopOver extends Component {
1110
state = { isOpen: false }
@@ -78,7 +77,7 @@ export class MenuPopOver extends Component {
7877
fullWidth
7978
active={section === item.url}
8079
>
81-
<GenericLink href={item.url} target={null}>
80+
<Link href={item.url} target={null}>
8281
{item.title}
8382
{item.isHot && (
8483
<>
@@ -90,7 +89,7 @@ export class MenuPopOver extends Component {
9089
/>
9190
</>
9291
)}
93-
</GenericLink>
92+
</Link>
9493
</PopOver.Item>
9594
)
9695
})}
@@ -114,9 +113,9 @@ export class MenuPopOver extends Component {
114113
fullWidth
115114
active={section === item.url}
116115
>
117-
<GenericLink href={item.url} target={null}>
116+
<Link href={item.url} target={null}>
118117
{item.title}
119-
</GenericLink>
118+
</Link>
120119
</PopOver.Item>
121120
)
122121
})}

‎components/layout/index/entry-index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Link from 'next/link'
1+
import NextLink from '~/components/text/link'
22
import cns from 'classnames'
33
import { Component } from 'react'
44
import * as metrics from '~/lib/metrics'
@@ -65,14 +65,14 @@ class EntryIndex extends Component {
6565
{entry.title}
6666
</a>
6767
) : (
68-
<Link href={href} as={as}>
68+
<NextLink href={href} as={as}>
6969
<a
7070
className={cns({ active: isEntryActive(this.props) })}
7171
onClick={this.handleClick}
7272
>
7373
{entry.title}
7474
</a>
75-
</Link>
75+
</NextLink>
7676
)}
7777
<style jsx>{`
7878
a {

‎components/layout/index/section-index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import cns from 'classnames'
2-
import Link from 'next/link'
2+
import NextLink from 'next/link'
33
import { Component, Fragment } from 'react'
44
import EntryIndex from './entry-index'
55
import * as metrics from '~/lib/metrics'
@@ -83,15 +83,15 @@ class SectionIndex extends Component {
8383
{section.title}
8484
</a>
8585
) : (
86-
<Link href={href} as={as}>
86+
<NextLink href={href} as={as}>
8787
<a
8888
className={cns('title', { active })}
8989
onClick={this.handleClick}
9090
ref={this.handleRef}
9191
>
9292
{section.title}
9393
</a>
94-
</Link>
94+
</NextLink>
9595
)}
9696
</Fragment>
9797
) : (

‎components/layout/navbar/desktop.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from 'react'
2-
import Link from 'next/link'
2+
import NextLink from 'next/link'
33
import cn from 'classnames'
44
import qs from 'querystring'
55
import { parse } from 'url'
@@ -311,9 +311,9 @@ export class NavLink extends React.Component {
311311
{info.name}
312312
</a>
313313
) : (
314-
<Link href={info.href} as={info.as || info.href}>
314+
<NextLink href={info.href} as={info.as || info.href}>
315315
<a onClick={onClick}>{info.name}</a>
316-
</Link>
316+
</NextLink>
317317
)}
318318
<style jsx>{`
319319
div.selected {

‎components/layout/navbar/toggle.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react'
22
import { withRouter } from 'next/router'
3-
import Link from 'next/link'
3+
import NextLink from 'next/link'
44

55
const ActivePageButton = withRouter(({ children, router, href }) => {
66
return (
7-
<Link href={href}>
7+
<NextLink href={href}>
88
<span className="active-button">
99
{children}
1010
<style jsx>{`
@@ -16,7 +16,7 @@ const ActivePageButton = withRouter(({ children, router, href }) => {
1616
}
1717
`}</style>
1818
</span>
19-
</Link>
19+
</NextLink>
2020
)
2121
})
2222

‎components/navigation/navigation-item.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { GenericLink } from '~/components/text/link'
1+
import Link from '~/components/text/link'
22
import cn from 'classnames'
33

44
const NavigationItem = ({
@@ -13,9 +13,9 @@ const NavigationItem = ({
1313
{customLink ? (
1414
children
1515
) : (
16-
<GenericLink href={href} as={href} onClick={onClick}>
16+
<Link href={href} as={href} onClick={onClick}>
1717
{children}
18-
</GenericLink>
18+
</Link>
1919
)}
2020
<style jsx>{`
2121
.navigation-item,

0 commit comments

Comments
 (0)