Bootstrap mandolin home page

Taskfile.yml

@@ -185,6 +185,7 @@ tasks:
 
   "mandolin:run":
     dir: connector/mandolin
+    dotenv: [".env"]
     cmds:
       - mix phx.server
 

connector/mandolin/assets/tailwind.config.js

@@ -1,21 +1,25 @@
 // See the Tailwind configuration guide for advanced usage
 // https://tailwindcss.com/docs/configuration
 
-const plugin = require("tailwindcss/plugin")
-const fs = require("fs")
-const path = require("path")
+const plugin = require("tailwindcss/plugin");
+const fs = require("fs");
+const path = require("path");
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
   content: [
     "./js/**/*.js",
     "../lib/mandolin_web.ex",
-    "../lib/mandolin_web/**/*.*ex"
+    "../lib/mandolin_web/**/*.*ex",
   ],
   theme: {
     extend: {
       colors: {
-        brand: "#FD4F00",
-      }
+        brand: "#453750",
+      },
+      fontFamily: {
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+      },
     },
   },
   plugins: [
@@ -25,50 +29,71 @@ module.exports = {
     //
     //     <div class="phx-click-loading:animate-ping">
     //
-    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+    plugin(({ addVariant }) =>
+      addVariant("phx-click-loading", [
+        ".phx-click-loading&",
+        ".phx-click-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-submit-loading", [
+        ".phx-submit-loading&",
+        ".phx-submit-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-change-loading", [
+        ".phx-change-loading&",
+        ".phx-change-loading &",
+      ])
+    ),
 
     // Embeds Heroicons (https://heroicons.com) into your app.css bundle
     // See your `CoreComponents.icon/1` for more information.
     //
-    plugin(function({matchComponents, theme}) {
-      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
-      let values = {}
+    plugin(function ({ matchComponents, theme }) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized");
+      let values = {};
       let icons = [
         ["", "/24/outline"],
         ["-solid", "/24/solid"],
         ["-mini", "/20/solid"],
-        ["-micro", "/16/solid"]
-      ]
+        ["-micro", "/16/solid"],
+      ];
       icons.forEach(([suffix, dir]) => {
-        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
-          let name = path.basename(file, ".svg") + suffix
-          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
-        })
-      })
-      matchComponents({
-        "hero": ({name, fullPath}) => {
-          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
-          let size = theme("spacing.6")
-          if (name.endsWith("-mini")) {
-            size = theme("spacing.5")
-          } else if (name.endsWith("-micro")) {
-            size = theme("spacing.4")
-          }
-          return {
-            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
-            "-webkit-mask": `var(--hero-${name})`,
-            "mask": `var(--hero-${name})`,
-            "mask-repeat": "no-repeat",
-            "background-color": "currentColor",
-            "vertical-align": "middle",
-            "display": "inline-block",
-            "width": size,
-            "height": size
-          }
-        }
-      }, {values})
-    })
-  ]
-}
+        fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
+          let name = path.basename(file, ".svg") + suffix;
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
+        });
+      });
+      matchComponents(
+        {
+          hero: ({ name, fullPath }) => {
+            let content = fs
+              .readFileSync(fullPath)
+              .toString()
+              .replace(/\r?\n|\r/g, "");
+            let size = theme("spacing.6");
+            if (name.endsWith("-mini")) {
+              size = theme("spacing.5");
+            } else if (name.endsWith("-micro")) {
+              size = theme("spacing.4");
+            }
+            return {
+              [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+              "-webkit-mask": `var(--hero-${name})`,
+              mask: `var(--hero-${name})`,
+              "mask-repeat": "no-repeat",
+              "background-color": "currentColor",
+              "vertical-align": "middle",
+              display: "inline-block",
+              width: size,
+              height: size,
+            };
+          },
+        },
+        { values }
+      );
+    }),
+  ],
+};

connector/mandolin/config/config.exs

@@ -7,6 +7,8 @@
 # General application configuration
 import Config
 
+config :mandolin, core_url: System.get_env("CORE_URL")
+
 config :mandolin,
   generators: [timestamp_type: :utc_datetime]
 

connector/mandolin/lib/mandolin/application.ex

