Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit 66a4735

Browse files
nisarhassan12nisarhassan12
committed
Update docs template,layout & styles.
1 parent 2dc563e commit 66a4735

File tree

10 files changed

+383
-145
lines changed

10 files changed

+383
-145
lines changed

‎gatsby-browser.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
require("prismjs/themes/prism-tomorrow.css");
1+
require("prismjs/themes/prism-solarizedlight.css");

‎gatsby-config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ module.exports = {
6464
maxWidth: 1140,
6565
quality: 90,
6666
linkImagesToOriginal: false,
67-
backgroundColor: '#1e1e1e'
67+
backgroundColor: '#fff'
6868
}
6969
}
7070
]

‎src/components/DocSideBar.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react'
2+
3+
import { Link } from 'gatsby'
4+
import Linkset from './Linkset'
5+
6+
const DocSideBar: React.SFC<{}> = () => (
7+
<div className="sidebar">
8+
<ul className="links">
9+
<Linkset isRendered={true} caption="Welcome" path="">
10+
<li><Link activeClassName='active' to="/docs/">Introduction</Link></li>
11+
<li><Link activeClassName='active' to="/docs/10_getting_started/">Getting Started</Link></li>
12+
<li><Link activeClassName='active' to="/docs/20_browser_extension/">Browser Extension</Link></li>
13+
</Linkset>
14+
15+
<Linkset isRendered={true} caption="Workspaces" path="30_workspaces">
16+
<li><Link activeClassName='active' to="/docs/31_context_urls/">Context URLs</Link></li>
17+
<li><Link activeClassName='active' to="/docs/32_life_of_workspace/">Life of a Workspace</Link></li>
18+
<li><Link activeClassName='active' to="/docs/33_sharing_and_collaboration/">Collaboration & Sharing</Link></li>
19+
<li><Link activeClassName='active' to="/docs/34_command_line_interface/">Command Line Interface</Link></li>
20+
</Linkset>
21+
22+
<Linkset isRendered={true} caption="Configure Your Repository" path="40_configuration">
23+
<li><Link activeClassName='active' to="/docs/41_config_gitpod_file/">.gitpod.yml</Link></li>
24+
<li><Link activeClassName='active' to="/docs/42_config_docker/">Docker Image</Link></li>
25+
<li><Link activeClassName='active' to="/docs/43_config_ports/">Exposing Ports</Link></li>
26+
<li><Link activeClassName='active' to="/docs/44_config_start_tasks/">Start Tasks</Link></li>
27+
<li><Link activeClassName='active' to="/docs/vscode-extensions/">VS Code Extensions</Link></li>
28+
<li><Link activeClassName='active' to="/docs/45_checkout_location/">Workspace Location</Link></li>
29+
<li><Link activeClassName='active' to="/docs/46_prebuilds/">Prebuilt Workspaces</Link></li>
30+
<li><Link activeClassName='active' to="/docs/47_environment_variables/">Environment Variables</Link></li>
31+
</Linkset>
32+
33+
<Linkset isRendered={true} caption="Theia – Gitpod's IDE" path="50_ide">
34+
<li><Link activeClassName='active' to="/docs/52_tips_and_tricks/">Tips & Tricks</Link></li>
35+
<li><Link activeClassName='active' to="/docs/54_git/">Git Integration</Link></li>
36+
<li><Link activeClassName='active' to="/docs/56_search/">Search</Link></li>
37+
<li><Link activeClassName='active' to="/docs/58_pull_requests/">Pull Requests</Link></li>
38+
<li><Link activeClassName='active' to="/docs/59_code_reviews/">Code Reviews</Link></li>
39+
</Linkset>
40+
41+
<Linkset isRendered={true} caption="Languages & Frameworks" path="languages_and_frameworks">
42+
<li><Link activeClassName='active' to="/docs/java_in_gitpod/">Java</Link></li>
43+
<li><Link activeClassName='active' to="/docs/python_in_gitpod/">Python</Link></li>
44+
</Linkset>
45+
46+
<Linkset isRendered={true} caption="Dashboard" path="60_dashboard">
47+
</Linkset>
48+
49+
<Linkset isRendered={true} caption="Subscriptions" path="70_subscriptions">
50+
</Linkset>
51+
52+
<Linkset isRendered={true} caption="Release Notes" path="80_release_notes">
53+
<li><Link activeClassName='active' to="/docs/release-notes/2019-06-17/june-2019">June 2019</Link></li>
54+
<li><Link activeClassName='active' to="/docs/release-notes/2019-04-05/april-2019/">April 2019</Link></li>
55+
<li><Link activeClassName='active' to="/docs/release-notes/2019-02-15/february-2019/">February 2019</Link></li>
56+
</Linkset>
57+
58+
</ul>
59+
</div>
60+
)
61+
62+
export default DocSideBar

