LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pranav Raj S
2023-07-24 16:43:52 -07:00
committed by GitHub
parent d837065545
commit fa7bbdb0b3
9 changed files with 80 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/controllers/public/api/v1/portals/base_controller.rb
View File

@@ -1,8 +1,13 @@
class Public::Api::V1::Portals::BaseController < PublicController class Public::Api::V1::Portals::BaseController < PublicController
before_action :show_plain_layout
around_action :set_locale around_action :set_locale
private private
def show_plain_layout
@is_plain_layout_enabled = params[:show_plain_layout] == 'true'
end
def set_locale(&) def set_locale(&)
switch_locale_with_portal(&) if params[:locale].present? switch_locale_with_portal(&) if params[:locale].present?
switch_locale_with_article(&) if params[:article_slug].present? switch_locale_with_article(&) if params[:article_slug].present?

21
app/javascript/portal/portalHelpers.js
View File

@@ -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: () => { initialize: () => {
InitializationHelpers.navigateToLocalePage(); if (window.portalConfig.isPlainLayoutEnabled === 'true') {
InitializationHelpers.initalizeSearch(); InitializationHelpers.appendPlainParamToURLs();
InitializationHelpers.initializeTableOfContents(); } else {
InitializationHelpers.navigateToLocalePage();
InitializationHelpers.initalizeSearch();
InitializationHelpers.initializeTableOfContents();
}
}, },
onLoad: () => { onLoad: () => {

9
app/views/layouts/portal.html.erb
View File

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

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

@@ -1,6 +1,6 @@
<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full"> <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"> <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 %>"> <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
<%= category.name %> <%= category.name %>
</a> </a>

3
app/views/public/api/v1/portals/_hero.html.erb
View File

@@ -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)"> <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"> <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"> <h1 class="text-2xl md:text-4xl text-slate-900 font-semibold leading-normal">
@@ -8,3 +8,4 @@
<div id="search-wrap"></div> <div id="search-wrap"></div>
</div> </div>
</section> </section>
<% end %>

17
app/views/public/api/v1/portals/articles/_article_header.html.erb Normal file
View File

@@ -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>

26
app/views/public/api/v1/portals/articles/show.html.erb
View File

@@ -11,7 +11,7 @@
<% end %> <% end %>
<% 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="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 class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
<div> <div>
@@ -33,25 +33,15 @@
<span class="text-slate-700 leading-8 text-sm font-semibold" > Uncategorized </span> <span class="text-slate-700 leading-8 text-sm font-semibold" > Uncategorized </span>
<% end %> <% end %>
</div> </div>
<h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900"> <%= render "public/api/v1/portals/articles/article_header", article: @article %>
<%= @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>
</div> </div>
</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"> <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"> <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 %> <%= @parsed_content %>

17
app/views/public/api/v1/portals/categories/_category-hero.html.erb Normal file
View File

@@ -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>

23
app/views/public/api/v1/portals/categories/show.html.erb
View File

@@ -5,26 +5,13 @@
<% end %> <% end %>
<% 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="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"> <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
<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>
</div> </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"> <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"> <div class="py-4 w-full mt-2 flex-grow">
<% if @category.articles.published.size == 0 %> <% if @category.articles.published.size == 0 %>