RSS feed for sources (#110)

* Add media streaming (#108)

* [WIP] set up streaming route

* Added UUID to sources and media items

* Added media preview to MI show page

* Added plug to strip file extensions

* [VERY WIP] basic podcast RSS setup

* [WIP] got basic podcast RSS working

* [WIP] more expanding on RSS

* Comment

* [WIP] Working on refactoring feed

* Added UUID backfill to a migration

* [WIP] Moar refactoring

* [WIP] Adding UI for getting RSS feed

* Many tests

* Added conditional routing for feed URLs

* Removed the need for url_base to be set

* Updated preset name

* Rendered certain fields HTML-safe; Added logging to confirm range request support

* Fixed incorrect scheme issue

* Updated env var

* Updated other UI to use dropdown

* removed commented code

* Generate rss feeds (#123)

* Added plug to strip file extensions

* [VERY WIP] basic podcast RSS setup

* [WIP] got basic podcast RSS working

* [WIP] more expanding on RSS

* [WIP] Working on refactoring feed

* Added UUID backfill to a migration

* [WIP] Moar refactoring

* [WIP] Adding UI for getting RSS feed

* Many tests

* Added conditional routing for feed URLs

* Removed the need for url_base to be set

* Updated preset name

* Rendered certain fields HTML-safe; Added logging to confirm range request support

* Fixed incorrect scheme issue

* Updated env var

* Updated other UI to use dropdown

* removed commented code

* docs

* Added unique index to UUID fields

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -1,6 +1,8 @@
 defmodule PinchflatWeb.CustomComponents.ButtonComponents do
   @moduledoc false
-  use Phoenix.Component
+  use Phoenix.Component, global_prefixes: ~w(x-)
+
+  alias PinchflatWeb.CoreComponents
 
   @doc """
   Render a button
@@ -39,4 +41,52 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
     </button>
     """
   end
+
+  @doc """
+  Render a dropdown based off a button
+
+  ## Examples
+
+      <.button_dropdown text="Actions">
+        <:option>TEST</:option>
+      </.button_dropdown>
+  """
+  attr :text, :string, required: true
+  attr :class, :string, default: ""
+
+  slot :option, required: true
+
+  def button_dropdown(assigns) do
+    ~H"""
+    <div x-data="{ dropdownOpen: false }" class={["relative flex", @class]}>
+      <span
+        x-on:click.prevent="dropdownOpen = !dropdownOpen"
+        class={[
+          "cursor-pointer inline-flex gap-2.5 rounded-md bg-primary px-5.5 py-3",
+          "font-medium text-white hover:bg-opacity-95"
+        ]}
+      >
+        <%= @text %>
+        <CoreComponents.icon
+          name="hero-chevron-down"
+          class="fill-current duration-200 ease-linear mt-1"
+          x-bind:class="dropdownOpen && 'rotate-180'"
+        />
+      </span>
+      <div
+        x-show="dropdownOpen"
+        x-on:click.outside="dropdownOpen = false"
+        class="absolute left-0 top-full z-40 mt-2 w-full rounded-md bg-black py-3 shadow-card"
+      >
+        <ul class="flex flex-col">
+          <li :for={option <- @option}>
+            <span class="flex px-5 py-2 font-medium text-bodydark2 hover:text-white cursor-pointer">
+              <%= render_slot(option) %>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    """
+  end
 end

lib/pinchflat_web/components/custom_components/tab_components.ex

@@ -9,24 +9,31 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do
     attr :title, :string, required: true
   end
 
+  slot :tab_append, required: false
+
   def tabbed_layout(assigns) do
     ~H"""
     <div
       x-data="{ openTab: 0, activeClasses: 'text-meta-5 border-meta-5', inactiveClasses: 'border-transparent' }"
       class="w-full"
     >
-      <div class="mb-6 flex flex-wrap gap-5 border-b border-strokedark sm:gap-10">
-        <a
-          :for={{tab, idx} <- Enum.with_index(@tab)}
-          href="#"
-          @click.prevent={"openTab = #{idx}"}
-          x-bind:class={"openTab === #{idx} ? activeClasses : inactiveClasses"}
-          class="border-b-2 py-4 text-sm font-medium hover:text-meta-5 md:text-base"
-        >
-          <span class="text-xl"><%= tab.title %></span>
-        </a>
-      </div>
-      <div>
+      <header class="flex flex-col md:flex-row md:justify-between border-b border-strokedark">
+        <div class="flex flex-wrap gap-5 sm:gap-10">
+          <a
+            :for={{tab, idx} <- Enum.with_index(@tab)}
+            href="#"
+            @click.prevent={"openTab = #{idx}"}
+            x-bind:class={"openTab === #{idx} ? activeClasses : inactiveClasses"}
+            class="border-b-2 py-4 w-full sm:w-fit text-sm font-medium hover:text-meta-5 md:text-base"
+          >
+            <span class="text-xl"><%= tab.title %></span>
+          </a>
+        </div>
+        <div class="mx-4 my-4 lg:my-0 flex gap-5 sm:gap-10 items-center">
+          <%= render_slot(@tab_append) %>
+        </div>
+      </header>
+      <div class="mt-4">
         <div :for={{tab, idx} <- Enum.with_index(@tab)} x-show={"openTab === #{idx}"} class="font-medium leading-relaxed">
           <%= render_slot(tab) %>
         </div>