Merge pull request #24 from bustlelabs/summertime

Summertime

.gitignore

@@ -15,6 +15,7 @@ coverage
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
+.env
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
@@ -33,4 +34,6 @@ bower_components
 
 # Builds
 keys.txt
-export.sh
+export.sh
+dist/
+tmp/

.jshintrc

@@ -95,6 +95,8 @@
   // to your app that hang off `window`.
 
   "predef": [
-    "define" // amd loader
+    "define", // amd loader
+    "$",
+    "QUnit"
   ]
-}
+}

.npmignore

@@ -0,0 +1,4 @@
+bower_components/
+node_modules/
+tmp/
+tests/

.travis.yml

@@ -1,5 +1,28 @@
+---
 language: node_js
 node_js:
-  - "0.10"
-notifications:
-  email: false
+  - "0.12"
+
+sudo: false
+
+cache:
+  directories:
+    - node_modules
+
+before_install:
+  # See https://mediocre.com/forum/topics/phantomjs-2-and-travis-ci-we-beat-our-heads-against-a-wall-so-you-dont-have-to
+  # modified to not use sudo (just puts $PWD on the path so that $PWD/phantomjs is the phantom used
+  - wget https://s3.amazonaws.com/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2
+  - tar -xjf phantomjs-2.0.0-ubuntu-12.04.tar.bz2
+  - export PATH=$PWD:$PATH
+  - "npm config set spin false"
+  - "npm install -g npm@^2"
+
+install:
+  - npm install -g broccoli-cli
+  - npm install -g bower
+  - bower install
+  - npm install
+
+script:
+  - npm test

Brocfile.js

@@ -0,0 +1,34 @@
+/* jshint node:true */
+
+var builder = require('broccoli-multi-builder');
+var mergeTrees = require('broccoli-merge-trees');
+var testTreeBuilder = require('broccoli-test-builder');
+var styles = require('./broccoli/styles');
+var demo = require('./broccoli/demo');
+var jquery = require('./broccoli/jquery');
+
+var vendoredModules = [
+  {name: 'content-kit-utils', options: {libDirName: 'src'}}
+];
+var packageName = require('./package.json').name;
+
+var buildOptions = {
+  libDirName: 'src/js',
+  vendoredModules: vendoredModules,
+  packageName: packageName
+};
+
+var testTree = testTreeBuilder.build({libDirName: 'src'});
+testTree = jquery.build(testTree, '/tests/jquery');
+var demoTree = demo();
+demoTree = jquery.build(demoTree, '/demo/jquery');
+
+module.exports = mergeTrees([
+  builder.build('amd', buildOptions),
+  builder.build('global', buildOptions),
+  // FIXME Later we may want to bring back the commonjs build
+  // builder.build('commonjs', buildOptions),
+  styles(),
+  demoTree,
+  testTree
+]);

MOBILEDOC.md

