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>

docs/themes/navy/source/css/_partial/playground.styl

@@ -8,28 +8,29 @@
     font-weight: 300
     margin: 40px 0 24px
 
-  .row
+  #editors
+    display: grid
+    overflow: hidden
+    margin-bottom: 16px
+    height: 75vh
+    grid-template-columns: auto auto
+    grid-template-rows: 60% 40%
+    grid-gap: 16px
+  .area-tpl
+    grid-row: 1
+    grid-column: 1
+  .area-data
+    grid-row: 2
+    grid-column: 1
+  .area-output
+    grid-column: 2
+    grid-row: 1 / -1
+  .editor-wrapper
     display: flex
-    flex-wrap: wrap;
-    justify-content: space-between
-    font-size: 1em
-    .col
-      flex: 1 1 100%
-      margin-bottom: 10px
-
-  @media mq-normal
-    .row
-      flex-wrap: nowrap;
-    .col:first-child
-      margin-right: 15px
-
-  #editorEl
-    height: 40vh
-  #dataEl
-    height: 28vh
-    margin-top: 2vh
-  #previewEl
-    height: 70vh
+    gap: 8px
+    flex-direction: column
+    .editor
+      flex-grow: 1
   .hide
     display: none
   .loader