comment box added, meta data set

mddanishyusuf · Apr 4, 2019 · 9577449 · 9577449
1 parent c6bf0c2
commit 9577449
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 45 deletions.
diff --git a/components/CommentBox.js b/components/CommentBox.js
@@ -0,0 +1,110 @@
+import React, {useEffect, useState} from 'react';
+import axios from 'axios';
+import moment from 'moment'
+
+const Comments = function(props){
+    const {comments} = props;
+
+    return (
+        <div className="comments-list">
+            <div className="no-comments">Do you have any comment on this tricks? then let the author know about that. <a href={comments[0].html_url} target="_blank">comment here</a></div>
+            {
+                comments.length > 0
+                ?   
+                    <div className="list">
+                        {comments.map((comment, key)=> {
+                            return(
+                                <div className="comment-body" key={key}>
+                                    <div className="comment-head">
+                                        <div className="commenter-pic">
+                                            <img src={comment.user.avatar_url} />
+                                        </div>
+                                        <div className="comment-meta">
+                                            <div className="commenter-name">{comment.user.login}</div>
+                                            <div className="comment-date">{moment(comment.created_at).fromNow()}</div>
+                                        </div>
+                                    </div>
+                                    <div className="comment-text">{comment.body}</div>
+                                </div>
+                            )
+                        })}
+                    </div>
+                : 'This post have comments'
+            }
+            <style jsx> 
+                {`
+                    .comment-body .comment-head .commenter-pic img{
+                        width: 25px;
+                        height: 25px;
+                        background-color: red;
+                        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+                        border: 3px solid #d8d8d8
+                    }
+                    .comment-body .comment-head {
+                        display: grid;
+                        grid-template-columns: 40px auto;
+                    }
+                    .comment-body .comment-head .comment-meta {
+                        font-size: 13px;
+                    }
+
+                    .comment-text {
+                        font-size: 14px;
+                        line-height: 1.6;
+                        margin-bottom: 40px;
+                        border: 1px solid #d8d8d8;
+                        border-radius: 4px;
+                        padding: 6px 18px;
+                        margin-top: 10px;
+                        background-color: #f1f8ff;
+                        border-bottom-color: #c0d3eb;
+                        display: inline-block;
+                        border-radius: 10% 10% 10% 10% / 14% 14% 12% 12%;
+                    }
+                    .no-comments {
+                        font-size: 14px;
+                        margin-bottom: 20px
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+const CommentBox = function(props){
+
+    const [comments, setComments] = useState([])
+
+    useEffect(()=> {
+        axios.get(`https://api.github.com/repos/mddanishyusuf/dailyhack/issues/${props.single_issue.number}/comments`).then(res=>{
+            setComments(res.data)
+        })
+    },[])
+
+    return (
+        <div className="comment-box">
+            <div/>
+            <div className="comments">
+                {
+                    comments.length > 0
+                    ? <Comments comments={comments} />
+                    : <div className="no-comments">Do you have any comment on this tricks? then let the author know about that. <a href={`https://github.com/mddanishyusuf/dailyhack/issues/${props.single_issue.number}`}>comment here</a></div>
+                }
+            </div>
+            <style jsx>
+                {`
+                    .comment-box {
+                        display: grid;
+                        grid-template-columns: 150px auto;
+                    }
+                    .no-comments {
+                        font-size: 14px;
+                        margin-bottom: 20px
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+export default CommentBox;
diff --git a/components/Header.js b/components/Header.js
@@ -8,7 +8,7 @@ const Header = (props) => (
     <div>
         <div className="navbar">
         <div className="website-logo">
-            <Link href="/"><a><img src='/static/images/DailyHackLogo.png'/></a></Link>
+            <Link href="/"><a><img src='/static/images/daily-hack-logo.png'/></a></Link>
         </div>
         <div className="right-navbar">
             <ul>

diff --git a/components/Layout.js b/components/Layout.js
@@ -3,29 +3,43 @@ import Head from 'next/head';
 
 import Header from './Header';
 
-const Layout = props => (
-    <div>
-        <Head>
-            <meta name="viewport" content="width=device-width, initial-scale=1" />
-            <meta charSet="utf-8" />
-            <title>{props.title}</title>
-            <link href="https://fonts.googleapis.com/css?family=Questrial|Poppins:500" rel="stylesheet"/>
-        </Head>
-        <Header/>
-        {props.children}
-        <style jsx global>
-            {`
-                body {
-                    padding: 0 !imporatnt;
-                    font-family: 'Questrial', sans-serif;
-                    margin: 0;
-                }
-                p {
-                    line-height: 1.8
-                }
-            `}
-        </style>
-    </div>
-)
+const Layout = props => {
+    console.log(props)
+    return(
+        <div>
+            <Head>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <meta charSet="utf-8" />
+                <title>{props.title}</title>
+                <meta name="title" content={props.title} />
+                <meta name="description" content={props.description} />
+
+                <meta name="twitter:card" content={props.summary} />
+
+                <meta property="og:title" content={props.title} />
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content={props.pageUrl} />
+                <meta property="og:image" content={props.image}/>
+                <meta property="og:description" content={props.description} />
+
+                <link href="https://fonts.googleapis.com/css?family=Questrial|Poppins:500" rel="stylesheet"/>
+            </Head>
+            <Header/>
+            {props.children}
+            <style jsx global>
+                {`
+                    body {
+                        padding: 0 !imporatnt;
+                        font-family: 'Questrial', sans-serif;
+                        margin: 0;
+                    }
+                    p {
+                        line-height: 1.8
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
 
 export default Layout;
diff --git a/now.json b/now.json
@@ -2,6 +2,7 @@
     "version": 2,
     "builds": [{ "src": "package.json", "use": "@now/next" }],
     "routes": [
-        { "src": "/post/(?<slug>[a-z-]+-)(?<number>[0-9]+)", "dest": "/post?number=$number&slug=$slug" }
+        { "src": "/post/(?<slug>[a-z0-9-_]+-)(?<number>[0-9]+)", "dest": "/post?number=$number&slug=$slug" },
+        { "src": "/page/(?<page_number>[0-9]+)", "dest": "/index?page_number=$page_number" }
     ]
 }
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "@zeit/next-sass": "^1.0.1",
+    "axios": "^0.18.0",
     "express": "^4.16.4",
     "isomorphic-unfetch": "^3.0.0",
     "markdown-to-jsx": "^6.9.3",

diff --git a/pages/contributors.js b/pages/contributors.js
@@ -2,6 +2,7 @@ import {Fragment} from 'react';
 import Layout from '../components/Layout';
 
 function Contributors(props){
+    console.log(props)
     return(
         <Fragment>
             <Layout title="Daily Hack: A community of Makers and Geeks" {...props}>
@@ -11,4 +12,13 @@ function Contributors(props){
     )
 }
 
+Contributors.getInitialProps = async function(){
+    const result = await fetch(`${process.env.DAILYHACK_GITHUB_API}/contributors`)
+    const data = await result.json()
+
+    return {
+        contributors: data
+    }
+}
+
 export default Contributors;
diff --git a/pages/index.js b/pages/index.js
@@ -26,7 +26,7 @@ function HackComponent(props){
 function DailyHackHome(props){
     return(
         <Fragment>
-            <Layout title="Daily Hack: A community of Makers and Geeks" {...props}>
+            <Layout title="Daily Hack: A community of Makers and Geeks" description="An community of makers, developers and geeks where they share there daily hack they use in their developments." image="/static/images/daily-hack-image.png" pageUrl="https://dailyhack.mddanishyusuf.now.sh" {...props}>
                 <HackComponent {...props}/>
                 <PaginationBox {...props}/>
             </Layout>

diff --git a/pages/post.js b/pages/post.js
@@ -2,30 +2,34 @@ import {withRouter} from 'next/router';
 import fetch from 'isomorphic-unfetch';
 
 import Layout from '../components/Layout';
-import HackCard from '../components/HackCard'
+import HackCard from '../components/HackCard';
+import CommentBox from '../components/CommentBox'
 
-const SinglePost = withRouter(props => (
-    <Layout title={props.single_issue.title} {...props}>
-        <div className="single-post">
-            <HackCard {...props}/>
-        </div>
-        <style>
-            {`
-                .single-post {
-                    width: 80%;
-                    margin: 0px auto;
-                    font-family: 'Questrial', sans-serif;
-                }
-            `}
-        </style>
-    </Layout>
-))
+const SinglePost = withRouter(props => {
+    return(
+        <Layout title={props.single_issue.title} image={`https://screenshot-v2.now.sh/dailyhack.mddanishyusuf.now.sh/post/${props.slug}`} description={props.single_issue.body.trim().substr(0,154)} pageUrl={`https://dailyhack.mddanishyusuf.now.sh/post/${props.slug}`} {...props}>
+            <div className="single-post">
+                <HackCard {...props}/>
+                <CommentBox {...props}/>
+            </div>
+            <style>
+                {`
+                    .single-post {
+                        width: 80%;
+                        margin: 0px auto;
+                    }
+                `}
+            </style>
+        </Layout>
+    )
+})
 
 SinglePost.getInitialProps = async function(context){
     const result = await fetch(`${process.env.DAILYHACK_GITHUB_API}/${context.query.number}`)
     const issue = await result.json()
     return {
-        single_issue: issue
+        single_issue: issue,
+        slug: `${context.query.slug}-${context.query.number}`
     }
 }
 

diff --git a/static/images/daily-hack-image.png b/static/images/daily-hack-image.png
diff --git a/static/images/DailyHackLogo.png → static/images/daily-hack-logo.png b/static/images/DailyHackLogo.png → static/images/daily-hack-logo.png