‎src/components/DocTopicChooser.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
3+
import { navigate } from 'gatsby'
4+
import { MENU } from '../docs/menu';
5+
6+
7+
interface DocTopicChooserProps {
8+
}
9+
10+
function onSelectTopic(event: React.FormEvent<HTMLSelectElement>) {
11+
navigate(event.currentTarget.value);
12+
}
13+
14+
const DocTopicChooser: React.SFC<DocTopicChooserProps> = () => {
15+
return (
16+
<div>
17+
<select className='topic-chooser' onChange={onSelectTopic}>
18+
<option value='#' selected={true}>Select A Topic</option>
19+
{MENU.map(m => {
20+
return <>
21+
<option key={m.path} value={m.path}>{m.title}</option>
22+
{
23+
(m.subMenu || []).map(m =>
24+
<option key={m.path} value={m.path}>&nbsp;&nbsp;&nbsp;&nbsp;{m.title}</option>
25+
)
26+
}
27+
</>
28+
})}
29+
</select>
30+
</div>
31+
)
32+
}
33+
34+
35+
export default DocTopicChooser

‎src/components/Linkset.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React from 'react'
2+
3+
import styled from '@emotion/styled'
4+
import { colors } from '../styles/variables'
5+
import { Link } from 'gatsby'
6+
import Arrow from '../resources/arrow.svg'
7+
import DownArrow from '../resources/arrow-down.svg'
8+
9+
const StyledLinkSet = styled.div`
10+
11+
&:not(:last-child) {
12+
margin-bottom: 2rem;
13+
}
14+
15+
a {
16+
display: inline-block;
17+
font-size: 1.5rem;
18+
19+
&.caption {
20+
border: none;
21+
font-weight: 600;
22+
font-size: 1.9rem;
23+
24+
img {
25+
display: inline-block;
26+
margin: -2rem 1rem 0 0;
27+
}
28+
}
29+
30+
&:not(.caption) {
31+
padding-left: 2rem;
32+
}
33+
}
34+
35+
li {
36+
&:not(.caption) {
37+
padding-left: 2rem;
38+
}
39+
40+
a {
41+
color: ${colors.text};
42+
font-weight: 400;
43+
}
44+
}
45+
`
46+
47+
interface LinkSetProps {
48+
caption: string
49+
path?: string
50+
isRendered?: boolean
51+
}
52+
53+
class Linkset extends React.Component<LinkSetProps, {}> {
54+
55+
state = {
56+
isRendered: this.props.isRendered || false
57+
}
58+
59+
handleClick = () => {
60+
this.setState({isRendered: !this.state.isRendered})
61+
}
62+
63+
render() {
64+
65+
const { isRendered } = this.state
66+
const { caption, path, children } = this.props
67+
68+
return (
69+
<StyledLinkSet>
70+
<li>
71+
<Link
72+
to={path ? `/docs/${path}/` : '/docs/'}
73+
onClick={this.handleClick}
74+
className="caption"
75+
>{ isRendered ? <img alt="" src={Arrow}/> : <img alt="" src={DownArrow}/> }{caption}</Link>
76+
</li>
77+
{
78+
isRendered ? children : null
79+
}
80+
</StyledLinkSet>
81+
)
82+
}
83+
}
84+
85+
export default Linkset

