feat: Sets up portal public views with rails ERB and tailwind (#5309)
* feat: Sets up portal public views with rails ERB and tailwind * linter fixes * Remove duplicate style file * Shows articles and categories * Specify layout for articles page * Updates public portal styles * Fixes blog content styles * Portal style updates for article page * Review fixes * Adds breadcrumbs * fix: rspec * fix: public portal spec * Code climate fixes * Adds test cases for missing files * Show only published articles * Updates help center routes * Review fixes * Render markdown content for aticle body * Update app/views/public/api/v1/portals/articles/index.html.erb Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Sojan <sojan@pepalo.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: tejaswini chile <tejaswini@chatwoot.com>
This commit is contained in:
Nithin David Thomas
committed by
GitHub
GitHub
parent
a680b08251
commit
1ea289e8b7
44
app/views/public/api/v1/portals/_category-block.html.erb
Normal file
44
app/views/public/api/v1/portals/_category-block.html.erb
Normal file
@@ -0,0 +1,44 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<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-900 font-semibold subpixel-antialiased leading-relaxed hover:underline"">
|
||||
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"><%= category.name %> </a>
|
||||
</h3> <span class="text-slate-500"><%= category.articles.published.size %> articles</span>
|
||||
</div>
|
||||
<div class="py-4 w-full mt-2 flex-grow">
|
||||
<% if category.articles.published.size == 0 %>
|
||||
<div class="h-full flex items-center justify-center bg-slate-50 rounded-xl mb-4">
|
||||
<p class="text-sm text-slate-500">No articles here</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<% category.articles.published.take(5).each do |article| %>
|
||||
<div class="flex justify-between content-center h-8 my-1">
|
||||
<a class="text-slate-800 hover:underline leading-8"
|
||||
href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>" class=""><%= article.title %></a>
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 fill-current text-slate-700" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
|
||||
class="flex flex-row items-center text-base font-sans font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4">
|
||||
|
||||
View all articles
|
||||
<span class="ml-2">
|
||||
<svg class="w-4 h-4 fill-current text-woot-500" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
6
app/views/public/api/v1/portals/_footer.html.erb
Normal file
6
app/views/public/api/v1/portals/_footer.html.erb
Normal file
@@ -0,0 +1,6 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<footer class="bg-slate-50 py-16 flex flex-col items-center justify-center">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<p class="text-slate-700 py-2 text-center">Made with <a href="/" target="_blank">Chatwoot 💙</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
37
app/views/public/api/v1/portals/_header.html.erb
Normal file
37
app/views/public/api/v1/portals/_header.html.erb
Normal file
@@ -0,0 +1,37 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<header class="bg-white mx-auto px-4 max-w-4xl w-full border border-slate-600">
|
||||
<nav class="px-0 flex" aria-label="Top">
|
||||
<div class="w-full py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<a href="#">
|
||||
<span class="sr-only"><%= portal.name %>%></span>
|
||||
<img class="h-8 w-auto"
|
||||
src="https://d33wubrfki0l68.cloudfront.net/973467c532160fd8b940300a43fa85fa2d060307/dc9a0/static/brand-73f58cdefae282ae74cebfa74c1d7003.svg"
|
||||
alt="">
|
||||
</a>
|
||||
<div class="ml-8 border-l-1 border-slate-50">
|
||||
<div class="flex-grow flex-shrink-0">
|
||||
<a href="#" class="flex flex-row items-center text-sm font-sans font-medium text-slate-700 hover:text-slate-800 hover:underline"> Goto main site
|
||||
<span class="ml-2">
|
||||
<svg class="w-4 h-4 fill-current text-slate-600" width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" /></svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-grow justify-end flex-shrink-0 items-center">
|
||||
|
||||
<div>
|
||||
<select
|
||||
value="<%= @portal.config["default_locale"] %>"
|
||||
data-portal-slug="<%= @portal.slug %>"
|
||||
class="h-8 block w-full flex-shrink bg-slate-50 border border-slate-200 text-slate-700 py-1 px-4 pr-8 rounded leading-tight text-base font-medium focus:outline-none focus:bg-white focus:border-slate-500 locale-switcher">
|
||||
<% @portal.config["allowed_locales"].each do |locale| %>
|
||||
<option value="<%= locale %>"><%= locale %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
7
app/views/public/api/v1/portals/_hero.html.erb
Normal file
7
app/views/public/api/v1/portals/_hero.html.erb
Normal file
@@ -0,0 +1,7 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<section class="bg-slate-50 py-24 flex flex-col items-center justify-center">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<h1 class="text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center"><%= portal.header_text %></h1>
|
||||
<p class="text-slate-700 py-2 text-center">Search for the articles here or browse the categories below.</p>
|
||||
</div>
|
||||
</section>
|
||||
35
app/views/public/api/v1/portals/articles/index.html.erb
Normal file
35
app/views/public/api/v1/portals/articles/index.html.erb
Normal file
@@ -0,0 +1,35 @@
|
||||
|
||||
<div class="bg-slate-50">
|
||||
<div class="max-w-4xl px-6 py-16 mx-auto space-y-12 w-full">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<a class="text-slate-800 hover:underline leading-8"
|
||||
href="/hc/<%= @portal.slug %>/<%= @category.slug %>" class=""><%= @portal.name %> Home</a>
|
||||
<span>/</span>
|
||||
<span>/</span>
|
||||
</div>
|
||||
<% @articles.each do |article| %>
|
||||
<h1 class="text-4xl font-bold md:tracking-normal leading-snug md:text-5xl 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">
|
||||
<img src="<%= article.author.avatar_url %>" alt="" class="w-12 h-812 border rounded-full">
|
||||
<div>
|
||||
<h5 class="text-base font-medium text-slate-900 mb-2"><%= article.author.name %></h5>
|
||||
<p class="text-sm font-normal text-slate-700">
|
||||
<%= article.author.updated_at.strftime("%B %d %Y") %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="max-w-4xl flex-grow w-full px-6 py-16 mx-auto space-y-12">
|
||||
<article class="space-y-8 ">
|
||||
<div class="text-slate-800 font-sans leading-8 text-lg subpixel-antialiased max-w-3xl blog-content">
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
35
app/views/public/api/v1/portals/articles/show.html.erb
Normal file
35
app/views/public/api/v1/portals/articles/show.html.erb
Normal file
@@ -0,0 +1,35 @@
|
||||
<div class="bg-slate-50">
|
||||
<div class="max-w-4xl px-6 py-16 mx-auto space-y-4 w-full">
|
||||
|
||||
<div>
|
||||
<a class="text-slate-700 hover:underline leading-8 text-sm font-medium"
|
||||
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>" class=""><%= @portal.name %> Home</a>
|
||||
<span class="text-xs text-slate-600 px-1">/</span>
|
||||
<a class="text-slate-700 hover:underline leading-8 text-sm font-medium"
|
||||
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/<%= @article.category.slug %>"
|
||||
class=""><%= @article.category.name %></a>
|
||||
<span class="text-xs text-slate-600 px-1">/</span>
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold md:tracking-normal leading-snug md:text-5xl 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 md:space-x-2">
|
||||
<img src="<%= @article.author.avatar_url %>" alt="" class="w-12 h-812 border rounded-full">
|
||||
<div>
|
||||
<h5 class="text-base font-medium text-slate-900 mb-2"><%= @article.author.name %></h5>
|
||||
<p class="text-sm font-normal text-slate-700">
|
||||
<%= @article.author.updated_at.strftime("%B %d %Y") %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="max-w-4xl flex-grow w-full px-6 py-16 mx-auto space-y-12">
|
||||
<article class="space-y-8 ">
|
||||
<div class="text-slate-800 font-sans leading-8 text-lg subpixel-antialiased max-w-3xl blog-content">
|
||||
<p><%= @parsed_content %></p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<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-900 font-semibold subpixel-antialiased leading-relaxed hover:underline"">
|
||||
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"><%= category.name %> </a>
|
||||
</h3> <span class="text-slate-500"><%= category.articles.published.size %> articles</span>
|
||||
</div>
|
||||
<div class="py-4 w-full mt-2 flex-grow">
|
||||
<% if category.articles.published.size == 0 %>
|
||||
<div class="h-full flex items-center justify-center bg-slate-50 rounded-xl mb-4">
|
||||
<p class="text-sm text-slate-500">No articles here</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<% category.articles.published.take(5).each do |article| %>
|
||||
<div class="flex justify-between content-center h-8 my-1">
|
||||
<a class="text-slate-800 hover:underline leading-8"
|
||||
href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>" class=""><%= article.title %></a>
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 fill-current text-slate-700" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
|
||||
class="flex flex-row items-center text-base font-sans font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4">
|
||||
|
||||
View all articles
|
||||
<span class="ml-2">
|
||||
<svg class="w-4 h-4 fill-current text-woot-500" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,7 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<section class="bg-slate-50 py-24 flex flex-col items-center justify-center">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<h1 class="text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center"><%= portal.header_text %></h1>
|
||||
<p class="text-slate-700 py-2 text-center">Search for the articles here or browse the categories below.</p>
|
||||
</div>
|
||||
</section>
|
||||
11
app/views/public/api/v1/portals/categories/index.html.erb
Normal file
11
app/views/public/api/v1/portals/categories/index.html.erb
Normal file
@@ -0,0 +1,11 @@
|
||||
<%= render "hero", portal: @portal %>
|
||||
|
||||
<div class="max-w-4xl w-full flex-grow mx-auto py-16">
|
||||
<div class="grid grid-cols-2 gap-x-32 gap-y-12">
|
||||
<% @categories.each do |category| %>
|
||||
<%= render "category-block", category: category, portal: @portal %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
41
app/views/public/api/v1/portals/categories/show.html.erb
Normal file
41
app/views/public/api/v1/portals/categories/show.html.erb
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
<div class="bg-slate-50">
|
||||
<div class="max-w-4xl px-6 py-16 mx-auto space-y-8">
|
||||
<a class="text-slate-700 text-sm hover:underline leading-8"
|
||||
href="/hc/<%= @portal.slug %>/<%= @category.locale %>" class=""><%= @portal.name %> 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-bold md:tracking-normal leading-snug text-slate-900">
|
||||
<%= @category.name %></h1>
|
||||
<span class="text-slate-500 px-8"><%= @category.articles.published.size %> articles</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<section class="bg-white max-w-4xl w-full mx-auto py-6 px-4 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 %>
|
||||
<div class="h-full flex items-center justify-center bg-slate-50 rounded-xl">
|
||||
<p class="text-sm text-slate-500">No articles here</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<% @category.articles.published.each do |article| %>
|
||||
<div class="flex justify-between content-center h-8 my-1">
|
||||
<a class="text-slate-800 hover:underline"
|
||||
href="/hc/<%= @portal.slug %>/<%= @category.locale %>/<%= @category.slug %>/<%= article.id %>"
|
||||
class=""><%= article.title %></a>
|
||||
<span>
|
||||
<svg class="w-4 h-4 fill-current text-slate-700" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
12
app/views/public/api/v1/portals/show.html.erb
Normal file
12
app/views/public/api/v1/portals/show.html.erb
Normal file
@@ -0,0 +1,12 @@
|
||||
|
||||
<%= render "hero", portal: @portal %>
|
||||
|
||||
<div class="max-w-4xl w-full flex-grow mx-auto py-16">
|
||||
<div class="grid grid-cols-2 gap-x-32 gap-y-12">
|
||||
<% @portal.categories.each do |category| %>
|
||||
<%= render "category-block", category: category, portal: @portal %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user