34 | {video ? (
35 |
36 | ) : (
37 | 
38 | )}
39 |
40 |
41 | {caption && {caption}
} 42 |{`{
28 | "error": {
29 | "code": "not_found",
30 | "message": "OAuth client doesn't not found: CLIENT_ID"
31 | }
32 | }`}}
33 | `
34 | ]
35 | ]}
36 | />
37 | )
38 | }
39 |
40 | export default immutable(OAuth2)
41 |
--------------------------------------------------------------------------------
/license.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Zeit Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/components/api/deprecated.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default class Deprecated extends React.PureComponent {
4 | render() {
5 | const { hash, children } = this.props
6 | const link = `/api${hash}`
7 |
8 | return (
9 |
10 | {children}
11 |
41 | )
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/scripts/last-edited.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path')
2 | const fs = require('fs')
3 | const glob = require('glob')
4 | const { promisify } = require('util')
5 | const logger = console
6 |
7 | const getStats = promisify(fs.stat)
8 | const writeFile = promisify(fs.writeFile)
9 | const globPromise = promisify(glob)
10 |
11 | async function getFileStats() {
12 | const files = await globPromise(resolve('./pages/docs/**/*.js'))
13 | const stats = await Promise.all(
14 | files
15 | .map(file => file.split('/pages/'))
16 | .map(file => file[1])
17 | .map(file => `pages/${file}`)
18 | .map(file => Promise.all([getStats(file), Promise.resolve(file)]))
19 | )
20 |
21 | return stats
22 | .map(([stat, filePath]) => [stat.mtime, filePath])
23 | .reduce(
24 | (results, [stat, filePath]) => ({ ...results, [filePath]: stat }),
25 | {}
26 | )
27 | }
28 |
29 | async function main(fileStats) {
30 | const filePath = resolve('./lib/data/last-edited.json')
31 | await writeFile(filePath, JSON.stringify(fileStats, null, 2), 'utf8')
32 | logger.log('Last edited file updated')
33 | }
34 |
35 | getFileStats()
36 | .then(main)
37 | .catch(error => logger.error(error))
38 |
--------------------------------------------------------------------------------
/components/icons/github.js:
--------------------------------------------------------------------------------
1 | const GitHub = ({ light = false, height, width }) => (
2 |
18 | )
19 |
20 | export default GitHub
21 |
--------------------------------------------------------------------------------
/deploy-server/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const fileUpload = require('express-fileupload')
3 | const UUID = require('uuid')
4 | const deploy = require('./deploy')
5 |
6 | const logger = console
7 | const port = process.env.PORT || 8070
8 | const app = express()
9 | app.use(fileUpload())
10 |
11 | app.post('/deploy/:pullRequestId', (req, res) => {
12 | if (!req.files || !req.files.app) {
13 | return res.status(400).send('Upload a file with the name "app"')
14 | }
15 |
16 | const { pullRequestId } = req.params
17 |
18 | // Use the mv() method to place the file somewhere on your server
19 | const tarballName = UUID.v4()
20 | logger.log(`Deploying pull request: ${pullRequestId}`)
21 |
22 | req.files.app.mv(`/tmp/${tarballName}.tar.gz`, err => {
23 | if (err) {
24 | return res.status(500).send(err)
25 | }
26 |
27 | deploy(pullRequestId, tarballName)
28 | .then(() => {
29 | res.send('SUCCESS')
30 | })
31 | .catch(error => {
32 | logger.error(error.stack)
33 | return res.status(500).send(error)
34 | })
35 | })
36 | })
37 |
38 | app.listen(port, () => {
39 | logger.log(`Deploy server started in port: ${port}\n`)
40 | })
41 |
--------------------------------------------------------------------------------
/lib/logout.js:
--------------------------------------------------------------------------------
1 | // Packages
2 | import NProgress from 'nprogress'
3 | import Cookies from 'js-cookie'
4 |
5 | // Helpers
6 | import { getToken } from './authenticate'
7 | import fetchAPI from './fetch-api'
8 | import { API_USER_TOKENS } from './api-endpoints'
9 |
10 | export default async () => {
11 | const token = getToken()
12 | NProgress.start()
13 | try {
14 | const { tokens } = await fetchAPI(API_USER_TOKENS, token, {
15 | throwOnHTTPError: true
16 | })
17 | const tokenObj = tokens.find(t => token === t.token)
18 | await fetchAPI(
19 | `${API_USER_TOKENS}/${encodeURIComponent(tokenObj.id)}`,
20 | token,
21 | {
22 | method: 'DELETE',
23 | throwOnHTTPError: true
24 | }
25 | )
26 | Cookies.remove('token')
27 | } catch (err) {
28 | // eslint-disable-next-line no-console
29 | console.error(err.stack)
30 | if (err.status === 403) {
31 | // we consider it already logged out
32 | // if the user doesn't have access to
33 | // own tokens
34 | Cookies.remove('token')
35 | return
36 | }
37 | if (err.code == null) {
38 | err.code = 'UNKNOWN'
39 | }
40 | throw err
41 | } finally {
42 | NProgress.done()
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/components/api/sections/api-basics/errors.js:
--------------------------------------------------------------------------------
1 | import markdown from 'markdown-in-js'
2 | import React from 'react'
3 | import Section, { components } from '../../section'
4 | import { Code } from '../../../text/code'
5 | import { InternalLink } from '../../../text/link'
6 | import immutable from '../../../../lib/immutable-component'
7 |
8 | function Errors() {
9 | return (
10 | DEPRECATED
12 |
13 |
40 | {`{
26 | "error": {
27 | "code": "error_code",
28 | "message": "An english description of the error that just occurred"
29 | }
30 | }`}}
31 | `,
32 | ]
33 | ]
34 | }
35 | />
36 | )
37 | }
38 |
39 | export default immutable(Errors)
40 |
--------------------------------------------------------------------------------
/scripts/deploy.js:
--------------------------------------------------------------------------------
1 | /*
2 | Deploy to now and get the URL
3 | Deploy to now via the token
4 | Add a comment to the PR
5 | */
6 |
7 | const shell = require('shelljs')
8 | const logger = console
9 |
10 | const { CI_PULL_REQUEST } = process.env
11 |
12 | async function run() {
13 | if (!CI_PULL_REQUEST || CI_PULL_REQUEST === '') return
14 |
15 | const [, PULL_REQUEST_ID] = CI_PULL_REQUEST.match(/\/([0-9]*)$/)
16 |
17 | // Build the app
18 | const build = shell.exec(`npm run build`)
19 | if (build.code !== 0) {
20 | throw new Error(build.stderr)
21 | }
22 |
23 | // Export the app
24 | const exportApp = shell.exec(`npm run export`)
25 | if (exportApp.code !== 0) {
26 | throw new Error(exportApp.stderr)
27 | }
28 |
29 | // Create a tarball version of the app
30 | const tarball = shell.exec(`tar czf app.tar.gz out`)
31 | if (tarball.code !== 0) {
32 | throw new Error(tarball.stderr)
33 | }
34 |
35 | // Upload the app to the deploy server
36 | const url = `https://docs-deploy-server.zeit.sh/deploy/${PULL_REQUEST_ID}`
37 | const upload = shell.exec(`curl -F "app=@app.tar.gz" ${url}`)
38 | if (upload.code !== 0) {
39 | throw new Error(upload.stderr)
40 | }
41 |
42 | if (upload.stdout !== 'SUCCESS') {
43 | throw new Error(`${upload.stdout}\n${upload.stdout}`)
44 | }
45 | }
46 |
47 | run().catch(error => {
48 | logger.error(error.stack)
49 | process.exit(1)
50 | })
51 |
--------------------------------------------------------------------------------
/components/table.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types'
2 | // Packages
3 | import React from 'react'
4 |
5 | const Table = ({ children }) => (
6 | this.register(r)}
37 | onMouseEnter={() => this.freezeScrolling(true)}
38 | onMouseLeave={() => this.freezeScrolling(false)}
39 | >
40 | {this.props.children}
41 |
46 |
47 | )
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/lib/authenticate.js:
--------------------------------------------------------------------------------
1 | // Helpers
2 | import fetchAPI from './fetch-api'
3 | import { API_USER } from './api-endpoints'
4 |
5 | const isServer = typeof window === 'undefined'
6 |
7 | export default (async function authenticate({ req }) {
8 | const token = getToken({ req })
9 | if (!token) return {}
10 |
11 | if (!isServer) {
12 | // Sometimes, user in the client side global cache can be undefined.
13 | // So, we need to get the user again and assign the user to the global cache.
14 | if (!window.__user) {
15 | const { user } = await getUser(token)
16 | window.__user = user
17 | }
18 |
19 | return { user: window.__user, token }
20 | }
21 |
22 | const user = await getUser(token)
23 | return { ...user, token }
24 | })
25 |
26 | export function getToken({ req } = {}) {
27 | if (req) {
28 | const parseCookie = require('cookie').parse
29 | const { cookie } = req.headers
30 | if (!cookie) return
31 |
32 | const { token } = parseCookie(cookie)
33 | return token
34 | } else {
35 | const Cookies = require('js-cookie')
36 | const { token } = Cookies.get()
37 | return token
38 | }
39 | }
40 |
41 | export async function getUser(token) {
42 | let res
43 |
44 | try {
45 | res = await fetchAPI(API_USER, token, {
46 | throwOnHTTPError: true
47 | })
48 | } catch (err) {
49 | if (err.status && 403 === err.status) {
50 | return {}
51 | }
52 | throw err
53 | }
54 |
55 | return res
56 | }
57 |
--------------------------------------------------------------------------------
/components/click-outside.js:
--------------------------------------------------------------------------------
1 | // Packages
2 | import { Component } from 'react'
3 | import PropTypes from 'prop-types'
4 |
5 | export default class ClickOutside extends Component {
6 | static propTypes = {
7 | active: PropTypes.bool,
8 | onClick: PropTypes.func,
9 | render: PropTypes.func
10 | }
11 |
12 | static defaultProps = {
13 | active: true
14 | }
15 |
16 | constructor(props) {
17 | super(props)
18 | this.handleRef = this.handleRef.bind(this)
19 | this.handleClick = this.handleClick.bind(this)
20 | }
21 |
22 | componentDidMount() {
23 | if (this.props.active) {
24 | document.addEventListener('click', this.handleClick)
25 | }
26 | }
27 |
28 | componentWillReceiveProps(nextProps) {
29 | if (!this.props.active && nextProps.active) {
30 | document.addEventListener('click', this.handleClick)
31 | }
32 |
33 | if (this.props.active && !nextProps.active) {
34 | document.removeEventListener('click', this.handleClick)
35 | }
36 | }
37 |
38 | componentWillUnmount() {
39 | if (this.props.active) {
40 | document.removeEventListener('click', this.handleClick)
41 | }
42 | }
43 |
44 | handleRef(element) {
45 | this.element = element
46 | }
47 |
48 | handleClick(event) {
49 | if (!this.element.contains(event.target)) {
50 | this.props.onClick(event)
51 | }
52 | }
53 |
54 | render() {
55 | return this.props.render({
56 | innerRef: this.handleRef
57 | })
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/components/api/sections/api-basics/authentication.js:
--------------------------------------------------------------------------------
1 | import markdown from 'markdown-in-js'
2 | import Section, { components } from '../../section'
3 | import { Code } from '../../../text/code'
4 | import { ExternalLink } from '../../../text/link'
5 | import pure from '../../../../lib/pure-component'
6 |
7 | function Authentication(props) {
8 | const TOKEN = props.testingToken ? props.testingToken.token : '$TOKEN'
9 |
10 | return (
11 | https://api.zeit.co/example?teamId=team_123}
27 |
28 | > **NOTE:** ${props.user ? 'Since you\'re logged in, ' : ['When ', curl -H "Authorization: Bearer {TOKEN}" https://api.zeit.co/v2/now/deployments}
31 | `
32 | ]
33 | ]
34 | }
35 | />
36 | )
37 | }
38 |
39 | export default pure(Authentication)
40 |
--------------------------------------------------------------------------------
/components/api/request.js:
--------------------------------------------------------------------------------
1 | import { parse as parseURL } from 'url'
2 |
3 | import { Code } from '../text/code'
4 |
5 | function formatCurl({ url, method = 'GET', headers, body }) {
6 | let request = `curl ${method !== 'GET' ? `-X ${method} ` : ''}"${url}"`
7 |
8 | if (headers && Object.keys(headers).length > 0) {
9 | request = Object.entries(headers).reduce((req, [key, value]) => {
10 | return req + ` \\\n -H "${key}: ${value}"`
11 | }, request)
12 | }
13 |
14 | if (body) {
15 | if (typeof body !== 'string') {
16 | request = `${request} \\\n -d '${JSON.stringify(body, null, 2)}'`
17 | } else {
18 | request = `${request} \\\n -d '${body}'`
19 | }
20 | }
21 |
22 | return request
23 | }
24 |
25 | function formatJS({ url, ...opts }) {
26 | return `await fetch("${url}", ${JSON.stringify(opts, null, 2)})`
27 | }
28 |
29 | function formatHTTP({ url, method = 'GET', headers, body }) {
30 | const { path, host } = parseURL(url)
31 |
32 | return [
33 | `${method} ${path} HTTP/1.1`,
34 | `Host: ${host}`,
35 | ...Object.entries(headers).map(([key, value]) => `${key}: ${value}`),
36 | JSON.stringify(body, null, 2)
37 | ].join('\n')
38 | }
39 |
40 | export default function Request({ type = 'curl', ...request }) {
41 | if (type === 'fetch' || type === 'js' || type === 'javascript') {
42 | return {formatJS(request)}
43 | }
44 | if (type === 'http') {
45 | return {formatHTTP(request)}
46 | }
47 | return {formatCurl(request)}
48 | }
49 |
--------------------------------------------------------------------------------
/lib/data/team.js:
--------------------------------------------------------------------------------
1 | /*
2 | This isn't a JSON file or a single object because
3 | these solutions wouldn't enable code-splitting
4 | */
5 |
6 | export const leo = {
7 | real: 'Leo Lamprecht',
8 | twitter: 'notquiteleo',
9 | zeit: 'leo'
10 | }
11 |
12 | export const rauchg = {
13 | real: 'Guillermo Rauch',
14 | twitter: 'rauchg',
15 | zeit: 'rauchg'
16 | }
17 |
18 | export const rase = {
19 | real: 'Tony Kovanen',
20 | twitter: 'tonykovanen',
21 | zeit: 'rase-'
22 | }
23 |
24 | export const nkzawa = {
25 | real: 'Naoyuki Kanezawa',
26 | twitter: 'nkzawa',
27 | zeit: 'nkzawa'
28 | }
29 |
30 | export const hbp = {
31 | real: 'Olli Vanhoja',
32 | twitter: 'OVanhoja',
33 | zeit: 'hbp_'
34 | }
35 |
36 | export const tootallnate = {
37 | real: 'Nathan Rajlich',
38 | twitter: 'tootallnate',
39 | zeit: 'tootallnate'
40 | }
41 |
42 | export const jamo = {
43 | real: 'Jarmo Isotalo',
44 | twitter: 'JarmoIsotalo',
45 | zeit: 'jamo'
46 | }
47 |
48 | export const arunoda = {
49 | real: 'Arunoda Susiripala',
50 | twitter: 'arunoda',
51 | zeit: 'arunoda'
52 | }
53 |
54 | export const tim = {
55 | real: 'Tim Neutkens',
56 | twitter: 'timneutkens',
57 | zeit: 'timneutkens'
58 | }
59 |
60 | export const matheus = {
61 | real: 'Matheus Fernandes',
62 | twitter: 'matheusfrndes',
63 | zeit: 'matheus'
64 | }
65 |
66 | export const sergio = {
67 | real: 'Sergio Xalambrí',
68 | twitter: 'sergiodxa',
69 | zeit: 'sergiodxa'
70 | }
71 | export const devisscher = {
72 | real: 'Thomas Devisscher',
73 | twitter: 'devisscher',
74 | zeit: 'devisscher'
75 | }
76 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document_, { Head, Main, NextScript } from 'next/document'
2 | import isIE11_ from '../lib/is-ie-11'
3 | import htmlescape from 'htmlescape'
4 |
5 | const { API_URL, NOW_API_URL } = process.env
6 | const env = { API_URL, NOW_API_URL }
7 |
8 | export default class Document extends Document_ {
9 | static async getInitialProps(ctx) {
10 | const props = await Document_.getInitialProps(ctx)
11 | const ua = String(ctx.req.headers && ctx.req.headers['user-agent'])
12 | return {
13 | ...props,
14 | isIE11: isIE11_(ua)
15 | }
16 | }
17 |
18 | render() {
19 | return (
20 |
21 | {`{
40 | "error": {
41 | "code": "rate_limited",
42 | "message": "Rate limit exceeded",
43 | }
44 | }`}}
45 | `
46 | ]
47 | ]
48 | }
49 | />
50 | )
51 | }
52 |
53 | export default immutable(RateLimits)
54 |
--------------------------------------------------------------------------------
/components/api/sections/errors/dns.js:
--------------------------------------------------------------------------------
1 | import markdown from 'markdown-in-js'
2 | import Section, { components } from '../../section'
3 | import { Code, InlineCode } from '../../../text/code'
4 | import { InternalLink } from '../../../text/link'
5 | import immutable from '../../../../lib/immutable-component'
6 |
7 | function Domains() {
8 | return (
9 | {`{
28 | "error": {
29 | "code": "missing_name",
30 | "message": "Missing \`name\` parameter"
31 | }
32 | }`}}
33 | `
34 | ],
35 | [
36 | markdown(components)`
37 | ### Missing DNS Record Name
38 | `
39 | ],
40 | [
41 | markdown(components)`
42 | The DNS record key ${{`{
46 | "error": {
47 | "code": "missing_type",
48 | "message": "Missing \`type\` parameter"
49 | }
50 | }`}}
51 | `
52 | ]
53 | ]}
54 | />
55 | )
56 | }
57 |
58 | export default immutable(Domains)
59 |
--------------------------------------------------------------------------------
/components/permalink-icon.js:
--------------------------------------------------------------------------------
1 | const PermalinkIcon = () => (
2 |
15 | )
16 |
17 | export default PermalinkIcon
18 |
--------------------------------------------------------------------------------
/components/text/paragraph.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types'
2 |
3 | export const P = ({ children }) => (
4 | 5 | {children} 6 | 15 |
16 | ) 17 | 18 | export const PDIV = ({ children }) => ( 19 |
20 | {children}
21 |
31 |
32 | )
33 |
34 | const B = ({ children }) => (
35 |
36 | {children}
37 |
44 |
45 | )
46 |
47 | export const HR = () => (
48 |
49 |
56 |
57 | )
58 |
59 | export const Quote = ({ children }, { darkBg } = {}) => (
60 | 61 | {children} 62 | 78 |79 | ) 80 | 81 | Quote.contextTypes = { 82 | darkBg: PropTypes.bool 83 | } 84 | 85 | P.B = B 86 | -------------------------------------------------------------------------------- /components/portal.js: -------------------------------------------------------------------------------- 1 | // Packages 2 | import { Component } from 'react' 3 | import { createPortal } from 'react-dom' 4 | import PropTypes from 'prop-types' 5 | 6 | const isClient = typeof window !== 'undefined' 7 | 8 | class Portal extends Component { 9 | static propTypes = { 10 | children: PropTypes.node, 11 | className: PropTypes.string, 12 | container: PropTypes.element 13 | } 14 | 15 | constructor(props) { 16 | super(props) 17 | 18 | if (isClient) { 19 | this.rootElement = document.createElement('div') 20 | } 21 | } 22 | 23 | componentWillMount() { 24 | if (isClient) { 25 | this.renderContainer(this.props) 26 | } 27 | } 28 | 29 | componentWillReceiveProps(nextProps) { 30 | if (isClient && this.props.className !== nextProps.className) { 31 | this.rootElement.className = this.props.className 32 | } 33 | 34 | if (isClient && this.props.container !== nextProps.container) { 35 | this.unrenderContainer(this.props) 36 | this.renderContainer(nextProps) 37 | } 38 | } 39 | 40 | componentWillUnmount() { 41 | if (isClient) { 42 | this.unrenderContainer(this.props) 43 | } 44 | } 45 | 46 | renderContainer(props) { 47 | getContainer(props.container).appendChild(this.rootElement) 48 | 49 | if (props.className) { 50 | this.rootElement.className = props.className 51 | } 52 | } 53 | 54 | unrenderContainer(props) { 55 | getContainer(props.container).removeChild(this.rootElement) 56 | } 57 | 58 | render() { 59 | if (!isClient) { 60 | return null 61 | } 62 | 63 | return createPortal(this.props.children, this.rootElement) 64 | } 65 | } 66 | 67 | function getContainer(container) { 68 | return container || document.body 69 | } 70 | 71 | export default Portal 72 | -------------------------------------------------------------------------------- /components/docs/navbar/mobile.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DocsNavbarDesktop from './desktop' 3 | import DocsNavbarToggle from './toggle' 4 | import Arrow from '../../arrow' 5 | 6 | export default class DocsNavbarMobile extends React.PureComponent { 7 | state = { show: false } 8 | 9 | toggle = () => { 10 | this.setState({ show: !this.state.show }) 11 | } 12 | 13 | render() { 14 | const { sticky } = this.props 15 | const { show } = this.state 16 | 17 | return ( 18 |
19 |
62 | )
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/lib/api-endpoints.js:
--------------------------------------------------------------------------------
1 | export const API_DAY_TICKETS = '/api/day/tickets'
2 | export const API_COMMUNITY_EXPERT = '/api/community-expert'
3 |
4 | export const API_TEAMS = '/api/teams'
5 | // note: we only include the prefix, which looks the same
6 | // as API_TEAMS, because the actual URL to retrieve members
7 | // is likely to look like `/api/teams/:id/members`
8 | export const API_TEAMS_MEMBERS = '/api/teams'
9 |
10 | export const API_CARDS = '/api/cards'
11 | export const API_PLANS = '/api/plan'
12 |
13 | export const API_USER = '/api/www/user'
14 | export const API_USER_EVENTS = '/api/www/user/events'
15 | export const API_USER_TOKENS = '/api/user/tokens'
16 | export const API_USER_PLAN = '/api/www/user/plan'
17 | export const API_USER_SUBSCRIPTIONS = '/api/v1/user/subscriptions'
18 |
19 | export const API_EVENTS = '/api/events'
20 |
21 | // actual URL looks like `/api/events/:id/reactions`
22 | export const API_EVENTS_REACTIONS = '/api/events'
23 |
24 | export const API_EVENT_REACTIONS = '/api/event-reactions'
25 | export const API_PRICING_STATE = '/api/pricing/state'
26 |
27 | export const API_REGISTRATION = '/api/now/registration'
28 | export const API_HOST = '/api/now/hosts'
29 | export const API_DEPLOYMENTS = '/api/now/deployments'
30 | export const API_FILE_TREE = '/api/now/file-tree'
31 | export const API_ALIASES = '/api/now/aliases'
32 | export const API_DOMAINS = '/api/domains'
33 | export const API_DOMAINS_BUY = '/api/domains/buy'
34 | export const API_LIST = '/api/now/list'
35 | export const API_OAUTH = '/api/oauth'
36 |
37 | export const API_FILES_V2 = '/api/v2/now/files'
38 | export const API_FILES_V1 = 'https://api.zeit.co/now/files'
39 |
40 | export const API_STATE_IO_URL = 'https://state-io.zeit.co'
41 | export const API_LOG_IO_URL = 'https://log-io.zeit.co'
42 | export const API_EVENT_REACTION_IO = 'https://event-reaction-io.zeit.co'
43 |
--------------------------------------------------------------------------------
/components/text/heading.js:
--------------------------------------------------------------------------------
1 | export const H1 = ({ children }) => (
2 |
20 |
22 | {show ? (
23 |
24 |
27 | ) : null}
28 |
61 | 3 | {children} 4 | 12 |
13 | ) 14 | 15 | const B = ({ children }) => ( 16 | 17 | {children} 18 | 25 | 26 | ) 27 | 28 | H1.B = B 29 | 30 | export const H2 = ({ children }) => ( 31 |32 | {children} 33 | 41 |
42 | ) 43 | 44 | export const H3 = ({ children }) => ( 45 |46 | {children} 47 | 55 |
56 | ) 57 | 58 | export const H4 = ({ children, isCommand }) => ( 59 |60 | {children} 61 | 77 |
78 | ) 79 | 80 | export const H5 = ({ children }) => ( 81 |82 | {children} 83 | 91 |
92 | ) 93 | -------------------------------------------------------------------------------- /components/text/code.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | 3 | export const Code = ({ children, syntax }, { darkBg } = {}) => ( 4 |
5 | {children}
6 |
35 |
36 | )
37 |
38 | Code.contextTypes = {
39 | darkBg: PropTypes.bool
40 | }
41 |
42 | export const InlineCode = ({ children, noWrap }) => (
43 |
44 | {children}
45 |
69 |
70 | )
71 |
--------------------------------------------------------------------------------
/components/page.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types'
2 | import React from 'react'
3 | import Head from 'next/head'
4 | import { FONT_FAMILY_SANS } from './css-config'
5 |
6 | class Page extends React.Component {
7 | getChildContext() {
8 | return {
9 | darkBg: this.props.darkBg || false
10 | }
11 | }
12 |
13 | render() {
14 | const { darkBg, children } = this.props
15 | return (
16 |
17 | {children}
18 |
19 |
69 |
70 |
71 | )
72 | }
73 | }
74 |
75 | Page.childContextTypes = {
76 | darkBg: PropTypes.bool
77 | }
78 |
79 | export default Page
80 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const micro = require('micro')
2 | const next = require('next')
3 | const qs = require('querystring')
4 | const url = require('url')
5 |
6 | const dev = process.env.NODE_ENV !== 'production'
7 | const dir = __dirname
8 | const port = process.env.PORT || 5800
9 |
10 | const logger = console
11 | const app = next({ dev, dir })
12 | const handleNextRequests = app.getRequestHandler()
13 |
14 | function removeEndSlash(fn) {
15 | return (req, res) => {
16 | const parsedUrl = url.parse(req.url, true)
17 | const isNext = parsedUrl.path.includes('/_next/')
18 | if (isNext) return fn(req, res)
19 |
20 | if (parsedUrl.path !== '/' && parsedUrl.path.slice(-1) === '/') {
21 | const q = qs.stringify(parsedUrl.query)
22 | res.writeHead(301, {
23 | Location: parsedUrl.path.slice(0, -1) + (q ? '?' + q : '')
24 | })
25 | res.end()
26 | return
27 | }
28 |
29 | return fn(req, res, parsedUrl)
30 | }
31 | }
32 |
33 | app.prepare().then(() => {
34 | const server = micro(
35 | removeEndSlash((req, res, parsedUrl) => {
36 | // Add assetPrefix support based on the hostname
37 | if (req.headers.host === 'docs.zeit.sh') {
38 | // Set the cloudinary custom origin which points to https://docs.zeit.sh
39 | app.setAssetPrefix('https://assets.zeit.co/raw/upload/docs-assets')
40 | } else if (/localhost/.test(req.headers.host)) {
41 | // Set the assetPrefix for localhost
42 | // It needs to be the http version
43 | app.setAssetPrefix(`http://${req.headers.host}`)
44 | } else {
45 | // Set the assetPrefix for localhost
46 | // It needs to be the https version, since now is always HTTPS
47 | app.setAssetPrefix(`https://${req.headers.host}`)
48 | }
49 |
50 | handleNextRequests(req, res, parsedUrl)
51 | })
52 | )
53 |
54 | server.listen(port, err => {
55 | if (err) {
56 | throw err
57 | }
58 |
59 | logger.log(`> Ready on http://localhost:${port}`)
60 | })
61 | })
62 |
--------------------------------------------------------------------------------
/components/image.js:
--------------------------------------------------------------------------------
1 | // This component might look a little complex
2 | // because one could argue that keeping the aspect ratio
3 | // of an image can be solved with `height: auto`,
4 | // but it's actually not that easy if you want to prevent
5 | // element flickering
6 |
7 | // Because if you want to do that, you need to set the aspect
8 | // ratio of the image's container BEFORE the image loads
9 |
10 | const Image = ({
11 | src,
12 | width,
13 | height,
14 | margin = 40,
15 | caption,
16 | video = false,
17 | muted = true,
18 | autoPlay = false
19 | }) => {
20 | if (!width) {
21 | throw new Error('Please define the width of the image!')
22 | }
23 |
24 | if (!height) {
25 | throw new Error('Please define the height of the image!')
26 | }
27 |
28 | const aspectRatio = String(height / width * 100) + '%'
29 |
30 | return (
31 |
27 |
73 | )
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/components/api/file-icon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default class FileIcon extends React.PureComponent {
4 | render() {
5 | return (
6 |
26 | )
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # ZEIT Documentation
2 |
3 | This is the public documentation for **ZEIT now** all other related services.
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
72 | 4 | You can access this documentation online at https://zeit.co/docs . 5 | 6 | ### Running Locally 7 | 8 | Download the copy of this repostory. 9 | 10 | ~~~sh 11 | git clone https://github.com/zeit/docs.git 12 | ~~~ 13 | 14 | Then visit to the downloaded repository and install dependencies with: 15 | 16 | ~~~sh 17 | npm install 18 | ~~~ 19 | 20 | Then you can run the app with: 21 | (The app is written in [Next.js](https://github.com/zeit/next.js)) 22 | 23 | ~~~sh 24 | npm run dev 25 | ~~~ 26 | 27 | Now the documentation is running at http://localhost:5800 28 | 29 | ### Editing Docs Content 30 | 31 | You can find the source of the documentation inside the `pages/docs` directory. Documentation is mostly written in markdown with the help of some React components. 32 | 33 | Those components give us additional features which are not available in markdown. 34 | 35 | ### Adding New Docs 36 | 37 | You can start writing the new docs page by adding it to the `pages/docs` directory starting with the following code: 38 | 39 | ~~~js 40 | import markdown from 'markdown-in-js' 41 | import withDoc, { components } from '../../../lib/with-doc' 42 | 43 | import { TerminalInput } from '../../../components/text/terminal' 44 | 45 | // prettier-ignore 46 | export default withDoc({ 47 | title: 'The Title for the New Guide', 48 | date: '23 June 2017', 49 | authors: [], 50 | editUrl: 'pages/docs/category/file.js', 51 | })(markdown(components)` 52 | 53 | This is the content written in Markdown. 54 | 55 | ${ 56 |
{`{
33 | "name": "extensible",
34 | "scripts": {
35 | "start": "serve ."
36 | },
37 | "dependencies": {
38 | "serve": "latest"
39 | }
40 | }`}
41 | }
42 |
43 | Then run \`now\`, and we will detect the presence of \`package.json\` and deploy it as a \`npm\` deployment.
44 |
45 | ## Behavior
46 |
47 | - If a ${35 | If your app is a Node.js app, here's how you can do that: 36 | 37 | ${
{`const { MONGO_URL, MY_API_TOKEN } = process.env`}}
38 |
39 | ## Via “now.json”
40 |
41 | You can also expose these environment variables with [now.json](https://zeit.co/docs/features/configuration). For that, create a file named \`now.json\` inside your app root and add environment variables like this:
42 |
43 | ${
44 | {`{
45 | "env": {
46 | "MONGO_URL": "user:password@mydb.com",
47 | "MY_API_TOKEN": "XXXXX"
48 | }
49 | }`}
50 | }
51 |
52 | After that, \`now\` will use above environment variables when you deploy your app.
53 |
54 | > It's not a good idea to commit the \`now.json\` file to [Git](https://en.wikipedia.org/wiki/Git) if it contains secret information. For that, consider using ${61 | Click any of your deployment URLs inside the dashboard and start searching logs. 62 | 63 | > You may need to click the "Logs" link on the header (top right) to see logs. 64 | 65 | ${ 66 |
40 | {`{
41 | "forwardNpm": true
42 | }`}
43 |
44 | }
45 |
46 | You can read more about how to configure ${{
27 | `language: node_js
28 | node_js:
29 | - "node"
30 | cache: npm
31 | script: npm run deploy
32 | after_script: npm run alias
33 | env:
34 | global:
35 | secure:
36 | `}
37 | }
38 |
39 | 5. Open your package.json file and add the following information, tailored to your site information. This is used to run the alias command and point your domain to the correct deployment (You could also put this in a [now.json](
40 | https://zeit.co/blog/now-json) file):
41 |
42 | ${
43 | {`{
44 | ...
45 | "now": {
46 | "name": "example",
47 | "alias": "example.com
48 | }
49 | ...
50 | }`}}
51 |
52 | 6. Also add the following 2 scripts to the script property in your package.json file. These are used in your Travis config. The first is to deploy and the second is used to alias your latest deploy:
53 |
54 | ${
55 | {`{
56 | ...
57 | "scripts": {
58 | ...
59 | "deploy": "now -e NODE_ENV=production --token $NOW_TOKEN --npm",
60 | "alias": "now alias --token=$NOW_TOKEN"
61 | }
62 | }
63 | }`}
64 |
65 | }
66 |
67 | 7. Test it out by committing your code to Github. Check out your [travis-ci.org](https://travis-ci.org) build feed.
68 |
69 | `)
70 |
--------------------------------------------------------------------------------
/lib/fetch-api.js:
--------------------------------------------------------------------------------
1 | // Packages
2 | import fetch from 'isomorphic-unfetch'
3 | import retry from 'async-retry'
4 | import { parse as parseContentType } from 'content-type'
5 |
6 | // Helpers
7 | import env from './env'
8 |
9 | const API_URL = env.API_URL || 'https://zeit.co'
10 | const NETWORK_ERR_CODE = 'network_error'
11 | const NETWORK_ERR_MESSAGE = 'A network error has occurred. Please retry'
12 |
13 | const isServer = typeof window === 'undefined'
14 | const agents = new Map()
15 |
16 | export default async function fetchAPI(path, token = null, opts = {}) {
17 | const headers = opts.headers || {}
18 |
19 | if (token) {
20 | headers.Authorization = `bearer ${token}`
21 | }
22 |
23 | // accept path to be a full url or a relative path
24 | const url = path[0] === '/' ? API_URL + path : path
25 | let agent
26 |
27 | if (isServer) {
28 | const { parse } = require('url')
29 | const { protocol } = parse(url)
30 | if (protocol) {
31 | agent = getAgent(protocol)
32 | }
33 | }
34 |
35 | return retry(
36 | async bail => {
37 | let res, data, err
38 |
39 | try {
40 | res = await fetch(url, { ...opts, headers, agent })
41 | if (opts.throwOnHTTPError && (res.status < 200 || res.status >= 300)) {
42 | const { type } = parseContentType(res.headers.get('Content-Type'))
43 | if (type === 'application/json') {
44 | data = await res.json()
45 | err = new Error(
46 | data.error == null ? 'Unexpected Error' : data.error.message
47 | )
48 | err.res = res
49 | err.status = res.status
50 | // TODO: remove this hack https://github.com/zeit/front/issues/553
51 | err.code = data.error == null ? res.status : data.error.code
52 | } else {
53 | // handle it below as network error
54 | throw new Error('Unexpected response content-type: ' + type)
55 | }
56 | } else {
57 | data = await res.json()
58 | }
59 | } catch (e) {
60 | err = isServer ? e : new Error(NETWORK_ERR_MESSAGE + ` (${url})`)
61 | err.code = NETWORK_ERR_CODE
62 | err.res = null
63 | err.status = null
64 | }
65 |
66 | if (!err) return data
67 | if (err.status < 500) return bail(err)
68 | throw err
69 | },
70 | { retries: 3, maxTimeout: 2500 }
71 | )
72 | }
73 |
74 | const getAgent = protocol => {
75 | if (!agents.has(protocol)) {
76 | const http = require('http')
77 | const https = require('https')
78 | const module = protocol === 'https:' ? https : http
79 | const opts = {
80 | keepAlive: true,
81 | keepAliveMsecs: 10000,
82 | maxSockets: 100
83 | }
84 | const agent = new module.Agent(opts)
85 | agents.set(protocol, agent)
86 | }
87 |
88 | return agents.get(protocol)
89 | }
90 |
--------------------------------------------------------------------------------
/components/text/terminal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { GenericLink } from './link'
4 |
5 | export const TerminalInput = ({ children }, { darkBg = false }) => (
6 |
7 | {Array.isArray(children) ? (
8 | {children}
9 | ) : (
10 | children
11 | .split(/\r?\n/)
12 | .map((item, index) => {item})
13 | )}
14 |
15 |
46 |
47 | )
48 |
49 | TerminalInput.contextTypes = {
50 | darkBg: PropTypes.bool
51 | }
52 |
53 | export class TerminalOutput extends React.Component {
54 | static childContextTypes = {
55 | darkBg: PropTypes.bool
56 | }
57 |
58 | getChildContext() {
59 | return { darkBg: true }
60 | }
61 |
62 | render() {
63 | const { children } = this.props
64 | return (
65 |
66 | {children}
67 |
90 |
91 | )
92 | }
93 | }
94 |
95 | export const TerminalLink = props => (
96 |
97 | {`{
29 | "error": {
30 | "code": "forbidden",
31 | "message": "Not authorized"
32 | }
33 | }`}}
34 | `
35 | ],
36 | [
37 | markdown(components)`
38 | ### Rate Limited
39 | `
40 | ],
41 | [
42 | markdown(components)`
43 | You exceeded the maximum alloted requests.
44 |
45 | The limit of request is per endpoint basis so you could continue using another endpoints even if some of them give you this error.
46 | `,
47 | markdown(components)`
48 | ${{`{
49 | "error": {
50 | "code": "rate_limited",
51 | "message": "Rate limit exceeded",
52 | }
53 | }`}}
54 | `
55 | ],
56 | [
57 | markdown(components)`
58 | ### Bad Request
59 | `
60 | ],
61 | [
62 | markdown(components)`
63 | There was an error with the request, the ${{`{
68 | "error": {
69 | "code": "bad_request",
70 | "message": "An english description of the error that just occurred",
71 | }
72 | }`}}
73 | `
74 | ],
75 | [
76 | markdown(components)`
77 | ### Internal Server Error
78 | `
79 | ],
80 | [
81 | markdown(components)`
82 | This errors is similar to the HTTP 500 Internal Server Error error code.
83 |
84 | `,
85 | markdown(components)`
86 | ${{`{
87 | "error": {
88 | "code": "internal_server_error",
89 | "message": "An unexpected internal error occurred"
90 | }
91 | }`}}
92 | `
93 | ],
94 | [
95 | markdown(components)`
96 | ### Resource Not Found
97 | `
98 | ],
99 | [
100 | markdown(components)`
101 | The endpoint you're requesting doens't handle the method you defined. The error message will contain the methods the endpoint responds to.
102 |
103 | `,
104 | markdown(components)`
105 | ${{`{
106 | "error": {
107 | "code": "method_unknown",
108 | "message": "This endpoint only responds to METHOD"
109 | }
110 | }`}}
111 | `
112 | ],
113 | [
114 | markdown(components)`
115 | ### Method Unknown
116 | `
117 | ],
118 | [
119 | markdown(components)`
120 | The endpoint you're requesting doens't handle the method you defined. The error message will contain the methods the endpoint responds to.
121 |
122 | `,
123 | markdown(components)`
124 | ${{`{
125 | "error": {
126 | "code": "method_unknown",
127 | "message": "This endpoint only responds to METHOD"
128 | }
129 | }`}}
130 | `
131 | ]
132 | ]}
133 | />
134 | )
135 | }
136 |
137 | export default immutable(Generic)
138 |
--------------------------------------------------------------------------------
/pages/docs/guides/redirect.js:
--------------------------------------------------------------------------------
1 | import markdown from 'markdown-in-js'
2 | import withDoc, { components } from '../../../lib/with-doc'
3 |
4 | import { sergio } from '../../../lib/data/team'
5 | import { Code } from '../../../components/text/code'
6 | import { TerminalInput } from '../../../components/text/terminal'
7 |
8 | // prettier-ignore
9 | export default withDoc({
10 | title: 'Setting up a Redirect with Now',
11 | date: '5 Nov 2017',
12 | authors: [sergio],
13 | editUrl: 'pages/docs/guides/redirect.js'
14 | })(markdown(components)`
15 | You usually want your users to access your site with or without \`www\`. The best way to achieve this is to redirect all the traffic coming to the \`www\` domain to your app's naked domain.
16 |
17 | Here are a few example redirects:
18 |
19 | ${{`* https://www.mycompany.com -> https://mycompany.com
20 | * https://www.mycompany.com/about -> https://mycompany.com/about
21 | `}}
22 |
23 | You can also add two aliases to your app like below:
24 |
25 | ${{`now alias my-deployment-url.now.sh mycompany.com
26 | now alias my-deployment-url.now.sh www.mycompany.com
27 | `}}
28 |
29 | It will do the job, but search engines consider them as **duplicate** content. This is not good for SEO and it might confuse users as well.
30 |
31 | Therefore, \`www\` redirect is the best option. There are two ways to achieve that for your app.
32 |
33 | ## 1. Using now-examples/redirect
34 |
35 | Now we are going to deploy a [simple web app](https://github.com/now-examples/redirect) which receives all the \`www\` traffic and redirect them to your naked domain.
36 |
37 | To deploy this, run the following command:38 | (Make sure to add a trailing slash to the redirect url as shown below.) 39 | 40 | ${
{`function redirect(req, res, next) {
59 | // if the request doesn't come from mycompany.com or from the deployment URL
60 | if (req.hostname !== 'mycompany.com' || req.hostname !== process.env.NOW_URL) {
61 | // redirect to mycompany.com keeping the pathname and querystring
62 | return res.redirect(\`https://mycompany.com/\${req.originalUrl}\`);
63 | }
64 | return next(); // call the next middleware (or route)
65 | }
66 |
67 | // make Express use our redirect middleware
68 | app.use(redirect);
69 | `}}
70 |
71 | If you are using some other language or a different web server, you can implement a similar logic as shown above.
72 |
73 | ### Set up Aliases
74 |
75 | Now, add an additional [alias](/docs/getting-started/assign-a-domain-name) to receive \`www\` traffic into your app. If you are using [now.json](/docs/features/configuration), you can add two aliases like this:
76 |
77 | ${{`{
78 | "aliases": [
79 | "www.mycompany.com",
80 | "mycompany.com"
81 | ]
82 | }`}}
83 |
84 | Then, every time you run \`now alias\`, it will alias your app into both of your aliases.
85 | `)
86 |
--------------------------------------------------------------------------------
/pages/docs/getting-started/secrets.js:
--------------------------------------------------------------------------------
1 | import markdown from 'markdown-in-js'
2 | import asset from 'next/asset'
3 | import withDoc, { components } from '../../../lib/with-doc'
4 |
5 | import { arunoda } from '../../../lib/data/team'
6 | import { TerminalInput } from '../../../components/text/terminal'
7 | import { Code } from '../../../components/text/code'
8 | import { InternalLink } from '../../../components/text/link'
9 | import Image from '../../../components/image'
10 | import Now from '../../../components/now/now'
11 |
12 | // prettier-ignore
13 | export default withDoc({
14 | title: 'Secrets',
15 | date: '6 August 2017',
16 | authors: [arunoda],
17 | editUrl: 'pages/docs/getting-started/secrets.js',
18 | })(markdown(components)`
19 |
20 | If multiple people deploy your app or utilize a CI service, it's a better idea to use ${34 | Here's how to do that with \`now.json\`: 35 | 36 | ${
{`{
37 | "env": {
38 | "MONGO_URL": "@my-app-mongo-url",
39 | "MY_API_TOKEN": "@my-app-my-api-token"
40 | }
41 | }`}}
42 |
43 | That's it.
44 |
45 | This \`now.json\` file no longer contains secret information and it's safe to add that to Git and share with anyone. Only the people who can deploy the app has access to these secrets.
46 |
47 | ## Operations
48 |
49 | You can perform a few sets of operations with ${53 | >Anyone who can deploy to ${
55 | >A user can still deploy a simple app to dump these secrets. 56 | 57 | 58 | You can get more information about ${
{`const cert = Buffer.from(certFromtheSecret, 'base64').toString()`}}
82 |
83 | >Base64 is a simple encoding algorithm which is available everywhere.84 | > That's why we've used it. But it's okay to choose any text based encoding algorithm. 85 | 86 | `) 87 | -------------------------------------------------------------------------------- /components/api/sections/endpoints/authentication.js: -------------------------------------------------------------------------------- 1 | import markdown from 'markdown-in-js' 2 | import Section, { components } from '../../section' 3 | import { Code, InlineCode } from '../../../text/code' 4 | import { ExternalLink, InternalLink } from '../../../text/link' 5 | import { 6 | InputTable, 7 | OutputTable, 8 | Row, 9 | Cell, 10 | TypeCell, 11 | BoldCell, 12 | BooleanCell 13 | } from '../../table' 14 | import pure from '../../../../lib/pure-component' 15 | import Endpoint from '../../endpoint' 16 | import Request from '../../request' 17 | 18 | function Authentication() { 19 | return ( 20 | } 32 | 33 | Request a new login for an user to get a token. 34 | 35 | #### Input 36 | ${
{`{
83 | "token": "T1dmvPu36nmyYisXAs7IRzcR",
84 | "securityCode": "Practical Saola"
85 | }`}}
86 | `
87 | ],
88 | [
89 | markdown(components)`
90 | ### Verify login
91 | `
92 | ],
93 | [
94 | markdown(components)`
95 | ${{`{
118 | "token": "sGkHhSH98wtJB0lyODZJ2bRe"
119 | }`}}
120 | `
121 | ]
122 | ]
123 | }
124 | />
125 | )
126 | }
127 |
128 | export default pure(Authentication)
129 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "docs",
3 | "version": "5.2.1",
4 | "private": true,
5 | "scripts": {
6 | "dev": "node server.js",
7 | "build": "cross-env NODE_ENV=production next build",
8 | "export": "cross-env NODE_ENV=production next export",
9 | "start": "cross-env NODE_ENV=production node server.js",
10 | "lint": "eslint .",
11 | "lint:staged": "lint-staged",
12 | "test": "npm run lint",
13 | "deploy": "node scripts/deploy",
14 | "last:edited": "node scripts/last-edited && git add lib/data/last-edited.json"
15 | },
16 | "babel": {
17 | "presets": [
18 | "next/babel"
19 | ],
20 | "plugins": [
21 | [
22 | "transform-define",
23 | "./env-config.js"
24 | ],
25 | "markdown-in-js/babel"
26 | ]
27 | },
28 | "dependencies": {
29 | "@skidding/react-codemirror": "1.0.2",
30 | "async-retry": "1.1.4",
31 | "babel-plugin-transform-define": "1.3.0",
32 | "babel-runtime": "6.23.0",
33 | "codemirror": "5.31.0",
34 | "content-type": "1.0.4",
35 | "cookie": "0.3.1",
36 | "cross-env": "5.0.1",
37 | "date-fns": "1.29.0",
38 | "glob": "7.1.2",
39 | "glob-promise": "3.1.0",
40 | "htmlescape": "1.1.1",
41 | "intersection-observer": "0.4.2",
42 | "isomorphic-fetch": "2.2.1",
43 | "isomorphic-unfetch": "2.0.0",
44 | "js-cookie": "2.2.0",
45 | "jsonwebtoken": "7.4.1",
46 | "lodash.debounce": "4.0.8",
47 | "markdown-in-js": "1.1.3",
48 | "micro": "9.1.0",
49 | "mitt": "1.1.2",
50 | "next": "5.0.1-canary.3",
51 | "nprogress": "0.2.0",
52 | "prop-types": "15.5.8",
53 | "query-string": "4.3.4",
54 | "react": "16.1.1",
55 | "react-dom": "16.1.1",
56 | "scroll-into-view-if-needed": "1.1.0",
57 | "smoothscroll-polyfill": "0.3.5"
58 | },
59 | "devDependencies": {
60 | "babel-eslint": "7.2.3",
61 | "eslint": "4.2.0",
62 | "eslint-plugin-import-b5a962": "2.3.0",
63 | "eslint-plugin-react": "7.1.0",
64 | "lint-staged": "4.0.0",
65 | "pre-commit": "1.2.2",
66 | "prettier": "1.7.4",
67 | "shelljs": "0.7.8"
68 | },
69 | "lint-staged": {
70 | "*.js": [
71 | "eslint",
72 | "prettier --write --no-semi --single-quote",
73 | "git add"
74 | ]
75 | },
76 | "pre-commit": [
77 | "last:edited",
78 | "lint:staged"
79 | ],
80 | "greenkeeper": {
81 | "ignore": [
82 | "prettier"
83 | ]
84 | },
85 | "eslintConfig": {
86 | "parser": "babel-eslint",
87 | "parserOptions": {
88 | "ecmaVersion": 8,
89 | "sourceType": "module",
90 | "ecmaFeatures": {
91 | "jsx": true,
92 | "impliedStrict": true,
93 | "experimentalObjectRestSpread": true
94 | },
95 | "allowImportExportEverywhere": true
96 | },
97 | "plugins": [
98 | "react",
99 | "import-b5a962"
100 | ],
101 | "extends": [
102 | "eslint:recommended",
103 | "plugin:react/recommended"
104 | ],
105 | "globals": {
106 | "VERSION": true,
107 | "IMAGE_ASSETS_URL": true,
108 | "VIDEO_ASSETS_URL": true,
109 | "RAW_ASSETS_URL": true
110 | },
111 | "env": {
112 | "es6": true,
113 | "browser": true,
114 | "node": true
115 | },
116 | "rules": {
117 | "func-names": [
118 | "error",
119 | "as-needed"
120 | ],
121 | "no-shadow": "error",
122 | "import-b5a962/no-mutable-exports": "error",
123 | "import-b5a962/no-anonymous-default-export": [
124 | "error",
125 | {
126 | "allowArray": true,
127 | "allowArrowFunction": true,
128 | "allowLiteral": true,
129 | "allowObject": true
130 | }
131 | ],
132 | "no-extra-semi": 0,
133 | "react/prop-types": 0,
134 | "react/react-in-jsx-scope": 0,
135 | "react/no-unescaped-entities": 0,
136 | "react/jsx-no-target-blank": 0,
137 | "react/no-string-refs": 0
138 | }
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/pages/docs/features/dns.js:
--------------------------------------------------------------------------------
1 | import markdown from 'markdown-in-js'
2 | import withDoc, { components } from '../../../lib/with-doc'
3 |
4 | import { hbp, leo } from '../../../lib/data/team'
5 | import Now from '../../../components/now/now'
6 | import { InternalLink } from '../../../components/text/link'
7 | import { TerminalInput } from '../../../components/text/terminal'
8 |
9 | // prettier-ignore
10 | export default withDoc({
11 | title: 'DNS Management',
12 | date: '15 Mar 2017',
13 | authors: [hbp, leo],
14 | editUrl: 'pages/docs/features/dns.js',
15 | })(markdown(components)`
16 |
17 |
18 | Thanks to the \`now dns\` CLI command, managing existing DNS records with ${55 | 56 | **Examples** 57 | 58 | ${ 59 |
83 | > Most probably, you'll need to use \`CAA\` records to: 84 | > 1. use a custom certificate for your ${
POST /now/deployments}
44 |
45 | Example request:
46 |
47 | ${{`curl -X POST https://api.zeit.co/now/deployments \\
48 | -H 'Authorization: Bearer ${TOKEN}' \\
49 | -H 'Content-Type: application/json' \\
50 | -d '{
51 | "package": {
52 | "name": "my-instant-deployment",
53 | "dependencies": {
54 | "sign-bunny": "1.0.0"
55 | },
56 | "scripts": {
57 | "start": "node index"
58 | }
59 | },
60 | "server/index.js": "require(\\"http\\").Server((req, res) => {\nres.setHeader(\\"Content-Type\\", \\"text/plain; charset=utf-8\\");\nres.end(require(\\"sign-bunny\\")(\\"Hi there!\\"));\n}).listen();"
61 | }'
62 | `}}
63 |
64 | Example request with a successful (**200**) response:
65 |
66 | ${{`{
67 | "uid": "ChbZiZe84CKtod6rmCIRRvYR",
68 | "host": "my-instant-deployment-rrucptrbft.now.sh",
69 | "state": "BOOTED"
70 | }`}}
71 | `
72 | ]
73 | ]}
74 | />
75 | )
76 | }
77 |
78 | export default pure(V2)
79 |
80 | class Container extends React.PureComponent {
81 | render() {
82 | return (
83 | {this.props.children}
106 | 123 |
132 | {this.props.children}
133 |
140 |
141 | )
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/components/popover-link.js:
--------------------------------------------------------------------------------
1 | // Packages
2 | import React from 'react'
3 |
4 | // Components
5 | import Portal from './portal'
6 | import ClickOutside from './click-outside'
7 |
8 | export default class PopOverLink extends React.Component {
9 | constructor(props) {
10 | super(props)
11 | this.onClick = this.onClick.bind(this)
12 | this.onClose = this.onClose.bind(this)
13 | this.onResize = this.onResize.bind(this)
14 | this.renderPortal = this.renderPortal.bind(this)
15 | this.state = {
16 | isOpen: false,
17 | top: null,
18 | left: null,
19 | width: null
20 | }
21 | this.resizeRaf = null
22 | }
23 |
24 | componentDidMount() {
25 | if (this.props.isOpen) {
26 | this.setOpen()
27 | }
28 | }
29 |
30 | componentWillReceiveProps(nextProps) {
31 | if (nextProps.isOpen) {
32 | this.setOpen()
33 | }
34 | }
35 |
36 | setOpen() {
37 | const bodyRect = document.body.getBoundingClientRect()
38 | const targetRect = this.refs.link.getBoundingClientRect()
39 | this.setState({
40 | isOpen: true,
41 | top: targetRect.top - bodyRect.top,
42 | left: targetRect.left - bodyRect.left
43 | })
44 | this.props.onOpen && this.props.onOpen()
45 | }
46 |
47 | onClick(e) {
48 | this.setOpen()
49 | e.preventDefault()
50 | e.stopPropagation()
51 | window.addEventListener('resize', this.onResize)
52 | }
53 |
54 | onClose() {
55 | this.setState({ isOpen: false })
56 | window.removeEventListener('resize', this.onResize)
57 | }
58 |
59 | onResize() {
60 | if (this.resizeRaf) return
61 | this.resizeRaf = requestAnimationFrame(() => {
62 | const bodyRect = document.body.getBoundingClientRect()
63 | const targetRect = this.refs.link.getBoundingClientRect()
64 |
65 | if (!targetRect.width && !targetRect.height) {
66 | // we special case the scenario where a media query
67 | // for example hides the target
68 | this.onClose()
69 | return
70 | }
71 |
72 | this.setState({
73 | top: targetRect.top - bodyRect.top,
74 | left: targetRect.left - bodyRect.left
75 | })
76 | this.resizeRaf = null
77 | })
78 | }
79 |
80 | componentWillUnmount() {
81 | cancelAnimationFrame(this.resizeRaf)
82 | this.resizeRaf = null
83 | window.removeEventListener('resize', this.onResize)
84 | }
85 |
86 | renderPortal({ innerRef }) {
87 | const { to, offsetLeft = 0, offsetTop = 0, fixed, left, top } = this.props
88 | return (
89 | https://zeit.co/oauth/authorize}
35 |
36 | You will pass the following values as query paremeters.
37 |
38 | ${https://zeit.co/oauth/authorize?client_id=oac_s4cllbR9Ao8307IDSkluOQBS}
70 |
71 | Example successful redirect url:
72 |
73 | ${https://example.com/oauth/callback?code=jMIukZ1DBCKXHje3X14BCkU0&state=t2eh4KHwNyGbo5g65VNvoFhl}
74 | `
75 | ],
76 | [
77 | markdown(components)`
78 | ## Exchanging code for an access token
79 | `
80 | ],
81 | [
82 | markdown(components)`
83 | If all goes well, exchange the authorization code for an access token using the following API.
84 |
85 | ${POST https://api.zeit.co/v2/oauth/access_token}
86 |
87 | You will pass the following values to request body in the form of \`application/x-www-form-urlencoded\`.
88 |
89 | ${{`POST https://api.zeit.co/v2/oauth/access_token
119 |
120 | client_id=oac_s4cllbR9Ao8307IDSkluOQBS&client_secret=EOBPvZuBYAtb3SbYo8H1iWFP&code=jMIukZ1DBCKXHje3X14BCkU0
121 | `}}
122 |
123 | Example successful (**200**) response:
124 |
125 | ${{`{
126 | access_token: 'xEbuzM1ZAJ46afITQlYqH605'
127 | }`}}
128 | `
129 | ],
130 | [
131 | markdown(components)`
132 | ## Using access token
133 |
134 | The access token allows you to make requests to the API on a behalf of a user,
135 | by ${
36 | {`
37 |
38 | `}
53 |
54 | }
55 |
56 | The code basically loads ZEIT's logo from our content delivery network and shows it to the user. In addition, I sprinkled some cute CSS styles on top to position the image in the exact center of the page.
57 |
58 | This is how it will look in the browser when opening the file:
59 |
60 | ${
61 | 35 | For \`npm\` based deployments it means running \`npm install\` and \`npm run build\`. Static deployments currently don't have a build step and jump directly to \`READY\`. 36 | * **READY** or **BUILD_ERROR**: If the build as successful, the deployment will start and move to the \`READY\` state, which means it's ready to receive and serve traffic. For \`npm\` deployments it means \`npm start\`, and for \`docker\` deployments \`docker run\`. 37 | 38 | If, however, the build is unsuccessful, the deployment ends up in a \`BUILD_ERROR\` state, and logs can be inspected to see what went wrong. In this case the deployment will not be retried. 39 | 40 | In addition to the state flow of new deployments, there is a somewhat separate flow of states that the deployment transitions to after it has been successfully deployed. 41 | 42 | A deployment can be frozen if its minimum instance count is set to 0 (the default), if it doesn't get much traffic. When it's accessed later, it will transition back to \`READY\` state from a snapshot. 43 | 44 | The deployment can also permanently move to a \`DEPLOYMENT_ERROR\` state, if it starts to crash time and time again quickly after it's started. 45 | 46 | ## Instances & Scaling 47 | 48 | A deployment by default runs between zero to one instance, meaning it either runs one copy of the application, or is frozen due to lack of traffic. This amount of instances can be decided manually using the \`now scale\` command. 49 | 50 | If the minimum and maximum amount of instances are not the same, the deployment will be automatically scaled between those values depending on the amount of traffic and its throughput. For example, if an application has been scaled with the following command: 51 | 52 | ${
{`{
48 | "name": "project-name",
49 | "version": "0.1.0",
50 | "private": true,
51 | "dependencies": {
52 | "react": "^15.6.1",
53 | "react-dom": "^15.6.1",
54 | "react-scripts": "1.0.13",
55 | "serve": "^6.0.6"
56 | },
57 | "scripts": {
58 | "start": "react-scripts start",
59 | "now-start": "serve --single ./build",
60 | "build": "react-scripts build",
61 | "test": "react-scripts test --env=jsdom",
62 | "eject": "react-scripts eject"
63 | }
64 | }`}
65 | }
66 |
67 | ## Deploying the application
68 | Once we did that we can deploy our application with the following command:
69 |
70 | ${{`module.exports = () => ({
61 | date: new Date
62 | })`}
63 | }
64 |
65 | ### package.json
66 |
67 | ${
68 | {`{
69 | "name": "get-started-node",
70 | "version": "0.1.0",
71 | "dependencies": {
72 | "micro": "latest"
73 | },
74 | "scripts": {
75 | "start": "micro"
76 | }
77 | }`}
78 | }
79 |
80 | To deploy this app, visit the app directory and run this command:
81 |
82 | ${{`package main
98 |
99 | import (
100 | "io"
101 | "net/http"
102 | )
103 |
104 | func main() {
105 | http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
106 | io.WriteString(w, "Hello world!")
107 | })
108 |
109 | err := http.ListenAndServe(":8000", nil)
110 | if err != nil {
111 | panic(err)
112 | }
113 | }`}
114 | }
115 |
116 | ### Dockerfile
117 |
118 | ${
119 | {`FROM golang:alpine
120 | ADD . /go/src/zeit/hello
121 | RUN go install zeit/hello
122 | CMD ["/go/bin/hello"]
123 | EXPOSE 8000`}
124 | }
125 |
126 | Now run this command inside that directory:
127 |
128 | ${{'FROM /:'} }
43 |
44 | Once the container is built, the snapshot will be used when the deployment is scaled or rebooted.
45 |
46 | ## File System Specifications
47 |
48 | There are no limitations inside Docker deployments when it comes to the file system. It's always writable and readable.
49 |
50 | ## Port Selection
51 |
52 | ${POST /now/deployments}
60 |
61 | Example request **(user is on the OSS plan)**:
62 |
63 | ${{`curl -X POST https://api.zeit.co/now/deployments \\
64 | -H 'Authorization: Bearer ${TOKEN}' \\
65 | -H 'Content-Type: application/json' \\
66 | -d '{
67 | "package": {
68 | "name": "my-instant-deployment",
69 | "dependencies": {
70 | "sign-bunny": "1.0.0"
71 | },
72 | "scripts": {
73 | "start": "node index"
74 | }
75 | },
76 | "server/index.js": "require(\\"http\\").Server((req, res) => {\nres.setHeader(\\"Content-Type\\", \\"text/plain; charset=utf-8\\");\nres.end(require(\\"sign-bunny\\")(\\"Hi there!\\"));\n}).listen();"
77 | }'
78 | `}}
79 |
80 | Error response (because ${{`{
83 | "error": {
84 | "code": "plan_requires_public",
85 | "message": "Your plan (OSS) requires the deployment to be marked as public."
86 | }
87 | }`}}
88 | `
89 | ]
90 | ]}
91 | />
92 | )
93 | }
94 |
95 | export default pure(V3)
96 |
97 | class Container extends React.PureComponent {
98 | render() {
99 | return (
100 | {this.props.children}
123 | 140 |
149 | {this.props.children}
150 |
157 |
158 | )
159 | }
160 | }
161 |
--------------------------------------------------------------------------------