From 6c1911bb8db805d2a262cf2d1caff290ceb094c4 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <amtruhlar@gmail.com>
Date: Thu, 23 May 2024 12:31:08 -0400
Subject: [PATCH 1/2] layout: if search query, order cards by relevance score

---
 src/components/projects/CardContainer.jsx     | 19 +++++++++++++++++--
 .../stores/projectSearchResultsStore.js       |  2 ++
 src/pages/projects.json.js                    |  4 +---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/projects/CardContainer.jsx b/src/components/projects/CardContainer.jsx
index db2ab23..a2b5d84 100644
--- a/src/components/projects/CardContainer.jsx
+++ b/src/components/projects/CardContainer.jsx
@@ -18,6 +18,7 @@ export default function CardContainer({
   contentType,
 }) {
   const [visible, setVisible] = useState("relative");
+  const [order, setOrder] = useState(0);
   const urlQuery = useStore($urlQuery);
   const projectData = useStore($projectData);
   const ecosystemData = useStore($ecosystemData);
@@ -37,14 +38,27 @@ export default function CardContainer({
   const $selectedProjectType = useStore(selectedProjectType);
   const tagsArray = extractUniqueTagValueArray(tagsObj);
 
+  function findMatchingIndex(contentData, title) {
+    if (!contentData) {
+      return -1;
+    }
+
+    const index = contentData.findIndex(
+      (content) => content.item.title === title
+    );
+    return index;
+  }
+
   //determine whether card is visible or not based on: search query, tag selections, project type selections
   useEffect(() => {
     if (typeof window !== "undefined") {
+      const matchingIndex = findMatchingIndex(contentData, title);
+      setOrder(matchingIndex);
+
       const isSearchMatch =
         (urlQuery === "" &&
           (contentData === null || contentData.length === 0)) ||
-        (contentData &&
-          contentData.some((content) => content.item.title === title));
+        (contentData && matchingIndex !== -1);
 
       const hasMatchingTags =
         $selectedTags.length === 0 ||
@@ -73,6 +87,7 @@ export default function CardContainer({
 
   return (
     <div
+      style={{ order }}
       className={`${visible} col-span-1 w-full h-full mx-auto mb-4 bg-white dark:bg-slate-900 rounded-md shadow-md overflow-hidden border-gray-200 dark:border-slate-800 border-2 hover:shadow-lg transition duration-300 transform hover:scale-105`}
     >
       <a href={url} className="absolute top-0 left-0 bottom-0 right-0"></a>
diff --git a/src/components/projects/stores/projectSearchResultsStore.js b/src/components/projects/stores/projectSearchResultsStore.js
index b8fb4f9..3a7c07b 100644
--- a/src/components/projects/stores/projectSearchResultsStore.js
+++ b/src/components/projects/stores/projectSearchResultsStore.js
@@ -15,6 +15,7 @@ export const $projectsFuse = atom(null);
 const projectsOptions = {
   ignoreLocation: true,
   threshold: 0.3,
+  includeScore: true,
   keys: [
     "title",
     "tagline",
@@ -51,6 +52,7 @@ export const $projectData = computed(
     // Handle fuse search
     if (currentFuseInstance) {
       const searchResults = currentFuseInstance.search(currentUrlQuery);
+      console.log(searchResults);
       return searchResults;
     }
   }
diff --git a/src/pages/projects.json.js b/src/pages/projects.json.js
index 958010d..82f1b15 100644
--- a/src/pages/projects.json.js
+++ b/src/pages/projects.json.js
@@ -2,9 +2,7 @@ import { getCollection } from "astro:content";
 import Fuse from "fuse.js";
 
 async function getProjects() {
-  const allProjects = (await getCollection("projects")).sort(
-    (a, b) => a.data.title.valueOf() - b.data.title.valueOf()
-  );
+  const allProjects = await getCollection("projects");
   return allProjects.map((project) => ({
     title: project.data.title,
     tagline: project.data.tagline,

From b1cfdb05a46ce85cc5d15cecae92f014b648d9da Mon Sep 17 00:00:00 2001
From: Allison Truhlar <amtruhlar@gmail.com>
Date: Thu, 23 May 2024 12:32:38 -0400
Subject: [PATCH 2/2] chore: reorganize var and func declarations

---
 src/components/projects/CardContainer.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/projects/CardContainer.jsx b/src/components/projects/CardContainer.jsx
index a2b5d84..ab4e395 100644
--- a/src/components/projects/CardContainer.jsx
+++ b/src/components/projects/CardContainer.jsx
@@ -22,6 +22,9 @@ export default function CardContainer({
   const urlQuery = useStore($urlQuery);
   const projectData = useStore($projectData);
   const ecosystemData = useStore($ecosystemData);
+  const $selectedTags = useStore(selectedTags);
+  const $selectedProjectType = useStore(selectedProjectType);
+  const tagsArray = extractUniqueTagValueArray(tagsObj);
 
   let contentData = null;
   if (contentType === "projects") {
@@ -34,10 +37,6 @@ export default function CardContainer({
     }
   }
 
-  const $selectedTags = useStore(selectedTags);
-  const $selectedProjectType = useStore(selectedProjectType);
-  const tagsArray = extractUniqueTagValueArray(tagsObj);
-
   function findMatchingIndex(contentData, title) {
     if (!contentData) {
       return -1;