Merge pull request #41 from felipelincoln/dev

Release v0.6.0

.github/workflows/cache.yml

@@ -0,0 +1,25 @@
+name: Update cache
+
+on:
+    push:
+      branches: [ dev ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Login to GitHub container registry
+        run: echo ${{ secrets.WRITE_PACKAGE_TOKEN }} | docker login docker.pkg.github.com -u felipelincoln --password-stdin
+
+      - name: Build docker image from cache
+        run: |
+          docker pull docker.pkg.github.com/felipelincoln/branchpage/dev-cache:latest
+          docker build --build-arg MIX_ENV=test --cache-from docker.pkg.github.com/felipelincoln/branchpage/dev-cache:latest --tag new-cache .
+
+      - name: Push new cache image
+        run: |
+          docker tag new-cache docker.pkg.github.com/felipelincoln/branchpage/dev-cache:latest
+          docker push docker.pkg.github.com/felipelincoln/branchpage/dev-cache:latest

.github/workflows/elixir.yml

@@ -9,17 +9,13 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Login to GitHub Docker Registry
-        uses: docker/login-action@v1
-        with:
-          registry: docker.pkg.github.com
-          username: felipelincoln
-          password: ${{ secrets.WRITE_PACKAGE_TOKEN }}
+      - name: Login to GitHub container registry
+        run: echo ${{ secrets.WRITE_PACKAGE_TOKEN }} | docker login docker.pkg.github.com -u felipelincoln --password-stdin
 
       - name: Docker build
         run: |
-          docker pull docker.pkg.github.com/felipelincoln/branchpage/dev:latest
-          docker build --tag branchpage-test:latest --build-arg MIX_ENV=test --cache-from docker.pkg.github.com/felipelincoln/branchpage/dev:latest .
+          docker pull docker.pkg.github.com/felipelincoln/branchpage/dev-cache:latest
+          docker build --tag branchpage:latest --build-arg MIX_ENV=test --cache-from docker.pkg.github.com/felipelincoln/branchpage/dev-cache:latest .
 
       - name: Test
-        run: docker run --rm -e MIX_ENV=test branchpage-test mix test
+        run: docker run --rm -e MIX_ENV=test branchpage mix test

Dockerfile

@@ -1,18 +1,15 @@
-FROM elixir:1.10.4-alpine
+FROM elixir:1.11-alpine
 
-# prepare main dir
+# setup compile env
 WORKDIR /app
-
-# install build dependencies
-RUN apk add npm
-
-# install dev dependencies
-RUN apk add inotify-tools
+ARG MIX_ENV=prod
 
 # install hex and rebar
-ENV MIX_HOME /root/.mix
 RUN mix do local.hex --force, local.rebar --force
 
+# install dependencies
+RUN apk add npm inotify-tools
+
 # install mix dependencies
 COPY mix.exs mix.lock ./
 COPY apps/web/mix.exs apps/web/mix.exs
@@ -31,8 +28,7 @@ RUN npm run --prefix ./apps/web/assets deploy
 RUN mix phx.digest
 
 # install umbrella apps
-COPY apps apps
-ARG MIX_ENV=prod
+COPY . ./
 RUN mix compile
 
 # start application

apps/web/assets/css/base.css

@@ -1,3 +1,37 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --space-mobile: 1.25rem;
+  --space: 1.75rem;
+}
+
+@layer base {
+  html {
+    font-size: 18px;
+    @apply text-gray-800
+  }
+
+  iframe {
+    display: none
+  }
+}
+
+@layer components {
+  .logo {
+    @apply font-bold border-2 border-gray-800 px-1
+
+  }
+  .navbar {
+    @apply flex items-center justify-between px-mb sm:px-sc mb-mb sm:mb-sc h-16 sm:h-20
+  }
+
+  .navbar-side-item {
+    @apply w-1/5 min-w-min whitespace-nowrap flex items-center h-16
+  }
+
+  .container {
+    @apply max-w-screen-sm sm:mx-auto box-content px-mb sm:px-sc
+  }
+}

