Steps to build a Phoenix umbrella project that uses Beacon:

1. Create an umbrella phoenix app:

   mix phx.new --umbrella --install my_app

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

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

3. Add Beacon.Repo to config :my_app, ecto_repos: [MyApp.Repo, Beacon.Repo] in config.exs
4. 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

5. 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

6. Add that DataSource to your config.exs:

   config :beacon,
     data_source: MyApp.BeaconDataSource

7. Add a :beacon pipeline to your router:

     pipeline :beacon do
       plug BeaconWeb.Plug
     end

8. 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

9. Add some seeds to your seeds.exs:

   alias Beacon.Components
   alias Beacon.Pages
   alias Beacon.Layouts
   
   %{id: layout_id} =
     Layouts.create_layout!(%{
       site: "my_site",
       title: "Sample Home Page",
       meta_tags: %{"foo" => "bar"},
       stylesheets: [],
       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>
     """
   })

10. cd apps/my_app && mix ecto.reset && cd ../..
11. mix phx.server
12. visit http://localhost:4000/page/home

To enable Page management:

1. Add the following to the top of your Router:

   require BeaconWeb.PageManagement

2. Add the following scope to your Router:

     scope "/page_management", BeaconWeb.PageManagement do
       pipe_through :browser
   
       BeaconWeb.PageManagement.routes()
     end

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