feat: get rid of turbo links

- Now you can use /hc/{account}/en/search?query=XXX to view search results

Gemfile

@@ -7,6 +7,8 @@ gem 'rack-cors', '2.0.0', require: 'rack/cors'
 gem 'rails', '~> 7.1'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false
+# Turbo for SPA-like page acceleration
+gem 'turbo-rails'
 
 ##-- rails application helper gems --##
 gem 'acts-as-taggable-on'

Gemfile.lock

@@ -815,6 +815,9 @@ GEM
       i18n
     timeout (0.4.3)
     trailblazer-option (0.1.2)
+    turbo-rails (2.0.13)
+      actionpack (>= 7.1.0)
+      railties (>= 7.1.0)
     twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)
       jwt (>= 1.5, < 3.0)
@@ -1004,6 +1007,7 @@ DEPENDENCIES
   telephone_number
   test-prof
   time_diff
+  turbo-rails
   twilio-ruby (~> 5.66)
   twitty (~> 0.1.5)
   tzinfo-data

app/controllers/public/api/v1/portals/search_controller.rb

@@ -0,0 +1,19 @@
+class Public::Api::V1::Portals::SearchController < Public::Api::V1::Portals::BaseController
+  before_action :portal
+  layout 'portal'
+
+  def index
+    @query = params[:query]
+    @articles = @portal.articles.published
+
+    @articles = @articles.search(search_params) if @query.present?
+
+    @articles = @articles.page(params[:page]).per(10) # Add pagination
+  end
+
+  private
+
+  def search_params
+    params.permit(:query, :locale, :sort, :status, :page)
+  end
+end

app/javascript/entrypoints/portal.js

@@ -1,9 +1,9 @@
 import Rails from '@rails/ujs';
-import Turbolinks from 'turbolinks';
+import { Turbo } from '@hotwired/turbo-rails';
 import '../portal/application.scss';
 import { InitializationHelpers } from '../portal/portalHelpers';
 
 Rails.start();
-Turbolinks.start();
+Turbo.start();
 
-document.addEventListener('turbolinks:load', InitializationHelpers.onLoad);
+document.addEventListener('turbo:load', InitializationHelpers.onLoad);

app/javascript/portal/components/PublicArticleSearch.vue

@@ -90,18 +90,29 @@ export default {
         this.isLoading = false;
       }
     },
+    handleSubmit() {
+      if (this.searchTerm.trim()) {
+        const url = `/hc/${this.portalSlug}/${this.localeCode}/search?query=${encodeURIComponent(this.searchTerm)}`;
+        window.location.href = url;
+      }
+    },
   },
 };
 </script>
 
 <template>
   <div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
-    <PublicSearchInput
-      :search-term="searchTerm"
-      :search-placeholder="searchTranslations.searchPlaceholder"
-      @update:search-term="onUpdateSearchTerm"
-      @focus="openSearch"
-    />
+    <form @submit.prevent="handleSubmit">
+      <PublicSearchInput
+        :search-term="searchTerm"
+        :search-placeholder="searchTranslations.searchPlaceholder"
+        @update:search-term="onUpdateSearchTerm"
+        @focus="openSearch"
+      />
+      <button type="submit" class="sr-only">
+        {{ searchTranslations.submit || 'Search' }}
+      </button>
+    </form>
     <div
       v-if="shouldShowSearchBox"
       class="absolute w-full top-14"

app/javascript/portal/components/TableOfContents.vue

