Support markdown editor packaging for mac and Windows platforms

ag7 · ag7 · commit bcc755089386 · 2016-08-25T11:13:31.000+02:00
diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@ Lilt Breast App Repo.
 
 * [Users Spreadsheet](#users-spreadsheet)
 
+* [App Content Editor](#app-content-editor)
+
 ## [Mac Dev Environment Setup](#index)
 
 The following guide assumes that `node` and `npm` commands are available in the system, and Xcode is installed.
@@ -277,3 +279,40 @@ If you want to deploy the webapp elsewhere in order to use another spreadsheet,
   * "Esegui l'applicazione come": selezionare "Io" o comunque un account che ha i diritti necessari in lettura/scrittura sullo spreadsheet;
   * In "Chi accede all'applicazione" selezionare "Chiunque, inclusi utenti anonimi";
   * premere "Implementa" ed accettare eventuali richieste di autorizzazioni.
+
+
+## [App Content Editor](#index)
+
+The repository contains a simple markdown editor based on [electron](http://electron.atom.io/) inside the `markdown-editor` folder.
+
+To launch the editor from scratch:
+
+```bash
+cd markdown-editor
+npm install
+npm start
+```
+
+Next time you will use the `npm start` command only.
+
+The markdown editor allows you to edit `md` documents inside a folder.
+By default, the `./markdown` folder is used (relative to the app directory), but you can pass another folder via command-line (if you take a look at the `package.json` file you will see that `npm start` executes the editor passing the `./testdir` directory).
+
+Optionally you can show the developer tools specifying the `LILT_EDITOR_SHOW_DEVTOOLS` environment variable, and setting its value to 1.
+
+To deploy a new editor version from a Mac, make sure you have `electron-packager` installed globally:
+
+```bash
+npm install -g electron-packager
+```
+
+The `wine` command must be available too, because we are going to generate a Windows executable.
+
+At this point:
+
+* adjust the editor version in `package.json` file
+* run the `deploy.sh` script
+
+The `deploy.sh` script packages the app for mac (x64) and Windows platform.
+If everything goes well an `out` folder containing two zip files (one per platform) will be created.
+You can now git-tag the new version and upload the new release on github.
diff --git a/markdown-editor/.gitignore b/markdown-editor/.gitignore
@@ -1 +1,2 @@
 node_modules
+out
diff --git a/markdown-editor/deploy.sh b/markdown-editor/deploy.sh
@@ -0,0 +1,25 @@
+#!/bin/bash
+
+# TODO: use this script's directory instead of "./"
+# TODO: add verbose mode?
+
+# extract version from package.json
+# (https://gist.github.com/DarrenN/8c6a5b969481725a4413)
+PACKAGE_VERSION=$(cat package.json \
+  | grep version \
+  | head -1 \
+  | awk -F: '{ print $2 }' \
+  | sed 's/[",]//g' \
+  | tr -d '[[:space:]]')
+
+# create packages
+echo "Packaging app v.${PACKAGE_VERSION}.."
+electron-packager ./ --platform=darwin --arch=x64 --overwrite --out out
+electron-packager ./ --platform=win32 --arch=ia32 --overwrite --out out
+
+# zip packages
+printf "\nZipping Packages..\n"
+cd out
+for i in */; do zip -r "${i%/}-${PACKAGE_VERSION}.zip" "$i"; done
+
+printf "\nOK!"
diff --git a/markdown-editor/index.html b/markdown-editor/index.html
@@ -2,7 +2,6 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>LILT App Content Editor</title>
 
     <!-- stylesheets -->
     <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css">
diff --git a/markdown-editor/index.js b/markdown-editor/index.js
@@ -1,8 +1,11 @@
 const fs = require('fs');
-const marked = require('./ckeditor/plugins/markdown/js/marked');
-
+const marked = require('marked');
+const remote = require('electron').remote;
 
 /* ---------------- state --------------------------------------------------- */
+// default markdown directory
+const defaultMarkdownDir = './markdown';
+
 // when the overlay text is specified the editor is hidden
 let overlayText = 'Please select a document.';
 
@@ -35,13 +38,45 @@ let tree = null;
 // timer id for same tree node reselection upon multiple clicks
 let reselectTimerId = -1;
 
+// remote process variable
+const remoteProcess = remote.getGlobal('sharedArgs').proc;
+
 // shortcut method to obtain the ckeditor instance
 const editor = () => CKEDITOR.instances.editor1;
 
+// app environment detection (https://github.com/electron/electron/pull/5421)
+const isProdEnvironment = () => (remoteProcess.defaultApp === undefined);
+
+
+// return the markdown directory
+const getMarkdownDir = () => {
+  // obtain command line arguments
+  const args = remoteProcess.argv.slice(isProdEnvironment() ? 1 : 2);
+
+  if (args.length === 0) {
+    if (args.length > 1)
+      console.error('wrong arguments');  // eslint-disable-line no-console
+    return defaultMarkdownDir;
+  }
+
+  // we expect the markdown dir as the only parameter
+  return args[0];
+};
+
+
 // walk through a directory tree and return a JS object that will be used to
 // initialize the treeview sidebar
 const walk = (dir) => {
   const tree = [];
+
+  try {
+    fs.statSync(dir).isDirectory();
+  }
+  catch (err) {
+    overlayText = 'Cannot find markdown directory';
+    return tree;
+  }
+
   fs.readdirSync(dir).forEach((f) => {
     const path = dir + '/' + f;
     if (fs.statSync(path).isDirectory())
@@ -194,7 +229,7 @@ $(document).ready(() => {
     color: "#428BCA",
     expandIcon: 'glyphicon glyphicon-folder-close',
     collapseIcon: 'glyphicon glyphicon-folder-open',
-    data: walk('./testdir'),
+    data: walk(getMarkdownDir()),
     onNodeSelected,
     onNodeUnselected,
     onNodeCollapsed: update,
diff --git a/markdown-editor/main.js b/markdown-editor/main.js
@@ -2,6 +2,9 @@
 
 const { app, BrowserWindow } = require('electron');
 
+// sharedArgs is a global object shared with browser windows
+global.sharedArgs = { proc: process };
+
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -10,13 +13,19 @@ let win;
 
 function createWindow() {
   // Create the browser window.
-  win = new BrowserWindow({ width: 800, height: 600 });
+  win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    title: 'LILT App Content Editor v.' + app.getVersion(),
+  });
 
   // and load the index.html of the app.
   win.loadURL(`file://${__dirname}/index.html`);
 
   // Open the DevTools.
-  win.webContents.openDevTools();
+  if (process.env.LILT_EDITOR_SHOW_DEVTOOLS &&
+        process.env.LILT_EDITOR_SHOW_DEVTOOLS === 1)
+    win.webContents.openDevTools();
 
   // Emitted when the window is closed.
   win.on('closed', () => {
diff --git a/markdown-editor/package.json b/markdown-editor/package.json
@@ -1,18 +1,19 @@
 {
-  "name": "lilt-markdown-editor",
-  "version": "0.1.0",
+  "name": "lilt_app_content_editor",
+  "version": "1.0.0",
   "main": "main.js",
   "scripts": {
-    "start": "./node_modules/.bin/electron ."
+    "start": "LILT_EDITOR_SHOW_DEVTOOLS=1 ./node_modules/.bin/electron . ./testdir"
   },
   "devDependencies": {
-    "electron-prebuilt": "~1.2.0",
+    "electron-prebuilt": "1.2.8",
     "babel-eslint": "^6.1.0",
     "eslint": "^3.1.1"
   },
   "dependencies": {
-    "bootstrap": "^3.3.7",
-    "bootstrap-treeview": "^1.2.0",
-    "jquery": "^3.1.0"
+    "bootstrap": "~3.3.7",
+    "bootstrap-treeview": "~1.2.0",
+    "jquery": "~3.1.0",
+    "marked": "~0.3.6"
   }
 }
