Replaced jekyll css and js bundling with webpack

javascript_asset_tag does not support ES6 and throws errors

Signed-off-by: Ihor Aleksandrychiev <ihor.aleksandrychiev@northern.tech>

generator/.gitignore

@@ -6,4 +6,4 @@ _generated/*
 /pages/*
 *.pyc
 .DS_Store
-
+node_modules

generator/_assets/js/custom.js

@@ -1,4 +1,6 @@
 'use strict';
+import '../styles/cfengine.less';
+
 var is_mobile = true;
 $(document).ready(function() {
     if ($(window).width() > 800)

generator/_assets/styles/less/dropdown.less

@@ -23,7 +23,7 @@
     }
 
     &:after {
-      content: url("../media/images/chevron-down.svg");
+      content: url("../../../media/images/chevron-down.svg");
       position: absolute;
       right: 9px;
       top: 50%;
@@ -69,7 +69,7 @@
 
       &[selected="selected"] {
         &:after {
-          content: url("../media/images/check.svg");
+          content: url("../../../media/images/check.svg");
           position: absolute;
           left: 1.4rem;
         }

generator/_assets/styles/less/font.less

@@ -1,56 +1,56 @@
 // bootstrap icons
-@import 'node_modules/bootstrap-icons/font/bootstrap-icons.css';
+@import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';
 
 // red hat display
-@import "node_modules/@fontsource/red-hat-display/300.css";
-@import "node_modules/@fontsource/red-hat-display/300-italic.css";
-@import "node_modules/@fontsource/red-hat-display/400.css";
-@import "node_modules/@fontsource/red-hat-display/400-italic.css";
-@import "node_modules/@fontsource/red-hat-display/500.css";
-@import "node_modules/@fontsource/red-hat-display/500-italic.css";
-@import "node_modules/@fontsource/red-hat-display/600.css";
-@import "node_modules/@fontsource/red-hat-display/600-italic.css";
-@import "node_modules/@fontsource/red-hat-display/700.css";
-@import "node_modules/@fontsource/red-hat-display/700-italic.css";
-@import "node_modules/@fontsource/red-hat-display/800.css";
-@import "node_modules/@fontsource/red-hat-display/800-italic.css";
-@import "node_modules/@fontsource/red-hat-display/900.css";
-@import "node_modules/@fontsource/red-hat-display/900-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/300.css";
+@import "../node_modules/@fontsource/red-hat-display/300-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/400.css";
+@import "../node_modules/@fontsource/red-hat-display/400-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/500.css";
+@import "../node_modules/@fontsource/red-hat-display/500-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/600.css";
+@import "../node_modules/@fontsource/red-hat-display/600-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/700.css";
+@import "../node_modules/@fontsource/red-hat-display/700-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/800.css";
+@import "../node_modules/@fontsource/red-hat-display/800-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/900.css";
+@import "../node_modules/@fontsource/red-hat-display/900-italic.css";
 
 // red hat text
-@import "node_modules/@fontsource/red-hat-text/300.css";
-@import "node_modules/@fontsource/red-hat-text/300-italic.css";
-@import "node_modules/@fontsource/red-hat-text/400.css";
-@import "node_modules/@fontsource/red-hat-text/400-italic.css";
-@import "node_modules/@fontsource/red-hat-text/500.css";
-@import "node_modules/@fontsource/red-hat-text/500-italic.css";
-@import "node_modules/@fontsource/red-hat-text/600.css";
-@import "node_modules/@fontsource/red-hat-text/600-italic.css";
-@import "node_modules/@fontsource/red-hat-text/700.css";
-@import "node_modules/@fontsource/red-hat-text/700-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/300.css";
+@import "../node_modules/@fontsource/red-hat-text/300-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/400.css";
+@import "../node_modules/@fontsource/red-hat-text/400-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/500.css";
+@import "../node_modules/@fontsource/red-hat-text/500-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/600.css";
+@import "../node_modules/@fontsource/red-hat-text/600-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/700.css";
+@import "../node_modules/@fontsource/red-hat-text/700-italic.css";
 
 // red hat mono
-@import "node_modules/@fontsource/red-hat-mono/300.css";
-@import "node_modules/@fontsource/red-hat-mono/300-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/400.css";
-@import "node_modules/@fontsource/red-hat-mono/400-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/500.css";
-@import "node_modules/@fontsource/red-hat-mono/500-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/600.css";
-@import "node_modules/@fontsource/red-hat-mono/600-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/700.css";
-@import "node_modules/@fontsource/red-hat-mono/700-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/300.css";
+@import "../node_modules/@fontsource/red-hat-mono/300-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/400.css";
+@import "../node_modules/@fontsource/red-hat-mono/400-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/500.css";
+@import "../node_modules/@fontsource/red-hat-mono/500-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/600.css";
+@import "../node_modules/@fontsource/red-hat-mono/600-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/700.css";
+@import "../node_modules/@fontsource/red-hat-mono/700-italic.css";
 
 // roboto
-@import "node_modules/@fontsource/roboto/100.css";
-@import "node_modules/@fontsource/roboto/100-italic.css";
-@import "node_modules/@fontsource/roboto/300.css";
-@import "node_modules/@fontsource/roboto/300-italic.css";
-@import "node_modules/@fontsource/roboto/400.css";
-@import "node_modules/@fontsource/roboto/400-italic.css";
-@import "node_modules/@fontsource/roboto/500.css";
-@import "node_modules/@fontsource/roboto/500-italic.css";
-@import "node_modules/@fontsource/roboto/700.css";
-@import "node_modules/@fontsource/roboto/700-italic.css";
-@import "node_modules/@fontsource/roboto/900.css";
-@import "node_modules/@fontsource/roboto/900-italic.css";
+@import "../node_modules/@fontsource/roboto/100.css";
+@import "../node_modules/@fontsource/roboto/100-italic.css";
+@import "../node_modules/@fontsource/roboto/300.css";
+@import "../node_modules/@fontsource/roboto/300-italic.css";
+@import "../node_modules/@fontsource/roboto/400.css";
+@import "../node_modules/@fontsource/roboto/400-italic.css";
+@import "../node_modules/@fontsource/roboto/500.css";
+@import "../node_modules/@fontsource/roboto/500-italic.css";
+@import "../node_modules/@fontsource/roboto/700.css";
+@import "../node_modules/@fontsource/roboto/700-italic.css";
+@import "../node_modules/@fontsource/roboto/900.css";
+@import "../node_modules/@fontsource/roboto/900-italic.css";

generator/_assets/styles/less/header.less

@@ -126,7 +126,7 @@
         right: 2.1rem;
         top: 50%;
         transform: translateY(-50%);
-        background-image: url("./../media/images/zoom-in.svg");
+        background-image: url("./../../../media/images/zoom-in.svg");
         background-repeat: no-repeat;
         width: 24px;
         height: 24px;

generator/_assets/styles/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@fontsource/red-hat-display": "^5.0.18",
+    "@fontsource/red-hat-mono": "^5.0.16",
+    "@fontsource/red-hat-text": "^5.0.16",
+    "@fontsource/roboto": "^5.0.8",
+    "bootstrap-icons": "^1.11.2"
+  }
+}

generator/_includes/footer.html

@@ -11,12 +11,4 @@
     </div>
 </footer>
 <div id="overlay"></div>
-{% javascript_asset_tag footer %}
-- _assets/js/google_analytics_search.js
-- _assets/js/jquery-1.9.1.min.js
-- _assets/js/jquery-migrate-1.2.1.min.js
-- _assets/js/jquery.sidr.min.js
-- _assets/js/jquery.hammer.min.js
-- _assets/js/custom.js
-- _assets/js/dropdown.js
-{% endjavascript_asset_tag %}
+<script src="assets/bundle.min.js?v={{site.time | date_to_xmlschema}}" type="text/javascript"></script>

generator/_includes/head.html

@@ -25,7 +25,5 @@
         <meta name="twitter:image" content="https://docs.cfengine.com/docs/master/media/images/agent_white_background.png">
 
         <link rel="canonical" href="https://docs.cfengine.com/latest/{{ page.url | remove: '/pages/' | replace: '/', '-' }}">
-        {% css_asset_tag global %}
-        - _assets/css/styles.min.css
-        {% endcss_asset_tag %}
+        <link href='assets/styles.min.css?v={{site.time | date_to_xmlschema}}' rel='stylesheet' type='text/css' media='screen,print' />
     </head>

generator/build/main.sh

@@ -115,8 +115,6 @@ source ~/.rvm/scripts/rvm
 
 export LC_ALL=C.UTF-8
 
-$(which npx) -y -p less lessc --compress  $WRKDIR/documentation/generator/_assets/styles/cfengine.less $WRKDIR/documentation/generator/_assets/css/styles.min.css
-
 # finally, run actual jekyll
 echo "+ bash -x ./_scripts/_run_jekyll.sh $BRANCH || exit 6"
 bash -x ./_scripts/_run_jekyll.sh $BRANCH || exit 6
@@ -125,4 +123,7 @@ cd $WRKDIR/documentation/generator/build/search
 $(which npm) i
 $(which node) createIndex.js
 cp -rf ./searchIndex ./../../_site/assets/
-npm install --prefix $WRKDIR/documentation/generator/_site/assets bootstrap-icons  @fontsource/red-hat-display @fontsource/red-hat-text @fontsource/red-hat-mono @fontsource/roboto
+npm ci --prefix $WRKDIR/documentation/generator/_assets/styles
+cd $WRKDIR/documentation/generator
+npm ci
+node_modules/.bin/webpack-cli --config webpack.config.js --mode production