Update documentation

docs/extra.css

@@ -0,0 +1,3 @@
+.md-typeset__table {
+  width: 100%;
+}

docs/images/sync-example-files.gv

@@ -0,0 +1,17 @@
+digraph "Sync Files" {
+	graph [
+	    ranksep = "0.7",
+	    nodesep = "0.5",
+	];
+	node [
+	    fontname = "monospace",
+	    shape = "record",
+	];
+
+	my_model [label = "MyModel"]
+	init_server [label = "init.server.lua"]
+	foo [label = "foo.lua"]
+
+	my_model -> init_server
+	my_model -> foo
+}

docs/images/sync-example-files.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: Sync Files Pages: 1 -->
+<svg width="258pt" height="132pt"
+ viewBox="0.00 0.00 258.00 132.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 128)">
+<title>Sync Files</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-128 254,-128 254,4 -4,4"/>
+<!-- my_model -->
+<g id="node1" class="node"><title>my_model</title>
+<polygon fill="none" stroke="black" points="104,-87.5 104,-123.5 178,-123.5 178,-87.5 104,-87.5"/>
+<text text-anchor="middle" x="141" y="-101.8" font-family="monospace" font-size="14.00">MyModel</text>
+</g>
+<!-- init_server -->
+<g id="node2" class="node"><title>init_server</title>
+<polygon fill="none" stroke="black" points="0,-0.5 0,-36.5 140,-36.5 140,-0.5 0,-0.5"/>
+<text text-anchor="middle" x="70" y="-14.8" font-family="monospace" font-size="14.00">init.server.lua</text>
+</g>
+<!-- my_model&#45;&gt;init_server -->
+<g id="edge1" class="edge"><title>my_model&#45;&gt;init_server</title>
+<path fill="none" stroke="black" d="M126.632,-87.299C116.335,-74.9713 102.308,-58.1787 90.7907,-44.3902"/>
+<polygon fill="black" stroke="black" points="93.4435,-42.1065 84.3465,-36.6754 88.0711,-46.594 93.4435,-42.1065"/>
+</g>
+<!-- foo -->
+<g id="node3" class="node"><title>foo</title>
+<polygon fill="none" stroke="black" points="176,-0.5 176,-36.5 250,-36.5 250,-0.5 176,-0.5"/>
+<text text-anchor="middle" x="213" y="-14.8" font-family="monospace" font-size="14.00">foo.lua</text>
+</g>
+<!-- my_model&#45;&gt;foo -->
+<g id="edge2" class="edge"><title>my_model&#45;&gt;foo</title>
+<path fill="none" stroke="black" d="M155.57,-87.299C166.013,-74.9713 180.237,-58.1787 191.917,-44.3902"/>
+<polygon fill="black" stroke="black" points="194.659,-46.5681 198.451,-36.6754 189.317,-42.0437 194.659,-46.5681"/>
+</g>
+</g>
+</svg>

docs/images/sync-example-instances.gv

@@ -0,0 +1,15 @@
+digraph "Sync Files" {
+	graph [
+	    ranksep = "0.7",
+	    nodesep = "0.5",
+	];
+	node [
+	    fontname = "monospace",
+	    shape = "record",
+	];
+
+	my_model [label = "MyModel (Script)"]
+	foo [label = "foo (ModuleScript)"]
+
+	my_model -> foo
+}

docs/images/sync-example-instances.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: Sync Files Pages: 1 -->
+<svg width="173pt" height="132pt"
+ viewBox="0.00 0.00 173.00 132.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 128)">
+<title>Sync Files</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-128 169,-128 169,4 -4,4"/>
+<!-- my_model -->
+<g id="node1" class="node"><title>my_model</title>
+<polygon fill="none" stroke="black" points="8,-87.5 8,-123.5 157,-123.5 157,-87.5 8,-87.5"/>
+<text text-anchor="middle" x="82.5" y="-101.8" font-family="monospace" font-size="14.00">MyModel (Script)</text>
+</g>
+<!-- foo -->
+<g id="node2" class="node"><title>foo</title>
+<polygon fill="none" stroke="black" points="0,-0.5 0,-36.5 165,-36.5 165,-0.5 0,-0.5"/>
+<text text-anchor="middle" x="82.5" y="-14.8" font-family="monospace" font-size="14.00">foo (ModuleScript)</text>
+</g>
+<!-- my_model&#45;&gt;foo -->
+<g id="edge1" class="edge"><title>my_model&#45;&gt;foo</title>
+<path fill="none" stroke="black" d="M82.5,-87.299C82.5,-75.6626 82.5,-60.0479 82.5,-46.7368"/>
+<polygon fill="black" stroke="black" points="86.0001,-46.6754 82.5,-36.6754 79.0001,-46.6755 86.0001,-46.6754"/>
+</g>
+</g>
+</svg>

