Dev

.gitignore

@@ -0,0 +1,5 @@
+bower_components/
+node_modules/
+npm-debug.log
+.module-cache
+*.pyc

README.md

@@ -4,14 +4,71 @@ cuttlefish
 Human-friendly HTML rendering of machine-friendly JSON-LD
 ---------------------------------------------------------
 
-Description to come.
-
+Cuttlefish allows you to get HTML out of almost any JSON-LD data structure by providing [ReactJS](https://facebook.github.io/react/) component based on the [Schema.org](http://schema.org/) definition of entities.
 
 What's in a name?
 -----------------
 
 Story to come.
 
+How do I use it?
+----------
+
+The basic compiled version allows you to visualise `Person`s, `Product`s and `Place`s. (see `index.html` example)
+
+To use it, all you need to do is :
+
+* Install cuttlefish with bower 
+
+```sh
+bower install cuttlefish
+```
+
+* Insert it in your webpage (before your scripts) and insert a node in which to insert the representation
+
+```html
+<!-- In the *head* tag (if you want our default style) -->
+<link rel='stylesheet' href='bower_components/cuttlefish/dist/cuttlefish.css' />
+<!-- Somewhere in the body -->
+<div id='myJSON-LDRepresentationContainer'>
+</div>
+...
+<script src='bower_components/cuttlefish/dist/cuttlefish.min.js'></script>
+...
+```
+
+* Call it with your JSON-ld and the ID of your node
+
+```javascript
+cuttlefish.represent(JSONLDData, 'myJSON-LDRepresentationContainer');
+```
+
+* Check out your HTML (right-click + inspect in Google Chrome)
+
+Develop
+-------
+
+Ok, that's nice, but now, you want to put your hands in the dough.
+
+There are three ways to do that:
+
+* You want to change the style of what you see ...
+
+  * ... by modifying only certain attributes? Just create a CSS file and override the classes you want by using the ID of the container as a higher CSS specificity selector!
+
+  * ... by starting from scratch? Remove our stylesheet in the *head* tag and create your own, you will find that cuttlefish tries to follow the [SUIT CSS naming convention](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) to make it easy for you to style.
+
+* You want to customize the HTML itself, or extend the React components for them to really do something!
+
+  * Fork this repo
+  * In the `src/es6/` folder, you will find the components: Modify them as you want!
+  * To Rebuild the all in one dist file: run `npm install && npm run build-dist`
+
+* You want to adapt cuttlefish to YOUR data structure:
+  * Put an extensive example of your JSON-LD data in the `source.json` file
+  * Run the `npm run generate-source` command
+  * Look in `src/es6` and you should have the corresponding react components in Ecma script 6 syntax. Customize them as you want and
+  * Run `npm run build` to get the new version of Cuttlefish with YOUR React components packaged. If you are happy with them, run `npm run build-dist` to generate the distribution-ready version (minified and stuff)
 
 License
 -------
@@ -31,4 +88,3 @@ 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.
-

bower.json

@@ -1,16 +1,29 @@
 {
   "name": "cuttlefish",
+  "version": "0.0.2",
   "description": "Human-friendly HTML rendering of machine-friendly JSON-LD. We believe in an open Internet of Things.",
+  "homepage": "https://github.com/reelyactive/cuttlefish",
   "keywords": [
     "JSON-LD",
     "IoT"
   ],
   "authors": [
-    { "name": "Adrien Thiery" }
+    "Adrien Thiery <[email protected]>"
   ],
   "repository": {
     "type": "git",
     "url": "git://github.com/reelyactive/cuttlefish.git"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "main": "dist/cuttlefish.min.js",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+  },
+  "devDependencies": {}
 }

dist/cuttlefish.css

@@ -0,0 +1,111 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@font-face {
+  font-family: 'EntypoRegular';
+  src: url('../font/entypo.eot');
+  src: url('../font/entypo.eot?#iefix') format('embedded-opentype'),
+       url('../font/entypo.woff') format('woff'),
+       url('../font/entypo.ttf') format('truetype'),
+       url('../font/entypo.svg#EntypoRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'EntypoSocial';
+  src: url('../font/entypo-social.eot');
+  src: url('../font/entypo-social.eot?#iefix') format('embedded-opentype'),
+       url('../font/entypo-social.woff') format('woff'),
+       url('../font/entypo-social.ttf') format('truetype'),
+       url('../font/entypo-social.svg#entypo-social') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+img { 
+  display: block;
+  max-width: 100%;
+}
+
+a {
+  color: #0770a2;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.entity {
+  border: solid 1px #ddd;
+  font-size: 0.8em;
+  padding: 5px;
+  background-color: white;
+  margin: 5px;
+  clear: both;
+}
+
+.Device + .Device {
+  margin-top: 10px;
+}
+
+/* Colored !
+.Device {
+    border-color: #FFAC71;
+    background-color: #FFDFA6;
+}
+
+.Person {
+    border-color: #BFD4FF;
+    background-color: #BFD4FF;
+} 
+
+.Product {
+    border-color: #FFFF82;
+    background-color: #FFFF82;
+}
+
+.tiraid {
+    border-color: #CCCCCC;
+    background-color: #EEEEEE;
+}
+*/
+
+.clear {
+    clear: both;
+}
+
+.Person img, .Device img {
+    max-width: 8em;
+    max-height: 8em;
+    width: auto;
+    height: auto;
+    float: left;
+    margin: 5px;
+}
+
+.Person .clear, .Device .clear {
+    clear: both;
+}
+
+img.icon {
+    clear: both;
+    max-height: 2em;
+}
+
+/* Icons */
+.icon {
+    font-family: 'EntypoRegular';
+    font-size: 2em;
+    display: inline-block;
+    margin-right: 5px;
+    vertical-align: bottom;
+}
+.social {
+    font-family: 'EntypoSocial';
+}
+