Skip to content

Commit 790bb65

Browse files
akashraj9828akashraj9828
committed
landing page changes also bumped to v1.0.0
1 parent 758e383 commit 790bb65

File tree

8 files changed

+123
-53
lines changed

8 files changed

+123
-53
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "git-stats",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"private": true,
55
"engines": {
66
"node": "10.16.x",

‎src/App.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ $space_bg:url(https://desktop.github.com/images/star-bg.svg) no-repeat;
6363
}
6464
footer{
6565
background: $dark_bg;
66+
a{
67+
color:#2196f3!important;
68+
}
6669
}
6770

6871
}
@@ -550,3 +553,34 @@ footer {
550553
bottom:2%
551554
}
552555
}
556+
557+
558+
// github icon animation
559+
.github-corner:hover .octo-arm{
560+
animation: octocat-wave 560ms ease-in-out
561+
}
562+
563+
@keyframes octocat-wave {
564+
0%, 100%{
565+
transform: rotate(0)
566+
}
567+
568+
20%, 60%{
569+
transform: rotate(-25deg)
570+
}
571+
572+
40%, 80%{
573+
transform: rotate(10deg)
574+
}
575+
}
576+
577+
@media (max-width:500px){
578+
.github-corner:hover .octo-arm{
579+
animation: none
580+
}
581+
582+
.github-corner .octo-arm{
583+
animation: octocat-wave 560ms ease-in-out
584+
}
585+
}
586+

‎src/Components/Views/Components/GithubLink.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react"
2+
const GithubLink = ({ color }) => {
3+
const svgStyle = {
4+
fill: color,
5+
color: "#fff",
6+
position: "absolute",
7+
top: 0,
8+
border: 0,
9+
right: 0
10+
}
11+
12+
const pathStyle = {
13+
transformOrigin: "130px 106px",
14+
}
15+
16+
return (
17+
<a href="https://github.com/akashraj9828/gitstats" className="github-corner" aria-label="View source on GitHub">
18+
<svg width="80" height="80" viewBox="0 0 250 250" style={svgStyle} aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={pathStyle} className="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body"></path></svg>
19+
</a>
20+
)
21+
}
22+
23+
export default GithubLink

‎src/Components/Views/Home.js‎

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ class Home extends React.Component {
5151
initialPageLoad: Loader.section_loading, //For loading application at first time
5252
userActivity: [],
5353
userActivityLoaded: false,
54+
week_dict: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
55+
5456
};
5557
}
5658

