Add category to table page

This commit is contained in:
Julien Bisconti 2018-08-08 12:22:43 +02:00 committed by Andreas Gebhardt
parent 04ceae2035
commit 680321527a
7 changed files with 1758 additions and 39 deletions

113
build.js
View File

@ -1,4 +1,5 @@
const fs = require('fs-extra');
const fetch = require('node-fetch');
const cheerio = require('cheerio');
const dayjs = require('dayjs');
const showdown = require('showdown');
@ -25,11 +26,14 @@ const README = 'README.md';
const WEBSITE_FOLDER = 'website';
const DATA_FOLDER = 'data';
const LATEST_FILENAME = `${DATA_FOLDER}/latest`;
const MAPPING = `${DATA_FOLDER}/mapping.json`;
const CATEGORY = `${DATA_FOLDER}/category.json`;
const indexTemplate = `${WEBSITE_FOLDER}/index.tmpl.html`;
const indexDestination = `${WEBSITE_FOLDER}/index.html`;
const tableTemplate = `${WEBSITE_FOLDER}/table.tmpl.html`;
const tableDestination = `${WEBSITE_FOLDER}/table.html`;
// --- CONFIG
const valueNames = [
'name',
'description',
@ -62,6 +66,25 @@ const sitemapOpts = {
],
};
// --- FORMAT
const loadEmoji = () =>
fetch('https://api.github.com/emojis')
.then(r => r.json())
.catch(handleFailure);
let emojiMapURL = {};
const emojify = text => {
if (!text) return text;
const colonWrapped = /(:[\w\-+]+:)/g;
const result = text.replace(colonWrapped, match => {
const name = match.replace(/:/g, '');
const url = emojiMapURL[name];
return `<img src="${url}" class="emoji" alt="${name}" />`;
});
return result || text;
};
const getLastUpdate = updated => {
const updt = Number(dayjs(updated).diff(dayjs(), 'days'));
if (updt < 0) {
@ -94,17 +117,24 @@ const formatEntry = (
description,
homepage,
stargazers_count: stargazers,
// subscribers_count: watchers,
pushed_at: updated,
// open_issues: issues,
// forks,
language,
license,
owner,
categoryName,
// categoryDescription,
// status,
// ownerType,
},
i,
) =>
[
`<li data-id="${i}">`,
`<a href="${repoURL}" class="link ${valueNames[0]}">${name}</a>`,
`<p class="${valueNames[1]}">${description || '-'}</p>`,
`<p class="${valueNames[1]}">${emojify(description) || '-'}</p>`,
`<p class="${
valueNames[4]
} timestamp" data-timestamp="${updated}">Last code update: ${getLastUpdate(
@ -117,7 +147,7 @@ const formatEntry = (
'<p></p>',
`<p class="${
valueNames[3]
} timestamp" data-timestamp="${stargazers}">⭐️${stargazers}</p>`,
} timestamp" title="Stars on GitHub" data-timestamp="${stargazers}">⭐️${stargazers}</p>`,
(language && `<p class="${valueNames[5]}">${language}</p>`) || '<p></p>',
(license &&
license.url !== null &&
@ -125,37 +155,76 @@ const formatEntry = (
license.name,
)}</a>`) ||
'<p></p>',
`<p title="Category">${categoryName}</p>`,
owner &&
`<p>Made by </p><a href="${owner.html_url}" class="link ${
valueNames[7]
}">${owner.login}</a>`,
`<a href="${owner.html_url}" class="link ${valueNames[7]}">${
owner.login
}</a>`,
'</li>',
].join('');
const buttonHTLM = valueNames
.filter(x => !['description', 'homepage'].includes(x))
.map(v => `<button class="sort" data-sort="${v}">${v} </button>`)
.join('');
const processMetadata = metaData =>
[
`<div class="container">`,
`<div class="searchbar" ><input class="search" placeholder="Search" /></div>`,
`<div class="sortbtn" ><p>Sort by</p>${buttonHTLM}</div>`,
`</div>`,
'<ul class="list">',
Object.values(metaData)
.map(formatEntry)
.join(''),
'</ul>',
].join('');
const normalizedMetadata = ([mapping, category, data]) =>
data.reduce((acc, repo) => {
const m = mapping[repo.html_url];
if (!m) {
console.log('MISSING:', { repo: repo.html_url });
return acc;
}
const c = m && category[m.category];
if (!c) {
console.log('CATEGORY MISSING', { mapping: m });
return acc;
}
return {
...acc,
...{
[repo.html_url.toLowerCase()]: {
...repo,
ownerType: repo.owner && repo.owner.type,
categoryName: c.name,
categoryDescription: c.description,
status: m.status,
},
},
};
}, {});
async function processTable() {
try {
LOG.debug('Loading files...', { LATEST_FILENAME, tableTemplate });
const latestFilename = await fs.readFile(LATEST_FILENAME, 'utf8');
LOG.debug({ latestFilename });
const metaData = await fs.readJson(latestFilename, 'utf-8');
const data = await Promise.all([
fs.readJSON(MAPPING),
fs.readJSON(CATEGORY),
fs.readJSON(latestFilename),
]);
const metaData = normalizedMetadata(data);
LOG.debug({ metaData });
const template = await fs.readFile(tableTemplate, 'utf8');
LOG.debug('Processing template');
const $ = cheerio.load(template);
const btn = valueNames.map(
v => `<button class="sort" data-sort="${v}">${v} </button>`,
);
$('#md').append(
[
`<div class="container">`,
`<div class="searchbar" ><input class="search" placeholder="Search" /></div>`,
`<div class="sortbtn" ><p>Sort by</p>${btn.join('')}</div>`,
`</div>`,
'<ul class="list">',
metaData.map(formatEntry).join(''),
'</ul>',
].join(''),
);
$('#md').append(processMetadata(metaData));
LOG.debug('Writing table.html');
await fs.outputFile(tableDestination, $.html(), 'utf8');
LOG.debug('✅ DONE 👍');
@ -193,7 +262,6 @@ async function processIndex() {
LOG.debug('Merging files...');
const $ = cheerio.load(template);
$('#md').append(converter.makeHtml(markdown));
LOG.debug('Writing index.html');
@ -224,6 +292,7 @@ const bundle = () => {
};
async function main() {
emojiMapURL = await loadEmoji();
await processTable();
await processIndex();
await bundle();

View File

@ -34,7 +34,7 @@ const README = 'README.md';
const DATE = dayjs().format('YYYY-MM-DDTHH.mm.ss');
const GITHUB_METADATA_FILE = `${DATA_FOLDER}/${DATE}-fetched_repo_data.json`;
const LATEST_FILENAME = `${DATA_FOLDER}/latest`;
const GITHUB_REPOS = `${DATA_FOLDER}/list_repos.json`;
const GITHUB_REPOS = `${DATA_FOLDER}/repository.json`;
// --- HTTP ---
const API = 'https://api.github.com/';

157
data/category.json Normal file
View File

@ -0,0 +1,157 @@
[
{
"id": 0,
"name": "Others",
"description": "Awesome projects"
},
{
"id": 1,
"name": "Container Operations",
"description": "description"
},
{
"id": 2,
"name": "Container Composition",
"description": "description"
},
{
"id": 3,
"name": "Deployment and Infrastructure",
"description": "description"
},
{
"id": 4,
"name": "Monitoring",
"description": "description"
},
{
"id": 5,
"name": "Networking",
"description": "description"
},
{
"id": 6,
"name": "Orchestration",
"description": "description"
},
{
"id": 7,
"name": "PaaS",
"description": "description"
},
{
"id": 8,
"name": "Reverse Proxy",
"description": "description"
},
{
"id": 9,
"name": "Security",
"description": "description"
},
{
"id": 10,
"name": "Service Discovery",
"description": "description"
},
{
"id": 11,
"name": "Volume Management / Data",
"description": "description"
},
{
"id": 12,
"name": "User Interface / Desktop",
"description": "description"
},
{
"id": 13,
"name": "User Interface / Terminal",
"description": "description"
},
{
"id": 14,
"name": "User Interface / Web",
"description": "description"
},
{
"id": 15,
"name": "Docker Images",
"description": "description"
},
{
"id": 16,
"name": "Base Tools",
"description": "description"
},
{
"id": 17,
"name": "Builder",
"description": "description"
},
{
"id": 18,
"name": "Dockerfile",
"description": "description"
},
{
"id": 19,
"name": "Linter",
"description": "description"
},
{
"id": 20,
"name": "Metadata",
"description": "description"
},
{
"id": 21,
"name": "Registry",
"description": "description"
},
{
"id": 22,
"name": "Development with Docker",
"description": "description"
},
{
"id": 23,
"name": "API Client",
"description": "description"
},
{
"id": 24,
"name": "CI/CD",
"description": "description"
},
{
"id": 25,
"name": "Development Environment",
"description": "description"
},
{
"id": 26,
"name": "Garbage Collection",
"description": "description"
},
{
"id": 27,
"name": "Serverless",
"description": "description"
},
{
"id": 28,
"name": "Testing",
"description": "description"
},
{
"id": 29,
"name": "Wrappers",
"description": "description"
},
{
"id": 30,
"name": "Where to start",
"description": "description"
}
]

1497
data/mapping.json Normal file

File diff suppressed because it is too large Load Diff

View File

@ -34,7 +34,7 @@
"https://github.com/ttiny/deploy",
"https://github.com/humblec/dockit",
"https://github.com/hasura/gitkube",
"https://github.com/Grafeas/Grafeas",
"https://github.com/grafeas/grafeas",
"https://github.com/longshoreman/longshoreman",
"https://github.com/axibase/atsd-use-cases",
"https://github.com/google/cadvisor",
@ -240,7 +240,7 @@
"https://github.com/dnephin/dobi",
"https://github.com/nandoquintana/docker-missing-tools",
"https://github.com/brikis98/docker-osx-dev",
"https://github.com/ph3nol/docker-arch",
"https://github.com/Ph3nol/Docker-Arch",
"https://github.com/EugenMayer/docker-sync",
"https://github.com/shyiko/docker-vm",
"https://github.com/PhilippHeuer/EnvCLI",
@ -297,7 +297,6 @@
"https://github.com/kiyoto/docker-fluentd",
"https://github.com/inspec/inspec",
"https://github.com/jessfraz/dockerfiles",
"https://github.com/jessfraz/dotfiles",
"https://github.com/jwilder/nginx-proxy",
"https://github.com/ashmckenzie/percheron",
"https://github.com/sematext/sematext-agent-docker",

View File

@ -6,7 +6,7 @@ const main = () => {
'name',
'description',
'homepage',
'star',
{ name: 'star', attr: 'data-stars' },
{ name: 'updated', attr: 'data-timestamp' },
'language',
'license',

View File

@ -13,7 +13,7 @@
<meta name="google-site-verification" content="_yiugvz0gCtfsBLyLl1LnkALXb6D4ofiwCyV1XOlYBM" />
<link rel="icon" type="image/png" href="favicon.png">
<style>
:root {
:root {
--main-list-header: #5dbcd2;
--main-list-footer: #5dbcd2;
}
@ -58,7 +58,7 @@ h1 {
img {
border: 0
}
/*******************************************************/
.btn {
display: inline-block;
margin-bottom: 1rem;
@ -67,36 +67,28 @@ img {
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
}
/*******************************************************/
.container {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 1rem;
}
/*******************************************************/
.searchbar {
display: flex;
justify-content: center;
@ -108,7 +100,6 @@ img {
width: 18rem;
font-size: 2.5rem;
}
/*******************************************************/
.sortbtn {
@ -177,7 +168,13 @@ img {
right: -5px;
}
/*******************************************************/
/*=========================================================================*/
.emoji {
height: 1rem;
width: 1rem;
}
/*=========================================================================*/
.list {
display: grid;