docs/images/sync-example-json-model.gv

@@ -0,0 +1,17 @@
+digraph "Sync Files" {
+	graph [
+	    ranksep = "0.7",
+	    nodesep = "0.5",
+	];
+	node [
+	    fontname = "monospace",
+	    shape = "record",
+	];
+
+	model [label = "My Cool Model (Folder)"]
+	root_part [label = "RootPart (Part)"]
+	send_money [label = "SendMoney (RemoteEvent)"]
+
+	model -> root_part
+	model -> send_money
+}

docs/images/sync-example-json-model.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.38.0 (20140413.2041)
+ -->
+<!-- Title: Sync Files Pages: 1 -->
+<svg width="390pt" height="132pt"
+ viewBox="0.00 0.00 390.00 132.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 128)">
+<title>Sync Files</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-128 386,-128 386,4 -4,4"/>
+<!-- model -->
+<g id="node1" class="node"><title>model</title>
+<polygon fill="none" stroke="black" points="75,-87.5 75,-123.5 273,-123.5 273,-87.5 75,-87.5"/>
+<text text-anchor="middle" x="174" y="-101.8" font-family="monospace" font-size="14.00">My Cool Model (Folder)</text>
+</g>
+<!-- root_part -->
+<g id="node2" class="node"><title>root_part</title>
+<polygon fill="none" stroke="black" points="0,-0.5 0,-36.5 140,-36.5 140,-0.5 0,-0.5"/>
+<text text-anchor="middle" x="70" y="-14.8" font-family="monospace" font-size="14.00">RootPart (Part)</text>
+</g>
+<!-- model&#45;&gt;root_part -->
+<g id="edge1" class="edge"><title>model&#45;&gt;root_part</title>
+<path fill="none" stroke="black" d="M152.954,-87.299C137.448,-74.6257 116.168,-57.2335 99.0438,-43.2377"/>
+<polygon fill="black" stroke="black" points="100.972,-40.2938 91.0147,-36.6754 96.5426,-45.7138 100.972,-40.2938"/>
+</g>
+<!-- send_money -->
+<g id="node3" class="node"><title>send_money</title>
+<polygon fill="none" stroke="black" points="176,-0.5 176,-36.5 382,-36.5 382,-0.5 176,-0.5"/>
+<text text-anchor="middle" x="279" y="-14.8" font-family="monospace" font-size="14.00">SendMoney (RemoteEvent)</text>
+</g>
+<!-- model&#45;&gt;send_money -->
+<g id="edge2" class="edge"><title>model&#45;&gt;send_money</title>
+<path fill="none" stroke="black" d="M195.248,-87.299C210.904,-74.6257 232.388,-57.2335 249.677,-43.2377"/>
+<polygon fill="black" stroke="black" points="252.213,-45.6878 257.783,-36.6754 247.809,-40.2471 252.213,-45.6878"/>
+</g>
+</g>
+</svg>

docs/migrating-to-epiphany.md

@@ -50,9 +50,6 @@ Metadata begins with a dollar sign (`$`), like `$className`. This is so that chi
 
 All other values are considered children, where the key is the instance's name, and the value is an object, repeating the process.
 
-## Migrating `.model.json` Files
-No upgrade path yet, stay tuned.
-
 ## Migrating Unknown Files
 If you used Rojo to sync in files as `StringValue` objects, you'll need to make sure those files end with the `txt` extension to preserve this in Rojo 0.5.x.
 