apps/web/assets/tailwind.config.js

@@ -6,10 +6,26 @@ module.exports = {
   ],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        'sm': '680px'
+      },
+      fontFamily: {
+        'sans': '"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif'
+      },
+      spacing: {
+        'sc': 'var(--space)',
+        'mb': 'var(--space-mobile)'
+      },
+    },
   },
   variants: {
-    extend: {},
+    extend: {
+      display: ['last'],
+    },
   },
   plugins: [],
+  corePlugins: {
+    container: false
+  }
 }

apps/web/lib/web/live/article_live.ex

@@ -0,0 +1,39 @@
+defmodule Web.ArticleLive do
+  use Phoenix.LiveView
+  import Phoenix.HTML, only: [raw: 1]
+
+  @meta %{
+    title: "branchpage title",
+    description: "some description",
+    social_image: "/images/cover.png"
+  }
+
+  @impl true
+  def mount(%{"username" => _username, "article" => _}, _session, socket) do
+    name = "Felipe Lincoln"
+    date = Timex.today() |> Timex.format!("%b %e", :strftime)
+    title = "Lorem ipsum dolor sit amet. Consectetur adipiscing elit."
+
+    body_html = """
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare eu mi eget lacinia. Maecenas tincidunt risus vel mi vehicula, sit amet varius ligula porta. Pellentesque id ex viverra, pellentesque neque eget, aliquet magna. Sed viverra egestas pulvinar. Mauris luctus egestas ante, et facilisis ligula vulputate sit amet. Nunc ut ipsum velit. Vivamus finibus scelerisque nibh, ac dapibus mauris finibus ut. Sed consequat nibh at pharetra ornare.</p>
+    <br>
+    <img src="https://www.bretfisher.com/content/images/2019/11/C4-promo-with-title.png">
+    <br>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare eu mi eget lacinia. Maecenas tincidunt risus vel mi vehicula, sit amet varius ligula porta. Pellentesque id ex viverra, pellentesque neque eget, aliquet magna. Sed viverra egestas pulvinar. Mauris luctus egestas ante, et facilisis ligula vulputate sit amet. Nunc ut ipsum velit. Vivamus finibus scelerisque nibh, ac dapibus mauris finibus ut. Sed consequat nibh at pharetra ornare.</p>
+    <p>Vivamus nunc dui, pellentesque quis nulla vel, laoreet facilisis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis libero nibh, varius ac lacus nec, gravida facilisis mi. Mauris urna libero, laoreet sit amet gravida ac, pharetra eu magna. Morbi iaculis egestas interdum. Donec a mi sit amet ipsum consequat malesuada. Nam magna erat, tempus eget tortor nec, fringilla tincidunt odio. Mauris finibus eget mi vitae aliquet. Maecenas a est vitae urna vestibulum vulputate id at urna. Donec id feugiat orci, vel tincidunt nunc. Quisque dapibus libero porta fringilla consectetur.</p>
+    <p>Aenean nunc augue, bibendum vitae aliquet sed, rhoncus at mauris. Morbi eleifend ultrices commodo. Donec bibendum justo a ultricies vehicula. Sed iaculis enim et nisl auctor, nec ultricies tortor suscipit. Phasellus non convallis dui. Nullam scelerisque quis tortor nec sollicitudin. Pellentesque tristique pretium nunc a tincidunt. Fusce sodales nunc sapien, at scelerisque diam fermentum sit amet. Fusce eu arcu magna. Curabitur ullamcorper elementum nisi vitae efficitur. Curabitur in venenatis magna. Fusce suscipit ex lectus, at iaculis est efficitur nec. Cras vitae dolor placerat, placerat sapien sit amet, tempor magna. Fusce sagittis leo sit amet magna venenatis fringilla. Phasellus euismod purus ex, quis egestas odio elementum sed.</p>
+    <p>Suspendisse semper diam sit amet enim placerat, nec suscipit dolor efficitur. Suspendisse nec erat vitae felis dignissim rhoncus porta sit amet ipsum. Quisque consequat leo nec est hendrerit aliquet. Donec accumsan sem ut sapien placerat facilisis. Sed pharetra efficitur mi, quis condimentum ipsum egestas quis. Duis ultrices, nibh ut placerat tincidunt, elit dolor tincidunt orci, id ornare metus urna accumsan ex. Duis quis ullamcorper ex, blandit sagittis metus. Quisque urna mi, condimentum quis tortor non, maximus maximus felis. Suspendisse accumsan augue purus, ut pharetra nunc congue at.</p>
+    <p>Fusce sit amet euismod arcu. In hac habitasse platea dictumst. Morbi non ullamcorper turpis. Curabitur rutrum venenatis nisl, sit amet pharetra erat rhoncus non. Suspendisse et arcu vitae eros bibendum porta convallis vel dolor. Maecenas eget sodales ex. Vestibulum feugiat purus vitae risus ultrices, sed vehicula justo posuere. Nulla commodo, elit sed tincidunt facilisis, nunc nunc posuere ligula, bibendum auctor mi ante et augue. Pellentesque finibus facilisis ex, eget volutpat turpis aliquet ac. Nullam lectus erat, finibus sed purus eu, maximus commodo enim. Curabitur tincidunt justo nec justo laoreet sodales vitae a nibh.</p>
+    """
+
+    socket =
+      socket
+      |> assign(@meta)
+      |> assign(:name, name)
+      |> assign(:date, date)
+      |> assign(:title, title)
+      |> assign(:body_html, body_html)
+
+    {:ok, socket}
+  end
+end

