From 70c2246d87912d1b64b512c55a58708a1bca171b Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Wed, 2 Aug 2023 17:10:04 -0400
Subject: [PATCH 01/12] WIP - guides

---
 guides/introduction/installation.md           | 273 ++----------------
 guides/introduction/your_first_site.md        |  16 +
 priv/templates/install/beacon_router_scope.ex |   1 -
 3 files changed, 41 insertions(+), 249 deletions(-)
 create mode 100644 guides/introduction/your_first_site.md

diff --git a/guides/introduction/installation.md b/guides/introduction/installation.md
index cd58a0bc..c155514b 100644
--- a/guides/introduction/installation.md
+++ b/guides/introduction/installation.md
@@ -1,10 +1,12 @@
 # Installation
 
-Beacon is an application that runs on top of an existing Phoenix LiveView application. In this guide we'll install all required tools, generate a new Phoenix LiveView application, install Beacon, and generate a new site.
+Beacon is an application that runs in existing Phoenix LiveView applications. In this guide we'll install all required tools, generate a new Phoenix LiveView application, and install Beacon.
+
+After the installation is done, please follow the guide [Your First Site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md) to learn how to setup a functioning site.
 
 ## TLDR
 
-We recomment following the guide thoroughly, but if you want a short version or to just recap the main steps:
+We recommend following the guide thoroughly, but if you want a short version or just recap the main steps:
 
 1. Install Elixir v1.14+
 
@@ -16,6 +18,8 @@ We recomment following the guide thoroughly, but if you want a short version or
 
 3. Install [cmark-gfm](https://github.com/github/cmark-gfm)
 
+_Note this dependency will be removed eventually._
+
 4. Setup a database
 
 5. Generate a new Phoenix application
@@ -27,24 +31,20 @@ We recomment following the guide thoroughly, but if you want a short version or
 6. Add `:beacon` dependency to `mix.exs`
 
   ```elixir
-  {:beacon, github: "beaconCMS/beacon"}
+  {:beacon, github: "BeaconCMS/beacon", override: true}
   ```
+  
+7. Change dep `:floki` to remove `only: :test` as:
 
-7. Run `mix deps.get`
-
-8. Add `:beacon` dependency to `.formatter.exs` in `:
-
-9. Run `mix beacon.install --site my_site`
-
-10. Run `mix setup`
-
-11. Run `mix phx.server`
+  ```elixir
+  {:floki, ">= 0.30.0"}
+  ```
 
-Visit http://localhost:4000/my_site/home to see the page created from seeds or http://localhost:4000/admin to manage your new created site.
+8. Add `:beacon` into `:import_deps` in file `.formatter.exs`
 
-## Steps
+9. Run `mix setup`
 
-Detailed instructions:
+## Detailed Instructions
 
 ### Elixir 1.14 or later
 
@@ -74,7 +74,9 @@ mix archive.install hex phx_new
 
 ### cmark-gfm
 
-Is the tool used to convert Markdown to HTML. Install it from https://github.com/github/cmark-gfm and make sure the binary `cmark-gfm` is in your env `$PATH`
+Is the tool used to convert Markdown to HTML. Install it from [https://github.com/github/cmark-gfm](https://github.com/github/cmark-gfm) and make sure the binary `cmark-gfm` is present in your env `$PATH`
+
+_Note this dependency will be removed eventually._
 
 ### Database
 
@@ -103,17 +105,19 @@ After it finishes you can open the generated directory: `cd my_app`
 1. Edit `mix.exs` to add `:beacon` as a dependency:
 
 ```elixir
-{:beacon, github: "beaconCMS/beacon"}
+{:beacon, github: "BeaconCMS/beacon", override: true},
 ```
 
 Or add to both apps `my_app` and `my_app_web` if running in an Umbrella app.
 
-2. Fetch beacon dep:
+2. Change the `:floki` dep to look like:
 
-```sh
-mix deps.get
+```elixir
+{:floki, ">= 0.30.0"}
 ```
 
+_Remove `only: :test`_
+
 3. Add `:beacon` to `import_deps` in the .formatter.exs file:
 
 ```elixir
@@ -123,231 +127,4 @@ mix deps.get
 ]
 ```
 
-4. Run `mix compile`
-
-### Configuration and generating your first site
-
-Beacon requires a couple of changes in your project to get your first site up and running. You can either choose to use the `beacon.install` generator provided by Beacon or make such changes manually:
-
-#### Using the generator
-
-Run and follow the instructions:
-
-```sh
-mix beacon.install --site my_site
-```
-
-For more details please check out the docs: `mix help beacon.install`
-
-#### Manually
-
-1. Include `Beacon.Repo` in your project's `config.exs` file:
-
-    ```elixir
-    config :my_app, ecto_repos: [MyApp.Repo, Beacon.Repo]
-    ```
-
-2. Configure the Beacon Repo in dev.exs, prod.exs, or runtime.exs as needed for your environment:
-
-    ```elixir
-    config :beacon, Beacon.Repo,
-      username: "postgres",
-      password: "postgres",
-      hostname: "localhost",
-      database: "db_name_replace_me",
-      pool_size: 10
-    ```
-
-    In dev.exs you may add these extra options:
-
-    ```elixir
-    stacktrace: true,
-    show_sensitive_data_on_connection_error: true
-    ```
-
-3. Create a `BeaconDataSource` module that implements `Beacon.DataSource.Behaviour`:
-
-    ```elixir
-    defmodule MyApp.BeaconDataSource do
-      @behaviour Beacon.DataSource.Behaviour
-
-      def live_data(:my_site, ["home"], _params), do: %{vals: ["first", "second", "third"]}
-      def live_data(:my_site, ["blog", blog_slug], _params), do: %{blog_slug_uppercase: String.upcase(blog_slug)}
-      def live_data(_, _, _), do: %{}
-    end
-    ```
-
-4. Edit `lib/my_app_web/router.ex` to add  `use Beacon.Router`, create a new `scope`, and call both `beacon_site` and `beacon_admin` in your app router:
-
-    ```elixir
-    use Beacon.Router
-
-    scope "/" do
-      pipe_through :browser
-      beacon_site "/my_site", site: :my_site
-      beacon_admin "/admin"
-    end
-    ```
-
-Make sure you're not adding the macros `beacon_site` and `beacon_admin` into the existing `scope "/", MyAppWeb`, otherwise requests will fail.
-
-5. Include the `Beacon` supervisor in the list of `children` applications in the file `lib/my_app/application.ex`:
-
-    ```elixir
-    @impl true
-    def start(_type, _args) do
-      children = [
-        # ommited others for brevity
-        MyAppWeb.Endpoint,
-        {Beacon, sites: [[site: :my_site, endpoint: MyAppWeb.Endpoint, data_source: MyApp.BeaconDataSource]]}
-      ]
-
-      opts = [strategy: :one_for_one, name: MyApp.Supervisor]
-      Supervisor.start_link(children, opts)
-    end
-    ```
-
-For more info on site options, check out `Beacon.start_link/1`.
-
-**Notes**
-- The site identification has to be the same across your environment, in configuration, `beacon_site`, and `live_data`. In this example we're using `:my_site`.
-- Include it after your app `Endpoint`.
-
-6. Add some seeds in the seeds file `priv/repo/beacon_seeds.exs`:
-
-    ```elixir
-    alias Beacon.Content
-
-    Content.create_stylesheet!(%{
-      site: "<%= site %>",
-      name: "sample_stylesheet",
-      content: "body {cursor: zoom-in;}"
-    })
-
-    Content.create_component!(%{
-      site: "<%= site %>",
-      name: "sample_component",
-      body: """
-      <li>
-        <%%= @val %>
-      </li>
-      """
-    })
-
-    layout =
-      Content.create_layout!(%{
-        site: "<%= site %>",
-        title: "Sample Home Page",
-        stylesheet_urls: [],
-        body: """
-        <header>
-          Header
-        </header>
-        <%%= @inner_content %>
-
-        <footer>
-          Page Footer
-        </footer>
-        """
-      })
-
-    Content.publish_layout(layout)
-
-    %{
-      path: "home",
-      site: "<%= site %>",
-      layout_id: layout.id,
-      template: """
-      <main>
-        <h2>Some Values:</h2>
-        <ul>
-          <%%= for val <- @beacon_live_data[:vals] do %>
-            <%%= my_component("sample_component", val: val) %>
-          <%% end %>
-        </ul>
-
-        <.form :let={f} for={%{}} as={:greeting} phx-submit="hello">
-          Name: <%%= text_input f, :name %> <%%= submit "Hello" %>
-        </.form>
-
-        <%%= if assigns[:message], do: assigns.message %>
-
-        <%%= dynamic_helper("upcase", "Beacon") %>
-      </main>
-      """,
-      helpers: [
-        %{
-          name: "upcase",
-          args: "name",
-          code: """
-            String.upcase(name)
-          """
-        }
-      ],
-      events: [
-        %{
-          name: "hello",
-          code: """
-            {:noreply, assign(socket, :message, "Hello \#{event_params["greeting"]["name"]}!")}
-          """
-        }
-      ]
-    }
-    |> Content.create_page!()
-    |> Content.publish_page()
-
-    %{
-      path: "blog/:blog_slug",
-      site: "<%= site %>",
-      layout_id: layout.id,
-      template: """
-      <main>
-        <h2>A blog</h2>
-        <ul>
-          <li>Path Params Blog Slug: <%%= @beacon_path_params.blog_slug %></li>
-          <li>Live Data blog_slug_uppercase: <%%= @beacon_live_data.blog_slug_uppercase %></li>
-        </ul>
-      </main>
-      """
-    }
-    |> Content.create_page!()
-    |> Content.publish_page()
-    ```
-
-6. Include new seeds in the `ecto.setup` alias in `mix.exs`:
-
-    ```elixir
-    "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs", "run priv/repo/beacon_seeds.exs"],
-    ```
-
-### Setup database, seeds, and assets:
-
-Feel free to edit `priv/repo/beacon_seeds.exs` as you wish and run:
-
-```sh
-mix setup
-```
-
-### Visit your new site and admin
-
-Run the Phoenix server:
-
-```sh
-mix phx.server
-```
-
-Open http://localhost:4000/my_site/home and note:
-
-- The Header and Footer from the layout
-- The list element from the page
-- The three components rendered with the beacon_live_data from your DataSource
-- The zoom in cursor from the stylesheet
-
-Open http://localhost:4000/my_site/blog/my_first_post and note:
-
-- The Header and Footer from the layout
-- The path params blog slug
-- The live data blog_slug_uppercase
-- The zoom in cursor from the stylesheet
-
-Open http://localhost:4000/admin to manage your new created site.
+4. Run `mix setup`
\ No newline at end of file
diff --git a/guides/introduction/your_first_site.md b/guides/introduction/your_first_site.md
new file mode 100644
index 00000000..a9c538d4
--- /dev/null
+++ b/guides/introduction/your_first_site.md
@@ -0,0 +1,16 @@
+# Your First Site
+
+In this guide we'll walk trough all the steps necessary to have a functioning site with components, styles, and a contact form to demonstrate how Beacon works.
+
+It's required that you have a working Phoenix LiveView with Beacon and Beacon LiveAdmin installed and configured correctly, please follow the [Beacon installation guide](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/installation.md) and [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md) if you're starting from stratch.
+
+## Generating the site
+
+Each site requires some minimal configuratin to run in your application, lets use the built-in `beacon.install` generator to get started quickly. In the root of your application, execute:
+
+```
+mix beacon.install --site my_site
+```
+
+You can use whatever name you like as long as you remember to change it in the following steps.
+
diff --git a/priv/templates/install/beacon_router_scope.ex b/priv/templates/install/beacon_router_scope.ex
index 2bd4e61e..a59aeb72 100644
--- a/priv/templates/install/beacon_router_scope.ex
+++ b/priv/templates/install/beacon_router_scope.ex
@@ -3,6 +3,5 @@
 
   scope "/" do
     pipe_through :browser
-    beacon_admin "/admin"
     beacon_site "/<%= site %>", site: :<%= site %>
   end

From de9a0b72d3a5418add3bd999f25e30aaaef3ced7 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Thu, 3 Aug 2023 14:17:59 -0400
Subject: [PATCH 02/12] WIP your first side guide and remove some install
 resources

removing seeds since admin will replace it
---
 guides/introduction/your_first_site.md |  85 +++++++++++++++++++++
 lib/mix/tasks/install.ex               |  94 +++--------------------
 priv/templates/install/seeds.exs       | 102 -------------------------
 test/mix/tasks/install_test.exs        |  58 +-------------
 4 files changed, 95 insertions(+), 244 deletions(-)
 delete mode 100644 priv/templates/install/seeds.exs

diff --git a/guides/introduction/your_first_site.md b/guides/introduction/your_first_site.md
index a9c538d4..1f65b0f1 100644
--- a/guides/introduction/your_first_site.md
+++ b/guides/introduction/your_first_site.md
@@ -14,3 +14,88 @@ mix beacon.install --site my_site
 
 You can use whatever name you like as long as you remember to change it in the following steps.
 
+## Configuring the routes
+
+First of all delete the following scope added by Phoenix automatically:
+
+```elixir
+scope "/", MyAppWeb do
+  pipe_through :browser
+
+  get "/", PageController, :home
+end
+```
+
+Also feel free to delete page_controller.ex and related files, you won't need it.
+
+And finally change the generated scope created by Beacon to look like:
+
+```elixir
+scope "/" do
+  pipe_through :browser
+  beacon_site "/", site: :my_site
+end
+```
+
+With this change the site will be served at [http://localhost:4000/](http://localhost:4000/)
+
+## Connecting to a database
+
+The install generator will change and create some files for you but the most important configuration at this point is adjusting the Repo credentials since Beacon requires a database to store layouts, pages, and all site data.
+
+Inspect the config `config :beacon, Beacon.Repo` in the file `config/dev.exs` and make sure it looks correct to your environment.
+
+## Acessing LiveAdmin to manage your site
+
+We're done with configuration so far, let's run the project and access the LiveAdmin UI.
+
+Firstly execute to install dependencies:
+
+```sh
+mix setup
+```
+
+And now start your Phoenix app:
+
+```sh
+mix phx.server
+```
+
+Visit [http://localhost:4000/admin](http://localhost:4000/admin) and you should see `my_site` listed.
+
+## Creating a layout
+
+Click on the "Layouts" button, then "Create New Layout". On this page we'll create the layout where all pages will be rendered. It will contain a footer, header, and the placeholder to render page's content.
+
+
+Input "Main" for title and the following template:
+
+```heex
+<header>TODO</header>
+<%= @inner_content %>
+<footer>TODO</footer>
+```
+
+Save the changes and Publish it.
+
+## Creating a page
+
+Now let's create the first page using the layout you just published. The content of this page will be rendered between the header and footer, in the `@inner_content` placeholder.
+
+Go to "Pages", click "Create New Page", and input some data into the form:
+
+* Path: leave it empty, that will be the root home page
+* Title: Home Page - or be creative with it.
+* Template:
+
+```heex
+<div>TODO</div>
+```
+
+Save the changes and Publish it.
+
+Go ahead and visit [http://localhost:4000](http://localhost:4000) that's your first published page! Now dive into improving that page with more features.
+
+## Adding a contact form
+
+## Improving SEO
diff --git a/lib/mix/tasks/install.ex b/lib/mix/tasks/install.ex
index eedf228f..397c5eba 100644
--- a/lib/mix/tasks/install.ex
+++ b/lib/mix/tasks/install.ex
@@ -41,32 +41,29 @@ defmodule Mix.Tasks.Beacon.Install do
     prod_config_file = config_file_path("prod.exs")
     maybe_inject_beacon_repo_config(prod_config_file, bindings)
 
-    maybe_create_beacon_data_source_file(bindings)
-
     maybe_inject_beacon_site_routes(bindings)
 
     maybe_inject_beacon_supervisor(bindings)
 
-    maybe_create_beacon_seeds(bindings)
-
-    # Run new seeds in mix setup
-    maybe_inject_beacon_seeds_alias(bindings)
-
     Mix.shell().info("""
 
-      A new site has been configured at /#{bindings[:site]} and a sample page is available at /#{bindings[:site]}/home
+      A new site has been configured at /#{bindings[:site]}
 
-      Usually it can be accessed at http://localhost:4000/#{bindings[:site]}/home
+      Please check out the guides for more info:
 
-      Note that the generator changes existing files and it may not be formatted, please run `mix format` if needed.
+        * https://github.com/BeaconCMS/beacon/tree/main/guides
+        * https://github.com/BeaconCMS/beacon_live_admin/tree/main/guides
 
-      Now you can adjust your project's config files, router.ex, or beacon_seeds.exs as you wish and run:
+      Adjust the configuration as needed and run:
 
           $ mix setup
 
       And then start your Phoenix app:
 
           $ mix phx.server
+
+      Note that the generator changes existing files which may not be formatted correctly, please run `mix format` if needed.
+
     """)
   end
 
@@ -126,20 +123,6 @@ defmodule Mix.Tasks.Beacon.Install do
     Path.join(root_path(), "config/#{file_name}")
   end
 
-  @doc false
-  def maybe_create_beacon_data_source_file(bindings) do
-    dest_path = get_in(bindings, [:beacon_data_source, :dest_path])
-    template_path = get_in(bindings, [:beacon_data_source, :template_path])
-
-    if File.exists?(dest_path) do
-      Mix.shell().info([:yellow, "* skip ", :reset, "creating file ", Path.relative_to_cwd(dest_path), " (already exists)"])
-    else
-      File.touch!(dest_path)
-      Mix.shell().info([:green, "* creating ", :reset, Path.relative_to_cwd(dest_path)])
-      File.write!(dest_path, EEx.eval_file(template_path, bindings))
-    end
-  end
-
   @doc false
   def maybe_inject_beacon_site_routes(bindings) do
     router_file = get_in(bindings, [:router, :path])
@@ -171,68 +154,18 @@ defmodule Mix.Tasks.Beacon.Install do
       Mix.shell().info([:yellow, "* skip ", :reset, "injecting beacon supervisor into ", Path.relative_to_cwd(application_file), " (already exists)"])
     else
       site = bindings[:site]
-      data_source = bindings |> get_in([:beacon_data_source, :module_name]) |> inspect()
       endpoint = bindings |> get_in([:endpoint, :module_name]) |> inspect()
 
       new_application_file_content =
         application_file_content
         |> String.replace(".Endpoint\n", ".Endpoint,\n")
-        |> String.replace(~r/(children = [^]]*)]/, "\\1 {Beacon, sites: [[site: :#{site}, endpoint: #{endpoint}, data_source: #{data_source}]]}\n]")
+        |> String.replace(~r/(children = [^]]*)]/, "\\1 {Beacon, sites: [[site: :#{site}, endpoint: #{endpoint}]]}\n]")
 
       Mix.shell().info([:green, "* injecting ", :reset, Path.relative_to_cwd(application_file)])
       File.write!(application_file, new_application_file_content)
     end
   end
 
