diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..af56aa87 --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +//.gitignore file +code/secret.js + +# 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* + diff --git a/README.md b/README.md index 1613a3b0..f805e233 100644 --- a/README.md +++ b/README.md @@ -9,5 +9,4 @@ Start by briefly describing the assignment in a sentence or two. Keep it short a 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? ## 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://hopeful-pasteur-51eb45.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..1496cf3e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,19 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +const technigoProjects = 22 //"Draw" the chart here 👇 + +const drawBarChart = (repos) => { + new Chart(ctx, { + type: 'doughnut', + data: { labels: ['Projects to do', 'Finished projects'], + datasets: [ { data: [ technigoProjects - repos.length, repos.length,], + backgroundColor: ['#747474','#ffbb00']}] + }, + display: true, + labels: { + color: 'rgb(0, 0, 0)' + } + }) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..f1344930 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,39 @@ Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+ + +
+
+ All repos +
+ +
+ +
+ +
+ +
+ +
+ + - + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..b71da810 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,90 @@ + +//DOM +const profileWrapper = document.getElementById('profile-wrapper'); +const repoWrapper = document.getElementById('repo-wrapper'); + +//API +const USER = 'JaEngd' +const PROFILE_URL = `https://api.github.com/users/${USER}` +const REPO_URL = `https://api.github.com/users/${USER}/repos` + +const API_TOKEN = TOKEN + +const options = { //Object + method: 'GET', //POST, PATCH, DELETE + headers: { + Authorization: `token ${API_TOKEN}` + } +} + + +const showProfile = () => { + fetch(PROFILE_URL, options) + .then(res => res.json()) //Converting the response to a JSON object + .then(data => { + console.log(data) + profileWrapper.innerHTML += ` +
+
+ + Avatar of ${data.login} + +
+

${data.login}

+

Public repositories: ${data.public_repos}

+
+ ` + }) +} +showProfile() + + +const showRepos = () => { + fetch(REPO_URL, options) + .then((response) => response.json()) + .then((data) => { + const myRepos = data.filter((repo) => repo.name.includes("project") && repo.fork) + + myRepos.forEach(repo => { + repoWrapper.innerHTML += ` +
+

${repo.name}
${repo.default_branch}

+

Recent push: ${new Date(repo.pushed_at).toDateString()}

+

Commits:

+

Main language: ${repo.language}

+
+ ` + }) + showPullRequestsArray(myRepos) + drawBarChart(myRepos) + }) +} + + +const showPullRequestsArray = (allRepos) => { + allRepos.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then((response) => response.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ) + if (myPullRequest) { + showCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commit_${repo.name}`) + .innerHTML = 'Commits: No Pull request available.'; + } + }) + }) +} + + +const showCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit_${myRepoName}`).innerHTML += data.length + }) + } +showRepos() diff --git a/code/server.rb b/code/server.rb new file mode 100644 index 00000000..5595ef3f --- /dev/null +++ b/code/server.rb @@ -0,0 +1,11 @@ +require 'sinatra' +require 'rest-client' +require 'json' + +CLIENT_ID = ENV['GH_BASIC_CLIENT_ID'] +CLIENT_SECRET = ENV['GH_BASIC_SECRET_ID'] + +get '/' do + erb :index, :locals => {:client_id => CLIENT_ID} +end + diff --git a/code/style.css b/code/style.css index 7c8ad447..328cb35c 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,192 @@ +*{ + margin: 0 auto; + padding: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; + font-family: 'Open Sans', sans-serif; + font-family: 'Roboto', sans-serif; + scroll-behavior: smooth; + scroll-padding-top: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #252525; + font-family: 'Nunito', sans-serif; + margin: 0 auto; + display: flex; +} + +html { + scroll-behavior: smooth; + overflow-x: hidden; +} + +html, body { + overflow-x: hidden; +} + +h1 { + font-size: 1.4rem; + color: #f2f2f2; +} + +h2 { + font-size: 1.2rem; + text-align: center; + color: #f2f2f2; +} + +h3 { + text-align: center; + border-radius: 0.4rem; + margin-top: 10; + padding: 1rem 1rem; + color: #f2f2f2; +} + +p{ + font-size: 1rem; + margin-top: 15px; + color: #f2f2f2; +} + +#profile-wrapper { + display: flex; + text-align: center; + position: absolute; + left: 50%; + top: 30%; + width: 100%; + max-width: 300px; + transform: translate(-50%, -50%); + margin: 2px; + padding: 20px; + width: 63%; + box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75); +} + +#profile { + display: inline-block; + justify-content: center; + margin-top: 10px; +} + + +/*/ --- BUTTON --- /*/ +.button{ + background: #5154ff; + color: #fff; + padding: 10px 20px; + box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75); + border-radius: 3px; + cursor: pointer; + text-align: center; + align-items: center; + position: absolute; + left: 50%; + top: 50%; + width: 100%; + max-width: 200px; + transform: translate(-50%, -50%); + transition: 0.4s; + margin-top: 100%; +} + +.button:hover{ + background: #34495e; + color: #fff; +} +/*/ --- BUTTON --- /*/ + +.profile-image { + display: inline-block; + width: 200px; + height: 200px; + border-radius: 50%; + border: 2px solid whitesmoke; + overflow: hidden; + margin-bottom: 40px; +} + +.profile-image > a > img { + width: 100%; +} + +#repo-wrapper { + display: flex; + flex-flow: row wrap; + justify-content: center; + left: 50%; + top: 190%; + width: 100%; + transform: translate(-50%, -50%); + position: absolute; + gap: 1rem; + margin-bottom: 100rem; +} + +.projects-card { + width: 320px; + height: 230px; + background-color: #1d1d1d; + box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem; + border-radius: 0.4rem; + text-align: center; + margin: 0; + padding: 1rem; +} + +#chart-wrapper { + width: 90px; + max-width: 512px; + margin: 0 auto; + position: absolute; + left: 50%; + top: 330%; + width: 100%; + margin: 100 100px; + transform: translate(-50%, -50%); +} + +header { + top: 0; +} + +footer { + margin-top: 1rem; +} + +footer, a { + color: #ffbb00; +} + + +@media (min-width:1281px) { + #repo-wrapper { + top: 110%; + } + #chart-wrapper { + top: 170%; + } + } + + @media (min-width:1025px) { + #repo-wrapper { + top: 110%; + } + #chart-wrapper { + top: 170%; + } + } + + @media (min-width:801px) { + #repo-wrapper { + top: 120%; + } + #chart-wrapper { + top: 190%; + } + } + + 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" + } +}