apps/web/lib/web/live/article_live.html.leex

@@ -0,0 +1,22 @@
+<nav class="navbar">
+  <a href="/a" class="font-bold" aria-labelledby="navBack">
+    <span id="navBack" class="hidden sm:inline"><%= @name %></span>
+    <svg class="inline sm:hidden h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+  </a>
+
+  <div>
+    <a href="#" class="mr-mb sm:mr-sc">Edit</a>
+    <a href="#">Donate</a>
+  </div>
+</nav>
+
+<main class="container">
+  <article>
+    <header>
+      <p class="hidden sm:block text-gray-500"><%= @date %></p>
+      <h1 class="font-black text-gray-900 text-3xl sm:text-5xl sm:mb-sc"><%= @title %></h1>
+      <p class="sm:hidden text-gray-500 mb-5 mt-1"><%= @date %><span class="px-2">–</span><a href="/a" class="font-bold"><%= @name %></a></p>
+    </header>
+    <div class="text-gray-700"><%= raw @body_html %></div>
+  </article>
+</main>

apps/web/lib/web/live/blog_live.ex

@@ -0,0 +1,38 @@
+defmodule Web.BlogLive do
+  use Phoenix.LiveView
+  import Phoenix.HTML, only: [raw: 1]
+
+  @meta %{
+    title: "branchpage title",
+    description: "some description",
+    social_image: "/images/cover.png"
+  }
+
+  @impl true
+  def mount(%{"username" => _username}, _session, socket) do
+    articles = [
+      %{
+        title: "Lorem ipsum dolor sit amet. Consectetur adipiscing elit.",
+        date: Timex.today() |> Timex.format!("%b %e", :strftime),
+        body_html: """
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare eu mi eget lacinia. Maecenas tincidunt risus vel mi vehicula, sit amet varius ligula porta. Pellentesque id ex viverra, pellentesque neque eget, aliquet magna. Sed viverra egestas pulvinar. Mauris luctus egestas ante, et facilisis ligula vulputate sit amet. Nunc ut ipsum velit. Vivamus finibus scelerisque nibh, ac dapibus mauris finibus ut. Sed consequat nibh at pharetra ornare.</p>
+        <p>Vivamus nunc dui, pellentesque quis nulla vel, laoreet facilisis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis libero nibh, varius ac lacus nec, gravida facilisis mi. Mauris urna libero ...</p>
+        """
+      },
+      %{
+        title: "Consectetur adipiscing elit.",
+        date: Timex.today() |> Timex.format!("%b %e", :strftime),
+        body_html: """
+        <p>Vivamus nunc dui, pellentesque quis nulla vel, laoreet facilisis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis libero nibh, varius ac lacus nec, gravida facilisis mi. Mauris urna libero, laoreet sit amet gravida ac, pharetra eu magna. Morbi iaculis egestas interdum. Donec a mi sit amet ipsum consequat malesuada. Nam magna erat, tempus eget tortor nec, fringilla tincidunt odio. Mauris finibus eget mi vitae aliquet. Maecenas a est vitae urna vestibulum vulputate id at urna. Donec id feugiat orci, vel tincidunt nunc. Quisque dapibus libero porta fringilla consectetur ... </p>
+        """
+      }
+    ]
+
+    socket =
+      socket
+      |> assign(@meta)
+      |> assign(:articles, articles)
+
+    {:ok, socket}
+  end
+end

