Thanks to visit codestin.com
Credit goes to github.com

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

Commit dbf5e8e

Browse files
Zubair Ahmedvinaypuppal
Zubair Ahmed
authored and
vinaypuppal
committed
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
1 parent 1869547 commit dbf5e8e

File tree

6 files changed

+228
-13
lines changed

6 files changed

+228
-13
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
);

‎static/banner1280x370.png

56.1 KB
Loading

‎utils/urls.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@ export const pastEventsMeetupURL =
44
export const futureEventsMeetupURL =
55
'https://api.meetup.com/coderplex/events?only=id%2Cname%2Ctime%2Cyes_rsvp_count%2Cdescription%2Cvenue%2Cstatus%2Clink';
66

7+
export const indexPageMeetupURL =
8+
'https://api.meetup.com/coderplex/events?scroll=future_or_past&photo-host=public&page=1&sig_id=216741149&only=id%2Ctime%2Cyes_rsvp_count%2Cvenue%2Clink%2Cstatus%2Cname%2Cdescription&sig=fabc8645c9e317083cc1f29ff0e8292b88b5e515';
9+
710
export const reverseProxyCORS = 'https://cors.now.sh/';

0 commit comments

Comments
 (0)