KC Update

src/components/Knowledgebase/Knowledgeheader.jsx

@@ -16,7 +16,7 @@ export default function KnowledgeHeader() {
             </p>
           </div>
         </div>
-
+        {/* 
         <div className={styles.buttons}>
           <Link className={styles.buttonGradient} to="/developers/weaviate">
             Documentation
@@ -27,7 +27,7 @@ export default function KnowledgeHeader() {
           >
             Try Now
           </Link>
-        </div>
+        </div> */}
       </div>
     </header>
   );

src/components/Knowledgebase/card.jsx

@@ -4,8 +4,10 @@ import Link from '@docusaurus/Link';
 
 export default function Card(props) {
   const { details } = props;
+  const typeClass = details.type.toLowerCase();
+
   return (
-    <div className={`${styles.knowledgeCard} ${details.type}`}>
+    <div className={`${styles.knowledgeCard} ${styles[typeClass]}`}>
       <span className={styles.cardType}>{details.type}</span>
 
       <h3>{details.title}</h3>

src/components/Knowledgebase/highlights.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import styles from './styles.module.scss';
+import { LinkButton } from '/src/theme/Buttons';
+import Link from '@docusaurus/Link';
+import Card from './card';
+import knowledge from '/data/knowledgecards.json';
+import { ButtonContainer } from '../../theme/Buttons';
+
+export default function Highlights() {
+  const [selectedCard, setSelectedCard] = useState('All');
+
+  const highlights = knowledge.highlights;
+
+  const handleCardFilter = (card) => {
+    setSelectedCard(card);
+  };
+
+  return (
+    <div className={styles.highlights}>
+      <h3>Highlights</h3>
+      <div className={styles.knowledgeHighlights}>
+        <div className={styles.cardResults}>
+          <div
+            className={`${
+              styles.cardContainer
+            } ${selectedCard.toLowerCase()}-card`}
+          >
+            {highlights.map((card) => {
+              return <Card key={card.name} details={card} />;
+            })}
+          </div>
+        </div>
+      </div>
+      <hr></hr>
+    </div>
+  );
+}

src/components/Knowledgebase/knowledgebase.jsx

@@ -1,23 +1,56 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styles from './styles.module.scss';
 import { LinkButton } from '/src/theme/Buttons';
 import Link from '@docusaurus/Link';
 import Card from './card';
-import people from '/data/people.json';
 import knowledge from '/data/knowledgecards.json';
 import { ButtonContainer } from '../../theme/Buttons';
+import Highlights from './highlights';
 
 export default function KnowledgeBase() {
   const [selectedCard, setSelectedCard] = useState('All');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const allCards = knowledge.all;
 
   const handleCardFilter = (card) => {
     setSelectedCard(card);
   };
 
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+  };
+
+  const filteredCards = allCards.filter((card) => {
+    // Check if 'selectedCard' matches and if 'searchQuery' is in 'title', 'text', or any 'tag'
+    return (
+      (selectedCard === 'All' || card.type === selectedCard) &&
+      ((card.title &&
+        card.title.toLowerCase().includes(searchQuery.toLowerCase())) ||
+        (card.text &&
+          card.text.toLowerCase().includes(searchQuery.toLowerCase())) ||
+        (card.tags &&
+          card.tags.some(
+            (tag) =>
+              tag && tag.toLowerCase().includes(searchQuery.toLowerCase())
+          )))
+    );
+  });
+
   return (
     <div className={styles.teamBG}>
       <div className="container">
+        <Highlights />
+        <div className={styles.searchContainer}>
+          <input
+            type="text"
+            className={styles.searchInput}
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={handleSearchChange}
+          />
+        </div>
+
         <div className={styles.knowledgebase}>
           <div className={styles.filterBox}>
             <div className={styles.cardFilter}>
@@ -75,12 +108,13 @@ export default function KnowledgeBase() {
                 styles.cardContainer
               } ${selectedCard.toLowerCase()}-card`}
             >
-              {knowledge.map((card) => {
-                if (selectedCard === 'All' || card.type === selectedCard) {
-                  return <Card key={card.name} details={card} />;
-                }
-                return null;
-              })}
+              {filteredCards.length > 0 ? (
+                filteredCards.map((card) => (
+                  <Card key={card.name} details={card} />
+                ))
+              ) : (
+                <p>No results found.</p>
+              )}
             </div>
             <div className={styles.buttonsContainer}>
               <Link className={styles.buttonOutline} to="/developers/weaviate">

src/components/Knowledgebase/styles.module.scss

@@ -115,6 +115,19 @@
 .knowledgebase {
   display: flex;
   align-items: flex-start;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+  }
+}
+
+.highlights {
+  margin: 0px 0px 50px 0px;
+}
+
+.knowledgeHighlights {
+  display: flex;
+  justify-content: center;
 }
 
 .filterBox {
@@ -137,6 +150,16 @@
     white-space: nowrap;
     width: 100%;
 
+    @media screen and (max-width: 900px) {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      h3 {
+        flex: 1 100%;
+      }
+    }
+
     a {
       color: #130c49;
       font-style: normal;
@@ -224,6 +247,10 @@
   gap: 10px;
   justify-content: flex-start;
   align-items: flex-start;
+
+  @media screen and (max-width: 900px) {
+    justify-content: center;
+  }
 }
 
 .knowledgeCard {
@@ -393,3 +420,44 @@
   border-radius: 4px;
   display: inline-block;
 }
+
+.searchContainer {
+  width: 100%;
+  display: flex;
+  margin: 40px 0px;
+
+  input {
+    border-radius: 25px;
+    width: 70%;
+    height: 36px;
+    margin: auto;
+  }
+  input[type='text'] {
+    padding-block: 1px;
+    padding-inline: 10px;
+  }
+}
+
+.knowledgeCard.tutorial {
+  background: #130c49;
+
+  span {
+    color: #fff;
+  }
+
+  .tag {
+    color: #130c49;
+  }
+
+  h3 {
+    color: #fff;
+  }
+
+  span {
+    color: #fff;
+  }
+
+  a {
+    color: #61bd73;
+  }
+}

static/data/knowledgecards.json

@@ -1,63 +1,91 @@
-[
-  {
-    "type": "Tutorial",
-    "title": "Quickstart",
-    "text": "Vectors are mathematical representations of data objects, which enable similarity-based searches in vector databases like Weaviate...",
-    "link": "/developers/weaviate/quickstart",
-    "tags": ["JS", "Weaviate", "Tutorial"]
-  },
-  {
-    "type": "Introduction",
-    "title": "Vector Index",
-    "photo": "",
-    "text": "A vector index is a type of data structure for efficiently storing high-dimensional vector data generated by machine learning models. Its main purpose is facilitating quick and accurate similarity searches, using algorithms like trees or hashing to reduce complexity in high-dimensional spaces...",
-    "link": "developers/weaviate/concepts/vector-index",
-    "tags": ["JS", "Vector Databases", "Introduction"]
-  },
-  {
-    "type": "Image",
-    "title": "Vector Index",
-    "photo": "knowledge-vector.svg",
-    "link": "/developers/weaviate/quickstart",
-    "tags": ["JS", "Weaviate", "Image"]
-  },
-  {
-    "type": "Tutorial",
-    "title": "Quickstart",
-    "text": "Vectors are mathematical representations of data objects, which enable similarity-based searches in vector databases like Weaviate...",
-    "link": "/developers/weaviate/quickstart",
-    "tags": ["JS", "Weaviate", "QuickStart"]
-  },
-  {
-    "type": "Introduction",
-    "title": "Graph-Based Index",
-    "photo": "",
-    "text": "HNSW is a graph-based indexing technique, meaning that it organizes the data points in a graph structure rather than traditional tree-based or hash-based structures. This graph-based approach is key to its performance in high-dimensional vector space searches.",
-    "link": "developers/weaviate/concepts/vector-index",
-    "tags": ["JS", "Vector Databases", "Introduction"]
-  },
-  {
-    "type": "Introduction",
-    "title": "Layered Navigation",
-    "photo": "",
-    "text": "During a search, HNSW starts at the topmost layer and makes 'big jumps' across the graph to quickly move closer to the target region. As it moves down the layers, the search becomes more refined, with smaller, more local jumps until the nearest neighbors are identified in the bottom layer.",
-    "link": "/developers/weaviate/quickstart",
-    "tags": ["JS", "Vector Databases", "Introduction"]
-  },
-  {
-    "type": "Introduction",
-    "title": "Hierarchical Graph Structure",
-    "photo": "",
-    "text": "HNSW utilizes a multi-layered graph structure where each layer is a graph of the data points. The top layers contain fewer points with long-range connections, and as you go down the layers, the number of points increases, and the connections become more local. This hierarchical structure allows for efficient navigation during search queries.",
-    "link": "/developers/weaviate/introduction#how-does-weaviate-work",
-    "tags": ["JS", "Vector Databases", "Introduction"]
-  },
-  {
-    "type": "Introduction",
-    "title": "Fusion Algorithm",
-    "photo": "",
-    "text": "In hybrid search, the fusion algorithm combines results from keyword and vector searches into a final list of ranked search results. A popular fusion algorithm is called reciprocal ranked fusion, which uses the sum of the inverse of the position of the results. There are multiple types of fusion algorithms. Weaviate supports reciprocal rank fusion and relative score fusion.",
-    "link": "https://weaviate.io/developers/weaviate/api/graphql/additional-properties#score",
-    "tags": ["JS", "Hybrid Search", "Introduction"]
-  }
-]
+{
+  "all": [
+    {
+      "type": "Tutorial",
+      "title": "Quickstart",
+      "text": "Vectors are mathematical representations of data objects, which enable similarity-based searches in vector databases like Weaviate...",
+      "link": "/developers/weaviate/quickstart",
+      "tags": ["JS", "Weaviate", "Tutorial"]
+    },
+    {
+      "type": "Introduction",
+      "title": "Vector Index",
+      "photo": "",
+      "text": "A vector index is a type of data structure for efficiently storing high-dimensional vector data generated by machine learning models. Its main purpose is facilitating quick and accurate similarity searches, using algorithms like trees or hashing to reduce complexity in high-dimensional spaces...",
+      "link": "developers/weaviate/concepts/vector-index",
+      "tags": ["JS", "Vector Databases", "Introduction"]
+    },
+    {
+      "type": "Image",
+      "title": "Vector Index",
+      "photo": "knowledge-vector.svg",
+      "link": "/developers/weaviate/quickstart",
+      "tags": ["JS", "Weaviate", "Image"]
+    },
+    {
+      "type": "Tutorial",
+      "title": "Quickstart",
+      "text": "Vectors are mathematical representations of data objects, which enable similarity-based searches in vector databases like Weaviate...",
+      "link": "/developers/weaviate/quickstart",
+      "tags": ["JS", "Weaviate", "QuickStart"]
+    },
+    {
+      "type": "Introduction",
+      "title": "Graph-Based Index",
+      "photo": "",
+      "text": "HNSW is a graph-based indexing technique, meaning that it organizes the data points in a graph structure rather than traditional tree-based or hash-based structures. This graph-based approach is key to its performance in high-dimensional vector space searches.",
+      "link": "developers/weaviate/concepts/vector-index",
+      "tags": ["JS", "Vector Databases", "Introduction"]
+    },
+    {
+      "type": "Introduction",
+      "title": "Layered Navigation",
+      "photo": "",
+      "text": "During a search, HNSW starts at the topmost layer and makes 'big jumps' across the graph to quickly move closer to the target region. As it moves down the layers, the search becomes more refined, with smaller, more local jumps until the nearest neighbors are identified in the bottom layer.",
+      "link": "/developers/weaviate/quickstart",
+      "tags": ["JS", "Vector Databases", "Introduction"]
+    },
+    {
+      "type": "Introduction",
+      "title": "Hierarchical Graph Structure",
+      "photo": "",
+      "text": "HNSW utilizes a multi-layered graph structure where each layer is a graph of the data points. The top layers contain fewer points with long-range connections, and as you go down the layers, the number of points increases, and the connections become more local. This hierarchical structure allows for efficient navigation during search queries.",
+      "link": "/developers/weaviate/introduction#how-does-weaviate-work",
+      "tags": ["JS", "Vector Databases", "Introduction"]
+    },
+    {
+      "type": "Introduction",
+      "title": "Fusion Algorithm",
+      "photo": "",
+      "text": "In hybrid search, the fusion algorithm combines results from keyword and vector searches into a final list of ranked search results. A popular fusion algorithm is called reciprocal ranked fusion, which uses the sum of the inverse of the position of the results. There are multiple types of fusion algorithms. Weaviate supports reciprocal rank fusion and relative score fusion.",
+      "link": "https://weaviate.io/developers/weaviate/api/graphql/additional-properties#score",
+      "tags": ["JS", "Hybrid Search", "Introduction"]
+    }
+  ],
+  "highlights": [
+    {
+      "type": "Introduction",
+      "title": "Layered Navigation",
+      "photo": "",
+      "text": "During a search, HNSW starts at the topmost layer and makes 'big jumps' across the graph to quickly move closer to the target region. As it moves down the layers, the search becomes more refined, with smaller, more local jumps until the nearest neighbors are identified in the bottom layer.",
+      "link": "/developers/weaviate/quickstart",
+      "tags": ["JS", "Vector Databases", "Introduction"]
+    },
+    {
+      "type": "Introduction",
+      "title": "Hierarchical Graph Structure",
+      "photo": "",
+      "text": "HNSW utilizes a multi-layered graph structure where each layer is a graph of the data points. The top layers contain fewer points with long-range connections, and as you go down the layers, the number of points increases, and the connections become more local. This hierarchical structure allows for efficient navigation during search queries.",
+      "link": "/developers/weaviate/introduction#how-does-weaviate-work",
+      "tags": ["JS", "Vector Databases", "Introduction"]
+    },
+    {
+      "type": "Introduction",
+      "title": "Fusion Algorithm",
+      "photo": "",
+      "text": "In hybrid search, the fusion algorithm combines results from keyword and vector searches into a final list of ranked search results. A popular fusion algorithm is called reciprocal ranked fusion, which uses the sum of the inverse of the position of the results. There are multiple types of fusion algorithms. Weaviate supports reciprocal rank fusion and relative score fusion.",
+      "link": "https://weaviate.io/developers/weaviate/api/graphql/additional-properties#score",
+      "tags": ["JS", "Hybrid Search", "Introduction"]
+    }
+  ]
+}