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

Author: timothyis

CONTRIBUTING.md

@@ -211,7 +211,7 @@ To make the creation of documentation and guides as simple as possible, we have
 
 You can find multiple examples in each page of how to import and use these components, below is an example import statement:
 
-`import { GenericLink } from '~/components/text/link'`
+`import Link from '~/components/text/link'`
 
 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.
 

components/api/section.js

@@ -7,7 +7,7 @@ import HR from '~/components/text/hr'
 import { UL, LI } from '../text/list'
 import { H1, H2, H3, H4, P } from '../text'
 import { InlineCode, Code } from '../text/code'
-import { GenericLink } from '../text/link'
+import Link from '../text/link'
 
 class DocH2 extends React.PureComponent {
   render() {
@@ -87,7 +87,7 @@ export const components = {
   h4: DocH4,
   code: Code,
   inlineCode: InlineCode,
-  a: GenericLink,
+  a: Link,
   blockquote: Quote,
   hr: HR
 }

components/buttons/deploy.js

@@ -4,7 +4,7 @@ import Button from './button'
 export default function DeployButton({ url }) {
   return (
     <div className="deploy-button">
-      <a href={url}>
+      <a href={url} target="_blank" rel="noopener">
         <Button type="success" icon={<Logo height={16} width={16} />}>
           Deploy
         </Button>
@@ -16,6 +16,7 @@ export default function DeployButton({ url }) {
 
         .deploy-button :global(.button) {
           padding: 0;
+          min-width: 124px;
         }
 
         .deploy-button :global(.button:hover) {

components/card/card.js

@@ -1,6 +1,6 @@
 import cn from 'classnames'
 import { Component } from 'react'
-import { GenericLink } from '~/components/text/link'
+import NextLink from 'next/link'
 import Text, { H4 } from '~/components/text'
 
 export default class Card extends Component {
@@ -9,10 +9,12 @@ export default class Card extends Component {
 
     return (
       <div className={cn('card', className)} {...props}>
-        <GenericLink href={href} as={as}>
-          {title && <H4>{title}</H4>}
-          <Text small>{children}</Text>
-        </GenericLink>
+        <NextLink href={href} as={as}>
+          <a>
+            {title && <H4>{title}</H4>}
+            <Text small>{children}</Text>
+          </a>
+        </NextLink>
 
         <style jsx>{`
           .card {

components/deploy-banner/index.js

@@ -0,0 +1,51 @@
+import Note from '~/components/text/note'
+import { DeployButton } from '~/components/buttons'
+import Link from '~/components/text/link'
+
+export default function DeployBanner({ example, demo }) {
+  const deployUrl = example.includes('github.com/zeit/now-examples')
+    ? `https://zeit.co/new/project?template=${example}`
+    : `https://zeit.co/new/${example}`
+
+  return (
+    <div className="deploy-banner">
+      <Note label={false}>
+        <span>
+          Live demo:{' '}
+          <Link color href={demo}>
+            {demo}
+          </Link>
+        </span>
+        <DeployButton url={deployUrl} />
+      </Note>
+      <style jsx>{`
+        .deploy-banner {
+          margin-bottom: 32px;
+        }
+
+        .deploy-banner :global(.note) {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 16px;
+          padding-top: 8px;
+          padding-bottom: 8px;
+        }
+
+        @media screen and (max-width: 600px) {
+          .deploy-banner :global(.note) {
+            flex-direction: column;
+            align-items: flex-start;
+            padding-top: 16px;
+            padding-bottom: 20px;
+          }
+
+          .deploy-banner span {
+            margin-bottom: 16px;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}

components/docs/case-study-card.js

@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import { AnchorLink } from '~/components/text/link'
+import Link from '~/components/text/link'
 import { P } from '~/components/text'
 
 function CaseStudyCard({ icon, description }) {
@@ -8,7 +8,7 @@ function CaseStudyCard({ icon, description }) {
     <div className="case-study-card-container">
       <Icon />
       <P>{description}</P>
-      <AnchorLink>Read case study</AnchorLink>
+      <Link href="#">Read case study</Link>
       <style jsx>{`
         .case-study-card-container {
           display: flex;

components/footer/index.js

@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import Link from 'next/link'
+import Link from '~/components/text/link'
 
 // Components
 import FullLogo from '../logos/full'

components/icons/external-link.js

@@ -1,20 +1,5 @@
-import PropTypes from 'prop-types'
-import React from 'react'
+import withIcon from '~/lib/with-icon'
 
-const ExternalLink = (props, { darkBg = false }) => (
-  <svg width="13" height="13" xmlns="http://www.w3.org/2000/svg">
-    <g stroke={darkBg ? '#fff' : '#000'} fill="none" fillRule="evenodd">
-      <path d="M6.2 6.7l5-5.3" strokeLinecap="square" />
-      <g strokeLinecap="square">
-        <path d="M7.9.9h4M11.9.9v4" />
-      </g>
-      <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" />
-    </g>
-  </svg>
-)
+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"/>`
 
-ExternalLink.contextTypes = {
-  darkBg: PropTypes.bool
-}
-
-export default ExternalLink
+export default withIcon(ExternalLink)

components/icons/link.js

@@ -0,0 +1,5 @@
+import withIcon from '~/lib/with-icon'
+
+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"/>`
+
+export default withIcon(Link)

components/layout/content-footer.js

@@ -1,12 +1,12 @@
-import { GenericLink } from '~/components/text/link'
+import Link from '~/components/text/link'
 import formatDate from 'date-fns/format'
 
 const ContentFooter = ({ lastEdited, editUrl }) => (
   <footer>
     <span>Last Edited on {formatDate(lastEdited, 'MMMM Do YYYY')}</span>
-    <GenericLink href={`https://github.com/zeit/docs/edit/master/${editUrl}`}>
+    <Link href={`https://github.com/zeit/docs/edit/master/${editUrl}`}>
       Edit This Page on GitHub
-    </GenericLink>
+    </Link>
 
     <style jsx>{`
       footer {