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

Commit 47ea4c4

Browse files
vinaypuppalvinaypuppal
authored
MV landing page
* Landing page for v1 (#30) * (WIP) front page dev * 1. Changes nav bar links from all caps to title case 2. nav links reordered to home,learn,space,events,blog 3. blog opens in same page * 1. removed learn stock pics directory 2. added remaining props to row-events.js * triger travis script again
1 parent 1869547 commit 47ea4c4

File tree

7 files changed

+240
-27
lines changed

7 files changed

+240
-27
lines changed

‎components/header.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,6 @@ export default props => {
3030
path: '/',
3131
external: false,
3232
},
33-
{
34-
title: 'Events',
35-
path: '/events',
36-
external: false,
37-
},
3833
{
3934
title: 'Learn',
4035
path: '/learn',
@@ -45,10 +40,15 @@ export default props => {
4540
path: '/space',
4641
external: false,
4742
},
43+
{
44+
title: 'Events',
45+
path: '/events',
46+
external: false,
47+
},
4848
{
4949
title: 'Blog',
5050
path: 'https://medium.com/coderplex',
51-
external: true,
51+
external: false,
5252
},
5353
];
5454
return (
@@ -134,9 +134,8 @@ export default props => {
134134
}
135135
.nav__link {
136136
text-decoration: none;
137-
text-transform: uppercase;
138137
color: #666;
139-
font-size: 12px;
138+
font-size: 14px;
140139
padding-bottom: 4px;
141140
}
142141
.nav__link:hover {

‎components/row-events.js

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import React from 'react';
2-
import { Card, Icon } from 'semantic-ui-react';
2+
import { Card, Icon, Image } from 'semantic-ui-react';
33
import format from 'date-fns/format';
4+
import PropTypes from 'prop-types';
5+
6+
const extractImageUrl = input => {
7+
const regex = /<img.*?src=['"](.*?)['"]/;
8+
return regex.exec(input)[1];
9+
};
410

511
const RowEvent = props => {
612
return (
7-
<Card fluid raised target="_blank" href={props.link}>
13+
<Card fluid={props.fluid} raised centered target="_blank" href={props.link}>
14+
{props.description ? (
15+
<Image src={extractImageUrl(props.description)} />
16+
) : (
17+
<div />
18+
)}
819
<Card.Content>
920
<Card.Header>{props.name}</Card.Header>
1021
<div className="card_venue">
@@ -46,4 +57,19 @@ const RowEvent = props => {
4657
);
4758
};
4859

60+
RowEvent.defaultProps = {
61+
fluid: false,
62+
};
63+
64+
RowEvent.propTypes = {
65+
fluid: PropTypes.bool,
66+
link: PropTypes.string,
67+
description: PropTypes.string,
68+
name: PropTypes.string,
69+
venue: PropTypes.object,
70+
time: PropTypes.number,
71+
yesCount: PropTypes.number,
72+
status: PropTypes.string,
73+
};
74+
4975
export default RowEvent;

‎pages/events.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ class Events extends React.Component {
6565
venue={event.venue}
6666
link={event.link}
6767
status={event.status}
68+
fluid={true}
6869
/>
6970
</Card.Group>
7071
))}
@@ -84,6 +85,7 @@ class Events extends React.Component {
8485
venue={event.venue}
8586
link={event.link}
8687
status={event.status}
88+
fluid={true}
8789
/>
8890
</Card.Group>
8991
))}

‎pages/index.js

Lines changed: 188 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,221 @@
11
import React from 'react';
2+
import Link from 'next/link';
3+
import { Card, Button, Divider } from 'semantic-ui-react';
24

5+
import { indexPageMeetupURL, reverseProxyCORS } from '../utils/urls';
6+
import RowEvent from '../components/row-events';
37
import publicPage from '../hocs/public-page';
48

9+
const indexPageLearns = [
10+
{
11+
link: '#',
12+
title: 'ReactJS',
13+
subject: 'Frontend Web Development',
14+
image: '',
15+
},
16+
{
17+
link: '#',
18+
title: 'Laravel',
19+
subject: 'Backend Web Development',
20+
image: '',
21+
},
22+
{
23+
link: '#',
24+
title: 'Go',
25+
subject: 'Programming Language',
26+
image: '',
27+
},
28+
{
29+
link: '#',
30+
title: 'Security',
31+
subject: 'Networking',
32+
image: '',
33+
},
34+
{
35+
link: '#',
36+
title: 'Blockchain',
37+
subject: 'Distributed Computing',
38+
image: '',
39+
},
40+
{
41+
link: '#',
42+
title: 'Android',
43+
subject: 'Mobile Development',
44+
image: '',
45+
},
46+
];
47+
548
class Home extends React.Component {
49+
state = {
50+
indexPageEvent: '',
51+
};
52+
53+
async componentDidMount() {
54+
try {
55+
const requestEvent = await fetch(
56+
`${reverseProxyCORS}${indexPageMeetupURL}`,
57+
);
58+
const requestEventJson = await requestEvent.json();
59+
await this.setState({
60+
indexPageEvent: requestEventJson[0],
61+
});
62+
} catch (err) {
63+
console.log(err);
64+
}
65+
}
66+
667
render() {
768
return (
869
<div>
970
<main>
1071
<section className="about">
1172
<div className="about__container">
1273
<div className="about__content">
13-
<img src="/static/banner.png" alt="words" />
74+
<img src="/static/banner1280x370.png" alt="words" />
75+
</div>
76+
<h1 className="about__tag">
77+
On a mission to improve the state of tech in India
78+
</h1>
79+
</div>
80+
<Divider section />
81+
</section>
82+
<section className="learn">
83+
<div className="container">
84+
<h2 className="titles">Open Source Learing Guides</h2>
85+
<h3 className="taglines">
86+
Our guides are crowd-sourced recommendations of free online
87+
resource to learn any technology
88+
</h3>
89+
<div className="content">
90+
<Card.Group itemsPerRow={3} stackable textAlign={'center'}>
91+
{indexPageLearns.map(learn => (
92+
<Card
93+
raised
94+
key={learn.title}
95+
href={learn.link}
96+
header={learn.title}
97+
meta={learn.subject}
98+
/>
99+
))}
100+
</Card.Group>
101+
</div>
102+
<Link href={'/learn'}>
103+
<Button basic color="grey">
104+
SEE ALL AVAILABLE GUIDES
105+
</Button>
106+
</Link>
107+
</div>
108+
</section>
109+
<Divider section />
110+
<section className="space">
111+
<div className="container">
112+
<h2 className="titles">Offline Co-Learning Spaces</h2>
113+
<h3 className="taglines">
114+
Physical spaces where you can come down to engage in self
115+
learing, peer-learning and collaboration.
116+
</h3>
117+
<div className="space-content">
118+
<div className="space_content_info">
119+
These are dynamic learning environment where everyone learns
120+
at their own pace and compliments each other. We also organize
121+
weekly group activities like Open source evenings, casual
122+
hackathons etc.
123+
</div>
124+
<img
125+
className="space_content_info"
126+
src="https://static.vecteezy.com/system/resources/thumbnails/000/139/966/small/free-office-workspace-vector.png"
127+
/>
14128
</div>
129+
<Link href={'/learn'}>
130+
<Button basic color="grey">
131+
LEARN MORE ABOUT HACKERSPACE
132+
</Button>
133+
</Link>
134+
</div>
135+
</section>
136+
<Divider section />
137+
<section className="events">
138+
<div className="container">
139+
<h2 className="titles">Online & Offline Events</h2>
140+
<h3 className="taglines">
141+
We do frequent online and offline events, covering broad range
142+
of topics.
143+
</h3>
144+
<div className="content">
145+
{this.state.indexPageEvent ? (
146+
<RowEvent
147+
key={this.state.indexPageEvent.id}
148+
name={this.state.indexPageEvent.name}
149+
description={this.state.indexPageEvent.description}
150+
yesCount={this.state.indexPageEvent.yes_rsvp_count}
151+
time={this.state.indexPageEvent.time}
152+
venue={this.state.indexPageEvent.venue}
153+
link={this.state.indexPageEvent.link}
154+
status={this.state.indexPageEvent.status}
155+
/>
156+
) : (
157+
<div />
158+
)}
159+
</div>
160+
<Link href={'/events'}>
161+
<Button basic color="grey">
162+
VIEW ALL EVENTS
163+
</Button>
164+
</Link>
15165
</div>
16166
</section>
17167
</main>
18168
<style jsx>{`
169+
main {
170+
background-color: #ffffff;
171+
}
19172
.about {
20-
background-color: #fff;
173+
background-color: #f4f7fb;
21174
position: relative;
175+
text-align: center;
22176
}
23177
.about__container {
24-
max-width: 1280px;
178+
padding-bottom: 30px;
25179
min-height: calc(100vh - 260px);
26180
margin: 0 auto;
27181
display: flex;
28182
justify-content: center;
29183
align-items: center;
184+
flex-direction: column;
30185
}
31186
.about__content img {
32187
width: 100%;
33188
}
189+
.about__tag {
190+
font-size: 2.5em;
191+
}
192+
.container {
193+
background-color: #ffffff;
194+
text-align: center;
195+
padding: 60px;
196+
}
197+
.taglines {
198+
padding-bottom: 20px;
199+
}
200+
.content {
201+
padding-bottom: 50px;
202+
}
203+
.space-content {
204+
display: flex;
205+
flex-wrap: wrap-reverse
206+
flex-wrap: wrap;
207+
justify-content: center;
208+
align-content: center;
209+
align-items: center;
210+
}
211+
.space_content_info {
212+
order: 0;
213+
flex: 0 1 auto;
214+
align-self: center;
215+
max-width: 600px;
216+
padding-left: 30px;
217+
padding-right: 30px;
218+
}
34219
`}</style>
35220
</div>
36221
);

‎scripts/deploy.js

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@ if (!process.env.CI || !process.env.TRAVIS) {
5050
const githubToken = process.env.GH_TOKEN;
5151
const nowToken = process.env.NOW_TOKEN;
5252
const discordHook = process.env.DISCORD_HOOK;
53-
const prSha = process.env.TRAVIS_PULL_REQUEST_SHA;
54-
const commitSha = process.env.TRAVIS_COMMIT;
5553
const repoSlug = process.env.TRAVIS_REPO_SLUG;
5654
const aliasUrl = process.env.NOW_ALIAS;
5755

@@ -116,7 +114,7 @@ function notifyInDiscord(err, res) {
116114
content: buildComment(res.context, res.url, 'https://coderplex.org'),
117115
})
118116
.then(() => {
119-
console.log(`Error posted to discord`);
117+
console.log(`Success posted to discord`);
120118
})
121119
.catch(console.log.bind(console));
122120
}
@@ -128,6 +126,8 @@ function buildComment(context, url, aliasUrl) {
128126
}
129127

130128
function deploy(context, sha) {
129+
console.log(`context: ${context}`);
130+
console.log(`sha: ${sha}`);
131131
if (context === 'staging') {
132132
// Send error status to github PR
133133
ghRepo.status(
@@ -163,7 +163,7 @@ function deploy(context, sha) {
163163

164164
// Retrieve now.sh unique url from stdOut
165165
const deployedUrl = getUrl(res);
166-
166+
console.log(`deployedUrl: ${deployedUrl}`);
167167
if (context === 'staging') {
168168
// Send success status to github PR
169169
ghRepo.status(
@@ -177,14 +177,12 @@ function deploy(context, sha) {
177177
console.log.bind(console),
178178
);
179179
// Check and create comment on github PR abot deployment results
180-
if (argv.comment && context === 'staging') {
181-
ghIssue.createComment(
182-
{
183-
body: buildComment(context, deployedUrl),
184-
},
185-
console.log.bind(console),
186-
);
187-
}
180+
ghIssue.createComment(
181+
{
182+
body: buildComment(context, deployedUrl),
183+
},
184+
console.log.bind(console),
185+
);
188186
return;
189187
}
190188
// In production alias deployment to specified alias url from now.json file or from env variable
@@ -207,9 +205,9 @@ travisAfterAll((code, err) => {
207205
if (err || code) return;
208206
switch (process.env.TRAVIS_EVENT_TYPE) {
209207
case 'pull_request':
210-
return deploy('staging', prSha);
208+
return deploy('staging', process.env.TRAVIS_PULL_REQUEST_SHA);
211209
case 'push':
212-
return deploy('production', commitSha);
210+
return deploy('production', process.env.TRAVIS_COMMIT);
213211
default:
214212
break;
215213
}

‎static/banner1280x370.png

56.1 KB
Loading

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy