From 210dc97400111e69e283c1a988ca68630c9ddc61 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Tue, 22 Feb 2022 14:39:21 +0100 Subject: [PATCH 01/20] .gitignore created --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..e442b65c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +token.js From 87920fc9114b9a8467a45432a0e99d2477742a86 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Tue, 22 Feb 2022 14:39:43 +0100 Subject: [PATCH 02/20] Initial github repo fetched --- code/script.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/code/script.js b/code/script.js index e69de29b..cf997eb5 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,12 @@ + +fetch('https://api.github.com/users/ariallahyar/repos', token) + .then((response) => { + return response.json(); + }) + .then((data) => { + // do something + console.log(data); + }) + .catch((error) => { + console.log(error); + }) \ No newline at end of file From b91971af3d4c50851653651ff4600638cfeafd89 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Wed, 23 Feb 2022 00:13:14 +0100 Subject: [PATCH 03/20] Fetch data for each repo and add to innerhtml done --- code/script.js | 53 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 46 insertions(+), 7 deletions(-) diff --git a/code/script.js b/code/script.js index cf997eb5..1ba7702f 100644 --- a/code/script.js +++ b/code/script.js @@ -1,12 +1,51 @@ +// API URLs and URL builders +const USER = 'ariallahyar'; +const repoUrl = 'https://api.github.com/users/ariallahyar/repos'; +const pullUrl = (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?page=2`}; +const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits`}; -fetch('https://api.github.com/users/ariallahyar/repos', token) +const fetcher = (url, token, callback) => { + fetch(url, token) .then((response) => { - return response.json(); + return response.json(); }) - .then((data) => { - // do something - console.log(data); + .then((repositories) => { + callback(repositories); }) .catch((error) => { - console.log(error); - }) \ No newline at end of file + console.log(error); + }) +} + +fetcher(repoUrl, PAT, (repositories) => { + let forkedReps = repositories.filter((repo) => { + return repo.fork === true && repo.name.startsWith("project-") + }); + + console.log(forkedReps) + + forkedReps.forEach((rep) => { + // Name, last update, default branch, URL + document.getElementById('projects').innerHTML += ` +
+

${rep.name}

+

Updated: ${rep.pushed_at}

+

Default branch: ${rep.default_branch}

+ Link to repository +
+ `; + // Commits + fetcher(commitUrl(rep.name), PAT, ((commits) => { + document.getElementById(rep.name).innerHTML += `

${commits.length} commits

` + })); + + // Pull requests + fetcher(pullUrl(rep.name), PAT, ((pullRequests) => { + console.log(pullRequests) + const myPulls = pullRequests.filter((pull) => { + return pull.user.login === USER; + }) + document.getElementById(rep.name).innerHTML += `

Pull requests: ${myPulls.length}

` + })); + }) +}) \ No newline at end of file From 43c9d24d4c0f6064295f30bcfeafb006281295b3 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Wed, 23 Feb 2022 09:54:40 +0100 Subject: [PATCH 04/20] Username and profile picture added --- code/index.html | 1 + code/script.js | 18 +++++++++++++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..1a576a19 100644 --- a/code/index.html +++ b/code/index.html @@ -9,6 +9,7 @@

GitHub Tracker

+

Projects:

diff --git a/code/script.js b/code/script.js index 1ba7702f..3bdb50bf 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,9 @@ // API URLs and URL builders const USER = 'ariallahyar'; +const userUrl = 'https://api.github.com/users/ariallahyar'; const repoUrl = 'https://api.github.com/users/ariallahyar/repos'; -const pullUrl = (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?page=2`}; -const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits`}; +const pullUrl = (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`}; //look into pagination +const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits`}; //look into pagination const fetcher = (url, token, callback) => { fetch(url, token) @@ -17,13 +18,21 @@ const fetcher = (url, token, callback) => { }) } +// WORKING, BUT WILL REDO SETUP +fetcher (userUrl, PAT, ((userProfile) => { + console.log(userProfile); + // Profile picture and username + document.getElementById('profile').innerHTML += ` + profile-pic +

Username: ${userProfile.login}

