Merge branch 'develop' of github.com:devsonket/devsonket.github.io into develop

Author: letsdogreat

.gitignore

@@ -20,4 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.idea/*
+.idea/*
+ package-lock.json 

CNAME

@@ -0,0 +1 @@
+devsonket.com

data/linux-command-line.json

@@ -201,7 +201,7 @@
       "items": [
         {
           "definition": "টারমিনালের সকল কমান্ড মুছে ফেলা",
-          "code": "clear"
+          "code": "clear অথবা Ctrl+l"
         }, {
           "definition": "টারমিনাল ক্লোজ করা",
           "code": "exit অথবা Ctrl+D"
@@ -217,6 +217,15 @@
         }, {
           "definition": "লাইনের শেষে যাওয়া",
           "code": "Ctrl-e"
+        }, {
+          "definition": "কার্সর এর আগের শব্দগুলো মুছে ফেলা",
+          "code": "Ctrl+w"
+        }, {
+          "definition": "ফাইল/ফোল্ডার এর নাম অটোকমপ্লিট করা",
+          "code": "Tab"
+        }, {
+          "definition": "ব্যাকস্পেস এর শর্টকাট",
+          "code": "Ctrl+h"
         }, {
           "definition": "লাইনের শুরু থেকে কাট করা",
           "code": "Ctrl-u"

src/App.css

@@ -162,6 +162,42 @@ pre.code {
   overflow-y: hidden;
 }
 
+.contributor {
+  list-style: none;
+  margin-bottom: 15px;
+}
+
+.contributor p {
+  margin-bottom: 10px;
+  font-weight: 900;
+}
+
+.contributor li {
+  display: inline-block;
+  position: relative;
+  margin: 0 5px;
+}
+
+.contributor-profile span {
+  position: absolute;
+  bottom: 5px;
+  right: -2px;
+  font-weight: bold;
+  background-color: #4CAF50;
+  color: #fff;
+  font-size: 11px;
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+  border-radius: 40px;
+}
+
+.contributor-profile img {
+  width: 40px;
+  border-radius: 40px;
+  border: 3px solid #FFC107;
+}
+
 .single-content {
   display: flex;
   flex-wrap: wrap;
@@ -424,4 +460,4 @@ footer ul li a {
   .footer-area {
     visibility: hidden !important;
   }
-}
+}

src/App.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import axios from 'axios';
+import ReactGA from 'react-ga';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { BeatLoader } from 'react-spinners';
 
 import './App.css';
 
 import Home from './components/Home';
 import Content from './components/Content';
+import AppContainer from './components/AppContainer';
 
 class App extends Component {
   state = {
@@ -16,6 +18,13 @@ class App extends Component {
     loading: true
   }
 
+  constructor(props) {
+    super(props)
+    
+    ReactGA.initialize('UA-129387050-1', { testMode: props.isTestMode })
+    ReactGA.pageview(window.location.href)
+  }
+
   getData() {
     const data = axios('https://raw.githubusercontent.com/devsonket/devsonket.github.io/develop/data/index.json');
     return data;
@@ -53,7 +62,7 @@ class App extends Component {
   render() {
     const { searchAItem } = this;
     const { tops, searchResult, data, loading } = this.state;
-
+    
     if(loading) {
       return <div className="loader">
         <BeatLoader color={'#333'} />
@@ -62,14 +71,16 @@ class App extends Component {
 
     return (
       <BrowserRouter>
-        <div className="App">
-          <Route exact path="/" render={props => (
-            <Home searchAItem={searchAItem} tops={tops} searchResult={searchResult} data={data} />
-          )}/>
-          <Route exact path="/:id" render={props => (
-            <Content {...props} data={data} />
-          )}/>
-        </div>
+        <AppContainer>
+          <div className="App">
+            <Route exact path="/" render={props => (
+              <Home searchAItem={searchAItem} tops={tops} searchResult={searchResult} data={data} />
+            )}/>
+            <Route exact path="/:id" render={props => (
+              <Content {...props} data={data} />
+            )}/>
+          </div>
+        </AppContainer>
       </BrowserRouter>
     );
   }

src/App.test.js

@@ -4,6 +4,6 @@ import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<App isTestMode={true} />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/components/Content.js

@@ -8,9 +8,12 @@ import HeaderContent from './HeaderContent';
 import Page404 from './404';
 import Footer from './Footer';
 
+import contributorMap from '../utils/contributorMap';
+
 class Content extends Component {
   state = {
     data: '',
+    contributor: '',
     redirect: false
   }
 
@@ -27,15 +30,17 @@ class Content extends Component {
   getData = async(id) => {
     try {
       const { data } = await axios(`https://raw.githubusercontent.com/devsonket/devsonket.github.io/develop/data/${id}.json`);
-      this.setState({data});
+      let { data: contributor } = await axios(`https://api.github.com/repos/devsonket/devsonket.github.io/commits?path=data/${id}.json`);
+      contributor = contributorMap(contributor);
+      this.setState({data, contributor});
       this.setTitle();
     } catch(e) {
       this.setState({redirect: true})
     }
   }
 
   render() {
-    const { data, redirect } = this.state;
+    const { data, contributor, redirect } = this.state;
     const { match: { url } } = this.props;
 
     if(redirect && url !== '/404') {
@@ -54,7 +59,7 @@ class Content extends Component {
 
     return (
       <React.Fragment>
-        <HeaderContent title={data.title} description={data.description} />
+        <HeaderContent title={data.title} description={data.description} contributor={contributor} />
         <Container>
           <div className="single-content">
             {data.contents.map(({title, items, code: onlyCode}, index) => (

src/components/HeaderContent.js

@@ -5,7 +5,7 @@ import SocialShare from './SocialShare';
 
 export default class HeaderContent extends PureComponent {
   render() {
-    const {title, description} = this.props;
+    const {title, description, contributor} = this.props;
 
     return (
       <header className="header-area">
@@ -14,6 +14,17 @@ export default class HeaderContent extends PureComponent {
           <div className="intro">
             <h1>{title}</h1>
             <p>{description}</p>
+            <ul className="contributor">
+              <p>কন্ট্রিবিউটর</p>
+              {Object.keys(contributor).map(oneContributor => (
+                <li key={oneContributor}>
+                  <div className="contributor-profile">
+                    <a rel="noopener noreferrer" target="_blank" href={contributor[oneContributor].html_url}><img alt={contributor[oneContributor].login} src={contributor[oneContributor].avatar_url} /></a>
+                    <span>{contributor[oneContributor].count}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
             <div className="print no-print">
               <button className="btn btn-print" onClick={() => window.print()}>প্রিন্ট করুন</button>
             </div>

src/utils/contributorMap.js

@@ -0,0 +1,17 @@
+export default data => {
+  const charMap = {};
+  data.forEach(oneData => {
+    const { login } = oneData.author;
+    if(!charMap[login]) {
+      charMap[login] = {
+        count: 1,
+        login: oneData.author.login,
+        avatar_url: oneData.author.avatar_url,
+        html_url: oneData.author.html_url
+      }
+    } else {
+      charMap[login].count++;
+    }
+  });
+  return charMap;
+}