Table grid of all projects

.gitignore

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

buildMetadata.js

@@ -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 getLastUpdate = updated => {
-  const updt = Number(dayjs(updated).diff(dayjs(), 'days'));
+//   const updt = Number(dayjs(updated).diff(dayjs(), 'days'));
-  if (updt < 0) {
+//   if (updt < 0) {
-    if (Math.abs(updt) === 1) return `1 day ago`;
+//     if (Math.abs(updt) === 1) return `1 day ago`;
-    return `${Math.abs(updt)} days ago`;
+//     return `${Math.abs(updt)} days ago`;
-  } else if (updt === 0) return 'today';
+//   } else if (updt === 0) return 'today';
-  return updated;
+//   return updated;
-};
+// };
 
-const createLine = data => {
+// const createLine = data => {
-  const {
+//   const {
-    name,
+//     name,
-    html_url: repoURL,
+//     html_url: repoURL,
-    description,
+//     description,
-    homepage,
+//     homepage,
-    stargazers_count: stargazers,
+//     stargazers_count: stargazers,
-    updated_at: updated,
+//     updated_at: updated,
-    language,
+//     language,
-    license,
+//     license,
-    owner,
+//     owner,
-  } = data;
+//   } = data;
-  if (!data || !name) return '|ERROR |';
+//   if (!data || !name) return '|ERROR |';
 
-  const lineData = [
+//   const lineData = [
-    `[${name}](${repoURL})`,
+//     `[${name}](${repoURL})`,
-    description || '-',
+//     description || '-',
-    homepage || '-',
+//     homepage || '-',
-    stargazers,
+//     stargazers,
-    getLastUpdate(updated),
+//     getLastUpdate(updated),
-    language,
+//     language,
-    license && `[${license.name}](${license.url})`,
+//     license && `[${license.name}](${license.url})`,
-    owner && `[${owner.login}](${owner.html_url})`,
+//     owner && `[${owner.login}](${owner.html_url})`,
-  ];
+//   ];
-  return `|${lineData.join('|')}|`;
+//   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
+    // poor man's rate limiting so github don't ban us
-    // also the file has the time to append the data
     await delay(DELAY);
   }
   ProgressBar(repos.length, BATCH_SIZE, repos.length);
   return metadata;
 }
 
-const convertToTable = data => {
+// const convertToTable = data => {
-  const header = `
+//   const header = `
-# Repository Metadata
+// # Repository Metadata
 
-| Name        | Description | Homepage | Star | Updated | Language | License | Author |
+// | Name        | Description | Homepage | Star | Updated | Language | License | Author |
-| ----------- | ----------- | -------- | ---- | ------- | -------- | :---:   | ------:|`;
+// | ----------- | ----------- | -------- | ---- | ------- | -------- | :---:   | ------:|`;
-  const table = [header]
+//   const table = [header]
-    .concat(
+//     .concat(
-      data
+//       data
-        .sort((a, b) => Number(b.stargazers_count) - Number(a.stargazers_count))
+//         .sort((a, b) => Number(b.stargazers_count) - Number(a.stargazers_count))
-        .map(createLine),
+//         .map(createLine),
-    )
+//     )
-    .join('\n');
+//     .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);
+    // await convertToTable(metadata);
-
+    // console.log('✅ writing metadata table');
-    console.log('✅ writing metadata table');
   } catch (err) {
     printError(err);
   }

buildTable.js

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

data/2018-06-06T17.54.30-fetched_repo_data.json

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

fetchRepos.js

@@ -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(
+      metadata.push(...res);
-        GITHUB_METADATA_FILE,
-        JSON.stringify(res, null, 2),
-        err => err && console.error(err),
-      );
       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);

package.json

@@ -23,9 +23,11 @@
   "homepage": "https://github.com/veggiemonk/awesome-docker#readme",
   "dependencies": {
     "cheerio": "^1.0.0-rc.2",
-    "critical": "^1.3.2",
+    "critical": "^1.3.3",
-    "dayjs": "^1.6.4",
+    "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"
   }
 }

website/index.js

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

website/table.tmpl.html

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