feat: Add support for plain design help center layout (#7598)

chatwoot · Jul 24, 2023 · fa7bbdb · fa7bbdb
1 parent d837065
commit fa7bbdb
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 43 deletions.
diff --git a/app/controllers/public/api/v1/portals/base_controller.rb b/app/controllers/public/api/v1/portals/base_controller.rb
@@ -1,8 +1,13 @@
 class Public::Api::V1::Portals::BaseController < PublicController
+  before_action :show_plain_layout
   around_action :set_locale
 
   private
 
+  def show_plain_layout
+    @is_plain_layout_enabled = params[:show_plain_layout] == 'true'
+  end
+
   def set_locale(&)
     switch_locale_with_portal(&) if params[:locale].present?
     switch_locale_with_article(&) if params[:article_slug].present?

diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
@@ -57,10 +57,25 @@ export const InitializationHelpers = {
     }
   },
 
+  appendPlainParamToURLs: () => {
+    document.getElementsByTagName('a').forEach(aTagElement => {
+      if (aTagElement.href && aTagElement.href.includes('/hc/')) {
+        aTagElement.setAttribute(
+          'href',
+          aTagElement.href + '?show_plain_layout=true'
+        );
+      }
+    });
+  },
+
   initialize: () => {
-    InitializationHelpers.navigateToLocalePage();
-    InitializationHelpers.initalizeSearch();
-    InitializationHelpers.initializeTableOfContents();
+    if (window.portalConfig.isPlainLayoutEnabled === 'true') {
+      InitializationHelpers.appendPlainParamToURLs();
+    } else {
+      InitializationHelpers.navigateToLocalePage();
+      InitializationHelpers.initalizeSearch();
+      InitializationHelpers.initializeTableOfContents();
+    }
   },
 
   onLoad: () => {

diff --git a/app/views/layouts/portal.html.erb b/app/views/layouts/portal.html.erb
@@ -30,9 +30,13 @@ By default, it renders:
   <body>
     <div class="antialiased">
       <main class="main-content min-h-screen flex flex-col" role="main">
-        <%= render "public/api/v1/portals/header", portal: @portal %>
+        <% if !@is_plain_layout_enabled %>
+          <%= render "public/api/v1/portals/header", portal: @portal %>
+        <% end %>
         <%= yield %>
-        <%= render "public/api/v1/portals/footer" %>
+        <% if !@is_plain_layout_enabled %>
+          <%= render "public/api/v1/portals/footer" %>
+        <% end %>
       </main>
     </div>
   </body>
@@ -46,6 +50,7 @@ By default, it renders:
         loadingPlaceholder: '<%= I18n.t('public_portal.search.loading_placeholder') %>',
         resultsTitle: '<%= I18n.t('public_portal.search.results_title') %>',
       },
+      isPlainLayoutEnabled: '<%= @is_plain_layout_enabled %>',
       tocHeader: '<%= I18n.t('public_portal.toc_header') %>'
     };
   </script>

diff --git a/app/views/public/api/v1/portals/_category-block.html.erb b/app/views/public/api/v1/portals/_category-block.html.erb
@@ -1,6 +1,6 @@
 <section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-800 font-medium font-semibold leading-relaxed hover:underline">
+    <h3 class="text-xl text-slate-800 font-medium leading-relaxed hover:underline">
       <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
         <%= category.name %>
       </a>

diff --git a/app/views/public/api/v1/portals/_hero.html.erb b/app/views/public/api/v1/portals/_hero.html.erb
@@ -1,4 +1,4 @@
-<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
+<% if !@is_plain_layout_enabled %>
 <section class="pt-8 pb-16 md:py-20 w-full bg-woot-50 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
   <div class="mx-auto max-w-6xl px-8 flex flex-col items-center sm:items-start">
     <h1 class="text-2xl md:text-4xl text-slate-900 font-semibold leading-normal">
@@ -8,3 +8,4 @@
     <div id="search-wrap"></div>
   </div>
 </section>
