docs: add context json for playground default demo, #764

docs/themes/navy/layout/partial/demo.json

@@ -0,0 +1,7 @@
+{
+  "people": [
+    "alice",
+    "bob",
+    "carol"
+  ]
+}

docs/themes/navy/layout/partial/demo.liquid

@@ -1,5 +1,3 @@
-{% assign people = "alice, bob, carol" | split: ", " -%}
-
 <ul>
 {%- for person in people %}
   <li>

docs/themes/navy/layout/playground.swig

@@ -2,12 +2,19 @@
   <div class="wrapper">
     <h1 class="inner">{{__('playground.title')}}</h1>
     <div class="loader" role=status aria-busy=true></div>
-    <div id="editors" class="row inner hide" aria-hide=true>
-      <div class="col">
-        <div id="editorEl">{{ raw('partial/demo.liquid') }}</div>
-        <div id="dataEl">{}</div>
+    <div id="editors" class="inner hide" aria-hide=true>
+      <div class="area-tpl editor-wrapper">
+        <h2>Template</h2>
+        <div class="editor" id="editorEl">{{ raw('partial/demo.liquid') }}</div>
+      </div>
+      <div class="area-data editor-wrapper">
+        <h2>Context</h2>
+        <div class="editor" id="dataEl">{{ raw('partial/demo.json') }}</div>
+      </div>
+      <div class="area-output editor-wrapper">
+        <h2>Output</h2>
+        <div class="editor" id="previewEl">{{__('playground.loading')}}</div>
       </div>
-      <div class="col" id="previewEl">{{__('playground.loading')}}</div>
     </div>
     <p class="inner version"></p>
   </div>