@@ -167,6 +169,48 @@ class Home extends React.Component {
167169
{/* CONDITIONAL REDERING OF BASIC INFO */}
168170
{this.state.basicLoaded ? <BasicInformation basicInfo={this.state.basicInfo} aggregateData={this.state.aggregateData} /> : Loader.section_loading}
169171

172+
{/* REPO SECTION */}
173+
<section className="pt-5 ">
174+
<div className="row">
175+
<div className="col-sm-6 mt-3">
176+
<h3 className="font-size-15 w-100">My Recent activities</h3>
177+
<div className="card p-3 rounded" style={{
178+
height: "calc( 100%-20px)",
179+
// height: "100%",
180+
maxHeight: "376px",
181+
overflow: "auto"
182+
}} >
183+
{/*Will show 30 recent activity by user */}
184+
{this.state.userActivityLoaded ?
185+
<Fragment>
186+
<UserActivity data={this.state.userActivity} />
187+
</Fragment>
188+
: Loader.section_loading}
189+
</div>
190+
</div>
191+
192+
<div className="col-sm-6 mt-3">
193+
<h3 className="font-size-15 w-100">Commit analysis</h3>
194+
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }}>
195+
{/* CONDITIONAL REDERING OF COMMIT ANALYSYS(repo wise) INFO */}
196+
{this.state.repoGraphDataCommitWiseLoaded ?
197+
<Fragment>
198+
<PieChart data={this.state.repoGraphDataCommitWise} height={250} max_slices={10} />
199+
{/* Extra info about pie chart */}
200+
<div>
201+
<h6 className="text-center mt-3">
202+
{this.state.repoGraphDataCommitWise[0] && <Fragment> Most Commits are done in <span style={{ color: this.state.repoGraphDataCommitWise[0].color }}> {this.state.repoGraphDataCommitWise[0].id} </span></Fragment>}
203+
</h6>
204+
</div>
205+
</Fragment>
206+
: Loader.section_loading}
207+
</div>
208+
</div>
209+
210+
</div>
211+
</section>
212+
213+
170214
{/* LANGUAGE SECTION */}
171215
<section className="pt-5 ">
172216
<div className="row">
@@ -226,46 +270,7 @@ class Home extends React.Component {
226270
</section>
227271

228272

229-
{/* REPO SECTION */}
230-
<section className="pt-5 ">
231-
<div className="row">
232-
<div className="col-sm-6 mt-3">
233-
<h3 className="font-size-15 w-100">Commit analysis</h3>
234-
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }}>
235-
{/* CONDITIONAL REDERING OF COMMIT ANALYSYS(repo wise) INFO */}
236-
{this.state.repoGraphDataCommitWiseLoaded ?
237-
<Fragment>
238-
<PieChart data={this.state.repoGraphDataCommitWise} height={250} max_slices={10} />
239-
{/* Extra info about pie chart */}
240-
<div>
241-
<h6 className="text-center mt-3">
242-
{this.state.repoGraphDataCommitWise[0] && <Fragment> Most Commits are done in <span style={{ color: this.state.repoGraphDataCommitWise[0].color }}> {this.state.repoGraphDataCommitWise[0].id} </span></Fragment>}
243-
</h6>
244-
</div>
245-
</Fragment>
246-
: Loader.section_loading}
247-
</div>
248-
</div>
249-
<div className="col-sm-6 mt-3">
250-
<h3 className="font-size-15 w-100">My Recent activity</h3>
251-
<div className="card p-3 rounded" style={{
252-
height: "calc( 100% - 20px )",
253-
maxHeight: "350px" ,
254-
overflow:"auto"
255-
}} >
256-
{/*Will show 30 recent activity by user */}
257-
{this.state.userActivityLoaded ?
258-
<Fragment>
259-
<UserActivity data={this.state.userActivity}/>
260-
</Fragment>
261-
: Loader.section_loading}
262-
</div>
263-
</div>
264-
265-
266-
</div>
267-
</section>
268-
273+
269274
{/* PRODUCTIVITY SECTION */}
270275
<section className="pt-5">
271276
<div className="row">
@@ -279,7 +284,7 @@ class Home extends React.Component {
279284
{/* Extra info about Week days chart */}
280285
<div>
281286
<h6 className="text-center mt-3">
282-
{this.state.commitHistoryGraphData[0] && <Fragment> I am most productive on <span style={{ color: this.state.commitHistoryGraphData[this.state.top2days[0]].commitColor }}> {this.state.commitHistoryGraphData[this.state.top2days[0]].day} </span> and <span style={{ color: this.state.commitHistoryGraphData[this.state.top2days[1]].commitColor }}> {this.state.commitHistoryGraphData[this.state.top2days[1]].day} </span> </Fragment>}
287+
{this.state.commitHistoryGraphData[0] && <Fragment> I am most productive on <span style={{ color: this.state.commitHistoryGraphData[this.state.top2days[0]].commitColor }}> {this.state.week_dict[this.state.top2days[0]]} </span> and <span style={{ color: this.state.commitHistoryGraphData[this.state.top2days[1]].commitColor }}> {this.state.week_dict[this.state.top2days[1]]} </span> </Fragment>}
283288
</h6>
284289
</div>
285290
</Fragment>

‎src/Components/Views/LandingPage.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
22
import DataProvider from '../../Data-provider/index'
33
import { DebounceInput } from 'react-debounce-input';
44

5+
import GithubLink from "./Components/GithubLink"
56
const LandingPage = () => {
67
let [searchUsers, setSearchUsers] = useState();
78

@@ -16,16 +17,22 @@ const LandingPage = () => {
1617

1718
return (
1819
<div className="landing-page">
20+
<GithubLink color={"#caa981"} />
1921
<div className="content-area">
2022
<div className="m-auto p-5">
21-
<h1 className="font-weight-bold mb-3" >Analysis Any Git profile</h1>
22-
<p className="font-size-14">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable</p>
23+
<h1 className="font-weight-bold mb-3" >Git-Stats</h1>
24+
<p className="font-size-14">An open-source GitHub contribution analyzer </p>
2325
<div className="search-inner position-relative">
2426
<DebounceInput
2527
minLength={2}
2628
debounceTimeout={500}
27-
placeholder="Find people..."
29+
placeholder="Find github users..."
2830
onChange={search}
31+
style={{
32+
maxWidth: 600,
33+
width: "100%",
34+
minWidth: 300
35+
}}
2936

3037
/>
3138

‎src/Components/Views/Pinned.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const Pinned = (props) => {
4141
}}>
4242

4343
<h6 className="mt-3 w-100 text-left">
44-
<span style={{ color: "gray" }}>No pinned repos to analyze ☹️☹️ </span>
44+
<span style={{ color: "gray" }}>No pinned repos to analyze <span role="img" aria-label="sad-face">☹️☹️</span></span>
4545
</h6>
4646
</div>
4747
</div>

‎src/Components/Views/UserActvity.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import React, { Fragment } from "react"
44
function UserActivity(props) {
55
const { data } = props
66

7-
let dom = data.map(event => <div key={event.id} className="row">
8-
<div className="d-inline m-2">
7+
let dom = data.map(event => <div key={event.id} className="row my-1">
8+
<div className="px-2">
99
<img className="img img-fluid rounded" src={event.image} alt="" />
1010
</div>
11-
<div className="d-inline m-2">
11+
<div className="col">
1212
<h6 className="m-0 font-size-11">
1313
{event.title}
1414
<br />

‎src/Data-provider/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,8 @@ async function repoBarGraphCalculation(repoInfo) {
326326
async function commitGraphDataDayWise(commitHistoryData) {
327327
// 0-6 represents monday-sunday
328328
// 6-sat 0-sunday
329-
let week_dict = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
329+
let week_dict_full = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
330+
let week_dict_short = ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat"]
330331
// commits throughout the week_day
331332
let week_commit_activity = [0, 0, 0, 0, 0, 0, 0]
332333
// intensity throughout the week_day
@@ -357,8 +358,8 @@ async function commitGraphDataDayWise(commitHistoryData) {
357358
}
358359
}
359360
week_graph_data.push({
360-
"day": week_dict[week_day],
361-
"label": week_dict[week_day],
361+
"day": week_dict_short[week_day],
362+
"label": week_dict_short[week_day],
362363

363364

364365
"commit": week_commit_activity[week_day],
@@ -375,7 +376,7 @@ async function commitGraphDataDayWise(commitHistoryData) {
375376

376377

377378
return {
378-
week_dict,
379+
week_dict_full,
379380
week_commit_activity,
380381
week_intensity_activity,
381382
week_graph_data, // this

0 commit comments

Comments
 (0)