"assets.build": [

        "compile",

        "tailwind my_app",

        "tailwind hosted",

        "esbuild my_app",

        "esbuild hosted"

      ],

        "tailwind hosted --minify",

        "esbuild hosted --minify",

/* Hosted sites CSS — clean Tailwind, no daisyUI */

@import "tailwindcss" source(none);

@source "../css";

@source "../js";

@source "../../lib/my_app_hosted_web";

/* A Tailwind plugin that makes "hero-#{ICON}" classes available.

   The heroicons installation itself is managed by your mix.exs */

@plugin "../vendor/heroicons";

/* Add variants based on LiveView classes */

@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);

@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);

@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

/* Make LiveView wrapper divs transparent for layout */

[data-phx-session], [data-phx-teleported-src] { display: contents }

// Hosted sites JS entry point — minimal LiveSocket support, no admin features.

import "phoenix_html"

import {Socket} from "phoenix"

import {LiveSocket} from "phoenix_live_view"

import topbar from "../vendor/topbar"

const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")

const liveSocket = new LiveSocket("/live", Socket, {

  longPollFallbackMs: 2500,

  params: {_csrf_token: csrfToken},

})

topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

window.addEventListener("phx:page-loading-start", _info => topbar.show(300))

window.addEventListener("phx:page-loading-stop", _info => topbar.hide())

liveSocket.connect()

