Build out Article index and show views

Gemfile

@@ -15,6 +15,7 @@ gem "bootsnap", require: false
 gem "importmap-rails"
 gem "propshaft"
 gem "tailwindcss-rails"
+gem "lucide-rails", github: "maybe-finance/lucide-rails"
 
 # Hotwire
 gem "stimulus-rails"

Gemfile.lock

@@ -6,6 +6,13 @@ GIT
       pagy (>= 3.5)
       rails (>= 6.0.3)
 
+GIT
+  remote: https://github.com/maybe-finance/lucide-rails.git
+  revision: 6170b3a0eceb43a8af6552638e9526673c356d0d
+  specs:
+    lucide-rails (0.2.0)
+      railties (>= 4.1.0)
+
 GIT
   remote: https://github.com/rails/rails.git
   revision: cc7f0b0d4cabc4807a271a6dfa22150943c80412
@@ -370,6 +377,7 @@ DEPENDENCIES
   hotwire-livereload
   importmap-rails
   jbuilder
+  lucide-rails!
   madmin!
   pg (~> 1.5)
   propshaft

app/controllers/articles_controller.rb

@@ -1,7 +1,14 @@
 class ArticlesController < ApplicationController
   def index
+    @articles = Article.order('publish_at DESC')
   end
 
   def show
+    @article = Article.where(slug: params[:id]).first
+    @next_articles = Article.where.not(slug: @article.slug).limit(3)
+
+    if @article.nil?
+      redirect_to '/404'
+    end
   end
 end

app/helpers/articles_helper.rb

@@ -1,2 +1,31 @@
 module ArticlesHelper
+
+  def calculate_read_time(content)
+    words_per_minute = 200
+    word_count = content.split.size
+    read_time_minutes = (word_count / words_per_minute.to_f).ceil
+    "#{read_time_minutes}Min Read"
+  end
+
+  ARTICLE_GRADIENTS = [
+    "from-rose-400 to-pink-500",
+    "from-pink-400 to-rose-500",
+    "from-fuchsia-400 to-pink-500",
+    "from-pink-400 to-fuchsia-500",
+    "from-purple-400 to-pink-500",
+    "from-pink-400 to-purple-500",
+    "from-violet-400 to-pink-500",
+    "from-pink-400 to-violet-500",
+    "from-indigo-400 to-pink-500",
+    "from-pink-400 to-indigo-500",
+    "from-blue-400 to-pink-500",
+    "from-pink-400 to-blue-500",
+    "from-sky-400 to-pink-500",
+    "from-pink-400 to-sky-500",
+    "from-cyan-400 to-pink-500",
+  ]
+
+  def article_random_gradient(article)
+    ARTICLE_GRADIENTS[article.slug.hash % ARTICLE_GRADIENTS.size]
+  end
 end

app/views/articles/_article_card.html.erb

@@ -0,0 +1,18 @@
+<%# locals: (article:) -%>
+<%= link_to article_url(article.slug), class: "overflow-hidden rounded-xl shadow transition hover:shadow-lg p-1 bg-white border flex flex-col justify-between h-full gap-5" do %>
+  <div class="h-56 w-full object-cover bg-gradient-to-b <%= article_random_gradient(article) %> rounded-lg"></div>
+  <div class="flex flex-col flex-grow justify-between">
+    <div class="flex items-center gap-3 px-6">
+      <time datetime="2022-10-10" class="block text-xs text-gray-500"> <%= article.publish_at %> </time>
+      <p class="text-xs text-gray-500">—</p>
+      <p class="text-xs text-gray-500"><%= calculate_read_time(article.content) %></p>
+    </div>
+    <div class="flex flex-col text-left px-6 pt-3 pb-6">
+      <h3 class="mt-0.5 text-xl text-gray-900 font-medium"><%= article.title %></h3>
+    </div>
+    <div class="flex items-center gap-3 px-6 pb-5">
+      <%= render partial: "articles/author_avatar", locals: { author: article.author_name } %>
+      <p><%= article.author_name %></p>
+    </div>
+  </div>
+<% end %>

app/views/articles/_author_avatar.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (author:) -%>
+<% if author.present? %>
+  <%= image_tag("#{author.downcase.gsub(' ', '_')}.png", class: "w-10 h-10 rounded-full") %>
+<% else %>
+  <%= image_tag("defaultavatar.jpg", class: "w-10 h-10 rounded-full") %>
+<% end %>

app/views/articles/_waitlist_cta_form.html.erb

@@ -0,0 +1,12 @@
+<div class="flex flex-col gap-y-2 items-center">
+  <div class="max-w-xl pt-8 mx-auto text-3xl">
+    Join the Maybe <%= image_tag("icon-maybe-color.svg", alt: "Maybe Logo", class: "inline") %> waitlist
+  </div>
+  <div class="flex flex-col gap-y-3 max-w-96">
+    <p class="text-sm text-neutral-500">Join the waitlist to get notified when a hosted version of the app is available.</p>
+    <%= render_signup_form %>
+  </div>
+</div>
+<div class="h-80 overflow-hidden p-3 mx-auto mb-10 mt-12 bg-black/[0.02] rounded-t-3xl border border-black/1 shadow-[0px_0px_22.07px_0px_rgba(0,0,0,0.03)]">
+  <%= image_tag "screenshot.png", alt: "Maybe Screenshot", class: "w-full border border-black/1 rounded-2xl shadow-[0_7.36px_7.36px_-3.68px_rgba(11,11,11,0.03)] shadow-[0_18.39px_22.07px_-3.68px_rgba(11,11,11,0.08)]" %>
+</div>

app/views/articles/index.html.erb

