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

Commit

Permalink
basic setup.
Browse files Browse the repository at this point in the history
  • Loading branch information
@nisarhassan12
nisarhassan12 committed Mar 18, 2021
1 parent b30d7c0 commit bcf8ce6
Show file tree
Hide file tree
Showing 13 changed files with 129 additions and 203 deletions.
5 changes: 2 additions & 3 deletions src/components/LayoutRoot.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react'
import { Global, css } from '@emotion/core'
import styled from '@emotion/styled'
import base from '../styles/base'
import { BaseStyles } from '../styles/base'

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

const LayoutRoot: React.SFC<LayoutRootProps> = ({ children, className }) => (
<>
<Global styles={() => css(base)} />
<BaseStyles />
<StyledLayoutRoot className={className}>{children}</StyledLayoutRoot>
</>
)
Expand Down
17 changes: 5 additions & 12 deletions src/layouts/docs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ import React from 'react'
import IndexLayout from './index'
import styled from '@emotion/styled'
import { colors, sizes } from '../styles/variables'
import DocSideBar from '../components/docs/DocSideBar'
import DocTopicChooser from '../components/docs/DocTopicChooser'
import BackToTopButton from '../components/BackToTopButton'

const StyledDocsLayout = styled.div`
.content {
Expand Down Expand Up @@ -134,18 +131,14 @@ interface DocsLayoutProps {
body: JSX.Element
}

const DocsLayout: React.SFC<DocsLayoutProps> = ({ canonical, title, body}) => (
const DocsLayout: React.SFC<DocsLayoutProps> = ({ canonical, title, body }) => (
<IndexLayout canonical={canonical} title={title} description="Explore the documentation to learn more about Gitpod.io and Gitpod Self-Hosted.">
<StyledDocsLayout>
<div className="row">
<div className="content">
<DocSideBar />
<DocTopicChooser />
{body}
</div>
<div className="row">
<div className="content">
{body}
</div>
<BackToTopButton />

</div>
</StyledDocsLayout>
</IndexLayout>
)
Expand Down
162 changes: 61 additions & 101 deletions src/layouts/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,52 @@
import * as React from 'react'
import { Helmet } from 'react-helmet'
import { StaticQuery, graphql, Link } from 'gatsby'
import CookieConsent from 'react-cookie-consent'
import { StaticQuery, graphql } from 'gatsby'

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

import LayoutRoot from '../components/LayoutRoot'
import LayoutMain from '../components/LayoutMain'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import MinimalFooter from '../components/MinimalFooter'
import AnnoucementBanner from '../components/AnnouncementBanner'


type StaticQueryProps = {
site: {
siteMetadata: {
title: string
description: string
siteUrl: string
site: {
siteMetadata: {
title: string
description: string
siteUrl: string
}
}
}
}

class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, isAFlowPage?: boolean, showReInstallExtensionButton?: boolean, ogImage?:string}, {}> {
handleFirstTab = (e: any) => {
if (e.key === 'Tab') {
// the "I am a keyboard user" key
document.body.classList.add('user-is-tabbing')
window.removeEventListener('keydown', this.handleFirstTab)
window.addEventListener('mousedown', this.handleMouseDownOnce)
class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, ogImage?: string }, {}> {
handleFirstTab = (e: any) => {
if (e.key === 'Tab') {
// the "I am a keyboard user" key
document.body.classList.add('user-is-tabbing')
window.removeEventListener('keydown', this.handleFirstTab)
window.addEventListener('mousedown', this.handleMouseDownOnce)
}
}
}

handleMouseDownOnce = () => {
document.body.classList.remove('user-is-tabbing')
handleMouseDownOnce = () => {
document.body.classList.remove('user-is-tabbing')

window.removeEventListener('mousedown', this.handleMouseDownOnce)
window.addEventListener('keydown', this.handleFirstTab)
}
window.removeEventListener('mousedown', this.handleMouseDownOnce)
window.addEventListener('keydown', this.handleFirstTab)
}

componentDidMount() {
window.addEventListener('keydown', this.handleFirstTab)
}
componentDidMount() {
window.addEventListener('keydown', this.handleFirstTab)
}

render() {
const { title, canonical, description, ogImage, children } = this.props
render() {
const { title, canonical, description, ogImage, children } = this.props

return (
<StaticQuery
query={graphql`
return (
<StaticQuery
query={graphql`
query IndexLayoutQuery {
site {
siteMetadata {
Expand All @@ -62,75 +57,40 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string;
}
}
`}
render={(data: StaticQueryProps) => (
<LayoutRoot>
<Helmet>
<html lang="en" />
<title>{(title && `${title} - Gitpod`) || data.site.siteMetadata.title}</title>
<meta name="description" content={description || data.site.siteMetadata.description} />
<meta
name="keywords"
content="dev environment, development environment, devops, cloud ide, github ide, gitlab ide, javascript, online ide, web ide, code review"
/>
{canonical ? <link rel="canonical" href={`${data.site.siteMetadata.siteUrl}${canonical}`} /> : null}
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet" />
<meta name="theme-color" content={colors.white} />
<link rel="apple-touch-icon" type="image/png" href={GitpodIconApple} sizes="180x180" />
<link rel="icon" type="image/png" href={GitpodIcon196} sizes="196x196" />
<link rel="icon" type="image/svg+xml" href={GitpodIcon} sizes="any" />
render={(data: StaticQueryProps) => (
<LayoutRoot>
<Helmet>
<html lang="en" />
<title>{(title && `${title} - Gitpod`) || data.site.siteMetadata.title}</title>
<meta name="description" content={description || data.site.siteMetadata.description} />
<meta
name="keywords"
content="dev environment, development environment, devops, cloud ide, github ide, gitlab ide, javascript, online ide, web ide, code review"
/>
{canonical ? <link rel="canonical" href={`${data.site.siteMetadata.siteUrl}${canonical}`} /> : null}
<link href="/font.css" rel="stylesheet" />
<link rel="apple-touch-icon" type="image/png" href={GitpodIconApple} sizes="180x180" />
<link rel="icon" type="image/png" href={GitpodIcon196} sizes="196x196" />
<link rel="icon" type="image/svg+xml" href={GitpodIcon} sizes="any" />

<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:site" content="@gitpod"></meta>
<meta name="twitter:creator" content="@gitpod"></meta>
<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:site" content="@gitpod"></meta>
<meta name="twitter:creator" content="@gitpod"></meta>

<meta property="og:url" content={data.site.siteMetadata.siteUrl} />
<meta property="og:title" content={title || data.site.siteMetadata.title} />
<meta property="og:description" content={description || data.site.siteMetadata.description} />
<meta property="og:image" content={ogImage || "https://www.gitpod.io/media-image.jpg"} />
<meta property="og:url" content={data.site.siteMetadata.siteUrl} />
<meta property="og:title" content={title || data.site.siteMetadata.title} />
<meta property="og:description" content={description || data.site.siteMetadata.description} />
<meta property="og:image" content={ogImage || "https://www.gitpod.io/media-image.jpg"} />

<meta name="google-site-verification" content="NBio3hCkfn2FKJpqZritJpXuyKo54noPGZzWsjDIp-M" />
</Helmet>
<AnnoucementBanner />
<Nav isAFlowPage={this.props.isAFlowPage} showReInstallExtensionButton={this.props.showReInstallExtensionButton}/>
<LayoutMain>
<CookieConsent
buttonClasses="primary"
containerClasses="consent"
style={{
backgroundColor: colors.white,
color: colors.text,
borderTop: borders.light,
zIndex: '2000000000'
}}
contentStyle={{
backgroundColor: 'transparent',
margin: '10px 15px'
}}
buttonStyle={{
backgroundColor: 'transparent',
border: 'solid 1px ' + colors.text,
borderRadius: '100px',
padding: '.8rem 2.2rem',
margin: '10px 15px'
}}
>
This website uses cookies to
<br /> enhance the user experience.
<br /> Read our{' '}
<Link style={{ color: '#35C9FF' }} to="/privacy/">
privacy policy
</Link>{' '}
for more info.
</CookieConsent>
{children}
</LayoutMain>
{
!this.props.isAFlowPage ? <Footer /> : <MinimalFooter />
}
</LayoutRoot>
)}
/>
)
}
<meta name="google-site-verification" content="NBio3hCkfn2FKJpqZritJpXuyKo54noPGZzWsjDIp-M" />
</Helmet>
<LayoutMain>
{children}
</LayoutMain>
</LayoutRoot>
)}
/>
)
}
}
export default IndexLayout
24 changes: 5 additions & 19 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,5 @@
import React from 'react';