window.liveSocket = liveSocket

  ],

  hosted: [

    args:

      ~w(js/hosted.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/*),

    cd: Path.expand("../assets", __DIR__),

    env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}

  ],

  hosted: [

    args: ~w(

      --input=assets/css/hosted.css

      --output=priv/static/assets/css/hosted.css

    ),

    cd: Path.expand("..", __DIR__)

    esbuild_hosted: {Esbuild, :install_and_run, [:hosted, ~w(--sourcemap=inline --watch)]},

    tailwind: {Tailwind, :install_and_run, [:my_app, ~w(--watch)]},

    tailwind_hosted: {Tailwind, :install_and_run, [:hosted, ~w(--watch)]}

      ~r"lib/my_app_web/(controllers|live|components)/.*\.(ex|heex)$",

      ~r"lib/my_app_hosted_web/(controllers|live|components)/.*\.(ex|heex)$"

defmodule MyAppHostedWeb do

  @moduledoc """

  The entrypoint for defining the hosted site web interface.

  This module is separate from MyAppWeb and uses plain Tailwind

  (no daisyUI) with its own components and layouts.

  """

  def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)

  def router do

    quote do

      use Phoenix.Router, helpers: false

      # Import common connection and controller functions to use in pipelines

      import Plug.Conn

      import Phoenix.Controller

      import Phoenix.LiveView.Router

    end

  end

  def controller do

    quote do

      use Phoenix.Controller, formats: [:html, :json]

      use Gettext, backend: MyAppWeb.Gettext

      import Plug.Conn

      unquote(verified_routes())

    end

  end

  def live_view do

    quote do

      use Phoenix.LiveView

      unquote(html_helpers())

    end

  end

  def live_component do

    quote do

      use Phoenix.LiveComponent

      unquote(html_helpers())

    end

  end

  def html do

    quote do

      use Phoenix.Component

      # Import convenience functions from controllers

      import Phoenix.Controller,

        only: [get_csrf_token: 0, view_module: 1, view_template: 1]

      # Include general helpers for rendering HTML

      unquote(html_helpers())

    end

  end

  defp html_helpers do

    quote do

      # Translation

      use Gettext, backend: MyAppWeb.Gettext

      # HTML escaping functionality

      import Phoenix.HTML

      # Core UI components

      import MyAppHostedWeb.CoreComponents

      # Common modules used in templates

      alias Phoenix.LiveView.JS

      alias MyAppHostedWeb.Layouts

      # Routes generation with the ~p sigil

      unquote(verified_routes())

    end

  end

  def verified_routes do

    quote do

      use Phoenix.VerifiedRoutes,

        endpoint: MyAppWeb.Endpoint,

        router: MyAppHostedWeb.Router,

        statics: MyAppHostedWeb.static_paths()

    end

  end

  @doc """

  When used, dispatch to the appropriate controller/live_view/etc.

  """

  defmacro __using__(which) when is_atom(which) do

    apply(__MODULE__, which, [])

  end

end

defmodule MyAppHostedWeb.CoreComponents do

  @moduledoc """

  Provides core UI components for hosted sites.

  Uses plain Tailwind CSS (no daisyUI).

  """

  use Phoenix.Component

  use Gettext, backend: MyAppWeb.Gettext

  alias Phoenix.LiveView.JS

  @doc """

  Renders flash notices.

  ## Examples

      <.flash kind={:info} flash={@flash} />

      <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>

  """

  attr :id, :string, doc: "the optional id of flash container"

  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"

  attr :title, :string, default: nil

  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"

  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"

  slot :inner_block, doc: "the optional inner block that renders the flash message"

  def flash(assigns) do

    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)

    ~H"""

    <div

      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}

      id={@id}

      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}

      role="alert"

      class="toast toast-top toast-end z-50"

      {@rest}

    >

      <div class={[

        "alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",

        @kind == :info && "alert-info",

        @kind == :error && "alert-error"

      ]}>

        <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />

        <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />

        <div>

          <p :if={@title} class="font-semibold">{@title}</p>

          <p>{msg}</p>

        </div>

        <div class="flex-1" />

        <button type="button" class="group self-start cursor-pointer" aria-label={gettext("close")}>

          <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />

        </button>

      </div>

    </div>

    """

  end

  @doc """

  Renders a [Heroicon](https://heroicons.com).

  ## Examples

      <.icon name="hero-x-mark" />

      <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />

  """

  attr :name, :string, required: true

  attr :class, :any, default: "size-4"

  def icon(%{name: "hero-" <> _} = assigns) do

    ~H"""

    <span class={[@name, @class]} />

    """

  end

  ## JS Commands

  def show(js \\ %JS{}, selector) do

    JS.show(js,

      to: selector,

      time: 300,

      transition:

        {"transition-all ease-out duration-300",

         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",

         "opacity-100 translate-y-0 sm:scale-100"}

    )

  end

  def hide(js \\ %JS{}, selector) do

    JS.hide(js,

      to: selector,

      time: 200,

      transition:

        {"transition-all ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",

         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}

    )

  end

  @doc """

  Translates an error message using gettext.

  """

  def translate_error({msg, opts}) do

    if count = opts[:count] do

      Gettext.dngettext(MyAppWeb.Gettext, "errors", msg, msg, count, opts)

    else

      Gettext.dgettext(MyAppWeb.Gettext, "errors", msg, opts)

    end

  end

  @doc """

  Translates the errors for a field from a keyword list of errors.

  """

  def translate_errors(errors, field) when is_list(errors) do

    for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})

  end

end

defmodule MyAppHostedWeb.Layouts do

  @moduledoc """

  Layouts for hosted sites.

  """

  use MyAppHostedWeb, :html

  embed_templates "layouts/*"

  @doc """

  Renders the hosted app layout.

  ## Examples

      <Layouts.app flash={@flash}>

        <h1>Content</h1>

      </Layouts.app>

  """

  attr :flash, :map, required: true, doc: "the map of flash messages"

  attr :current_scope, :map,

    default: nil,

    doc: "the current [scope](https://hexdocs.pm/phoenix/scopes.html)"

  slot :inner_block, required: true

  def app(assigns) do

    ~H"""

    <main class="px-4 py-8 sm:px-6 lg:px-8">

      <div class="mx-auto max-w-4xl">

        {render_slot(@inner_block)}

      </div>

    </main>

    <.flash_group flash={@flash} />

    """

  end

  @doc """

  Shows the flash group with standard titles and content.

  ## Examples

      <.flash_group flash={@flash} />

  """

  attr :flash, :map, required: true, doc: "the map of flash messages"

  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"

  def flash_group(assigns) do

    ~H"""

    <div id={@id} aria-live="polite">

      <.flash kind={:info} flash={@flash} />

      <.flash kind={:error} flash={@flash} />

      <.flash

        id="client-error"

        kind={:error}

        title={gettext("We can't find the internet")}

        phx-disconnected={show(".phx-client-error #client-error") |> JS.remove_attribute("hidden")}

        phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})}

        hidden

      >

        {gettext("Attempting to reconnect")}

        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />

      </.flash>

      <.flash

        id="server-error"

        kind={:error}

        title={gettext("Something went wrong!")}

        phx-disconnected={show(".phx-server-error #server-error") |> JS.remove_attribute("hidden")}

        phx-connected={hide("#server-error") |> JS.set_attribute({"hidden", ""})}

        hidden

      >

        {gettext("Attempting to reconnect")}

        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />

      </.flash>

    </div>

    """

  end

end

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="csrf-token" content={get_csrf_token()} />

    <.live_title default={assigns[:page_title] || "Welcome"}>

      {assigns[:page_title]}

    </.live_title>

    <link phx-track-static rel="stylesheet" href={~p"/assets/css/hosted.css"} />

    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/hosted.js"}>

    </script>

  </head>

  <body>

    {@inner_content}

  </body>

</html>

defmodule MyAppHostedWeb.ErrorHTML do

  @moduledoc """

  This module is invoked by your endpoint in case of errors on HTML requests

  for hosted sites.

  """

  use MyAppHostedWeb, :html

  def render(template, _assigns) do

    Phoenix.Controller.status_message_from_template(template)

  end

end

defmodule MyAppHostedWeb.PageController do

  use MyAppHostedWeb, :controller

  def show(conn, _params) do

    render(conn, :show, site: conn.assigns.current_site)

  end

end

defmodule MyAppHostedWeb.PageHTML do

  use MyAppHostedWeb, :html

  embed_templates "page_html/*"

end

<Layouts.app flash={@flash}>

  <h1 class="text-2xl font-bold">{@site.name}</h1>

</Layouts.app>

defmodule MyAppHostedWeb.Router do

  use MyAppHostedWeb, :router

  pipeline :browser do

    plug :accepts, ["html"]

    plug :fetch_session

    plug :fetch_live_flash

    plug :put_root_layout, html: {MyAppHostedWeb.Layouts, :root}

    plug :protect_from_forgery

    plug :put_secure_browser_headers

  end

  scope "/", MyAppHostedWeb do

    pipe_through :browser

    get "/", PageController, :show

  end

end

  plug MyAppWeb.Plugs.ServeHostedSite, router: MyAppHostedWeb.Router