Add category to table page

build.js

@@ -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 ${
+      `<a href="${owner.html_url}" class="link ${valueNames[7]}">${
-        valueNames[7]
+        owner.login
-      }">${owner.login}</a>`,
+      }</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(
+    $('#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');
     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();

buildMetadata.js

@@ -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/';

data/category.json

@@ -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"
+  }
+]

data/repository.json

@@ -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",

website/index.js

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

website/table.tmpl.html

@@ -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;