apps/web/lib/web/live/blog_live.html.leex

@@ -0,0 +1,29 @@
+<nav class="navbar">
+  <a href="/" class="font-bold border-2 border-gray-800 px-1" aria-label="Branchpage">bp</a>
+  <a href="#">Donate</a>
+</nav>
+
+<main class="container">
+  <section class="flex flex-col items-center sm:w-1/2 sm:mx-auto px-mb sm:px-0 mb-10 sm:mb-14">
+    <figure class="w-24 h-24 sm:w-40 sm:h-40 rounded-full bg-yellow-400 mb-mb sm:mb-sc"></figure>
+    <h1 class="text-xl sm:text-3xl font-black mb-1">Fernando Lincoln</h1>
+    <p class="text-gray-500">Hi, I am lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
+    <div class="w-full">
+    </div>
+  </section>
+
+  <section>
+    <%= for a <- @articles do %>
+      <article>
+        <header>
+          <p class="text-gray-500 text-sm sm:text-base"><a href="/a/a"><%= a.date %></a></p>
+          <h2 class="font-black text-lg sm:text-2xl"><a href="/a/a"><%= a.title %></a></h1>
+        </header>
+        <div class="text-gray-700 mb-1"><%= raw a.body_html %></div>
+        <a href="/a/a" class="text-gray-900 font-bold hover:underline">Read more</a>
+      </article>
+      <hr class="my-mb my-sc last:hidden">
+    <% end %>
+  </section>
+</main>
+

apps/web/lib/web/live/home_live.ex

@@ -1,5 +1,6 @@
 defmodule Web.HomeLive do
   use Phoenix.LiveView