-  @doc false
-  def maybe_create_beacon_seeds(bindings) do
-    seeds_path = get_in(bindings, [:seeds, :path])
-    template_path = get_in(bindings, [:seeds, :template_path])
-
-    File.mkdir_p!(Path.dirname(seeds_path))
-    File.touch!(seeds_path)
-
-    seeds_content = EEx.eval_file(template_path, bindings)
-    seeds_file_content = File.read!(seeds_path)
-
-    if Enum.any?(
-         ["Content.create_stylesheet!", "Content.create_component!", "Layouts.create_layout!", "Pages.create_page!"],
-         &String.contains?(seeds_file_content, &1)
-       ) do
-      Mix.shell().info([:yellow, "* skip ", :reset, "injecting seeds into ", Path.relative_to_cwd(seeds_path), " (already exists)"])
-    else
-      new_seeds_content =
-        seeds_file_content
-        |> String.trim_trailing()
-        |> Kernel.<>(seeds_content)
-        |> String.trim_leading()
-
-      Mix.shell().info([:green, "* creating ", :reset, Path.relative_to_cwd(seeds_path)])
-      File.write!(seeds_path, new_seeds_content)
-    end
-  end
-
-  @doc false
-  def maybe_inject_beacon_seeds_alias(bindings) do
-    mix_path = get_in(bindings, [:mix, :path])
-    relative_seeds_path = get_in(bindings, [:seeds, :path]) |> Path.relative_to_cwd()
-
-    mix_file_content = File.read!(mix_path)
-
-    cond do
-      String.contains?(mix_file_content, "run #{relative_seeds_path}") ->
-        Mix.shell().info([:yellow, "* skip ", :reset, "injecting beacon seeds path into ", Path.relative_to_cwd(mix_path), " (already exists)"])
-
-      !String.contains?(mix_file_content, "ecto.setup") ->
-        Mix.shell().info([:yellow, "* skip ", :reset, "injecting beacon seeds path into ", Path.relative_to_cwd(mix_path), " (nothing to update)"])
-
-      true ->
-        new_mix_file_content = String.replace(mix_file_content, ~r/(\"ecto\.setup\":[^]]*)]/, "\\1, \"run #{relative_seeds_path}\"]")
-        Mix.shell().info([:green, "* injecting ", :reset, Path.relative_to_cwd(mix_path)])
-        File.write!(mix_path, new_mix_file_content)
-    end
-  end
-
   defp root_path do
     if Mix.Phoenix.in_umbrella?(File.cwd!()) do
       Path.expand("../../")
@@ -261,11 +194,6 @@ defmodule Mix.Tasks.Beacon.Install do
       ctx_app: ctx_app,
       templates_path: templates_path,
       site: site,
-      beacon_data_source: %{
-        dest_path: Path.join([root, lib_path, "beacon_data_source.ex"]),
-        template_path: Path.join([templates_path, "install", "beacon_data_source.ex"]),
-        module_name: Module.concat(base_module, "BeaconDataSource")
-      },
       endpoint: %{
         module_name: Module.concat(web_module, "Endpoint")
       },
@@ -276,10 +204,6 @@ defmodule Mix.Tasks.Beacon.Install do
       application: %{
         path: Path.join([root, lib_path, "application.ex"])
       },
-      seeds: %{
-        path: Path.join([root, "priv", "repo", "beacon_seeds.exs"]),
-        template_path: Path.join([templates_path, "install", "seeds.exs"])
-      },
       mix: %{
         path: Path.join([root, "mix.exs"])
       }
diff --git a/priv/templates/install/seeds.exs b/priv/templates/install/seeds.exs
deleted file mode 100644
index d4a10ece..00000000
--- a/priv/templates/install/seeds.exs
+++ /dev/null
@@ -1,102 +0,0 @@
-
-
-# Script for populating the database. You can run it as:
-#
-#     mix run priv/repo/beacon_seeds.exs
-
-alias Beacon.Content
-
-Content.create_stylesheet!(%{
-  site: "<%= site %>",
-  name: "sample_stylesheet",
-  content: "body {cursor: zoom-in;}"
-})
-
-Content.create_component!(%{
-  site: "<%= site %>",
-  name: "sample_component",
-  body: """
-  <li>
-    <%%= @val %>
-  </li>
-  """
-})
-
-layout =
-  Content.create_layout!(%{
-    site: "<%= site %>",
-    title: "Sample Home Page",
-    stylesheet_urls: [],
-    body: """
-    <header>
-      Header
-    </header>
-    <%%= @inner_content %>
-
-    <footer>
-      Page Footer
-    </footer>
-    """
-  })
-
-Content.publish_layout(layout)
-
-%{
-  path: "home",
-  site: "<%= site %>",
-  layout_id: layout.id,
-  template: """
-  <main>
-    <h2>Some Values:</h2>
-    <ul>
-      <%%= for val <- @beacon_live_data[:vals] do %>
-        <%%= my_component("sample_component", val: val) %>
-      <%% end %>
-    </ul>
-
-    <.form :let={f} for={%{}} as={:greeting} phx-submit="hello">
-      Name: <%%= text_input f, :name %> <%%= submit "Hello" %>
-    </.form>
-
-    <%%= if assigns[:message], do: assigns.message %>
-
-    <%%= dynamic_helper("upcase", "Beacon") %>
-  </main>
-  """,
-  helpers: [
-    %{
-      name: "upcase",
-      args: "name",
-      code: """
-        String.upcase(name)
-      """
-    }
-  ],
-  events: [
-    %{
-      name: "hello",
-      code: """
-        {:noreply, assign(socket, :message, "Hello \#{event_params["greeting"]["name"]}!")}
-      """
-    }
-  ]
-}
-|> Content.create_page!()
-|> Content.publish_page()
-
-%{
-  path: "blog/:blog_slug",
-  site: "<%= site %>",
-  layout_id: layout.id,
-  template: """
-  <main>
-    <h2>A blog</h2>
-    <ul>
-      <li>Path Params Blog Slug: <%%= @beacon_path_params.blog_slug %></li>
-      <li>Live Data blog_slug_uppercase: <%%= @beacon_live_data.blog_slug_uppercase %></li>
-    </ul>
-  </main>
-  """
-}
-|> Content.create_page!()
-|> Content.publish_page()
diff --git a/test/mix/tasks/install_test.exs b/test/mix/tasks/install_test.exs
index 95118976..00087cff 100644
--- a/test/mix/tasks/install_test.exs
+++ b/test/mix/tasks/install_test.exs
@@ -75,35 +75,6 @@ defmodule Mix.Tasks.Beacon.InstallTest do
     end
   end
 
-  test "creates seeds file", %{bindings: bindings} do
-    dest_file = random_file_name(get_in(bindings, [:seeds, :path]))
-    bindings = put_in(bindings, [:seeds, :path], dest_file)
-
-    seeds_content = EEx.eval_file(get_in(bindings, [:seeds, :template_path]), bindings) |> String.trim_leading()
-
-    capture_io(fn ->
-      Install.maybe_create_beacon_seeds(bindings)
-
-      assert File.exists?(dest_file)
-      assert File.read!(dest_file) == seeds_content
-    end)
-  end
-
-  test "does not create beacon seeds twice", %{bindings: bindings} do
-    dest_file = random_file_name(get_in(bindings, [:seeds, :path]))
-    bindings = put_in(bindings, [:seeds, :path], dest_file)
-
-    capture_io(fn ->
-      Install.maybe_create_beacon_seeds(bindings)
-
-      file_content = File.read!(dest_file)
-
-      Install.maybe_create_beacon_seeds(bindings)
-
-      assert file_content == File.read!(dest_file)
-    end)
-  end
-
   test "adds router content to its file", %{bindings: bindings} do
     dest_file = random_file_name(get_in(bindings, [:router, :path]))
     bindings = put_in(bindings, [:router, :path], dest_file)
@@ -212,33 +183,6 @@ defmodule Mix.Tasks.Beacon.InstallTest do
     end)
   end
 