import tw from "twin.macro";

const Button = tw.button`
bg-blue-500
hover:bg-blue-800
text-white
p-2
rounded
`

const IndexPage = () => (
<>
<Button>A Nice Button</Button>
</>
)

export default IndexPage
export default () => {
return <div>
<h1>In the name of God.</h1>
</div>
}
25 changes: 25 additions & 0 deletions src/styles/base.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Global, css } from '@emotion/core'

export const BaseStyles = () => (
<Global
styles={css`
/* -------------------------------------- */
/* --- Base Setup --- */
/* -------------------------------------- */
:root {
--font: 'ABCDiatype', sans-serif;
}
html {
font-size: 62.5%;
}
body {
font-family: var(--font);
color: red;
}
`}
/>
)
54 changes: 0 additions & 54 deletions src/templates/blog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,10 @@ import styled from '@emotion/styled'
import { graphql } from 'gatsby'

import IndexLayout from '../layouts'
import PostBanner from '../components/blog/PostBanner'
import { Helmet } from 'react-helmet'
import { parseAuthors } from '../contents/authors'
import { colors, shadows, sizes, borders } from '../styles/variables'
// import NewsletterForm from '../components/NewsletterForm'
import BackToTopButton from '../components/BackToTopButton'
import MorePosts from '../components/blog/MorePosts'
import SharePost from '../components/blog/SharePost'

