Workaround browser code to allow for server-side rendering.

frontend/package.json

@@ -16,6 +16,8 @@
     "highlight.js": "8.3.0",
     "isomorphic-fetch": "^2.2.1",
     "marked": "0.3.3",
+    "node-localstorage": "^1.3.0",
+    "node-uuid": "^1.4.7",
     "nunjucks": "^2.5.0",
     "react": "^15.3.0",
     "react-bootstrap": "^0.30.1",
@@ -73,7 +75,11 @@
   },
   "browser": "./src/index.js",
   "babel": {
-    "presets": ["es2015", "react", "stage-0"],
+    "presets": [
+      "es2015",
+      "react",
+      "stage-0"
+    ],
     "sourceMaps": true
   },
   "scripts": {

frontend/src/theme_manager.js

@@ -39,7 +39,8 @@ class ThemeManager {
     }
 
     static getCurrentTheme() {
-        return UserInfo.getUserInfo("theme") || document.body.classList[0] || "evening";
+        // TODO: Make function more friendly to server-side rendering via use of redux stores instead.
+        return UserInfo.getUserInfo("theme") || (typeof document !== "undefined" && document.body.classList[0]) || "evening";
     }
 
     static getEditorTheme() {

frontend/src/user_info.js

@@ -6,6 +6,23 @@ User preferences via local storage
 @author Dorian Pula [dorian.pula@amber-penguin-software.ca]
 */
 
+
+if (typeof localStorage === "undefined" || localStorage === null) {
+    var LocalStorage = require("node-localstorage").LocalStorage;
+    // TODO: Change out mechanism to use other persistance setup.
+    var FileSystem = require("fs");
+    var UUID = require("node-uuid");
+    let tempDirPath = "/tmp/rookeries";
+    try {
+        FileSystem.statSync(tempDirPath).isDirectory();
+    } catch (e) {
+        console.log(`Creating temporary directory: ${tempDirPath}`);
+        FileSystem.mkdirSync(tempDirPath);
+    }
+    global.localStorage = new LocalStorage(`${tempDirPath}/scratch-${UUID.v4()}`);
+}
+
+
 export class UserInfo {
     static getInitialInfo() {
         return {

frontend/src/views/code_editor.js

@@ -0,0 +1,39 @@
+/*
+ Wrapper around react-codemirror to handle server-side rendering issues.
+
+ @copyright (c) Copyright 2013-2016 Dorian Pula
+ @license AGPL v3
+ @author Dorian Pula [dorian.pula@amber-penguin-software.ca]
+ */
+
+
+import React from "react";
+
+/*
+ Remember to install codemirror before react-codemirror,
+ see issue https://github.com/JedWatson/react-codemirror/issues/34
+ Also add in the themes in the CSS to get proper theming support.
+ */
+import CodeMirror from "react-codemirror";
+// TODO: Figure out how to work around this import.
+
+// Workaround for rendering CodeMirror server-side
+if (typeof(navigator) !== 'undefined') {
+    require("codemirror/mode/markdown/markdown");
+}
+
+
+class CodeEditor extends React.Component {
+    render() {
+        let code = this.props.code;
+        let options = {mode: this.props.language, theme: this.props.theme};
+
+        // TODO: Improve workaround when rendering React CodeMirror on the server.
+        // TODO: Add patch to resolve issue at https://github.com/JedWatson/react-codemirror/issues
+        // TODO: Resolve issues with rendering Code Mirror componnets.
+        return (<CodeMirror value={ code } onChange={ this.handleUpdateCode } options={ options }/>);
+    }
+}
+
+
+export {CodeEditor};

frontend/src/views/journal_markdown_viewer.js

@@ -17,14 +17,7 @@ import FontAwesome from "react-fontawesome";
 
 import {fetchArticle, saveArticle} from '../actions';
 import {appStore} from "../stores";
-
+import {CodeEditor} from "./code_editor";
-/*
-    Remember to install codemirror before react-codemirror,
-    see issue https://github.com/JedWatson/react-codemirror/issues/34
-    Also add in the themes in the CSS to get proper theming support.
-*/
-import CodeMirror from "react-codemirror";
-import "codemirror/mode/markdown/markdown";
 
 
 // # TODO Remove and rework to allow for two flags, rather than a single state?
@@ -125,7 +118,6 @@ export class JournalMarkdownView extends React.Component {
         let rawMarkup = marked(code, {sanitized: true, highlight: (code) => {
             return highlighter.highlightAuto(code).value;
         }});
-        let options = {mode: "markdown", theme: this.props.editorTheme};
 
         // # TODO Factor the view into something nicer.
         let showEditorButton = (
@@ -133,10 +125,11 @@ export class JournalMarkdownView extends React.Component {
                 <FontAwesome name="edit"/> Edit
             </Button>
         );
-        // # TODO Add in ability to display messages outside the collapsible pane
+
+        // # TODO Add in ability to display mhessages outside the collapsible pane
         let showPanel = (
             <Panel collapsible expanded={ this.isEditorPaneOpen() }>
-                <CodeMirror value={ code } onChange={ this.handleUpdateCode } options={ options } />
+                <CodeEditor code={ code } onChange={ this.handleUpdateCode } language="markdown" theme={ this.props.editorTheme } />
                 <Button onClick={ this.handleSaveContent }><FontAwesome name="save"/> Save </Button>
                 <Button onClick={ this.handleResetContent }><FontAwesome name="undo"/> Reset </Button>
             </Panel>