Skip to content

Commit 42e46d1

Browse files
timothyisskllcrn
authored and
Matthew Sweeney
committed
Update version switcher for API and docs, and remove it from irrelevant pages (#1333)
* Update version switcher for API and docs, and remove it from irrelevant pages * Update components/layout/version-switcher.js Co-Authored-By: Christopher <[email protected]>
1 parent 1703a30 commit 42e46d1

File tree

9 files changed

+77
-147
lines changed

9 files changed

+77
-147
lines changed

‎components/layout/docs.js

+11-74
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import Link from 'next/link'
32
import { useAmp } from 'next/amp'
43
import { withRouter } from 'next/router'
54
import { MDXProvider } from '@mdx-js/tag'
@@ -10,17 +9,16 @@ import Layout from '~/components/layout/layout'
109
import Main from '~/components/layout/main'
1110
import Heading from '~/components/text/linked-heading'
1211
import Sidebar from '~/components/layout/sidebar'
12+
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 ToggleGroup, { ToggleItem } from '~/components/toggle-group'
1716
import { GenericLink } from '~/components/text/link'
1817
import components from '~/lib/mdx-components'
1918
import { H1, H2, H3, H4 } from '~/components/text'
2019
import HR from '~/components/text/hr'
2120
import dataV1 from '~/lib/data/v1/docs'
2221
import dataV2 from '~/lib/data/v2/docs'
23-
import Select from '~/components/select'
2422
import Note from '~/components/text/note'
2523
import { FooterFeedback } from '~/components/feedback-input'
2624

@@ -78,31 +76,6 @@ const DocH4 = ({ children }) => (
7876

7977
const NonAmpOnly = ({ children }) => (useAmp() ? null : children)
8078

81-
const VersionSelect = ({ onChange, version }) => {
82-
const isAmp = useAmp()
83-
const href = `/docs/${version === 'v1' ? 'v2' : 'v1'}`
84-
const curSelect = (
85-
<Select
86-
width="100%"
87-
onChange={onChange}
88-
defaultValue={version}
89-
on={
90-
isAmp ? `change:AMP.navigateTo(url='${href}', target=_top)` : undefined
91-
}
92-
>
93-
<option value="v1">1.0</option>
94-
<option value="v2">2.0 (Latest)</option>
95-
</Select>
96-
)
97-
if (!isAmp) return curSelect
98-
// have to wrap it in a form to use `autoComplete="off"`
99-
return (
100-
<form action="/" method="GET" autoComplete="off" target="_top">
101-
{curSelect}
102-
</form>
103-
)
104-
}
105-
10679
class withDoc extends React.Component {
10780
state = {
10881
navigationActive: false,
@@ -160,40 +133,13 @@ class withDoc extends React.Component {
160133
<Main>
161134
<NonAmpOnly>
162135
<Sidebar active={navigationActive}>
163-
<div className="toggle-group-wrapper">
164-
<ToggleGroup>
165-
<ToggleItem
166-
active={
167-
router.pathname.startsWith('/docs') &&
168-
!router.pathname.startsWith('/docs/api')
169-
}
170-
>
171-
<Link href="/docs">
172-
<a onClick={this.handleIndexClick}>Docs</a>
173-
</Link>
174-
</ToggleItem>
175-
<ToggleItem
176-
active={router.pathname.startsWith('/docs/api')}
177-
>
178-
<Link href="/docs/api">
179-
<a onClick={this.handleIndexClick}>API Reference</a>
180-
</Link>
181-
</ToggleItem>
182-
<ToggleItem
183-
active={router.pathname.startsWith('/examples')}
184-
>
185-
<Link href="/examples">
186-
<a onClick={this.handleIndexClick}>Examples</a>
187-
</Link>
188-
</ToggleItem>
189-
</ToggleGroup>
190-
</div>
191136
<DocsNavbarDesktop data={versionData} url={router} />
192-
<h5 className="platform-select-title">Now Platform Version</h5>
193-
<VersionSelect
194-
version={version}
195-
onChange={this.handleVersionChange}
196-
/>
137+
<div className="select-wrapper">
138+
<VersionSwitcher
139+
version={version}
140+
onChange={this.handleVersionChange}
141+
/>
142+
</div>
197143
</Sidebar>
198144
</NonAmpOnly>
199145
<Content>
@@ -238,6 +184,10 @@ class withDoc extends React.Component {
238184
padding: 0;
239185
}
240186
187+
.select-wrapper {
188+
margin-top: 64px;
189+
}
190+
241191
.category-wrapper {
242192
padding: 40px 0;
243193
}
@@ -253,19 +203,6 @@ class withDoc extends React.Component {
253203
margin-bottom: 16px;
254204
margin-top: 32px;
255205
}
256-
257-
.toggle-group-wrapper {
258-
display: none;
259-
}
260-
261-
@media screen and (max-width: 950px) {
262-
.toggle-group-wrapper {
263-
display: flex;
264-
align-items: center;
265-
justify-content: center;
266-
margin-bottom: 40px;
267-
}
268-
}
269206
`}</style>
270207
</Layout>
271208
</MDXProvider>

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

-4
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@ class DocsIndex extends Component {
2727
padding: 12px 0;
2828
}
2929
30-
.wrapper:not(:only-child) {
31-
padding: 48px 0;
32-
}
33-
3430
ul {
3531
list-style: none;
3632
margin: 0;

‎components/layout/version-switcher.js

+49-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,51 @@
1-
import Select from './select'
2-
3-
const VersionSwitcher = ({ handleVersionSwitch, version }) => (
4-
<Select width="100%" onChange={handleVersionSwitch} defaultValue={version}>
5-
<option value="v2">Latest (v2)</option>
6-
<option value="v1">Legacy (v1)</option>
7-
</Select>
8-
)
1+
import Select from '~/components/select'
2+
import { useAmp } from 'next/amp'
3+
4+
const VersionSwitcher = ({ onChange, version }) => {
5+
const isAmp = useAmp()
6+
const href = `/docs/${version === 'v1' ? 'v2' : 'v1'}`
7+
const curSelect = (
8+
<span>
9+
<Select
10+
width="50%"
11+
onChange={onChange}
12+
defaultValue={version}
13+
on={
14+
isAmp
15+
? `change:AMP.navigateTo(url='${href}', target=_top)`
16+
: undefined
17+
}
18+
small
19+
>
20+
<option selected disabled>
21+
Platform Version
22+
</option>
23+
<option value="v2">2.0 (Latest)</option>
24+
<option value="v1">1.0</option>
25+
</Select>
26+
27+
<style jsx>{`
28+
span {
29+
display: block;
30+
}
31+
32+
span :global(.select) {
33+
color: var(--accents-5);
34+
}
35+
36+
span :global(.select .arrow > svg) {
37+
stroke: var(--accents-5);
38+
}
39+
`}</style>
40+
</span>
41+
)
42+
if (!isAmp) return curSelect
43+
// have to wrap it in a form to use `autoComplete="off"`
44+
return (
45+
<form action="/" method="GET" autoComplete="off" target="_top">
46+
{curSelect}
47+
</form>
48+
)
49+
}
950

1051
export default VersionSwitcher

‎components/select/select.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const Select = (
4444
color: ${darkBg ? '#fff' : '#000'};
4545
background: ${darkBg ? '#000' : '#fff'};
4646
display: inline-flex;
47-
height: ${small ? '24px' : '40px'};
47+
height: ${small ? '32px' : '40px'};
4848
outline: none;
4949
border: 1px solid ${darkBg ? '#666' : '#eaeaea'};
5050
font-size: 12px;
@@ -72,7 +72,7 @@ const Select = (
7272
box-shadow: none;
7373
background: transparent;
7474
background-image: none;
75-
color: ${darkBg ? '#fff' : '#000'};
75+
color: currentColor;
7676
line-height: ${small ? '22px' : '40px'};
7777
font-size: ${small ? '12px' : '14px'};
7878
margin-right: -20px;

‎pages/docs/api/v1/index.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ import Main from '~/components/layout/main'
1111
import changeHash from '~/lib/utils/change-hash'
1212
import components from '~/lib/mdx-components'
1313
import Content from '~/components/layout/content'
14+
import VersionSwitcher from '~/components/layout/version-switcher'
1415
import Context from '~/lib/api/slugs-context'
1516
import DocsBuilder from '~/lib/api/builder'
1617
import DocsIndex from '~/components/layout/index'
1718
import getFragment from '~/lib/api/get-fragment'
1819
import getHref from '~/lib/api/get-href'
1920
import Head from '~/components/layout/head'
2021
import scrollToElement from '~/lib/utils/scroll-to-element'
21-
import Select from '~/components/select'
2222
import Sidebar from '~/components/layout/sidebar'
2323
import Note from '~/components/text/note'
2424
import { GenericLink } from '~/components/text/link'
@@ -175,17 +175,10 @@ class APIPage extends Component {
175175
</ToggleGroup>
176176
</div>
177177
<div className="select-wrapper">
178-
<h5 className="platform-select-title">
179-
Now Platform Version
180-
</h5>
181-
<Select
182-
width="100%"
183-
defaultValue={version}
178+
<VersionSwitcher
179+
version={version}
184180
onChange={this.handleVersionChange}
185-
>
186-
<option value="v1">1.0</option>
187-
<option value="v2">2.0 (Latest)</option>
188-
</Select>
181+
/>
189182
</div>
190183
<DocsIndex
191184
activeItem={active}
@@ -345,8 +338,8 @@ class APIPage extends Component {
345338
margin-top: 0;
346339
}
347340
348-
.select-wrapper :global(.select) {
349-
width: 100%;
341+
.select-wrapper {
342+
margin-bottom: 48px;
350343
}
351344
352345
.toggle-group-wrapper {

‎pages/docs/api/v2/index.js

+8-16
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ import Main from '~/components/layout/main'
1212
import changeHash from '~/lib/utils/change-hash'
1313
import components from '~/lib/mdx-components'
1414
import Content from '~/components/layout/content'
15+
import VersionSwitcher from '~/components/layout/version-switcher'
1516
import Context from '~/lib/api/slugs-context'
1617
import DocsBuilder from '~/lib/api/builder'
1718
import DocsIndex from '~/components/layout/index'
1819
import getFragment from '~/lib/api/get-fragment'
1920
import getHref from '~/lib/api/get-href'
2021
import Head from '~/components/layout/head'
2122
import scrollToElement from '~/lib/utils/scroll-to-element'
22-
import Select from '~/components/select'
2323
import Sidebar from '~/components/layout/sidebar'
2424
import ToggleGroup, { ToggleItem } from '~/components/toggle-group'
2525
import withPermalink from '~/lib/api/with-permalink'
@@ -194,19 +194,6 @@ class APIPage extends Component {
194194
</ToggleItem>
195195
</ToggleGroup>
196196
</div>
197-
<div className="select-wrapper">
198-
<h5 className="platform-select-title">
199-
Now Platform Version
200-
</h5>
201-
<Select
202-
width="100%"
203-
defaultValue={version}
204-
onChange={this.handleVersionChange}
205-
>
206-
<option value="v1">1.0</option>
207-
<option value="v2">2.0 (Latest)</option>
208-
</Select>
209-
</div>
210197
<DocsIndex
211198
activeItem={active}
212199
getHref={getHref}
@@ -217,6 +204,12 @@ class APIPage extends Component {
217204
updateActive={this.updateActive}
218205
setInitiallyActive={this.setInitiallyActive}
219206
/>
207+
<div className="select-wrapper">
208+
<VersionSwitcher
209+
version={version}
210+
onChange={this.handleVersionChange}
211+
/>
212+
</div>
220213
</Sidebar>
221214
<Content>
222215
<div className="content">
@@ -352,8 +345,7 @@ class APIPage extends Component {
352345
margin-top: 0;
353346
}
354347
355-
.select-wrapper :global(.select) {
356-
width: 100%;
348+
.select-wrapper {
357349
}
358350
359351
.toggle-group-wrapper {

‎pages/docs/integrations/v2/index.js

-14
Original file line numberDiff line numberDiff line change
@@ -191,20 +191,6 @@ class IntegrationsPage extends Component {
191191
</ToggleItem>
192192
</ToggleGroup>
193193
</div> */}
194-
<div className="select-wrapper">
195-
<h5 className="platform-select-title">
196-
Now Platform Version
197-
</h5>
198-
<Select
199-
width="100%"
200-
defaultValue={version}
201-
onChange={this.handleVersionChange}
202-
disabled
203-
>
204-
<option value="v1">1.0</option>
205-
<option value="v2">2.0 (Latest)</option>
206-
</Select>
207-
</div>
208194
<DocsIndex
209195
activeItem={active}
210196
getHref={getHref}

‎pages/docs/now-cli/v2/index.js

-15
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import getFragment from '~/lib/api/get-fragment'
1818
import getHref from '~/lib/api/get-href'
1919
import Head from '~/components/layout/head'
2020
import scrollToElement from '~/lib/utils/scroll-to-element'
21-
import Select from '~/components/select'
2221
import Sidebar from '~/components/layout/sidebar'
2322
import withPermalink from '~/lib/api/with-permalink'
2423
import HR from '~/components/text/hr'
@@ -191,20 +190,6 @@ class NowCLIDocs extends Component {
191190
</ToggleItem>
192191
</ToggleGroup>
193192
</div> */}
194-
<div className="select-wrapper">
195-
<h5 className="platform-select-title">
196-
Now Platform Version
197-
</h5>
198-
<Select
199-
width="100%"
200-
defaultValue={version}
201-
onChange={this.handleVersionChange}
202-
disabled
203-
>
204-
<option value="v1">1.0</option>
205-
<option value="v2">2.0 (Latest)</option>
206-
</Select>
207-
</div>
208193
<DocsIndex
209194
activeItem={active}
210195
getHref={getHref}

‎public/sitemap.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -452,7 +452,7 @@
452452
</url>
453453
<url>
454454
<loc>https://zeit.co/docs/v2/build-step/</loc>
455-
<lastmod>2019-09-19T12:56:18.000Z</lastmod>
455+
<lastmod>2019-09-23T14:30:03.000Z</lastmod>
456456
<changefreq>hourly</changefreq>
457457
</url>
458458
<url>

0 commit comments

Comments
 (0)