feat: Add client-side site search for static content pages

.gitignore

@@ -55,6 +55,9 @@ Thumbs.db
 **/*.css
 **/*.css.map
 
+# Generated search indices
+projects/website-angular/public/site-search-index.json
+
 # Ignore npm lock file
 package-lock.json
 

package.json

@@ -56,6 +56,7 @@
     "express": "4.18.2",
     "immer": "^11.1.3",
     "marked": "^17.0.1",
+    "minisearch": "^7.2.0",
     "ng-table-virtual-scroll": "^1.6.1",
     "ngrx-wieder": "^15.0.0",
     "ngx-custom-material-file-input": "^19.0.0",

projects/website-angular/src/app/app.routes.ts

@@ -26,9 +26,9 @@ export const routes: Routes = [
     { path: 'content/reactome-research-spotlight', loadComponent: () => import('./article/article-page/article-page.component').then(m => m.ArticlePageComponent), pathMatch: 'full' },
     { path: 'content/reactome-research-spotlight/:slug', loadComponent: () => import('./article/article/article.component').then(m => m.ArticleComponent), pathMatch: 'full' },
 
-    //Search Page
-    { path: 'content/advanced', redirectTo: '/content/query?advanced=true' },
+    //Search Pages
     { path: 'content/query', loadComponent: () => import('./search/search.component').then(m => m.SearchComponent) },
+    { path: 'tools/site-search', loadComponent: () => import('./site-search/site-search.component').then(m => m.SiteSearchComponent) },
 
     //404 Page
     { path: '404', loadComponent: () => import('./page-not-found/page-not-found.component').then(m => m.PageNotFoundComponent) }, //TODO: Remove?

projects/website-angular/src/app/search/search-bar/search-bar.component.scss

@@ -29,10 +29,17 @@ $border-radius: 8px;
   flex: 1;
   padding: 8px 16px;
   border: 2px solid var(--primary);
-  border-radius: 4px 0 0 4px;
+  border-radius: 4px;
   font-size: 20px;
   resize: vertical;
   line-height: 1.3;
+
+  ~ .search-button {
+    align-self: flex-start;
+    margin-left: 8px;
+    padding: 8px 20px;
+    border-radius: 4px;
+  }
 }
 
 .search-button {
@@ -194,7 +201,7 @@ $border-radius: 8px;
 }
 
 .advanced-facets-title {
-    text-align: left;
+  text-align: left;
 }
 
 .facet-option {
@@ -214,7 +221,7 @@ $border-radius: 8px;
     }
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     flex-shrink: 0;
     accent-color: var(--primary);
   }
@@ -231,4 +238,4 @@ $border-radius: 8px;
 .facet-count {
   color: var(--on-surface-variant);
   flex-shrink: 0;
-}
+}

projects/website-angular/src/app/search/search-bar/search-bar.component.ts

@@ -15,7 +15,7 @@ import {
   SearchFilters,
   SearchService,
 } from 'projects/website-angular/src/services/search.service';
-import { DropdownToggleComponent } from "../../reactome-components/dropdown-toggle/dropdown-toggle.component";
+import { DropdownToggleComponent } from '../../reactome-components/dropdown-toggle/dropdown-toggle.component';
 
 @Component({
   selector: 'app-search-bar',
@@ -72,11 +72,16 @@ export class SearchBarComponent implements OnChanges {
 
     const params: Record<string, string | string[] | null> = {
       q: q,
-      advanced: 'true',
+      advanced: this.advancedMode ? 'true' : null,
       page: null,
     };
 
-    for (const key of ['species', 'types', 'compartments', 'keywords'] as const) {
+    for (const key of [
+      'species',
+      'types',
+      'compartments',
+      'keywords',
+    ] as const) {
       const values = this.advancedFilters[key];
       params[key] = values?.length ? values : null;
     }
@@ -109,11 +114,16 @@ export class SearchBarComponent implements OnChanges {
 
     const params: Record<string, string | string[] | null> = {
       q: s,
-      advanced: 'true',
+      advanced: this.advancedMode ? 'true' : null,
       page: null,
     };
 
-    for (const key of ['species', 'types', 'compartments', 'keywords'] as const) {
+    for (const key of [
+      'species',
+      'types',
+      'compartments',
+      'keywords',
+    ] as const) {
       const values = this.advancedFilters[key];
       params[key] = values?.length ? values : null;
     }

projects/website-angular/src/app/site-search/site-search.component.html

@@ -0,0 +1,75 @@
+<app-page-layout [showSidebar]="false" [showBreadcrumb]="true">
+  <div class="site-search">
+    <h1>Site Search</h1>
+    <p class="site-search-description">
+      Search across all Reactome pages including news, documentation, community
+      pages, and more.
+    </p>
+
+    <form class="search-bar-container" (submit)="onSubmit($event)">
+      <input
+        type="text"
+        placeholder="Search Reactome pages..."
+        class="search-input"
+        [value]="query"
+        (input)="onInput($event)"
+        autocomplete="off"
+        autofocus
+      />
+      <button type="submit" class="search-button">Search</button>
+    </form>
+
+    @if (loading) {
+    <div class="loading">Loading search index...</div>
+    } @else { @if (categoryCounts.length > 0) {
+    <div class="category-chips">
+      <button
+        class="category-chip"
+        [class.active]="activeCategory === null"
+        (click)="filterByCategory(null)"
+      >
+        All <span class="chip-count">{{ results.length }}</span>
+      </button>
+      @for (cat of categoryCounts; track cat.category) {
+      <button
+        class="category-chip"
+        [class.active]="activeCategory === cat.category"
+        (click)="filterByCategory(cat.category)"
+      >
+        {{ cat.category }} <span class="chip-count">{{ cat.count }}</span>
+      </button>
+      }
+    </div>
+    } @if (searched && results.length === 0) {
+    <div class="no-results">
+      <p>
+        No results found for "<strong>{{ query }}</strong
+        >".
+      </p>
+      <p>Try different keywords or check your spelling.</p>
+    </div>
+    } @else if (searched) {
+    <div class="results-summary">
+      {{ results.length }} result{{ results.length === 1 ? "" : "s" }} for
+      "<strong>{{ query }}</strong
+      >"
+    </div>
+    } @for (group of groupedResults; track group.category) {
+    <div class="result-group">
+      <h2 class="group-title">{{ group.category }}</h2>
+      @for (item of getVisibleItems(group); track item.id) {
+      <a [routerLink]="item.url" class="result-item">
+        <div class="result-title">{{ item.title }}</div>
+        <div class="result-url">{{ item.url }}</div>
+        <div class="result-excerpt">{{ item.excerpt }}</div>
+      </a>
+      } @if (group.items.length > previewLimit) {
+      <button class="show-all-btn" (click)="toggleExpand(group.category)">
+        @if (isExpanded(group.category)) { Show less } @else { Show all
+        {{ group.items.length }} results }
+      </button>
+      }
+    </div>
+    } }
+  </div>
+</app-page-layout>