GitHub Tracker Ebba Delsol #47
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| # GitHub Tracker | ||
|
|
||
| The assignment was to create a GitHub tracker with all my Technigo-repos. | ||
|
|
||
| ## The problem | ||
|
|
||
| I started by fetching all the data that I wanted from the GitHub API. I began with fetching all the repos and filtering out only the forked ones from Technigo and continued with fetching the pull requests, commits and reviews. In order to inject data from one function to another I used dynamic IDs and DOM-selector. | ||
|
|
||
| If I had more time I would like to add a dropdown menu were the user can choose to sort or display the repos after language. I would also like to style the GitHub tracker a bit more. | ||
|
|
||
| ## View it live | ||
|
|
||
| https://github-tracker-ebbadelsol.netlify.app/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,22 @@ | ||
| //DOM-selector for the canvas 👇 | ||
| const ctx = document.getElementById("chart").getContext("2d"); | ||
|
|
||
| // Chart | ||
| const drawChart = (numberOfProjects) => { | ||
| const config = { | ||
| type: "doughnut", | ||
| data: { | ||
| labels: ["Finished projects", "Projects left"], | ||
| datasets: [ | ||
| { | ||
| label: "Technigo Projects", | ||
| data: [numberOfProjects, 19 - numberOfProjects], | ||
| backgroundColor: ["rgb(255, 99, 132)", "rgb(255, 205, 86)"], | ||
| hoverOffset: 5, | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| const reposChart = new Chart(ctx, config); | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Project GitHub Tracker</title> | ||
|
|
||
| <!-- Roboto fontfamily --> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" /> | ||
|
|
||
| <!-- Open Sans fontfamily --> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" /> | ||
|
|
||
| <!-- Stylesheet --> | ||
| <link rel="stylesheet" href="./style.css" /> | ||
|
|
||
| <!-- Chart --> | ||
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="hero-image"></header> | ||
| <main> | ||
| <section class="user-container" id="user-container"></section> | ||
| <section class="projects-container" id="projects-container"></section> | ||
| <section class="chart-section"> | ||
| <h3 class="chart-heading">Overview of Projects</h3> | ||
| <div class="chart-container"> | ||
| <canvas class="chart" id="chart"></canvas> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <script src="./script.js"></script> | ||
| <script src="./chart.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| const USER = "ebbadelsol"; | ||
| const REPOS_URL = `https://api.github.com/users/${USER}/repos`; | ||
| const projectsContainer = document.getElementById("projects-container"); | ||
| const userContainer = document.getElementById("user-container"); | ||
|
|
||
| const getUser = () => { | ||
| fetch(`https://api.github.com/users/${USER}`) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| userContainer.innerHTML += /*html*/ ` | ||
| <img class="user-image" src="${data.avatar_url}"/> | ||
| <h2 class="user-name">${data.login}</h2> | ||
| `; | ||
| }); | ||
| }; | ||
|
|
||
| getUser(); | ||
|
|
||
| const getRepos = () => { | ||
| fetch(REPOS_URL) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| const technigoProjects = data.filter((repo) => repo.fork && repo.name.startsWith("project-")); | ||
|
|
||
| technigoProjects.sort((oldestRepo, newestRepo) => new Date(newestRepo.pushed_at) - new Date(oldestRepo.pushed_at)); | ||
|
Comment on lines
+23
to
+25
There was a problem hiding this comment. Nice working with the filter! And GG on sorting your projects from newest to oldest! |
||
|
|
||
| technigoProjects.forEach((repo) => { | ||
| projectsContainer.innerHTML += /*html*/ ` | ||
| <a class="project-link" href="${repo.html_url}" target="_blank"> | ||
| <div class="project" id="${repo.name}-container"> | ||
| <h3 class="project-name">${repo.name}</h3> | ||
| <p class="project-info">Default branch ${repo.default_branch}</p> | ||
| <p class="project-info">Recent push: ${new Date(repo.pushed_at).toDateString()}</p> | ||
| <p class="project-info" id="commits-${repo.name}">Amount of commits: </p> | ||
| </div> | ||
| </a> | ||
| <hr> | ||
| `; | ||
| }); | ||
|
|
||
| getPullRequests(technigoProjects); | ||
| drawChart(technigoProjects.length); | ||
| }); | ||
| }; | ||
|
|
||
| getRepos(); | ||
|
|
||
| const getPullRequests = (repos) => { | ||
| repos.forEach((repo) => { | ||
| fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| const filteredPull = data.find((pull) => pull.user.login === repo.owner.login); | ||
|
|
||
| if (filteredPull) { | ||
| getCommits(filteredPull.commits_url, repo.name); | ||
| getReview(filteredPull.review_comments_url, repo.name); | ||
| } else { | ||
| document.getElementById(`commits-${repo.name}`).innerHTML = "No pull request"; | ||
|
Comment on lines
+55
to
+59
There was a problem hiding this comment. I really like that you added an if else for whether you have any commits or not. And the fact that you've added info about who has reviewed your work is really neat! |
||
| } | ||
| }); | ||
| }); | ||
| }; | ||
|
|
||
| const getCommits = (url, repoName) => { | ||
| fetch(url) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| document.getElementById(`commits-${repoName}`).innerHTML += data.length; | ||
| }); | ||
| }; | ||
|
|
||
| const getReview = (url, repoName) => { | ||
| fetch(url) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| if (data.length === 0) { | ||
| document.getElementById(`${repoName}-container`).innerHTML += ""; | ||
| } else { | ||
| document.getElementById(`${repoName}-container`).innerHTML += /*html*/ ` | ||
| <p class="project-info">Reviewed by ${data[0].user.login}</p> | ||
|
Comment on lines
+73
to
+81
There was a problem hiding this comment. This is soooo neat! Very inspirational! |
||
| `; | ||
| } | ||
| }); | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,113 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "Roboto", sans-serif; | ||
| color: #222222; | ||
| } | ||
|
|
||
| .hero-image { | ||
| width: 100vw; | ||
| /* height: 280px; */ | ||
| height: 40vh; | ||
| background-image: url("https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2376&q=80"); | ||
| background-position: center; | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| filter: grayscale(100%); | ||
| } | ||
|
|
||
| .user-container { | ||
| position: relative; | ||
| text-align: center; | ||
| bottom: 72px; | ||
| } | ||
|
|
||
| .user-image { | ||
| border-radius: 50%; | ||
| width: 126px; | ||
| border: solid 6px #ffffff; | ||
| } | ||
|
|
||
| .user-name { | ||
| font-size: 26px; | ||
| font-weight: 700; | ||
| margin-top: 3px; | ||
| } | ||
|
|
||
| .project { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| padding: 40px 0; | ||
| } | ||
|
|
||
| .projects-container { | ||
| line-height: 1.8; | ||
| margin-top: -40px; | ||
| } | ||
|
|
||
| .project-info { | ||
| font-family: "Open Sans", sans-serif; | ||
| font-size: 15px; | ||
| font-weight: 400; | ||
| color: #666666; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .project-name, | ||
| .chart-heading { | ||
| font-family: "Open Sans", sans-serif; | ||
| color: #222222; | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .project-link { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .project-link :hover { | ||
| background: linear-gradient(90deg, white, #e6e6e6 50%, #e6e6e6 50%, #e6e6e6 50%, white); | ||
| } | ||
|
|
||
| hr { | ||
| margin: auto; | ||
| width: 75vw; | ||
| background: linear-gradient(90deg, white, #e6e6e6, #e6e6e6, #e6e6e6, white); | ||
| height: 1px; | ||
| border: none; | ||
| } | ||
|
Comment on lines
+40
to
+83
There was a problem hiding this comment. Love the minimal styling you've done for the projects! And the fact that you get redirected to your repo when you click on them! |
||
|
|
||
| .chart-section { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin: 40px 0 80px; | ||
| } | ||
|
|
||
| .chart-container { | ||
| width: 70vw; | ||
| } | ||
|
|
||
| .chart { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| .chart-container { | ||
| width: 40vw; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1025px) { | ||
| .hero-image { | ||
| height: 70vh; | ||
| } | ||
| .chart-container { | ||
| width: 30vw; | ||
| } | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job on personalizing your chart!