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 fs = require('fs-extra');
const fetch = require('node-fetch');
const cheerio = require('cheerio'); const cheerio = require('cheerio');
const dayjs = require('dayjs'); const dayjs = require('dayjs');
const showdown = require('showdown'); const showdown = require('showdown');
@ -25,11 +26,14 @@ const README = 'README.md';
const WEBSITE_FOLDER = 'website'; const WEBSITE_FOLDER = 'website';
const DATA_FOLDER = 'data'; const DATA_FOLDER = 'data';
const LATEST_FILENAME = `${DATA_FOLDER}/latest`; 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 indexTemplate = `${WEBSITE_FOLDER}/index.tmpl.html`;
const indexDestination = `${WEBSITE_FOLDER}/index.html`; const indexDestination = `${WEBSITE_FOLDER}/index.html`;
const tableTemplate = `${WEBSITE_FOLDER}/table.tmpl.html`; const tableTemplate = `${WEBSITE_FOLDER}/table.tmpl.html`;
const tableDestination = `${WEBSITE_FOLDER}/table.html`; const tableDestination = `${WEBSITE_FOLDER}/table.html`;
// --- CONFIG
const valueNames = [ const valueNames = [
'name', 'name',
'description', '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 getLastUpdate = updated => {
const updt = Number(dayjs(updated).diff(dayjs(), 'days')); const updt = Number(dayjs(updated).diff(dayjs(), 'days'));
if (updt < 0) { if (updt < 0) {
@ -94,17 +117,24 @@ const formatEntry = (
description, description,
homepage, homepage,
stargazers_count: stargazers, stargazers_count: stargazers,
// subscribers_count: watchers,
pushed_at: updated, pushed_at: updated,
// open_issues: issues,
// forks,
language, language,
license, license,
owner, owner,
categoryName,
// categoryDescription,
// status,
// ownerType,
}, },
i, i,
) => ) =>
[ [
`<li data-id="${i}">`, `<li data-id="${i}">`,
`<a href="${repoURL}" class="link ${valueNames[0]}">${name}</a>`, `<a href="${repoURL}" class="link ${valueNames[0]}">${name}</a>`,
`<p class="${valueNames[1]}">${description || '-'}</p>`, `<p class="${valueNames[1]}">${emojify(description) || '-'}</p>`,
`<p class="${ `<p class="${
valueNames[4] valueNames[4]
} timestamp" data-timestamp="${updated}">Last code update: ${getLastUpdate( } timestamp" data-timestamp="${updated}">Last code update: ${getLastUpdate(
@ -117,7 +147,7 @@ const formatEntry = (
'<p></p>', '<p></p>',
`<p class="${ `<p class="${
valueNames[3] 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>', (language && `<p class="${valueNames[5]}">${language}</p>`) || '<p></p>',
(license && (license &&
license.url !== null && license.url !== null &&
@ -125,37 +155,76 @@ const formatEntry = (
license.name, license.name,
)}</a>`) || )}</a>`) ||
'<p></p>', '<p></p>',
`<p title="Category">${categoryName}</p>`,
owner && owner &&
`<p>Made by </p><a href="${owner.html_url}" class="link ${ `<a href="${owner.html_url}" class="link ${valueNames[7]}">${
valueNames[7] owner.login
}">${owner.login}</a>`, }</a>`,
'</li>', '</li>',
].join(''); ].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() { async function processTable() {
try { try {
LOG.debug('Loading files...', { LATEST_FILENAME, tableTemplate }); LOG.debug('Loading files...', { LATEST_FILENAME, tableTemplate });
const latestFilename = await fs.readFile(LATEST_FILENAME, 'utf8'); const latestFilename = await fs.readFile(LATEST_FILENAME, 'utf8');
LOG.debug({ latestFilename }); 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'); const template = await fs.readFile(tableTemplate, 'utf8');
LOG.debug('Processing template');
const $ = cheerio.load(template); const $ = cheerio.load(template);
const btn = valueNames.map( $('#md').append(processMetadata(metaData));
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(''),
);
LOG.debug('Writing table.html'); LOG.debug('Writing table.html');
await fs.outputFile(tableDestination, $.html(), 'utf8'); await fs.outputFile(tableDestination, $.html(), 'utf8');
LOG.debug('✅ DONE 👍'); LOG.debug('✅ DONE 👍');
@ -193,7 +262,6 @@ async function processIndex() {
LOG.debug('Merging files...'); LOG.debug('Merging files...');
const $ = cheerio.load(template); const $ = cheerio.load(template);
$('#md').append(converter.makeHtml(markdown)); $('#md').append(converter.makeHtml(markdown));
LOG.debug('Writing index.html'); LOG.debug('Writing index.html');
@ -224,6 +292,7 @@ const bundle = () => {
}; };
async function main() { async function main() {
emojiMapURL = await loadEmoji();
await processTable(); await processTable();
await processIndex(); await processIndex();
await bundle(); await bundle();

View File

@ -34,7 +34,7 @@ const README = 'README.md';
const DATE = dayjs().format('YYYY-MM-DDTHH.mm.ss'); const DATE = dayjs().format('YYYY-MM-DDTHH.mm.ss');
const GITHUB_METADATA_FILE = `${DATA_FOLDER}/${DATE}-fetched_repo_data.json`; const GITHUB_METADATA_FILE = `${DATA_FOLDER}/${DATE}-fetched_repo_data.json`;
const LATEST_FILENAME = `${DATA_FOLDER}/latest`; const LATEST_FILENAME = `${DATA_FOLDER}/latest`;
const GITHUB_REPOS = `${DATA_FOLDER}/list_repos.json`; const GITHUB_REPOS = `${DATA_FOLDER}/repository.json`;
// --- HTTP --- // --- HTTP ---
const API = 'https://api.github.com/'; 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/ttiny/deploy",
"https://github.com/humblec/dockit", "https://github.com/humblec/dockit",
"https://github.com/hasura/gitkube", "https://github.com/hasura/gitkube",
"https://github.com/Grafeas/Grafeas", "https://github.com/grafeas/grafeas",
"https://github.com/longshoreman/longshoreman", "https://github.com/longshoreman/longshoreman",
"https://github.com/axibase/atsd-use-cases", "https://github.com/axibase/atsd-use-cases",
"https://github.com/google/cadvisor", "https://github.com/google/cadvisor",
@ -240,7 +240,7 @@
"https://github.com/dnephin/dobi", "https://github.com/dnephin/dobi",
"https://github.com/nandoquintana/docker-missing-tools", "https://github.com/nandoquintana/docker-missing-tools",
"https://github.com/brikis98/docker-osx-dev", "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/EugenMayer/docker-sync",
"https://github.com/shyiko/docker-vm", "https://github.com/shyiko/docker-vm",
"https://github.com/PhilippHeuer/EnvCLI", "https://github.com/PhilippHeuer/EnvCLI",
@ -297,7 +297,6 @@
"https://github.com/kiyoto/docker-fluentd", "https://github.com/kiyoto/docker-fluentd",
"https://github.com/inspec/inspec", "https://github.com/inspec/inspec",
"https://github.com/jessfraz/dockerfiles", "https://github.com/jessfraz/dockerfiles",
"https://github.com/jessfraz/dotfiles",
"https://github.com/jwilder/nginx-proxy", "https://github.com/jwilder/nginx-proxy",
"https://github.com/ashmckenzie/percheron", "https://github.com/ashmckenzie/percheron",
"https://github.com/sematext/sematext-agent-docker", "https://github.com/sematext/sematext-agent-docker",

View File

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

View File

@ -58,7 +58,7 @@ h1 {
img { img {
border: 0 border: 0
} }
/*******************************************************/
.btn { .btn {
display: inline-block; display: inline-block;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -67,36 +67,28 @@ img {
border: 1px solid hsla(0, 0%, 100%, .2); border: 1px solid hsla(0, 0%, 100%, .2);
border-radius: .3rem border-radius: .3rem
} }
.page-header { .page-header {
color: #fff; color: #fff;
text-align: center; text-align: center;
background-color: #5DBCD2; background-color: #5DBCD2;
background-image: linear-gradient(120deg, #155799, #5DBCD2) background-image: linear-gradient(120deg, #155799, #5DBCD2)
} }
.project-name { .project-name {
margin-top: 0; margin-top: 0;
margin-bottom: .1rem margin-bottom: .1rem
} }
.project-tagline { .project-tagline {
margin-bottom: 2rem; margin-bottom: 2rem;
font-weight: 400; font-weight: 400;
opacity: .7 opacity: .7
} }
/*******************************************************/ /*******************************************************/
.container { .container {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
margin-top: 1rem; margin-top: 1rem;
} }
/*******************************************************/ /*******************************************************/
.searchbar { .searchbar {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -108,7 +100,6 @@ img {
width: 18rem; width: 18rem;
font-size: 2.5rem; font-size: 2.5rem;
} }
/*******************************************************/ /*******************************************************/
.sortbtn { .sortbtn {
@ -177,7 +168,13 @@ img {
right: -5px; right: -5px;
} }
/*******************************************************/ /*=========================================================================*/
.emoji {
height: 1rem;
width: 1rem;
}
/*=========================================================================*/
.list { .list {
display: grid; display: grid;