write script tags with CdnResourcesService and Swig

src/lib/service/cdn-resources-service.js

@@ -1,13 +1,18 @@
 const axios = require('axios');
+const path = require('path');
 const fs = require('graceful-fs');
 
 const helpers = require('@commons/util/helpers');
 const cdnLocalScriptRoot = 'public/js/cdn';
+const cdnLocalScriptWebRoot = '/js/cdn';
 const cdnLocalStyleRoot = 'public/styles/cdn';
+const cdnLocalStyleWebRoot = '/styles/cdn';
 
 class CdnResourcesService {
   constructor() {
-    this.logger = require('@alias/logger')('growi:service:CdnResourcesService');
+    this.logger = require('@alias/logger')('growi:service:CdnResourcesResolver');
+
+    this.noCdn = !!process.env.NO_CDN;
     this.loadMetaData();
   }
 
@@ -33,6 +38,69 @@ class CdnResourcesService {
 
     return Promise.all([promisesForScript, promisesForStyle]);
   }
+
+  /**
+   * Generate script tag string
+   *
+   * @param {Object} resource
+   * @param {boolean} noCdn
+   */
+  generateScriptTag(resource, noCdn) {
+    const attrs = [];
+    const args = resource.args || {};
+
+    if (args.async) {
+      attrs.push('async');
+    }
+    if (args.defer) {
+      attrs.push('defer');
+    }
+
+    // TODO process integrity
+
+    const url = noCdn
+      ? path.join(cdnLocalScriptWebRoot, resource.name) + '.js'
+      : resource.url;
+    return `<script src="${url}" ${attrs.join(' ')}></script>`;
+  }
+
+  getAllScriptTags() {
+    return this.cdnResources.js.map(resource => {
+      return this.generateScriptTag(resource, this.noCdn);
+    });
+  }
+
+  /**
+   * Generate style tag string
+   *
+   * @param {Object} resource
+   * @param {boolean} noCdn
+   */
+  generateStyleTag(resource, noCdn) {
+    const attrs = [];
+    const args = resource.args || {};
+
+    if (args.async) {
+      attrs.push('async');
+    }
+    if (args.defer) {
+      attrs.push('defer');
+    }
+
+    // TODO process integrity
+
+    const url = noCdn
+      ? path.join(cdnLocalStyleWebRoot, resource.name) + '.css'
+      : resource.url;
+
+    return `<link href="${url}" ${attrs.join(' ')}>`;
+  }
+
+  getAllStyleTags() {
+    return this.cdnResources.style.map(resource => {
+      return this.generateStyleTag(resource, this.noCdn);
+    });
+  }
 }
 
 module.exports = CdnResourcesService;

src/server/crowi/index.js

@@ -5,6 +5,7 @@ const debug = require('debug')('growi:crowi')
   , logger = require('@alias/logger')('growi:crowi')
   , pkg = require('@root/package.json')
   , InterceptorManager = require('@commons/service/interceptor-manager')
+  , CdnResourcesService = require('@commons/service/cdn-resources-service')
   , Xss = require('@commons/service/xss')
   , path = require('path')
   , sep = path.sep
@@ -39,6 +40,7 @@ function Crowi(rootdir) {
   this.passportService = null;
   this.globalNotificationService = null;
   this.restQiitaAPIService = null;
+  this.cdnResourcesService = new CdnResourcesService();
   this.interceptorManager = new InterceptorManager();
   this.xss = new Xss();
 

src/server/util/swigFunctions.js

@@ -5,6 +5,7 @@ module.exports = function(crowi, app, req, locals) {
     , Config = crowi.model('Config')
     , User = crowi.model('User')
     , passportService = crowi.passportService
+    , cdnResourcesService = crowi.cdnResourcesService
   ;
 
   debug('initializing swigFunctions');
@@ -57,6 +58,18 @@ module.exports = function(crowi, app, req, locals) {
     return Config.globalLang(config);
   };
 
+  locals.cdnScriptTags = function() {
+    console.log(new Date());
+    const tags = cdnResourcesService.getAllScriptTags();
+    console.log(new Date());
+    return tags.join('\n');
+  };
+
+  locals.cdnStyleTags = function() {
+    const tags = cdnResourcesService.getAllStyleTags();
+    return tags.join('\n');
+  };
+
   /**
    * return true if enabled
    */

src/server/views/layout/layout.html

@@ -27,20 +27,7 @@
     }
   </script>
 
-  <!-- jQuery, emojione, bootstrap -->
-  <script src="https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.3.1,npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
-  <!-- highlight.js -->
-  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/combine/
-gh/highlightjs/cdn-release@9.12.0/build/languages/dockerfile.min.js,
-gh/highlightjs/cdn-release@9.12.0/build/languages/go.min.js,
-gh/highlightjs/cdn-release@9.12.0/build/languages/gradle.min.js,
-gh/highlightjs/cdn-release@9.12.0/build/languages/json.min.js,
-gh/highlightjs/cdn-release@9.12.0/build/languages/less.min.js,
-gh/highlightjs/cdn-release@9.12.0/build/languages/scss.min.js,
-gh/highlightjs/cdn-release@9.12.0/build/languages/typescript.min.js,
-gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
-" defer></script>
+  {{ cdnScriptTags() }}
 
   {% if local_config.env.MATHJAX %}
     <!-- Mathjax -->