+<% end %>
diff --git a/app/views/public/api/v1/portals/articles/_article_header.html.erb b/app/views/public/api/v1/portals/articles/_article_header.html.erb
@@ -0,0 +1,17 @@
+<h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900">
+  <%= article.title %>
+</h1>
+<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
+  <div class="flex items-center space-x-2">
+    <% if article.author&.avatar_url&.present? %>
+      <div class="pr-1">
+        <img src="<%= article.author.avatar_url %>" alt="<%= article.author.display_name %>" class="w-12 h-12 border rounded-full">
+      </div>
+    <% end %>
+    <div>
+      <h5 class="text-base font-medium text-slate-900 mb-2"><%= article.author.available_name %></h5>
+      <p class="text-sm font-normal text-slate-700">
+      <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
+    </div>
+  </div>
+</div>
diff --git a/app/views/public/api/v1/portals/articles/show.html.erb b/app/views/public/api/v1/portals/articles/show.html.erb
@@ -11,7 +11,7 @@
   <% end %>
 <% end %>
 
-<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
+<% if !@is_plain_layout_enabled %>
 <div class="bg-woot-50 py-8 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
   <div class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
     <div>
@@ -33,25 +33,15 @@
         <span class="text-slate-700 leading-8 text-sm font-semibold" > Uncategorized </span>
       <% end %>
     </div>
-    <h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900">
-      <%= @article.title %>
-    </h1>
-    <div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
-      <div class="flex items-center space-x-2">
-        <% if @article.author&.avatar_url&.present? %>
-          <div class="pr-1">
-            <img src="<%= @article.author.avatar_url %>" alt="<%= @article.author.display_name %>" class="w-12 h-12 border rounded-full">
-          </div>
-        <% end %>
-        <div>
-          <h5 class="text-base font-medium text-slate-900 mb-2"><%= @article.author.available_name %></h5>
-          <p class="text-sm font-normal text-slate-700">
-          <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: @article.updated_at.strftime("%b %d, %Y")) %>
-        </div>
-      </div>
-    </div>
+    <%= render "public/api/v1/portals/articles/article_header", article: @article %>
   </div>
 </div>
+<% else %>
+<div class="max-w-6xl p-8 mx-auto space-y-4 w-full">
+  <%= render "public/api/v1/portals/articles/article_header", article: @article %>
+</div>
+<% end %>
+
 <div class="flex max-w-6xl w-full px-8 mx-auto">
   <article id="cw-article-content" class="flex-grow flex-2 py-12 mx-auto text-slate-800 text-lg max-w-3xl prose break-words">
     <%= @parsed_content %>

diff --git a/app/views/public/api/v1/portals/categories/_category-hero.html.erb b/app/views/public/api/v1/portals/categories/_category-hero.html.erb
@@ -0,0 +1,17 @@
+<div class="px-8 max-w-6xl w-full mx-auto">
+  <a
+    class="text-slate-700 text-sm hover:underline leading-8 font-semibold"
+    href="/hc/<%= portal.slug %>/<%= category.locale %>"
+  >
+    <%= I18n.t('public_portal.common.home') %>
+  </a>
+  <span class="text-xs text-slate-600 px-1">/</span>
+  <div class="flex justify-start items-center w-full">
+    <h1 class="text-3xl font-semibold leading-snug md:tracking-normal text-slate-900">
+      <%= category.name %>
+    </h1>
+    <div class="text-slate-500 px-8 mt-2">
+      <%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.size %>
+    </div>
+  </div>
+</div>
diff --git a/app/views/public/api/v1/portals/categories/show.html.erb b/app/views/public/api/v1/portals/categories/show.html.erb
@@ -5,26 +5,13 @@
   <% end %>
 <% end %>
 
+<% if !@is_plain_layout_enabled %>
 <div class="bg-woot-50 pt-16 pb-20" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
-  <div class="max-w-6xl px-8 mx-auto space-y-2">
-    <a
-      class="text-slate-700 text-sm hover:underline leading-8 font-semibold"
-      href="/hc/<%= @portal.slug %>/<%= @category.locale %>"
-    >
-      <%= I18n.t('public_portal.common.home') %>
-    </a>
-    <span class="text-xs text-slate-600 px-1">/</span>
-    <div class="flex justify-start items-center w-full">
-      <h1 class="text-3xl font-semibold leading-snug md:tracking-normal text-slate-900">
-        <%= @category.name %>
-      </h1>
-      <div class="text-slate-500 px-8 mt-2">
-        <%= render 'public/api/v1/portals/article_count', article_count: @category.articles.published.size %>
-      </div>
-    </div>
-  </div>
+  <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
 </div>
-
+<% else %>
+  <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
+<% end %>
 <section class="bg-white max-w-6xl w-full mx-auto py-6 px-8 flex flex-col items-center justify-center flex-grow">
   <div class="py-4 w-full mt-2 flex-grow">
     <% if @category.articles.published.size == 0 %>