Per-page metadata for Phoenix LiveView apps: breadcrumbs, active-link state, SEO meta tag rendering.

Each page is described by a PhoenixPageMeta.PageMeta struct, which a LiveView returns from its page_meta/2 callback. The library renders the SEO meta tags, builds the breadcrumb trail, and resolves active-link state from it.

Setup

See PhoenixPageMeta.PageMeta for the struct and its configuration. In short:

# config/config.exs (all optional)
config :phoenix_page_meta,
  site_name: "MyApp",
  supported_locales: [:en, :es],
  extra_fields: [icon: nil]

# in a LiveView
%PhoenixPageMeta.PageMeta{title: "Hello", path: "/hello"}

In LiveViews

In MyAppWeb.live_view/0:

def live_view do
  quote do
    use Phoenix.LiveView, layout: ...
    @behaviour PhoenixPageMeta.LiveView
    import PhoenixPageMeta.LiveView, only: [assign_page_meta: 1]
  end
end

In each LiveView:

defmodule MyAppWeb.SomeLive do
  use MyAppWeb, :live_view

  @impl PhoenixPageMeta.LiveView
  def page_meta(_socket, _action) do
    %PhoenixPageMeta.PageMeta{title: "Hello", path: "/hello"}
  end

  def mount(_params, _session, socket) do
    {:ok, assign_page_meta(socket)}
  end
end

See PhoenixPageMeta.PageMeta, PhoenixPageMeta.Breadcrumb, PhoenixPageMeta.Components.Breadcrumbs, PhoenixPageMeta.Components.MetaTags, PhoenixPageMeta.Site, and PhoenixPageMeta.LiveView.