~nicolaskempf57/elixir-starter-explaned

0625c56fd361ce274fc0bea39ee472fe54fbffa1 — Nicolas KEMPF a month ago 845bbfa 
feat(tailwind): Style page

We're using a free components from https://tailwindui.com/components/marketing/sections/heroes

Thanks to tailwind watcher, files are updated in realtime. It allows us to see our CSS changes as soon as we save them.

We start with updating the navigation bar and the main content.
patch browse 
5 files changed, 107 insertions(+), 55 deletions(-)

M apps/starter_web/assets/css/app.css
M apps/starter_web/lib/starter_web/templates/layout/app.html.heex
M apps/starter_web/lib/starter_web/templates/layout/live.html.heex
M apps/starter_web/lib/starter_web/templates/layout/root.html.heex
M apps/starter_web/lib/starter_web/templates/page/index.html.heex

M apps/starter_web/assets/css/app.css => apps/starter_web/assets/css/app.css +4 -0
@@ 1,3 1,7 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Alerts and form errors used by phx.new */
.alert {
  padding: 15px;


M apps/starter_web/lib/starter_web/templates/layout/app.html.heex => apps/starter_web/lib/starter_web/templates/layout/app.html.heex +1 -1
@@ 1,4 1,4 @@
<main class="container">
<main class="container mx-auto">
  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
  <%= @inner_content %>


M apps/starter_web/lib/starter_web/templates/layout/live.html.heex => apps/starter_web/lib/starter_web/templates/layout/live.html.heex +1 -1
@@ 1,4 1,4 @@
<main class="container">
<main class="container mx-auto">
  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>


M apps/starter_web/lib/starter_web/templates/layout/root.html.heex => apps/starter_web/lib/starter_web/templates/layout/root.html.heex +13 -14
@@ 10,20 10,19 @@
    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
  </head>
  <body>
    <header>
      <section class="container">
        <nav>
          <ul>
            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
            <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
              <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
            <% end %>
          </ul>
        </nav>
        <a href="https://phoenixframework.org/" class="phx-logo">
          <img src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
        </a>
      </section>
    <header class="container mx-auto">
      <div class="pt-6 px-4 sm:px-6 lg:px-8">
          <nav class="flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
            <a href="https://phoenixframework.org/">
              <span class="sr-only">Phoenix Framework</span>
              <img class="h-8 w-auto sm:h-10" src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
            </a>
            <div class="md:ml-10 md:pr-4 md:space-x-8">
              <a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a>
              <%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home), class: "font-medium text-gray-500 hover:text-gray-900" %>
            </div>
          </nav>
        </div>
    </header>
    <%= @inner_content %>
  </body>


M apps/starter_web/lib/starter_web/templates/page/index.html.heex => apps/starter_web/lib/starter_web/templates/page/index.html.heex +88 -39
@@ 1,41 1,90 @@
<section class="phx-hero">
  <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
  <p>Peace of mind from prototype to production</p>
<section class="mt-8 mb-2 mx-auto max-w-7xl px-4 sm:mt-10 sm:px-6 md:mt-14 lg:mt-20 lg:px-8 xl:mt-24">
  <div class="sm:text-center lg:text-left">
    <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
      <%= gettext "Welcome to %{name}!", name: "Phoenix" %>
    </h1>
    <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
      Peace of mind from prototype to production
    </p>
    <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start sm:items-center">
      <div class="rounded-md shadow">
        <a href="https://hexdocs.pm/phoenix/overview.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700 md:py-4 md:text-lg md:px-10"> Guides &amp; Docs </a>
      </div>
      <div class="mt-3 sm:mt-0 sm:ml-3">
        <a href="https://github.com/phoenixframework/phoenix" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-orange-700 bg-orange-100 hover:bg-orange-200 md:py-4 md:text-lg md:px-10"> Source </a>
      </div>
      <div class="mt-3 sm:mt-0 sm:ml-3">
        <a href="https://github.com/phoenixframework/phoenix/blob/v1.6/CHANGELOG.md" class="font-medium text-orange-600 hover:text-orange-500"> v1.6 Changelog </a>
      </div>
    </div>
  </div>
</section>

<section class="row">
  <article class="column">
    <h2>Resources</h2>
    <ul>
      <li>
        <a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
      </li>
      <li>
        <a href="https://github.com/phoenixframework/phoenix">Source</a>
      </li>
      <li>
        <a href="https://github.com/phoenixframework/phoenix/blob/v1.6/CHANGELOG.md">v1.6 Changelog</a>
      </li>
    </ul>
  </article>
  <article class="column">
    <h2>Help</h2>
    <ul>
      <li>
        <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
      </li>
      <li>
        <a href="https://web.libera.chat/#elixir">#elixir on Libera Chat (IRC)</a>
      </li>
      <li>
        <a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
      </li>
      <li>
        <a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
      </li>
      <li>
        <a href="https://discord.gg/elixir">Elixir on Discord</a>
      </li>
    </ul>
  </article>
</section>
<div class="py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="lg:text-center">
      <h2 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">Help</h2>
    </div>

    <div class="mt-10">
      <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
        <div>
          <a href="https://elixirforum.com/c/phoenix-forum" class="text-lg leading-6 font-medium text-gray-900 flex">
          <!-- Heroicon name: outline/globe-alt -->
            <span class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mr-4">
              <!-- Heroicon name: outline/globe-alt -->
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
              </svg>
            </span>
            Forum
          </a>
        </div>

        <div>
          <a href="https://web.libera.chat/#elixir" class="text-lg leading-6 font-medium text-gray-900 flex">
            <span class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
            </span>
            #elixir on Libera Chat (IRC)
          </a>
        </div>

        <div>
          <a href="https://twitter.com/elixirphoenix" class="text-lg leading-6 font-medium text-gray-900 flex">
            <span class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
              </svg>
            </span>
            Twitter @elixirphoenix
          </a>
        </div>

        <div>
          <a href="https://elixir-slackin.herokuapp.com/" class="text-lg leading-6 font-medium text-gray-900 flex">
            <span class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
              </svg>
            </span>
            Elixir on Slack
          </a>
        </div>

        <div>
          <a href="https://discord.gg/elixir" class="text-lg leading-6 font-medium text-gray-900 flex">
            <span class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
              </svg>
            </span>
            Elixir on Discord
          </a>
        </div>
      </div>
    </div>
  </div>
</div>