feat: Adds the ability to see the popular articles (#8152)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/helpers/portal_helper.rb

@@ -37,4 +37,8 @@ module PortalHelper
   def generate_gradient_to_bottom(theme)
     "background-image: linear-gradient(to bottom, transparent, #{theme == 'dark' ? '#151718' : 'white'})"
   end
+
+  def generate_article_link(portal_slug, article_slug, theme)
+    "/hc/#{portal_slug}/articles/#{article_slug}#{theme.present? && theme != 'system' ? "?theme=#{theme}" : ''}"
+  end
 end

app/views/public/api/v1/portals/_category-block.html.erb

@@ -24,7 +24,7 @@
          </div>
          <% else %>
          <% category.articles.published.order(position: :asc).take(5).each do |article| %>
-         <a class="text-slate-700 dark:text-slate-100 leading-7" href="/hc/<%= portal.slug %>/articles/<%= article.slug %><%= @theme.present? && @theme != 'system' ? '?theme='+@theme : ''  %>">
+         <a class="text-slate-700 dark:text-slate-100 leading-7" href="<%= generate_article_link(portal.slug, article.slug, @theme) %>">
             <div class="flex justify-between hover:cursor-pointer items-center py-1 rounded-lg gap-3  <%= !@is_plain_layout_enabled ? 'px-2 hover:bg-slate-50 dark:hover:bg-slate-800' : 'hover:underline' %>">
                <%= article.title %>
                <span class="flex items-center font-normal">

app/views/public/api/v1/portals/_featured_articles.html.erb

@@ -0,0 +1,28 @@
+<% featured_articles = articles.where(category_id: categories).search_by_status(:published).order_by_views.limit(6) %>
+<% if featured_articles.count >= 6 %>
+<section class="lg:container w-full flex flex-col h-full">
+   <div class="flex flex-col gap-5 border border-solid border-slate-100 dark:border-slate-800 rounded-lg py-5 px-3">
+      <div class="flex justify-between items-center w-full"> 
+         <div class="flex items-start flex-col gap-1">
+            <div class="flex flex-row items-center gap-2 px-2">
+               <h3 class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed">
+                  <%= I18n.t('public_portal.header.featured_articles') %>
+               </h3>
+            </div>
+         </div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-x-2 gap-y-2 gap-2">
+         <% featured_articles.each do |article| %>
+         <a class="text-slate-700 dark:text-slate-100 leading-7" href="<%= generate_article_link(portal.slug, article.slug, @theme) %>">
+            <div class="flex justify-between items-center py-1 px-2 rounded-lg gap-3 hover:bg-slate-50 dark:hover:bg-slate-800">
+               <%= article.title %>
+               <span class="flex items-center font-normal">
+                  <%= render partial: 'icons/chevron-right' %>
+               </span>
+            </div>
+         </a>
+         <% end %>
+      </div>
+   </div>
+</section>
+<% end %>

app/views/public/api/v1/portals/_hero.html.erb

@@ -1,6 +1,6 @@
 <% if !@is_plain_layout_enabled %>
 <section id="portal-bg" class="w-full bg-woot-50 dark:bg-woot-900 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme)  %>">
-  <div id="portal-bg-gradient" class="pt-8 pb-12 md:py-14" style="<%= generate_gradient_to_bottom(@theme) %>">
+  <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6" style="<%= generate_gradient_to_bottom(@theme) %>">
     <div class="mx-auto max-w-5xl px-8 flex flex-col items-center sm:items-start">
       <h1 class="text-2xl md:text-4xl text-slate-900 dark:text-white font-semibold leading-normal">
         <%= portal.header_text %>

app/views/public/api/v1/portals/show.html.erb

@@ -1,11 +1,16 @@
 <%= render "public/api/v1/portals/hero", portal: @portal %>
-<div class="max-w-5xl w-full flex-grow mx-auto py-8 px-8">
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-6">
+<div class="max-w-5xl w-full flex flex-col flex-grow mx-auto py-8 px-8 gap-6">
+  <%# Featured Articles %>
+  <% if !@is_plain_layout_enabled %>
+    <div><%= render "public/api/v1/portals/featured_articles", articles: @portal.articles, categories: @portal.categories.where(locale: @locale), portal: @portal %></div>
+  <% end %>
+  <%# Categories with articles %>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
     <% @portal.categories.where(locale: @locale).joins(:articles).where(articles:{ status: :published }).order(position: :asc).group('categories.id').each do |category| %>
       <%= render "public/api/v1/portals/category-block", category: category, portal: @portal %>
     <% end %>
   </div>
-
+  <%# Uncategorized articles %>
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-6">
     <% if @portal.articles.where(status: :published, category_id: nil).count > 0 %>
       <%= render "public/api/v1/portals/uncategorized-block", category: "Uncategorized", portal: @portal %>

config/locales/en.yml

@@ -224,6 +224,7 @@ en:
         system: System
         light: Light
         dark: Dark
+      featured_articles: Featured Articles
     404:
       title: Page not found
       description: We couldn't find the page you were looking for.

spec/helpers/portal_helper_spec.rb

@@ -101,4 +101,22 @@ describe PortalHelper do
       end
     end
   end
+
+  describe '#generate_article_link' do
+    context 'when theme is not present' do
+      it 'returns the correct link' do
+        expect(helper.generate_article_link('portal_slug', 'article_slug', nil)).to eq(
+          '/hc/portal_slug/articles/article_slug'
+        )
+      end
+    end
+
+    context 'when theme is present' do
+      it 'returns the correct link' do
+        expect(helper.generate_article_link('portal_slug', 'article_slug', 'dark')).to eq(
+          '/hc/portal_slug/articles/article_slug?theme=dark'
+        )
+      end
+    end
+  end
 end