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.

Author: ethancrawford

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>