Add components for Article

.rubocop.yml

@@ -50,3 +50,7 @@ RSpec/ContextWording:
   Prefixes:
     - when
     - given
+
+Lint/MissingSuper:
+  Exclude:
+    - 'app/components/**/*'

app/components/application_component.rb

@@ -0,0 +1,11 @@
+class ApplicationComponent < ViewComponent::Base
+  def initialize(tag: nil, classes: nil, **options)
+    @tag = tag
+    @classes = classes
+    @options = options
+  end
+
+  def call
+    content_tag(@tag, content, class: @classes, **@options) if @tag
+  end
+end

app/components/articles/list_items/component.html.erb

@@ -0,0 +1,11 @@
+<div class="post-preview">
+  <%= link_to article do %>
+    <h2 class="post-title"><%= article.title %></h2>
+    <h3 class="post-subtitle"><%= truncate(article.content.to_plain_text, length: 100) %></h3>
+  <% end %>
+
+  <%= render PostingDetails::Component.new(name: 'Author', time: article.created_at) %>
+</div>
+<!-- Divider-->
+<hr class="my-4" />
+<!-- Pager-->

app/components/articles/list_items/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Articles
+  module ListItems
+    class Component < ApplicationComponent
+      attr_reader :article
+
+      with_collection_parameter :article
+
+      def initialize(article:)
+        @article = article
+      end
+    end
+  end
+end

app/components/base/button/component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Base
+  module Button
+    class Component < ApplicationComponent
+
+      attr_reader :type, :link
+
+      BASE_CLASSES = %w[btn].freeze
+
+      PRIMARY_CLASSES = %w[btn-primary].freeze
+      SECONDARY_CLASSES = %w[btn-secondary].freeze
+      SUCCESS_CLASSES = %w[btn-success].freeze
+      DANGER_CLASSES = %w[btn-danger].freeze
+      LINK_CLASSES = %w[btn-link].freeze
+
+      BUTTON_TYPE_MAPPING = {
+        primary: PRIMARY_CLASSES,
+        secondary: SECONDARY_CLASSES,
+        success: SUCCESS_CLASSES,
+        danger: DANGER_CLASSES,
+        link: LINK_CLASSES
+      }.freeze
+
+      def initialize(type: :primary, link: '#', **options)
+        @options = options
+
+        @options[:tag] ||= :a
+        @options[:href] = link
+        @options[:classes] = classes(type)
+      end
+
+      def call
+        render ApplicationComponent.new(**@options).with_content(content)
+      end
+
+      private
+
+      def classes(type)
+        (BASE_CLASSES + BUTTON_TYPE_MAPPING[type]).join(' ')
+      end
+    end
+  end
+end

app/views/shared/_header.html.erb → app/components/header/component.html.erb

@@ -1,10 +1,10 @@
-<header class="masthead" style="background-image: url(<%= image_url "header-image.jpeg" %>)">
+<header class="masthead" style="background-image: url(<%= image %>)">
   <div class="container position-relative px-4 px-lg-5">
     <div class="row gx-4 gx-lg-5 justify-content-center">
       <div class="col-md-10 col-lg-8 col-xl-7">
         <div class="site-heading">
-          <h1>View Component Blog</h1>
-          <span class="subheading">Nimble Growth#35 Project</span>
+          <h1><%= heading %></h1>
+          <span class="subheading"><%= subheading %></span>
         </div>
       </div>
     </div>

app/components/header/component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Header
+  class Component < ApplicationComponent
+    attr_reader :image, :heading, :subheading
+
+    def initialize(image:, heading:, subheading:)
+      @image = image
+      @heading = heading
+      @subheading = subheading
+    end
+  end
+end

app/components/posting_details/component.html.erb

@@ -0,0 +1 @@
+<p class="post-meta">Posted by <a href="#"><%= name %></a> on <%= post_time(time) %></p>

app/components/posting_details/component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module PostingDetails
+  class Component < ApplicationComponent
+    attr_reader :time, :name
+    def initialize(name:, time:)
+      @name = name
+      @time = time
+    end
+
+    delegate :post_time, to: :helpers
+  end
+end

app/controllers/articles_controller.rb

@@ -48,13 +48,13 @@ def destroy
   end
 
   private
-    # Use callbacks to share common setup or constraints between actions.
-    def set_article
-      @article = Article.find(params[:id])
-    end
+  # Use callbacks to share common setup or constraints between actions.
+  def set_article
+    @article = Article.find(params[:id])
+  end
 