@@ -0,0 +1,93 @@
+# mobiledoc format
+
+mobiledoc is the output format that content-kit-editor produces.
+It aims to be a terse format that is efficiently transferred over the wire
+for a client (be it web or native) to render.
+
+## goals for mobiledoc
+
+### efficient to transfer
+
+The mobiledoc format is intended to be simple and fairly terse so that it compresses as well or better than HTML.
+
+### platform-agnostic
+
+mobiledoc is intended to be largely platform-agnostic. Sample use cases:
+
+  * A web app downloads an article in mobiledoc format via ajax and uses the mobiledoc-dom-renderer to render and display it
+  * An Ember app is running server-side via fastboot and needs to generate HTML server-side for SEO purposes. It uses the mobiledoc-html-renderer to turn a mobiledoc article that it retrieves from the API into an HTML string
+  * A native iOS app downloads an article in mobiledoc format and uses a custom renderer to generate a native view to display the article
+
+In all the above cases, the input is the same: An article in mobiledoc format, provided via an api.
+
+### content-focused
+
+mobiledoc is primarily intended to be used for news-related content such as articles and blog posts. It is deliberately simple, and organizes its content in an array of "sections" that are considered as individual blocks of content.
+
+There is not currently any concept of layout or design built into the format. It is up to the renderer to generate a display appropriate for its context. On mobile this may mean each section is full-width and they are displayed sequentially. On larger displays the sections may be rendered side-by-side. mobiledoc makes no prescription for output display.
+
+### extensible
+
+mobiledoc should be open for extension with custom types (called "cards") that bring their own configuration, and possibly their own renderers. Primary renderers (the dom, html, native, etc renderers) should be able to gracefully handle cards that they cannot natively render.
+
+## format specification
+
+mobiledoc format is an array with two elements: `markerTypes` and `sections`. The marker types describe all of the possible `markups` that may be applied to `markers` within the sectionssection.
+
+#### markupTypes
+
+A `markupType` is an array of 1 or 2 items: `[markerTypes, sections]`. The first item in the array is the type of markup, typically a tagName (such as `"B"`). The markupType can optionally have a second item in its array, which is an array of `attributes` to be applied to it. The attributes are listed as `propName`, `propValue` in the array. Each `nth` item in the array is a propName and each `(n+1)th` item in the array is that propName's propValue.
+
+Example markupTypes:
+
+  * Bold tag: `["B"]`
+  * Anchor tag linking to this repository: `["A", ["href", "http://github.com/bustlelabs/content-kit-editor"]]`
+  * Anchor tag linking to this repository and with `target="_blank"`: `["A", ["href", "http://github.com/bustlelabs/content-kit-editor", "target", "_blank"]]`
+
+#### sections
+
+A section is an array of three items: `[sectionType, tagName, markers]`. `sectionType` defines the type of block section that this is. The only supported type now is `1`. `tagName` is the name of the block tag to use. H1-H6 and P are possible values. `markers` is an array of the content within that section, separated by the markup that is to be applied to it.
+
+#### markers in sections
+
+A marker is an array of three items: `[openingMarkupTypes, closingMarkupCount, value]`. `openingMarkupTypes` is an array of the indexes of the `markupTypes` to apply to this marker, `closingMarkupCount` is how many markup types are closing at the end of this marker, and `value` is the text value inside the marker.
+
+Assuming these `markerTypes`:
+```
+markerTypes = [
+  ["B"],  // index 0
+  ["I"],  // index 1
+  ["A", ["href", "google.com"]],  // index 2
+]
+```
+
+And this section:
+
+```
+section = [
+  1,   // type of section
+  "P", // tagName of section
+  [    // markers
+    [
+      [1],  // open marker type of index 1 (italics)
+      0,    // close 0 open markers
+      'italicized'  // the text value
+    ],
+    [
+      [0],  // open marker type of index 0 (bold)
+      1,    // close 1 markerType (the most-recently opened marker type (bold) will be closed)
+      'bold + italicized'
+    ],
+    [
+      [],  // open no marker types
+      1,   // close 1 marker type (in this case, italics)
+      'only italicized'
+    ],
+    [
+      [2],  // start the A tag
+      1,    // and close it after this text
+      'I am a link'
+    ]
+  ]
+]
+```

README.md

@@ -1,30 +1,135 @@
-# ContentKit-Editor [![Build Status](https://travis-ci.org/bustlelabs/content-kit-editor.svg?branch=master)](https://travis-ci.org/bustlelabs/content-kit-editor)
-### A modern, minimalist WYSIWYG editor.
+## ContentKit-Editor [![Build Status](https://travis-ci.org/bustlelabs/content-kit-editor.svg?branch=master)](https://travis-ci.org/bustlelabs/content-kit-editor)
 
