Merge pull request #553 from veggiemonk/improve-css

Improve CSS

.eslintrc.js

@@ -23,7 +23,8 @@ module.exports = {
         "prettier/prettier": [
           "error",
           {
-            "singleQuote": true
+            "singleQuote": true,
+            "trailingComma": "all",
           }
         ]
       }

README.md

@@ -19,6 +19,8 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
 
 # Contents
 
+<!-- TOC -->
+
 - Introduction
   - [What is Docker?](#what-is-docker)
   - [Where to start?](#where-to-start)
@@ -44,6 +46,7 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
     - [Builder](#builder)
     - [Dockerfile](#dockerfile)
     - [Linter](#linter)
+    - [Metadata](#metadata)
     - [Registry](#registry)
   - [Development with Docker](#development-with-docker)
     - [API Client](#api-client)
@@ -53,14 +56,14 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
     - [Serverless](#serverless)
     - [Testing](#testing)
     - [Wrappers](#wrappers)
-  - [Services based on Docker ($$$)](#services-based-on-docker-)
+  - [Services based on Docker (:heavy_dollar_sign:)](#services-based-on-docker-heavy_dollar_sign)
     - [CI/CD](#ci-services)
     - [CaaS](#caas)
-    - [Monitoring](#monitoring-services)
+    - [Monitoring Services](#monitoring-services)
 - [Useful Resources](#useful-resources)
   - [Awesome Lists](#awesome-lists)
   - [Good Tips](#good-tips)
-  - [Raspberry Pi / ARM](#raspberry-pi--arm)
+  - [Raspberry Pi & ARM](#raspberry-pi--arm)
   - [Security](#security-1)
   - [Videos](#videos)
 - [Communities and Meetups](#communities-and-meetups)
@@ -69,6 +72,8 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
   - [English](#english)
   - [Russian](#russian)
 
+<!-- /TOC -->
+
 # Legend
 
 - Abandoned :skull:

build.js

@@ -2,11 +2,23 @@ const fs = require('fs');
 const showdown = require('showdown');
 const cheerio = require('cheerio');
 const Parcel = require('parcel-bundler');
-const critical = require('critical');
 
 process.env.NODE_ENV = 'production';
 
-const includeReadme = () => {
+process.on('unhandledRejection', error => {
+  console.log('unhandledRejection', error.message);
+});
+
+const readme = 'README.md';
+const template = 'website/index.tmpl.html';
+const merged = 'website/index.html';
+const destination = 'website/index.html';
+
+const includeReadme = ({
+  md = readme,
+  templateHTML = template,
+  dest = merged,
+}) => {
   const converter = new showdown.Converter({
     omitExtraWLInCodeBlocks: true,
     simplifiedAutoLink: true,
@@ -24,62 +36,36 @@ const includeReadme = () => {
     ghMentions: true,
     backslashEscapesHTMLTags: true,
     emoji: true,
-    splitAdjacentBlockquotes: true
+    splitAdjacentBlockquotes: true,
   });
   // converter.setFlavor('github');
 
   console.log('Loading files...');
-  const index = fs.readFileSync('website/index.tmpl.html', 'utf8');
+  const indexTemplate = fs.readFileSync(templateHTML, 'utf8');
-  const readme = fs.readFileSync('README.md', 'utf8');
+  const markdown = fs.readFileSync(md, 'utf8');
 
   console.log('Merging files...');
-  const $ = cheerio.load(index);
+  const $ = cheerio.load(indexTemplate);
-  $('#md').append(converter.makeHtml(readme));
+  $('#md').append(converter.makeHtml(markdown));
 
   console.log('Writing index.html');
-  fs.writeFileSync('website/index.merged.html', $.html(), 'utf8');
+  fs.writeFileSync(dest, $.html(), 'utf8');
-  return { base: 'website/', src: 'index.merged.html' };
+  console.log('DONE 👍');
 };
 
-const css = ({ base, src }) => {
+const bundle = (dest = destination) => {
-  console.log('');
-  console.log('Generating critical css above the fold');
-  console.log('');
-  const dimensions = [
-    {
-      height: 200,
-      width: 500
-    },
-    {
-      height: 900,
-      width: 1200
-    }
-  ];
-  const options = {
-    inline: true,
-    base,
-    src,
-    dest: 'index.html',
-    dimensions
-  };
-
-  return critical.generate(options);
-};
-
-const bundle = () => {
   console.log('');
   console.log('Bundling with Parcel.js');
   console.log('');
 
-  new Parcel('website/index.html', {
+  new Parcel(dest, {
     name: 'build',
-    publicURL: '/'
+    publicURL: '/',
   }).bundle();
 };
 
-const main = async () => {
+const main = () => {
-  const { base, src } = includeReadme();
+  includeReadme({});
-  await css({ base, src });
   bundle();
 };
 

website/index.tmpl.html

@@ -9,9 +9,185 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#157878">
   <meta name="description" content="A curated list of Docker resources and projects.">
-  <meta name="keywords" content="awesome awesome-list container docker dockerfile tools open source 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">
   <link rel="icon" type="image/png" href="favicon.png">
-  <link rel="stylesheet" href="style.css">
+  <!-- <link rel="stylesheet" href="style.css"> -->
+  <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: #1e6bb8;
+      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: #159957;
+      background-image: linear-gradient(120deg, #155799, #159957)
+    }
+
+    .project-name {
+      margin-top: 0;
+      margin-bottom: .1rem
+    }
+
+    .project-tagline {
+      margin-bottom: 2rem;
+      font-weight: 400;
+      opacity: .7
+    }
+
+    .main-content {
+      word-wrap: break-word
+    }
+
+    .main-content :first-child {
+      margin-top: 0
+    }
+
+    .main-content h1,
+    .main-content h4 {
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+      font-weight: 400;
+      color: #159957
+    }
+
+    .main-content p {
+      margin-bottom: 1em
+    }
+
+    .main-content blockquote {
+      padding: 0 1rem;
+      margin-left: 0;
+      color: #819198;
+      border-left: .3rem solid #dce6f0
+    }
+
+    .main-content blockquote>:first-child {
+      margin-top: 0
+    }
+
+    .main-content blockquote>:last-child {
+      margin-bottom: 0
+    }
+
+    .main-content img {
+      max-width: 100%
+    }
+
+    @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 {
+        max-width: 64rem;
+        padding: 2rem 6rem;
+        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 {
+        padding: 2rem 4rem;
+        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 {
+        padding: 2rem 1rem;
+        font-size: 1rem
+      }
+    }
+  </style>
 </head>
 
 <body>

website/style.css

@@ -318,3 +318,4 @@ a:hover { text-decoration: underline; }
 .site-footer-owner { display: block; font-weight: bold; }
 
 .site-footer-credits { color: #819198; }
+