@@ -110,7 +110,7 @@ export default {
             <p class="py-1 px-3" :class="getClassName(element)">
               <a
                 :href="`#${element.slug}`"
-                data-turbolinks="false"
+                data-turbo="false"
                 class="font-medium text-sm tracking-[0.28px] cursor-pointer"
                 :class="elementTextStyles(element)"
               >

app/javascript/portal/portalHelpers.js

@@ -15,7 +15,7 @@ export const getHeadingsfromTheArticle = () => {
     const slug = slugifyWithCounter(element.innerText);
     element.id = slug;
     element.className = 'scroll-mt-24 heading';
-    element.innerHTML += `<a class="permalink text-slate-600 ml-3" href="#${slug}" title="${element.innerText}" data-turbolinks="false">#</a>`;
+    element.innerHTML += `<a class="permalink text-slate-600 ml-3" href="#${slug}" title="${element.innerText}" data-turbo="false">#</a>`;
     rows.push({
       slug,
       title: element.innerText,
@@ -144,7 +144,7 @@ export const InitializationHelpers = {
 
       const a = document.createElement('a');
       a.href = window.location.hash;
-      a['data-turbolinks'] = false;
+      a['data-turbo'] = false;
       a.click();
     }
   },

app/views/layouts/portal.html.erb

@@ -18,7 +18,7 @@ By default, it renders:
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1">
-    <meta name= "turbolinks-cache-control" content= "no-cache">
+    <meta name= "turbo-cache-control" content= "no-cache">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <%= vite_client_tag %>
@@ -39,7 +39,7 @@ By default, it renders:
     <% else %>
       <title><%= @portal.page_title%></title>
     <% end %>
-    
+
     <% if @portal.logo.present? %>
       <link rel="icon" href="<%= url_for(@portal.logo) %>">
     <% end %>

app/views/public/api/v1/portals/search/index.html.erb

@@ -0,0 +1,184 @@
+<% content_for :head do %>
+  <title><%= I18n.t('public_portal.search.results_for', query: @query) %> | <%= @portal.name %></title>
+<% end %>
+
+<% if !@is_plain_layout_enabled %>
+<div id="portal-bg" class="bg-white dark:bg-slate-900 shadow-inner">
+  <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
+    <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col">
+      <div class="flex flex-row items-center gap-px mb-6">
+        <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer hover:underline leading-8 font-semibold"
+           href="<%= generate_home_link(@portal.slug, params[:locale], @theme_from_params, @is_plain_layout_enabled) %>">
+          <%= I18n.t('public_portal.common.home') %>
+        </a>
+        <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300">
+          <%= render partial: 'icons/chevron-right' %>
+        </span>
+        <span class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+          <%= I18n.t('public_portal.search.results') %>
+        </span>
+      </div>
+
+      <h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
+        <%= I18n.t('public_portal.search.results_for', query: @query) %>
+      </h1>
+
+      <!-- Search form for the results page -->
+      <form class="w-full my-4" action="<%= request.path %>" method="GET" data-search-form>
+        <input type="hidden" name="locale" value="<%= params[:locale] %>">
+        <input type="text"
+               name="query"
+               value="<%= @query %>"
+               placeholder="<%= I18n.t('public_portal.search.search_placeholder') %>"
+               data-search-input
+               autofocus
+               class="w-full px-4 py-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+        <button type="submit" class="sr-only">
+          <%= I18n.t('public_portal.search.submit') %>
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+<% else %>
+<div class="max-w-5xl mx-auto space-y-4 w-full px-4 md:px-8 py-4">
+  <div class="flex items-center flex-row">
+    <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:underline hover:cursor-pointer leading-8 font-semibold"
+       href="<%= generate_home_link(@portal.slug, params[:locale], @theme_from_params, @is_plain_layout_enabled) %>">
+      <%= I18n.t('public_portal.common.home') %>
+    </a>
+    <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300">
+      <%= render partial: 'icons/chevron-right' %>
+    </span>
+    <span class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+      <%= I18n.t('public_portal.search.results') %>
+    </span>
+  </div>
+
+  <h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
+    <%= I18n.t('public_portal.search.results_for', query: @query) %>
+  </h1>
+
+  <!-- Search form for the results page -->
+  <form class="w-full my-4" action="<%= request.path %>" method="GET" data-search-form>
+    <input type="hidden" name="locale" value="<%= params[:locale] %>">
+    <input type="text"
+           name="query"
+           value="<%= @query %>"
+           placeholder="<%= I18n.t('public_portal.search.search_placeholder') %>"
+           data-search-input
+           autofocus
+           class="w-full px-4 py-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+    <button type="submit" class="sr-only">
+      <%= I18n.t('public_portal.search.submit') %>
+    </button>
+  </form>
+</div>
+<% end %>
+
+<script>
+document.addEventListener('turbo:load', function() {
+  const searchInputs = document.querySelectorAll('[data-search-input]');
+
+  searchInputs.forEach(function(input) {
+    let debounceTimer;
+
+    // Move cursor to end of input text after autofocus
+    if (input.value.length > 0) {
+      setTimeout(function() {
+        input.setSelectionRange(input.value.length, input.value.length);
+      }, 0);
+    }
+
+    input.addEventListener('input', function() {
+      const form = input.closest('[data-search-form]');
+      const query = input.value.trim();
+
+      // Clear existing timer
+      clearTimeout(debounceTimer);
+
+      // Only search if there's a query and it's different from current
+      if (query.length > 0) {
+        debounceTimer = setTimeout(function() {
+          // Check if the query has actually changed
+          const currentQuery = new URLSearchParams(window.location.search).get('query') || '';
+          if (query !== currentQuery) {
+            // Use Turbo.visit for SPA-like navigation
+            const formData = new FormData(form);
+            const searchParams = new URLSearchParams(formData);
+            const url = form.action + '?' + searchParams.toString();
+            Turbo.visit(url);
+          }
+        }, 500); // 500ms debounce
+      }
+    });
+
+    // Handle manual form submission
+    input.closest('[data-search-form]').addEventListener('submit', function(e) {
+      clearTimeout(debounceTimer);
+    });
+  });
+});
+</script>
+
+<div class="max-w-5xl w-full mx-auto px-4 md:px-8 py-6 flex flex-col items-center justify-center flex-grow">
+  <div class="w-full flex flex-col gap-6 flex-grow">
+    <% if @articles.empty? %>
+      <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
+        <p class="text-sm text-slate-500"><%= I18n.t('public_portal.search.no_results', query: @query) %></p>
+      </div>
+    <% else %>
+      <p class="text-sm text-slate-600 dark:text-slate-400">
+        <%= I18n.t('public_portal.search.found_results', count: @articles.size) %>
+      </p>
+
+      <% @articles.each do |article| %>
+        <div class="border border-solid border-slate-100 dark:border-slate-800 rounded-lg">
+          <a class="p-4 text-slate-800 dark:text-slate-50 flex justify-between content-center hover:cursor-pointer"
+             href="<%= generate_article_link(@portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>">
+            <div class="flex flex-col gap-5">
+              <div class="flex flex-col gap-1">
+                <h3 class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold">
+                  <%= article.title %>
+                </h3>
+                <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-2 break-all">
+                  <%= render_category_content(article.content) %>
+                </p>
+              </div>
+              <div class="flex flex-row items-center gap-2">
+                <% if article.category.present? %>
+                  <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
+                    <%= article.category.name %>
+                  </span>
+                  <span class="text-slate-600 dark:text-slate-400">•</span>
+                <% end %>
+                <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
+                  <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
+                </span>
+              </div>
+            </div>
+          </a>
+        </div>
+      <% end %>
+
+      <!-- Pagination -->
+      <% if @articles.respond_to?(:total_pages) && @articles.total_pages > 1 %>
+        <div class="flex justify-center mt-6">
+          <nav class="inline-flex">
+            <% if @articles.prev_page %>
+              <a href="<%= url_for(page: @articles.prev_page) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-l-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
+                <%= I18n.t('public_portal.common.previous') %>
+              </a>
+            <% end %>
+
+            <% if @articles.next_page %>
+              <a href="<%= url_for(page: @articles.next_page) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-r-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
+                <%= I18n.t('public_portal.common.next') %>
+              </a>
+            <% end %>
+          </nav>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

config/locales/en.yml

@@ -254,6 +254,13 @@ en:
       empty_placeholder: No results found.
       loading_placeholder: Searching...
       results_title: Search results
+      results: Search Results
+      results_for: "Search Results for '%{query}'"
+      no_results: "No results found for '%{query}'"
+      found_results:
+        one: Found 1 result
+        other: "Found %{count} results"
+      submit: Search
     toc_header: 'On this page'
     hero:
       sub_title: Search for the articles here or browse the categories below.

config/locales/es.yml

@@ -240,6 +240,13 @@ es:
       empty_placeholder: No se encontraron resultados.
       loading_placeholder: Buscando...
       results_title: Buscar resultados
+      results: Resultados de búsqueda
+      results_for: "Resultados de búsqueda para '%{query}'"
+      no_results: "No se encontraron resultados para '%{query}'"
+      found_results:
+        one: Se encontró 1 resultado
+        other: "Se encontraron %{count} resultados"
+      submit: Buscar
     toc_header: 'En esta página'
     hero:
       sub_title: Busque aquí los artículos o busque las categorías de abajo.

config/routes.rb

@@ -442,6 +442,7 @@ Rails.application.routes.draw do
   get 'hc/:slug', to: 'public/api/v1/portals#show'
   get 'hc/:slug/sitemap.xml', to: 'public/api/v1/portals#sitemap'
   get 'hc/:slug/:locale', to: 'public/api/v1/portals#show'
+  get 'hc/:slug/:locale/search', to: 'public/api/v1/portals/search#index', as: :portal_search
   get 'hc/:slug/:locale/articles', to: 'public/api/v1/portals/articles#index'
   get 'hc/:slug/:locale/categories', to: 'public/api/v1/portals/categories#index'
   get 'hc/:slug/:locale/categories/:category_slug', to: 'public/api/v1/portals/categories#show'

package.json

@@ -39,6 +39,7 @@
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@highlightjs/vue-plugin": "^2.1.0",
+    "@hotwired/turbo-rails": "^8.0.13",
     "@iconify-json/material-symbols": "^1.2.10",
     "@june-so/analytics-next": "^2.0.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -84,7 +85,6 @@
     "snakecase-keys": "^8.0.1",
     "timezone-phone-codes": "^0.0.2",
     "tinykeys": "^3.0.0",
-    "turbolinks": "^5.2.0",
     "urlpattern-polyfill": "^10.0.0",
     "video.js": "7.18.1",
     "videojs-record": "4.5.0",

pnpm-lock.yaml

@@ -37,6 +37,9 @@ importers:
       '@highlightjs/vue-plugin':
         specifier: ^2.1.0
         version: 2.1.0(highlight.js@11.10.0)(vue@3.5.12(typescript@5.6.2))
+      '@hotwired/turbo-rails':
+        specifier: ^8.0.13
+        version: 8.0.13
       '@iconify-json/material-symbols':
         specifier: ^1.2.10
         version: 1.2.10
@@ -172,9 +175,6 @@ importers:
       tinykeys:
         specifier: ^3.0.0
         version: 3.0.0
-      turbolinks:
-        specifier: ^5.2.0
-        version: 5.2.0
       urlpattern-polyfill:
         specifier: ^10.0.0
         version: 10.0.0
@@ -865,6 +865,13 @@ packages:
   '@histoire/vendors@0.17.17':
     resolution: {integrity: sha512-QZvmffdoJlLuYftPIkOU5Q2FPAdG2JjMuQ5jF7NmEl0n1XnmbMqtRkdYTZ4eF6CO1KLZ0Zyf6gBQvoT1uWNcjA==}
 
+  '@hotwired/turbo-rails@8.0.13':
+    resolution: {integrity: sha512-6SCnnOSzhtaJ0pNkAjncZxjtKsK3sP/vPEkCnTXBXSHkr+vF7DTZkOlwjhms1DbbQNTsjCsBoKvzSMbh/omSCQ==}
+
+  '@hotwired/turbo@8.0.13':
+    resolution: {integrity: sha512-M7qXUqcGab6G5PKOiwhgbByTtrPgKPFCTMNQ52QhzUEXEqmp0/ApEguUesh/FPiUjrmFec+3lq98KsWnYY2C7g==}
+    engines: {node: '>= 14'}
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -1036,6 +1043,9 @@ packages:
   '@rails/actioncable@6.1.3':
     resolution: {integrity: sha512-m02524MR9cTnUNfGz39Lkx9jVvuL0tle4O7YgvouJ7H83FILxzG1nQ5jw8pAjLAr9XQGu+P1sY4SKE3zyhCNjw==}
 
+  '@rails/actioncable@7.2.201':
+    resolution: {integrity: sha512-wsTdWoZ5EfG5k3t7ORdyQF0ZmDEgN4aVPCanHAiNEwCROqibSZMXXmCbH7IDJUVri4FOeAVwwbPINI7HVHPKBw==}
+
   '@rails/ujs@7.1.400':
     resolution: {integrity: sha512-YwvXm3BR5tn+VCAKYGycLejMRVZE3Ionj5gFjEeGXCZnI0Rpi+7dKpmyu90kdUY7dRUFpHTdu9zZceEzFLl38w==}
 
@@ -4710,9 +4720,6 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  turbolinks@5.2.0:
-    resolution: {integrity: sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -5723,6 +5730,13 @@ snapshots:
 
   '@histoire/vendors@0.17.17': {}
 
+  '@hotwired/turbo-rails@8.0.13':
+    dependencies:
+      '@hotwired/turbo': 8.0.13
+      '@rails/actioncable': 7.2.201
+
+  '@hotwired/turbo@8.0.13': {}
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -5942,6 +5956,8 @@ snapshots:
 
   '@rails/actioncable@6.1.3': {}
 
+  '@rails/actioncable@7.2.201': {}
+
   '@rails/ujs@7.1.400': {}
 
   '@rollup/rollup-android-arm-eabi@4.40.2':
@@ -10200,8 +10216,6 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  turbolinks@5.2.0: {}
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1