-    # Only allow a list of trusted parameters through.
-    def article_params
-      params.require(:article).permit(:title, :content)
-    end
+  # Only allow a list of trusted parameters through.
+  def article_params
+    params.require(:article).permit(:title, :content, :avatar)
+  end
 end

app/models/article.rb

@@ -1,6 +1,8 @@
 class Article < ApplicationRecord
   has_many :comments
 
+  has_one_attached :avatar
+
   validates :title, presence: true
   has_rich_text :content
 end

app/views/articles/_form.html.erb

@@ -17,6 +17,11 @@
       <%= form.text_field :title, class: "form-control", placeholder: "Title of your blog" %>
     </div>
 
+    <div class="form-group">
+      <%= form.label 'Cover image' %>
+      <%= form.file_field :avatar, class: "form-control" %>
+    </div>
+
     <div class="form-group">
       <%= form.label :content %>
       <%= form.rich_text_area :content %>

app/views/articles/edit.html.erb

@@ -1,3 +1,7 @@
+<%= render Header::Component.new(image: image_url("write-blog.jpeg"),
+                                 heading: "Edit Blog",
+                                 subheading: @article.title) %>
+
 <div class="container px-4 px-lg-5 mb-5">
   <div class="row gx-4 gx-lg-5 justify-content-center">
     <div><h1 class="d-flex">Edit blog</h1></div>

app/views/articles/index.html.erb

@@ -1,25 +1,13 @@
+<%= render Header::Component.new(image: image_url("header-image.jpeg"),
+                                 heading: "View Component in Real World",
+                                 subheading: "Growth#35 Project") %>
+
 <p id="notice"><%= notice %></p>
 
 <div class="container px-4 px-lg-5">
   <div class="row gx-4 gx-lg-5 justify-content-center">
     <div class="col-md-10 col-lg-8 col-xl-7">
-      <!-- Post preview-->
-      <% @articles.each do |article| %>
-      <div class="post-preview">
-        <%= link_to article do %>
-          <h2 class="post-title"><%= article.title %></h2>
-          <h3 class="post-subtitle"><%= truncate(article.content.to_plain_text, length: 100) %></h3>
-        <% end %>
-        <p class="post-meta">
-          Posted by
-          <a href="#!">Author</a>
-          on <%= post_time(article.created_at) %>
-        </p>
-      </div>
-      <!-- Divider-->
-      <hr class="my-4" />
-      <!-- Pager-->
-      <% end %>
+      <%= render Articles::ListItems::Component.with_collection(@articles) %>
 
       <%== pagy_bootstrap_nav(@pagy) %>
     </div>

app/views/articles/new.html.erb

@@ -1,3 +1,7 @@
+<%= render Header::Component.new(image: image_url("write-blog.jpeg"),
+                                 heading: "Write A Blog",
+                                 subheading: "Publish to the world") %>
+
 <div class="container px-4 px-lg-5 mb-5">
   <div class="row gx-4 gx-lg-5 justify-content-center">
     <div><h1 class="d-flex">Create a blog</h1></div>

app/views/articles/show.html.erb

@@ -1,3 +1,8 @@
+<%= render Header::Component.new(image: url_for(@article.avatar.attached? ? @article.avatar : nil),
+                                 heading: @article.title,
+                                 subheading: (render PostingDetails::Component
+                                                      .new(name: "Author", time:@article.created_at))) %>
+
 <p id="notice"><%= notice %></p>
 
 <article class="mb-4">
@@ -6,9 +11,11 @@
       <div class="col-md-10 col-lg-8 col-xl-7">
         <%= @article.content %>
         <div class="mt-5">
-          <%= link_to 'Edit Blog', edit_article_path(@article), class: "btn btn-primary" %>
-          <%= link_to 'Delete Blog', @article, method: :delete, class: "btn btn-danger",
-                      data: { confirm: 'Are you sure?' } %>
+          <%= render ::Base::Button::Component.new(link: edit_article_path(@article))
+                                              .with_content('Edit Blog') %>
+          <%= render ::Base::Button::Component.new(link: @article, type: :danger, method: :delete,
+                                                   data: { confirm: 'Are you sure?' })
+                                              .with_content('Delete Blog') %>
         </div>
 
         <% if @article.comments.present? %>

app/views/layouts/application.html.erb

@@ -19,7 +19,6 @@
 
   <body>
     <%= render 'shared/navbar' %>
-    <%= render 'shared/header' %>
     <%= yield %>
     <%= render 'shared/footer' %>
   </body>