Refactory editor

Author: lepture

Gruntfile.js

@@ -8,37 +8,6 @@ module.exports = function(grunt) {
 
   grunt.initConfig({
     pkg: pkg,
-    jshint: {
-      all: [
-        'Gruntfile.js',
-        'src/*.js'
-      ],
-      options: {
-        "eqeqeq": true,
-        "forin": false,
-        "latedef": false,
-        "newcap": true,
-        "quotmark": false,
-        "undef": false,
-        "unused": false,
-        "trailing": true,
-        "lastsemic": true,
-        "asi": false,
-        "boss": true,
-        "expr": true,
-        "strict": false,
-        "funcscope": true,
-        "loopfunc": true,
-        "multistr": true,
-        "proto": false,
-        "smarttabs": true,
-        "shadow": false,
-        "sub": true,
-        "passfail": false,
-        "node": true,
-        "white": false
-      }
-    },
     connect: {
       livereload: {
         options: {
@@ -55,62 +24,67 @@ module.exports = function(grunt) {
     },
     watch: {
       editor: {
-        files: ['src/*'],
+        files: ['*.css', 'src/*'],
         tasks: ['transport'],
         options: {
           livereload: true
         }
       }
     },
-    generate: {
+    transport: {
       seajs: {
         options: {
-          buildir: 'tmp/src',
+          dest: 'tmp/src/editor.js',
           header: 'define(function(require, exports, module) {',
           footer: [
             'module.exports = Editor',
             '});'
           ].join('\n')
-        },
-        filename: 'editor.js'
+        }
       },
-      window: {
-        filename: 'js/editor.js'
-      }
+      component: {
+        options: {
+          dest: 'index.js',
+          header: '',
+          footer: 'module.exports = Editor'
+        }
+      },
+      window: {}
     }
   });
 
   grunt.registerTask('concat', function() {
-    var data = grunt.file.read('codemirror/codemirror.js');
+    var data = grunt.file.read('vendor/codemirror.js');
     data = data.replace('window.CodeMirror', 'var CodeMirror');
     ['continuelist', 'xml', 'markdown'].forEach(function(name) {
-      data += '\n' + grunt.file.read('codemirror/' + name + '.js');
+      data += '\n' + grunt.file.read('vendor/' + name + '.js');
     });
     data += '\n' + grunt.file.read('src/editor.js');
     grunt.file.write('tmp/editor.js', data);
   });
 
-  grunt.registerMultiTask('generate', function() {
+  grunt.registerMultiTask('transport', function() {
     var options = this.options({
-      buildir: 'build',
+      src: 'tmp/editor.js',
+      dest: 'build/editor.js',
       header: '(function(global) {',
       footer: 'global.Editor = Editor;\n})(this);'
     });
-    var data = grunt.file.read('tmp/editor.js');
+    var data = grunt.file.read(options.src);
     data = [options.header, data, options.footer].join('\n');
-    grunt.file.write(path.join(options.buildir, this.data.filename), data);
+    grunt.file.write(options.dest, data);
   });
 
   grunt.registerTask('copy', function() {
-    var dir = 'icomoon/fonts';
+    var dir = 'vendor/icomoon/fonts';
     grunt.file.recurse(dir, function(fpath) {
       var fname = path.relative(dir, fpath);
-      grunt.file.copy(fpath, path.join('build', 'css', 'fonts', fname));
+      grunt.file.copy(fpath, path.join('build', 'fonts', fname));
     });
-    var data = grunt.file.read('icomoon/style.css');
-    data += grunt.file.read('src/paper.css');
-    data += grunt.file.read('src/editor.css');
-    grunt.file.write('build/css/editor.css', data);
+    var data = grunt.file.read('vendor/icomoon/style.css');
+    data += grunt.file.read('paper.css');
+    data += grunt.file.read('editor.css');
+    grunt.file.write('build/editor.css', data);
     grunt.file.copy('docs/index.html', 'build/index.html');
     grunt.file.copy('docs/markdown.html', 'build/markdown.html');
     grunt.file.copy('docs/yue.css', 'build/yue.css');
@@ -120,7 +94,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-watch');
 
-  grunt.registerTask('transport', ['concat', 'generate:window', 'copy']);
-  grunt.registerTask('server', ['transport', 'connect', 'watch']);
-  grunt.registerTask('default', ['jshint', 'server']);
+  grunt.registerTask('build', ['concat', 'transport:window', 'copy']);
+  grunt.registerTask('server', ['build', 'connect', 'watch']);
+  grunt.registerTask('default', ['server']);
 };

Makefile

@@ -0,0 +1,11 @@
+
+build: components index.js editor.css
+	@component build --dev
+
+components: component.json
+	@component install --dev
+
+clean:
+	rm -fr build components template.js
+
+.PHONY: clean

README.md

@@ -6,8 +6,6 @@
 
 Editor is not a WYSIWYG editor, it is a plain text markdown editor. Thanks for the great project [codemirror](http://codemirror.net/), without which editor can never be created.
 
-![Editor Preview](./docs/preview.png)
-
 ## Basic Usage
 
 The easiest way to use Editor is to simply load the script and stylesheet:
@@ -87,4 +85,4 @@ Permission is hereby granted, free of charge to any noncommercial projects (paid
 
 The above copyright notice and this permission notice shall be included in all copies of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

component.json

@@ -0,0 +1,18 @@
+{
+  "name": "editor",
+  "repo": "lepture/editor",
+  "description": "A markdown editor you really want.",
+  "version": "0.1.0",
+  "keywords": [],
+  "dependencies": {},
+  "development": {},
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": [
+    "index.js"
+  ],
+  "styles": [
+    "editor.css",
+    "paper.css"
+  ]
+}

docs/index.html

@@ -17,14 +17,14 @@
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
       })();
     </script>
-    <script type="text/javascript" src="js/editor.js"></script>
-    <link rel="stylesheet" href="css/editor.css" />
+    <script type="text/javascript" src="editor.js"></script>
+    <link rel="stylesheet" href="editor.css" />
     <title>Editor</title>
     <style type="text/css">
       body {
         padding: 0;
         margin: 0;
-        background-color: #f9f9f5;
+        background-color: #f9f9f7;
       }
       .editor-wrapper {
         max-width: 680px;

docs/markdown.html

@@ -2,9 +2,24 @@
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<meta name="viewport" content="width=device-width">
 <title>Markdown</title>
 <link rel="stylesheet" href="yue.css" />
+<style type="text/css">
+  body {
+    margin: 0;
+    padding: 0.4em 1em 6em;
+    background: #f9f9f7;
+  }
+  .yue {
+    max-width: 650px;
+    *width: 650px;
+    margin: 0 auto;
+  }
+  .entry-title {
+    text-align: center;
+  }
+</style>
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-21475122-5']);
@@ -23,7 +38,7 @@
 </head>
 <body>
 <div class="yue">
-<h1>Markdown</h1>
+<h1 class="entry-title">Markdown</h1>
 
 <hr />