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

Commit 203074c

Browse files
nisarhassan12svenefftinge
nisarhassan12
authored and
svenefftinge
committed
[self-hosted] update section install self-hosted.
1 parent d0f69c9 commit 203074c

File tree

3 files changed

+120
-167
lines changed

3 files changed

+120
-167
lines changed

‎src/components/self-hosted/Install.tsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React from 'react'
2+
3+
import styled from '@emotion/styled'
4+
import Kubernetes from '../../resources/kubernetes.svg'
5+
import { colors, sizes, borders } from '../../styles/variables'
6+
import GoogleCloudLogo from '../../resources/google-cloud-logo.svg'
7+
import { Link } from 'gatsby'
8+
9+
interface InstallProps {
10+
title: string
11+
img: string
12+
alt: string
13+
text: string
14+
linkPath: string
15+
}
16+
17+
const installs: InstallProps[] = [
18+
{
19+
title: "Vanilla Kubernetes",
20+
img: Kubernetes,
21+
alt: "Kubernetes",
22+
text: "All you need is a domain and a Kubernetes cluster.",
23+
linkPath: '' // Todo add link path here
24+
},
25+
{
26+
title: "Google Cloud Platform",
27+
img: GoogleCloudLogo,
28+
alt: "Google Cloud",
29+
text: " Install Gitpod optimised for Google Cloud Platform.",
30+
linkPath: '' // Todo add link path here
31+
}
32+
]
33+
34+
const StyledSection = styled.section`
35+
36+
text-align: center;
37+
background: ${colors.offWhite};
38+
39+
/* ------------------------------------------- */
40+
/* ----- Section Install ----- */
41+
/* ------------------------------------------- */
42+
43+
.install {
44+
display: flex;
45+
justify-content: space-between;
46+
max-width: 75rem;
47+
margin: 0 auto;
48+
padding: 4rem 0 5rem;
49+
50+
@media(max-width: ${sizes.breakpoints.lg}) {
51+
flex-direction: column;
52+
align-items: center;
53+
}
54+
55+
&__box {
56+
max-width: 32rem;
57+
padding: 3rem 2rem;
58+
background: ${colors.white};
59+
border: ${borders.light};
60+
61+
@media(max-width: ${sizes.breakpoints.lg}) {
62+
margin: 5rem 0 0;
63+
}
64+
65+
img {
66+
height: 6rem;
67+
margin-bottom: 3rem;
68+
}
69+
70+
.btn {
71+
margin-top: 2rem;
72+
}
73+
}
74+
75+
& + p {
76+
@media(max-width: ${sizes.breakpoints.lg}) {
77+
max-width: 70rem;
78+
margin: 0 auto;
79+
}
80+
}
81+
82+
}
83+
84+
`
85+
86+
const Install = () => (
87+
<StyledSection className="install__section">
88+
<div className="row" id="install">
89+
<h2>Install Self-Hosted Gitpod</h2>
90+
<div className="install">
91+
{
92+
installs.map(({ title, text, img, alt }: InstallProps, i) => (
93+
<div key={`${i}+${title}`}className="install__box">
94+
<img src={img} alt={alt} />
95+
<h3>{title}</h3>
96+
<p>
97+
{text}
98+
</p>
99+
<Link to="/docs/" className="btn">Install Now</Link>
100+
</div>
101+
))
102+
}
103+
</div>
104+
<p>Enhanced support for Amazon Elastic Kuberenetes Service(EKS), Azure Kubernetes Service(AKS), and Openshift is coming soon.</p>
105+
</div>
106+
</StyledSection>
107+
)
108+
109+
export default Install

‎src/pages/self-hosted.tsx

Lines changed: 10 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import React from 'react'
22