‎src/layouts/docs.tsx

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import React from 'react'
2+
3+
import IndexLayout from './index'
4+
import styled from '@emotion/styled'
5+
import DownArrow from '../resources/arrow-down.svg'
6+
import { colors, shadows, sizes } from '../styles/variables'
7+
import DocSideBar from '../components/DocSideBar'
8+
import DocTopicChooser from '../components/DocTopicChooser'
9+
10+
const StyledDocsLayout = styled.div`
11+
12+
.content {
13+
display: flex;
14+
justify-content: space-between;
15+
padding-bottom: 10rem;
16+
17+
@media (max-width: ${sizes.breakpoints.md}) {
18+
flex-direction: column;
19+
}
20+
}
21+
22+
.sidebar {
23+
display: flex;
24+
flex-direction: column;
25+
width: 100%;
26+
width: 32rem;
27+
margin-top: 10rem;
28+
padding: 3rem 1rem;
29+
background: ${colors.offWhite};
30+
box-shadow: ${shadows.light};
31+
32+
@media(max-width: ${sizes.breakpoints.md}) {
33+
display: none;
34+
}
35+
}
36+
37+
.active {
38+
color: ${colors.link};
39+
}
40+
41+
.topic-chooser {
42+
display: block;
43+
margin: 0 auto;
44+
font: inherit;
45+
color: inherit;
46+
padding: 1rem 2.5rem;
47+
background: #fff;
48+
border: 1px solid #ddd;
49+
-moz-appearance: none;
50+
-webkit-appearance: none;
51+
appearance: none;
52+
background-image: url(${DownArrow}),
53+
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
54+
background-repeat: no-repeat, repeat;
55+
background-position: right 1.7em top 50%, 0 0;
56+
background-size: 1.65em auto, 100%;
57+
@media(min-width: ${sizes.breakpoints.md}) {
58+
display: none;
59+
}
60+
}
61+
62+
.article {
63+
max-width: 80rem;
64+
65+
66+
&__container {
67+
background: ${colors.white};
68+
box-shadow: ${shadows.light};
69+
padding: 3rem 1rem;
70+
position: relative;
71+
margin-top: 10rem;
72+
73+
@media(min-width: ${sizes.breakpoints.md}) {
74+
padding: 5rem;
75+
}
76+
}
77+
78+
h1 {
79+
margin-bottom: 3rem;
80+
}
81+
82+
h2 {
83+
margin: 6rem 0 3rem;
84+
}
85+
86+
ul, ol {
87+
margin: 3rem 0;
88+
}
89+
90+
li {
91+
font-weight: 300;
92+
93+
@media(max-width: ${sizes.breakpoints.md}) {
94+
list-style-position: inside;
95+
}
96+
}
97+
98+
li + li {
99+
margin-top: 2rem;
100+
}
101+
102+
pre {
103+
margin: 1.5rem 0;
104+
}
105+
106+
}
107+
108+
.arrows {
109+
text-align: center;
110+
margin: 10rem 0;
111+
}
112+
113+
.prev,
114+
.next {
115+
display: inline-block;
116+
height: 2rem;
117+
opacity: .7;
118+
}
119+
120+
.prev {
121+
transform: rotate(90deg);
122+
margin-right: 4rem;
123+
}
124+
125+
.next {
126+
transform: rotate(-90deg);
127+
}
128+
129+
`
130+
131+
interface DocsLayoutProps {
132+
canonical: string
133+
title: string
134+
}
135+
136+
const DocsLayout: React.SFC<DocsLayoutProps> = ({ children, canonical, title}) => (
137+
<IndexLayout canonical={canonical} title={title}>
138+
<StyledDocsLayout>
139+
<div className="grey-container">
140+
<div className="content row">
141+
<div>
142+
<DocSideBar />
143+
<DocTopicChooser />
144+
</div>
145+
{children}
146+
</div>
147+
</div>
148+
</StyledDocsLayout>
149+
</IndexLayout>
150+
)
151+
152+
export default DocsLayout

‎src/resources/arrow-down.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/resources/arrow.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/styles/normalize.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ export default `
5151
}
5252
5353
@media(max-width: ${sizes.breakpoints.sm}) {
54-
width: 95%;
5554
padding: 0 .5rem;
5655
}
5756
}

0 commit comments

Comments
 (0)