Skip to content

Add GitHub repo and homepage links to project cards (fixes #37) #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add GitHub repo and homepage links to project cards (fixes #37) #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8eef35f
Initial plan
Copilot Sep 12, 2025
69b72c2
Add GitHub repo and homepage links to project cards
Copilot Sep 12, 2025
723105e
Convert all remaining functions to ES6+ syntax and template literals
Copilot Sep 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 22 additions & 10 deletions assets/app.babel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,29 @@
function showRepo(repo) {
const url = getRepoUrl(repo);
const language = repo.language !== null ? `·${repo.language}` : '';

// Create links for GitHub repo and homepage
const githubLink = `<a href="${repo.html_url}" class="repo__link repo__link--github" title="View source code">GitHub</a>`;
const homepageLink = repo.homepage ?
`<a href="${repo.homepage}" class="repo__link repo__link--homepage" title="Visit project homepage">Homepage</a>` : '';
const linksHtml = `<div class="repo__links">${githubLink}${homepageLink}</div>`;

const $item = $(
`<div class="unit-1-3 repo=">
Copy link

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The HTML attribute repo= is missing a value. This should either be repo="" or have a proper value assigned.

Suggested change
`<div class="unit-1-3 repo=">
`<div class="unit-1-3 repo">

Copilot uses AI. Check for mistakes.

<div class="box">
<h2 class="repo__name">${repo.name}</h2>
<p class="repo__info">${repo.watchers} stargazers ${language}</p>
<p class="repo__desc">${getRepoDesc(repo)}</p>
${linksHtml}
</div>
</div>`
);
$item.on("click",()=> window.location = url)
$item.on("click", (e) => {
// Don't navigate if clicking on a link
if (!$(e.target).hasClass('repo__link')) {
window.location = url;
}
});
$item.appendTo('#repos');
}

Expand All @@ -60,7 +72,7 @@
repo.hotness += weightForWatchers * repo.watchers / createdDelta;

}
repos.sort(function (a, b) {
repos.sort((a, b) => {
if (a.hotness < b.hotness) return 1;
if (b.hotness < a.hotness) return -1;
return 0;
Expand All @@ -75,7 +87,7 @@
}
$("#num-stargazers").text(stars.toLocaleString());
// Sort by most-recently pushed to.
repos.sort(function (a, b) {
repos.sort((a, b) => {
if (a.pushed_at < b.pushed_at) {
return 1;
}
Expand All @@ -88,14 +100,14 @@

});

$.each(repos.slice(0, 3), function (i, repo) {
$.each(repos.slice(0, 3), (i, repo) => {
showRepoOverview(repo);
});
});

$.getJSON(`https://api.github.com/orgs/${orgName}/members?per_page=100&callback=?`, function (result) {
$.getJSON(`https://api.github.com/orgs/${orgName}/members?per_page=100&callback=?`, (result) => {
let members = result.data;
$(function () {
$(() => {
$('#num-members').text(members.length);
});
});
Expand Down Expand Up @@ -127,16 +139,16 @@

// Wraps prettyDate in an HTML5 <time> element
function html5prettyDate(rawdate) {
return '<time datetime="' + rawdate.toISOString() + '">' + prettyDate(rawdate) + '</time>';
return `<time datetime="${rawdate.toISOString()}">${prettyDate(rawdate)}</time>`;
}

})(jQuery);

// External 3rd party scripts
(function(doc, script) {
((doc, script) => {
let js,
fjs = doc.getElementsByTagName(script)[0],
add = function(url, id) {
add = (url, id) => {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
Expand All @@ -146,4 +158,4 @@

// Twitter SDK
add('https://platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));
})(document, 'script');
128 changes: 56 additions & 72 deletions assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,53 @@
"use strict";

function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
(function ($, undefined) {
var orgName = 'h5bp';
var stars = 0; // Return the repo url
var stars = 0;

// Return the repo url
function getRepoUrl(repo) {
return repo.homepage || repo.html_url;
} // Return the repo description

}

// Return the repo description
function getRepoDesc(repo) {
return repo.description;
} // Display a repo's overview (for recent updates section)

}

// Display a repo's overview (for recent updates section)
function showRepoOverview(repo) {
var item = "\n <li>\n <span class=\"name\"><a href=\"".concat(repo.html_url, "\">").concat(repo.name, "</a></span>\n &middot;\n <span class=\"time\"><a href=\"").concat(repo.html_url, "/commits\">").concat(html5prettyDate(repo.pushed_at), "</a></span>\n </li>");
$(item).appendTo("#updated-repos");
} // Create an entry for the repo in the grid of org repos

}

// Create an entry for the repo in the grid of org repos
function showRepo(repo) {
var url = getRepoUrl(repo);
var language = repo.language !== null ? "&middot;".concat(repo.language) : '';
var $item = $("<div class=\"unit-1-3 repo=\">\n <div class=\"box\">\n <h2 class=\"repo__name\">".concat(repo.name, "</h2>\n <p class=\"repo__info\">").concat(repo.watchers, " stargazers ").concat(language, "</p>\n <p class=\"repo__desc\">").concat(getRepoDesc(repo), "</p>\n </div>\n </div>"));
$item.on("click", function () {
return window.location = url;

// Create links for GitHub repo and homepage
var githubLink = "<a href=\"".concat(repo.html_url, "\" class=\"repo__link repo__link--github\" title=\"View source code\">GitHub</a>");
var homepageLink = repo.homepage ? "<a href=\"".concat(repo.homepage, "\" class=\"repo__link repo__link--homepage\" title=\"Visit project homepage\">Homepage</a>") : '';
var linksHtml = "<div class=\"repo__links\">".concat(githubLink).concat(homepageLink, "</div>");
var $item = $("<div class=\"unit-1-3 repo=\">\n <div class=\"box\">\n <h2 class=\"repo__name\">".concat(repo.name, "</h2>\n <p class=\"repo__info\">").concat(repo.watchers, " stargazers ").concat(language, "</p>\n <p class=\"repo__desc\">").concat(getRepoDesc(repo), "</p>\n ").concat(linksHtml, "\n </div>\n </div>"));
$item.on("click", function (e) {
// Don't navigate if clicking on a link
if (!$(e.target).hasClass('repo__link')) {
window.location = url;
}
});
$item.appendTo('#repos');
}

$.getJSON("https://api.github.com/orgs/".concat(orgName, "/repos?callback=?"), function (result) {
var repos = result.data;
$('#num-repos').text(repos.length);
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

var _iterator = _createForOfIteratorHelper(repos),
_step;
try {
for (var _iterator = repos[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var repo = _step.value;
repo.pushed_at = new Date(repo.pushed_at);
var weekHalfLife = 1.146 * Math.pow(10, -9);
Expand All @@ -50,55 +59,32 @@
repo.hotness += weightForWatchers * repo.watchers / createdDelta;
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
_iterator.e(err);
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
_iterator.f();
}

repos.sort(function (a, b) {
if (a.hotness < b.hotness) return 1;
if (b.hotness < a.hotness) return -1;
return 0;
});
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;

var _iterator2 = _createForOfIteratorHelper(repos),
_step2;
try {
for (var _iterator2 = repos[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _repo = _step2.value;
stars += _repo.stargazers_count;

if (_repo.archived === false) {
showRepo(_repo);
}
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
_iterator2.e(err);
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
_iterator2.f();
}

$("#num-stargazers").text(stars.toLocaleString()); // Sort by most-recently pushed to.

$("#num-stargazers").text(stars.toLocaleString());
// Sort by most-recently pushed to.
repos.sort(function (a, b) {
if (a.pushed_at < b.pushed_at) {
return 1;
Expand All @@ -117,48 +103,46 @@
$(function () {
$('#num-members').text(members.length);
});
}); // Relative times
});

// Relative times
function prettyDate(rawdate) {
var date,
seconds,
formats,
i = 0,
f;
seconds,
formats,
i = 0,
f;
date = new Date(rawdate);
seconds = (new Date() - date) / 1000;
formats = [[60, 'seconds', 1], [120, '1 minute ago'], [3600, 'minutes', 60], [7200, '1 hour ago'], [86400, 'hours', 3600], [172800, 'Yesterday'], [604800, 'days', 86400], [1209600, '1 week ago'], [2678400, 'weeks', 604800]];

while (f = formats[i++]) {
if (seconds < f[0]) {
return f[2] ? Math.floor(seconds / f[2]) + ' ' + f[1] + ' ago' : f[1];
}
}

return 'A while ago';
} // Wraps prettyDate in an HTML5 <time> element

}

// Wraps prettyDate in an HTML5 <time> element
function html5prettyDate(rawdate) {
return '<time datetime="' + rawdate.toISOString() + '">' + prettyDate(rawdate) + '</time>';
return "<time datetime=\"".concat(rawdate.toISOString(), "\">").concat(prettyDate(rawdate), "</time>");
}
})(jQuery); // External 3rd party scripts

})(jQuery);

// External 3rd party scripts
(function (doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
add = function add(url, id) {
if (doc.getElementById(id)) {
return;
}

js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
}; // Twitter SDK

fjs = doc.getElementsByTagName(script)[0],
add = function add(url, id) {
if (doc.getElementById(id)) {
return;
}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
};

// Twitter SDK
add('https://platform.twitter.com/widgets.js', 'twitter-wjs');
})(document, 'script');
36 changes: 36 additions & 0 deletions assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,42 @@ ol {
color: #666;
}

.repo__links {
margin-top: 1em;
padding-top: 0.75em;
border-top: 1px solid #eee;
}

.repo__link {
display: inline-block;
margin-right: 0.75em;
padding: 0.25em 0.5em;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
background-color: #0084b4;
border-radius: 3px;
text-decoration: none;
transition: background-color 0.2s ease;
}

.repo__link:hover,
.repo__link:focus {
background-color: #005e80;
color: #fff;
text-decoration: none;
}

.repo__link--homepage {
background-color: #5cb85c;
}

.repo__link--homepage:hover,
.repo__link--homepage:focus {
background-color: #449d44;
}

/* Footer
========================================================================== */

Expand Down