33
import IndexLayout from '../layouts'
44
import styled from '@emotion/styled'
5-
import { colors, sizes, borders } from '../styles/variables'
65
import Cloud from '../resources/cloud.svg'
7-
import { Link } from 'gatsby'
8-
import Kubernetes from '../resources/kubernetes.svg'
96
import Details from '../components/Details'
107
import Banner from '../components/Banner'
118
import ActionCard from '../components/ActionCard'
@@ -15,131 +12,11 @@ import Control from '../resources/control.svg'
1512
import Support from '../resources/support.svg'
1613
import GithubGitlab from '../resources/github-gitlab.svg'
1714
import Adminstration from '../resources/administration.svg'
15+
import Install from '../components/self-hosted/Install'
1816

1917
const StyledSelfHostedPage = styled.div`
20-
/* ------------------------------------------- */
21-
/* ----- Section Install ----- */
22-
/* ------------------------------------------- */
23-
24-
.install {
25-
display: flex;
26-
justify-content: space-between;
27-
28-
@media(max-width: ${sizes.breakpoints.lg}) {
29-
flex-direction: column;
30-
align-items: center;
31-
}
32-
33-
&__steps {
34-
list-style: none;
35-
36-
& + p {
37-
margin-top: 6rem;
38-
39-
@media(max-width: ${sizes.breakpoints.md}) {
40-
margin: 3rem 0 3rem;
41-
}
42-
}
43-
}
44-
45-
&__step {
46-
position: relative;
47-
margin-bottom: 5rem;
48-
transform: translateX(5rem);
49-
50-
@media(max-width: ${sizes.breakpoints.md}) {
51-
margin-bottom: 3rem;
52-
transform: translateX(4rem);
53-
}
54-
55-
span {
56-
position: absolute;
57-
top: -2.5rem;
58-
left: -5rem;
59-
font-size: 4.5rem;
60-
font-weight: 600;
61-
color: ${colors.textDark};
62-
63-
@media(max-width: ${sizes.breakpoints.md}) {
64-
top: -1.5rem;
65-
left: -4rem;
66-
font-size: 3.5rem;
67-
}
68-
69-
@media(max-width: 523px) {
70-
font-size: 2.5rem;
71-
top: -1rem;
72-
left: -3rem;
73-
}
74-
}
75-
76-
a {
77-
margin: 0 1rem;
78-
}
79-
}
80-
81-
&__kubernetes {
82-
max-width: 32rem;
83-
padding: 3rem 2rem;
84-
border: ${borders.light1};
85-
86-
@media(max-width: ${sizes.breakpoints.lg}) {
87-
margin: 5rem 0 0;
88-
}
89-
90-
h3, div {
91-
text-align: center;
92-
}
93-
94-
div {
95-
margin: 4rem 0 2rem;
96-
}
97-
98-
img {
99-
height: 6rem;
100-
}
101-
}
102-
103-
&__more-details {
104-
margin-top: 5rem;
105-
}
106-
}
10718
10819
`
109-
110-
const Terminal = styled.code`
111-
display: block;
112-
margin-top: 2rem;
113-
padding: 1rem;
114-
color: ${colors.white};
115-
font-family: monospace;
116-
font-size: 1.8rem;
117-
background-color: ${colors.text};
118-
border-radius: 5px;
119-
120-
@media(max-width: ${sizes.breakpoints.md}) {
121-
font-size: 1.5rem;
122-
padding: .7rem;
123-
}
124-
125-
@media(max-width: 530px) {
126-
transform: translateX(-4rem);
127-
}
128-
`;
129-
const StepP = styled.p`
130-
font-size: 1.8rem;
131-
132-
@media(max-width: ${sizes.breakpoints.md}) {
133-
font-size: 1.6rem;
134-
}
135-
136-
@media(min-width: ${sizes.breakpoints.sm}) {
137-
br {
138-
display: none;
139-
}
140-
}
141-
`;
142-
14320
const features: FeatureProps[] = [
14421
{
14522
title: 'Full Data Control',
@@ -174,76 +51,42 @@ const SelfHostedPage: React.SFC<{}> = () => (
17451
<Banner
17552
subtitle="Self-hosted Gitpod"
17653
title={<h1>
177-
Keep Your Data on Your Network and
54+
Keep Your Data on Your Network and
17855
<br />
179-
Host it on <strong>Your Own Infrastructure.</strong>
56+
Host it on <strong>Your Own Infrastructure.</strong>
18057
</h1>}
18158
linkPath="/self-hosted/#install"
18259
linkText="Install Now"
183-
img={<object role="presentation" tabIndex={-1} data={Cloud}/>}
184-
children={<span style={{fontWeight: 600}}>And Start Your 30-day Free Trial.</span>}
60+
img={<object role="presentation" tabIndex={-1} data={Cloud} />}
61+
children={<span style={{ fontWeight: 600 }}>And Start Your 30-day Free Trial.</span>}
18562
/>
18663
</div>
187-
64+
18865
{/* ----- Section Features ----- */}
18966

19067
<Features features={features} />
19168

19269
{/* ----- Section Install ----- */}
19370

194-
<div className="row" id="install">
195-
<section className="install">
196-
<div className="install__steps-container">
197-
<h2>Install Self-Hosted Gitpod</h2>
198-
<ol className="install__steps">
199-
<li className="install__step">
200-
<span>1.</span>
201-
<StepP>In your terminal run:</StepP>
202-
<Terminal>
203-
git clone <a href="https://github.com/gitpod-io/self-hosted" target="_blank">https://github.com/gitpod-io/self-hosted</a>
204-
</Terminal>
205-
</li>
206-
<li className="install__step">
207-
<span>2.</span><StepP>Adjust the configuration from <br />the repository to your needs.</StepP>
208-
</li>
209-
<li className="install__step">
210-
<span>3.</span><StepP>Run</StepP>
211-
<Terminal>
212-
helm install -f ... gitpod
213-
</Terminal>
214-
</li>
215-
</ol>
216-
<StepP>Enjoy!</StepP>
217-
<StepP>For more details see the <Link to="/docs/self-hosted/latest/self-hosted/">Installation Instructions.</Link></StepP>
218-
</div>
219-
<div className="install__kubernetes">
220-
<h3>Runs on Kubernetes</h3>
221-
<div><img alt="Kubernetes Logo" src={Kubernetes} /></div>
222-
<p>Gitpod can run on vanilla Kubernetes and there is a setup opimized for Google Kubernetes Engine(GKE).</p>
223-
<p>Optimized support for Amazon Elastic Kuberenetes Service(EKS), Azure Kubernetes Service(AKS), and Openshift is coming soon.</p>
224-
<p className="install__more-details">See <a href="/docs/self-hosted/latest/install/install-on-gcp-script">Install on GKE</a></p>
225-
</div>
226-
</section>
227-
228-
</div>
71+
<Install />
22972

23073
{/* ----- Section Customizations ----- */}
23174

23275
<ActionCard
23376
title="Need Any Customizations?"
23477
text={
23578
<React.Fragment>
236-
<p>We’re happy to adjust Gitpod to your needs.<br/>Please get in touch for details.</p>
79+
<p>We’re happy to adjust Gitpod to your needs.<br />Please get in touch for details.</p>
23780
</React.Fragment>}
238-
anchors={[{href: '/contact/', subject: 'I have a question regarding Self-Hosted Gitpod', text: 'Contact'}]}
81+
anchors={[{ href: '/contact/', subject: 'I have a question regarding Self-Hosted Gitpod', text: 'Contact' }]}
23982
/>
24083

24184
{/* ----- Section More About Self Hosting ----- */}
24285

24386
<Details
24487
title="More About Self-Hosting"
24588
text="Learn about collaboration, workspace snapshots, supported programming languages, and much more."
246-
anchors={[{href: '/enterprise/#enterprise', text: 'Pricing'}, {href: '/docs/self-hosted/latest/self-hosted/', text: 'Documentation'}]}
89+
anchors={[{ href: '/enterprise/#enterprise', text: 'Pricing' }, { href: '/docs/self-hosted/latest/self-hosted/', text: 'Documentation' }]}
24790
/>
24891

24992
</StyledSelfHostedPage>

‎src/resources/google-cloud-logo.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)