Beacon

Steps to build a Phoenix umbrella project that uses Beacon:

Create an umbrella phoenix app:
```
mix phx.new --umbrella --install my_app
```

Add :beacon as a dependency to both apps in your umbrella project:

  # Local:
  {:beacon, path: "../../../beacon"},
  # Or from GitHub:
  {:beacon, github: "beaconCMS/beacon"},

Add Beacon.Repo to config :my_app, ecto_repos: [MyApp.Repo, Beacon.Repo] in config.exs

Configure the Beacon Repo in your dev.exs and prod.exs:

config :beacon, Beacon.Repo,
  username: "postgres",
  password: "postgres",
  database: "my_app_beacon",
  hostname: "localhost",
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

Create a BeaconDataSource module that implements Beacon.DataSource.Behaviour:

defmodule MyApp.BeaconDataSource do
  @behaviour Beacon.DataSource.Behaviour

  def live_data("my_site", "home", _params), do: %{vals: ["first", "second", "third"]}
  def live_data(_, _, _), do: %{}
end

Add that DataSource to your config.exs:

config :beacon,
  data_source: MyApp.BeaconDataSource

Add a :beacon pipeline to your router:

  pipeline :beacon do
    plug BeaconWeb.Plug
  end

Add a BeaconWeb scope to your router as shown below:

  scope "/", BeaconWeb do
    pipe_through :browser
    pipe_through :beacon

    live_session :beacon, session: %{"beacon_site" => "my_site"} do
      live "/page/:path", PageLive, :path
    end
  end

Add some seeds to your seeds.exs:

alias Beacon.Components
alias Beacon.Pages
alias Beacon.Layouts
alias Beacon.Stylesheets

%{id: layout_id} =
  Layouts.create_layout!(%{
    site: "my_site",
    title: "Sample Home Page",
    meta_tags: %{"foo" => "bar"},
    stylesheet_urls: [],
    body: """
    <header>
      Header
    </header>
    <%= @inner_content %>

    <footer>
      Page Footer
    </footer>
    """
  })

Pages.create_page!(%{
  path: "home",
  site: "my_site",
  layout_id: layout_id,
  template: """
  <main>
    <h2>Some Values:</h2>
    <ul>
      <%= for val <- live_data[:vals] do %>
        <%= my_component("sample_component", val: val) %>
      <% end %>
    </ul>
  </main>
  """
})

Components.create_component!(%{
  site: "my_site",
  name: "sample_component",
  body: """
  <li>
    <%= @val %>
  </li>
  """
})

Stylesheets.create_stylesheet!(%{
  site: "my_site",
  name: "sample_stylesheet",
  content: "body {cursor: zoom-in;}"
})

cd apps/my_app && mix ecto.reset && cd ../..
mix phx.server
visit http://localhost:4000/page/home
Note:
The Header and Footer from the layout
The list element from the page
The three components rendered with the live_data from your DataSource
The zoom in cursor from the stylesheet

To enable Page Management UI:

Add the following to the top of your Router:
```
require BeaconWeb.PageManagement
```

Add the following scope to your Router:

  scope "/page_management", BeaconWeb.PageManagement do
    pipe_through :browser

    BeaconWeb.PageManagement.routes()
  end

visit http://localhost:4000/page_management/pages
Edit the existing page or create a new page then click edit to go to the Page Editor (including version management)

To enable Page Management API:

Add the following to the top of your Router:
```
require BeaconWeb.PageManagementApi
```

Add the following scope to your Router:

  scope "/page_management_api", BeaconWeb.PageManagementApi do
    pipe_through :api

    BeaconWeb.PageManagementApi.routes()
  end

Check out /lib/beacon_web/page_management_api.ex for currently available API endpoints.

murtza/beacon

Beacon