-  test "creates beacon data source file", %{bindings: bindings} do
-    dest_path = get_in(bindings, [:beacon_data_source, :dest_path])
-    random_path = random_file_name(dest_path, false)
-    template_path = get_in(bindings, [:beacon_data_source, :template_path])
-
-    bindings = put_in(bindings, [:beacon_data_source, :dest_path], random_path)
-    file_content = EEx.eval_file(template_path, bindings)
-
-    capture_io(fn ->
-      Install.maybe_create_beacon_data_source_file(bindings)
-
-      assert File.read!(random_path) == file_content
-    end)
-  end
-
-  test "does not create a new file if it already exists", %{bindings: bindings} do
-    dest_path = get_in(bindings, [:beacon_data_source, :dest_path])
-    random_path = random_file_name(dest_path)
-    bindings = put_in(bindings, [:beacon_data_source, :dest_path], random_path)
-
-    capture_io(fn ->
-      Install.maybe_create_beacon_data_source_file(bindings)
-
-      assert "" == File.read!(random_path)
-    end)
-  end
-
   describe "maybe_inject_beacon_supervisor" do
     def write_application_file(%{bindings: bindings}) do
       application_file_template = ~S"""
@@ -299,7 +243,7 @@ defmodule Mix.Tasks.Beacon.InstallTest do
         Install.maybe_inject_beacon_supervisor(bindings)
 
         assert File.read!(application_file_path) =~
-                 ~r/{Beacon, sites: \[\[site: :my_test_blog, endpoint: DummyAppWeb.Endpoint, data_source: DummyApp.BeaconDataSource\]\]}\n.*\]/
+                 ~r/{Beacon, sites: \[\[site: :my_test_blog, endpoint: DummyAppWeb.Endpoint\]\]}\n.*\]/
       end)
     end
   end

From fc81b76045451208495d6d104d77a48b64193707 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Thu, 3 Aug 2023 17:15:20 -0400
Subject: [PATCH 03/12] WIP your first site guide

---
 guides/introduction/your_first_site.md | 117 ++++++++++++++++++++++---
 1 file changed, 107 insertions(+), 10 deletions(-)

diff --git a/guides/introduction/your_first_site.md b/guides/introduction/your_first_site.md
index 1f65b0f1..624e2920 100644
--- a/guides/introduction/your_first_site.md
+++ b/guides/introduction/your_first_site.md
@@ -65,37 +65,134 @@ Visit [http://localhost:4000/admin](http://localhost:4000/admin) and you should
 
 ## Creating a layout
 
-Click on the "Layouts" button, then "Create New Layout". On this page we'll create the layout where all pages will be rendered. It will contain a footer, header, and the placeholder to render page's content.
+Beacon has built-in support for Tailwind classes and we'll be using the [Flowbite](https://flowbite.com/docs/) components to style our page but you're free to use any tool or design system you want.
 
+Click on the "Layouts" button, then "Create New Layout". On this page we'll create the layout where all pages will be rendered. It will contain a footer, header, and the placeholder to render page's content.
 
 Input "Main" for title and the following template:
 
 ```heex
-<header>TODO</header>
+<nav class="bg-white border-gray-200 dark:bg-gray-900">
+  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+    <a href="/" class="flex items-center">
+      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">My Site</span>
+    </a>
+    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+        <span class="sr-only">Open main menu</span>
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+        </svg>
+    </button>
+    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
+      <ul
+        class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+        <li>
+          <a href="#"
+            class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
+            aria-current="page">Home</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
 <%= @inner_content %>
-<footer>TODO</footer>
 ```
 
+The `@inner_content` is important here, it's where page's templates will be injected into the layout.
+
 Save the changes and Publish it.
 
-## Creating a page
+## Creating the home page
 
-Now let's create the first page using the layout you just published. The content of this page will be rendered between the header and footer, in the `@inner_content` placeholder.
+For the home page we'll display an image uploaded to the Media Library. Firstly, go to [http://localhost:4000/admin/my_site/media_library](http://localhost:4000/admin/my_site/media_library), click "Upload", and finish by uploading an image that you like. On the list of assets, click "View", and on the bottom of the modal that has opened you'll find the path for that asset, copy it.
 
-Go to "Pages", click "Create New Page", and input some data into the form:
+Go to [http://localhost:4000/admin/my_site/pages/new](http://localhost:4000/admin/my_site/pages/new) and input some data into the form:
 
 * Path: leave it empty, that will be the root home page
-* Title: Home Page - or be creative with it.
+* Title: Home - My Site
+* Template:
+
+```heex
+<div class="h-screen mt-20">
+  <img src="URL_OF_ASSET_HERE" class="mx-auto" />
+</div>
+```
+
+Replace `URL_OF_ASSET_HERE`, save the changes, and publish the page.
+
+Go ahead and visit [http://localhost:4000](http://localhost:4000) - that's your first published page!
+
+## Creating the contact page
+
+Let's add some interaction creating a contact form in a new page. Go to [http://localhost:4000/admin/my_site/pages/new](http://localhost:4000/admin/my_site/pages/new) again and input this data:
+
+* Path: contact
+* Title: Contact - My Site
 * Template:
 
 ```heex
-<div>TODO</div>
+TODO
 ```
 
 Save the changes and Publish it.
 
-Go ahead and visit [http://localhost:4000](http://localhost:4000) that's your first published page! Now dive into improving that page with more features.
+Go ahead and visit [http://localhost:4000](http://localhost:4000/contact). You'll see the form, the frontend is done, but it won't work since it needs to handle the form submit event.
+
+LiveAdmin doesn not support managing Page Events at this moment so let's create it manually. Open another terminal in the root of the project and execute:
+
+```sh
+iex -S mix
+```
+
+And paste this code:
 
-## Adding a contact form
+```elixir
+TODO update page event
+```
+
+Done. Go ahead and test the content form.
 
 ## Improving SEO
+
+Beacon is very focused on SEO and it's optimized to render pages as fast as possible, but that alone is not enough to perform well on search engines. On the Page Editor you can add Meta Tags and a Schema to provide extra info used by search engines crawling the page.
+
+### Meta Tags
+
+The title and description are two essential pieces of information that every page must have, and even though title is not a meta tag per se it goes along with the description for SEO purposes. Both are automatically added to your page when you fill the Title and Description fields in the Page Editor form.
+
+In the era of social media it's important to add [Open Graph](https://ogp.me) meta tags to enrich your pages with link previews and extra information. Edit your page, go to "Meta Tags" tab and add a couple of meta tags:
+
+| property       | content                 |
+| -------------- | ----------------------- |
+| og:title       | {{ page.title }}        |
+| og:description | {{ page.description }}  |
+
+Many other meta tags can be added depending on the type and content of the page, but those are good to get started.
+
+Save the changes.
+
+## Schema
+
+[Strutured Data](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) can be added to help search engines undertand the content of the page. Go to the "Schema" tab and input this content in the code editor:
+
+```json
+[
+  {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    "url": "https://www.my_site.com",
+    "logo": "https://www.my_site.com/images/logo.png"
+  }
+]
+```
+
+Replace the URL with a domain you own if you intend to deploy your site.
+
+Note that content can be a single object or a list of objects as necessary.
+
+Save the changes.
+
+
+
+

From edb8e9e369e3acc7c662a0ddecdfd09db5a53bc1 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Wed, 13 Sep 2023 14:33:42 -0400
Subject: [PATCH 04/12] update installation guide

---
 guides/introduction/installation.md | 261 +++-------------------------
 1 file changed, 20 insertions(+), 241 deletions(-)

diff --git a/guides/introduction/installation.md b/guides/introduction/installation.md
index d2771fa5..640e5129 100644
--- a/guides/introduction/installation.md
+++ b/guides/introduction/installation.md
@@ -1,14 +1,18 @@
 # Installation
 
-Beacon is an application that runs on top of an existing Phoenix LiveView application. In this guide we'll install all required tools, generate a new Phoenix LiveView application, install Beacon, and generate a new site.
+Beacon is the core application that loads and renders your site pages. It runs as a library in your Phoenix LiveView application, in this guide we'll start from zero initilizating a new Phoenix LiveView application, installing Beacon, and adding a new site.
+
+To create the resources for your site, you'll need an admin interface that can be installed following the [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md).
+
+We also have prepared the guide [Your First Site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md) to get your started into creating the first layout, pages, and components for your site.
 
 ## TLDR
 
-We recomment following the guide thoroughly, but if you want a short version or to just recap the main steps:
+We recommend following the guide thoroughly, but if you want a short version or to just recap the main steps:
 
-1. Install Elixir v1.14+
+1. Install Elixir v1.13 or later.
 
-2. Install Phoenix v1.7+
+2. Install Phoenix v1.7 or later.
 
   ```sh
   mix archive.install hex phx_new
@@ -25,28 +29,24 @@ We recomment following the guide thoroughly, but if you want a short version or
 5. Add `:beacon` dependency to `mix.exs`
 
   ```elixir
-  {:beacon, github: "beaconCMS/beacon"}
+  {:beacon, github: "BeaconCMS/beacon"}
   ```
 
 6. Run `mix deps.get`
 
-7. Add `:beacon` dependency to `.formatter.exs` in `:
+7. Add `:beacon` dependency to `.formatter.exs`
 
 8. Run `mix beacon.install --site my_site`
 
 9. Run `mix setup`
 
-10. Run `mix phx.server`
-
-Visit http://localhost:4000/my_site/home to see the page created from seeds.
-
-## Steps
+Now you can follow the other guides to [install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md) or create [your first site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md).
 
-Detailed instructions:
+## Detailed instructions
 
-### Elixir 1.14 or later
+### Elixir 1.13 or later
 
-The minimum required version to run Beacon is Elixir v1.14. Make sure you have at least that version installed along with Hex:
+The minimum required version to run Beacon is Elixir v1.13. Make sure you have at least that version installed along with Hex:
 
 1. Check Elixir version:
 
@@ -64,7 +64,7 @@ If that command fails or Elixir version is outdated, please follow [Elixir Insta
 
 ### Phoenix 1.7 or later
 
-Beacon also requires a minimum Phoenix version to work properly, make sure you have the latest `phx_new` archive - the command to generate new Phoenix applications.
+Beacon also requires at least Phoenix v1.7 to work properly, make sure you have the latest `phx_new` archive - the command to generate new Phoenix applications.
 
 ```sh
 mix archive.install hex phx_new
@@ -72,7 +72,7 @@ mix archive.install hex phx_new
 
 ### Database
 
-[PostgresSQL](https://www.postgresql.org) is the default database used by Phoenix and Beacon but it also supports MySQL and SQLServer through [ecto](https://hex.pm/packages/ecto) official adapters. Make sure one of them is up and running in your environment.
+[PostgresSQL](https://www.postgresql.org) is the default database used by Beacon but it also supports MySQL and SQLServer through [ecto adapters](https://github.com/elixir-ecto/ecto#usage). Make sure one of them is up and running in your environment.
 
 ### Generating a new application
 
@@ -82,7 +82,7 @@ We'll be using `phx_new` to generate a new application. You can run `mix help ph
 mix phx.new --install my_app
 ```
 
-Or if you prefer an Umbrella application, run instead:
+Or if you prefer an Umbrella application, execute:
 
 ```sh
 mix phx.new --umbrella --install my_app
@@ -97,7 +97,7 @@ After it finishes you can open the generated directory: `cd my_app`
 1. Edit `mix.exs` to add `:beacon` as a dependency:
 
 ```elixir
-{:beacon, github: "beaconCMS/beacon"}
+{:beacon, github: "BeaconCMS/beacon"}
 ```
 
 Or add to both apps `my_app` and `my_app_web` if running in an Umbrella app.
@@ -113,231 +113,10 @@ mix deps.get
 ```elixir
 [
  import_deps: [:ecto, :ecto_sql, :phoenix, :beacon],
- # rest of file
+ # rest of file ommited
 ]
 ```
 
 4. Run `mix compile`
 
-### Configuration and generating your first site
-
-Beacon requires a couple of changes in your project to get your first site up and running. You can either choose to use the `beacon.install` generator provided by Beacon or make such changes manually:
-
-#### Using the generator
-
-Run and follow the instructions:
-
-```sh
-mix beacon.install --site my_site
-```
-
-For more details please check out the docs: `mix help beacon.install`
-
-#### Manually
-
-1. Include `Beacon.Repo` in your project's `config.exs` file:
-
-    ```elixir
-    config :my_app, ecto_repos: [MyApp.Repo, Beacon.Repo]
-    ```
-
-2. Configure the Beacon Repo in dev.exs, prod.exs, or runtime.exs as needed for your environment:
-
-    ```elixir
-    config :beacon, Beacon.Repo,
-      username: "postgres",
-      password: "postgres",
-      hostname: "localhost",
-      database: "db_name_replace_me",
-      pool_size: 10
-    ```
-
-    In dev.exs you may add these extra options:
-
-    ```elixir
-    stacktrace: true,
-    show_sensitive_data_on_connection_error: true
-    ```
-
-3. Create a `BeaconDataSource` module that implements `Beacon.DataSource.Behaviour`:
-
-    ```elixir
-    defmodule MyApp.BeaconDataSource do
-      @behaviour Beacon.DataSource.Behaviour
-
-      def live_data(:my_site, ["home"], _params), do: %{vals: ["first", "second", "third"]}
-      def live_data(:my_site, ["blog", blog_slug], _params), do: %{blog_slug_uppercase: String.upcase(blog_slug)}
-      def live_data(_, _, _), do: %{}
-    end
-    ```
-
-4. Edit `lib/my_app_web/router.ex` to add  `use Beacon.Router`, create a new `scope`, and call `beacon_site` in your app router:
-
-    ```elixir
-    use Beacon.Router
-
-    scope "/" do
-      pipe_through :browser
-      beacon_site "/my_site", site: :my_site
-    end
-    ```
-
-Make sure you're not adding the macro `beacon_site` into the existing `scope "/", MyAppWeb`, otherwise requests will fail.
-
-5. Include the `Beacon` supervisor in the list of `children` applications in the file `lib/my_app/application.ex`:
-
-    ```elixir
-    @impl true
-    def start(_type, _args) do
-      children = [
-        # ommited others for brevity
-        MyAppWeb.Endpoint,
-        {Beacon, sites: [[site: :my_site, endpoint: MyAppWeb.Endpoint, data_source: MyApp.BeaconDataSource]]}
-      ]
-
-      opts = [strategy: :one_for_one, name: MyApp.Supervisor]
-      Supervisor.start_link(children, opts)
-    end
-    ```
-
-For more info on site options, check out `Beacon.start_link/1`.
-
-**Notes**
-- The site identification has to be the same across your environment, in configuration, `beacon_site`, and `live_data`. In this example we're using `:my_site`.
-- Include it after your app `Endpoint`.
-
-6. Add some seeds in the seeds file `priv/repo/beacon_seeds.exs`:
-
-    ```elixir
-    alias Beacon.Content
-
-    Content.create_stylesheet!(%{
-      site: "<%= site %>",
-      name: "sample_stylesheet",
-      content: "body {cursor: zoom-in;}"
-    })
-
-    Content.create_component!(%{
-      site: "<%= site %>",
-      name: "sample_component",
-      body: """
-      <li>
-        <%%= @val %>
-      </li>
-      """
-    })
-
-    layout =
-      Content.create_layout!(%{
-        site: "<%= site %>",
-        title: "Sample Home Page",
-        template: """
-        <header>
-          Header
-        </header>
-        <%%= @inner_content %>
-
-        <footer>
-          Page Footer
-        </footer>
-        """
-      })
-
-    Content.publish_layout(layout)
-
-    %{
-      path: "home",
-      site: "<%= site %>",
-      layout_id: layout.id,
-      template: """
-      <main>
-        <h2>Some Values:</h2>
-        <ul>
-          <%%= for val <- @beacon_live_data[:vals] do %>
-            <%%= my_component("sample_component", val: val) %>
-          <%% end %>
-        </ul>
-
-        <.form :let={f} for={%{}} as={:greeting} phx-submit="hello">
-          Name: <%%= text_input f, :name %> <%%= submit "Hello" %>
-        </.form>
-
-        <%%= if assigns[:message], do: assigns.message %>
-
-        <%%= dynamic_helper("upcase", "Beacon") %>
-      </main>
-      """,
-      helpers: [
-        %{
-          name: "upcase",
-          args: "name",
-          code: """
-            String.upcase(name)
-          """
-        }
-      ],
-      events: [
-        %{
-          name: "hello",
-          code: """
-            {:noreply, assign(socket, :message, "Hello \#{event_params["greeting"]["name"]}!")}
-          """
-        }
-      ]
-    }
-    |> Content.create_page!()
-    |> Content.publish_page()
-
-    %{
-      path: "blog/:blog_slug",
-      site: "<%= site %>",
-      layout_id: layout.id,
-      template: """
-      <main>
-        <h2>A blog</h2>
-        <ul>
-          <li>Path Params Blog Slug: <%%= @beacon_path_params.blog_slug %></li>
-          <li>Live Data blog_slug_uppercase: <%%= @beacon_live_data.blog_slug_uppercase %></li>
-        </ul>
-      </main>
-      """
-    }
-    |> Content.create_page!()
-    |> Content.publish_page()
-    ```
-
-6. Include new seeds in the `ecto.setup` alias in `mix.exs`:
-
-    ```elixir
-    "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs", "run priv/repo/beacon_seeds.exs"],
-    ```
-
-### Setup database, seeds, and assets:
-
-Feel free to edit `priv/repo/beacon_seeds.exs` as you wish and run:
-
-```sh
-mix setup
-```
-
-### Visit your new site
-
-Run the Phoenix server:
-
-```sh
-mix phx.server
-```
-
-Open http://localhost:4000/my_site/home and note:
-
-- The Header and Footer from the layout
-- The list element from the page
-- The three components rendered with the beacon_live_data from your DataSource
-- The zoom in cursor from the stylesheet
-
-Open http://localhost:4000/my_site/blog/my_first_post and note:
-
-- The Header and Footer from the layout
-- The path params blog slug
-- The live data blog_slug_uppercase
-- The zoom in cursor from the stylesheet
+Now you can follow the other guides to [install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md) or create [your first site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md).
\ No newline at end of file

From 963319f98c5a309a3e635c64d6fb8e246dac32cf Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Wed, 13 Sep 2023 14:47:48 -0400
Subject: [PATCH 05/12] update installation

---
 guides/introduction/installation.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/guides/introduction/installation.md b/guides/introduction/installation.md
index 640e5129..49c35218 100644
--- a/guides/introduction/installation.md
+++ b/guides/introduction/installation.md
@@ -4,7 +4,7 @@ Beacon is the core application that loads and renders your site pages. It runs a
 
 To create the resources for your site, you'll need an admin interface that can be installed following the [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md).
 
-We also have prepared the guide [Your First Site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md) to get your started into creating the first layout, pages, and components for your site.
+We also have prepared the guide [Your First Site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md) to get started into creating the first layout, pages, and components for your site.
 
 ## TLDR
 
@@ -34,7 +34,7 @@ We recommend following the guide thoroughly, but if you want a short version or
 
 6. Run `mix deps.get`
 
-7. Add `:beacon` dependency to `.formatter.exs`
+5. Add `:beacon` into `:import_deps` in file `.formatter.exs`
 
 8. Run `mix beacon.install --site my_site`
 

From 7e050a7e60b7d01ccc87acb38c1acb2adbb9e6a4 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Wed, 13 Sep 2023 15:16:32 -0400
Subject: [PATCH 06/12] update install

---
 guides/introduction/installation.md | 32 ++++++++++++++---------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/guides/introduction/installation.md b/guides/introduction/installation.md
index 49c35218..8b7677c0 100644
--- a/guides/introduction/installation.md
+++ b/guides/introduction/installation.md
@@ -29,16 +29,14 @@ We recommend following the guide thoroughly, but if you want a short version or
 5. Add `:beacon` dependency to `mix.exs`
 
   ```elixir
-  {:beacon, github: "BeaconCMS/beacon"}
+  {:beacon, github: "BeaconCMS/beacon", override: true}
   ```
+  
+Note that the option `override: true` is required if running Beacon and Beacon LiveAdmin in the same application.
 
-6. Run `mix deps.get`
+6. Add `:beacon` into `:import_deps` in file `.formatter.exs`
 
-5. Add `:beacon` into `:import_deps` in file `.formatter.exs`
-
-8. Run `mix beacon.install --site my_site`
-
-9. Run `mix setup`
+7. Run `mix setup`
 
 Now you can follow the other guides to [install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md) or create [your first site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md).
 
@@ -74,7 +72,7 @@ mix archive.install hex phx_new
 
 [PostgresSQL](https://www.postgresql.org) is the default database used by Beacon but it also supports MySQL and SQLServer through [ecto adapters](https://github.com/elixir-ecto/ecto#usage). Make sure one of them is up and running in your environment.
 
-### Generating a new application
+### Generate a new application
 
 We'll be using `phx_new` to generate a new application. You can run `mix help phx.new` to show the full documentation with more options, but let's use the default values for our new site:
 
@@ -92,23 +90,19 @@ Beacon supports both.
 
 After it finishes you can open the generated directory: `cd my_app`
 
-### Installing Beacon
+### Install Beacon
 
 1. Edit `mix.exs` to add `:beacon` as a dependency:
 
 ```elixir
-{:beacon, github: "BeaconCMS/beacon"}
+{:beacon, github: "BeaconCMS/beacon", override: true}
 ```
 
 Or add to both apps `my_app` and `my_app_web` if running in an Umbrella app.
 
-2. Fetch beacon dep:
+Note that the option `override: true` is required if running Beacon and Beacon LiveAdmin in the same application.
 
-```sh
-mix deps.get
-```
-
-3. Add `:beacon` to `import_deps` in the .formatter.exs file:
+2. Add `:beacon` to `import_deps` in the .formatter.exs file:
 
 ```elixir
 [
@@ -117,6 +111,10 @@ mix deps.get
 ]
 ```
 
-4. Run `mix compile`
+3. Run `mix setup`
+
+Beacon depends on some C libraries to compile correctly, if compilation fails make sure you have a C compiler installed in your environment.
+
+--
 
 Now you can follow the other guides to [install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md) or create [your first site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md).
\ No newline at end of file

From 615e9f107d8a8e06f154da43c486591a832b60bc Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Wed, 13 Sep 2023 15:47:37 -0400
Subject: [PATCH 07/12] WIP guides

---
 guides/deployment/fly.md               | 72 +++-----------------------
 guides/introduction/your_first_site.md | 53 +++++++++++--------
 2 files changed, 36 insertions(+), 89 deletions(-)

diff --git a/guides/deployment/fly.md b/guides/deployment/fly.md
index 3073ddf3..f4e1ca08 100644
--- a/guides/deployment/fly.md
+++ b/guides/deployment/fly.md
@@ -1,10 +1,10 @@
 # Deploying on Fly.io
 
-Once you have a Beacon site up and running locally, you can have it deployed on https://fly.io by following this guide.
+Once you have a [Beacon site up and running](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md) locally, you can have it deployed on [Fly.io](https://fly.io) by following this guide.
 
 ## Fly.io CLI
 
-Firstly instal the fly cli tool as described at https://fly.io/docs/hands-on/install-flyctl. You're gonna use it to deploy your beacon site.
+Firstly instal the fly cli tool as described at [Install flyctl](https://fly.io/docs/hands-on/install-flyctl), you'll need it to deploy your site.
 
 ## Sign in or sign up
 
@@ -22,7 +22,7 @@ fly auth login
 
 ## Dockerfile
 
-Aplications on Fly run on containers, let's generate a Dockerfile and other supporting files, and then make a couple of changes:
+Aplications on Fly run on containers, let's generate a Dockerfile and then make a couple of changes on that file:
 
 Run:
 
@@ -45,42 +45,6 @@ RUN mkdir -p /app/bin/_build
 COPY --from=builder --chown=nobody:root /app/_build/tailwind-* ./bin/_build/
 ```
 
-## Seeds
-
-1. Create the file `rel/overlays/bin/beacon_seeds` with the content:
-
-```shell
-#!/bin/sh
-cd -P -- "$(dirname -- "$0")"
-exec ./my_app eval MyApp.Release.beacon_seeds
-```
-
-2. Create the file `rel/overlays/bin/beacon_seeds.bat` with the content:
-
-```shell
-call "%~dp0\my_app" eval MyApp.Release.beacon_seeds
-```
-
-In both files do:
-
-* Replace `MyApp` with your main application module name
-* Replace `my_app` with your application name
-* Make them executable by running `chmod +x rel/overlays/bin/beacon_seeds.bat rel/overlays/bin/beacon_seeds` or the equivalent on your system
-
-3. Add this function in the generated `Release` module, usually at `lib/my_app/release.ex`:
-
-```elixir
-def beacon_seeds do
-  load_app()
-
-  {:ok, _, _} =
-    Ecto.Migrator.with_repo(Beacon.Repo, fn _repo ->
-      seeds_path = Path.join([:code.priv_dir(@app), "repo", "beacon_seeds.exs"])
-      Code.eval_file(seeds_path)
-    end)
-end
-```
-
 ## Database connection
 
 Edit `config/runtime.exs` and add the following config after `config :my_app, MyApp.Repo, ...`:
@@ -112,40 +76,16 @@ Beacon is designed to minimize deployments as much as possible but eventually yo
 fly deploy
 ```
 
-## Populate sample data
-
-Before we can access the deployed site let's run seeds to populate some sample data:
-
-1. Connect to your running application:
-
-```sh
-fly ssh console
-```
-
-2. Open a IEx console:
-
-```sh
-app/bin/my_app remote
-```
-
-3. Then call your seeds function:
-
-```
-MyApp.Release.beacon_seeds
-```
-
-Note that you could save some commands and just call `fly ssh console --command "/app/bin/beacon_seeds"` to run seeds, but it may fail and at this momment it's recommended to connected to the instance as showed before.
-
 ## Open
 
 Finally run the following command to see your site live:
 
 ```sh
-fly open my_site/home
+fly open /
 ```
 
-Change `my_site` to your site name if you have used a custom name when generating your site.
+Change the path if you have created a custom page and not followed the guides.
 
 ## More commands
 
-You can find all available commands at https://fly.io/docs/flyctl and also more tips on the official [Phoenix Deploying on Fly.io guide](https://github.com/phoenixframework/phoenix/blob/master/guides/deployment/fly.md).
+You can find all available commands in the [Fly.io docs](https://fly.io/docs/flyctl) and also find more tips on the official [Phoenix Deploying on Fly.io guide](https://github.com/phoenixframework/phoenix/blob/master/guides/deployment/fly.md).
diff --git a/guides/introduction/your_first_site.md b/guides/introduction/your_first_site.md
index 624e2920..5c99de94 100644
--- a/guides/introduction/your_first_site.md
+++ b/guides/introduction/your_first_site.md
@@ -26,7 +26,7 @@ scope "/", MyAppWeb do
 end
 ```
 
-Also feel free to delete page_controller.ex and related files, you won't need it.
+Also feel free to delete page_controller.ex and related files, you won't need those files.
 
 And finally change the generated scope created by Beacon to look like:
 
@@ -41,15 +41,15 @@ With this change the site will be served at [http://localhost:4000/](http://loca
 
 ## Connecting to a database
 
-The install generator will change and create some files for you but the most important configuration at this point is adjusting the Repo credentials since Beacon requires a database to store layouts, pages, and all site data.
+The `beacon.install` generator will change and create some files for you but the most important configuration at this point is adjusting the Repo credentials since Beacon requires a database to save layouts, pages, and all the site data.
 
-Inspect the config `config :beacon, Beacon.Repo` in the file `config/dev.exs` and make sure it looks correct to your environment.
+Look for the config `config :beacon, Beacon.Repo` in the files `config/dev.exs` and `config/prod.exs` to make the database configuration looks correct to your environment.
 
 ## Acessing LiveAdmin to manage your site
 
 We're done with configuration so far, let's run the project and access the LiveAdmin UI.
 
-Firstly execute to install dependencies:
+Firstly execute the following to install dependencies:
 
 ```sh
 mix setup
@@ -61,11 +61,12 @@ And now start your Phoenix app:
 mix phx.server
 ```
 
-Visit [http://localhost:4000/admin](http://localhost:4000/admin) and you should see `my_site` listed.
+Visit [http://localhost:4000/admin](http://localhost:4000/admin) and you should see the `my_site` that you just created listed on the admin interface.
 
-## Creating a layout
 
-Beacon has built-in support for Tailwind classes and we'll be using the [Flowbite](https://flowbite.com/docs/) components to style our page but you're free to use any tool or design system you want.
+Now let's create the resources for our first site. Beacon has built-in support for Tailwind and we'll be using the [Flowbite](https://flowbite.com/docs/) components to style our page but you're free to adapt the styles as you want.
+
+## Creating a layout
 
 Click on the "Layouts" button, then "Create New Layout". On this page we'll create the layout where all pages will be rendered. It will contain a footer, header, and the placeholder to render page's content.
 
@@ -87,10 +88,15 @@ Input "Main" for title and the following template:
       <ul
         class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
         <li>
-          <a href="#"
+          <a href="/"
             class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
             aria-current="page">Home</a>
         </li>
+        <li>
+          <a href="/contact"
+            class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
+            aria-current="page">Contact</a>
+        </li>
       </ul>
     </div>
   </div>
@@ -101,13 +107,15 @@ Input "Main" for title and the following template:
 
 The `@inner_content` is important here, it's where page's templates will be injected into the layout.
 
-Save the changes and Publish it.
+Click on Create Draft Layout, then click on Publish, and Confirm. Done, we have a layout to render the pages.
 
 ## Creating the home page
 
-For the home page we'll display an image uploaded to the Media Library. Firstly, go to [http://localhost:4000/admin/my_site/media_library](http://localhost:4000/admin/my_site/media_library), click "Upload", and finish by uploading an image that you like. On the list of assets, click "View", and on the bottom of the modal that has opened you'll find the path for that asset, copy it.
+For the home page we'll display an image uploaded to the Media Library. Firstly, click on Media Library on the sidebar menu, then click "Upload", and upload any image that you like.
+
+On the list of assets, take note of the **Name** of the asset.
 
-Go to [http://localhost:4000/admin/my_site/pages/new](http://localhost:4000/admin/my_site/pages/new) and input some data into the form:
+Now let's create the page. Click on Pages on the sidebar menu, then click on Create New Page, and input some data into the form:
 
 * Path: leave it empty, that will be the root home page
 * Title: Home - My Site
@@ -115,11 +123,11 @@ Go to [http://localhost:4000/admin/my_site/pages/new](http://localhost:4000/admi
 
 ```heex
 <div class="h-screen mt-20">
-  <img src="URL_OF_ASSET_HERE" class="mx-auto" />
+  <BeaconWeb.Components.image name="ASSET_NAME" />
 </div>
 ```
 
-Replace `URL_OF_ASSET_HERE`, save the changes, and publish the page.
+Replace `ASSET_NAME` with the asset name you just uploaded, it should look something like "my_image.webp". Click on Create Draft Page, then click Publish, and Confirm.
 
 Go ahead and visit [http://localhost:4000](http://localhost:4000) - that's your first published page!
 
@@ -155,26 +163,26 @@ Done. Go ahead and test the content form.
 
 ## Improving SEO
 
-Beacon is very focused on SEO and it's optimized to render pages as fast as possible, but that alone is not enough to perform well on search engines. On the Page Editor you can add Meta Tags and a Schema to provide extra info used by search engines crawling the page.
+Beacon is very focused on SEO and it's optimized to render pages as fast as possible, but that alone is not enough to perform well on search engines. On the Page Editor you can add Meta Tags and a Schema to provide extra info about the page which is used by search engines to extract contextual information.
 
 ### Meta Tags
 
 The title and description are two essential pieces of information that every page must have, and even though title is not a meta tag per se it goes along with the description for SEO purposes. Both are automatically added to your page when you fill the Title and Description fields in the Page Editor form.
 
-In the era of social media it's important to add [Open Graph](https://ogp.me) meta tags to enrich your pages with link previews and extra information. Edit your page, go to "Meta Tags" tab and add a couple of meta tags:
+Besides those two pieces of meta, it's also important to add [Open Graph](https://ogp.me) meta tags used by social medias to enrich link previews on their platforms, so let's add some meta tags. Edit any page, go to the Meta Tags tab and add a couple of meta tags:
 
 | property       | content                 |
 | -------------- | ----------------------- |
 | og:title       | {{ page.title }}        |
 | og:description | {{ page.description }}  |
 
-Many other meta tags can be added depending on the type and content of the page, but those are good to get started.
+Many other meta tags can be added depending on the type and content of the page, but those are a great start.
 
-Save the changes.
+Save the changes, go to the Page tag, and Publish the changes.
 
 ## Schema
 
-[Strutured Data](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) can be added to help search engines undertand the content of the page. Go to the "Schema" tab and input this content in the code editor:
+[Strutured Data](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) can be added to help search engines understand the content of the page. Go to the Schema tab and input this content in the code editor:
 
 ```json
 [
@@ -187,12 +195,11 @@ Save the changes.
 ]
 ```
 
-Replace the URL with a domain you own if you intend to deploy your site.
-
-Note that content can be a single object or a list of objects as necessary.
-
-Save the changes.
+These values have no meaning running your site locally but you should replace it accordingly if you plan to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/deployment/fly.md).
 
 
+Save the changes, go to the Page tag, and Publish the changes.Save the changes.
 
+--
 
+Congratulations! You have a site up and running. The next step is to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/deployment/fly.md).
\ No newline at end of file

From d43c433999f637161c35567c7dd256ec63617d18 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Thu, 16 May 2024 11:39:44 -0400
Subject: [PATCH 08/12] create guides/recipes/

---
 README.md                                     |  4 ++--
 guides/{introduction => }/installation.md     |  6 +++---
 guides/introduction/api.md                    | 19 -------------------
 .../fly.md => recipes/deploy-to-flyio.md}     |  4 ++--
 .../multiple-domains-hosting.md}              |  0
 .../your_first_site.md => your-first-site.md} |  6 +++---
 6 files changed, 10 insertions(+), 29 deletions(-)
 rename guides/{introduction => }/installation.md (90%)
 delete mode 100644 guides/introduction/api.md
 rename guides/{deployment/fly.md => recipes/deploy-to-flyio.md} (88%)
 rename guides/{deployment/multiple_domains_hosting.md => recipes/multiple-domains-hosting.md} (100%)
 rename guides/{introduction/your_first_site.md => your-first-site.md} (96%)

diff --git a/README.md b/README.md
index d3d9d07d..42f79aba 100644
--- a/README.md
+++ b/README.md
@@ -8,8 +8,8 @@ Beacon is a content management system (CMS) built with Phoenix LiveView. It brin
 
 Check out the [guides](https://github.com/BeaconCMS/beacon/tree/main/guides) to get started:
 
-* [Installation](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/installation.md) to get your first site up and running
-* [Deployment on Fly.io](https://github.com/BeaconCMS/beacon/blob/main/guides/deployment/fly.md) to deploy your site on Fly.io
+* [Installation](https://github.com/BeaconCMS/beacon/blob/main/guides/installation.md) to get your first site up and running
+* [Deployment on Fly.io](https://github.com/BeaconCMS/beacon/blob/main/guides/reciples/deploy-to-flyio.md) to deploy your site on Fly.io
 
 ## Demo
 
diff --git a/guides/introduction/installation.md b/guides/installation.md
similarity index 90%
rename from guides/introduction/installation.md
rename to guides/installation.md
index 79a3d936..680dede1 100644
--- a/guides/introduction/installation.md
+++ b/guides/installation.md
@@ -2,9 +2,9 @@
 
 Beacon is the core application that loads and renders your site pages. It runs as a library in your Phoenix LiveView application, in this guide we'll start from zero initilizating a new Phoenix LiveView application, installing Beacon, and adding a new site.
 
-To create the resources for your site, you'll need an admin interface that can be installed following the [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md).
+To create the resources for your site, you'll need an admin interface that can be installed following the [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/installation.md).
 
-We also have prepared the guide [Your First Site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md) to get started into creating the first layout, pages, and components for your site.
+We also have prepared the guide [Your First Site](https://github.com/BeaconCMS/beacon/blob/main/guides/your-first-site.md) to get your started with a new site.
 
 ## TLDR
 
@@ -38,7 +38,7 @@ Note that the option `override: true` is required if running Beacon and Beacon L
 
 7. Run `mix setup`
 
-Now you can follow the other guides to [install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md) or create [your first site](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md).
+Now you can follow the other guides to [install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/installation.md) or create [your first site](https://github.com/BeaconCMS/beacon/blob/main/guides/your-first-site.md).
 
 ## Detailed instructions
 
diff --git a/guides/introduction/api.md b/guides/introduction/api.md
deleted file mode 100644
index 1e64bd26..00000000
--- a/guides/introduction/api.md
+++ /dev/null
@@ -1,19 +0,0 @@
-## API
-
-HTTP endpoints to integrate with Beacon layouts, pages, assets, and more.
-
-1. Edit the file `router.ex` in your project to add:
-
-```elixir
-use Beacon.Router
-
-scope "/api" do
-  pipe_through :api
-  plug BeaconWeb.API.Plug
-  beacon_api "/beacon"
-end
-```
-
-The `plug BeaconWeb.API.Plug` is needed only if the client consuming this API wants to send or receive camelCased json keys.
-
-Check out `/lib/beacon/router.ex` for currently available API endpoints.
diff --git a/guides/deployment/fly.md b/guides/recipes/deploy-to-flyio.md
similarity index 88%
rename from guides/deployment/fly.md
rename to guides/recipes/deploy-to-flyio.md
index db372603..92ac6072 100644
--- a/guides/deployment/fly.md
+++ b/guides/recipes/deploy-to-flyio.md
@@ -1,6 +1,6 @@
 # Deploying on Fly.io
 
-Once you have a [Beacon site up and running](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/your_first_site.md) locally, you can have it deployed on [Fly.io](https://fly.io) by following this guide.
+Once you have a [Beacon site up and running](https://github.com/BeaconCMS/beacon/blob/main/guides/your-first-site.md) locally, you can have it deployed on [Fly.io](https://fly.io) by following this guide.
 
 ## Fly.io CLI
 
@@ -88,4 +88,4 @@ Change the path if you have created a custom page and not followed the guides.
 
 ## More commands
 
-You can find all available commands in the [Fly.io docs](https://fly.io/docs/flyctl) and also find more tips on the official [Phoenix Deploying on Fly.io guide](https://github.com/phoenixframework/phoenix/blob/master/guides/deployment/fly.md).
+You can find all available commands in the [Fly.io docs](https://fly.io/docs/flyctl) and also find more tips on the official [Phoenix Deploying on Fly.io guide](https://fly.io/docs/elixir/getting-started/).
diff --git a/guides/deployment/multiple_domains_hosting.md b/guides/recipes/multiple-domains-hosting.md
similarity index 100%
rename from guides/deployment/multiple_domains_hosting.md
rename to guides/recipes/multiple-domains-hosting.md
diff --git a/guides/introduction/your_first_site.md b/guides/your-first-site.md
similarity index 96%
rename from guides/introduction/your_first_site.md
rename to guides/your-first-site.md
index 5c99de94..ef7ce77b 100644
--- a/guides/introduction/your_first_site.md
+++ b/guides/your-first-site.md
@@ -2,7 +2,7 @@
 
 In this guide we'll walk trough all the steps necessary to have a functioning site with components, styles, and a contact form to demonstrate how Beacon works.
 
-It's required that you have a working Phoenix LiveView with Beacon and Beacon LiveAdmin installed and configured correctly, please follow the [Beacon installation guide](https://github.com/BeaconCMS/beacon/blob/main/guides/introduction/installation.md) and [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/introduction/installation.md) if you're starting from stratch.
+It's required that you have a working Phoenix LiveView with Beacon and Beacon LiveAdmin installed and configured correctly, please follow the [Beacon installation guide](https://github.com/BeaconCMS/beacon/blob/main/guides/installation.md) and [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/installation.md) if you're starting from stratch.
 
 ## Generating the site
 
@@ -195,11 +195,11 @@ Save the changes, go to the Page tag, and Publish the changes.
 ]
 ```
 
-These values have no meaning running your site locally but you should replace it accordingly if you plan to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/deployment/fly.md).
+These values have no meaning running your site locally but you should replace it accordingly if you plan to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/recipes/deploy-to-flyio.md).
 
 
 Save the changes, go to the Page tag, and Publish the changes.Save the changes.
 
 --
 
-Congratulations! You have a site up and running. The next step is to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/deployment/fly.md).
\ No newline at end of file
+Congratulations! You have a site up and running. The next step is to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/recipes/deploy-to-flyio.md).
\ No newline at end of file

From 8947d49f8a7d00e93b9ec74b10d1aefd5b6e2d21 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Thu, 16 May 2024 12:12:05 -0400
Subject: [PATCH 09/12] update your-first-site.md

---
 guides/your-first-site.md | 320 ++++++++++++++++++++++++--------------
 1 file changed, 202 insertions(+), 118 deletions(-)

diff --git a/guides/your-first-site.md b/guides/your-first-site.md
index ef7ce77b..a7c3cc5c 100644
--- a/guides/your-first-site.md
+++ b/guides/your-first-site.md
@@ -1,22 +1,29 @@
 # Your First Site
 
-In this guide we'll walk trough all the steps necessary to have a functioning site with components, styles, and a contact form to demonstrate how Beacon works.
+## Pre-requisites
 
-It's required that you have a working Phoenix LiveView with Beacon and Beacon LiveAdmin installed and configured correctly, please follow the [Beacon installation guide](https://github.com/BeaconCMS/beacon/blob/main/guides/installation.md) and [Beacon LiveAdmin installation guide](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/installation.md) if you're starting from stratch.
+To get your first site up and running, you first need a working Phoenix application with Phoenix LiveView and also the Beacon LiveAdmin to create and manage resources for your site.
+
+You need to follow the two guides below to get started:
+
+- [Install Beacon](https://github.com/BeaconCMS/beacon/blob/main/guides/installation.md)
+- [Install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/installation.md)
+
+Beacon can be installed on existing Phoenix applications, but make sure the minimum requirements are met as described in the installation guide.
 
 ## Generating the site
 
-Each site requires some minimal configuratin to run in your application, lets use the built-in `beacon.install` generator to get started quickly. In the root of your application, execute:
+Each site requires some minimal configuratin to run, lets use the built-in `beacon.install` generator to get started quickly. In the root of your application, execute:
 
 ```
 mix beacon.install --site my_site
 ```
 
-You can use whatever name you like as long as you remember to change it in the following steps.
+You can use other name you like as long as you remember to change it in the following steps.
 
 ## Configuring the routes
 
-First of all delete the following scope added by Phoenix automatically:
+In the `router.ex` file,  you'll see the following scope in a new Phoenix application:
 
 ```elixir
 scope "/", MyAppWeb do
@@ -26,7 +33,8 @@ scope "/", MyAppWeb do
 end
 ```
 
-Also feel free to delete page_controller.ex and related files, you won't need those files.
+Or something similar if you have changed it before. For this tutorial we are assuming the Beacon site will be mounted at the root `/` route,
+so you can delete that block or change where the Beacon site is mounted, as long as you keep that in mind and adjust accordingly throughout the tutorial.
 
 And finally change the generated scope created by Beacon to look like:
 
@@ -61,144 +69,220 @@ And now start your Phoenix app:
 mix phx.server
 ```
 
-Visit [http://localhost:4000/admin](http://localhost:4000/admin) and you should see the `my_site` that you just created listed on the admin interface.
+Visit http://localhost:4000/admin and you should see the `my_site` that you just created listed on the admin interface.
 
+Now let's create the resources for our first site.
 
-Now let's create the resources for our first site. Beacon has built-in support for Tailwind and we'll be using the [Flowbite](https://flowbite.com/docs/) components to style our page but you're free to adapt the styles as you want.
-
-## Creating a layout
+## Creating the home page
 
-Click on the "Layouts" button, then "Create New Layout". On this page we'll create the layout where all pages will be rendered. It will contain a footer, header, and the placeholder to render page's content.
+Go to http://localhost:4000/admin/my_site/pages and you should see a page already created for the `/` path. We're going to change it.
 
-Input "Main" for title and the following template:
+Edit the template to replace with this content:
 
 ```heex
-<nav class="bg-white border-gray-200 dark:bg-gray-900">
-  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-    <a href="/" class="flex items-center">
-      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">My Site</span>
-    </a>
-    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
-        <span class="sr-only">Open main menu</span>
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+<div class="relative flex min-h-[100dvh] flex-col overflow-hidden bg-gradient-to-br from-[#0077b6] to-[#00a8e8] text-white">
+  <div class="absolute inset-0 z-[-1] bg-cover bg-center opacity-30 blur-[100px]"></div>
+  <header class="container mx-auto flex items-center justify-between py-6 px-4 md:px-6">
+    <div class="flex items-center gap-2">
+      <.link patch="/" class="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-8 w-8"
+        >
+          <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
+          <line x1="4" x2="4" y1="22" y2="15"></line>
         </svg>
-    </button>
-    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
-      <ul
-        class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
-        <li>
-          <a href="/"
-            class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
-            aria-current="page">Home</a>
-        </li>
-        <li>
-          <a href="/contact"
-            class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
-            aria-current="page">Contact</a>
-        </li>
-      </ul>
+        <span class="text-2xl font-bold">CMS Platform</span>
+      </.link>
     </div>
-  </div>
-</nav>
-
-<%= @inner_content %>
-```
-
-The `@inner_content` is important here, it's where page's templates will be injected into the layout.
-
-Click on Create Draft Layout, then click on Publish, and Confirm. Done, we have a layout to render the pages.
-
-## Creating the home page
-
-For the home page we'll display an image uploaded to the Media Library. Firstly, click on Media Library on the sidebar menu, then click "Upload", and upload any image that you like.
-
-On the list of assets, take note of the **Name** of the asset.
-
-Now let's create the page. Click on Pages on the sidebar menu, then click on Create New Page, and input some data into the form:
-
-* Path: leave it empty, that will be the root home page
-* Title: Home - My Site
-* Template:
-
-```heex
-<div class="h-screen mt-20">
-  <BeaconWeb.Components.image name="ASSET_NAME" />
+    <div class="flex items-center gap-4">
+      <.link patch="/blog" class="hidden md:inline-flex text-sm font-medium hover:underline">
+        Blog
+      </.link>
+      <button class="items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 hidden md:inline-flex">
+        Sign In
+      </button>
+    </div>
+  </header>
+  <main class="container mx-auto flex-1 px-4 md:px-6">
+    <div class="mx-auto max-w-6xl space-y-6 py-12 md:py-24 lg:py-32">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="space-y-6">
+          <h1 class="text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
+            <span class="bg-gradient-to-r from-[#00a8e8] to-[#0077b6] bg-clip-text text-[#333] dark:text-white">
+              Unlock the power
+            </span>
+            of your content with our CMS platform
+          </h1>
+          <p class="text-lg text-gray-300 md:text-xl">
+            Streamline your content management with our intuitive, high-performance CMS built on Phoenix LiveView.
+          </p>
+          <Phoenix.Component.form :let={f} for={%{}} as={:waitlist} phx-submit="join">
+            <div class="flex w-full max-w-2xl items-center space-x-2">
+              <input
+                id={Phoenix.HTML.Form.input_id(f, :email)}
+                name={Phoenix.HTML.Form.input_name(f, :email)}
+                class="flex h-10 w-full border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 flex-1 rounded-md border-none bg-white/10 py-3 px-4 text-white placeholder:text-gray-300 focus:ring-2 focus:ring-[#00a8e8]"
+                placeholder="Enter your email"
+                type="email"
+              />
+              <button
+                class="inline-flex items-center justify-center whitespace-nowrap text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-10 rounded-md bg-[#00a8e8] py-3 px-6 font-medium transition-colors hover:bg-[#0077b6]"
+                type="submit"
+              >
+                Join Waitlist
+              </button>
+            </div>
+          </Phoenix.Component.form>
+          <span :if={Map.get(assigns, :joined)} class="text-sm text-gray-300">
+            Congrats! You joined the watchlist.
+          </span>
+        </div>
+        <div class="flex items-center justify-center">
+          <img
+            src="http://localhost:4000/beacon_assets/demo/narwin.webp"
+            alt="CMS Platform"
+            width="600"
+            height="600"
+            style="aspect-ratio: 600 / 600; object-fit: cover;"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+  <footer class="container mx-auto border-t border-white/20 py-6 px-4 text-sm text-gray-300 md:px-6">
+    <div class="flex items-center justify-between">
+      <p>© <%= @current_year %> CMS Platform. All rights reserved.</p>
+      <div class="flex space-x-4 items-center">
+        <a class="hover:underline" href="#">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-5 w-5"
+          >
+            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+          </svg>
+          <span class="sr-only">Facebook</span>
+        </a>
+        <a class="hover:underline" href="#">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-5 w-5"
+          >
+            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
+            </path>
+          </svg>
+          <span class="sr-only">Twitter</span>
+        </a>
+        <a class="hover:underline" href="#">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-5 w-5"
+          >
+            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+            <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
+          </svg>
+          <span class="sr-only">Instagram</span>
+        </a>
+        <a class="hover:underline" href="#">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-5 w-5"
+          >
+            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
+            </path>
+            <rect width="4" height="12" x="2" y="9"></rect>
+            <circle cx="4" cy="4" r="2"></circle>
+          </svg>
+          <span class="sr-only">LinkedIn</span>
+        </a>
+        <a class="hover:underline" href="#">
+          Privacy
+        </a>
+        <a class="hover:underline" href="#">
+          Terms
+        </a>
+        <a class="hover:underline" href="#">
+          Contact
+        </a>
+      </div>
+    </div>
+  </footer>
 </div>
 ```
 
-Replace `ASSET_NAME` with the asset name you just uploaded, it should look something like "my_image.webp". Click on Create Draft Page, then click Publish, and Confirm.
+Save the changes and Publish the page. Go to http://localhost:4000 and you'll see an error! That's because we haven't created all resources used in that page yet. Let's fix it.
 
-Go ahead and visit [http://localhost:4000](http://localhost:4000) - that's your first published page!
+## Live Data
 
-## Creating the contact page
+The current year is displayed at the footer as an assign `<%= @current_year %>` so we need to create such assign for our page.
 
-Let's add some interaction creating a contact form in a new page. Go to [http://localhost:4000/admin/my_site/pages/new](http://localhost:4000/admin/my_site/pages/new) again and input this data:
-
-* Path: contact
-* Title: Contact - My Site
-* Template:
-
-```heex
-TODO
-```
-
-Save the changes and Publish it.
-
-Go ahead and visit [http://localhost:4000](http://localhost:4000/contact). You'll see the form, the frontend is done, but it won't work since it needs to handle the form submit event.
-
-LiveAdmin doesn not support managing Page Events at this moment so let's create it manually. Open another terminal in the root of the project and execute:
-
-```sh
-iex -S mix
-```
-
-And paste this code:
+Go to http://localhost:4000/admin/my_site/live_data to create a new path `/` and then create a new assign named `current_year` with the following value:
 
 ```elixir
-TODO update page event
+Date.utc_today().year
 ```
 
-Done. Go ahead and test the content form.
-
-## Improving SEO
-
-Beacon is very focused on SEO and it's optimized to render pages as fast as possible, but that alone is not enough to perform well on search engines. On the Page Editor you can add Meta Tags and a Schema to provide extra info about the page which is used by search engines to extract contextual information.
-
-### Meta Tags
-
-The title and description are two essential pieces of information that every page must have, and even though title is not a meta tag per se it goes along with the description for SEO purposes. Both are automatically added to your page when you fill the Title and Description fields in the Page Editor form.
+Remember to change the Format to Elixir so that content can be evaluated as Elixir code.
 
-Besides those two pieces of meta, it's also important to add [Open Graph](https://ogp.me) meta tags used by social medias to enrich link previews on their platforms, so let's add some meta tags. Edit any page, go to the Meta Tags tab and add a couple of meta tags:
+Go to the home page again and refresh the page, it should render and you should see the current year displayed at the footer. But trying to submit the form to signup to the newsletter does nothing
+and you can see on the console logs of your Phoenix server that Beacon tries to handle that event but it doesn't find any handler for it. Let's fix that.
 
-| property       | content                 |
-| -------------- | ----------------------- |
-| og:title       | {{ page.title }}        |
-| og:description | {{ page.description }}  |
+## Event Handler
 
-Many other meta tags can be added depending on the type and content of the page, but those are a great start.
+Edit the home page and click on the Events tab. There we'll create a new event handler for the form submission `join` defined in our home page template.
 
-Save the changes, go to the Page tag, and Publish the changes.
+The name used in the template must match so create a new Event Handler named `join` with the following content:
 
-## Schema
 
-[Strutured Data](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) can be added to help search engines understand the content of the page. Go to the Schema tab and input this content in the code editor:
-
-```json
-[
-  {
-    "@context": "https://schema.org",
-    "@type": "Organization",
-    "url": "https://www.my_site.com",
-    "logo": "https://www.my_site.com/images/logo.png"
-  }
-]
+```elixir
+%{"waitlist" => %{"email" => email}} = event_params
+IO.puts("#{email} joined the waitlist")
+{:noreply, assign(socket, :joined, true)}
 ```
 
-These values have no meaning running your site locally but you should replace it accordingly if you plan to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/recipes/deploy-to-flyio.md).
-
-
-Save the changes, go to the Page tag, and Publish the changes.Save the changes.
+As you can see submiting the form will log the email to the console and set the `joined` assign to `true`, which is used to display a message to the user that the email was successfully submitted.
+Let's see it working. Publish the page again and go back to the home page, fill the form and submit it.
 
 --
 

From db36646ca8e5860409502c08904b978d3b61f3c7 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Thu, 16 May 2024 14:47:18 -0400
Subject: [PATCH 10/12] remove unnecessary doc

---
 guides/installation.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/guides/installation.md b/guides/installation.md
index 680dede1..c9fccccc 100644
--- a/guides/installation.md
+++ b/guides/installation.md
@@ -38,8 +38,6 @@ Note that the option `override: true` is required if running Beacon and Beacon L
 
 7. Run `mix setup`
 
-Now you can follow the other guides to [install Beacon LiveAdmin](https://github.com/BeaconCMS/beacon_live_admin/blob/main/guides/installation.md) or create [your first site](https://github.com/BeaconCMS/beacon/blob/main/guides/your-first-site.md).
-
 ## Detailed instructions
 
 ### Elixir 1.13 or later

From 41d1fb50a171c9d4e6fca791dfdaae382d0e3e26 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Thu, 16 May 2024 15:05:28 -0400
Subject: [PATCH 11/12] doc

---
 guides/your-first-site.md | 41 +++++++++++++++------------------------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/guides/your-first-site.md b/guides/your-first-site.md
index a7c3cc5c..9b1df5ab 100644
--- a/guides/your-first-site.md
+++ b/guides/your-first-site.md
@@ -16,14 +16,14 @@ Beacon can be installed on existing Phoenix applications, but make sure the mini
 Each site requires some minimal configuratin to run, lets use the built-in `beacon.install` generator to get started quickly. In the root of your application, execute:
 
 ```
-mix beacon.install --site my_site
+mix beacon.install --site my_site --path /
 ```
 
-You can use other name you like as long as you remember to change it in the following steps.
+You can use other name and path as needed, as long as you remember to change it in the following steps.
 
 ## Configuring the routes
 
-In the `router.ex` file,  you'll see the following scope in a new Phoenix application:
+In the `router.ex` file, you'll see the following scope in a new Phoenix application:
 
 ```elixir
 scope "/", MyAppWeb do
@@ -33,25 +33,15 @@ scope "/", MyAppWeb do
 end
 ```
 
-Or something similar if you have changed it before. For this tutorial we are assuming the Beacon site will be mounted at the root `/` route,
-so you can delete that block or change where the Beacon site is mounted, as long as you keep that in mind and adjust accordingly throughout the tutorial.
-
-And finally change the generated scope created by Beacon to look like:
-
-```elixir
-scope "/" do
-  pipe_through :browser
-  beacon_site "/", site: :my_site
-end
-```
-
-With this change the site will be served at [http://localhost:4000/](http://localhost:4000/)
+Or something similar if you have changed it before. For this tutorial we are assuming that the Beacon site will be mounted at the root `/` route,
+so you can delete that block or change where the Beacon site is mounted, as long as there's no route conflict since we can't mount a Beacon site and have
+a Phoenix route at the same path.
 
 ## Connecting to a database
 
-The `beacon.install` generator will change and create some files for you but the most important configuration at this point is adjusting the Repo credentials since Beacon requires a database to save layouts, pages, and all the site data.
+The `beacon.install` generator will change and create some files for you but the most important configuration at this point is adjusting the Repo credentials since Beacon requires a database to store site data.
 
-Look for the config `config :beacon, Beacon.Repo` in the files `config/dev.exs` and `config/prod.exs` to make the database configuration looks correct to your environment.
+Look for the config `config :beacon, Beacon.Repo` in the files `config/dev.exs` and `config/prod.exs` to adjust the database configuration to your environment.
 
 ## Acessing LiveAdmin to manage your site
 
@@ -265,25 +255,26 @@ Date.utc_today().year
 
 Remember to change the Format to Elixir so that content can be evaluated as Elixir code.
 
-Go to the home page again and refresh the page, it should render and you should see the current year displayed at the footer. But trying to submit the form to signup to the newsletter does nothing
+Go to the home page again and refresh the page, it should render and you should see the current year displayed at the footer. But you'll notice it fails to load the main image and also trying to submit the form to signup to the newsletter does nothing
 and you can see on the console logs of your Phoenix server that Beacon tries to handle that event but it doesn't find any handler for it. Let's fix that.
 
-## Event Handler
+## Handle the form submission event
 
 Edit the home page and click on the Events tab. There we'll create a new event handler for the form submission `join` defined in our home page template.
 
 The name used in the template must match so create a new Event Handler named `join` with the following content:
 
-
 ```elixir
 %{"waitlist" => %{"email" => email}} = event_params
 IO.puts("#{email} joined the waitlist")
 {:noreply, assign(socket, :joined, true)}
 ```
 
-As you can see submiting the form will log the email to the console and set the `joined` assign to `true`, which is used to display a message to the user that the email was successfully submitted.
-Let's see it working. Publish the page again and go back to the home page, fill the form and submit it.
+Save the change and Publish the page again. You should see a message on the page after submiting the form and also a message on the server console.
+
+## Upload an image
+
 
---
+-----------------------
 
-Congratulations! You have a site up and running. The next step is to [deploy your site](https://github.com/BeaconCMS/beacon/blob/main/guides/recipes/deploy-to-flyio.md).
\ No newline at end of file
+Congratulations! You have a site up and running. Check out all available [recipes](https://github.com/BeaconCMS/beacon/blob/main/guides/recipes/) to increment your site capabilities and deploy it.
\ No newline at end of file

From ae83c47789405ab36265c249aa071cecfe69d6c1 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Thu, 16 May 2024 15:16:04 -0400
Subject: [PATCH 12/12] upload image

---
 guides/your-first-site.md | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/guides/your-first-site.md b/guides/your-first-site.md
index 9b1df5ab..1f62f282 100644
--- a/guides/your-first-site.md
+++ b/guides/your-first-site.md
@@ -137,9 +137,9 @@ Edit the template to replace with this content:
           </span>
         </div>
         <div class="flex items-center justify-center">
-          <img
-            src="http://localhost:4000/beacon_assets/demo/narwin.webp"
-            alt="CMS Platform"
+          <BeaconWeb.Components.image
+            name="image.webp"
+            alt="My Page Image"
             width="600"
             height="600"
             style="aspect-ratio: 600 / 600; object-fit: cover;"
@@ -274,6 +274,18 @@ Save the change and Publish the page again. You should see a message on the page
 
 ## Upload an image
 
+Now let's upload an image on the Media Library to finish our home page. Go to http://localhost:4000/admin/my_site/media_library and upload a new image, anyone that you have available.
+Once it's uploaded, note the image will be converted to a webp format for performance reasons, so given a file logo.jpg it will be converted to logo.webp and that's the name you have to use on your template.
+
+Edit the home page template and replace the image name in the Image component with the name you just uploaded:
+
+```heex
+<BeaconWeb.Components.image
+  name="my_image.webp"
+  ...
+```
+
+Save the changes and Publish the page. Refresh the home page and you should see the image displayed.
 
 -----------------------