updated app

node_modules/derby-examples/gallery/views/404.html

@@ -0,0 +1,7 @@
+<Title:>
+  Not found
+
+<Body:>
+  <h1>404</h1>
+  <p>Sorry, we can't find anything at <b>{{url}}</b>.
+  <p>Try heading back to the <a href="/">home page</a>.

node_modules/derby-examples/gallery/views/app/index.html

@@ -0,0 +1,60 @@
+<Title:>
+  Gallery
+
+<Header:>
+  <app:alert>
+
+<Body:>
+  <div class=lightbox>
+    <app:photoBox source="{{source}}" size="m" data="{_image0}" opacity="{_fade0}">
+    <app:photoBox source="{{source}}" size="m" data="{_image1}" opacity="{_fade1}">
+  </div>
+  <div>
+  {#each _pages}
+    <div>
+    {#each this}
+      <a x-bind="mouseover: select" href="{{$indices.0}}{{search}}" class="thumb">
+        <app:photo source="{{source}}" data="{{this}}">
+      </a>
+    {/}
+    </div>
+  {/}
+  </div>
+
+<photoBox:>
+  <div class=photobox style="opacity:{{{opacity}}}">
+    <div class=photo>
+      <div
+        class=photoOffset
+        style="margin-left:{{{photoWidth(data, source, size, -0.5)}}}px;
+               margin-top:{{{photoHeight(data, source, size, -0.5)}}}px"
+      >
+        <app:photo>
+      </div>
+    </div>
+    <div class=caption>
+      <h3>{{{data.title}}}</h3>
+    </div>
+  </div>
+
+<photo:>
+  <img
+    alt="{{{data.title}}}"
+    src="{{{photoSrc(data, source, size)}}}"
+    width="{{{photoWidth(data, source, size)}}}"
+    height="{{{photoHeight(data, source, size)}}}"
+  >
+
+<alert:>
+  <div id="alert">
+    {#unless connected}
+      <p>
+        {#if canConnect}
+          Offline 
+          {#if _showReconnect}&ndash; <a x-bind="click: connect">Reconnect</a>{/}
+        {else}
+          Unable to reconnect &ndash; <a x-bind="click: reload">Reload</a>
+        {/}
+      </p>
+    {/}
+  </div>