+  import Phoenix.HTML, only: [raw: 1]
 
   @meta %{
     title: "branchpage title",
@@ -9,17 +10,33 @@ defmodule Web.HomeLive do
 
   @impl true
   def mount(_params, _session, socket) do
+    articles = [
+      %{
+        title: "Lorem ipsum dolor sit amet. Consectetur adipiscing elit.",
+        date: Timex.today() |> Timex.format!("%b %e", :strftime),
+        body_html: """
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare eu mi eget lacinia. Maecenas tincidunt risus vel mi vehicula, sit amet varius ligula porta. Pellentesque id ex viverra, pellentesque neque eget, aliquet magna. Sed viverra egestas pulvinar. Mauris luctus egestas ante, et facilisis ligula vulputate.</p>
+        <br>
+        <img src="https://www.bretfisher.com/content/images/2019/11/C4-promo-with-title.png">
+        <br>
+        """
+      },
+      %{
+        title: "Consectetur adipiscing elit.",
+        date: Timex.today() |> Timex.format!("%b %e", :strftime),
+        body_html: """
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare eu mi eget lacinia. Maecenas tincidunt risus vel mi vehicula, sit amet varius ligula porta. Pellentesque id ex viverra, pellentesque neque eget, aliquet magna. Sed viverra egestas pulvinar. Mauris luctus egestas ante, et facilisis ligula vulputate sit amet. Nunc ut ipsum velit. Vivamus finibus scelerisque nibh, ac dapibus mauris finibus ut. Sed consequat nibh at pharetra ornare.</p>
+        <p>Vivamus nunc dui, pellentesque quis nulla vel, laoreet facilisis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis libero nibh, varius ac lacus nec, gravida facilisis mi. Mauris urna libero, laoreet sit amet gravida ac, pharetra eu magna. Morbi iaculis egestas interdum. Donec a mi sit amet ipsum consequat malesuada. Nam magna erat, tempus eget tortor nec, fringilla tincidunt odio. Mauris finibus eget mi vitae aliquet. Maecenas a est vitae urna vestibulum vulputate id at urna. Donec id feugiat orci, vel tincidunt nunc. Quisque dapibus libero porta fringilla consectetur.</p>
+        <p>Aenean nunc augue, bibendum vitae aliquet sed, rhoncus at mauris. Morbi eleifend ultrices commodo. Donec bibendum justo a ultricies vehicula. Sed iaculis enim et nisl auctor, nec ultricies tortor suscipit. Phasellus non convallis dui. Nullam scelerisque quis tortor nec sollicitudin. Pellentesque tristique pretium nunc a tincidunt. Fusce sodales nunc sapien, at scelerisque diam fermentum sit amet. Fusce eu arcu magna. Curabitur ullamcorper elementum nisi vitae efficitur. Curabitur in venenatis magna. Fusce suscipit ex lectus, at iaculis est efficitur nec. Cras vitae dolor placerat, placerat sapien sit amet, tempor magna. Fusce sagittis leo sit amet magna venenatis fringilla. Phasellus euismod purus ex, quis egestas odio elementum sed.</p>
+        """
+      }
+    ]
+
     socket =
       socket
       |> assign(@meta)
-      |> assign(:value, 0)
+      |> assign(:articles, articles)
 
     {:ok, socket}
   end
-
-  @impl true
-  def handle_event("increase", _value, socket) do
-    value = socket.assigns.value
-    {:noreply, assign(socket, :value, value + 1)}
-  end
 end

apps/web/lib/web/live/home_live.html.leex

@@ -1,2 +1,27 @@
-<button class="bg-blue-500 text-white m-3 p-1 px-2 rounded-xl" phx-click="increase">Increase</button>
-<p class="text-xl m-3"><%= @value %></p>
+<nav class="navbar">
+  <a href="/" class="logo" aria-label="Branchpage">bp</a>
+  <div>
+    <a href="/search" class="mr-mb sm:mr-sc">Search</a>
+    <a href="#">Start a blog</a>
+  </div>
+</nav>
+
+<main class="container">
+  <section class="flex flex-col items-center sm:w-1/2 h-64 sm:mx-auto px-mb sm:px-0 mb-10 sm:mb-14 border-2 border-yellow-400">
+    landing section
+  </section>
+
+  <section>
+    <%= for a <- @articles do %>
+      <article>
+        <header>
+          <p class="text-gray-500 text-sm sm:text-base"><a href="/a/a"><%= a.date %></a><span class="px-2">–</span><a href="/a" class="font-bold"><%= "Felipe Lincoln" %></a></p>
+          <h2 class="font-black text-lg sm:text-2xl"><a href="/a/a"><%= a.title %></a></h1>
+        </header>
+        <div class="text-gray-700 mb-1"><%= raw a.body_html %></div>
+        <a href="/a/a" class="text-gray-900 font-bold hover:underline">Read more</a>
+      </article>
+      <hr class="my-mb my-sc last:hidden">
+    <% end %>
+  </section>
+</main>