Skip to content

Instantly share code, notes, and snippets.

@sushain97

sushain97/source-browser.html

Last active October 23, 2017 20:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sushain97/18bd9fe2052f0f0cf9e4abc4033fee58 to your computer and use it in GitHub Desktop.
Save sushain97/18bd9fe2052f0f0cf9e4abc4033fee58 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
source-browser.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Apertium Source Browser</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="https://www.apertium.org/img/favicon.ico">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style type="text/css">
#logo {
margin-top: 1em;
max-height: 4em;
}
#github-logo {
margin-top: .5em;
max-height: 6em;
}
#topics {
margin-top: 1em;
flex-wrap: wrap;
}
.topic {
flex: 1;
min-width: 200px;
}
.repo {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.repo i {
margin-left: 5px;
}
.repo-info {
cursor: pointer;
}
.repo-info-term {
text-transform: capitalize;
}
.topic-repo-link {
margin-left: .5em;
}
.topic-divider {
width: 90%;
margin: .5rem 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<a href="https://apertium.org" target="_blank">
<img id="logo" src="//www.apertium.org/img/Apertium.png">
</a>
<a href="#" target="_blank" id="github-link">
<img id="github-logo" class="d-none d-sm-block float-right" src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png">
</a>
<div id="topics" class="d-flex"></div>
<button type="button" class="btn btn-outline-secondary btn-sm text-center" id="refresh">
<i class="fa fa-refresh"></i>
</button>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="repo-info-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"><dl></dl></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script type="text/javascript">
const ORGANIZATION = 'mock-apertium',
TOPICS = [
{topic: 'languages', repoUrl: 'https://github.com/mock-apertium/languages'},
{topic: 'incubator'},
{topic: 'trunk'},
{topic: 'tools', repoUrl: 'https://github.com/mock-apertium/tools'},
];
function getTopicData(topic, organization) {
const url = `//api.github.com/search/repositories?q=topic:${topic}+org:${ORGANIZATION}+fork:true`;
if (localStorage[url]) { // TODO: eventually expire cache
return Promise.resolve(JSON.parse(localStorage[url]));
} else {
return new Promise((resolve, reject) => {
fetch(url)
.then(data =>
data.json()
.then(repos => {
localStorage[url] = JSON.stringify(repos);
resolve(repos);
})
.catch(err => reject(err))
)
.catch(err => reject(err))
});
}
}
function showTopics() {
TOPICS.forEach(({topic, repoUrl}) => {
const topicColumn = $('<div class="topic">'),
repoList = $('<ul class="repos list-unstyled">');
topicColumn.append(
$('<div>').append(
$('<h2 class="d-inline">').text(topic),
repoUrl ? $('<a class="topic-repo-link"><i class="fa fa-external-link"></i></a>').attr({
href: repoUrl,
target: '_blank',
}) : undefined
),
$('<hr class="topic-divider">'),
repoList,
);
$("#topics").append(topicColumn);
getTopicData(topic, ORGANIZATION).then(repos => {
repos.items.sort((a, b) => a.name.localeCompare(b.name));
repos.items.forEach(repo =>
repoList.append(
$('<li class="repo">').append(
$('<a>').text(repo.name).attr({
href: repo.html_url,
target: '_blank',
}),
$('<i class="fa fa-info-circle repo-info" data-toggle="tooltip">')
.attr('title', repo.description)
.data('repo', repo),
)
)
);
$('[data-toggle="tooltip"]', topicColumn).tooltip();
});
});
}
function showRepoInfo(event) {
const repo = $(event.currentTarget).data('repo');
$('#repo-info-modal').modal('show');
$('#repo-info-modal .modal-title').text(repo.full_name);
$('#repo-info-modal .modal-body dl').empty().append(
Array.prototype.concat.apply(
[],
['description', 'language', 'stargazers_count', 'watchers_count', 'git_url', 'updated_at', 'created_at', 'pushed_at'].map(
key => [$('<dt class="repo-info-term">').text(key.replace('_', ' ')), $('<dd>').text(repo[key])],
),
)
);
}
function refreshTopics(event) {
localStorage.clear();
$('.topic').remove();
event.currentTarget.blur();
showTopics();
}
$(document).ready(() => {
$('#github-link').attr('href', `https://github.com/${ORGANIZATION}`);
$('#topics').on('click', '.repo-info', showRepoInfo);
$('#refresh').click(refreshTopics);
showTopics();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment