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

<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>