gram:op

> ./lib/op_web/live/chronicle/index.html.heex

Lenses
(coming soon!)

<% use Phoenix.HTML %>

<ul style="list-style: none;">
  <%= for {"chronicle-" <> _key, page} <- @streams.chronicles do %>
    <.motion id="dump"
      initial={[opacity: 0, x: -1000]}
      animate={[opacity: 1, x: 0]}
      exit={[opacity: 0, x: -1000]}
      transition={[ delay: page.number * 0.4, duration: 2 ]}
    >
      <li id={"#{assigns[:label]}-#{page.key}"} style="margin-bottom: 3rem; padding: none;">
        <h2 style="margin-bottom: 1rem;">
          <.link navigate={~p"/chronicle/#{page.key}"} >
            <%= page.name %>
          </.link>
        </h2>
        <div><time><%= page.day %></time> by <%= page.composer %></div>
        <div>Labeled as <%= Enum.join(page.labels, ", ") %></div>

        <p style="margin-left: 2rem;">
        <%= page.summary |> MDEx.to_html |> raw %>
        </p>
      </li>
    </.motion>
  <% end %>
</ul>