From 05bbff1ee84a09b4ff3c54de8cb3ac598c61595e Mon Sep 17 00:00:00 2001 From: jvm-odoo Date: Fri, 21 Feb 2020 19:13:56 +0100 Subject: [PATCH 1/5] add: reorganize & use styled components --- README.md | 33 ++- package-lock.json | 123 ++++++++- package.json | 4 +- public/index.html | 6 - src/Application.js | 23 ++ src/Assets/Img/loader.svg | 52 ++++ src/Components/Blog/BlogContainer.js | 8 + src/Components/Blog/Card/Card.js | 50 ++++ src/Components/Blog/Card/CardCategory.js | 24 ++ src/Components/Blog/Card/CardContainer.js | 6 + src/Components/Blog/Card/CardDescription.js | 9 + src/Components/Blog/Card/CardHeader.js | 7 + src/Components/Blog/Card/CardReadingTime.js | 11 + src/Components/Blog/Card/CardTitle.js | 12 + src/Components/Blog/Card/index.js | 7 + src/Components/Blog/index.js | 1 + src/Components/BlogCard/BlogCard.css | 51 ---- src/Components/BlogCard/BlogCard.js | 57 ----- src/Components/Common/Loader.js | 20 ++ src/Components/Common/index.js | 1 + .../GithubReactionTextCard.css | 38 --- .../GithubReactionTextCard.js | 17 -- src/Components/Header/Header.css | 46 ---- src/Components/Header/Header.js | 23 +- src/Components/Header/HeaderContainer.js | 17 ++ src/Components/Header/HeaderSubtitle.js | 17 ++ src/Components/Header/HeaderTitle.js | 17 ++ src/Components/Header/HeaderWrapper.js | 8 + src/Components/Header/index.js | 5 + src/Components/Post/Author/AuthorAvatar.js | 9 + src/Components/Post/Author/AuthorDetails.js | 6 + src/Components/Post/Author/AuthorName.js | 8 + src/Components/Post/Author/index.js | 3 + src/Components/Post/PostContainer.js | 9 + src/Components/Post/PostDate.js | 9 + src/Components/Post/PostDateLink.js | 14 ++ src/Components/Post/PostReaction.js | 9 + src/Components/Post/PostTitle.js | 7 + .../Post/ReactionCard/ReactionCard.js | 20 ++ .../Post/ReactionCard/ReactionCardBorder.js | 7 + .../ReactionCard/ReactionCardContainer.js | 10 + .../Post/ReactionCard/ReactionCardLink.js | 19 ++ .../Post/ReactionCard/ReactionCardText.js | 9 + src/Components/Post/ReactionCard/index.js | 5 + src/Components/Post/index.js | 5 + src/Containers/Blog.js | 73 ++++++ src/Containers/{BlogPost => }/BlogPost.js | 188 +++++++------- src/Containers/BlogPost/BlogPost.css | 234 ------------------ src/Containers/Blogs/Blogs.css | 0 src/Containers/Blogs/Blogs.js | 79 ------ src/Router.js | 21 ++ src/Routes.js | 21 -- src/Utils/apollo.js | 14 ++ src/config.js | 13 +- src/index.css | 150 ++++++++++- src/index.js | 4 +- 56 files changed, 958 insertions(+), 681 deletions(-) create mode 100644 src/Application.js create mode 100644 src/Assets/Img/loader.svg create mode 100644 src/Components/Blog/BlogContainer.js create mode 100644 src/Components/Blog/Card/Card.js create mode 100644 src/Components/Blog/Card/CardCategory.js create mode 100644 src/Components/Blog/Card/CardContainer.js create mode 100644 src/Components/Blog/Card/CardDescription.js create mode 100644 src/Components/Blog/Card/CardHeader.js create mode 100644 src/Components/Blog/Card/CardReadingTime.js create mode 100644 src/Components/Blog/Card/CardTitle.js create mode 100644 src/Components/Blog/Card/index.js create mode 100644 src/Components/Blog/index.js delete mode 100644 src/Components/BlogCard/BlogCard.css delete mode 100644 src/Components/BlogCard/BlogCard.js create mode 100644 src/Components/Common/Loader.js create mode 100644 src/Components/Common/index.js delete mode 100644 src/Components/GithubReactionTextCard/GithubReactionTextCard.css delete mode 100644 src/Components/GithubReactionTextCard/GithubReactionTextCard.js delete mode 100644 src/Components/Header/Header.css create mode 100644 src/Components/Header/HeaderContainer.js create mode 100644 src/Components/Header/HeaderSubtitle.js create mode 100644 src/Components/Header/HeaderTitle.js create mode 100644 src/Components/Header/HeaderWrapper.js create mode 100644 src/Components/Header/index.js create mode 100644 src/Components/Post/Author/AuthorAvatar.js create mode 100644 src/Components/Post/Author/AuthorDetails.js create mode 100644 src/Components/Post/Author/AuthorName.js create mode 100644 src/Components/Post/Author/index.js create mode 100644 src/Components/Post/PostContainer.js create mode 100644 src/Components/Post/PostDate.js create mode 100644 src/Components/Post/PostDateLink.js create mode 100644 src/Components/Post/PostReaction.js create mode 100644 src/Components/Post/PostTitle.js create mode 100644 src/Components/Post/ReactionCard/ReactionCard.js create mode 100644 src/Components/Post/ReactionCard/ReactionCardBorder.js create mode 100644 src/Components/Post/ReactionCard/ReactionCardContainer.js create mode 100644 src/Components/Post/ReactionCard/ReactionCardLink.js create mode 100644 src/Components/Post/ReactionCard/ReactionCardText.js create mode 100644 src/Components/Post/ReactionCard/index.js create mode 100644 src/Components/Post/index.js create mode 100644 src/Containers/Blog.js rename src/Containers/{BlogPost => }/BlogPost.js (50%) delete mode 100644 src/Containers/BlogPost/BlogPost.css delete mode 100644 src/Containers/Blogs/Blogs.css delete mode 100644 src/Containers/Blogs/Blogs.js create mode 100644 src/Router.js delete mode 100644 src/Routes.js create mode 100644 src/Utils/apollo.js diff --git a/README.md b/README.md index c8d7153..3239e4c 100644 --- a/README.md +++ b/README.md @@ -86,27 +86,28 @@ Go to your cloned repository and make the following changes in `/src/config.js` ```javascript export const config = { + // Your Github Converted Token To Know How To Get Your Token Look at Readme.md + githubConvertedToken: "Your token here", - // Your Github Converted Token - githubConvertedToken: "Github Converted Token", + // Your Github UserName + githubUserName: "Your username here", - // Your Github User Name - githubUserName: "saadpasta", + // Your Github Repo Name Where You Have your issues as Blog + githubRepo: "Your repo's name here", - // Your Github Repo Name Where You Have your issues as Blog + // Your Personal Blog Title + title : "Title of your blog" , - githubRepo: "react-blog-github", + // Your Personal Blog Subtitle + subtitle : "Subtitle of your blog", - // Your Personal Blog Title - - title : "Saad Pasta" , - - // Your Personal Blog Subtitle - - subtitle : "Front End Developer Blog" - + // Header customization + header: { + backgroundColor: '#f1f6f8', // can be a CSS gradient + titleColor: '#ff5252', + subtitleColor: '#37474f', + }, }; - ``` ### 4. **Write A Blog.** @@ -154,9 +155,7 @@ Any idea on how we can make this more awesome ? [Open a new issue](https://githu ## :boom: Todo - Add Comment From Github -- Add Loader - Authentication using Github -- Seo using React helmet - Footer - Header - Social Media Sharing diff --git a/package-lock.json b/package-lock.json index 3f2dc68..d00e0c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "github-blogs", + "name": "react-blog-github", "version": "0.1.0", "lockfileVersion": 1, "requires": true, @@ -1949,6 +1949,29 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/is-prop-valid": { + "version": "0.8.6", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz", + "integrity": "sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1960,9 +1983,9 @@ "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==" }, "@hapi/hoek": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz", - "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==" + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz", + "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==" }, "@hapi/joi": { "version": "15.1.1", @@ -3387,6 +3410,22 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.5.tgz", "integrity": "sha512-sGhfINU+AuMw9oFAdIn/nD5sem3pn/WgxAfDZ//Q3CnF+5uaho7C7shh2rKLk6sKE/XkfmyibghocwKdVjLIKg==" }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -4025,6 +4064,11 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -4663,6 +4707,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -4746,6 +4795,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -11756,11 +11815,27 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz", "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==" }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "react-ga": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz", "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==" }, + "react-helmet": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz", + "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==", + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.5.4", + "react-fast-compare": "^2.0.2", + "react-side-effect": "^1.1.0" + } + }, "react-is": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", @@ -11898,6 +11973,14 @@ } } }, + "react-side-effect": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.2.0.tgz", + "integrity": "sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==", + "requires": { + "shallowequal": "^1.0.1" + } + }, "react-syntax-highlighter": { "version": "12.2.1", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz", @@ -12769,6 +12852,11 @@ } } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -13430,6 +13518,33 @@ "schema-utils": "^2.0.1" } }, + "styled-components": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.0.1.tgz", + "integrity": "sha512-E0xKTRIjTs4DyvC1MHu/EcCXIj6+ENCP8hP01koyoADF++WdBUOrSGwU1scJRw7/YaYOhDvvoad6VlMG+0j53A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.3", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/package.json b/package.json index 1382a0c..11cfa65 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,13 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-ga": "^2.7.0", + "react-helmet": "^5.2.1", "react-reactions": "github:randomdipesh/react-reactions", "react-router-dom": "^5.1.2", "react-scripts": "3.3.0", "react-syntax-highlighter": "^12.2.1", - "reading-time": "^1.2.0" + "reading-time": "^1.2.0", + "styled-components": "^5.0.1" }, "scripts": { "predeploy": "npm run build", diff --git a/public/index.html b/public/index.html index aa069f2..dc9a121 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,9 @@ - - - React App diff --git a/src/Application.js b/src/Application.js new file mode 100644 index 0000000..ca92c31 --- /dev/null +++ b/src/Application.js @@ -0,0 +1,23 @@ +import React from 'react' +import { ApolloProvider } from '@apollo/react-hooks'; +import { Helmet } from "react-helmet"; + +import { config } from './config' +import { client } from './Utils/apollo'; +import Router from './Router'; + +const Application = () => ( + <> + + {config.title} + + + + + + + + +); + +export default Application; \ No newline at end of file diff --git a/src/Assets/Img/loader.svg b/src/Assets/Img/loader.svg new file mode 100644 index 0000000..af04183 --- /dev/null +++ b/src/Assets/Img/loader.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/Components/Blog/BlogContainer.js b/src/Components/Blog/BlogContainer.js new file mode 100644 index 0000000..0a1a7e9 --- /dev/null +++ b/src/Components/Blog/BlogContainer.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +export const BlogContainer = styled.div` + margin: 2rem auto 0; + width: 90%; + max-width: 700px; + padding: 20px 10px; +` \ No newline at end of file diff --git a/src/Components/Blog/Card/Card.js b/src/Components/Blog/Card/Card.js new file mode 100644 index 0000000..ec5eecf --- /dev/null +++ b/src/Components/Blog/Card/Card.js @@ -0,0 +1,50 @@ +import React, { useState, useEffect } from "react"; +import readingTime from "reading-time"; +import { useHistory } from "react-router-dom"; + +import { + CardContainer, + CardHeader, + CardCategory, + CardReadingTime, + CardTitle, + CardDescription, +} from './' + +export const Card = ({ blog }) => { + const [labels, setLabels] = useState([]); + const history = useHistory(); + + const openBlog = (title, number) => { + history.push(`/blog/${title}/${number}`); + } + + useEffect(() => { + const labels = blog.labels.nodes.filter((value) => { + return value.name !== "blog"; + }); + + setLabels(labels); + }, [blog.labels.nodes]); + + return ( + + + <> + {labels.map((value, i) => { + return ( + + ); + })} + + + +
+ openBlog(blog.title, blog.number)}>{blog.title} + + {blog.bodyText} + +
+ + ); +} diff --git a/src/Components/Blog/Card/CardCategory.js b/src/Components/Blog/Card/CardCategory.js new file mode 100644 index 0000000..ea7f08e --- /dev/null +++ b/src/Components/Blog/Card/CardCategory.js @@ -0,0 +1,24 @@ +import React from 'react' +import styled from 'styled-components' + +const StyledCategory = styled.div` + display: inline-block; + background: #009bbb; + border-radius: 3px; + padding: 3px 15px; + font-size: 12px; + text-transform: uppercase; + color: #fff; + font-weight: 300; + line-height: 28px; + font-family: "Quicksand"; + margin-right: 10px; +` + +export const CardCategory = ({ value }) => ( + + {value.name} + +) \ No newline at end of file diff --git a/src/Components/Blog/Card/CardContainer.js b/src/Components/Blog/Card/CardContainer.js new file mode 100644 index 0000000..26c856c --- /dev/null +++ b/src/Components/Blog/Card/CardContainer.js @@ -0,0 +1,6 @@ +import styled from 'styled-components' + +export const CardContainer = styled.div` + cursor: pointer; + margin-bottom: 6rem; +` \ No newline at end of file diff --git a/src/Components/Blog/Card/CardDescription.js b/src/Components/Blog/Card/CardDescription.js new file mode 100644 index 0000000..748c6ad --- /dev/null +++ b/src/Components/Blog/Card/CardDescription.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const CardDescription = styled.p` + font-size: 18px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +` \ No newline at end of file diff --git a/src/Components/Blog/Card/CardHeader.js b/src/Components/Blog/Card/CardHeader.js new file mode 100644 index 0000000..765dc1a --- /dev/null +++ b/src/Components/Blog/Card/CardHeader.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +export const CardHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; +` \ No newline at end of file diff --git a/src/Components/Blog/Card/CardReadingTime.js b/src/Components/Blog/Card/CardReadingTime.js new file mode 100644 index 0000000..ba3471b --- /dev/null +++ b/src/Components/Blog/Card/CardReadingTime.js @@ -0,0 +1,11 @@ +import React from 'react' +import styled from 'styled-components' + +const ReadingTime = styled.p` + color: #b5b5b5; + font-size: 15px +` + +export const CardReadingTime = ({ time }) => ( + {time} Min Read +) \ No newline at end of file diff --git a/src/Components/Blog/Card/CardTitle.js b/src/Components/Blog/Card/CardTitle.js new file mode 100644 index 0000000..455b813 --- /dev/null +++ b/src/Components/Blog/Card/CardTitle.js @@ -0,0 +1,12 @@ +import styled from 'styled-components' + +export const CardTitle = styled.h2` + font-size: 34px; + transition-duration: 0.15s, 0.15s, 0.15s; + transition-timing-function: ease-in, ease-in, ease-in; + transition-delay: 0s, 0s, 0s; + + :hover { + opacity: 0.7; + } +` \ No newline at end of file diff --git a/src/Components/Blog/Card/index.js b/src/Components/Blog/Card/index.js new file mode 100644 index 0000000..6a76cb9 --- /dev/null +++ b/src/Components/Blog/Card/index.js @@ -0,0 +1,7 @@ +export { CardContainer } from './CardContainer' +export { CardHeader } from './CardHeader' +export { CardCategory } from './CardCategory' +export { CardTitle } from './CardTitle' +export { CardDescription } from './CardDescription' +export { CardReadingTime } from './CardReadingTime' +export { Card } from './Card' \ No newline at end of file diff --git a/src/Components/Blog/index.js b/src/Components/Blog/index.js new file mode 100644 index 0000000..badaf81 --- /dev/null +++ b/src/Components/Blog/index.js @@ -0,0 +1 @@ +export { BlogContainer } from './BlogContainer' diff --git a/src/Components/BlogCard/BlogCard.css b/src/Components/BlogCard/BlogCard.css deleted file mode 100644 index d5b0841..0000000 --- a/src/Components/BlogCard/BlogCard.css +++ /dev/null @@ -1,51 +0,0 @@ -.blog-card-div{ - cursor: pointer; - margin-bottom: 6rem; -} - -.blog-card-description > p { - font-size: 18px; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; -} - -.blog-card-title > h2{ - font-size: 34px; - transition-duration: 0.15s, 0.15s, 0.15s; - transition-timing-function: ease-in, ease-in, ease-in; - transition-delay: 0s, 0s, 0s; - -} - -.blog-card-title > h2:hover{ - opacity: 0.7 - -} - - -.blog-catgeory{ - display: inline-block; - background: #009bbb; - border-radius: 3px; - padding: 3px 15px; - font-size: 12px; - text-transform: uppercase; - color: #fff; - font-weight: 300; - line-height: 28px; - font-family: "Quicksand"; - margin-right: 10px; -} - -.reading-time{ - color: #b5b5b5; - font-size: 15px -} - -.blog-card-header{ - display: flex; - align-items: center; - justify-content: space-between; -} \ No newline at end of file diff --git a/src/Components/BlogCard/BlogCard.js b/src/Components/BlogCard/BlogCard.js deleted file mode 100644 index 8e6dc77..0000000 --- a/src/Components/BlogCard/BlogCard.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useState, useEffect } from "react"; -import readingTime from "reading-time"; -import { useHistory } from "react-router-dom"; - -import "./BlogCard.css"; - - -export default function BlogCard({ blog }) { - const [lables, setLables] = useState([]); - - let history = useHistory(); - - useEffect(() => { - getLabels(blog.labels.nodes); - }, [blog.labels.nodes]); - - function openBlog(title, number) { - history.push(`/blog/${title}/${number}`); - } - - function getLabels(nodes) { - const lables = nodes.filter((value) => { - return value.name !== "blog"; - }); - setLables(lables); - } - - return ( -
-
-
- {lables.map(value => { - return ( -
- {value.name} -
- ); - })} -
-
-

{readingTime(blog.body).minutes} Min Read

-
-
-
-
-

openBlog(blog.title, blog.number)}>{blog.title}

-
-
-

- {blog.bodyText} -

-
-
-
-
- ); -} diff --git a/src/Components/Common/Loader.js b/src/Components/Common/Loader.js new file mode 100644 index 0000000..615cbaf --- /dev/null +++ b/src/Components/Common/Loader.js @@ -0,0 +1,20 @@ +import React from 'react' +import styled from 'styled-components' + +import loader from '../../Assets/Img/loader.svg' + +const LoaderContainer = styled.span` + display: flex; + justify-content: center; + align-items: center; + + img { + height: 128px; + } +` + +export const Loader = () => ( + + Loading... + +) \ No newline at end of file diff --git a/src/Components/Common/index.js b/src/Components/Common/index.js new file mode 100644 index 0000000..bf930f5 --- /dev/null +++ b/src/Components/Common/index.js @@ -0,0 +1 @@ +export { Loader } from './Loader' \ No newline at end of file diff --git a/src/Components/GithubReactionTextCard/GithubReactionTextCard.css b/src/Components/GithubReactionTextCard/GithubReactionTextCard.css deleted file mode 100644 index 3ad2dac..0000000 --- a/src/Components/GithubReactionTextCard/GithubReactionTextCard.css +++ /dev/null @@ -1,38 +0,0 @@ -.reaction-text-github-div { - padding-top: 5px; - background-color: rgb(255, 255, 255); - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px; - display: inline-block; -} - -.reaction-text-github-div > p { - font-size: 14px; - line-height: 1.5; - color: rgb(118, 118, 118); - margin: 6px 12px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica; -} -.reaction-text-github-div > div { - height: 1px; - margin: 8px 1px 0px; - background-color: rgb(229, 229, 229); -} -.reaction-text-github-div > span > a{ - display: block; - text-align: center; - margin: 0; - padding: 5px; - line-height: 1.5; - font-size: 14px; - text-decoration: none; - transition-duration: 0.15s, 0.15s, 0.15s; - transition-timing-function: ease-in, ease-in, ease-in; - transition-delay: 0s, 0s, 0s; - color: rgba(0, 0, 0, 0.54); -} - -.reaction-text-github-div > span > a:hover { - color: black; -} \ No newline at end of file diff --git a/src/Components/GithubReactionTextCard/GithubReactionTextCard.js b/src/Components/GithubReactionTextCard/GithubReactionTextCard.js deleted file mode 100644 index b542fdf..0000000 --- a/src/Components/GithubReactionTextCard/GithubReactionTextCard.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; - -import "./GithubReactionTextCard.css"; - -export default function GithubReactionTextCard({ link }) { - return ( -
-

Give your reaction on Github

-
- - - Github link ⚡️ - - -
- ); -} diff --git a/src/Components/Header/Header.css b/src/Components/Header/Header.css deleted file mode 100644 index 4fa2a75..0000000 --- a/src/Components/Header/Header.css +++ /dev/null @@ -1,46 +0,0 @@ -.main-header { - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - padding: 5em; - text-align: center; - background-color: #f1f6f8; -} - -.wrap-big { - margin: 0 auto; - padding: 0 1em; - max-width: 1140px; - text-align: center; -} - -.header-title { - font-weight: 700; - line-height: 1.15; - margin: 1.25rem 0; - font-size: 4.5em; - text-align: center; - color: #ff5252; -} -.header-subtitle { - font-weight: 400; - color: #37474f; - line-height: 1.15; - margin: 1.25rem 0; - font-size: 2.5em; - text-align: center; -} - -@media only screen and (max-width: 768px) { - .header-subtitle { - font-size: 2em; - } - - .header-title { - font-size: 3em; - } - - .main-header { - padding: 3em; - } -} diff --git a/src/Components/Header/Header.js b/src/Components/Header/Header.js index 25871c1..3e503ce 100644 --- a/src/Components/Header/Header.js +++ b/src/Components/Header/Header.js @@ -1,15 +1,20 @@ import React from 'react' -import './Header.css' -import {config} from "../../config" +import { + HeaderContainer, + HeaderWrapper, + HeaderTitle, + HeaderSubtitle +} from './' +import { config } from "../../config" -export default function Header() { +export const Header = () => { return ( -
-
-

{config.title}

-

{config.subtitle}

-
-
+ + + {config.title} + {config.subtitle} + + ) } diff --git a/src/Components/Header/HeaderContainer.js b/src/Components/Header/HeaderContainer.js new file mode 100644 index 0000000..5282a2c --- /dev/null +++ b/src/Components/Header/HeaderContainer.js @@ -0,0 +1,17 @@ +import styled from 'styled-components' + +import { config } from '../../config' +const { backgroundColor } = config.header + +export const HeaderContainer = styled.div` + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + padding: 5em; + text-align: center; + background-color: ${backgroundColor}; + + @media only screen and (max-width: 768px) { + padding: 3em; + } +` \ No newline at end of file diff --git a/src/Components/Header/HeaderSubtitle.js b/src/Components/Header/HeaderSubtitle.js new file mode 100644 index 0000000..2077fe6 --- /dev/null +++ b/src/Components/Header/HeaderSubtitle.js @@ -0,0 +1,17 @@ +import styled from 'styled-components' + +import { config } from '../../config' +const { subtitleColor } = config.header + +export const HeaderSubtitle = styled.h1` + font-weight: 400; + color: ${subtitleColor}; + line-height: 1.15; + margin: 1.25rem 0; + font-size: 2.5em; + text-align: center; + + @media only screen and (max-width: 768px) { + font-size: 2em; + } +` \ No newline at end of file diff --git a/src/Components/Header/HeaderTitle.js b/src/Components/Header/HeaderTitle.js new file mode 100644 index 0000000..2cfa060 --- /dev/null +++ b/src/Components/Header/HeaderTitle.js @@ -0,0 +1,17 @@ +import styled from 'styled-components' + +import { config } from '../../config' +const { titleColor } = config.header + +export const HeaderTitle = styled.h1` + font-weight: 700; + line-height: 1.15; + margin: 1.25rem 0; + font-size: 4.5em; + text-align: center; + color: ${titleColor}; + + @media only screen and (max-width: 768px) { + font-size: 3em; + } +` \ No newline at end of file diff --git a/src/Components/Header/HeaderWrapper.js b/src/Components/Header/HeaderWrapper.js new file mode 100644 index 0000000..dbae626 --- /dev/null +++ b/src/Components/Header/HeaderWrapper.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +export const HeaderWrapper = styled.div` + margin: 0 auto; + padding: 0 1em; + max-width: 1140px; + text-align: center; +` \ No newline at end of file diff --git a/src/Components/Header/index.js b/src/Components/Header/index.js new file mode 100644 index 0000000..908718c --- /dev/null +++ b/src/Components/Header/index.js @@ -0,0 +1,5 @@ +export { HeaderContainer } from './HeaderContainer' +export { HeaderWrapper } from './HeaderWrapper' +export { HeaderTitle } from './HeaderTitle' +export { HeaderSubtitle } from './HeaderSubtitle' +export { Header } from './Header' \ No newline at end of file diff --git a/src/Components/Post/Author/AuthorAvatar.js b/src/Components/Post/Author/AuthorAvatar.js new file mode 100644 index 0000000..7bea848 --- /dev/null +++ b/src/Components/Post/Author/AuthorAvatar.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const AuthorAvatar = styled.img` + width: 50px; + height: 50px; + border-radius: 40px; + margin: 10px; + margin-left: 0px; +` \ No newline at end of file diff --git a/src/Components/Post/Author/AuthorDetails.js b/src/Components/Post/Author/AuthorDetails.js new file mode 100644 index 0000000..7edee0e --- /dev/null +++ b/src/Components/Post/Author/AuthorDetails.js @@ -0,0 +1,6 @@ +import styled from 'styled-components' + +export const AuthorDetails = styled.div` + display: flex; + align-items: center; +` \ No newline at end of file diff --git a/src/Components/Post/Author/AuthorName.js b/src/Components/Post/Author/AuthorName.js new file mode 100644 index 0000000..77e5188 --- /dev/null +++ b/src/Components/Post/Author/AuthorName.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +export const AuthorName = styled.p` + margin-bottom: 0px; + margin-top: 0px; + font-size: 16px; + color: rgba(0, 0, 0, 0.84); +` \ No newline at end of file diff --git a/src/Components/Post/Author/index.js b/src/Components/Post/Author/index.js new file mode 100644 index 0000000..cdb9974 --- /dev/null +++ b/src/Components/Post/Author/index.js @@ -0,0 +1,3 @@ +export { AuthorDetails } from './AuthorDetails' +export { AuthorAvatar } from './AuthorAvatar' +export { AuthorName } from './AuthorName' \ No newline at end of file diff --git a/src/Components/Post/PostContainer.js b/src/Components/Post/PostContainer.js new file mode 100644 index 0000000..67a7147 --- /dev/null +++ b/src/Components/Post/PostContainer.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const PostContainer = styled.div` + margin: 2rem auto 0; + width: 90%; + max-width: 700px; + padding: 20px 10px; + position: relative; +` \ No newline at end of file diff --git a/src/Components/Post/PostDate.js b/src/Components/Post/PostDate.js new file mode 100644 index 0000000..ba9c8d1 --- /dev/null +++ b/src/Components/Post/PostDate.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const PostDate = styled.p` + color: rgba(0, 0, 0, 0.54); + font-weight: 400; + font-size: 14px; + margin-bottom: 0px; + margin-top: 0px; +` \ No newline at end of file diff --git a/src/Components/Post/PostDateLink.js b/src/Components/Post/PostDateLink.js new file mode 100644 index 0000000..ed27220 --- /dev/null +++ b/src/Components/Post/PostDateLink.js @@ -0,0 +1,14 @@ +import styled from 'styled-components' + +export const PostDateLink = styled.a` + font-size: 14px; + text-decoration: none; + transition-duration: 0.15s, 0.15s, 0.15s; + transition-timing-function: ease-in, ease-in, ease-in; + transition-delay: 0s, 0s, 0s; + color: rgba(0, 0, 0, 0.54); + + :hover { + color: rgba(0, 0, 0, 0.84); + } +` \ No newline at end of file diff --git a/src/Components/Post/PostReaction.js b/src/Components/Post/PostReaction.js new file mode 100644 index 0000000..fc305d0 --- /dev/null +++ b/src/Components/Post/PostReaction.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const PostReaction = styled.span` + position: absolute; + bottom: 60px; + animation-name: scale-in; + animation-duration: 0.15s; + animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); +` \ No newline at end of file diff --git a/src/Components/Post/PostTitle.js b/src/Components/Post/PostTitle.js new file mode 100644 index 0000000..aa79bdb --- /dev/null +++ b/src/Components/Post/PostTitle.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +export const PostTitle = styled.h1` + @media only screen and (max-width: 768px) { + font-size: 30px; + } +` \ No newline at end of file diff --git a/src/Components/Post/ReactionCard/ReactionCard.js b/src/Components/Post/ReactionCard/ReactionCard.js new file mode 100644 index 0000000..bbd7802 --- /dev/null +++ b/src/Components/Post/ReactionCard/ReactionCard.js @@ -0,0 +1,20 @@ +import React from "react"; + +import { + ReactionCardContainer, + ReactionCardText, + ReactionCardBorder, + ReactionCardLink, +} from './' + +export const ReactionCard = ({ link }) => { + return ( + + Give your reaction on Github + + + Github link ⚡️ + + + ); +} diff --git a/src/Components/Post/ReactionCard/ReactionCardBorder.js b/src/Components/Post/ReactionCard/ReactionCardBorder.js new file mode 100644 index 0000000..3358f20 --- /dev/null +++ b/src/Components/Post/ReactionCard/ReactionCardBorder.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +export const ReactionCardBorder = styled.div` + height: 1px; + margin: 8px 1px 0px; + background-color: rgb(229, 229, 229); +` \ No newline at end of file diff --git a/src/Components/Post/ReactionCard/ReactionCardContainer.js b/src/Components/Post/ReactionCard/ReactionCardContainer.js new file mode 100644 index 0000000..e235989 --- /dev/null +++ b/src/Components/Post/ReactionCard/ReactionCardContainer.js @@ -0,0 +1,10 @@ +import styled from 'styled-components' + +export const ReactionCardContainer = styled.div` + padding-top: 5px; + background-color: rgb(255, 255, 255); + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px; + display: inline-block; +` \ No newline at end of file diff --git a/src/Components/Post/ReactionCard/ReactionCardLink.js b/src/Components/Post/ReactionCard/ReactionCardLink.js new file mode 100644 index 0000000..eef965e --- /dev/null +++ b/src/Components/Post/ReactionCard/ReactionCardLink.js @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +export const ReactionCardLink = styled.a` + display: block; + text-align: center; + margin: 0; + padding: 5px; + line-height: 1.5; + font-size: 14px; + text-decoration: none; + transition-duration: 0.15s, 0.15s, 0.15s; + transition-timing-function: ease-in, ease-in, ease-in; + transition-delay: 0s, 0s, 0s; + color: rgba(0, 0, 0, 0.54); + + :hover { + color: black; + } +` \ No newline at end of file diff --git a/src/Components/Post/ReactionCard/ReactionCardText.js b/src/Components/Post/ReactionCard/ReactionCardText.js new file mode 100644 index 0000000..375cb38 --- /dev/null +++ b/src/Components/Post/ReactionCard/ReactionCardText.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const ReactionCardText = styled.p` + font-size: 14px; + line-height: 1.5; + color: rgb(118, 118, 118); + margin: 6px 12px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica; +` \ No newline at end of file diff --git a/src/Components/Post/ReactionCard/index.js b/src/Components/Post/ReactionCard/index.js new file mode 100644 index 0000000..a93c22f --- /dev/null +++ b/src/Components/Post/ReactionCard/index.js @@ -0,0 +1,5 @@ +export { ReactionCardContainer } from './ReactionCardContainer' +export { ReactionCardText } from './ReactionCardText' +export { ReactionCardBorder } from './ReactionCardBorder' +export { ReactionCardLink } from './ReactionCardLink' +export { ReactionCard } from './ReactionCard' diff --git a/src/Components/Post/index.js b/src/Components/Post/index.js new file mode 100644 index 0000000..150a6bb --- /dev/null +++ b/src/Components/Post/index.js @@ -0,0 +1,5 @@ +export { PostContainer } from './PostContainer' +export { PostTitle } from './PostTitle' +export { PostDate } from './PostDate' +export { PostDateLink } from './PostDateLink' +export { PostReaction } from './PostReaction' \ No newline at end of file diff --git a/src/Containers/Blog.js b/src/Containers/Blog.js new file mode 100644 index 0000000..937ede9 --- /dev/null +++ b/src/Containers/Blog.js @@ -0,0 +1,73 @@ +import React, { useState, useEffect } from "react"; +import { gql } from "apollo-boost"; +import { useQuery } from '@apollo/react-hooks'; + +import { config } from "../config"; +import { Header } from "../Components/Header"; +import { Loader } from '../Components/Common' +import { BlogContainer } from '../Components/Blog' +import { Card } from '../Components/Blog/Card' + +const GET_POSTS = gql` +{ + repository(owner: "${config.githubUserName}", name: "${config.githubRepo}") { + issues(first: 100, states: OPEN, filterBy: { labels: "blog" }) { + nodes { + title + body + bodyHTML + bodyText + number + labels(first: 100) { + nodes { + color + name + id + } + } + author { + url + avatarUrl + login + } + updatedAt + id + } + } + } +} +` + +const Blog = () => { + const [posts, setPosts] = useState([]); + const { loading, error, data } = useQuery(GET_POSTS); + + useEffect(() => { + if (!loading) { + if (error) { + console.error(error) + } + + if (data) { + setPosts(data?.repository?.issues?.nodes) + } + } + }, [loading, error, data]); + + return ( + <> +
+ + { + loading + ? + : posts.map((v, i) => { + return ; + }) + } + + + ); +} + +export default Blog; diff --git a/src/Containers/BlogPost/BlogPost.js b/src/Containers/BlogPost.js similarity index 50% rename from src/Containers/BlogPost/BlogPost.js rename to src/Containers/BlogPost.js index 4862e28..1fbb302 100644 --- a/src/Containers/BlogPost/BlogPost.js +++ b/src/Containers/BlogPost.js @@ -1,22 +1,66 @@ import React, { useState, useEffect, useCallback } from "react"; -import ApolloClient from "apollo-boost"; -import { gql } from "apollo-boost"; import moment from "moment"; import Markdown from "markdown-to-jsx"; import readingTime from "reading-time"; import SyntaxHighlighter from "react-syntax-highlighter"; import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { GithubCounter } from "react-reactions"; - -import "./BlogPost.css"; -import { config } from "../../config"; -import GithubReactionTextCard from "../../Components/GithubReactionTextCard/GithubReactionTextCard"; +import { gql } from "apollo-boost"; +import { useQuery } from '@apollo/react-hooks'; + +import { config } from "../config"; +import { ReactionCard } from "../Components/Post/ReactionCard"; +import { Loader } from '../Components/Common' +import { + PostContainer, + PostTitle, + PostDate, + PostDateLink, + PostReaction, +} from '../Components/Post' +import { + AuthorDetails, + AuthorAvatar, + AuthorName, +} from '../Components/Post/Author' export default function BlogHome() { - const [blog, setBlogs] = useState([]); - const [addReaction, setAddreaction] = useState(false); - const [reactionCounter, setReactionCounter] = useState([]); const issueNumber = parseInt(window.location.href.split("/").pop()); + const GET_POSTS = gql` + { + repository(owner: "${config.githubUserName}", name: "${config.githubRepo}") { + issue(number: ${issueNumber}) { + title + body + bodyHTML + url + bodyText + number + bodyHTML + author { + url + avatarUrl + login + } + reactions(first:100){ + nodes{ + content + user{ + id + login + } + } + } + updatedAt + id + } + } + } + ` + const [post, setPost] = useState([]); + const [addReaction, setAddReaction] = useState(false); + const [reactionCounter, setReactionCounter] = useState([]); + const { loading, error, data } = useQuery(GET_POSTS); const getEmojiStringByName = useCallback((emojiName) => { switch (emojiName) { @@ -67,74 +111,10 @@ export default function BlogHome() { setReactionCounter(reactions_array); }, [getEmojiStringByName]); - const setBlogsFunction = useCallback((array) => { - setBlogs(array); - setReactionFun(array.reactions.nodes); - }, [setReactionFun]); - - const getBlogsFromGithubIssues = useCallback(() => { - const client = new ApolloClient({ - uri: "https://api.github.com/graphql", - request: operation => { - operation.setContext({ - headers: { - authorization: `Bearer ${atob(config.githubConvertedToken)}` - } - }); - } - }); - - client - .query({ - query: gql` - { - repository(owner: "${config.githubUserName}", name: "${config.githubRepo}") { - issue(number: ${issueNumber}) { - title - body - bodyHTML - url - bodyText - number - bodyHTML - author { - url - avatarUrl - login - } - reactions(first:100){ - nodes{ - content - user{ - id - login - } - } - } - updatedAt - id - } - } - } - ` - }) - .then(result => { - setBlogsFunction(result.data.repository.issue); - }) - .catch(err => { - console.error(err); - }); - }, [issueNumber, setBlogsFunction]); - - - useEffect(() => { - getBlogsFromGithubIssues(); - }, [getBlogsFromGithubIssues]); - const HyperLink = ({ children, ...props }) => ( {children} -