Update view templates

The variable tracking the side panel navigation headings has been renamed, to
more accurately reflect what it represents.

We now show a basic title or heading on each page in each of the main
categories.

Lastly, the 'Tutorial' and 'Examples' categories have been disabled as adding pages to
those categories requires more work, which will not be done unless future
discussions confirm this Phoenix app as the right approach.

etc/docs/lib/docs_web/live/page_live/components/content_component.ex

@@ -2,20 +2,20 @@ defmodule DocsWeb.PageLive.ContentComponent do
  use DocsWeb, :live_component
 
  @impl true
- def update(%{content: content, active_tab: active_tab}, socket) do
- {:ok, assign(socket, content: content, active_tab: active_tab)}
+ def update(%{content: content, active_tab: active_tab, active_page: active_page}, socket) do
+ {:ok, assign(socket, content: content, active_tab: active_tab, active_page: active_page)}
  end
 
  @impl true
  def render(assigns) when assigns.active_tab == :fx or assigns.active_tab == :synths do
- #test = Map.take(assigns.content, [:doc])
  Phoenix.View.render(DocsWeb.PageView, "components/synths_or_fx_component.html", assigns)
  end
 
- # TODO: Store active_page per tab? this would allow us to check whether a page has been chosen on each tab,
- # and if not, render a default. (Also to render the last active page per tab when switching between them).
- @impl true
- def render(assigns) when assigns.active_tab == nil do
- Phoenix.View.render(DocsWeb.PageView, "components/welcome_component.html", %{})
+ def render(assigns) when assigns.active_tab == :samples do
+ Phoenix.View.render(DocsWeb.PageView, "components/samples_component.html", assigns)
+ end
+
+ def render(assigns) when assigns.active_tab == :lang do
+ Phoenix.View.render(DocsWeb.PageView, "components/lang_component.html", assigns)
  end
 end

etc/docs/lib/docs_web/live/page_live/components/side_nav_component.ex

@@ -9,10 +9,10 @@ defmodule DocsWeb.PageLive.SideNavComponent do
  end
 
  @impl true
- def update(%{active_page: active_page, active_tab: active_tab, active_pages: active_pages, page_titles: page_titles}, socket) do
+ def update(%{active_page: active_page, active_tab: active_tab, active_pages: active_pages, page_keys: page_keys}, socket) do
  case active_tab do
- nil -> {:ok, assign(socket, active_pages: active_pages, page_titles: page_titles)}
- _ -> {:ok, assign(socket, active_page: active_page, active_pages: %{active_pages | active_tab => active_page}, page_titles: page_titles)}
+ nil -> {:ok, assign(socket, active_pages: active_pages, page_keys: page_keys)}
+ _ -> {:ok, assign(socket, active_page: active_page, active_pages: %{active_pages | active_tab => active_page}, page_keys: page_keys)}
  end
  end
 end

etc/docs/lib/docs_web/live/page_live/page_live.ex

@@ -6,9 +6,11 @@ defmodule DocsWeb.PageLive do
  @impl true
  def mount(_params, %{"metadata" => metadata}, socket) do
  metadata = Enum.reject(metadata, fn {k, _v} -> k == :_build end)
- page_titles = Enum.into(metadata, %{}, fn {k, v} -> {k, Enum.flat_map(v, fn x -> Map.keys(x) end)} end)
+ page_keys = Enum.into(metadata, %{}, fn {k, v} -> {k, Enum.flat_map(v, fn x -> Map.keys(x) end)} end)
  active_pages = Enum.into(metadata, %{}, fn {k, v} -> {k, hd(Enum.flat_map(v, fn x -> Map.keys(x) end))} end)
- {:ok, assign(socket, metadata: metadata, active_tab: :fx, active_page: :bitcrusher, active_pages: active_pages, page_titles: page_titles[:fx], content: nil)}
+ content = Enum.find(metadata[:synths], fn p -> Enum.member?(Map.keys(p), :dull_bell) end)
+ %{dull_bell:  data} = content
+ {:ok, assign(socket, metadata: metadata, active_tab: :synths, active_page: :dull_bell, active_pages: active_pages, page_keys: page_keys[:synths], content: data)}
  end
 
  @impl true
@@ -19,21 +21,21 @@ defmodule DocsWeb.PageLive do
  @impl true
  def handle_event("change_tab", %{"active_tab" => active_tab}, socket) do
  active_tab = String.to_atom(active_tab)