-*Currently under heavy active development.  API subject to change.*
+ContentKit is a modern WYSIWYG editor supporting interactive cards. Try a
+demo at [http://content-kit.herokuapp.com/](http://content-kit.herokuapp.com/).
 
-## Live Demo
-[http://content-kit.herokuapp.com/](http://content-kit.herokuapp.com/)
+ContentKit articles (we will use the term article, but any kind of content could
+be authored) are built from models. Models represent rows of content, and can
+be static or dynamic.
+
+For example, the teardown of an article might look like:
+**FIXME** this needs to be updated:
+
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│                                 ┌──────────┐                                 │
+│                                 │ Article  │                                 │
+│                                 └──────────┘                                 │
+│┌────────────────────────────────────────────────────────────────────────────┐│
+││                              ┌──────────────┐                              ││
+││                              │ MarkupModel  │                              ││
+││                              └──────────────┘                              ││
+││ <h2>One Weird Trick</h2>                                                   ││
+│└────────────────────────────────────────────────────────────────────────────┘│
+│┌────────────────────────────────────────────────────────────────────────────┐│
+││                              ┌──────────────┐                              ││
+││                              │  BlockModel  │                              ││
+││                              └──────────────┘                              ││
+││ <p>                                                                        ││
+││   You will never guess what <i>happens</i>                                 ││
+││   when these cats take a <b>bath</b>                                       ││
+││ </p>                                                                       ││
+│└────────────────────────────────────────────────────────────────────────────┘│
+│┌────────────────────────────────────────────────────────────────────────────┐│
+││                              ┌──────────────┐                              ││
+││                              │  EmbedModel  │                              ││
+││                              └──────────────┘                              ││
+││ <img src="http://some-cdn.com/uploaded.jpg" />                             ││
+││ <!-- this HTML is generated by the embed API endpoint at edit-time -->     ││
+│└────────────────────────────────────────────────────────────────────────────┘│
+│┌────────────────────────────────────────────────────────────────────────────┐│
+││                         ┌────────────────────────┐                         ││
+││                         │ BlockModel (type CARD) │                         ││
+││                         └────────────────────────┘                         ││
+││ node.innerHTML = 'Cards can change content at render time. For example,    ││
+││ use an Ember component';                                                   ││
+│└────────────────────────────────────────────────────────────────────────────┘│
+└──────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Usage
+
+ContentKit is attached to a DOM node when the `Editor` factory is instantiated.
+
+```js
+var editor = new ContentKit.Editor(this.element, options);
+```
+
+`options` is an object which may include the following properties:
+
+* `stickyToolbar` - a boolean option enabling a persistent header with
+  formatting tools. Default is true for touch devices.
+* `placeholder` - default text to show before a user starts typing.
+* `spellcheck` - a boolean option enabling spellcheck. Default is true.
+* `autofocus` - a boolean option for grabbing input focus when an editor is
+  rendered.
+* `serverHost` - a URL prefix for embed and image API request. **[FIXME Remove]**
+* `cards` - an object describing available cards.
+
+### Public Editor API
+
+* `editor.loadPost(post)` - render the editor with a post. **[FIXME Implement]**
+* `editor.serializePost()` - serialize the current post for persistence. **[FIXME Implement]**
+
+### Deploy the demo website
+
+The demo website is hosted at github pages.
+To publish a new version do:
+
+  * `npm run build-website`. This builds the website into `website/` and commits it
+  * `npm run deploy-website`. Pushes the `website/` subtree to the `gh-pages` branch at github
+
+Visit [http://bustlelabs.github.io/content-kit-editor/demo](http://bustlelabs.github.io/content-kit-editor/demo).
+
+### Contributing
+
+Running ContentKit tests and demo server locally requires the following dependencies:
 
-## Prerequisites
 * [node.js](http://nodejs.org/) ([install package](http://nodejs.org/download/)) or `brew install node`
+* `broccoli`, via `npm install -g broccoli-cli`
+
+### Tests
+
+Install npm and bower:
+
+  * `bower i i`
+  * `npm i`
+
+Run tests via the built-in broccoli server:
+
+  * `npm run serve`
+  * `open http://localhost:4200/tests`
+
+Or run tests via testem:
+
+  * `npm test`
+
+To view the demo:
+
+  * `broccoli serve`
+  * open http://localhost:4200/demo
+  * (Note that image uploads and embeds are not currently working)
+
+#### To Do
+
+Bring back image uploads and embed. Notes below:
+
+For uploads and embeds to work, you will have to configure AWS and
+Embedly keys as environment variables:
 
-## Server Configuration (optional)
-For uploads and embeds to work, you will have to configure AWS and Embedly keys as environment variables:
 ```bash
 export AWS_ACCESS_KEY_ID=XXXXXX
 export AWS_SECRET_ACCESS_KEY=XXXXXX
 export EMBEDLY_KEY=XXXXXX
 ```
-Also, set the `bucketName` in `server/config.json` with the name of your AWS S3 bucket for uploading files. 
 
-## Playing
-1. Install dependencies: `npm install`
-2. Build: `gulp build`
-3. Start server: `npm start` then visit [http://localhost:5000](http://localhost:5000) || To play without the server, simply open [demo/index.html](demo/index.html)
+Also, set the `bucketName` in `server/config.json` with the name of your AWS
+S3 bucket for uploading files.
+
+Then to boot the server:
 
-## Testing
-`gulp test`
+```
+node server/index.js
+```
 
-## Dev tips
-`gulp watch` to auto build/test as you save files
+And visit http://localhost:5000/dist/demo/index.html

bin/build-website.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+echo "Building website..."
+npm run build
+
+echo "Arranging built website in website/"
+rm -rf website
+mkdir website
+
+# rename demo/website-index.html to be the base index.html
+cp dist/demo/website-index.html website/index.hml
+
+# selectively copy asset dirs from dist to the staging area
+cp -R dist/demo website/demo
+cp -R dist/css website/css
+cp -R dist/global website/global
+
+CURRENT_SHA="$(git rev-parse HEAD)"
+git add website/
+git commit -m "built website from $CURRENT_SHA"
+echo "Done."

bin/deploy-website.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+git push origin `git subtree split --prefix website`:gh-pages --force

bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "content-kit-editor",
+  "version": "0.0.0",
+  "homepage": "https://github.com/bustlelabs/content-kit-editor",
+  "moduleType": [
+    "amd",
+    "es6",
+    "globals"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {}
+}