interface BlogTemplateProps {
data: {
Expand Down Expand Up @@ -205,65 +201,15 @@ const BlogTemplate: React.SFC<BlogTemplateProps> = ({ data }) => {
<Wrapper>
<div className="pattern" style={{ marginBottom: '10rem' }}>
<StyledBlogTemplate>
<PostBanner
teaserImage={
data.markdownRemark.frontmatter.teaserImage
? data.markdownRemark.frontmatter.teaserImage
: data.markdownRemark.frontmatter.image
}
title={title}
subtitle={data.markdownRemark.frontmatter.subtitle}
date={
<span>
{new Date(Date.parse(data.markdownRemark.frontmatter.date)).toLocaleDateString('en-GB', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</span>
}
author={
<span>
By{' '}
{authors.map((author, idx) => (
<React.Fragment>
<a href={`https://github.com/${author.socialProfiles.github}`} target="_blank">
{author.name}
</a>
{idx < authors.length - 1 ? ', ' : ''}
</React.Fragment>
))}
</span>
}
shareButtons={
<SharePost
title={title}
authors={authors}
url={`https://www.gitpod.io${data.markdownRemark.fields.slug}`}
dontRenderHeading={true}
/>
}
/>
<div className="contents">
<div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
</div>

<SharePost
title={title}
authors={authors}
url={`https://www.gitpod.io${data.markdownRemark.fields.slug}`}
/>

</StyledBlogTemplate>
</div>
</Wrapper>

<MorePosts posts={posts} />

{/* <NewsletterForm /> */}

<BackToTopButton />
</IndexLayout>
)
}
Expand Down
Loading

0 comments on commit bcf8ce6

Please sign in to comment.