- page_titles = socket.assigns.metadata[active_tab]
- |> Enum.flat_map(&Map.keys/1)
- |> Enum.uniq
-
- {:noreply, assign(socket, active_tab: active_tab, active_pages: socket.assigns.active_pages, page_titles: page_titles)}
+ page_keys = Enum.into(socket.assigns.metadata, %{}, fn {k, v} -> {k, Enum.flat_map(v, fn x -> Map.keys(x) end)} end)[active_tab]
+ active_page = socket.assigns.active_pages[active_tab]
+ pages = socket.assigns.metadata[active_tab]
+ content = Enum.find(pages, fn p -> Enum.member?(Map.keys(p), active_page) end)
+ %{^active_page => data} = content
+ {:noreply, assign(socket, active_tab: active_tab, active_pages: socket.assigns.active_pages, page_keys: page_keys, content: data)}
  end
 
  @impl true
  def handle_event("change_page", %{"active_page" => active_page}, socket) do
  active_tab = socket.assigns.active_tab
  pages = socket.assigns.metadata[active_tab]
- page = String.to_atom(active_page)
- content = Enum.find(pages, fn p -> Enum.member?(Map.keys(p), page) end)
- %{^page => data} = content
- {:noreply, assign(socket, active_pages: %{socket.assigns.active_pages | active_tab => page}, content: data)}
+ active_page = String.to_atom(active_page)
+ content = Enum.find(pages, fn p -> Enum.member?(Map.keys(p), active_page) end)
+ %{^active_page => data} = content
+ {:noreply, assign(socket, active_pages: %{socket.assigns.active_pages | active_tab => active_page}, content: data)}
  end
-
 end

etc/docs/lib/docs_web/templates/page/components/lang_component.html.heex

@@ -1 +1 @@
-<h1><%= inspect(@content) %></h1>
+<h1><%= @content[:summary] %></h1>

etc/docs/lib/docs_web/templates/page/components/navbar_component.html.heex

@@ -1,19 +1,21 @@
 <ul class="nav nav-pills justify-content-center">
  <li class="nav-item">
  <button
- class={is_active(@active_tab, :tutorial)}
+ class={["disabled", is_active(@active_tab, :tutorial)]}
  phx-click="change_tab"
  phx-value-active_tab={:tutorial}
  aria-current="page"
+ disabled
  >
  Tutorial
  </button>
  </li>
  <li class="nav-item">
  <button
- class={is_active(@active_tab, :examples)}
+ class={["disabled", is_active(@active_tab, :examples)]}
  phx-click="change_tab"
  phx-value-active_tab={:examples}
+ disabled
  >
  Examples
  </button>

etc/docs/lib/docs_web/templates/page/components/samples_component.html.heex

@@ -1 +1 @@
-<h1><%= inspect(@content) %></h1>
+<h1><%= String.capitalize(Atom.to_string(@active_page)) %> sounds</h1>

etc/docs/lib/docs_web/templates/page/components/side_nav_component.html.heex

@@ -1,5 +1,5 @@
 <ul class="nav nav-pills flex-column">
- <%= for title <- @page_titles do %>
+ <%= for title <- @page_keys do %>
  <li class="nav-item">
  <button
  class={is_active(@active_page, title)}

etc/docs/lib/docs_web/templates/page/components/synths_or_fx_component.html.heex

@@ -1 +1 @@
-<h1><%= inspect(@content) %></h1>
+<h1><%= @content.name %></h1>

etc/docs/lib/docs_web/templates/page/page.html.heex

@@ -2,10 +2,10 @@
 <div class="container-fluid">
  <div class="row">
  <div class="col-2">
- <%= live_component(@socket, DocsWeb.PageLive.SideNavComponent, active_tab: @active_tab, active_pages: @active_pages, active_page: @active_pages[@active_tab], page_titles: @page_titles) %>
+ <%= live_component(@socket, DocsWeb.PageLive.SideNavComponent, active_tab: @active_tab, active_pages: @active_pages, active_page: @active_pages[@active_tab], page_keys: @page_keys) %>
  </div>
  <div class="col-10">
- <%= live_component(@socket, DocsWeb.PageLive.ContentComponent, active_tab: @active_tab, content: @content) %>
+ <%= live_component(@socket, DocsWeb.PageLive.ContentComponent, active_tab: @active_tab, active_page: @active_pages[@active_tab], content: @content) %>
  </div>
  </div>
 </div>