Use jekyll-assets for asset compilation

2026-02-19 05:46:40 +00:00 · 2017-07-09 21:29:55 +01:00
parent 28c824ebb2
commit cc198331c3
12 changed files with 72 additions and 57 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 _site
+.asset-cache
 .sass-cache
 .jekyll-metadata
--- a/1
+++ b/1
@@ -21,6 +21,7 @@ end

 # If you have any plugins, put them here!
 group :jekyll_plugins do
+  gem 'jekyll-assets'
  gem 'jekyll-pants'
  gem 'jekyll-seo-tag'
  gem 'jekyll-sitemap'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -14,11 +14,15 @@ GEM
      execjs
    coffee-script-source (1.12.2)
    colorator (1.1.0)
+    concurrent-ruby (1.0.5)
    ethon (0.10.1)
      ffi (>= 1.3.0)
    execjs (2.7.0)
+    extras (0.3.0)
+      forwardable-extended (~> 2.5)
    faraday (0.12.1)
      multipart-post (>= 1.2, < 3)
+    fastimage (2.1.0)
    ffi (1.9.18)
    forwardable-extended (2.6.0)
    gemoji (3.0.0)
@@ -85,6 +89,14 @@ GEM
      pathutil (~> 0.9)
      rouge (~> 1.7)
      safe_yaml (~> 1.0)
+    jekyll-assets (2.3.2)
+      concurrent-ruby (~> 1.0)
+      extras (~> 0.2)
+      fastimage (~> 2.0, >= 1.8)
+      jekyll (~> 3.1, >= 3.0)
+      pathutil (>= 0.8)
+      rack (~> 1.6)
+      sprockets (~> 3.3, < 3.8)
    jekyll-avatar (0.4.2)
      jekyll (~> 3.0)
    jekyll-coffeescript (1.0.1)
@@ -177,6 +189,7 @@ GEM
      forwardable-extended (~> 2.6)
    powerpack (0.1.1)
    public_suffix (2.0.5)
+    rack (1.6.8)
    rainbow (2.2.1)
    rake (12.0.0)
    rb-fsevent (0.10.2)
@@ -196,6 +209,9 @@ GEM
    sawyer (0.8.1)
      addressable (>= 2.3.5, < 2.6)
      faraday (~> 0.8, < 1.0)
+    sprockets (3.7.1)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
    terminal-table (1.8.0)
      unicode-display_width (~> 1.1, >= 1.1.1)
    thread_safe (0.3.6)
@@ -210,6 +226,7 @@ PLATFORMS

 DEPENDENCIES
  github-pages
+  jekyll-assets
  jekyll-pants
  jekyll-seo-tag
  jekyll-sitemap
--- a/_assets/css/_base.scss
+++ b/_assets/css/_base.scss
--- a/_assets/css/_side-menu.scss
+++ b/_assets/css/_side-menu.scss
--- a/_assets/css/main.scss
+++ b/_assets/css/main.scss
@@ -0,0 +1,2 @@
+@import "side-menu";
+@import "base";
--- a/_assets/js/main.js
+++ b/_assets/js/main.js
@@ -0,0 +1 @@
+// = require ui
--- a/_assets/js/ui.js
+++ b/_assets/js/ui.js
@@ -0,0 +1,44 @@
+(function (window, document) {
+  var layout = document.getElementById('layout');
+  var menu = document.getElementById('menu');
+  var menuLink = document.getElementById('menuLink');
+  var content = document.getElementById('main');
+
+  function toggleClass (element, className) {
+    var classes = element.className.split(/\s+/);
+    var length = classes.length;
+    var i = 0;
+
+    for (; i < length; i++) {
+      if (classes[i] === className) {
+        classes.splice(i, 1);
+        break;
+      }
+    }
+    // The className is not found
+    if (length === classes.length) {
+      classes.push(className);
+    }
+
+    element.className = classes.join(' ');
+  }
+
+  function toggleAll (e) {
+    var active = 'active';
+
+    e.preventDefault();
+    toggleClass(layout, active);
+    toggleClass(menu, active);
+    toggleClass(menuLink, active);
+  }
+
+  menuLink.onclick = function (e) {
+    toggleAll(e);
+  };
+
+  content.onclick = function (e) {
+    if (menu.className.indexOf('active') !== -1) {
+      toggleAll(e);
+    }
+  };
+}(this, this.document));
--- a/_config.yml
+++ b/_config.yml
@@ -31,6 +31,7 @@ update:
    diagram: common-flow.svg

 gems:
+  - jekyll-assets
  - jekyll-pants
  - jekyll-sitemap
  - jekyll-seo-tag
@@ -42,6 +43,9 @@ defaults:
    values:
      layout: "default"

+assets:
+  digest: true
+
 markdown: kramdown
 kramdown:
  input: Pantsdown # disable smart quotes typographic symbols
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
-    <link rel="stylesheet" href="/css/main.css">
+    {% css main %}
    {% seo %}
  </head>
  <body>
@@ -43,6 +43,6 @@
        </div>
      </div>
    </div>
-    <script src="/js/ui.js"></script>
+    {% js main %}
  </body>
 </html>
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,9 +0,0 @@
---
-layout: none
---
-
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import
-    "side-menu",
-    "base"
-;
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,46 +0,0 @@
-(function (window, document) {
-
-    var layout   = document.getElementById('layout'),
-        menu     = document.getElementById('menu'),
-        menuLink = document.getElementById('menuLink'),
-        content  = document.getElementById('main');
-
-    function toggleClass(element, className) {
-        var classes = element.className.split(/\s+/),
-            length = classes.length,
-            i = 0;
-
-        for(; i < length; i++) {
-          if (classes[i] === className) {
-            classes.splice(i, 1);
-            break;
-          }
-        }
-        // The className is not found
-        if (length === classes.length) {
-            classes.push(className);
-        }
-
-        element.className = classes.join(' ');
-    }
-
-    function toggleAll(e) {
-        var active = 'active';
-
-        e.preventDefault();
-        toggleClass(layout, active);
-        toggleClass(menu, active);
-        toggleClass(menuLink, active);
-    }
-
-    menuLink.onclick = function (e) {
-        toggleAll(e);
-    };
-
-    content.onclick = function(e) {
-        if (menu.className.indexOf('active') !== -1) {
-            toggleAll(e);
-        }
-    };
-
-}(this, this.document));