views/fish.erb

<!DOCTYPE html>

<html>
  <head>
    <title>TurboReact :: Transition between static HTML pages; no server required</title>
    <link rel="author" href="https://twitter.com/ssorallen">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="/turbo-react.css" media="screen">

    <script src="/lib/turbolinks.js"></script>
    <script src="/dist/turbo-react.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <h1>A fishy demonstration</h1>
          <p class="lead">
            Because only changes between pages are added when links are clicked,
            class name changes on the fish allow the CSS transitions to work. <small>
            (Try disabling JavaScript to see what each page looks like.)</small>
          </p>
          <ul class="nav nav-pills">
            <% [{path: "/onefish", title: "One fish"},
                {path: "/twofish", title: "Two fish"},
                {path: "/redfish", title: "Red fish"},
                {path: "/bluefish", title: "Blue fish"}].each do |info| %>
              <li <% if request.path_info == info[:path] %>class="active"<% end %>>
                <a href="<%= info[:path] %>">
                  <%= info[:title] %>
                </a>
              </li>
            <% end %>
          </ul>

          <% if request.path_info == "/onefish" %>
            <!-- Uncomment to test transitions between broken pages. -->
            <!-- <a xlink:href="/"> -->
          <% end %>

          <% (1..2).each do |i| %>
            <div class="fish <% if i <= (@fish_count || 1) %>fish-in<% end %> <%= @fish_class || '' %>">
              <div class="fish-body">
                <div class="eye">
                  <div class="pupil"></div>
                </div>
              </div>
              <div class="fin"></div>
              <div class="fin fin-bottom"></div>
            </div>
          <% end %>

          <h3>The Code</h3>
          <p>
            This whole app is on
            GitHub: <a href="https://github.com/ssorallen/turbo-react/">turbo-react</a>
          </p>

          <h3>Feedback</h3>
          <p>Tweet at
            me: <a href="https://twitter.com/ssorallen?rel=author">@ssorallen</a>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>