diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..5b33f64c --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +​ +​ +# Ignore Mac system files +.DS_store +​ +# Ignore node_modules folder +node_modules +​ +# Ignore all text files +*.txt +​ +# Ignore files related to API keys +.env +​ +# misc +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* +​ +# other +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..eb0f8fd4 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,23 @@ # GitHub Tracker -Replace this readme with your own information about your project. +Goal wa to create a place to keep track of the GitHub repos done during Technigo Boot Camp. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +Your page should include: + +- A list of all repos that are forked from Technigo +- Your username and profile picture +- Most recent update (push) for each repo +- Name of your default branch for each repo +- URL to the actual GitHub repo +- Number of commits for each repo +- It should be responsive (mobile first) +- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using [Chart.js](https://www.chartjs.org/). ## 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? +I started the project by fetching all my repos and and filtered only the ones that are forked from Technigo. After that I fetched each repo and filtered them with my own username. Fetching again with right URL:s I got also more information about used languages, review comments and my own commits. I also used github token to get unlimited amount of fetches. This was also my first time using chart.js to create simple doughnut chart. + ## 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. +https://github-tracker-kolkri.netlify.app/ diff --git a/code/assets/comment.svg b/code/assets/comment.svg new file mode 100644 index 00000000..07e00b43 --- /dev/null +++ b/code/assets/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/assets/githubLogo.svg b/code/assets/githubLogo.svg new file mode 100644 index 00000000..ee43aea9 --- /dev/null +++ b/code/assets/githubLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..f2eda107 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,50 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') + + + //"Draw" the chart here 👇 +const drawChart = (amount) => { + //DOM-selector for the canvas 👇 +const ctx = document.getElementById("chart").getContext("2d"); + //font for chart + Chart.defaults.font.family = 'Syne Mono, monospace'; + Chart.defaults.font.weight = 'bold'; + Chart.defaults.color = '#fff'; + const config = { + type: "doughnut", + data: { + labels: ["Projects done", "All projects"], + datasets: [ + { + label: "My Technigo projects", + data: [amount, 19 - amount], + backgroundColor: ["rgba(241, 187, 75,0.6)", "rgba(90, 112, 55, 0.1)"], + trans: 0.6, + hoverOffset: 4, + }, + ], + }, + options: { + plugins: { + legend: { + position: 'bottom', + labels: { + font: { + size: 16, + }, + } + }, + } + } + + +} + + + const projectsChart = new Chart(ctx, config); +}; + + + + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..26bb321e 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,37 @@ Project GitHub Tracker + -

GitHub Tracker

-

Projects:

-
- - - +
+
+

GitHub Tracker

+

Technigo Boot Camp spring '22

+
+
+ +

BOOT CAMP PROGRESS:

+
+ +
+
+
+ +
+ +
+ + + + - \ No newline at end of file + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..c98ff5b7 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,163 @@ + + + +//global variables +const username = 'kolkri' + +//Endpoint to get all your repos: +const API_URL = `https://api.github.com/users/${username}/repos` + + + +//defining options +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } +} + +//fetch all of your repos and log them to the console +fetch(API_URL, options) + .then(res => res.json()) + .then(data => { + + //using the fetched data for userdata function + userData(data) + //filter out and only show the forked ones + let forkedOnes = data.filter(element => element.fork === true) + //filter out only the forks from Technigo. + let technigoForks = forkedOnes.filter(element => element.name.startsWith('project')) + + //here invoking the getPullRequests function technigoForks as an argument + getPullRequests(technigoForks) + }) + + +//Remember to pass along your filtered repos as an argument when you are calling getPullRequests function + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + //invoking the function drawChart using the amount of projects as an argument + drawChart(repos.length) + + repos.forEach(repo => { + fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100', options) + .then(res => res.json()) + .then(data => { + + + //1. Find only the PR that you made by comparing pull.user.login to your own username + let myPullRequests = data.filter(element => element.user.login === username) + + //2. Now you're able to get the commits for each repo by using the commits_url as an argument to call another function + let commitsURL = myPullRequests[0].commits_url + myCommits(commitsURL, repo.name) + + //3. You can also get the comments for each PR by calling another function with the review_comments_url as argument + let reviewCommentsURL = myPullRequests[0].review_comments_url + reviewComments(reviewCommentsURL, repo.name) + + //fecthing languages + let languagesURL = repo.languages_url + languages(languagesURL, repo.name) + + //showing results on the page with innerHTML + document.getElementById('projects').innerHTML += ` +
+
GitHub Logo

${repo.name}

+

Latest update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', {year: 'numeric', month: 'long', day: 'numeric'})}

+

Default branch: ${repo.default_branch}

+

Languages:

+

View project in GitHub