+ `; +})) + fetcher(repoUrl, PAT, (repositories) => { let forkedReps = repositories.filter((repo) => { return repo.fork === true && repo.name.startsWith("project-") }); - console.log(forkedReps) - forkedReps.forEach((rep) => { // Name, last update, default branch, URL document.getElementById('projects').innerHTML += ` @@ -41,7 +50,6 @@ fetcher(repoUrl, PAT, (repositories) => { // Pull requests fetcher(pullUrl(rep.name), PAT, ((pullRequests) => { - console.log(pullRequests) const myPulls = pullRequests.filter((pull) => { return pull.user.login === USER; }) From 26a134b7e2e438a8e86b6f6b32b653bd3b2e82c4 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Wed, 23 Feb 2022 12:14:23 +0100 Subject: [PATCH 05/20] Token restructured for local and build use --- code/index.html | 2 +- code/script.js | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index 1a576a19..4dad861f 100644 --- a/code/index.html +++ b/code/index.html @@ -15,7 +15,7 @@

Projects:

- + diff --git a/code/script.js b/code/script.js index 3bdb50bf..6fc7ba07 100644 --- a/code/script.js +++ b/code/script.js @@ -1,3 +1,11 @@ +// Use token locally or from build environment +const PAT = { + method: 'GET', + headers: { + Authorization: TOKEN || process.env.API_KEY // variable name when deploying + } +} + // API URLs and URL builders const USER = 'ariallahyar'; const userUrl = 'https://api.github.com/users/ariallahyar'; From 217ad1a25b97f3945a04c0cdb1242c250736e040 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Wed, 23 Feb 2022 12:17:55 +0100 Subject: [PATCH 06/20] .gitignore updated with process.txt --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index e442b65c..226a27ee 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ token.js +process.txt From fd10b9b2112f059a286bbe69c01258743bab6f6e Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Wed, 23 Feb 2022 15:39:13 +0100 Subject: [PATCH 07/20] Max number increased to 100 in commit endpoint --- code/script.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index 6fc7ba07..6f32b768 100644 --- a/code/script.js +++ b/code/script.js @@ -2,7 +2,7 @@ const PAT = { method: 'GET', headers: { - Authorization: TOKEN || process.env.API_KEY // variable name when deploying + Authorization: TOKEN //|| process.env.API_KEY // variable name when deploying } } @@ -11,7 +11,7 @@ const USER = 'ariallahyar'; const userUrl = 'https://api.github.com/users/ariallahyar'; const repoUrl = 'https://api.github.com/users/ariallahyar/repos'; const pullUrl = (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`}; //look into pagination -const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits`}; //look into pagination +const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits?per_page=100`}; //look into pagination const fetcher = (url, token, callback) => { fetch(url, token) @@ -53,6 +53,7 @@ fetcher(repoUrl, PAT, (repositories) => { `; // Commits fetcher(commitUrl(rep.name), PAT, ((commits) => { + console.log(commits); document.getElementById(rep.name).innerHTML += `

${commits.length} commits

` })); From 10723cd7aa1ca2604cc333bbbee6e221ba6d054f Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Wed, 23 Feb 2022 22:33:27 +0100 Subject: [PATCH 08/20] Basic chart and styling added. Bio added --- code/chart.js | 36 +++++++++++++++++++-- code/index.html | 11 ++++--- code/script.js | 24 +++++++------- code/style.css | 83 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 135 insertions(+), 19 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..e6579e17 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,34 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') - //"Draw" the chart here 👇 +const renderChart = ((completedProjects) => { + + const data = { + labels: ['Projects'], + datasets: [{ + data: [completedProjects], + label: 'Completed', + backgroundColor: 'rgb(63, 103, 126)', + }, { + data: [19], + label: 'Coming', + backgroundColor: 'rgb(63,203,226)', + }] + }; + + const config = { + type: 'bar', + data: data, + options: { + indexAxis: 'y', + scales: { + x: { + stacked: true + }, + y: { + stacked: true + } + } + } + }; + + new Chart(document.getElementById('chart'), config); +}); \ No newline at end of file diff --git a/code/index.html b/code/index.html index 4dad861f..be4cf34e 100644 --- a/code/index.html +++ b/code/index.html @@ -6,15 +6,16 @@ Project GitHub Tracker +

GitHub Tracker

-
-

Projects:

-
+
+
+ +
+
- - diff --git a/code/script.js b/code/script.js index 6f32b768..edc5ef68 100644 --- a/code/script.js +++ b/code/script.js @@ -18,21 +18,22 @@ const fetcher = (url, token, callback) => { .then((response) => { return response.json(); }) - .then((repositories) => { - callback(repositories); + .then((data) => { + callback(data); }) .catch((error) => { console.log(error); }) } -// WORKING, BUT WILL REDO SETUP fetcher (userUrl, PAT, ((userProfile) => { - console.log(userProfile); // Profile picture and username + console.log(userProfile) document.getElementById('profile').innerHTML += ` profile-pic -

Username: ${userProfile.login}

+

${userProfile.name}

+

${userProfile.login}

+

${userProfile.bio}

`; })) @@ -41,20 +42,21 @@ fetcher(repoUrl, PAT, (repositories) => { return repo.fork === true && repo.name.startsWith("project-") }); + renderChart(forkedReps.length); + forkedReps.forEach((rep) => { // Name, last update, default branch, URL document.getElementById('projects').innerHTML += ` -
-

${rep.name}

-

Updated: ${rep.pushed_at}

+
+

${rep.name}

+

URL: ${rep.name} +

Updated: ${new Date(rep.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}

Default branch: ${rep.default_branch}

- Link to repository
`; // Commits fetcher(commitUrl(rep.name), PAT, ((commits) => { - console.log(commits); - document.getElementById(rep.name).innerHTML += `

${commits.length} commits

` + document.getElementById(rep.name).innerHTML += `

Number of commits: ${commits.length}

` })); // Pull requests diff --git a/code/style.css b/code/style.css index 7c8ad447..35f04d55 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,86 @@ body { background: #FFECE9; + justify-content: center; + margin: 0; + padding: 0; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +h2 { + margin: 0; + padding: 0; +} + +.profile-bio{ + padding: 0rem 3rem; +} + +.profile-wrapper p { + /* max-width: 50vh; */ +} + +.profile-pic { + max-height: 40vh; + border-radius: 50%; + margin: 1rem 0rem; +} + +.profile-name { + font-weight: bolder; +} + +.profile-username { + font-weight: lighter; +} + +.chart-wrapper { + width: 100%; + display: block; + margin: 1rem 0rem; +} + +.chart { + width: 100%; +} + +.project-wrapper { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + justify-content: center; + width: 100%; +} + +.project { + border: 1px solid black; +} + +.project-url { + color: rgb(63, 103, 126); + font-weight: bold; + text-decoration: none; +} + +.project-url:hover { + font-weight: bolder; + text-decoration: underline; +} + + +@media (min-width: 1024px) { + .profile-bio{ + padding: 0rem 20rem; + } + .chart-wrapper { + height: 30px; + } +} +@media (min-width: 667px) { + + .profile-bio{ + padding: 0rem 10rem; + } + .chart-wrapper { + height: 30px; + } } \ No newline at end of file From dd61bf35bc0fabda64f987295de36a01f7af3a03 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Wed, 23 Feb 2022 22:36:26 +0100 Subject: [PATCH 09/20] Fixed chart wrapper height to not overlap --- code/style.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/code/style.css b/code/style.css index 35f04d55..a8ad7272 100644 --- a/code/style.css +++ b/code/style.css @@ -71,16 +71,10 @@ h2 { .profile-bio{ padding: 0rem 20rem; } - .chart-wrapper { - height: 30px; - } } @media (min-width: 667px) { .profile-bio{ padding: 0rem 10rem; } - .chart-wrapper { - height: 30px; - } } \ No newline at end of file From 12f2f6304c8ebbf1b6ff25520e833ac66702ab8d Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 10:44:22 +0100 Subject: [PATCH 10/20] Centering fixed, github icon added and project name formated --- code/script.js | 13 ++++++++---- code/style.css | 56 ++++++++++++++++++++++++++------------------------ 2 files changed, 38 insertions(+), 31 deletions(-) diff --git a/code/script.js b/code/script.js index edc5ef68..699e20a9 100644 --- a/code/script.js +++ b/code/script.js @@ -2,7 +2,7 @@ const PAT = { method: 'GET', headers: { - Authorization: TOKEN //|| process.env.API_KEY // variable name when deploying + Authorization: TOKEN } } @@ -46,11 +46,16 @@ fetcher(repoUrl, PAT, (repositories) => { forkedReps.forEach((rep) => { // Name, last update, default branch, URL + let projectName = rep.name.replace('project-', '').replace('-', ' '); + // projectName = projectName.charAt(0).toUpperCase() + projectName.slice(1); + let update = new Date(rep.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'}) + document.getElementById('projects').innerHTML += `
-

${rep.name}

-

URL: ${rep.name} -

Updated: ${new Date(rep.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}

+

${projectName}

+ + ${rep.name} +

Updated: ${update}

Default branch: ${rep.default_branch}

`; diff --git a/code/style.css b/code/style.css index a8ad7272..0ebfde68 100644 --- a/code/style.css +++ b/code/style.css @@ -1,29 +1,26 @@ -body { - background: #FFECE9; - justify-content: center; +* { margin: 0; padding: 0; - text-align: center; + background: #FFECE9; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } -h2 { - margin: 0; - padding: 0; +body { + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem 0rem; } -.profile-bio{ - padding: 0rem 3rem; -} -.profile-wrapper p { - /* max-width: 50vh; */ +.profile-wrapper { + text-align: center; } .profile-pic { max-height: 40vh; border-radius: 50%; - margin: 1rem 0rem; + padding: 1rem 0rem; } .profile-name { @@ -34,25 +31,30 @@ h2 { font-weight: lighter; } -.chart-wrapper { - width: 100%; - display: block; - margin: 1rem 0rem; +.profile-bio { + max-width: 25rem; + padding: 1rem 0rem; } - -.chart { - width: 100%; +.chart-wrapper { + width: 20rem; } .project-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-content: center; + gap: 1rem; width: 100%; + padding: 1rem 0rem; } .project { border: 1px solid black; + padding: 1rem 1rem; +} + +.project-name { + text-transform: capitalize; } .project-url { @@ -66,15 +68,15 @@ h2 { text-decoration: underline; } +.github { + height: 12px; +} + @media (min-width: 1024px) { - .profile-bio{ - padding: 0rem 20rem; - } + /* do something */ } -@media (min-width: 667px) { - .profile-bio{ - padding: 0rem 10rem; - } +@media (min-width: 667px) { + /* do something */ } \ No newline at end of file From 255e2d9900644446dfa0fb77eda28da3bac14c93 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 10:46:01 +0100 Subject: [PATCH 11/20] chart rendered --- code/chart.js | 24 +++++++++++++++++++----- code/index.html | 2 +- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/code/chart.js b/code/chart.js index e6579e17..adddf868 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,16 +1,21 @@ //"Draw" the chart here 👇 + const renderChart = ((completedProjects) => { +// //DELETE LATER +// const renderChart = (() => { + const data = { - labels: ['Projects'], + labels: [''], datasets: [{ data: [completedProjects], - label: 'Completed', + // data: [6], + label: 'Completed projects', backgroundColor: 'rgb(63, 103, 126)', }, { data: [19], - label: 'Coming', - backgroundColor: 'rgb(63,203,226)', + label: 'All Technigo projects', + backgroundColor: 'rgb(63, 203, 226, 0.2)', }] }; @@ -26,9 +31,18 @@ const renderChart = ((completedProjects) => { y: { stacked: true } + }, + plugins: { + legend: { + display: true, + } } + } }; new Chart(document.getElementById('chart'), config); -}); \ No newline at end of file +}); + +//DELETE LATER +// renderChart(); \ No newline at end of file diff --git a/code/index.html b/code/index.html index be4cf34e..6d27f827 100644 --- a/code/index.html +++ b/code/index.html @@ -12,7 +12,7 @@

GitHub Tracker

- +
From 805cab4e1715b6377814204c0abe07d30fb3c541 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 10:46:42 +0100 Subject: [PATCH 12/20] github icon added for URL --- code/images/github_icon.png | Bin 0 -> 2625 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 code/images/github_icon.png diff --git a/code/images/github_icon.png b/code/images/github_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..182a1a3f734fc1b7d712c68b04c29bad9460d6cd GIT binary patch literal 2625 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 W4I>>0bz>}E>ge79v Date: Thu, 24 Feb 2022 14:34:18 +0100 Subject: [PATCH 13/20] Bio width adjusted --- code/style.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/code/style.css b/code/style.css index 0ebfde68..e304b235 100644 --- a/code/style.css +++ b/code/style.css @@ -1,11 +1,11 @@ * { margin: 0; padding: 0; - background: #FFECE9; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { + background: white; display: flex; flex-direction: column; align-items: center; @@ -32,7 +32,7 @@ body { } .profile-bio { - max-width: 25rem; + max-width: 20rem; padding: 1rem 0rem; } .chart-wrapper { @@ -41,7 +41,7 @@ body { .project-wrapper { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); justify-content: center; gap: 1rem; width: 100%; @@ -51,10 +51,12 @@ body { .project { border: 1px solid black; padding: 1rem 1rem; + line-height: 22px; } .project-name { text-transform: capitalize; + font-size: 18px; } .project-url { From a1b36c6834309acfcf0da469f010f4c4d6b050f5 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 16:57:39 +0100 Subject: [PATCH 14/20] styling changed --- code/chart.js | 26 ++++++++++++++++++-------- code/script.js | 12 +++--------- code/style.css | 8 +++++--- 3 files changed, 26 insertions(+), 20 deletions(-) diff --git a/code/chart.js b/code/chart.js index adddf868..5f8d58ad 100644 --- a/code/chart.js +++ b/code/chart.js @@ -10,11 +10,11 @@ const renderChart = ((completedProjects) => { datasets: [{ data: [completedProjects], // data: [6], - label: 'Completed projects', + label: 'Completed', backgroundColor: 'rgb(63, 103, 126)', }, { - data: [19], - label: 'All Technigo projects', + data: [19-completedProjects], + label: 'Remaining', backgroundColor: 'rgb(63, 203, 226, 0.2)', }] }; @@ -26,16 +26,26 @@ const renderChart = ((completedProjects) => { indexAxis: 'y', scales: { x: { - stacked: true + stacked: true, + grid: { + display: false, + } }, y: { - stacked: true + stacked: true, + grid: { + display: false, + } } }, plugins: { - legend: { - display: true, - } + title: { + display: true, + text: "Technigo Projects", + }, + legend: { + display: true, + } } } diff --git a/code/script.js b/code/script.js index 699e20a9..fbc348d0 100644 --- a/code/script.js +++ b/code/script.js @@ -27,7 +27,6 @@ const fetcher = (url, token, callback) => { } fetcher (userUrl, PAT, ((userProfile) => { - // Profile picture and username console.log(userProfile) document.getElementById('profile').innerHTML += ` profile-pic @@ -45,26 +44,21 @@ fetcher(repoUrl, PAT, (repositories) => { renderChart(forkedReps.length); forkedReps.forEach((rep) => { - // Name, last update, default branch, URL - let projectName = rep.name.replace('project-', '').replace('-', ' '); - // projectName = projectName.charAt(0).toUpperCase() + projectName.slice(1); - let update = new Date(rep.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'}) document.getElementById('projects').innerHTML += `
-

${projectName}

+

${rep.name.replace('project-', '').replace('-', ' ')}

${rep.name} -

Updated: ${update}

+

Updated: ${new Date(rep.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}

Default branch: ${rep.default_branch}

`; - // Commits + fetcher(commitUrl(rep.name), PAT, ((commits) => { document.getElementById(rep.name).innerHTML += `

Number of commits: ${commits.length}

` })); - // Pull requests fetcher(pullUrl(rep.name), PAT, ((pullRequests) => { const myPulls = pullRequests.filter((pull) => { return pull.user.login === USER; diff --git a/code/style.css b/code/style.css index e304b235..0ec5de75 100644 --- a/code/style.css +++ b/code/style.css @@ -41,16 +41,18 @@ body { .project-wrapper { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); justify-content: center; - gap: 1rem; + /* gap: 1rem; */ width: 100%; padding: 1rem 0rem; } .project { - border: 1px solid black; + background-color: rgb(63, 203, 226, 0.2); + /* box-shadow: 5px 5px rgb(63, 103, 126); */ padding: 1rem 1rem; + margin: 1rem; line-height: 22px; } From f736c5cba5a06cbebbbd90c4cbd1ff647d86a5fe Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 20:20:04 +0100 Subject: [PATCH 15/20] attempt to fix token --- code/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index fbc348d0..f7be3cfa 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,9 @@ // Use token locally or from build environment +const API_TOKEN = TOKEN; const PAT = { method: 'GET', headers: { - Authorization: TOKEN + Authorization: `token ${API_TOKEN}` } } From 1716b13316652e6874e684043863b2fa0c1495fe Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 20:50:40 +0100 Subject: [PATCH 16/20] New token created --- code/script.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index f7be3cfa..803d7561 100644 --- a/code/script.js +++ b/code/script.js @@ -1,12 +1,12 @@ // Use token locally or from build environment -const API_TOKEN = TOKEN; -const PAT = { +const options = { method: 'GET', headers: { - Authorization: `token ${API_TOKEN}` + Authorization: TOKEN } } + // API URLs and URL builders const USER = 'ariallahyar'; const userUrl = 'https://api.github.com/users/ariallahyar'; @@ -27,8 +27,7 @@ const fetcher = (url, token, callback) => { }) } -fetcher (userUrl, PAT, ((userProfile) => { - console.log(userProfile) +fetcher (userUrl, options, ((userProfile) => { document.getElementById('profile').innerHTML += ` profile-pic

${userProfile.name}

@@ -37,7 +36,7 @@ fetcher (userUrl, PAT, ((userProfile) => { `; })) -fetcher(repoUrl, PAT, (repositories) => { +fetcher(repoUrl, options, (repositories) => { let forkedReps = repositories.filter((repo) => { return repo.fork === true && repo.name.startsWith("project-") }); @@ -56,11 +55,11 @@ fetcher(repoUrl, PAT, (repositories) => {
`; - fetcher(commitUrl(rep.name), PAT, ((commits) => { + fetcher(commitUrl(rep.name), options, ((commits) => { document.getElementById(rep.name).innerHTML += `

Number of commits: ${commits.length}

` })); - fetcher(pullUrl(rep.name), PAT, ((pullRequests) => { + fetcher(pullUrl(rep.name), options, ((pullRequests) => { const myPulls = pullRequests.filter((pull) => { return pull.user.login === USER; }) From cc6ccea08696bf3903c5ee4405da4073796b7375 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 21:55:04 +0100 Subject: [PATCH 17/20] finished formatting chart --- code/chart.js | 31 +++++++++++-------------------- code/style.css | 13 ++++--------- 2 files changed, 15 insertions(+), 29 deletions(-) diff --git a/code/chart.js b/code/chart.js index 5f8d58ad..e8ef9f37 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,21 +1,15 @@ -//"Draw" the chart here 👇 - const renderChart = ((completedProjects) => { -// //DELETE LATER -// const renderChart = (() => { - const data = { labels: [''], datasets: [{ data: [completedProjects], - // data: [6], - label: 'Completed', + label: 'completed', backgroundColor: 'rgb(63, 103, 126)', }, { data: [19-completedProjects], - label: 'Remaining', - backgroundColor: 'rgb(63, 203, 226, 0.2)', + label: 'remaining', + backgroundColor: 'rgb(63, 203, 226, 0.1)', }] }; @@ -28,31 +22,28 @@ const renderChart = ((completedProjects) => { x: { stacked: true, grid: { - display: false, - } + display: true, + }, }, y: { stacked: true, grid: { - display: false, + display: true, } } }, plugins: { title: { display: true, - text: "Technigo Projects", + text: `Technigo projects completed: ${completedProjects} of 19`, + position: 'top', }, legend: { - display: true, + display: false, + position: 'top', } } - } }; - new Chart(document.getElementById('chart'), config); -}); - -//DELETE LATER -// renderChart(); \ No newline at end of file +}); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 0ec5de75..b26373cd 100644 --- a/code/style.css +++ b/code/style.css @@ -12,7 +12,6 @@ body { padding: 1rem 0rem; } - .profile-wrapper { text-align: center; } @@ -43,14 +42,12 @@ body { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); justify-content: center; - /* gap: 1rem; */ width: 100%; padding: 1rem 0rem; } .project { - background-color: rgb(63, 203, 226, 0.2); - /* box-shadow: 5px 5px rgb(63, 103, 126); */ + background-color: rgb(63, 203, 226, 0.15); padding: 1rem 1rem; margin: 1rem; line-height: 22px; @@ -77,10 +74,8 @@ body { } -@media (min-width: 1024px) { - /* do something */ -} - @media (min-width: 667px) { - /* do something */ + .profile-bio { + max-width: 40rem; + } } \ No newline at end of file From fb10d8510094da97a4c26a3e085f60d120c83c43 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 21:55:15 +0100 Subject: [PATCH 18/20] Cleaned up comments --- code/script.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/code/script.js b/code/script.js index 803d7561..225ee762 100644 --- a/code/script.js +++ b/code/script.js @@ -1,4 +1,3 @@ -// Use token locally or from build environment const options = { method: 'GET', headers: { @@ -6,13 +5,11 @@ const options = { } } - -// API URLs and URL builders const USER = 'ariallahyar'; const userUrl = 'https://api.github.com/users/ariallahyar'; const repoUrl = 'https://api.github.com/users/ariallahyar/repos'; -const pullUrl = (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`}; //look into pagination -const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits?per_page=100`}; //look into pagination +const pullUrl = (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`}; +const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits?per_page=100`}; const fetcher = (url, token, callback) => { fetch(url, token) @@ -25,7 +22,7 @@ const fetcher = (url, token, callback) => { .catch((error) => { console.log(error); }) -} +}; fetcher (userUrl, options, ((userProfile) => { document.getElementById('profile').innerHTML += ` @@ -34,7 +31,7 @@ fetcher (userUrl, options, ((userProfile) => {

${userProfile.login}

${userProfile.bio}

`; -})) +})); fetcher(repoUrl, options, (repositories) => { let forkedReps = repositories.filter((repo) => { @@ -65,5 +62,5 @@ fetcher(repoUrl, options, (repositories) => { }) document.getElementById(rep.name).innerHTML += `

Pull requests: ${myPulls.length}

` })); - }) -}) \ No newline at end of file + }); +}); \ No newline at end of file From 9f2495b436c3b915a08863b8e2287b7d7aa816e9 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Thu, 24 Feb 2022 23:10:40 +0100 Subject: [PATCH 19/20] URL object added --- code/script.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/code/script.js b/code/script.js index 225ee762..5615e974 100644 --- a/code/script.js +++ b/code/script.js @@ -1,4 +1,4 @@ -const options = { +const OPTIONS = { method: 'GET', headers: { Authorization: TOKEN @@ -6,10 +6,13 @@ const options = { } const USER = 'ariallahyar'; -const userUrl = 'https://api.github.com/users/ariallahyar'; -const repoUrl = 'https://api.github.com/users/ariallahyar/repos'; -const pullUrl = (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`}; -const commitUrl = (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits?per_page=100`}; + +const url = { + user: 'https://api.github.com/users/ariallahyar', + repo: 'https://api.github.com/users/ariallahyar/repos', + pulls: (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`}, + commits: (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits?per_page=100`} +} const fetcher = (url, token, callback) => { fetch(url, token) @@ -24,7 +27,7 @@ const fetcher = (url, token, callback) => { }) }; -fetcher (userUrl, options, ((userProfile) => { +fetcher (url.user, OPTIONS, ((userProfile) => { document.getElementById('profile').innerHTML += ` profile-pic

${userProfile.name}

@@ -33,7 +36,7 @@ fetcher (userUrl, options, ((userProfile) => { `; })); -fetcher(repoUrl, options, (repositories) => { +fetcher(url.repo, OPTIONS, ((repositories) => { let forkedReps = repositories.filter((repo) => { return repo.fork === true && repo.name.startsWith("project-") }); @@ -52,15 +55,15 @@ fetcher(repoUrl, options, (repositories) => { `; - fetcher(commitUrl(rep.name), options, ((commits) => { + fetcher(url.commits(rep.name), OPTIONS, ((commits) => { document.getElementById(rep.name).innerHTML += `

Number of commits: ${commits.length}

` })); - fetcher(pullUrl(rep.name), options, ((pullRequests) => { + fetcher(url.pulls(rep.name), OPTIONS, ((pullRequests) => { const myPulls = pullRequests.filter((pull) => { return pull.user.login === USER; }) document.getElementById(rep.name).innerHTML += `

Pull requests: ${myPulls.length}

` })); }); -}); \ No newline at end of file +})); \ No newline at end of file From 787c75998ff4d28bf57d2e100d08bbe4d6dd8010 Mon Sep 17 00:00:00 2001 From: Arianna Allahyar Date: Sat, 26 Feb 2022 11:59:32 +0100 Subject: [PATCH 20/20] README updated --- README.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..b0f691d3 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## The problem - -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +The assignment was to work with GitHub's REST API to build a GitHub tracker that consists of: +- Username and profile picture +- Information for each repository forked from Technigo +- A chart of completed projects +- Working with authentification ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +Link to my project live: https://githubtracker-ari.netlify.app/ \ No newline at end of file