bug: Issue-2367 - Fixed the search functionality

package.json

@@ -42,11 +42,13 @@
     "@visual-framework/vf-sass-config": "2.6.1",
     "@visual-framework/vf-sass-starter": "^0.1.30",
     "@visual-framework/vf-search": "^1.0.0",
+    "@visual-framework/vf-search-client-side": "^2.0.2",
     "@visual-framework/vf-stack": "^3.0.0",
     "@visual-framework/vf-tabs": "^2.1.5",
     "@visual-framework/vf-text": "^1.1.1",
     "@visual-framework/vf-u-fullbleed": "^1.2.2",
     "@visual-framework/vf-utility-classes": "2.0.0",
+    "lunr": "^2.3.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",

src/App.jsx

@@ -12,6 +12,7 @@ import VFBlockquote from './components/VFBlockquote';
 import VFHero from './components/VFHero';
 import VFBanner from './components/VFBanner';
 import VFTabs from './components/VFTabs';
+import SearchResults from './components/SearchResults';
 // import VFChatbot from './vf-chatbot-components/vf-chatbot/vf-chatbot.react';
 import VFChatbot from '@visual-framework/vf-chatbot/vf-chatbot.react';
 
@@ -137,6 +138,7 @@ function App() {
           <Route path="/components/vf-hero" element={<VFHero />} />
           <Route path="/components/vf-banner" element={<VFBanner />} />
           <Route path="/components/vf-tabs" element={<VFTabs />} />
+          <Route path="/search" element={<SearchResults />} />
         </Routes>
         <Footer />
       </RouteChangeHandler>

src/components/Footer/index.jsx

@@ -78,9 +78,6 @@ function Footer() {
               <li className="vf-list__item">
                 <a className="vf-list__link" href="https://github.com/visual-framework/vf-core">GitHub</a>
               </li>
-              <li className="vf-list__item">
-                <a className="vf-list__link" href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Slack</a>
-              </li>
             </ul>
           </div>
           <div className="vf-links"></div>

src/components/Header/index.jsx

@@ -101,9 +101,6 @@ function Header() {
               {/* External links should remain as <a> tags */}
               <a href="https://github.com/visual-framework/vf-core" className="vf-navigation__link vf-mega-menu__link">GitHub</a>
             </li>
-            <li className="vf-navigation__item">
-              <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ" className="vf-navigation__link vf-mega-menu__link">Slack</a>
-            </li>
             <li className="vf-navigation__item">
               <Link 
                 to="/search" 
@@ -315,7 +312,7 @@ function Header() {
               <h2 className="vf-section-header__heading" id="search"> Search</h2>
             </div>
 
-            <form action="/search/" method="GET" className="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
+            <form action="/vf-react/search/" method="GET" className="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
               <div className="vf-sidebar__inner">
                 <div className="vf-form__item | vf-search__item">
                   <label className="vf-form__label vf-u-sr-only | vf-search__label" htmlFor="search_query" />

src/components/Home/index.jsx

@@ -51,7 +51,7 @@ function Home() {
         </div>
 
         <form
-          action="/search/"
+          action="/vf-react/search/"
           method="GET"
           className="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end"
         >
@@ -63,7 +63,7 @@ function Home() {
               ></label>
               <input
                 type="search"
-                id="search"
+                id="search_query"
                 placeholder="Search components and documentation"
                 name="search_query"
                 className="vf-search__input | vf-form__input"

src/components/SearchResults/index.jsx

@@ -0,0 +1,129 @@
+import React, { useEffect } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import lunr from "lunr";
+import { componentSearchIndex } from "../searchIndex";
+import "@visual-framework/vf-search-client-side/vf-search-client-side.css";
+
+function SearchResults() {
+  const [searchParams] = useSearchParams();
+  const query = (searchParams.get("search_query") || "").trim();
+
+  useEffect(() => {
+    // vf-search-client-side expects global `lunr` and `searchIndex` variables.
+    window.lunr = lunr;
+    window.searchIndex = {
+      pages: componentSearchIndex.map((item, index) => ({
+        id: String(index),
+        title: item.name,
+        text: `${item.description}`,
+        url: item.path,
+      })),
+    };
+
+    let isMounted = true;
+
+    import("@visual-framework/vf-search-client-side/vf-search-client-side.js")
+      .then(({ vfSearchClientSide }) => {
+        if (isMounted) {
+          vfSearchClientSide();
+        }
+      })
+      .catch(() => {
+        const resultsContainer = document.querySelector(
+          "[data-vf-search-client-side-results]",
+        );
+        if (resultsContainer) {
+          resultsContainer.textContent =
+            "Search is temporarily unavailable. Please try again.";
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return (
+    <div>
+      <section class="vf-intro" id="an-id-for-anchor">
+        <div></div>
+
+        <div class="vf-stack">
+          <h1 class="vf-intro__heading ">Search</h1>
+          <p class="vf-lede">Search documentation and guidance.</p>
+
+          <p class="vf-intro__text"></p>
+        </div>
+      </section>
+      <div className="embl-grid embl-grid--has-centered-content">
+        <div></div>
+        <div className="vf-stack vf-stack--400">
+          <form
+            action=""
+            method="GET"
+            className="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end"
+          >
+            <div className="vf-sidebar__inner">
+              <div className="vf-form__item | vf-search__item">
+                <label
+                  className="vf-form__label vf-u-sr-only | vf-search__label"
+                  htmlFor="search_query"
+                >
+                  Search
+                </label>
+                <input
+                  type="search"
+                  id="search_query"
+                  placeholder="Search components and documentation"
+                  name="search_query"
+                  defaultValue={query}
+                  className="vf-search__input | vf-form__input"
+                  data-vf-search-client-side-input
+                  data-vf-search-client-side-destination-prefix=""
+                />
+              </div>
+              <button
+                type="submit"
+                className="vf-search__button | vf-button vf-button--primary"
+              >
+                <span className="vf-button__text">Search</span>
+                <svg
+                  className="vf-icon vf-icon--search-btn | vf-button__icon"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  version="1.1"
+                  viewBox="0 0 140 140"
+                  width="140"
+                  height="140"
+                >
+                  <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
+                    <path
+                      d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z"
+                      fill="#FFFFFF"
+                      stroke="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="0"
+                    />
+                  </g>
+                </svg>
+              </button>
+            </div>
+          </form>
+
+          <div className="vf-search-client-side vf-grid | vf-content">
+            <div
+              className="results-container"
+              data-vf-search-client-side-results
+            >
+              Loading...
+            </div>
+          </div>
+        </div>
+        <div></div>
+      </div>
+    </div>
+  );
+}
+
+export default SearchResults;

src/components/searchIndex.js

@@ -0,0 +1,63 @@
+export const componentSearchIndex = [
+  {
+    name: "vf-badge",
+    path: "/vf-react/components/vf-badge",
+    description: "vf-badge"
+  },
+  {
+    name: "vf-back-to-top",
+    path: "/vf-react/components/vf-back-to-top",
+    description: "vf-back-to-top"
+  },
+  {
+    name: "vf-button",
+    path: "/vf-react/components/vf-button",
+    description: "vf-button"
+  },
+  {
+    name: "vf-card",
+    path: "/vf-react/components/vf-card",
+    description: "vf-card"
+  },
+  {
+    name: "vf-blockquote",
+    path: "/vf-react/components/vf-blockquote",
+    description: "vf-blockquote"
+  },
+  {
+    name: "vf-hero",
+    path: "/vf-react/components/vf-hero",
+    description: "vf-hero"
+  },
+  {
+    name: "vf-banner",
+    path: "/vf-react/components/vf-banner",
+    description: "vf-banner"
+  },
+  {
+    name: "vf-tabs",
+    path: "/vf-react/components/vf-tabs",
+    description: "vf-tabs"
+  },
+  {
+    name: "chatbot",
+    path: "/vf-react/chatbot",
+    description: "chatbot"
+  }
+];
+
+export function searchComponents(rawQuery) {
+  const query = (rawQuery || "").trim().toLowerCase();
+
+  if (!query) {
+    return [];
+  }
+
+  return componentSearchIndex.filter((component) => {
+    const haystack = [component.name, component.description]
+      .join(" ")
+      .toLowerCase();
+
+    return haystack.includes(query);
+  });
+}