+ +
+
+ ` + //here i made the accordion for commits messages and reviews: + let acc = document.getElementsByClassName("accordionButton"); + + for (let i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function() { + this.classList.toggle("active"); + var comments = this.nextElementSibling; + if (comments.style.display === "block") { + comments.style.display = "none"; + } else { + comments.style.display = "block"; + } + }); + } + }) + }) + + } + + + + //Userdata function (profile pic etc) + const userData = (data) => { + //showing the profile pic + document.getElementById('profile-pic').innerHTML = ` + image of kolkri at GitHub + ` + //showing the username + document.getElementById('username').innerHTML = ` +

${data[0].owner.login}

 + ` + } + + + //to get the comments from a PR + const reviewComments = (url, repoName) => { + fetch(url, options) + .then(res => res.json()) + .then(data => { + if(data.length > 0){ + document.getElementById(repoName).innerHTML += ` +

Review comments:

+ ` + data.forEach(element => { + document.getElementById(repoName).innerHTML += ` +
  • ${element.body}
    • + ` + }) + } + }) + + } + + + // to get the commits for each repo + const myCommits = (url, repoName) => { + fetch(url, options) + .then(res => res.json()) + .then(data => { + document.getElementById(repoName).innerHTML += ` +

    My commits:

    +

    Number of commits: ${data.length}

    + ` + data.forEach(element => { + document.getElementById(repoName).innerHTML += ` +
  • ${element.commit.message}
    • + ` + }) + + }) + +} + +//language function to show what languages used in each project +const languages = (url, repoName) => { + fetch(url, options) + .then(res => res.json()) + .then(data => { + Object.keys(data).forEach(key => { + document.getElementById(`lang-${repoName}`).innerHTML += ` + ${key} + ` + }); + }) +} + + diff --git a/code/style.css b/code/style.css index 7c8ad447..186fe570 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,185 @@ -body { - background: #FFECE9; -} \ No newline at end of file +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin:0; +} + +:root { + --primary: #353535; + --secondary: #3c6e71; + --accent: rgb(186, 223, 215); +} + +body{ + font-family: 'Syne Mono', monospace; + background-image: url('https://images.unsplash.com/photo-1519817914152-22d216bb9170?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1665&q=80'); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + height: 100vh; +} + +h1{ + font-size: 3rem; + padding: 1rem; + font-weight: bold; + color:#fff; +} + +h2{ + font-size:1.5rem; + font-weight: 500; +} + +.whiteColor{ + color: #fff; +} + +.boldText{ + font-weight: bold; + text-decoration: underline; +} + +h3{ + font-size: 1.3rem; + font-weight: bold; +} + + + +.bigLogo{ + width: 2.5rem; + background-color:#fff; + border-radius: 50%; +} + +.smallLogo{ + width: 1.5rem; + background-color:#fff; + border-radius: 50%; +} + + a{ + text-decoration: none; + font-weight: bold; + color: black; + } + + a:hover{ + cursor: pointer; + color: rgb(241, 187, 75); + } + +/*Style for the profile info section*/ +.profile-info{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap:1rem; + margin-bottom: 2rem; +} + +.flexCont{ + display: flex; + align-items: center; + flex-wrap: wrap; + margin-bottom:1rem; + } + +.titles{ + display: flex; + flex-direction: column; + align-items: center; +} + +.profile-pic{ + width:250px; + border-radius: 50%; + filter: grayscale(100%); + margin-top: 1rem; + +} + + +/*Style for the project section*/ +.projects{ + display: flex; + flex-direction: column; + width: 100%; + align-items: center; +} + +.project-card{ + width:80%; + max-width: 500px; + height: auto; + background-color: #fff; + opacity: 0.7; + display:flex; + flex-direction: column; + margin: 1rem; + padding: 1rem; + gap: 0.5rem; +} + +main{ + margin: 3rem 0; +} + +/*Styling the chart*/ +.chart{ + width: 250px; + padding:none; + margin-top: 0.5rem; +} + +/*Hiding the commits and comments as default*/ +.comments{ + display: none; +} + +/*footer styling*/ +footer{ + height: 200px; + background-color: #292b2d; + color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + button{ + width: fit-content; + display: flex; + align-items: center; + margin-top: 1rem; + font-family: 'Syne Mono', monospace; + gap:0.5rem; + } + + button:hover{ + cursor: pointer; + } + + .languagebox{ + background-color: black; + color: #fff; + padding:0 0.1rem; + border-radius: 1rem; + } + + @media (max-width:667px) { + .bigLogo{ + display: none; + } + h1{ + font-size: 2rem; + } + h2, h3{ + font-size: 1.1rem; + } + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..8627f416 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,24 @@ +{ + "name": "project-github-tracker", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "chart.js": "^3.7.1" + } + }, + "node_modules/chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + } + }, + "dependencies": { + "chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..832728d9 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "chart.js": "^3.7.1" + } +}