@@ -9,6 +9,7 @@ defmodule Mandolin.Application do
   def start(_type, _args) do
     children = [
       MandolinWeb.Telemetry,
+      Mandolin.Lute.Channel,
       {DNSCluster, query: Application.get_env(:mandolin, :dns_cluster_query) || :ignore},
       {Phoenix.PubSub, name: Mandolin.PubSub},
       # Start the Finch HTTP client for sending emails
@@ -19,7 +20,7 @@ defmodule Mandolin.Application do
       MandolinWeb.Endpoint
     ]
 
-    # See https://hexdocs.pm/elixir/Supervisor.html
+    # See https://hexdocs.pm/elixir/  Supervisor.html
     # for other strategies and supported options
     opts = [strategy: :one_for_one, name: Mandolin.Supervisor]
     Supervisor.start_link(children, opts)

connector/mandolin/lib/mandolin/lute/channel.ex

@@ -0,0 +1,45 @@
+defmodule Mandolin.Lute.Channel do
+  use GenServer
+  require Logger
+
+  # Client
+  def start_link(_) do
+    GenServer.start_link(__MODULE__, :ok, name: __MODULE__)
+  end
+
+  def channel() do
+    GenServer.call(__MODULE__, :channel)
+  end
+
+  # Server
+  @impl true
+  def init(_) do
+    {:ok, connect_channel()}
+  end
+
+  @impl true
+  def handle_call(:channel, _from, channel) do
+    {:reply, channel, channel}
+  end
+
+  @impl true
+  def handle_info({:gun_down, _, _, _, _}, _state) do
+    Logger.info("GRPC Server disconnected. Reconnecting...")
+    {:noreply, connect_channel()}
+  end
+
+  defp connect_channel() do
+    address = Application.get_env(:mandolin, :core_url)
+    Logger.info("GRPC Client connecting to gateway at #{address}")
+
+    case GRPC.Stub.connect(address, interceptors: [GRPC.Client.Interceptors.Logger]) do
+      {:ok, channel} ->
+        Logger.info("GRPC Client connected to the gateway at #{address}")
+        channel
+
+      {:error, error} ->
+        Logger.error("GRPC Client could not connect to GRPC Server. Message: #{error}")
+        raise "Failed to connect to GRPC server: #{error}"
+    end
+  end
+end

connector/mandolin/lib/mandolin/lute/client.ex

@@ -0,0 +1,10 @@
+defmodule Mandolin.Lute.Client do
+  require Logger
+  alias Mandolin.Lute.Channel
+
+  def get_album_monitor do
+    Channel.channel() |> Lute.AlbumService.Stub.get_monitor(%Google.Protobuf.Empty{})
+  end
+
+
+end

connector/mandolin/lib/mandolin_web/components/core_components.ex

@@ -231,7 +231,7 @@ defmodule MandolinWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
+        "phx-submit-loading:opacity-75 rounded-lg bg-brand hover:bg-brand/75 disabled:bg-brand/50 py-2 px-3",
         "text-sm font-semibold leading-6 text-white active:text-white/80",
         @class
       ]}

connector/mandolin/lib/mandolin_web/components/layouts/app.html.heex

@@ -1,27 +1,10 @@
 <header class="px-4 sm:px-6 lg:px-8">
   <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
     <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
+      <p href="/" class="bg-brand/25 text-brand rounded-full px-2 font-medium leading-6">
+        Mandolin
       </p>
     </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
   </div>
 </header>
 <main class="px-4 py-20 sm:px-6 lg:px-8">

connector/mandolin/lib/mandolin_web/components/layouts/root.html.heex

@@ -4,9 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <.live_title>
       <%= assigns[:page_title] || "Mandolin" %>
     </.live_title>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>

connector/mandolin/lib/mandolin_web/controllers/page_controller.ex

@@ -4,6 +4,12 @@ defmodule MandolinWeb.PageController do
   def home(conn, _params) do
     # The home page is often custom made,
     # so skip the default app layout.
-    render(conn, :home, layout: false)
+
+    case Mandolin.Lute.Client.get_album_monitor() do
+      {:ok, response} ->
+        render(conn, :home, monitor: response.monitor)
+      {:error, error} ->
+        raise "Error getting album monitor: #{inspect(error)}"
+    end
   end
 end