Moon Liveview Library

Getting Started

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub

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

Prerequisites

Ensure you have the following prerequisites in place before proceeding with the installation:

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: Install dependencies

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

  mix deps.get

Step 3: Add static plug

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

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

Step 4: 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 5: 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 6. 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">

Happy coding!