@@ -1,9 +1,26 @@
-<div class="max-w-3xl mx-auto text-center">
+<div class="max-w-5xl mx-auto text-center">
   <div class="flex flex-col gap-y-1">
     <div class="flex items-center justify-center gap-x-2">
-      <h1 class="text-3xl font-medium tracking-tight">Maybe Articles</h1>
-      <%= image_tag("icon-articles.svg", alt: "Articles", class: "inline") %>
+      <h1 class="text-3xl font-medium tracking-tight">Maybe Blog</h1>
+      <%= image_tag("icon-articles.svg", alt: "Blog", class: "inline") %>
     </div>
     <p class="text-sm text-neutral-400">Thoughts and insights around personal finance.</p>
   </div>
+  <div class="grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3 xl:grid-cols-3 gap-4 mt-7 mb-14">
+    <% @articles.each do |article| %>
+      <%= render partial: "articles/article_card", locals: { article: article } %>
+    <% end %>
+  </div>
+  <div class="flex flex-col gap-y-2 items-center">
+    <div class="max-w-xl pt-8 mx-auto text-3xl">
+      Join the Maybe <%= image_tag("icon-maybe-color.svg", alt: "Maybe Logo", class: "inline") %> waitlist
+    </div>
+    <div class="flex flex-col gap-y-3 max-w-96">
+      <p class="text-sm text-neutral-500">Join the waitlist to get notified when a hosted version of the app is available.</p>
+      <%= render_signup_form %>
+    </div>
+  </div>
+  <div class="h-80 overflow-hidden p-3 mx-auto mb-10 mt-12 bg-black/[0.02] rounded-t-3xl border border-black/1 shadow-[0px_0px_22.07px_0px_rgba(0,0,0,0.03)]">
+    <%= image_tag "screenshot.png", alt: "Maybe Screenshot", class: "w-full border border-black/1 rounded-2xl shadow-[0_7.36px_7.36px_-3.68px_rgba(11,11,11,0.03)] shadow-[0_18.39px_22.07px_-3.68px_rgba(11,11,11,0.08)]" %>
+  </div>
 </div>

app/views/articles/show.html.erb

@@ -1,4 +1,44 @@
-<div>
-  <h1 class="font-bold text-4xl">Articles#show</h1>
-  <p>Find me in app/views/articles/show.html.erb</p>
+<div class="flex flex-col items-center">
+  <%= link_to articles_path, class: "border border-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center" do %>
+    <%= lucide_icon("arrow-left", class: "h-5 w-5") %>
+  <% end %>
+  <article class="max-w-3xl mt-8">
+    <div class="h-96 w-full object-cover bg-gradient-to-b <%= article_random_gradient(@article) %> rounded-xl"></div>
+    <div class="text-center p-5 flex flex-col gap-6 px-32">
+      <div class="flex flex-col gap-2">
+        <div class="flex justify-center gap-3">
+          <time datetime="2022-10-10" class="block text-sm text-gray-500"><%= @article.publish_at %></time>
+          <p class="text-sm text-gray-500">—</p>
+          <p class="text-sm text-gray-500"><%= calculate_read_time(@article.content) %></p>
+        </div>
+        <h1 class="mt-0.5 text-3xl text-gray-900 font-semibold"><%= @article.title %></h1>
+      </div>
+      <div class="flex flex-col items-center gap-3">
+        <%= render partial: "articles/author_avatar", locals: { author: @article.author_name } %>
+        <p class="text-gray-500">Author</p>
+        <p><%= @article.author_name %></p>
+      </div>
+      <p class="text-gray-800 text-left"><%= @article.content %></p>
+    </div>
+    <div class="flex flex-col items-center gap-4">
+      <p class="text-gray-500 text-xs">SHARE</p>
+      <div class="flex gap-3">
+          <%= link_to "#", class: "border border-gray-300  focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center" do %>
+            <%= lucide_icon("link-2", class: "h-5 w-5 text-gray-700") %>
+          <% end %>
+          <%= link_to "#", class: "border border-gray-300  focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center" do %>
+            <%= lucide_icon("twitter", class: "h-5 w-5 text-gray-700") %>
+          <% end %>
+          <%= link_to "#", class: "border border-gray-300  focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center" do %>
+            <%= lucide_icon("linkedin", class: "h-5 w-5 text-gray-700") %>
+          <% end %>
+      </div>
+    </div>
+  </article>
+  <div class="grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3 xl:grid-cols-3 gap-4 mt-7 mb-14">
+    <% @next_articles.each do |next_article| %>
+      <%= render "articles/article_card", article: next_article %>
+    <% end %>
+  </div>
+  <%= render partial: "articles/waitlist_cta_form" %>
 </div>

app/views/layouts/application.html.erb

@@ -27,7 +27,7 @@
         <span class="px-1.5 py-0.5 text-[0.1em] uppercase bg-white border rounded-full border-neutral-200/75 text-neutral-500">Early Access</span>
       </div>
       <nav class="flex-1 text-sm text-center gap-x-1">
-        <%= link_to "Articles", articles_path, class: "px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl" %>
+        <%= link_to "Blog", articles_path, class: "px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl" %>
         <a href="#" class="px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl">Glossary</a>
         <a href="https://github.com/maybe-finance/maybe" class="px-3 py-1.5 text-neutral-800 hover:text-neutral-9000 hover:bg-neutral-200/60 rounded-xl">Contribute</a>
       </nav>
@@ -53,7 +53,7 @@
             <h4 class="mb-4 text-xs font-medium uppercase">General</h4>
             <ul>
               <li>
-                <%= link_to "Articles", articles_path %>
+                <%= link_to "Blog", articles_path %>
               </li>
               <li>
                 <%= link_to "Glossary", "#" %>