Merge pull request #538 from veggiemonk/unused-css

critical css

.gitignore

@@ -6,4 +6,6 @@ node_modules
 .cache
 dist
 package-lock.json
+website/index.merged.html
+website/index.html
 

README.md

@@ -10,7 +10,7 @@ If this list is not complete, you can [contribute][editREADME] to make it so. He
 
 ***You can see the updates from [TWITTER](https://twitter.com/awesome_docker)***
 
-> **Please**, help organize these resources so that they are _easy to find_ and _understand_ for new comers. See how to **[Contribute](https://github.com/veggiemonk/awesome-docker/blob/master/CONTRIBUTING.md)** for tips!
+> **Please**, help organize these resources so that they are _easy to find_ and _understand_ for new comers. See how to **[Contribute](https://github.com/veggiemonk/awesome-docker/blob/master/.github/CONTRIBUTING.md)** for tips!
 
 #### *If you see a link here that is not (any longer) a good fit, you can fix it by submitting a [pull request][editREADME] to improve this file. Thank you!*
 

build.js

@@ -2,46 +2,75 @@ 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 converter = new showdown.Converter({
-  omitExtraWLInCodeBlocks: true,
-  simplifiedAutoLink: true,
-  excludeTrailingPunctuationFromURLs: true,
-  literalMidWordUnderscores: true,
-  strikethrough: true,
-  tables: true,
-  tablesHeaderId: true,
-  ghCodeBlocks: true,
-  tasklists: true,
-  disableForced4SpacesIndentedSublists: true,
-  simpleLineBreaks: true,
-  requireSpaceBeforeHeadingText: true,
-  ghCompatibleHeaderId: true,
-  ghMentions: true,
-  backslashEscapesHTMLTags: true,
-  emoji: true,
-  splitAdjacentBlockquotes: true
-});
-// converter.setFlavor('github');
+const main = () => {
+  const converter = new showdown.Converter({
+    omitExtraWLInCodeBlocks: true,
+    simplifiedAutoLink: true,
+    excludeTrailingPunctuationFromURLs: true,
+    literalMidWordUnderscores: true,
+    strikethrough: true,
+    tables: true,
+    tablesHeaderId: true,
+    ghCodeBlocks: true,
+    tasklists: true,
+    disableForced4SpacesIndentedSublists: true,
+    simpleLineBreaks: true,
+    requireSpaceBeforeHeadingText: true,
+    ghCompatibleHeaderId: true,
+    ghMentions: true,
+    backslashEscapesHTMLTags: true,
+    emoji: true,
+    splitAdjacentBlockquotes: true
+  });
+  // converter.setFlavor('github');
 
-console.log('Loading files...');
-const index = fs.readFileSync('index.tmpl', 'utf8');
-const readme = fs.readFileSync('README.md', 'utf8');
+  console.log('Loading files...');
+  const index = fs.readFileSync('website/index.tmpl.html', 'utf8');
+  const readme = fs.readFileSync('README.md', 'utf8');
 
-console.log('Merging files...');
-const $ = cheerio.load(index);
-$('#md').append(converter.makeHtml(readme));
+  console.log('Merging files...');
+  const $ = cheerio.load(index);
+  $('#md').append(converter.makeHtml(readme));
 
-console.log('Writing main.html');
-fs.writeFileSync('main.html', $.html(), 'utf8');
+  console.log('Writing index.html');
+  fs.writeFileSync('website/index.merged.html', $.html(), 'utf8');
 
-console.log('Bundling with Parcel.js');
-console.log('');
+  console.log('');
+  console.log('Generating critical css above the fold');
+  console.log('');
 
-new Parcel('main.html', {
-  name: 'build',
-  // publicURL: '/awesome-docker'
-  publicURL: '/'
-}).bundle();
+  critical
+    .generate({
+      inline: true,
+      base: 'website/',
+      src: 'index.merged.html',
+      dest: 'index.html',
+      css: 'website/style.css',
+      dimensions: [
+        {
+          height: 200,
+          width: 500
+        },
+        {
+          height: 900,
+          width: 1200
+        }
+      ]
+    })
+    .then(() => {
+      console.log('Bundling with Parcel.js');
+      console.log('');
+
+      new Parcel('website/index.html', {
+        name: 'build',
+        // publicURL: '/awesome-docker'
+        publicURL: '/'
+      }).bundle();
+    });
+};
+
+main();

index.html

@@ -6,6 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta HTTP-EQUIV="REFRESH" content="0; url=https://awesome-docker.netlify.com">
   <title>Awesome-docker</title>
+  <!-- <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="critical.css"> -->
 </head>
 <body>
 <p> <a href="https://awesome-docker.netlify.com/">We moved to a new place, click here to be redirected.</a></p>

package.json

@@ -4,7 +4,7 @@
   "description": "> A curated list of Docker resources and projects Inspired by [@sindresorhus](https://github.com/sindresorhus)' [awesome][sindresorhus] and improved by these **[amazing contributors](https://github.com/veggiemonk/awesome-docker/graphs/contributors)**.",
   "main": "index.js",
   "scripts": {
-    "build": "node build.js",
+    "build": "rimraf ./dist/ && node build.js && rimraf ./website/index.html",
     "convert": "showdown makehtml -i README.md -o README.html --omitExtraWLInCodeBlocks --simplifiedAutoLink --excludeTrailingPunctuationFromURLs --literalMidWordUnderscores --strikethrough --tables --tablesHeaderId --ghCodeBlocks --tasklists --disableForced4SpacesIndentedSublists --simpleLineBreaks --requireSpaceBeforeHeadingText --ghCompatibleHeaderId --ghMentions --backslashEscapesHTMLTags --emoji --splitAdjacentBlockquotes",
     "package": "parcel build index.html --public-url /awesome-docker"
   },
@@ -20,8 +20,9 @@
   "homepage": "https://github.com/veggiemonk/awesome-docker#readme",
   "dependencies": {
     "cheerio": "^1.0.0-rc.2",
-    "inline-assets": "^1.2.4",
+    "critical": "^1.1.1",
     "parcel-bundler": "^1.6.2",
+    "rimraf": "^2.6.2",
     "showdown": "^1.8.6"
   },
   "devDependencies": {

website/index.tmpl.html

@@ -1,4 +1,7 @@
-<!DOCTYPE html><html class="no-js" lang="en"><head>
+<!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">
@@ -8,7 +11,7 @@
   <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">
   <link rel="icon" type="image/png" href="favicon.png">
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
+  <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css"> -->
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -19,10 +22,13 @@
     <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>
+    <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>
+  <!--<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>
+</body>
+
+</html>