Moon Liveview Library

Installation

Installation guide for setting moon_live package up-and-running on your project.

Step 1: Add a dependency

Add a private moon_live package to mix.exs file: 

  defp deps do
    [
      {:moon_live, "~> 4.0.0-beta.5", organization: "coingaming"},
    ]
  end

Step 2: Configure Tailwind

Ensure you have the latest Tailwind version installed in config.exs file: 

  config :tailwind,
    version: "4.1.12",

Step 3: Install dependencies

Ensure you are authenticated on hex under the coingaming organization. Install dependencies: 

  mix deps.get

Step 4: Add static plug

Add a static plug to endpoint.ex file to serve static moon icons: 

  
    plug Plug.Static,
      at: "/moon_assets/",
      from: :moon_assets,
      gzip: true

    plug Plug.Static,
      at: "/moon_live/",
      from: :moon_live,
      gzip: true

Step 5: Add MoonLive

Add MoonLive to html_helpers function to make the package available globally: 

  defp html_helpers do
    quote do
      use MoonLive
    end
  end

Step 6: Add MoonHooks

Add moonHooks to app.js file to enable MoonLive components' functionality: 

  import moonHooks from "../../deps/moon_live/assets/js/hooks/";

  let liveSocket = new LiveSocket("/live", Socket, {
    hooks: {
      ...
      ...moonHooks,
    },
  });

Step 7: Update Tailwind configuration in app.css file

Add moonBasePreset to tailwind.config.js file to extend the default Tailwind configuration. Additionally, update the content section to configure paths to MoonLive: 

  @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");

@import "tailwindcss";

@import "../../deps/moon_live/assets/css/moon-core.css";
@import "../../deps/moon_live/assets/css/moon-components.css";

Step 8. Update root HTML file

Update HTML and BODY tags in root.html.heex file. Add dir attribute to the HTML tag to fully enable the LTR/RTL feature of Tailwind. Additionally, add a main theme class to the BODY tag to enable theme support in your app: 

  <html dir="ltr">
  <body class="light-theme">

Step 9. Happy coding!

Now you are ready to use MoonLive in your project. Enjoy! 

  mix phx.server