Table grid of all projects

This commit is contained in:
Julien Bisconti 2018-06-09 16:08:57 +02:00
parent c306007594
commit 10fbd6cb6f
8 changed files with 465 additions and 155 deletions

2
.gitignore vendored
View File

@ -6,7 +6,7 @@ node_modules
.cache
dist
package-lock.json
website/index.merged.html
website/index.html
website/table.html
**/.DS_Store

View File

@ -22,7 +22,7 @@ const GITHUB_METADATA_FILE = `data/${dayjs().format(
'YYYY-MM-DDTHH.mm.ss',
)}-fetched_repo_data.json`;
const GITHUB_REPOS = 'data/list_repos.json';
const METADATA_TABLE = 'data/table.md';
// const METADATA_TABLE = 'data/table.md';
// --- HTTP ---
const API = 'https://api.github.com/';
const options = {
@ -73,41 +73,41 @@ const ProgressBar = (i, batchSize, total) => {
);
};
const getLastUpdate = updated => {
const updt = Number(dayjs(updated).diff(dayjs(), 'days'));
if (updt < 0) {
if (Math.abs(updt) === 1) return `1 day ago`;
return `${Math.abs(updt)} days ago`;
} else if (updt === 0) return 'today';
return updated;
};
// const getLastUpdate = updated => {
// const updt = Number(dayjs(updated).diff(dayjs(), 'days'));
// if (updt < 0) {
// if (Math.abs(updt) === 1) return `1 day ago`;
// return `${Math.abs(updt)} days ago`;
// } else if (updt === 0) return 'today';
// return updated;
// };
const createLine = data => {
const {
name,
html_url: repoURL,
description,
homepage,
stargazers_count: stargazers,
updated_at: updated,
language,
license,
owner,
} = data;
if (!data || !name) return '|ERROR |';
// const createLine = data => {
// const {
// name,
// html_url: repoURL,
// description,
// homepage,
// stargazers_count: stargazers,
// updated_at: updated,
// language,
// license,
// owner,
// } = data;
// if (!data || !name) return '|ERROR |';
const lineData = [
`[${name}](${repoURL})`,
description || '-',
homepage || '-',
stargazers,
getLastUpdate(updated),
language,
license && `[${license.name}](${license.url})`,
owner && `[${owner.login}](${owner.html_url})`,
];
return `|${lineData.join('|')}|`;
};
// const lineData = [
// `[${name}](${repoURL})`,
// description || '-',
// homepage || '-',
// stargazers,
// getLastUpdate(updated),
// language,
// license && `[${license.name}](${license.url})`,
// owner && `[${owner.login}](${owner.html_url})`,
// ];
// return `|${lineData.join('|')}|`;
// };
async function batchFetchRepoMetadata(githubRepos) {
const repos = githubRepos.map(removeHost);
@ -118,37 +118,31 @@ async function batchFetchRepoMetadata(githubRepos) {
const batch = repos.slice(i, i + BATCH_SIZE);
if (process.env.DEBUG) console.log({ batch });
const res = await fetchAll(batch);
fs.appendFile(
GITHUB_METADATA_FILE,
JSON.stringify(res, null, 2),
printError,
);
metadata.push(...res);
ProgressBar(i, BATCH_SIZE, repos.length);
// poor's man rate limiting so github don't blacklist us
// also the file has the time to append the data
// poor man's rate limiting so github don't ban us
await delay(DELAY);
}
ProgressBar(repos.length, BATCH_SIZE, repos.length);
return metadata;
}
const convertToTable = data => {
const header = `
# Repository Metadata
// const convertToTable = data => {
// const header = `
// # Repository Metadata
| Name | Description | Homepage | Star | Updated | Language | License | Author |
| ----------- | ----------- | -------- | ---- | ------- | -------- | :---: | ------:|`;
const table = [header]
.concat(
data
.sort((a, b) => Number(b.stargazers_count) - Number(a.stargazers_count))
.map(createLine),
)
.join('\n');
// | Name | Description | Homepage | Star | Updated | Language | License | Author |
// | ----------- | ----------- | -------- | ---- | ------- | -------- | :---: | ------:|`;
// const table = [header]
// .concat(
// data
// .sort((a, b) => Number(b.stargazers_count) - Number(a.stargazers_count))
// .map(createLine),
// )
// .join('\n');
return writeFile(METADATA_TABLE, table);
};
// return writeFile(METADATA_TABLE, table);
// };
async function main() {
try {
@ -162,11 +156,15 @@ async function main() {
const metadata = batchFetchRepoMetadata(githubRepos);
console.log('✅ fetching metadata');
await writeFile(
GITHUB_METADATA_FILE,
JSON.stringify(metadata, null, 2),
printError,
);
console.log('✅ metadata saved');
await convertToTable(metadata);
console.log('✅ writing metadata table');
// await convertToTable(metadata);
// console.log('✅ writing metadata table');
} catch (err) {
printError(err);
}

106
buildTable.js Normal file
View File

@ -0,0 +1,106 @@
const fs = require('fs');
// const showdown = require('showdown');
const cheerio = require('cheerio');
// const Parcel = require('parcel-bundler');
const dayjs = require('dayjs');
const metaData = require('./data/2018-06-06T17.54.30-fetched_repo_data.json');
process.env.NODE_ENV = 'production';
process.on('unhandledRejection', error => {
console.log('unhandledRejection', error.message);
});
// const table = 'data/table.md';
const templateHTML = 'website/table.tmpl.html';
// const merged = 'website/table.html';
const destination = 'website/table.html';
const valueNames = [
'name',
'description',
'homepage',
'star',
'updated',
'language',
'license',
'author',
];
const getLastUpdate = updated => {
const updt = Number(dayjs(updated).diff(dayjs(), 'days'));
if (updt < 0) {
if (Math.abs(updt) === 1) return `1 day ago`;
return `${Math.abs(updt)} days ago`;
} else if (updt === 0) return 'today';
return updated;
};
const formatEntry = (
{
name,
html_url: repoURL,
description,
homepage,
stargazers_count: stargazers,
updated_at: updated,
language,
license,
owner,
},
i,
) =>
[
`<li data-id="${i}">`,
`<a href="${repoURL}" class="link ${valueNames[0]}">${name}</a>`,
`<p class="${valueNames[1]}">${description || '-'}</p>`,
(homepage &&
`<a href="${homepage}" class="link ${valueNames[2]}">🔗 website</a>`) ||
'<p></p>',
`<p class="${
valueNames[3]
} timestamp" data-timestamp="${stargazers}">⭐️${stargazers}</p>`,
`<p class="${
valueNames[4]
} timestamp" data-timestamp="${updated}">${getLastUpdate(updated)}</p>`,
(language && `<p class="${valueNames[5]}">💻${language}</p>`) || '<p></p>',
(license &&
`<a href="${license.url}" class="link ${valueNames[6]}">📃${
license.name
}</a>`) ||
'<p></p>',
owner &&
`<a href="${owner.html_url}" class="link ${valueNames[7]}">Made by ${
owner.login
}</a>`,
'</li>',
].join('');
function main() {
const indexTemplate = fs.readFileSync(templateHTML, 'utf8');
const $ = cheerio.load(indexTemplate);
const btn = valueNames.map(
v => `<button class="sort" data-sort="${v}">Sort by ${v} </button>`,
);
$('#md').append(
[
`<input class="search" placeholder="Search" /> ${btn.join('')}`,
'<ul class="list">',
metaData.map(formatEntry).join(''),
'</ul>',
].join(''),
);
$('body').append(
'<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.js"></script>',
);
$('body').append(`
<script> const userList = new List('md', { valueNames: ['name','description','homepage','star','updated','language','license','author']}); </script>
`);
console.log('Writing table.html');
fs.writeFileSync(destination, $.html(), 'utf8');
console.log('DONE 👍');
}
main();

View File

@ -1123,9 +1123,7 @@
},
"network_count": 1333,
"subscribers_count": 300
}
][
{
},{
"id": 19360616,
"node_id": "MDEwOlJlcG9zaXRvcnkxOTM2MDYxNg==",
"name": "swarm",
@ -2226,9 +2224,7 @@
},
"network_count": 7,
"subscribers_count": 4
}
][
{
},{
"id": 67536560,
"node_id": "MDEwOlJlcG9zaXRvcnk2NzUzNjU2MA==",
"name": "elsy",
@ -3467,9 +3463,7 @@
},
"network_count": 65,
"subscribers_count": 40
}
][
{
},{
"id": 27701139,
"node_id": "MDEwOlJlcG9zaXRvcnkyNzcwMTEzOQ==",
"name": "conduit",
@ -4808,9 +4802,7 @@
},
"network_count": 9,
"subscribers_count": 4
}
][
{
},{
"id": 85515090,
"node_id": "MDEwOlJlcG9zaXRvcnk4NTUxNTA5MA==",
"name": "docker-flow-monitor",
@ -5977,9 +5969,7 @@
},
"network_count": 11,
"subscribers_count": 6
}
][
{
},{
"id": 21704134,
"node_id": "MDEwOlJlcG9zaXRvcnkyMTcwNDEzNA==",
"name": "flannel",
@ -7378,9 +7368,7 @@
},
"network_count": 31,
"subscribers_count": 10
}
][
{
},{
"id": 72737874,
"node_id": "MDEwOlJlcG9zaXRvcnk3MjczNzg3NA==",
"name": "haven-platform",
@ -8639,9 +8627,7 @@
},
"network_count": 152,
"subscribers_count": 88
}
][
{
},{
"id": 26337322,
"node_id": "MDEwOlJlcG9zaXRvcnkyNjMzNzMyMg==",
"name": "rancher",
@ -9854,9 +9840,7 @@
},
"network_count": 363,
"subscribers_count": 205
}
][
{
},{
"id": 52381034,
"node_id": "MDEwOlJlcG9zaXRvcnk1MjM4MTAzNA==",
"name": "workflow",
@ -11167,9 +11151,7 @@
},
"network_count": 2,
"subscribers_count": 2
}
][
{
},{
"id": 42408804,
"node_id": "MDEwOlJlcG9zaXRvcnk0MjQwODgwNA==",
"name": "traefik",
@ -12408,9 +12390,7 @@
},
"network_count": 122,
"subscribers_count": 52
}
][
{
},{
"id": 49986046,
"node_id": "MDEwOlJlcG9zaXRvcnk0OTk4NjA0Ng==",
"name": "falco",
@ -13629,9 +13609,7 @@
},
"network_count": 98,
"subscribers_count": 31
}
][
{
},{
"id": 34205411,
"node_id": "MDEwOlJlcG9zaXRvcnkzNDIwNTQxMQ==",
"name": "docker-unison",
@ -14772,9 +14750,7 @@
},
"network_count": 31,
"subscribers_count": 19
}
][
{
},{
"id": 77419377,
"node_id": "MDEwOlJlcG9zaXRvcnk3NzQxOTM3Nw==",
"name": "ctop",
@ -15887,9 +15863,7 @@
},
"network_count": 41,
"subscribers_count": 36
}
][
{
},{
"id": 42531199,
"node_id": "MDEwOlJlcG9zaXRvcnk0MjUzMTE5OQ==",
"name": "dvm",
@ -17002,9 +16976,7 @@
},
"network_count": 1,
"subscribers_count": 3
}
][
{
},{
"id": 34074446,
"node_id": "MDEwOlJlcG9zaXRvcnkzNDA3NDQ0Ng==",
"name": "wharfee",
@ -18137,9 +18109,7 @@
},
"network_count": 369,
"subscribers_count": 109
}
][
{
},{
"id": 51555295,
"node_id": "MDEwOlJlcG9zaXRvcnk1MTU1NTI5NQ==",
"name": "rapid",
@ -19212,9 +19182,7 @@
},
"network_count": 4,
"subscribers_count": 9
}
][
{
},{
"id": 100341708,
"node_id": "MDEwOlJlcG9zaXRvcnkxMDAzNDE3MDg=",
"name": "lstags",
@ -20387,9 +20355,7 @@
},
"network_count": 36,
"subscribers_count": 26
}
][
{
},{
"id": 39589297,
"node_id": "MDEwOlJlcG9zaXRvcnkzOTU4OTI5Nw==",
"name": "dlayer",
@ -21582,9 +21548,7 @@
},
"network_count": 16,
"subscribers_count": 43
}
][
{
},{
"id": 36849312,
"node_id": "MDEwOlJlcG9zaXRvcnkzNjg0OTMxMg==",
"name": "runlike",
@ -22659,9 +22623,7 @@
},
"network_count": 399,
"subscribers_count": 52
}
][
{
},{
"id": 49360444,
"node_id": "MDEwOlJlcG9zaXRvcnk0OTM2MDQ0NA==",
"name": "Dockerfiles",
@ -23802,9 +23764,7 @@
},
"network_count": 5,
"subscribers_count": 5
}
][
{
},{
"id": 29760781,
"node_id": "MDEwOlJlcG9zaXRvcnkyOTc2MDc4MQ==",
"name": "docket",
@ -25003,9 +24963,7 @@
},
"network_count": 139,
"subscribers_count": 103
}
][
{
},{
"id": 12467623,
"node_id": "MDEwOlJlcG9zaXRvcnkxMjQ2NzYyMw==",
"name": "dockerode",
@ -26164,9 +26122,7 @@
},
"network_count": 246,
"subscribers_count": 56
}
][
{
},{
"id": 16607898,
"node_id": "MDEwOlJlcG9zaXRvcnkxNjYwNzg5OA==",
"name": "drone",
@ -27365,9 +27321,7 @@
},
"network_count": 4,
"subscribers_count": 1
}
][
{
},{
"id": 18931097,
"node_id": "MDEwOlJlcG9zaXRvcnkxODkzMTA5Nw==",
"name": "devstep",
@ -28408,9 +28362,7 @@
},
"network_count": 9,
"subscribers_count": 11
}
][
{
},{
"id": 78498440,
"node_id": "MDEwOlJlcG9zaXRvcnk3ODQ5ODQ0MA==",
"name": "lando",
@ -29603,9 +29555,7 @@
},
"network_count": 618,
"subscribers_count": 225
}
][
{
},{
"id": 59715467,
"node_id": "MDEwOlJlcG9zaXRvcnk1OTcxNTQ2Nw==",
"name": "docker-lambda",
@ -30778,9 +30728,7 @@
},
"network_count": 65,
"subscribers_count": 40
}
][
{
},{
"id": 13003799,
"node_id": "MDEwOlJlcG9zaXRvcnkxMzAwMzc5OQ==",
"name": "azk",
@ -31947,9 +31895,7 @@
},
"network_count": 36,
"subscribers_count": 12
}
][
{
},{
"id": 72878982,
"node_id": "MDEwOlJlcG9zaXRvcnk3Mjg3ODk4Mg==",
"name": "landscape",
@ -33242,9 +33188,7 @@
},
"network_count": 66,
"subscribers_count": 69
}
][
{
},{
"id": 30508772,
"node_id": "MDEwOlJlcG9zaXRvcnkzMDUwODc3Mg==",
"name": "Docker",
@ -34399,9 +34343,7 @@
},
"network_count": 343,
"subscribers_count": 167
}
][
{
},{
"id": 23929024,
"node_id": "MDEwOlJlcG9zaXRvcnkyMzkyOTAyNA==",
"name": "dockerfiles",

View File

@ -85,19 +85,22 @@ async function main() {
const repos = githubRepos.map(removeHost);
const metadata = [];
/* eslint-disable no-await-in-loop */
for (let i = 0; i < repos.length; i += BATCH_SIZE) {
const batch = repos.slice(i, i + BATCH_SIZE);
if (process.env.DEBUG) console.log({ batch });
const res = await Promise.all(batch.map(async path => get(path)));
fs.appendFile(
GITHUB_METADATA_FILE,
JSON.stringify(res, null, 2),
err => err && console.error(err),
);
metadata.push(...res);
ProgressBar(i, BATCH_SIZE, repos.length);
await delay(DELAY);
}
fs.writeFile(
GITHUB_METADATA_FILE,
JSON.stringify(metadata, null, 2),
err => err && console.error(err),
);
ProgressBar(repos.length, BATCH_SIZE, repos.length);
} catch (err) {
console.error('ERROR:', err);

View File

@ -23,9 +23,11 @@
"homepage": "https://github.com/veggiemonk/awesome-docker#readme",
"dependencies": {
"cheerio": "^1.0.0-rc.2",
"critical": "^1.3.2",
"dayjs": "^1.6.4",
"critical": "^1.3.3",
"dayjs": "^1.6.6",
"draftlog": "^1.0.12",
"jsdom": "^11.11.0",
"list.js": "^1.5.0",
"node-fetch": "^2.1.2",
"parcel-bundler": "^1.8.1",
"rimraf": "^2.6.2",
@ -39,6 +41,6 @@
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"prettier": "^1.13.0"
"prettier": "^1.13.4"
}
}

View File

@ -1,3 +1,5 @@
const list = require('list.js');
const main = () => {
console.log('hi!');
};

257
website/table.tmpl.html Normal file
View File

@ -0,0 +1,257 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-control" content="public">
<meta charset="UTF-8">
<title>Awesome-docker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#5DBCD2">
<meta name="description" content="A curated list of Docker resources and projects.">
<meta name="keywords" content="free and open-source open source projects for docker moby kubernetes linux awesome awesome-list container tools dockerfile list moby docker-container docker-image docker-environment docker-deployment docker-swarm docker-api docker-monitoring docker-machine docker-security docker-registry">
<meta name="google-site-verification" content="_yiugvz0gCtfsBLyLl1LnkALXb6D4ofiwCyV1XOlYBM" />
<link rel="icon" type="image/png" href="favicon.png">
<style>
* {
box-sizing: border-box
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
padding: 0;
margin: 0;
font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #606c71
}
section {
display: block
}
a {
background-color: transparent;
color: #5DBCD2;
text-decoration: none
}
strong {
font-weight: 700
}
h1 {
font-size: 2em;
margin: .67em 0
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
.btn {
display: inline-block;
margin-bottom: 1rem;
color: hsla(0, 0%, 100%, .7);
background-color: hsla(0, 0%, 100%, .08);
border: 1px solid hsla(0, 0%, 100%, .2);
border-radius: .3rem
}
.page-header {
color: #fff;
text-align: center;
background-color: #5DBCD2;
background-image: linear-gradient(120deg, #155799, #5DBCD2)
}
.project-name {
margin-top: 0;
margin-bottom: .1rem
}
.project-tagline {
margin-bottom: 2rem;
font-weight: 400;
opacity: .7
}
.main-content>ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 2fr));
grid-gap: 20px;
align-items: stretch;
line-height: 1;
padding: 20px;
}
.main-content>ul>li {
display: grid;
/* width: 300px; */
/* max-width: 100%; */
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
border: 1px solid #ccc;
/* height: 300px; */
/* grid-template-columns: 280px; */
border-radius: 20px;
padding: 10px;
text-align: center;
}
.main-content>ul>li>* {
margin: 0 0 0 0;
}
.main-content img {
max-width: 100%
}
.list li {
list-style: none;
padding: 5px 10px;
border: 1px solid #eee;
}
.sort {
border-radius: 6px;
border: none;
display: inline-block;
color: #fff;
text-decoration: none;
background-color: #28a8e0;
height: 30px;
}
.sort:hover {
text-decoration: none;
background-color: #1b8aba;
}
.sort:focus {
outline: none;
}
.sort:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content: "";
position: relative;
top: -10px;
right: -5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
position: relative;
top: 13px;
right: -5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content: "";
position: relative;
top: -10px;
right: -5px;
}
@media screen and (min-width:64em) {
.btn {
padding: .75rem 1rem
}
.page-header {
padding: 5rem 6rem
}
.project-name {
font-size: 3.25rem
}
.project-tagline {
font-size: 1.25rem
}
.main-content {
margin: 0 auto;
font-size: 1.1rem
}
}
@media screen and (min-width:42em) and (max-width:64em) {
.btn {
padding: .6rem .9rem;
font-size: .9rem
}
.page-header {
padding: 3rem 4rem
}
.project-name {
font-size: 2.25rem
}
.project-tagline {
font-size: 1.15rem
}
.main-content {
font-size: 1.1rem
}
}
@media screen and (max-width:42em) {
.btn {
display: block;
width: 100%;
padding: .75rem;
font-size: .9rem
}
.page-header {
padding: 2rem 1rem
}
.project-name {
font-size: 1.75rem
}
.project-tagline {
font-size: 1rem
}
.main-content {
font-size: 1rem
}
}
</style>
</head>
<body>
<section class="page-header">
<h1 class="project-name">Awesome-docker</h1>
<h2 class="project-tagline">A curated list of Docker resources and projects</h2>
<a href="https://github.com/veggiemonk/awesome-docker" class="btn">View on GitHub</a>
<br>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/veggiemonk/awesome-docker" data-icon="octicon-star" data-size="large" data-count-href="/veggiemonk/awesome-docker/stargazers"
data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star veggiemonk/awesome-docker on GitHub">Star</a>
</section>
<section id="md" class="main-content"></section>
<!--<script src="index.js"></script> -->
<!--Place this tag in your head or just before your close body tag. -->
<!-- <script async defer src="https://buttons.github.io/buttons.js"></script> -->
</body>
</html>