Lee SeJin

transfer trendRepo Api to frontend

1 +const trendBox = document.getElementById("jsGotoTrend");
2 +const trendRepoBox = document.getElementById("jsGotoTrendRepos");
3 +const indicator = document.getElementById("jsIndicator");
4 +const URL = "https://api.trending-github.com/github/repositories?period=daily";
5 +
6 +
7 +const handleRepo = (list) =>{
8 + indicator.style.display = "none";
9 + list.forEach(element => {
10 + const anchor = document.createElement("a");
11 + anchor.href = element.url;
12 + anchor.target = "_blank"
13 + anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>`
14 + trendRepoBox.appendChild(anchor);
15 + });
16 +}
17 +
18 +
19 +const getTrend=()=>{
20 + const response = fetch(URL).then(function(response){
21 + return response.json();
22 + }).then(function(data){
23 + const trendRepoList = data.slice(0,3);
24 + handleRepo(trendRepoList);
25 + });
26 +
27 +};
28 +
29 +const init=()=>{
30 + getTrend();
31 +};
32 +
33 +if(trendBox){
34 + init();
35 +};
...\ No newline at end of file ...\ No newline at end of file
1 +const userContributionsBox = document.querySelector(".user-status__contributions");
2 +const totalContributionIndicator = document.getElementById("jsTotalContributions");
3 +
4 +
5 +
6 +const handleImage = () =>{
7 + const total = totalContributionIndicator.innerText;
8 + console.log(total);
9 +};
10 +
11 +
12 +const getGithubRepo = () =>{
13 + console.log("Get Api here");
14 +};
15 +
16 +const init=()=>{
17 + handleImage();
18 + getGithubRepo();
19 +};
20 +
21 +if(userContributionsBox){
22 + init();
23 +};
...\ No newline at end of file ...\ No newline at end of file
1 import "../scss/styles.scss"; 1 import "../scss/styles.scss";
2 2
3 -console.log("it works");
...\ No newline at end of file ...\ No newline at end of file
3 +console.log("main");
...\ No newline at end of file ...\ No newline at end of file
......
1 +const form = document.querySelector(".home-search__form");
2 +const input = document.getElementById("jsInput");
3 +
4 +const handleSearch = (event) => {
5 + event.preventDefault();
6 + const text = input.value;
7 + const link = document.createElement("a");
8 + link.href = `https://www.google.com/search?q=${text}`;
9 + link.target = "_blank";
10 + form.appendChild(link);
11 + link.click();
12 + input.value = "";
13 +}
14 +
15 +
16 +if(form){
17 + form.addEventListener("submit", handleSearch);
18 +}
...\ No newline at end of file ...\ No newline at end of file
1 $blue: #0063b2; 1 $blue: #0063b2;
2 $skyblue: #9cc3d5; 2 $skyblue: #9cc3d5;
3 +$star: #ffb700;
3 $space: 40px; 4 $space: 40px;
......
...@@ -81,6 +81,13 @@ ...@@ -81,6 +81,13 @@
81 font-size: 18px; 81 font-size: 18px;
82 margin: 10px 0px; 82 margin: 10px 0px;
83 } 83 }
84 + .repoName {
85 + font-weight: 600;
86 + }
87 + .repoStar {
88 + font-weight: 600;
89 + color: $star;
90 + }
84 } 91 }
85 } 92 }
86 } 93 }
......
...@@ -13,60 +13,13 @@ const getQuote = async (req, res) => { ...@@ -13,60 +13,13 @@ const getQuote = async (req, res) => {
13 return { quote, author }; 13 return { quote, author };
14 }; 14 };
15 15
16 -const gitTrend = async (req, res) => {
17 - const url =
18 - "https://api.trending-github.com/github/repositories?period=daily";
19 - const trendData = await axios.get(url).then(function (response) {
20 - return response.data;
21 - });
22 - const name0 = trendData[0].name;
23 - const description0 = trendData[0].description;
24 - const Url0 = trendData[0].url;
25 - const stars0 = trendData[0].stars;
26 - const name1 = trendData[1].name;
27 - const description1 = trendData[1].description;
28 - const Url1 = trendData[1].url;
29 - const stars1 = trendData[1].stars;
30 - const name2 = trendData[2].name;
31 - const description2 = trendData[2].description;
32 - const Url2 = trendData[2].url;
33 - const stars2 = trendData[2].stars;
34 -
35 - return {
36 - name0,
37 - description0,
38 - Url0,
39 - stars0,
40 - name1,
41 - description1,
42 - Url1,
43 - stars1,
44 - name2,
45 - description2,
46 - Url2,
47 - stars2,
48 - };
49 -};
50 16
51 export const handleHome = async (req, res) => { 17 export const handleHome = async (req, res) => {
52 const quote = await getQuote(); 18 const quote = await getQuote();
53 - const trend = await gitTrend();
54 res.render("home", { 19 res.render("home", {
55 pageTitle: "Home", 20 pageTitle: "Home",
56 quote: quote.quote, 21 quote: quote.quote,
57 - author: quote.author, 22 + author: quote.author
58 - name0: trend.name0,
59 - description0: trend.description0,
60 - Url0: trend.Url0,
61 - stars0: trend.stars0,
62 - name1: trend.name1,
63 - description1: trend.description1,
64 - Url1: trend.Url1,
65 - stars1: trend.stars1,
66 - name2: trend.name2,
67 - description2: trend.description2,
68 - Url2: trend.Url2,
69 - stars2: trend.stars2,
70 }); 23 });
71 }; 24 };
72 25
...@@ -76,7 +29,7 @@ export const getUserDetail = async (req, res) => { ...@@ -76,7 +29,7 @@ export const getUserDetail = async (req, res) => {
76 const quote = await getQuote(); 29 const quote = await getQuote();
77 const user = await User.findById(id); 30 const user = await User.findById(id);
78 const repo = await getRepos(); 31 const repo = await getRepos();
79 - const totalCon = await getContributions(); 32 + const totalCon = await getContributions(user.githubName);
80 res.render("userDetail", { 33 res.render("userDetail", {
81 pagetTitle: "User Detail", 34 pagetTitle: "User Detail",
82 quote: quote.quote, 35 quote: quote.quote,
...@@ -203,7 +156,7 @@ export const logout = (req, res) => { ...@@ -203,7 +156,7 @@ export const logout = (req, res) => {
203 res.redirect("/"); 156 res.redirect("/");
204 }; 157 };
205 158
206 -const getRepos = async(req,res) =>{ 159 +const getRepos = async() =>{
207 const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2"; 160 const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
208 const latelyRepos = await axios.get(url).then(function(response){ 161 const latelyRepos = await axios.get(url).then(function(response){
209 return response.data; 162 return response.data;
...@@ -221,9 +174,8 @@ const getRepos = async(req,res) =>{ ...@@ -221,9 +174,8 @@ const getRepos = async(req,res) =>{
221 }; 174 };
222 }; 175 };
223 176
224 -const getContributions = async(req, res) =>{ 177 +const getContributions = async(username) =>{
225 const token = process.env.GH_SECRET_SH; 178 const token = process.env.GH_SECRET_SH;
226 - const username = 'lsj8706'
227 const headers = { 179 const headers = {
228 'Authorization': `bearer ${token}`, 180 'Authorization': `bearer ${token}`,
229 }; 181 };
......
...@@ -8,6 +8,9 @@ block content ...@@ -8,6 +8,9 @@ block content
8 .home-quote 8 .home-quote
9 h2=quote 9 h2=quote
10 h3=author 10 h3=author
11 + .home-search
12 + form.home-search__form
13 + input(type="text" id="jsInput" placeholder="Google 검색")
11 .home-link 14 .home-link
12 if !loggedUser 15 if !loggedUser
13 a(href="/join") Join 16 a(href="/join") Join
...@@ -15,13 +18,10 @@ block content ...@@ -15,13 +18,10 @@ block content
15 else 18 else
16 a(href=`/users/${loggedUser._id}`) My profile 19 a(href=`/users/${loggedUser._id}`) My profile
17 20
18 - .gotoTrend 21 + .gotoTrend#jsGotoTrend
19 h2 Today's Trending Repositories 22 h2 Today's Trending Repositories
20 - .gotoTrend-repos 23 + .gotoTrend-repos#jsGotoTrendRepos
21 - a(href=Url0) 24 + span#jsIndicator Waiting....
22 - p=name0+": "+description0+" - "+stars0+" stars" 25 +block scripts
23 - a(href=Url1) 26 + script(src="/static/js/getTrend.js")
24 - p=name1+": "+description1+" - "+stars1+" stars" 27 + script(src="/static/js/search.js")
25 - a(href=Url2)
26 - p=name2+": "+description2+" - "+stars2+" stars"
27 -
......
...@@ -11,4 +11,4 @@ html ...@@ -11,4 +11,4 @@ html
11 block content 11 block content
12 include ../partials/footer 12 include ../partials/footer
13 script(src="/static/js/main.js") 13 script(src="/static/js/main.js")
14 - 14 + block scripts
......
...@@ -37,18 +37,19 @@ block content ...@@ -37,18 +37,19 @@ block content
37 hr 37 hr
38 .user-status 38 .user-status
39 .user-status__contributions 39 .user-status__contributions
40 - a(href=Url0, style={color:'grey'}) 40 + span#jsTotalContributions=totalContributions
41 - p=totalContributions
42 img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") 41 img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
43 .user-status__character 42 .user-status__character
44 - h3 Your step | commit numbers 43 + h3 Your step
45 img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;") 44 img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;")
46 .user-repositories 45 .user-repositories
47 .user-repo 46 .user-repo
47 + a(href=firstRepoUrl)
48 h3 REPO 1 48 h3 REPO 1
49 - a(href=Url0, style={color:'grey'}) 49 + p=fitstRepoName
50 - p=fitstRepoName+": "+firstRepoUrl
51 br 50 br
51 + a(href=secondRepoUrl)
52 h3 REPO 2 52 h3 REPO 2
53 - a(href=Url0, style={color:'grey'}) 53 + p=secondRepoName
54 - p=secondRepoName+": "+secondRepoUrl 54 +block scripts
55 + script(src="/static/js/githubInfo.js")
......
...@@ -2,7 +2,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); ...@@ -2,7 +2,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
2 const path = require("path"); 2 const path = require("path");
3 3
4 module.exports = { 4 module.exports = {
5 - entry: "./src/client/js/main.js", 5 + entry: {
6 + main: "./src/client/js/main.js",
7 + getTrend: "./src/client/js/getTrend.js",
8 + githubInfo: "./src/client/js/githubInfo.js",
9 + search: "./src/client/js/search.js",
10 + },
6 mode: "development", 11 mode: "development",
7 watch: true, 12 watch: true,
8 plugins: [ 13 plugins: [
...@@ -11,7 +16,7 @@ module.exports = { ...@@ -11,7 +16,7 @@ module.exports = {
11 }), 16 }),
12 ], 17 ],
13 output: { 18 output: {
14 - filename: "js/main.js", 19 + filename: "js/[name].js",
15 path: path.resolve(__dirname, "assets"), 20 path: path.resolve(__dirname, "assets"),
16 clean: true, 21 clean: true,
17 }, 22 },
......