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

Commit bcf8ce6

Browse files
nisarhassan12nisarhassan12
committed
basic setup.
1 parent b30d7c0 commit bcf8ce6

File tree

13 files changed

+129
-203
lines changed

13 files changed

+129
-203
lines changed

‎src/components/LayoutRoot.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react'
2-
import { Global, css } from '@emotion/core'
32
import styled from '@emotion/styled'
4-
import base from '../styles/base'
3+
import { BaseStyles } from '../styles/base'
54

65
const StyledLayoutRoot = styled.div`
76
display: flex;
@@ -15,7 +14,7 @@ interface LayoutRootProps {
1514

1615
const LayoutRoot: React.SFC<LayoutRootProps> = ({ children, className }) => (
1716
<>
18-
<Global styles={() => css(base)} />
17+
<BaseStyles />
1918
<StyledLayoutRoot className={className}>{children}</StyledLayoutRoot>
2019
</>
2120
)

‎src/layouts/docs.tsx

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ import React from 'react'
33
import IndexLayout from './index'
44
import styled from '@emotion/styled'
55
import { colors, sizes } from '../styles/variables'
6-
import DocSideBar from '../components/docs/DocSideBar'
7-
import DocTopicChooser from '../components/docs/DocTopicChooser'
8-
import BackToTopButton from '../components/BackToTopButton'
96

107
const StyledDocsLayout = styled.div`
118
.content {
@@ -134,18 +131,14 @@ interface DocsLayoutProps {
134131
body: JSX.Element
135132
}
136133

137-
const DocsLayout: React.SFC<DocsLayoutProps> = ({ canonical, title, body}) => (
134+
const DocsLayout: React.SFC<DocsLayoutProps> = ({ canonical, title, body }) => (
138135
<IndexLayout canonical={canonical} title={title} description="Explore the documentation to learn more about Gitpod.io and Gitpod Self-Hosted.">
139136
<StyledDocsLayout>
140-
<div className="row">
141-
<div className="content">
142-
<DocSideBar />
143-
<DocTopicChooser />
144-
{body}
145-
</div>
137+
<div className="row">
138+
<div className="content">
139+
{body}
146140
</div>
147-
<BackToTopButton />
148-
141+
</div>
149142
</StyledDocsLayout>
150143
</IndexLayout>
151144
)

‎src/layouts/index.tsx

Lines changed: 61 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,52 @@
11
import * as React from 'react'
22
import { Helmet } from 'react-helmet'
3-
import { StaticQuery, graphql, Link } from 'gatsby'
4-
import CookieConsent from 'react-cookie-consent'
3+
import { StaticQuery, graphql } from 'gatsby'
54

6-
import { colors, borders } from '../styles/variables'
75
import GitpodIcon from '../resources/gitpod.svg'
86
import GitpodIcon196 from '../resources/gitpod-196x196.png'
97
import GitpodIconApple from '../resources/apple-touch-icon.png'
108

119
import LayoutRoot from '../components/LayoutRoot'
1210
import LayoutMain from '../components/LayoutMain'
13-
import Nav from '../components/Nav'
14-
import Footer from '../components/Footer'
15-
import MinimalFooter from '../components/MinimalFooter'
16-
import AnnoucementBanner from '../components/AnnouncementBanner'
11+
1712

1813
type StaticQueryProps = {
19-
site: {
20-
siteMetadata: {
21-
title: string
22-
description: string
23-
siteUrl: string
14+
site: {
15+
siteMetadata: {
16+
title: string
17+
description: string
18+
siteUrl: string
19+
}
2420
}
25-
}
2621
}
2722

28-
class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, isAFlowPage?: boolean, showReInstallExtensionButton?: boolean, ogImage?:string}, {}> {
29-
handleFirstTab = (e: any) => {
30-
if (e.key === 'Tab') {
31-
// the "I am a keyboard user" key
32-
document.body.classList.add('user-is-tabbing')
33-
window.removeEventListener('keydown', this.handleFirstTab)
34-
window.addEventListener('mousedown', this.handleMouseDownOnce)
23+
class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, ogImage?: string }, {}> {
24+
handleFirstTab = (e: any) => {
25+
if (e.key === 'Tab') {
26+
// the "I am a keyboard user" key
27+
document.body.classList.add('user-is-tabbing')
28+
window.removeEventListener('keydown', this.handleFirstTab)
29+
window.addEventListener('mousedown', this.handleMouseDownOnce)
30+
}
3531
}
36-
}
3732

38-
handleMouseDownOnce = () => {
39-
document.body.classList.remove('user-is-tabbing')
33+
handleMouseDownOnce = () => {
34+
document.body.classList.remove('user-is-tabbing')
4035

41-
window.removeEventListener('mousedown', this.handleMouseDownOnce)
42-
window.addEventListener('keydown', this.handleFirstTab)
43-
}
36+
window.removeEventListener('mousedown', this.handleMouseDownOnce)
37+
window.addEventListener('keydown', this.handleFirstTab)
38+
}
4439

45-
componentDidMount() {
46-
window.addEventListener('keydown', this.handleFirstTab)
47-
}
40+
componentDidMount() {
41+
window.addEventListener('keydown', this.handleFirstTab)
42+
}
4843

49-
render() {
50-
const { title, canonical, description, ogImage, children } = this.props
44+
render() {
45+
const { title, canonical, description, ogImage, children } = this.props
5146

52-
return (
53-
<StaticQuery
54-
query={graphql`
47+
return (
48+
<StaticQuery
49+
query={graphql`
5550
query IndexLayoutQuery {
5651
site {
5752
siteMetadata {
@@ -62,75 +57,40 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string;
6257
}
6358
}
6459
`}
65-
render={(data: StaticQueryProps) => (
66-
<LayoutRoot>
67-
<Helmet>
68-
<html lang="en" />
69-
<title>{(title && `${title} - Gitpod`) || data.site.siteMetadata.title}</title>
70-
<meta name="description" content={description || data.site.siteMetadata.description} />
71-
<meta
72-
name="keywords"
73-
content="dev environment, development environment, devops, cloud ide, github ide, gitlab ide, javascript, online ide, web ide, code review"
74-
/>
75-
{canonical ? <link rel="canonical" href={`${data.site.siteMetadata.siteUrl}${canonical}`} /> : null}
76-
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet" />
77-
<meta name="theme-color" content={colors.white} />
78-
<link rel="apple-touch-icon" type="image/png" href={GitpodIconApple} sizes="180x180" />
79-
<link rel="icon" type="image/png" href={GitpodIcon196} sizes="196x196" />
80-
<link rel="icon" type="image/svg+xml" href={GitpodIcon} sizes="any" />
60+
render={(data: StaticQueryProps) => (
61+
<LayoutRoot>
62+
<Helmet>
63+
<html lang="en" />
64+
<title>{(title && `${title} - Gitpod`) || data.site.siteMetadata.title}</title>
65+
<meta name="description" content={description || data.site.siteMetadata.description} />
66+
<meta
67+
name="keywords"
68+
content="dev environment, development environment, devops, cloud ide, github ide, gitlab ide, javascript, online ide, web ide, code review"
69+
/>
70+
{canonical ? <link rel="canonical" href={`${data.site.siteMetadata.siteUrl}${canonical}`} /> : null}
71+
<link href="/font.css" rel="stylesheet" />
72+
<link rel="apple-touch-icon" type="image/png" href={GitpodIconApple} sizes="180x180" />
73+
<link rel="icon" type="image/png" href={GitpodIcon196} sizes="196x196" />
74+
<link rel="icon" type="image/svg+xml" href={GitpodIcon} sizes="any" />
8175

82-
<meta name="twitter:card" content="summary"></meta>
83-
<meta name="twitter:site" content="@gitpod"></meta>
84-
<meta name="twitter:creator" content="@gitpod"></meta>
76+
<meta name="twitter:card" content="summary"></meta>
77+
<meta name="twitter:site" content="@gitpod"></meta>
78+
<meta name="twitter:creator" content="@gitpod"></meta>
8579

86-
<meta property="og:url" content={data.site.siteMetadata.siteUrl} />
87-
<meta property="og:title" content={title || data.site.siteMetadata.title} />
88-
<meta property="og:description" content={description || data.site.siteMetadata.description} />
89-
<meta property="og:image" content={ogImage || "https://www.gitpod.io/media-image.jpg"} />
80+
<meta property="og:url" content={data.site.siteMetadata.siteUrl} />
81+
<meta property="og:title" content={title || data.site.siteMetadata.title} />
82+
<meta property="og:description" content={description || data.site.siteMetadata.description} />
83+
<meta property="og:image" content={ogImage || "https://www.gitpod.io/media-image.jpg"} />
9084

91-
<meta name="google-site-verification" content="NBio3hCkfn2FKJpqZritJpXuyKo54noPGZzWsjDIp-M" />
92-
</Helmet>
93-
<AnnoucementBanner />
94-
<Nav isAFlowPage={this.props.isAFlowPage} showReInstallExtensionButton={this.props.showReInstallExtensionButton}/>
95-
<LayoutMain>
96-
<CookieConsent
97-
buttonClasses="primary"
98-
containerClasses="consent"
99-
style={{
100-
backgroundColor: colors.white,
101-
color: colors.text,
102-
borderTop: borders.light,
103-
zIndex: '2000000000'
104-
}}
105-
contentStyle={{
106-
backgroundColor: 'transparent',
107-
margin: '10px 15px'
108-
}}
109-
buttonStyle={{
110-
backgroundColor: 'transparent',
111-
border: 'solid 1px ' + colors.text,
112-
borderRadius: '100px',
113-
padding: '.8rem 2.2rem',
114-
margin: '10px 15px'
115-
}}
116-
>
117-
This website uses cookies to
118-
<br /> enhance the user experience.
119-
<br /> Read our{' '}
120-
<Link style={{ color: '#35C9FF' }} to="/privacy/">
121-
privacy policy
122-
</Link>{' '}
123-
for more info.
124-
</CookieConsent>
125-
{children}
126-
</LayoutMain>
127-
{
128-
!this.props.isAFlowPage ? <Footer /> : <MinimalFooter />
129-
}
130-
</LayoutRoot>
131-
)}
132-
/>
133-
)
134-
}
85+
<meta name="google-site-verification" content="NBio3hCkfn2FKJpqZritJpXuyKo54noPGZzWsjDIp-M" />
86+
</Helmet>
87+
<LayoutMain>
88+
{children}
89+
</LayoutMain>
90+
</LayoutRoot>
91+
)}
92+
/>
93+
)
94+
}
13595
}
13696
export default IndexLayout

‎src/pages/index.tsx

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
1-
import React from 'react';
2-
3-
import tw from "twin.macro";
4-
5-
const Button = tw.button`
6-
bg-blue-500
7-
hover:bg-blue-800
8-
text-white
9-
p-2
10-
rounded
11-
`
12-
13-
const IndexPage = () => (
14-
<>
15-
<Button>A Nice Button</Button>
16-
</>
17-
)
18-
19-
export default IndexPage
1+
export default () => {
2+
return <div>
3+
<h1>In the name of God.</h1>
4+
</div>
5+
}

‎src/styles/base.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Global, css } from '@emotion/core'
2+
3+
export const BaseStyles = () => (
4+
<Global
5+
styles={css`
6+
/* -------------------------------------- */
7+
/* --- Base Setup --- */
8+
/* -------------------------------------- */
9+
10+
:root {
11+
--font: 'ABCDiatype', sans-serif;
12+
}
13+
14+
html {
15+
font-size: 62.5%;
16+
}
17+
18+
body {
19+
font-family: var(--font);
20+
color: red;
21+
}
22+
23+
`}
24+
/>
25+
)

‎src/templates/blog.tsx

Lines changed: 0 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@ import styled from '@emotion/styled'
33
import { graphql } from 'gatsby'
44

55
import IndexLayout from '../layouts'
6-
import PostBanner from '../components/blog/PostBanner'
76
import { Helmet } from 'react-helmet'
87
import { parseAuthors } from '../contents/authors'
98
import { colors, shadows, sizes, borders } from '../styles/variables'
109
// import NewsletterForm from '../components/NewsletterForm'
11-
import BackToTopButton from '../components/BackToTopButton'
12-
import MorePosts from '../components/blog/MorePosts'
13-
import SharePost from '../components/blog/SharePost'
1410

1511
interface BlogTemplateProps {
1612
data: {
@@ -205,65 +201,15 @@ const BlogTemplate: React.SFC<BlogTemplateProps> = ({ data }) => {
205201
<Wrapper>
206202
<div className="pattern" style={{ marginBottom: '10rem' }}>
207203
<StyledBlogTemplate>
208-
<PostBanner
209-
teaserImage={
210-
data.markdownRemark.frontmatter.teaserImage
211-
? data.markdownRemark.frontmatter.teaserImage
212-
: data.markdownRemark.frontmatter.image
213-
}
214-
title={title}
215-
subtitle={data.markdownRemark.frontmatter.subtitle}
216-
date={
217-
<span>
218-
{new Date(Date.parse(data.markdownRemark.frontmatter.date)).toLocaleDateString('en-GB', {
219-
weekday: 'long',
220-
year: 'numeric',
221-
month: 'long',
222-
day: 'numeric'
223-
})}
224-
</span>
225-
}
226-
author={
227-
<span>
228-
By{' '}
229-
{authors.map((author, idx) => (
230-
<React.Fragment>
231-
<a href={`https://github.com/${author.socialProfiles.github}`} target="_blank">
232-
{author.name}
233-
</a>
234-
{idx < authors.length - 1 ? ', ' : ''}
235-
</React.Fragment>
236-
))}
237-
</span>
238-
}
239-
shareButtons={
240-
<SharePost
241-
title={title}
242-
authors={authors}
243-
url={`https://www.gitpod.io${data.markdownRemark.fields.slug}`}
244-
dontRenderHeading={true}
245-
/>
246-
}
247-
/>
248204
<div className="contents">
249205
<div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
250206
</div>
251207

252-
<SharePost
253-
title={title}
254-
authors={authors}
255-
url={`https://www.gitpod.io${data.markdownRemark.fields.slug}`}
256-
/>
257-
258208
</StyledBlogTemplate>
259209
</div>
260210
</Wrapper>
261-
262-
<MorePosts posts={posts} />
263-
264211
{/* <NewsletterForm /> */}
265212

266-
<BackToTopButton />
267213
</IndexLayout>
268214
)
269215
}

0 commit comments

Comments
 (0)