dump CSS for HackMD

config/webpack.common.js

@@ -31,7 +31,6 @@ module.exports = (options) => {
       // styles
       'styles/style':                './resource/styles/scss/style.scss',
       'styles/style-presentation':   './resource/styles/scss/style-presentation.scss',
-      'styles/style-hackmd':         './resource/styles/scss/style-hackmd.scss',
       // themes
       'styles/theme-default':        './resource/styles/scss/theme/default.scss',
       'styles/theme-default-dark':   './resource/styles/scss/theme/default-dark.scss',
@@ -39,6 +38,8 @@ module.exports = (options) => {
       'styles/theme-mono-blue':      './resource/styles/scss/theme/mono-blue.scss',
       'styles/theme-future':         './resource/styles/scss/theme/future.scss',
       'styles/theme-blue-night':     './resource/styles/scss/theme/blue-night.scss',
+      // styles for external services
+      'styles/style-hackmd':         './resource/styles/hackmd/style.scss',
     }, options.entry || {}),  // Merge with env dependent settings
     output: Object.assign({
       path: helpers.root('public'),
@@ -88,12 +89,12 @@ module.exports = (options) => {
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
-          exclude: [helpers.root('resource/styles/scss')]
+          exclude: [helpers.root('resource/styles')]
         },
         {
           test: /\.scss$/,
           use: ['style-loader', 'css-loader', 'sass-loader'],
-          exclude: [helpers.root('resource/styles/scss')]
+          exclude: [helpers.root('resource/styles')]
         },
         /*
          * File loader for supporting images, for example, in CSS files.

config/webpack.dev.js

@@ -9,6 +9,7 @@ const helpers = require('./helpers');
 /*
  * Webpack Plugins
  */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 /**
@@ -37,10 +38,23 @@ module.exports = require('./webpack.common')({
         ],
         include: [helpers.root('resource/styles/scss')]
       },
+      { // Dump CSS for HackMD
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'scss-loader',
+        ],
+        include: [helpers.root('resource/styles/hackmd')]
+      },
     ],
   },
   plugins: [
 
+    new MiniCssExtractPlugin({
+      filename: '[name].bundle.css',
+    }),
+
     new webpack.DllReferencePlugin({
       context: helpers.root(),
       manifest: require(helpers.root('public/dll', 'manifest.json')),

lib/routes/hackmd.js

@@ -17,10 +17,13 @@ module.exports = function(crowi, app) {
    * @param {object} res
    */
   const loadAgent = function(req, res) {
+    const origin = `${req.protocol}://${req.get('host')}`;
+    const styleFilePath = origin + manifest['styles/style-hackmd.css'];
 
     // generate definitions to replace
     const definitions = {
-      origin: `${req.protocol}://${req.get('host')}`
+      origin,
+      styleFilePath,
     };
     // inject
     const script = agentScriptContentTpl(definitions);

resource/js/agent-for-hackmd.js

@@ -1,7 +1,20 @@
+/**
+ * GROWI agent for HackMD
+ *
+ * This file will be transpiled as a single JS
+ *  and should be load from HackMD head via 'lib/routes/hackmd.js' route
+ *
+ * USAGE:
+ *  <script src="${hostname of GROWI}/_hackmd/load-agent"></script>
+ *
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ */
+
 /* eslint-disable no-console  */
 console.log('Loading GROWI agent for HackMD...');
 
-const allowedOrigin = '{{origin}}';
+const allowedOrigin = '{{origin}}';         // will be replaced by swig
+const styleFilePath = '{{styleFilePath}}';  // will be replaced by swig
 
 /**
  * Validate origin
@@ -9,14 +22,26 @@ const allowedOrigin = '{{origin}}';
  */
 function validateOrigin(event) {
   if (event.origin !== allowedOrigin) {
-    console.error('Rejected');
+    console.error('Rejected', 'Cause: "event.origin" and "allowedOrigin" does not match');
     return;
   }
 }
 
+function insertStyle() {
+  const element = document.createElement('link');
+  element.href = styleFilePath;
+  element.rel = 'stylesheet';
+  document.getElementsByTagName('head')[0].appendChild(element);
+}
+insertStyle();
+
 window.addEventListener('message', (event) => {
   validateOrigin(event);
   console.log('getValue called');
 });
 
+window.addEventListener('load', (event) => {
+  console.log('loaded');
+});
+
 console.log('GROWI agent for HackMD has successfully loaded.');

resource/styles/hackmd/style.scss

@@ -0,0 +1,15 @@
+.navbar-header {
+  .navbar-brand {
+    display: none;
+  }
+}
+
+.navbar-form {
+  margin-left: 15px;
+}
+
+.navbar-right {
+  .ui-new, .ui-publish {
+    display: none;
+  }
+}

resource/styles/scss/style-hackmd.scss

@@ -1,5 +0,0 @@
-.navbar-header {
-  .navbar-brand {
-    display: none;
-  }
-}