docs/sync-details.md

@@ -9,6 +9,20 @@ This page aims to describe how Rojo turns files on the filesystem into Roblox ob
 | `*.lua`        | `ModuleScript`      |
 | `*.csv`        | `LocalizationTable` |
 | `*.txt`        | `StringValue`       |
+| `*.model.json` | Any                 |
+| `*.rbxm`       | Any                 |
+| `*.rbxmx`      | Any                 |
+
+## Limitations
+Not all property types can be synced by Rojo in real-time due to limitations of the Roblox Studio plugin API. In these cases, you can usually generate a place file and open it when you start working on a project.
+
+Some common cases you might hit are:
+
+* Binary data (Terrain, CSG, CollectionService tags)
+* `MeshPart.MeshId`
+* `HttpService.HttpEnabled`
+
+For a list of all property types that Rojo can reason about, both when live-syncing and when building place files, look at [rbx_tree's type coverage documentation](https://github.com/LPGhatguy/rbx-tree/tree/master/rbx_tree#coverage).
 
 ## Folders
 Any directory on the filesystem will turn into a `Folder` instance unless it contains an 'init' script, described below.
@@ -20,16 +34,68 @@ If a directory contains a file named `init.server.lua`, `init.client.lua`, or `i
 
 For example, these files:
 
-* my-game
+<div align="center">
-    * init.client.lua
+    <a href="../images/sync-example-files.svg">
-    * foo.lua
+        <img src="../images/sync-example-files.svg" alt="Tree of files on disk" />
+    </a>
+</div>
 
 Will turn into these instances in Roblox:
 
-![Example of Roblox instances](/images/sync-example.png)
+<div align="center">
+    <a href="../images/sync-example-instances.svg">
+        <img src="../images/sync-example-instances.svg" alt="Tree of instances in Roblox" />
+    </a>
+</div>
 
 ## Localization Tables
 Any CSV files are transformed into `LocalizationTable` instances. Rojo expects these files to follow the same format that Roblox does when importing and exporting localization information.
 
 ## Plain Text Files
-Plain text files (`.txt`) files are transformed into `StringValue` instances. This is useful for bringing in text data that can be read by scripts at runtime.
+Plain text files (`.txt`) files are transformed into `StringValue` instances. This is useful for bringing in text data that can be read by scripts at runtime.
+
+## JSON Models
+Files ending in `.model.json` can be used to describe simple models. They're designed to be hand-written and are useful for instances like `RemoteEvent`.
+
+A JSON model describing a folder containing a `Part` and a `RemoteEvent` could be described as:
+
+```json
+{
+    "Name": "My Cool Model",
+    "ClassName": "Folder",
+    "Children": [
+        {
+            "Name": "RootPart",
+            "ClassName": "Part",
+            "Properties": {
+                "Size": {
+                    "Type": "Vector3",
+                    "Value": [4, 4, 4]
+                }
+            }
+        },
+        {
+            "Name": "SendMoney",
+            "ClassName": "RemoteEvent"
+        }
+    ]
+}
+```
+
+It would turn into instances in this shape:
+
+<div align="center">
+    <a href="../images/sync-example-json-model.svg">
+        <img src="../images/sync-example-json-model.svg" alt="Tree of instances in Roblox" />
+    </a>
+</div>
+
+## Binary and XML Models
+Rojo supports both binary (`.rbxm`) and XML (`.rbxmx`) models generated by Roblox Studio or another tool.
+
+Not all property types are supported!
+
+For a rundown of supported types, see:
+
+* [rbxm Type Coverage](https://github.com/LPGhatguy/rbx-tree/tree/master/rbx_binary#coverage)
+* [rbxmx Type Coverage](https://github.com/LPGhatguy/rbx-tree/tree/master/rbx_xml#coverage)

mkdocs.yml

@@ -17,6 +17,9 @@ nav:
   - Sync Details: sync-details.md
   - Migrating from 0.4.x to 0.5.x: migrating-to-epiphany.md
 
+extra_css:
+  - extra.css
+
 markdown_extensions:
   - attr_list
   - admonition