Initial commit

src/Components/Header/Header.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import styles from './Header.scss';
+
+const Header = ({ activeEditors, toggleEditors }) => {
+  return (
+    <div className={ styles.header }>
+      <div className={ styles.headerItem }><i>Beautiful</i> Atlas</div>
+      <div className={ `${styles.headerItem} ${styles.editorToggle}` }>
+        <span
+          onClick={toggleEditors.bind(this, 'MARKDOWN')}
+          className={ activeEditors.includes('MARKDOWN') ? styles.active : '' }
+        >Markdown</span>
+        <span
+          onClick={toggleEditors.bind(this, 'TEXT')}
+          className={ activeEditors.includes('TEXT') ? styles.active : '' }
+        >Text</span>
+      </div>
+      <div className={ styles.headerItem }>Versions</div>
+    </div>
+  );
+};
+
+export default Header;

src/Components/Header/Header.scss

@@ -0,0 +1,47 @@
+.header {
+  display: flex;
+  width: 100%;
+  height: 42px;
+  justify-content: space-between;
+
+  background-color: #111;
+  color: #fff;
+
+  i {
+    color: #fff;
+    font-family: serif;
+  }
+
+  .headerItem {
+    width: 150px;
+    padding: 12px 22px;
+
+    font-size: 13px;
+    font-weight: 300;
+    text-align: center;
+
+    &:first-child {
+      text-align: left;
+    }
+
+    &:last-child {
+      text-align: right;
+    }
+  }
+
+  .editorToggle {
+    span {
+      margin-right: 12px;
+      cursor: pointer;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .active {
+    text-decoration: underline;
+    text-decoration-color: #fff;
+  }
+}

src/Components/Header/index.js

@@ -0,0 +1,2 @@
+import Header from './Header';
+export default Header;

src/Components/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Codemirror from 'react-codemirror';
+import 'codemirror/mode/gfm/gfm';
+import 'codemirror/addon/edit/continuelist';
+
+import styles from './MarkdownEditor.scss';
+import './codemirror.css';
+
+class MarkdownAtlas extends React.Component {
+  static propTypes = {
+    text: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+  }
+
+  onChange = (newText) => {
+    if (newText !== this.props.text) {
+      this.props.onChange(newText);
+    }
+  }
+
+  render = () => {
+    // https://github.com/jbt/markdown-editor/blob/master/index.html
+    const options = {
+      readOnly: false,
+      lineNumbers: false,
+      mode: 'gfm',
+      matchBrackets: true,
+      lineWrapping: true,
+      viewportMargin: Infinity,
+      theme: 'atlas',
+      extraKeys: {
+        Enter: 'newlineAndIndentContinueMarkdownList',
+      },
+    };
+
+    // http://codepen.io/lubelski/pen/fnGae
+    // TODO:
+    // - Emojify
+    // -
+    return (
+      <div className={ styles.container }>
+        <Codemirror
+          value={this.props.text}
+          onChange={this.onChange}
+          options={options}
+        />
+      </div>
+    );
+  }
+}
+
+export default MarkdownAtlas;

src/Components/MarkdownEditor/MarkdownEditor.scss

@@ -0,0 +1,4 @@
+.container {
+  width: 70%;
+  margin: 48px auto;
+}

src/Components/MarkdownEditor/codemirror.css

@@ -0,0 +1,58 @@
+/*
+
+    Name:       Base16 Default Light
+    Author:     Chris Kempson (http://chriskempson.com)
+
+    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
+    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+
+@import url(https://fonts.googleapis.com/css?family=Cousine:400,700,700italic,400italic);
+
+.cm-s-atlas.CodeMirror {
+  background: #fcfcfc;
+  color: #202020;
+  font-family: 'Cousine', 'Monaco', monospace;
+  font-weight: 300;
+}
+.cm-s-atlas div.CodeMirror-selected {
+  background: #90CAF9;
+}
+
+.cm-s-atlas .CodeMirror-line::selection,
+.cm-s-atlas .CodeMirror-line > span::selection,
+.cm-s-atlas .CodeMirror-line > span > span::selection {
+  background: #90CAF9;
+}
+
+.cm-s-atlas .CodeMirror-line::-moz-selection, .cm-s-atlas .CodeMirror-line > span::-moz-selection, .cm-s-atlas .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
+.cm-s-atlas .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; }
+.cm-s-atlas .CodeMirror-guttermarker { color: #ac4142; }
+.cm-s-atlas .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
+.cm-s-atlas .CodeMirror-linenumber { color: #b0b0b0; }
+.cm-s-atlas .CodeMirror-cursor {
+  border-left: 2px solid #2196F3;
+}
+
+.cm-s-atlas span.cm-quote {
+  font-style: italic;
+}
+.cm-s-atlas span.cm-comment { color: #8f5536; }
+.cm-s-atlas span.cm-atom { color: #aa759f; }
+.cm-s-atlas span.cm-number { color: #aa759f; }
+
+.cm-s-atlas span.cm-property, .cm-s-atlas span.cm-attribute { color: #90a959; }
+.cm-s-atlas span.cm-keyword { color: #ac4142; }
+.cm-s-atlas span.cm-string { color: #f4bf75; }
+
+.cm-s-atlas span.cm-variable { color: #90a959; }
+.cm-s-atlas span.cm-variable-2 { color: #788696; }
+.cm-s-atlas span.cm-def { color: #d28445; }
+.cm-s-atlas span.cm-bracket { color: #202020; }
+.cm-s-atlas span.cm-tag { color: #ac4142; }
+.cm-s-atlas span.cm-link { color: #aa759f; }
+.cm-s-atlas span.cm-error { background: #ac4142; color: #505050; }
+
+.cm-s-atlas .CodeMirror-activeline-background { background: #DDDCDC; }
+.cm-s-atlas .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

src/Components/MarkdownEditor/index.js

@@ -0,0 +1,2 @@
+import MarkdownEditor from './MarkdownEditor';
+export default MarkdownEditor;

src/Components/TextEditor/TextEditor.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Editor from 'react-medium-editor';
+import marked from 'marked';
+
+require('medium-editor/dist/css/medium-editor.css');
+require('medium-editor/dist/css/themes/default.css');
+import styles from './TextEditor.scss';
+
+class TextEditor extends React.Component {
+  static propTypes = {
+    text: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+  }
+
+  onChange = (newText) => {
+    if (newText !== this.props.text) {
+      this.props.onChange(newText);
+    }
+  }
+
+  render = () => {
+    return (
+      <div className={ styles.container }>
+        <div></div>
+        <Editor
+          options={{
+            toolbar: {
+              buttons: [
+                'bold',
+                'italic',
+                'underline',
+                'anchor',
+                'unorderedlist',
+                'orderedlist',
+                'h1',
+                'h2',
+                'h3',
+                'quote',
+              ],
+            },
+            placeholder: false,
+          }}
+          text={marked(this.props.text)}
+          onChange={ this.onChange }
+          className={ styles.editor }
+        />
+      </div>
+    );
+  }
+}
+
+export default TextEditor;

src/Components/TextEditor/TextEditor.scss

@@ -0,0 +1,5 @@
+.editor {
+  outline: none;
+  margin: 0 0 20px 0;
+  padding: 0 0 20px 0;
+}

src/Components/TextEditor/index.js

@@ -0,0 +1,2 @@
+import TextEditor from './TextEditor';
+export default TextEditor;