Restructure project file layout and inject TOML

The file organisation in the web app has been changed to group things togather a
little more logically. Also, the app is now using the documentation metadata
generated by the Ruby server.

Author: ethancrawford

etc/docs/lib/docs_web.ex

@@ -30,7 +30,7 @@ defmodule DocsWeb do
   def view do
     quote do
       use Phoenix.View,
-        root: "lib/docs_web/templates",
+        root: "lib/docs_web/templates", pattern: "**/*",
         namespace: DocsWeb
 
       # Import convenience functions from controllers

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

@@ -0,0 +1,21 @@
+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)}
+  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", %{})
+  end
+end

etc/docs/lib/docs_web/live/page_live.html.leex

@@ -0,0 +1,13 @@
+defmodule DocsWeb.PageLive.LangComponent do
+  use DocsWeb, :live_component
+
+  @impl true
+  def update(%{content: content}, socket) do
+    {:ok, assign(socket, content: content)}
+  end
+
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "components/lang_component.html", assigns)
+  end
+end

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

@@ -0,0 +1,13 @@
+defmodule DocsWeb.PageLive.NavbarComponent do
+  use DocsWeb, :live_component
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "components/navbar_component.html", assigns)
+  end
+
+  @impl true
+  def update(%{active_tab: active_tab}, socket) do
+    {:ok, assign(socket, active_tab: active_tab)}
+  end
+
+end

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

@@ -0,0 +1,13 @@
+defmodule DocsWeb.PageLive.SamplesComponent do
+  use DocsWeb, :live_component
+
+  @impl true
+  def update(%{content: content}, socket) do
+    {:ok, assign(socket, content: content)}
+  end
+
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "components/samples_component.html", assigns)
+  end
+end

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

@@ -0,0 +1,18 @@
+require IEx
+
+defmodule DocsWeb.PageLive.SideNavComponent do
+  use DocsWeb, :live_component
+
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "components/side_nav_component.html", assigns)
+  end
+
+  @impl true
+  def update(%{active_page: active_page, active_tab: active_tab, active_pages: active_pages, page_titles: page_titles}, 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)}
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+defmodule DocsWeb.PageLive.SynthsComponent do
+  use DocsWeb, :live_component
+
+  @impl true
+  def update(%{content: content}, socket) do
+    {:ok, assign(socket, content: content)}
+  end
+
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "components/synths_component.html", assigns)
+  end
+end

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

@@ -0,0 +1,13 @@
+defmodule DocsWeb.PageLive.SynthsOrFxComponent do
+  use DocsWeb, :live_component
+
+  @impl true
+  def update(%{content: content}, socket) do
+    {:ok, assign(socket, content: content)}
+  end
+
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "components/synths_or_fx_component.html", assigns)
+  end
+end

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

@@ -0,0 +1,13 @@
+defmodule DocsWeb.PageLive.WelcomeComponent do
+  use DocsWeb, :live_component
+
+  @impl true
+  def update(%{content: content}, socket) do
+    {:ok, assign(socket, content: content)}
+  end
+
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "components/welcome_component.html", assigns)
+  end
+end

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

@@ -0,0 +1,39 @@
+require IEx
+
+defmodule DocsWeb.PageLive do
+  use DocsWeb, :live_view
+
+  @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)
+    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)}
+  end
+
+  @impl true
+  def render(assigns) do
+    Phoenix.View.render(DocsWeb.PageView, "page.html", assigns)
+  end
+
+  @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)}
+  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)}
+  end
+
+end

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

@@ -0,0 +1,42 @@
+require IEx
+
+defmodule DocsWeb.Plug.InjectToml do
+  import Plug.Conn
+
+  defp file_list(dir) do
+    toml = Path.wildcard("#{:code.priv_dir(:docs)}/toml/#{dir}/*.toml")
+    Enum.map(toml, fn file ->
+      {:ok, data} = Toml.decode_file(file, keys: :atoms)
+      data
+    end)
+  end
+
+
+  defp directory_list do
+    dirs = File.cd!(
+      "#{:code.priv_dir(:docs)}/toml",
+      fn -> File.ls! |> Enum.filter(&File.dir?(Path.join("#{:code.priv_dir(:docs)}/toml", &1))) end
+    )
+    for dir <- dirs, into: %{}, do: {String.to_atom(dir), file_list(dir)}
+  end
+
+  def metadata(f) do
+    key = make_ref()
+    fn ->
+      case :ets.lookup(:session, key) do
+        [{^key, val}] -> val
+        [] ->
+          val = f.()
+          :ets.insert(:session, {key, val})
+          val
+      end
+    end
+  end
+
+  def init(default), do: default
+
+  def call(conn, _default) do
+      conn
+      |> put_session(:metadata, metadata(&directory_list/0).())
+  end
+end

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

@@ -0,0 +1,2 @@
+<h1><%= inspect(@content) %></h1>
+<p><%= test %></p>

etc/docs/lib/docs_web/plug/inject_toml.ex

@@ -0,0 +1 @@
+<h1><%= inspect(@content) %></h1>

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

@@ -0,0 +1,57 @@
+<ul class="nav nav-pills justify-content-center">
+  <li class="nav-item">
+    <button
+      class={is_active(@active_tab, :tutorial)}
+      phx-click="change_tab"
+	    phx-value-active_tab={:tutorial}
+      aria-current="page"
+      >
+      Tutorial
+    </button>
+  </li>
+  <li class="nav-item">
+    <button
+      class={is_active(@active_tab, :examples)}
+      phx-click="change_tab"
+	    phx-value-active_tab={:examples}
+      >
+      Examples
+    </button>
+  </li>
+  <li class="nav-item">
+    <button
+      class={is_active(@active_tab, :synths)}
+      phx-click="change_tab"
+	    phx-value-active_tab={:synths}
+      >
+      Synths
+    </button>
+  </li>
+  <li class="nav-item">
+    <button
+      class={is_active(@active_tab, :fx)}
+      phx-click="change_tab"
+	    phx-value-active_tab={:fx}
+      >
+      Fx
+    </button>
+  </li>
+  <li class="nav-item">
+    <button
+      class={is_active(@active_tab, :samples)}
+      phx-click="change_tab"
+	    phx-value-active_tab={:samples}
+      >
+      Samples
+    </button>
+  </li>
+  <li class="nav-item">
+    <button
+      class={is_active(@active_tab, :lang)}
+      phx-click="change_tab"
+	    phx-value-active_tab={:lang}
+      >
+      Lang
+    </button>
+  </li>
+</ul>

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

@@ -0,0 +1 @@
+<h1><%= inspect(@content) %></h1>

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

@@ -0,0 +1,13 @@
+<ul class="nav nav-pills flex-column">
+  <%= for title <- @page_titles do %>
+    <li class="nav-item">
+      <button
+        class={is_active(@active_page, title)}
+        phx-click="change_page"
+        phx-value-active_page={title}
+        aria-current="page">
+        <%= title %>
+      </button>
+    </li>
+  <% end %>
+</ul>

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

@@ -0,0 +1 @@
+<h1><%= inspect(@content) %></h1>

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

@@ -0,0 +1 @@
+<h1>Welcome</h1>