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>

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -4,6 +4,7 @@
       <woot-button
         icon="chevron-left"
         variant="clear"
+        size="small"
         color-scheme="primary"
         @click="onClickGoBack"
       >

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue

@@ -69,7 +69,7 @@ export default {
     },
     portalLink() {
       const slug = this.$route.params.portalSlug;
-      return `/public/api/v1/portals/${slug}`;
+      return `/hc/${slug}`;
     },
   },
   methods: {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue

@@ -86,7 +86,7 @@ export default {
     },
     portalLink() {
       const slug = this.$route.params.portalSlug;
-      return `/public/api/v1/portals/${slug}`;
+      return `/hc/${slug}`;
     },
   },
   mounted() {

app/javascript/packs/portal.js

@@ -0,0 +1,16 @@
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so that it will be compiled.
+
+import Rails from '@rails/ujs';
+import Turbolinks from 'turbolinks';
+
+import { navigateToLocalePage } from '../portal/portalHelpers';
+
+import '../portal/application.scss';
+
+Rails.start();
+Turbolinks.start();
+
+document.addEventListener('DOMContentLoaded', navigateToLocalePage);

app/javascript/portal/application.scss

@@ -0,0 +1,78 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import 'widget/assets/scss/reset';
+@import 'widget/assets/scss/variables';
+@import 'widget/assets/scss/buttons';
+@import 'widget/assets/scss/mixins';
+@import 'widget/assets/scss/forms';
+@import 'shared/assets/fonts/widget_fonts';
+
+html,
+body {
+  font-family: $font-family;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+}
+
+.woot-survey-wrap {
+  height: 100%;
+}
+
+.blog-content {
+  @apply text-lg;
+  @apply font-sans;
+  @apply text-slate-800;
+  @apply leading-normal;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-sans leading-relaxed font-extrabold text-slate-900;
+    @apply mb-4;
+    @apply mt-8;
+  }
+
+  h1 {
+    @apply text-5xl leading-normal;
+  }
+
+  h2 {
+    @apply text-4xl leading-normal;
+  }
+
+  h3 {
+    @apply text-3xl leading-normal;
+  }
+
+  h4 {
+    @apply text-2xl leading-normal;
+  }
+
+  p {
+    @apply text-lg;
+    @apply font-sans;
+    @apply text-slate-800;
+    @apply leading-relaxed;
+    @apply mb-4;
+  }
+
+  ul {
+    @apply list-disc;
+    @apply pl-8;
+    @apply ml-4;
+  }
+
+  li {
+    @apply text-lg;
+    @apply font-sans;
+    @apply text-slate-800;
+    @apply leading-relaxed;
+    @apply mb-2;
+  }
+}

app/javascript/portal/portalHelpers.js

@@ -0,0 +1,8 @@
+export const navigateToLocalePage = () => {
+  const allLocaleSwitcher = document.querySelector('.locale-switcher');
+
+  const { portalSlug } = allLocaleSwitcher.dataset;
+  allLocaleSwitcher.addEventListener('change', event => {
+    window.location = `/hc/${portalSlug}/${event.target.value}/`;
+  });
+};

app/javascript/portal/specs/portal.spec.js

@@ -0,0 +1,23 @@
+import { navigateToLocalePage } from '../portalHelpers';
+
+describe('#navigateToLocalePage', () => {
+  it('returns correct cookie name', () => {
+    const elemDiv = document.createElement('div');
+    elemDiv.classList.add('locale-switcher');
+    document.body.appendChild(elemDiv);
+
+    const allLocaleSwitcher = document.querySelector('.locale-switcher');
+
+    allLocaleSwitcher.addEventListener = jest
+      .fn()
+      .mockImplementationOnce((event, callback) => {
+        callback({ target: { value: 1 } });
+      });
+
+    navigateToLocalePage();
+    expect(allLocaleSwitcher.addEventListener).toBeCalledWith(
+      'change',
+      expect.any(Function)
+    );
+  });
+});