WIP redesign

docusaurus.config.js

@@ -104,31 +104,7 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      algolia: {
-        // The application ID provided by Algolia
-        appId: 'GAVMESY4FI',
-
-        // Public API key: it is safe to commit it
-        apiKey: '7f9d22d433c66f1a108b092d02c8d034',
-
-        indexName: 'shiny-alfajores-ede8d8',
-
-        // Optional: see doc section below
-        contextualSearch: true,
-
-        // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
-        externalUrlRegex: 'external\\.com|domain\\.com',
-
-
-
-        // Optional: Algolia search parameters
-        searchParameters: {},
-
-        // Optional: path for search page that enabled by default (`false` to disable it)
-        searchPagePath: 'search',
-
-        //... other Algolia params
-      },
+
       hotjar: {
         applicationId: "3812613",
       },
@@ -147,10 +123,7 @@ const config = {
           src: 'img/logz-logo.svg',
         },
         items: [
-          {
-            type: 'search',
-            position: 'right',
-          },
+
           {to: '/docs/category/send-your-data/', label: 'Ship data', position: 'left'},
           {to: 'https://api-docs.logz.io/docs/logz/logz-io-api', label: 'API', position: 'left'},
           {to: 'https://status.logz.io/', label: 'System status', position: 'left'},

src/components/HomepageFeatures/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
+import SearchHeader from '../../components/SearchHeader';  // Already imported
 
 const FeatureList = [
   {
@@ -75,7 +76,6 @@ const FeatureList = [
   },
 ];
 
-
 function Feature({Svg, title, description, link}, index) {
   return (
     <Link to={link} className={clsx('col col--3', styles.featureCard, index >= 9 ? styles.smallCard : '')}>
@@ -95,6 +95,7 @@ export default function HomepageFeatures() {
   return (
     <section className={styles.features}>
       <div className={clsx('container', styles.featuresContainer)}>
+        <SearchHeader /> {/* Added SearchHeader component here */}
         <div className={clsx('row', styles.centeredRow)}>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
@@ -104,4 +105,3 @@ export default function HomepageFeatures() {
     </section>
   );
 }
-

src/components/HomepageFeatures/styles.module.css

@@ -41,3 +41,28 @@
 .smallCard {
   height: 60%; /* Adjust this value as per your requirement */
 }
+
+
+.search-header {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.search-header .DocSearch-Container {
+  width: 100%;
+  max-width: 600px; /* Adjust the max width as needed */
+}
+
+.DocSearch-Form {
+  display: flex;
+  width: 100%;
+}
+
+.DocSearch-Input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+}

src/components/SearchHeader.js

@@ -0,0 +1,21 @@
+import '@docsearch/css'; // Import default styles for DocSearch
+import React from 'react';
+import { DocSearch } from '@docsearch/react';
+import { useAlgoliaContextualFacetFilters } from '@docusaurus/theme-search-algolia/client';
+
+
+function SearchHeader() {
+  const facetFilters = useAlgoliaContextualFacetFilters();
+  return (
+    <DocSearch
+      apiKey="7f9d22d433c66f1a108b092d02c8d034"
+      appId="GAVMESY4FI"
+      indexName="shiny-alfajores-ede8d8"
+      searchParameters={{
+        facetFilters
+      }}
+    />
+  );
+}
+
+export default SearchHeader;

src/theme/SearchBar/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import SearchHeader from '../../components/SearchHeader';
+
+export default function SearchBarWrapper(props) {
+  return <SearchHeader {...props} />;
+}