From 9c30d8255a04c2fa7eeceea58109b9416a4366ea Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 3 Aug 2023 16:56:04 -0400
Subject: [PATCH 01/64] feat: add searchbar to layout

---
 .../gatsby-theme-project-portal/src/layouts/Layout.tsx   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
index 337c05921..c69da50b2 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
@@ -1,10 +1,11 @@
-import React, { FunctionComponent, ReactNode } from "react"
+import React, { FunctionComponent, ReactNode, useState } from "react"
 import {
   Footer,
   BottomBanner,
   DevelopmentBanner,
   Navbar,
   SiteMetadata,
+  SearchBar,
 } from "../components"
 import { useProjectPortalConfig } from "../hooks"
 
@@ -23,6 +24,8 @@ function getShowDevBannerSetting(showDevBanner?: boolean) {
   return showDevBanner ?? showDevBannerThemeSetting
 }
 
+const [searchQuery, setSearchQuery] = useState([])
+
 export const Layout: FunctionComponent<LayoutProps> = ({
   activePage,
   title,
@@ -37,6 +40,10 @@ export const Layout: FunctionComponent<LayoutProps> = ({
       {coalescedShowDevBanner && <DevelopmentBanner />}
       <SiteMetadata title={title} description={description} />
       <Navbar activePage={activePage} />
+      <SearchBar
+        label={"search"}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
       <div className="flex-1">{children}</div>
       <BottomBanner />
       <Footer />

From 68061952208bb30070fddfa51a3e923e59346f0b Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 7 Aug 2023 13:27:46 -0400
Subject: [PATCH 02/64] feat: create new modal with search

---
 .../src/components/SearchModal.tsx            | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 packages/gatsby-theme-project-portal/src/components/SearchModal.tsx

diff --git a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
new file mode 100644
index 000000000..85a38d7df
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react"
+import { SearchBar } from "./SearchBar"
+
+export default function SearchModal() {
+  const [showModal, setShowModal] = useState(false)
+
+  return (
+    <>
+      <button
+        className="bg-white text-slate-400 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+        type="button"
+        onClick={() => setShowModal(true)}
+      >
+        Quick Search...
+      </button>
+      {showModal ? (
+        <>
+          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
+            <div className="relative w-auto my-6 mx-auto max-w-3xl">
+              {/*content*/}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/*header*/}
+                <div className="flex items-center justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+                  <SearchBar
+                    label={"Search"}
+                    onChange={(e) => console.log(e)}
+                  />
+                  <button
+                    className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+                    onClick={() => setShowModal(false)}
+                  >
+                    <span className="text-slate-400 h-6 w-6 text-2xl block outline-none focus:outline-none">
+                      ×
+                    </span>
+                  </button>
+                </div>
+                {/*body*/}
+                <div className="relative p-6 flex-auto">
+                  <p className="my-4 text-slate-500 text-lg leading-relaxed">
+                    I always felt like I could do anything. That’s the main
+                    thing people are controlled by! Thoughts- their perception
+                    of themselves! They're slowed down by their perception of
+                    themselves. If you're taught you can’t do anything, you
+                    won’t do anything. I was taught I could do everything.
+                  </p>
+                </div>
+                {/*footer*/}
+              </div>
+            </div>
+          </div>
+          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+        </>
+      ) : null}
+    </>
+  )
+}

From 9eda3104700598d1dbb746993eabb09686703c9f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 7 Aug 2023 13:28:42 -0400
Subject: [PATCH 03/64] feat: add search modal to navbar layout

---
 .../gatsby-theme-project-portal/src/components/Navbar.tsx  | 6 +++++-
 .../gatsby-theme-project-portal/src/layouts/Layout.tsx     | 7 -------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 19f7d6cf3..596f60d52 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -8,6 +8,7 @@ import {
 } from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/hooks"
 import { SiteTitle } from "./SiteTitle"
 import { NavbarItem } from "./NavbarItem"
+import SearchModal from "./SearchModal"
 
 interface NavbarLayoutProps {
   title: string
@@ -36,7 +37,7 @@ export const NavbarLayout: FunctionComponent<NavbarLayoutProps> = ({
         }
       >
         <div className="flex flex-wrap justify-between w-full px-0 xl:px-4">
-          <div className="relative flex flex-no-wrap w-full xl:static xl:block xl:w-auto">
+          <div className="relative flex flex-no-wrap w-full xl:static xl:w-auto">
             <button
               className="block p-6 ml-0 text-xl leading-none text-white outline-none cursor-pointer bg-primary xl:hidden focus:outline-none"
               type="button"
@@ -51,6 +52,9 @@ export const NavbarLayout: FunctionComponent<NavbarLayoutProps> = ({
             >
               <SiteTitle image={image} title={title} />
             </Link>
+            <div className="flex-1 min-w-30ch auto-rows-auto flex flex-col">
+              <SearchModal />
+            </div>
           </div>
           <div
             className={
diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
index c69da50b2..a1148c9c1 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
@@ -5,7 +5,6 @@ import {
   DevelopmentBanner,
   Navbar,
   SiteMetadata,
-  SearchBar,
 } from "../components"
 import { useProjectPortalConfig } from "../hooks"
 
@@ -24,8 +23,6 @@ function getShowDevBannerSetting(showDevBanner?: boolean) {
   return showDevBanner ?? showDevBannerThemeSetting
 }
 
-const [searchQuery, setSearchQuery] = useState([])
-
 export const Layout: FunctionComponent<LayoutProps> = ({
   activePage,
   title,
@@ -40,10 +37,6 @@ export const Layout: FunctionComponent<LayoutProps> = ({
       {coalescedShowDevBanner && <DevelopmentBanner />}
       <SiteMetadata title={title} description={description} />
       <Navbar activePage={activePage} />
-      <SearchBar
-        label={"search"}
-        onChange={(e) => setSearchQuery(e.target.value)}
-      />
       <div className="flex-1">{children}</div>
       <BottomBanner />
       <Footer />

From 054e3ab23415a86eaa09e9b4eef5e9095d02203f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 11 Sep 2023 10:54:22 -0400
Subject: [PATCH 04/64] feat: one page for all projects

filtering by status option, may remove later
---
 .../example-site/content/page/search.json     |   6 +
 .../gatsby-node.js                            |  71 +++---
 .../src/components/ClientSearch.tsx           | 220 ++++++++++++++++++
 .../src/components/ProjectPage.tsx            |  69 +++++-
 4 files changed, 329 insertions(+), 37 deletions(-)
 create mode 100644 packages/example-site/content/page/search.json
 create mode 100644 packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx

diff --git a/packages/example-site/content/page/search.json b/packages/example-site/content/page/search.json
new file mode 100644
index 000000000..e6493579a
--- /dev/null
+++ b/packages/example-site/content/page/search.json
@@ -0,0 +1,6 @@
+{
+  "templateKey": "SearchPage",
+  "header": "Search for a Page",
+  "accessibility": "We are committed to making the Research Partnerships Portal accessible for all visitors, and we welcome your feedback on the site. If you encounter any accessibility barriers while using the Portal, please contact Jenna Wallace (email: [jenna.wallace@sanantonio.gov](mailto:jenna.wallace@sanantonio.gov), office phone number: 210-207-7930) for assistance.\n\nWe are currently working to make the Research Partnerships Portal fully compliant with requirements in the Web Content Accessibility Guidelines’ A and AA standard. Our final steps to meet WCAG 2.1 A and AA criteria are to fulfill 2.4.2 Page Titled, which will make pages easier to differentiate for screen reader users, 2.5.3 Label in Name, which will make project cards more descriptive for screen reader users, and 2.4.5 Multiple Ways, which will make it easier for all users to find the content most relevant to them.\nFor more detailed descriptions of how the Research Partnerships Portal meets WCAG criteria, please see our full [Accessibility Conformance Report](https://drive.google.com/file/d/1C9ohi1t6N2yFsaVW_xcKsexflZymh_82/view).",
+  "image": "about.jpg"
+}
diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index 4261995bb..40b6b8bd0 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -10,6 +10,7 @@ const CardPageTemplate = require.resolve(`./src/templates/card-page`)
 const AboutPageTemplate = require.resolve(`./src/templates/about-page`)
 const ContactPageTemplate = require.resolve(`./src/templates/contact-page`)
 const ThankYouPageTemplate = require.resolve(`./src/templates/thank-you-page`)
+const SearchPageTemplate = require.resolve(`./src/templates/client-search-page`)
 const fs = require("fs")
 
 exports.onPreBootstrap = ({ reporter }, themeOptions) => {
@@ -58,39 +59,42 @@ const ProjectDetailPageTemplate = require.resolve(
 exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions
 
-  const result = await graphql(
-    `
-      query {
-        allProject {
-          nodes {
-            slug
-          }
+  const result = await graphql(`
+    query {
+      allProject {
+        nodes {
+          slug
         }
-        allCardPage {
-          nodes {
-            slug
-            filterOn {
-              status
-            }
+      }
+      allCardPage {
+        nodes {
+          slug
+          filterOn {
+            status
           }
         }
-        aboutPages: allGeneralPage(
-          filter: { templateKey: { eq: "AboutPage" } }
-        ) {
-          nodes {
-            slug
-          }
+      }
+      aboutPages: allGeneralPage(filter: { templateKey: { eq: "AboutPage" } }) {
+        nodes {
+          slug
         }
-        contactPages: allGeneralPage(
-          filter: { templateKey: { eq: "ContactPage" } }
-        ) {
-          nodes {
-            slug
-          }
+      }
+      contactPages: allGeneralPage(
+        filter: { templateKey: { eq: "ContactPage" } }
+      ) {
+        nodes {
+          slug
+        }
+      }
+      searchPage: allGeneralPage(
+        filter: { templateKey: { eq: "SearchPage" } }
+      ) {
+        nodes {
+          slug
         }
       }
-    `
-  )
+    }
+  `)
 
   if (result.errors) {
     reporter.panicOnBuild(result.errors)
@@ -159,4 +163,17 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       },
     })
   })
+
+  // results page for site-wide search
+  const { searchPage } = result.data
+  searchPage.nodes.forEach((page) => {
+    const { slug } = page
+    createPage({
+      path: `/${slug}`,
+      component: SearchPageTemplate,
+      context: {
+        slug: slug,
+      },
+    })
+  })
 }
diff --git a/packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx b/packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx
new file mode 100644
index 000000000..9780bae80
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx
@@ -0,0 +1,220 @@
+import React, { Component } from "react"
+import * as JsSearch from "js-search"
+
+class ClientSearch extends Component {
+  state = {
+    isLoading: true,
+    searchResults: [],
+    search: null,
+    isError: false,
+    indexByTitle: false,
+    indexByAuthor: false,
+    termFrequency: true,
+    removeStopWords: false,
+    searchQuery: "",
+    selectedStrategy: "",
+    selectedSanitizer: "",
+  }
+  /**
+   * React lifecycle method that will inject the data into the state.
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.search === null) {
+      const { engine } = nextProps
+      return {
+        indexByTitle: engine.TitleIndex,
+        indexByAuthor: engine.AuthorIndex,
+        termFrequency: engine.SearchByTerm,
+        selectedSanitizer: engine.searchSanitizer,
+        selectedStrategy: engine.indexStrategy,
+      }
+    }
+    return null
+  }
+  async componentDidMount() {
+    this.rebuildIndex()
+  }
+
+  /**
+   * rebuilds the overall index based on the options
+   */
+  rebuildIndex = () => {
+    const {
+      selectedStrategy,
+      selectedSanitizer,
+      removeStopWords,
+      termFrequency,
+      indexByTitle,
+      indexByAuthor,
+    } = this.state
+    //const { books } = this.props
+
+    const dataToSearch = new JsSearch.Search("isbn")
+
+    if (removeStopWords) {
+      dataToSearch.tokenizer = new JsSearch.StopWordsTokenizer(
+        dataToSearch.tokenizer
+      )
+    }
+    /**
+     * defines an indexing strategy for the data
+     * read more about it here https://github.com/bvaughn/js-search#configuring-the-index-strategy
+     */
+    if (selectedStrategy === "All") {
+      dataToSearch.indexStrategy = new JsSearch.AllSubstringsIndexStrategy()
+    }
+    if (selectedStrategy === "Exact match") {
+      dataToSearch.indexStrategy = new JsSearch.ExactWordIndexStrategy()
+    }
+    if (selectedStrategy === "Prefix match") {
+      dataToSearch.indexStrategy = new JsSearch.PrefixIndexStrategy()
+    }
+
+    /**
+     * defines the sanitizer for the search
+     * to prevent some of the words from being excluded
+     */
+    selectedSanitizer === "Case Sensitive"
+      ? (dataToSearch.sanitizer = new JsSearch.CaseSensitiveSanitizer())
+      : (dataToSearch.sanitizer = new JsSearch.LowerCaseSanitizer())
+    termFrequency === true
+      ? (dataToSearch.searchIndex = new JsSearch.TfIdfSearchIndex("isbn"))
+      : (dataToSearch.searchIndex = new JsSearch.UnorderedSearchIndex())
+
+    // sets the index attribute for the data
+    if (indexByTitle) {
+      dataToSearch.addIndex("title")
+    }
+    // sets the index attribute for the data
+    if (indexByAuthor) {
+      dataToSearch.addIndex("author")
+    }
+
+    //dataToSearch.addDocuments(books) // adds the data to be searched
+
+    this.setState({ search: dataToSearch, isLoading: false })
+  }
+  /**
+   * handles the input change and perform a search with js-search
+   * in which the results will be added to the state
+   */
+  searchData = (e) => {
+    const { search } = this.state
+    const queryResult = search.search(e.target.value)
+    this.setState({ searchQuery: e.target.value, searchResults: queryResult })
+  }
+  handleSubmit = (e) => {
+    e.preventDefault()
+  }
+  render() {
+    const { searchResults, searchQuery } = this.state
+    //const { books } = this.props
+    const queryResults = searchResults
+    return (
+      <div>
+        <div style={{ margin: "0 auto" }}>
+          <form onSubmit={this.handleSubmit}>
+            <div style={{ margin: "0 auto" }}>
+              <label htmlFor="Search" style={{ paddingRight: "10px" }}>
+                Enter your search here
+              </label>
+              <input
+                id="Search"
+                value={searchQuery}
+                onChange={this.searchData}
+                placeholder="Enter your search here"
+                style={{ margin: "0 auto", width: "400px" }}
+              />
+            </div>
+          </form>
+          <div>
+            Number of items:
+            {queryResults.length}
+            <table
+              style={{
+                width: "100%",
+                borderCollapse: "collapse",
+                borderRadius: "4px",
+                border: "1px solid #d3d3d3",
+              }}
+            >
+              <thead style={{ border: "1px solid #808080" }}>
+                <tr>
+                  <th
+                    style={{
+                      textAlign: "left",
+                      padding: "5px",
+                      fontSize: "14px",
+                      fontWeight: 600,
+                      borderBottom: "2px solid #d3d3d3",
+                      cursor: "pointer",
+                    }}
+                  >
+                    Book ISBN
+                  </th>
+                  <th
+                    style={{
+                      textAlign: "left",
+                      padding: "5px",
+                      fontSize: "14px",
+                      fontWeight: 600,
+                      borderBottom: "2px solid #d3d3d3",
+                      cursor: "pointer",
+                    }}
+                  >
+                    Book Title
+                  </th>
+                  <th
+                    style={{
+                      textAlign: "left",
+                      padding: "5px",
+                      fontSize: "14px",
+                      fontWeight: 600,
+                      borderBottom: "2px solid #d3d3d3",
+                      cursor: "pointer",
+                    }}
+                  >
+                    Book Author
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {queryResults.map((item) => {
+                  return (
+                    <tr key={`row_${item.isbn}`}>
+                      <td
+                        style={{
+                          fontSize: "14px",
+                          border: "1px solid #d3d3d3",
+                        }}
+                      >
+                        {item.isbn}
+                      </td>
+                      <td
+                        style={{
+                          fontSize: "14px",
+                          border: "1px solid #d3d3d3",
+                        }}
+                      >
+                        {item.title}
+                      </td>
+                      <td
+                        style={{
+                          fontSize: "14px",
+                          border: "1px solid #d3d3d3",
+                        }}
+                      >
+                        {item.author}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+export default ClientSearch
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 0ad8f4c42..52e4ffbd3 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -63,9 +63,29 @@ export const ProjectPage = ({
     }
     return tempFilterOptions
   }
-  const [filterOptions, setFilterOptions] = useState(getTopics(allProjects))
+  const getStatus = (project: CardProps[]): CardProps[] => {
+    let tempStatus = []
+    for (const tempProject of project) {
+      if (tempProject.status) {
+        if (!tempStatus.some(({ value }) => value === tempProject.status)) {
+          tempStatus.push({
+            value: tempProject.status,
+            label: tempProject.status,
+          })
+        }
+      }
+    }
+    return tempStatus
+  }
+  const [filterOptionsTopic, setFilterOptionsTopic] = useState(
+    getTopics(allProjects)
+  )
+  const [filterOptionsStatus, setFilterOptionsStatus] = useState(
+    getStatus(allProjects)
+  )
 
   const ITEMS_PER_PAGE = 6
+  console.log(allProjects)
   const [sortedProjects, setSortedProjects] = useState(allProjects)
   const [displayProjects, setDisplayProjects] = useState(allProjects)
 
@@ -172,7 +192,12 @@ export const ProjectPage = ({
     setHasNext(pageEnd < displayProjects.length)
   }, [list]) // triggered when list is changed
 
-  const [selectedOptions, setSelectedOptions] = useState<MultiValue<any>>([])
+  const [selectedTopicOptions, setSelectedTopicOptions] = useState<
+    MultiValue<any>
+  >([])
+  const [selectedStatusOptions, setSelectedStatusOptions] = useState<
+    MultiValue<any>
+  >([])
 
   useEffect(() => {
     const sortedList = [...allProjects]
@@ -196,8 +221,8 @@ export const ProjectPage = ({
     //2. filter by topic. If there are any filters chosen
     // apply it to filteredProjects
     // or else stick with sortedProjects (which may have been updated by sortOptions) aka the first check
-    if (selectedOptions.length > 0) {
-      const filteredTopics = selectedOptions.map(({ value }) => value)
+    if (selectedTopicOptions.length > 0) {
+      const filteredTopics = selectedTopicOptions.map(({ value }) => value)
       filteredProjects = sortedProjects.filter((project) =>
         project.topics
           .map((topic) => topic.slug)
@@ -207,7 +232,15 @@ export const ProjectPage = ({
     setPageStart(0)
     setPageEnd(ITEMS_PER_PAGE)
 
-    //3. search query
+    // 3. filter by status. If there are any filters chosen
+    // apply it to filteredProjects
+    if (selectedStatusOptions.length > 0) {
+      const filteredStatus = selectedStatusOptions.map(({ value }) => value)
+      filteredProjects = sortedProjects.filter((project) =>
+        filteredStatus.includes(project.status)
+      )
+    }
+    //4. search query
     // if search query is used, we will now apply search results, to filteredProjects
     if (searchQuery.length > 0) {
       for (let i = 0; i < filteredProjects.length; i++) {
@@ -220,12 +253,13 @@ export const ProjectPage = ({
       }
     }
 
-    setFilterOptions(getTopics(filteredProjects))
+    setFilterOptionsTopic(getTopics(filteredProjects))
+    setFilterOptionsStatus(getStatus(filteredProjects))
     //now filteredProjects has gone through all 3 checks
     //ready to update displayProjects
     setDisplayProjects(filteredProjects)
     //setDisplayProjects will trigger an updated display
-  }, [selectedOptions, sortedProjects, searchQuery]) // triggered when list is changed
+  }, [selectedTopicOptions, selectedStatusOptions, sortedProjects, searchQuery]) // triggered when list is changed
 
   const selectStyle = {
     placeholder: (provided) => ({ ...provided, color: "#767676" }),
@@ -255,6 +289,21 @@ export const ProjectPage = ({
               styles={selectStyle}
             />
           </div>
+          <div className="flex-1 min-w-30ch">
+            <label id="filter-label" className="font-bold" htmlFor="filter">
+              Filter by status
+            </label>
+            <Select
+              aria-labelledby="filter-label"
+              inputId="filter"
+              name="filter-select"
+              isMulti={true}
+              value={selectedStatusOptions}
+              onChange={setSelectedStatusOptions}
+              options={filterOptionsStatus}
+              styles={selectStyle}
+            />
+          </div>
           <div className="flex-1 min-w-30ch">
             <label id="filter-label" className="font-bold" htmlFor="filter">
               Filter by topic
@@ -264,9 +313,9 @@ export const ProjectPage = ({
               inputId="filter"
               name="filter-select"
               isMulti={true}
-              value={selectedOptions}
-              onChange={setSelectedOptions}
-              options={filterOptions}
+              value={selectedTopicOptions}
+              onChange={setSelectedTopicOptions}
+              options={filterOptionsTopic}
               styles={selectStyle}
             />
           </div>

From f9cecaed2e6d0d126a2251286eccc26f21c3511a Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 11 Sep 2023 10:54:41 -0400
Subject: [PATCH 05/64] feat: search page

---
 .../src/layouts/SearchPageLayout.tsx          | 177 ++++++++++++++++++
 .../src/layouts/index.tsx                     |   1 +
 .../src/templates/client-search-page.js       |  32 ++++
 3 files changed, 210 insertions(+)
 create mode 100644 packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
 create mode 100644 packages/gatsby-theme-project-portal/src/templates/client-search-page.js

diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
new file mode 100644
index 000000000..1ed4a8a6e
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -0,0 +1,177 @@
+import { Layout } from "./Layout"
+import {
+  CardProps,
+  HeaderWithImage,
+  MarkdownText,
+  ProjectDetailLayoutProps,
+} from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components"
+import React, { FunctionComponent, useEffect, useState } from "react"
+import { isNA } from "../utils"
+import * as JsSearch from "js-search"
+import { SearchBar } from "../components/SearchBar"
+import { ContactProps } from "./ContactPageLayout"
+import { AboutProps } from "./AboutPageLayout"
+
+interface SearchProps {
+  aboutPage: AboutProps
+  contactPage: ContactProps
+
+  data: {
+    site: { siteMetadata: { title } }
+    allProject: {
+      nodes: CardProps[]
+    }
+    generalPage: {
+      pageName: string
+      title: string
+      header: string
+      accessibility: string
+      image: {
+        childImageSharp: {
+          resize: {
+            src: string
+          }
+        }
+      }
+    }
+  }
+}
+
+export const SearchPageLayout: FunctionComponent<SearchProps> = ({
+  aboutPage,
+  contactPage,
+  data,
+}: SearchProps) => {
+  const [searchQuery, setSearchQuery] = useState([])
+  let queryResults = []
+  let search = new JsSearch.Search("slug")
+  search.indexStrategy = new JsSearch.AllSubstringsIndexStrategy()
+  search.sanitizer = new JsSearch.LowerCaseSanitizer()
+  search.addIndex("topicNames")
+  search.addIndex("question")
+  search.addIndex("agency")
+  search.addIndex("title")
+  useEffect(() => {
+    if (searchQuery.length > 0) {
+      console.log(aboutPage)
+      console.log(contactPage)
+      console.log(data.allProject)
+      search.addDocuments(data) // everything to search on
+      let searchResults = search.search(searchQuery)
+      console.log(searchResults)
+      if (searchResults.length > 0) {
+        queryResults = searchResults
+      }
+    }
+  }, [searchQuery])
+
+  return (
+    <Layout
+      activePage="search"
+      title="Search"
+      description="Searching across the site!"
+    >
+      <div style={{ margin: "0 auto" }}>
+        <SearchBar
+          label={"Search"}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+      </div>
+      <div className="container pt-6 overflow-hidden bg-white">
+        Number of items:
+        {queryResults.length}
+        <table
+          style={{
+            width: "100%",
+            borderCollapse: "collapse",
+            borderRadius: "4px",
+            border: "1px solid #d3d3d3",
+          }}
+        >
+          <thead style={{ border: "1px solid #808080" }}>
+            <tr>
+              <th
+                style={{
+                  textAlign: "left",
+                  padding: "5px",
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  borderBottom: "2px solid #d3d3d3",
+                  cursor: "pointer",
+                }}
+              >
+                Book ISBN
+              </th>
+              <th
+                style={{
+                  textAlign: "left",
+                  padding: "5px",
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  borderBottom: "2px solid #d3d3d3",
+                  cursor: "pointer",
+                }}
+              >
+                Book Title
+              </th>
+              <th
+                style={{
+                  textAlign: "left",
+                  padding: "5px",
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  borderBottom: "2px solid #d3d3d3",
+                  cursor: "pointer",
+                }}
+              >
+                Book Author
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {queryResults.map((item) => {
+              return (
+                <tr key={`row_${item.isbn}`}>
+                  <td
+                    style={{
+                      fontSize: "14px",
+                      border: "1px solid #d3d3d3",
+                    }}
+                  >
+                    {item.isbn}
+                  </td>
+                  <td
+                    style={{
+                      fontSize: "14px",
+                      border: "1px solid #d3d3d3",
+                    }}
+                  >
+                    {item.title}
+                  </td>
+                  <td
+                    style={{
+                      fontSize: "14px",
+                      border: "1px solid #d3d3d3",
+                    }}
+                  >
+                    {item.author}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {!isNA(data.generalPage.accessibility) && (
+        <section id="accessibility">
+          <h2 className="text-h3 sm:text-h2 my-6">Accessibility Statement</h2>
+          <MarkdownText
+            className="mb-10 leading-normal text-body lg:text-body"
+            text={data.generalPage.accessibility}
+          />
+        </section>
+      )}
+    </Layout>
+  )
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/index.tsx b/packages/gatsby-theme-project-portal/src/layouts/index.tsx
index 8aefac389..0e162ea76 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/index.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/index.tsx
@@ -4,3 +4,4 @@ export { CardPageLayout } from "./CardPageLayout"
 export { AboutPageLayout } from "./AboutPageLayout"
 export { ContactPageLayout } from "./ContactPageLayout"
 export { ThankYouPageLayout } from "./ThankYouPageLayout"
+export { SearchPageLayout } from "./SearchPageLayout"
diff --git a/packages/gatsby-theme-project-portal/src/templates/client-search-page.js b/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
new file mode 100644
index 000000000..243298fe5
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
@@ -0,0 +1,32 @@
+import { graphql } from "gatsby"
+import { SearchPageLayout } from "../layouts"
+
+export default SearchPageLayout
+
+export const query = graphql`
+  query SearchQuery($slug: String!) {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+    generalPage(slug: { eq: $slug }) {
+      pageName
+      title
+      header
+      accessibility
+      image {
+        childImageSharp {
+          resize(width: 1536) {
+            src
+          }
+        }
+      }
+    }
+    allProject {
+      nodes {
+        ...CardDetails
+      }
+    }
+  }
+`

From 210034ed04c8e137cbe6e2e5951b419395f572cc Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 11 Sep 2023 10:55:12 -0400
Subject: [PATCH 06/64] feat: search modal

todo: remove this and replace with search page
---
 .../src/components/SearchModal.tsx            | 66 ++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
index 85a38d7df..152f54cdc 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
@@ -1,8 +1,70 @@
 import React, { useEffect, useState } from "react"
 import { SearchBar } from "./SearchBar"
+import * as JsSearch from "js-search"
+import { CardProps } from "./Card"
+import { graphql } from "gatsby"
+import { TopicType } from "./Topics"
 
+export interface ModalProps {
+  // Card Details
+  slug: string
+  title: string
+  question: string
+  status: string
+  agency: string
+  topics: TopicType[]
+
+  // Page Details
+  data: {
+    site: { siteMetadata: { title } }
+    generalPage: {
+      pageName: string
+      title: string
+      aims: {
+        title: string
+        text: string
+      }[]
+      faq: {
+        title: string
+        text: string
+      }[]
+    }
+  }
+}
+
+export const query = graphql`
+  fragment CardDetails on Project {
+    slug
+    title
+    question
+    status
+    agency
+    topics {
+      ...TopicDetails
+    }
+    opportunityCloses
+    startDate
+    endDate
+    lastModified
+    created
+  }
+`
 export default function SearchModal() {
-  const [showModal, setShowModal] = useState(false)
+  const [showModal, setShowModal] = React.useState(false)
+  const [searchQuery, setSearchQuery] = useState([])
+
+  let search = new JsSearch.Search("slug")
+
+  useEffect(() => {
+    if (searchQuery.length > 0) {
+      search.addDocuments(filteredProjects)
+      let searchResults = search.search(searchQuery)
+      if (searchResults.length > 0) {
+        filteredProjects = searchResults
+      }
+    }
+    //setDisplayProjects will trigger an updated display
+  }, [searchQuery])
 
   return (
     <>
@@ -23,7 +85,7 @@ export default function SearchModal() {
                 <div className="flex items-center justify-between p-5 border-b border-solid border-slate-200 rounded-t">
                   <SearchBar
                     label={"Search"}
-                    onChange={(e) => console.log(e)}
+                    onChange={(e) => setSearchQuery(e.target.value)}
                   />
                   <button
                     className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"

From 798c87193a52bbec4c91d8b7056182bc4197285f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 14 Sep 2023 15:21:45 -0400
Subject: [PATCH 07/64] feat: add general pages to the search page query

---
 .../src/templates/client-search-page.js            | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/gatsby-theme-project-portal/src/templates/client-search-page.js b/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
index 243298fe5..6e33bcf4c 100644
--- a/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
+++ b/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
@@ -28,5 +28,19 @@ export const query = graphql`
         ...CardDetails
       }
     }
+    allGeneralPage {
+      nodes {
+        slug
+        faq {
+          text
+          title
+        }
+        accessibility
+        aims {
+          text
+          title
+        }
+      }
+    }
   }
 `

From b967280d5114fbba161ef05821ee96c03f6c5fb6 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:45:48 -0400
Subject: [PATCH 08/64] feat: add lunr for search

---
 package.json | 3 ++-
 yarn.lock    | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2f874d495..ec504e141 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "gatsby-plugin-testing": "^0.3.5"
+    "gatsby-plugin-testing": "^0.3.5",
+    "lunr": "^2.3.9"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 45fa8512e..3ce17b1bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16974,6 +16974,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lunr@npm:^2.3.9":
+  version: 2.3.9
+  resolution: "lunr@npm:2.3.9"
+  checksum: 176719e24fcce7d3cf1baccce9dd5633cd8bdc1f41ebe6a180112e5ee99d80373fe2454f5d4624d437e5a8319698ca6837b9950566e15d2cae5f2a543a3db4b8
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -20629,6 +20636,7 @@ __metadata:
     identity-obj-proxy: ^3.0.0
     jest: ^29.5.0
     jest-environment-jsdom: ^29.5.0
+    lunr: ^2.3.9
     pa11y-ci: ^3.0.1
     prettier: ^3.0.0
     prop-types: ^15.8.1

From e5cfe8d74d1b01ce7d4e3a977d93282c8c4e38c3 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:46:20 -0400
Subject: [PATCH 09/64] feat: add search page to node

---
 .../gatsby-node.js                            | 39 +++++++++++++--
 .../src/templates/client-search-page.js       | 47 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index 40b6b8bd0..895e88570 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -63,7 +63,37 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     query {
       allProject {
         nodes {
+          title
+          agency
+          topics {
+            title
+          }
           slug
+          summary
+          statusOfData
+          status
+          startDate
+          requirement
+          question
+          purpose
+          projectTeam {
+            name
+            employer
+          }
+          priorResearch
+          opportunityCloses
+          mainContact {
+            name
+          }
+          fundingInfo
+          expertise
+          faq {
+            text
+            title
+          }
+          deliverable
+          emailContent
+          endDate
         }
       }
       allCardPage {
@@ -105,13 +135,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const projects = allProject.nodes
 
   // Create a page for each Post
-  projects.forEach((project) => {
-    const { slug } = project
+  projects.forEach((node) => {
     createPage({
-      path: `project/${slug}`,
+      path: `project/${node.slug}`,
       component: ProjectDetailPageTemplate,
       context: {
-        slug: slug,
+        slug: node.slug,
+        pagePath: `project/${node.slug}`,
+        projectIs: node,
       },
     })
   })
diff --git a/packages/gatsby-theme-project-portal/src/templates/client-search-page.js b/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
index 6e33bcf4c..eaf0a7621 100644
--- a/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
+++ b/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
@@ -25,21 +25,64 @@ export const query = graphql`
     }
     allProject {
       nodes {
-        ...CardDetails
+        slug
+        question
+        title
+        summary
+        status
+        opportunityCloses
+        startDate
+        endDate
+        lastModified
+        agency
+        topics {
+          ...TopicDetails
+        }
+        deliverable
+        purpose
+        expertise
+        requirement
+        keyDates
+        priorResearch
+        statusOfData
+        fundingInfo
+        emailContent
+        mainContact {
+          name
+          title
+          employer
+          email
+        }
+        projectTeam {
+          name
+          title
+          employer
+          email
+        }
+        faq {
+          text
+          title
+        }
       }
     }
     allGeneralPage {
       nodes {
         slug
+        lede
         faq {
           text
           title
         }
-        accessibility
         aims {
           text
           title
         }
+        title
+      }
+    }
+    allSitePage {
+      nodes {
+        pageContext
       }
     }
   }

From b995af0a6f925552921f65bb0e3b59f9478bf4d6 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:47:49 -0400
Subject: [PATCH 10/64] feat: add modal component into nav

---
 .../src/components/Modal.tsx                  | 36 ++++++++++++++++++
 .../src/components/Navbar.tsx                 | 37 +++++++++++++++++--
 2 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 packages/gatsby-theme-project-portal/src/components/Modal.tsx

diff --git a/packages/gatsby-theme-project-portal/src/components/Modal.tsx b/packages/gatsby-theme-project-portal/src/components/Modal.tsx
new file mode 100644
index 000000000..5f88d1b35
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/Modal.tsx
@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from "react"
+import { createPortal } from "react-dom"
+import { SearchBar } from "./SearchBar"
+import { SearchPageLayout } from "../layouts"
+import { TopicType } from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components"
+
+export interface ModalProps {
+  closeModal
+}
+export const Modal: FunctionComponent<ModalProps> = ({
+  closeModal,
+}: ModalProps) => {
+  return (
+    <>
+      {createPortal(
+        <div className="modal">
+          <div className="fixed inset-0 z-40 w-auto h-auto my-6 mx-auto max-w-3xl max-h-fit">
+            {/*content*/}
+            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+              {/*header*/}
+
+              {/*body*/}
+              <div className="relative p-6 flex-auto"></div>
+              {/*footer*/}
+            </div>
+          </div>
+          <div
+            className="opacity-20 fixed inset-0 z-60 bg-black"
+            onClick={closeModal}
+          ></div>
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 596f60d52..26a031c8a 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from "react"
+import React, { FunctionComponent, useEffect, useState } from "react"
 import { graphql, Link, useStaticQuery } from "gatsby"
 import { FaBars, FaTimes } from "react-icons/fa"
 import { getImage, IGatsbyImageData } from "gatsby-plugin-image"
@@ -8,7 +8,8 @@ import {
 } from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/hooks"
 import { SiteTitle } from "./SiteTitle"
 import { NavbarItem } from "./NavbarItem"
-import SearchModal from "./SearchModal"
+import { ModalWrapper } from "./ModalWrapper"
+import { Modal } from "./Modal"
 
 interface NavbarLayoutProps {
   title: string
@@ -28,6 +29,16 @@ export const NavbarLayout: FunctionComponent<NavbarLayoutProps> = ({
   pages,
 }: NavbarLayoutProps) => {
   const [navbarOpen, setNavbarOpen] = React.useState(false)
+  const [isModalOpen, setModalOpen] = React.useState(false)
+  const openModal = () => {
+    setModalOpen(true)
+  }
+  const closeModal = () => {
+    setModalOpen(false)
+  }
+  useEffect(() => {
+    console.log(isModalOpen)
+  }, [isModalOpen])
   return (
     <>
       <nav
@@ -52,8 +63,26 @@ export const NavbarLayout: FunctionComponent<NavbarLayoutProps> = ({
             >
               <SiteTitle image={image} title={title} />
             </Link>
-            <div className="flex-1 min-w-30ch auto-rows-auto flex flex-col">
-              <SearchModal />
+            <div>
+              <button
+                className="bg-white text-slate-400 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setModalOpen(true)
+                }}
+              >
+                Quick Search
+              </button>
+              {isModalOpen ? (
+                <div>
+                  <Modal closeModal={closeModal}></Modal>
+                  <div
+                    className="fixed opacity-25 inset-0 z-40 bg-black"
+                    onClick={closeModal}
+                  ></div>
+                </div>
+              ) : null}
             </div>
           </div>
           <div

From e92ed20e7e4a3e83bb4489681ff432965c1763cd Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:43:42 -0400
Subject: [PATCH 11/64] refactor: add pagesearch query to the layout component

---
 .../src/layouts/Layout.tsx                    | 128 ++++++-
 .../src/layouts/SearchPageLayout.tsx          | 316 +++++++++---------
 .../src/templates/card-page.js                |   7 +-
 3 files changed, 287 insertions(+), 164 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
index c2dad6f63..bf9409533 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
@@ -1,6 +1,12 @@
 import React, { FunctionComponent, ReactNode } from "react"
 import { graphql } from "gatsby"
-import { Footer, BottomBanner, DevelopmentBanner, Navbar } from "../components"
+import {
+  Footer,
+  BottomBanner,
+  DevelopmentBanner,
+  Navbar,
+  TopicType,
+} from "../components"
 import { ImageDataLike } from "gatsby-plugin-image"
 
 export interface LayoutProps {
@@ -10,6 +16,7 @@ export interface LayoutProps {
     site: {
       siteMetadata: {
         title: string
+        siteUrl: string
       }
     }
     projectPortalConfig: {
@@ -37,6 +44,61 @@ export interface LayoutProps {
         }
       }
     }
+    allProject: {
+      nodes: {
+        slug
+        question
+        title
+        summary
+        status
+        opportunityCloses
+        startDate
+        endDate
+        lastModified
+        agency
+        topics: TopicType[]
+        deliverable
+        purpose
+        expertise
+        requirement
+        keyDates
+        priorResearch
+        statusOfData
+        fundingInfo
+        emailContent
+        mainContact: {
+          name
+          title
+          employer
+          email
+        }
+        projectTeam: {
+          name
+          title
+          employer
+          email
+        }
+        faq: {
+          text
+          title
+        }
+      }
+    }
+    allGeneralPage: {
+      nodes: {
+        slug
+        lede
+        faq: {
+          text
+          title
+        }
+        aims: {
+          text
+          title
+        }
+        title
+      }
+    }
     navbarLogo?: ImageDataLike
     bottomBannerLogo?: ImageDataLike
     footerLogo?: ImageDataLike
@@ -47,19 +109,22 @@ export const Layout: FunctionComponent<LayoutProps> = ({
   path,
   data: {
     site: {
-      siteMetadata: { title: siteTitle },
+      siteMetadata: { title: siteTitle, siteUrl },
     },
     projectPortalConfig: {
       showDevBanner,
       pages,
       staticText: { bottomBanner, footer },
     },
+    allProject,
+    allGeneralPage,
     navbarLogo,
     bottomBannerLogo,
     footerLogo,
   },
   children,
 }) => {
+  const searchNodes = { siteUrl, allProject, allGeneralPage }
   return (
     <div className="w-full mx-0 bg-white border-0 xl:container xl:p-0 xl:mx-auto xl:border-l xl:border-r xl:border-gray-200 flex flex-col min-h-screen">
       {showDevBanner && <DevelopmentBanner />}
@@ -68,6 +133,7 @@ export const Layout: FunctionComponent<LayoutProps> = ({
         image={navbarLogo}
         pages={pages}
         activePage={path}
+        searchNodes={searchNodes}
       />
       <div className="flex-1">{children}</div>
       <BottomBanner
@@ -94,6 +160,7 @@ export const query = graphql`
     site {
       siteMetadata {
         title
+        siteUrl
       }
     }
     projectPortalConfig {
@@ -148,5 +215,62 @@ export const query = graphql`
         gatsbyImageData(height: 64)
       }
     }
+    allProject {
+      nodes {
+        slug
+        question
+        title
+        summary
+        status
+        opportunityCloses
+        startDate
+        endDate
+        lastModified
+        agency
+        topics {
+          ...TopicDetails
+        }
+        deliverable
+        purpose
+        expertise
+        requirement
+        keyDates
+        priorResearch
+        statusOfData
+        fundingInfo
+        emailContent
+        mainContact {
+          name
+          title
+          employer
+          email
+        }
+        projectTeam {
+          name
+          title
+          employer
+          email
+        }
+        faq {
+          text
+          title
+        }
+      }
+    }
+    allGeneralPage {
+      nodes {
+        slug
+        lede
+        faq {
+          text
+          title
+        }
+        aims {
+          text
+          title
+        }
+        title
+      }
+    }
   }
 `
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 1ed4a8a6e..5b0d9c5e4 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -1,177 +1,181 @@
-import { Layout } from "./Layout"
-import {
-  CardProps,
-  HeaderWithImage,
-  MarkdownText,
-  ProjectDetailLayoutProps,
-} from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components"
 import React, { FunctionComponent, useEffect, useState } from "react"
-import { isNA } from "../utils"
-import * as JsSearch from "js-search"
+import lunr from "lunr"
 import { SearchBar } from "../components/SearchBar"
-import { ContactProps } from "./ContactPageLayout"
-import { AboutProps } from "./AboutPageLayout"
+import { isNull } from "lodash"
 
-interface SearchProps {
-  aboutPage: AboutProps
-  contactPage: ContactProps
-
-  data: {
-    site: { siteMetadata: { title } }
-    allProject: {
-      nodes: CardProps[]
-    }
-    generalPage: {
-      pageName: string
-      title: string
-      header: string
-      accessibility: string
-      image: {
-        childImageSharp: {
-          resize: {
-            src: string
-          }
-        }
-      }
-    }
-  }
+export interface SearchProps {
+  searchNodes
 }
 
 export const SearchPageLayout: FunctionComponent<SearchProps> = ({
-  aboutPage,
-  contactPage,
-  data,
+  searchNodes,
 }: SearchProps) => {
+  const siteUrl = searchNodes.siteUrl
   const [searchQuery, setSearchQuery] = useState([])
-  let queryResults = []
-  let search = new JsSearch.Search("slug")
-  search.indexStrategy = new JsSearch.AllSubstringsIndexStrategy()
-  search.sanitizer = new JsSearch.LowerCaseSanitizer()
-  search.addIndex("topicNames")
-  search.addIndex("question")
-  search.addIndex("agency")
-  search.addIndex("title")
+  const [queryResults, setQueryResults] = useState([])
+
+  let documents = []
+
+  Object.keys(searchNodes).forEach((page) => {
+    if (page === "siteUrl") {
+      return
+    } else {
+      if (page === "allProject") {
+        searchNodes[page].nodes.forEach((node) => {
+          if (!node.slug.includes("/")) {
+            node.slug = `project/${node.slug}`
+          }
+        })
+      }
+      searchNodes[page].nodes.forEach((node) => {
+        const newItem = Object.values(node).map((field) => {
+          if (isNull(field)) {
+            return null
+          }
+
+          if (typeof field === "object") {
+            return Object.values(field)
+              .filter((value) => !isNull(value))
+              .map((value) =>
+                typeof value === "string"
+                  ? value
+                  : Object.values(value)
+                      .filter((k) => !isNull(k))
+                      .join(" ")
+              )
+              .join(" ")
+          } else {
+            return field
+          }
+        })
+
+        Object.keys(node).forEach((page, i) => {
+          node[page] = newItem[i]
+        })
+        documents.push(node)
+      })
+    }
+  })
+
+  let db = documents.reduce(function (acc, document) {
+    acc[document.slug] = document
+    return acc
+  }, {})
+
+  let idx = lunr(function () {
+    this.ref("slug") // identifier
+    // fields to search
+    this.field("slug")
+    this.field("faq")
+    this.field("aims")
+    this.field("lede")
+    this.field("title")
+    this.field("question")
+    this.field("status")
+    this.field("agency")
+    this.field("topics")
+    this.field("mainContact")
+    this.field("summary")
+    this.field("status")
+    this.field("purpose")
+    this.field("emailContent")
+    this.field("projectTeam")
+    this.field("expertise")
+    this.field("requirement")
+
+    // allow access to the position of the found word in the field
+    this.metadataWhitelist = ["position"]
+    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
+     we have 'about' as one of the slugs, which spurred this decision
+    We can implement our own stopWordFilter:
+    var idx = lunr(function () {
+      // normal index definition
+      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
+       this.pipeline.remove(lunr.stopWordFilter)
+    })
+     */
+    this.pipeline.remove(lunr.stopWordFilter)
+
+    documents.forEach(function (doc) {
+      this.add(doc)
+    }, this)
+  })
+
   useEffect(() => {
     if (searchQuery.length > 0) {
-      console.log(aboutPage)
-      console.log(contactPage)
-      console.log(data.allProject)
-      search.addDocuments(data) // everything to search on
-      let searchResults = search.search(searchQuery)
-      console.log(searchResults)
-      if (searchResults.length > 0) {
-        queryResults = searchResults
-      }
+      let searchResults = idx.search(searchQuery)
+      let results = []
+      searchResults.forEach(function (result) {
+        results.push(db[result.ref])
+      })
+      setQueryResults(searchResults)
+    } else {
+      setQueryResults([])
     }
   }, [searchQuery])
-
+  //const meta = useSiteMetadata()
   return (
-    <Layout
-      activePage="search"
-      title="Search"
-      description="Searching across the site!"
-    >
-      <div style={{ margin: "0 auto" }}>
+    <div className="flex flex-col items-center justify-center align-middle text-center px-2">
+      <div className="container mx-auto my-2 border-b-4 border-primary">
         <SearchBar
           label={"Search"}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
+        <div className=" pt-2">
+          Number of found pages:
+          {queryResults.length}
+        </div>
       </div>
-      <div className="container pt-6 overflow-hidden bg-white">
-        Number of items:
-        {queryResults.length}
-        <table
-          style={{
-            width: "100%",
-            borderCollapse: "collapse",
-            borderRadius: "4px",
-            border: "1px solid #d3d3d3",
-          }}
-        >
-          <thead style={{ border: "1px solid #808080" }}>
-            <tr>
-              <th
-                style={{
-                  textAlign: "left",
-                  padding: "5px",
-                  fontSize: "14px",
-                  fontWeight: 600,
-                  borderBottom: "2px solid #d3d3d3",
-                  cursor: "pointer",
-                }}
-              >
-                Book ISBN
-              </th>
-              <th
-                style={{
-                  textAlign: "left",
-                  padding: "5px",
-                  fontSize: "14px",
-                  fontWeight: 600,
-                  borderBottom: "2px solid #d3d3d3",
-                  cursor: "pointer",
-                }}
-              >
-                Book Title
-              </th>
-              <th
-                style={{
-                  textAlign: "left",
-                  padding: "5px",
-                  fontSize: "14px",
-                  fontWeight: 600,
-                  borderBottom: "2px solid #d3d3d3",
-                  cursor: "pointer",
-                }}
-              >
-                Book Author
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {queryResults.map((item) => {
-              return (
-                <tr key={`row_${item.isbn}`}>
-                  <td
-                    style={{
-                      fontSize: "14px",
-                      border: "1px solid #d3d3d3",
-                    }}
-                  >
-                    {item.isbn}
-                  </td>
-                  <td
-                    style={{
-                      fontSize: "14px",
-                      border: "1px solid #d3d3d3",
-                    }}
-                  >
-                    {item.title}
-                  </td>
-                  <td
-                    style={{
-                      fontSize: "14px",
-                      border: "1px solid #d3d3d3",
-                    }}
-                  >
-                    {item.author}
-                  </td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </div>
 
-      {!isNA(data.generalPage.accessibility) && (
-        <section id="accessibility">
-          <h2 className="text-h3 sm:text-h2 my-6">Accessibility Statement</h2>
-          <MarkdownText
-            className="mb-10 leading-normal text-body lg:text-body"
-            text={data.generalPage.accessibility}
-          />
-        </section>
-      )}
-    </Layout>
+      <article className="container py-6 mx-auto">
+        <div className="grid grid-cols-1 mx-4 xl:mx-6 gap-4 justify-self-center">
+          {queryResults.map((result) => {
+            const fields = new Set<string>()
+            Object.keys(result.matchData.metadata).forEach((term) => {
+              Object.keys(result.matchData.metadata[term]).forEach((field) => {
+                fields.add(field)
+              })
+            })
+
+            const found = Array.from(fields).map((field, index) => (
+              <li
+                key={index}
+                className="inline mx-px px-3 py-1 mt-1 text-tag whitespace-nowrap font-semibold mr-2 bg-topics"
+              >
+                {field}
+              </li>
+            ))
+            const item = (
+              <React.Fragment key={result.ref}>
+                <div className="px-2 py-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-md h-full flex flex-col">
+                  <h2 className="capitalize">
+                    {db[result.ref].question || db[result.ref].slug}
+                  </h2>
+                  <ul className="mt-4">
+                    <h2 className="font-sans text-black text-tag mb-1 font-extrabold">
+                      Match found in:
+                    </h2>
+                    {found}
+                  </ul>
+                  <h2 className="mt-4">
+                    <a className="btn-wide" href={`${siteUrl}/${result.ref}`}>
+                      View Page
+                    </a>
+                  </h2>
+                </div>
+              </React.Fragment>
+            )
+            return item
+          })}
+        </div>
+        <div className="">
+          {queryResults.length == 0 && (
+            <section>
+              <h2>No Results</h2>
+            </section>
+          )}
+        </div>
+      </article>
+    </div>
   )
 }
diff --git a/packages/gatsby-theme-project-portal/src/templates/card-page.js b/packages/gatsby-theme-project-portal/src/templates/card-page.js
index 5465e1b39..a7cc042b5 100644
--- a/packages/gatsby-theme-project-portal/src/templates/card-page.js
+++ b/packages/gatsby-theme-project-portal/src/templates/card-page.js
@@ -5,7 +5,7 @@ export default CardPageLayout
 export { Head } from "../hooks"
 
 export const query = graphql`
-  query CardPageQuery($slug: String!, $statusFilter: [String]) {
+  query CardPageQuery($slug: String!) {
     ...HeadData
     ...LayoutData
     page: cardPage(slug: { eq: $slug }) {
@@ -21,10 +21,5 @@ export const query = graphql`
         ...HeaderWithImageBackground
       }
     }
-    allProject(filter: { status: { in: $statusFilter } }) {
-      nodes {
-        ...CardDetails
-      }
-    }
   }
 `

From 6e538926918e57bd494e0596ac36c118839a751a Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:44:33 -0400
Subject: [PATCH 12/64] feat: add searchLayout to Modal

---
 .../src/components/Modal.tsx                   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/Modal.tsx b/packages/gatsby-theme-project-portal/src/components/Modal.tsx
index 5f88d1b35..3558d3282 100644
--- a/packages/gatsby-theme-project-portal/src/components/Modal.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Modal.tsx
@@ -1,25 +1,27 @@
 import React, { FunctionComponent } from "react"
 import { createPortal } from "react-dom"
-import { SearchBar } from "./SearchBar"
 import { SearchPageLayout } from "../layouts"
-import { TopicType } from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components"
 
 export interface ModalProps {
   closeModal
+  data
 }
 export const Modal: FunctionComponent<ModalProps> = ({
   closeModal,
+  data,
 }: ModalProps) => {
   return (
     <>
       {createPortal(
         <div className="modal">
-          <div className="fixed inset-0 z-40 w-auto h-auto my-6 mx-auto max-w-3xl max-h-fit">
-            {/*content*/}
-            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-              {/*header*/}
-
-              {/*body*/}
+          <div
+            className="fixed inset-0 z-40 w-auto my-6 mx-auto max-w-3xl max-h-fit"
+            onClick={(e) => {
+              e.stopPropagation()
+            }}
+          >
+            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none max-h-screen overflow-y-auto">
+              <SearchPageLayout searchNodes={data} />
               <div className="relative p-6 flex-auto"></div>
               {/*footer*/}
             </div>

From 3da299848e3d943915dbc96383ffb16b0bf7337f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:45:17 -0400
Subject: [PATCH 13/64] refactor: cleanup console logs, move modal to navbar
 items

---
 .../gatsby-node.js                            |   7 +-
 .../src/components/Navbar.tsx                 |  36 +++---
 .../src/components/ProjectPage.tsx            |   1 -
 .../src/components/SearchModal.tsx            | 118 ------------------
 4 files changed, 23 insertions(+), 139 deletions(-)
 delete mode 100644 packages/gatsby-theme-project-portal/src/components/SearchModal.tsx

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index 895e88570..11e86e530 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -11,6 +11,9 @@ const AboutPageTemplate = require.resolve(`./src/templates/about-page`)
 const ContactPageTemplate = require.resolve(`./src/templates/contact-page`)
 const ThankYouPageTemplate = require.resolve(`./src/templates/thank-you-page`)
 const SearchPageTemplate = require.resolve(`./src/templates/client-search-page`)
+const ProjectDetailPageTemplate = require.resolve(
+  `./src/templates/project-detail-page`
+)
 const fs = require("fs")
 
 exports.onPreBootstrap = ({ reporter }, themeOptions) => {
@@ -52,10 +55,6 @@ exports.sourceNodes = ({ actions, createContentDigest }, themeOptions) => {
   })
 }
 
-const ProjectDetailPageTemplate = require.resolve(
-  `./src/templates/project-detail-page`
-)
-
 exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions
 
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 0d6139d83..f5aa48316 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -3,6 +3,7 @@ import { Link } from "gatsby"
 import { FaBars, FaTimes } from "react-icons/fa"
 import { ImageDataLike } from "gatsby-plugin-image"
 import { SiteTitle, NavbarItem } from "."
+import { Modal } from "./Modal"
 
 interface NavbarProps {
   title: string
@@ -13,6 +14,7 @@ interface NavbarProps {
     link: string
     show: boolean
   }[]
+  searchNodes
 }
 
 export const Navbar: FunctionComponent<NavbarProps> = ({
@@ -20,6 +22,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
   activePage,
   image,
   pages,
+  searchNodes,
 }: NavbarProps) => {
   const [navbarOpen, setNavbarOpen] = React.useState(false)
   const [isModalOpen, setModalOpen] = React.useState(false)
@@ -29,9 +32,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
   const closeModal = () => {
     setModalOpen(false)
   }
-  useEffect(() => {
-    console.log(isModalOpen)
-  }, [isModalOpen])
+
   return (
     <>
       <nav
@@ -56,18 +57,6 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
             >
               <SiteTitle image={image} title={title} />
             </Link>
-            <div>
-              <button
-                className="bg-white text-slate-400 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setModalOpen(true)
-                }}
-              >
-                Quick Search
-              </button>
-            </div>
           </div>
           <div
             className={
@@ -76,7 +65,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
             }
             id="example-navbar-danger"
           >
-            <ul className="flex flex-col list-none xl:flex-row xl:ml-auto">
+            <ul className="flex flex-col items-center justify-center list-none xl:flex-row xl:ml-auto">
               {pages.map(({ name, link, show }, i) =>
                 show ? (
                   <Link
@@ -90,6 +79,21 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
                   ""
                 )
               )}
+              <div>
+                <button
+                  className="bg-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setModalOpen(true)
+                  }}
+                >
+                  Quick Search
+                </button>
+              </div>
+              {isModalOpen ? (
+                <Modal closeModal={closeModal} data={searchNodes} />
+              ) : null}
             </ul>
           </div>
         </div>
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 45654b02c..11525be0a 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -86,7 +86,6 @@ export const ProjectPage = ({
   )
 
   const ITEMS_PER_PAGE = 6
-  console.log(allProjects)
   const [sortedProjects, setSortedProjects] = useState(allProjects)
   const [displayProjects, setDisplayProjects] = useState(allProjects)
 
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
deleted file mode 100644
index 152f54cdc..000000000
--- a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { useEffect, useState } from "react"
-import { SearchBar } from "./SearchBar"
-import * as JsSearch from "js-search"
-import { CardProps } from "./Card"
-import { graphql } from "gatsby"
-import { TopicType } from "./Topics"
-
-export interface ModalProps {
-  // Card Details
-  slug: string
-  title: string
-  question: string
-  status: string
-  agency: string
-  topics: TopicType[]
-
-  // Page Details
-  data: {
-    site: { siteMetadata: { title } }
-    generalPage: {
-      pageName: string
-      title: string
-      aims: {
-        title: string
-        text: string
-      }[]
-      faq: {
-        title: string
-        text: string
-      }[]
-    }
-  }
-}
-
-export const query = graphql`
-  fragment CardDetails on Project {
-    slug
-    title
-    question
-    status
-    agency
-    topics {
-      ...TopicDetails
-    }
-    opportunityCloses
-    startDate
-    endDate
-    lastModified
-    created
-  }
-`
-export default function SearchModal() {
-  const [showModal, setShowModal] = React.useState(false)
-  const [searchQuery, setSearchQuery] = useState([])
-
-  let search = new JsSearch.Search("slug")
-
-  useEffect(() => {
-    if (searchQuery.length > 0) {
-      search.addDocuments(filteredProjects)
-      let searchResults = search.search(searchQuery)
-      if (searchResults.length > 0) {
-        filteredProjects = searchResults
-      }
-    }
-    //setDisplayProjects will trigger an updated display
-  }, [searchQuery])
-
-  return (
-    <>
-      <button
-        className="bg-white text-slate-400 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-        type="button"
-        onClick={() => setShowModal(true)}
-      >
-        Quick Search...
-      </button>
-      {showModal ? (
-        <>
-          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
-            <div className="relative w-auto my-6 mx-auto max-w-3xl">
-              {/*content*/}
-              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-                {/*header*/}
-                <div className="flex items-center justify-between p-5 border-b border-solid border-slate-200 rounded-t">
-                  <SearchBar
-                    label={"Search"}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                  />
-                  <button
-                    className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
-                    onClick={() => setShowModal(false)}
-                  >
-                    <span className="text-slate-400 h-6 w-6 text-2xl block outline-none focus:outline-none">
-                      ×
-                    </span>
-                  </button>
-                </div>
-                {/*body*/}
-                <div className="relative p-6 flex-auto">
-                  <p className="my-4 text-slate-500 text-lg leading-relaxed">
-                    I always felt like I could do anything. That’s the main
-                    thing people are controlled by! Thoughts- their perception
-                    of themselves! They're slowed down by their perception of
-                    themselves. If you're taught you can’t do anything, you
-                    won’t do anything. I was taught I could do everything.
-                  </p>
-                </div>
-                {/*footer*/}
-              </div>
-            </div>
-          </div>
-          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
-        </>
-      ) : null}
-    </>
-  )
-}

From a3d5566f17fae256f8e9d91d99edceb0b513fb6f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:53:02 -0400
Subject: [PATCH 14/64] refactor: search bar takes a custom placeholder

---
 .../src/components/ProjectPage.tsx                |  1 +
 .../src/components/SearchBar.tsx                  | 15 +++++++++++----
 .../src/layouts/SearchPageLayout.tsx              |  1 +
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 11525be0a..dd6b5a565 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -323,6 +323,7 @@ export const ProjectPage = ({
           <div className="flex-1 min-w-30ch auto-rows-auto flex flex-col">
             <SearchBar
               label={"Search"}
+              placeholder="Type to filter posts..."
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
index ed9279ded..800fc7b47 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
@@ -1,13 +1,20 @@
-import React, {ChangeEventHandler, Dispatch, FunctionComponent, SetStateAction} from "react"
+import React, {
+  ChangeEventHandler,
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+} from "react"
 
 interface SearchBarProps {
   label: string
-  onChange:  any
+  onChange: any
+  placeholder: string
 }
 
 export const SearchBar: FunctionComponent<SearchBarProps> = ({
   label,
   onChange,
+  placeholder,
 }) => {
   return (
     <>
@@ -16,10 +23,10 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({
       </label>
       <input
         className="rounded border-gray-300 hover:border-gray-400"
-        style={{height: "62%"}}
+        style={{ height: "62%" }}
         type="text"
         aria-label="Search"
-        placeholder="Type to filter posts..."
+        placeholder={placeholder}
         onChange={onChange}
       />
     </>
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 5b0d9c5e4..563a2edf6 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -119,6 +119,7 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
       <div className="container mx-auto my-2 border-b-4 border-primary">
         <SearchBar
           label={"Search"}
+          placeholder={"Type to search pages..."}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
         <div className=" pt-2">

From 213b7d73ee0a82c6e9264240420789714aa578af Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:55:40 -0400
Subject: [PATCH 15/64] style: match card styling

---
 .../src/layouts/SearchPageLayout.tsx                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 563a2edf6..97048f892 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -158,7 +158,7 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
                     </h2>
                     {found}
                   </ul>
-                  <h2 className="mt-4">
+                  <h2 className="pt-3 mt-4 border-t-2 border-solid">
                     <a className="btn-wide" href={`${siteUrl}/${result.ref}`}>
                       View Page
                     </a>

From 7dbf0aa6a61c658c8a203e6c9e1b2c0c404fd18b Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:07:42 -0400
Subject: [PATCH 16/64] feat: when both navbar and modal are open, add modal
 cover to the navbar items

looks strange on desktop
---
 .idea/prettier.xml                                         | 1 -
 .../gatsby-theme-project-portal/src/components/Navbar.tsx  | 7 +++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.idea/prettier.xml b/.idea/prettier.xml
index 727b8b533..8004cebd9 100644
--- a/.idea/prettier.xml
+++ b/.idea/prettier.xml
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="PrettierConfiguration">
-    <option name="myRunOnSave" value="true" />
     <option name="myRunOnReformat" value="true" />
   </component>
 </project>
\ No newline at end of file
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index f5aa48316..4bc08702d 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -65,6 +65,13 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
             }
             id="example-navbar-danger"
           >
+            {(isModalOpen && navbarOpen) && (
+              <div
+                className="opacity-20 fixed inset-0 z-60 bg-black"
+                onClick={closeModal}
+              ></div>
+            )}
+
             <ul className="flex flex-col items-center justify-center list-none xl:flex-row xl:ml-auto">
               {pages.map(({ name, link, show }, i) =>
                 show ? (

From 09cf952be680a13d6d45216e537436e8e9f96c24 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:11:39 -0400
Subject: [PATCH 17/64] refactor: finish removing search page

---
 .../gatsby-theme-project-portal/gatsby-node.js     | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index 73862a8fc..df7ca6816 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -5,7 +5,6 @@ const {
   contactTypeDefs,
   pageTypeDefs,
 } = require(`./utils/types`)
-const SearchPageTemplate = require.resolve(`./src/templates/client-search-page`)
 const fs = require("fs")
 
 exports.onPreBootstrap = ({ reporter }, themeOptions) => {
@@ -179,17 +178,4 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       },
     })
   })
-
-  // results page for site-wide search
-  const { searchPage } = result.data
-  searchPage.nodes.forEach((page) => {
-    const { slug } = page
-    createPage({
-      path: `/${slug}`,
-      component: SearchPageTemplate,
-      context: {
-        slug: slug,
-      },
-    })
-  })
 }

From 2cf14dc37d674afe11776c8f95f61bdc96924a49 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:46:10 -0400
Subject: [PATCH 18/64] refactor: clean up old sitesearch page files

---
 .../example-site/content/page/search.json     |   6 -
 .../src/components/ClientSearch.tsx           | 220 ------------------
 .../src/components/Navbar.tsx                 |   4 +-
 .../src/layouts/index.tsx                     |   1 -
 .../src/templates/client-search-page.js       |  89 -------
 5 files changed, 2 insertions(+), 318 deletions(-)
 delete mode 100644 packages/example-site/content/page/search.json
 delete mode 100644 packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx
 delete mode 100644 packages/gatsby-theme-project-portal/src/templates/client-search-page.js

diff --git a/packages/example-site/content/page/search.json b/packages/example-site/content/page/search.json
deleted file mode 100644
index e6493579a..000000000
--- a/packages/example-site/content/page/search.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "templateKey": "SearchPage",
-  "header": "Search for a Page",
-  "accessibility": "We are committed to making the Research Partnerships Portal accessible for all visitors, and we welcome your feedback on the site. If you encounter any accessibility barriers while using the Portal, please contact Jenna Wallace (email: [jenna.wallace@sanantonio.gov](mailto:jenna.wallace@sanantonio.gov), office phone number: 210-207-7930) for assistance.\n\nWe are currently working to make the Research Partnerships Portal fully compliant with requirements in the Web Content Accessibility Guidelines’ A and AA standard. Our final steps to meet WCAG 2.1 A and AA criteria are to fulfill 2.4.2 Page Titled, which will make pages easier to differentiate for screen reader users, 2.5.3 Label in Name, which will make project cards more descriptive for screen reader users, and 2.4.5 Multiple Ways, which will make it easier for all users to find the content most relevant to them.\nFor more detailed descriptions of how the Research Partnerships Portal meets WCAG criteria, please see our full [Accessibility Conformance Report](https://drive.google.com/file/d/1C9ohi1t6N2yFsaVW_xcKsexflZymh_82/view).",
-  "image": "about.jpg"
-}
diff --git a/packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx b/packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx
deleted file mode 100644
index 9780bae80..000000000
--- a/packages/gatsby-theme-project-portal/src/components/ClientSearch.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import React, { Component } from "react"
-import * as JsSearch from "js-search"
-
-class ClientSearch extends Component {
-  state = {
-    isLoading: true,
-    searchResults: [],
-    search: null,
-    isError: false,
-    indexByTitle: false,
-    indexByAuthor: false,
-    termFrequency: true,
-    removeStopWords: false,
-    searchQuery: "",
-    selectedStrategy: "",
-    selectedSanitizer: "",
-  }
-  /**
-   * React lifecycle method that will inject the data into the state.
-   */
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.search === null) {
-      const { engine } = nextProps
-      return {
-        indexByTitle: engine.TitleIndex,
-        indexByAuthor: engine.AuthorIndex,
-        termFrequency: engine.SearchByTerm,
-        selectedSanitizer: engine.searchSanitizer,
-        selectedStrategy: engine.indexStrategy,
-      }
-    }
-    return null
-  }
-  async componentDidMount() {
-    this.rebuildIndex()
-  }
-
-  /**
-   * rebuilds the overall index based on the options
-   */
-  rebuildIndex = () => {
-    const {
-      selectedStrategy,
-      selectedSanitizer,
-      removeStopWords,
-      termFrequency,
-      indexByTitle,
-      indexByAuthor,
-    } = this.state
-    //const { books } = this.props
-
-    const dataToSearch = new JsSearch.Search("isbn")
-
-    if (removeStopWords) {
-      dataToSearch.tokenizer = new JsSearch.StopWordsTokenizer(
-        dataToSearch.tokenizer
-      )
-    }
-    /**
-     * defines an indexing strategy for the data
-     * read more about it here https://github.com/bvaughn/js-search#configuring-the-index-strategy
-     */
-    if (selectedStrategy === "All") {
-      dataToSearch.indexStrategy = new JsSearch.AllSubstringsIndexStrategy()
-    }
-    if (selectedStrategy === "Exact match") {
-      dataToSearch.indexStrategy = new JsSearch.ExactWordIndexStrategy()
-    }
-    if (selectedStrategy === "Prefix match") {
-      dataToSearch.indexStrategy = new JsSearch.PrefixIndexStrategy()
-    }
-
-    /**
-     * defines the sanitizer for the search
-     * to prevent some of the words from being excluded
-     */
-    selectedSanitizer === "Case Sensitive"
-      ? (dataToSearch.sanitizer = new JsSearch.CaseSensitiveSanitizer())
-      : (dataToSearch.sanitizer = new JsSearch.LowerCaseSanitizer())
-    termFrequency === true
-      ? (dataToSearch.searchIndex = new JsSearch.TfIdfSearchIndex("isbn"))
-      : (dataToSearch.searchIndex = new JsSearch.UnorderedSearchIndex())
-
-    // sets the index attribute for the data
-    if (indexByTitle) {
-      dataToSearch.addIndex("title")
-    }
-    // sets the index attribute for the data
-    if (indexByAuthor) {
-      dataToSearch.addIndex("author")
-    }
-
-    //dataToSearch.addDocuments(books) // adds the data to be searched
-
-    this.setState({ search: dataToSearch, isLoading: false })
-  }
-  /**
-   * handles the input change and perform a search with js-search
-   * in which the results will be added to the state
-   */
-  searchData = (e) => {
-    const { search } = this.state
-    const queryResult = search.search(e.target.value)
-    this.setState({ searchQuery: e.target.value, searchResults: queryResult })
-  }
-  handleSubmit = (e) => {
-    e.preventDefault()
-  }
-  render() {
-    const { searchResults, searchQuery } = this.state
-    //const { books } = this.props
-    const queryResults = searchResults
-    return (
-      <div>
-        <div style={{ margin: "0 auto" }}>
-          <form onSubmit={this.handleSubmit}>
-            <div style={{ margin: "0 auto" }}>
-              <label htmlFor="Search" style={{ paddingRight: "10px" }}>
-                Enter your search here
-              </label>
-              <input
-                id="Search"
-                value={searchQuery}
-                onChange={this.searchData}
-                placeholder="Enter your search here"
-                style={{ margin: "0 auto", width: "400px" }}
-              />
-            </div>
-          </form>
-          <div>
-            Number of items:
-            {queryResults.length}
-            <table
-              style={{
-                width: "100%",
-                borderCollapse: "collapse",
-                borderRadius: "4px",
-                border: "1px solid #d3d3d3",
-              }}
-            >
-              <thead style={{ border: "1px solid #808080" }}>
-                <tr>
-                  <th
-                    style={{
-                      textAlign: "left",
-                      padding: "5px",
-                      fontSize: "14px",
-                      fontWeight: 600,
-                      borderBottom: "2px solid #d3d3d3",
-                      cursor: "pointer",
-                    }}
-                  >
-                    Book ISBN
-                  </th>
-                  <th
-                    style={{
-                      textAlign: "left",
-                      padding: "5px",
-                      fontSize: "14px",
-                      fontWeight: 600,
-                      borderBottom: "2px solid #d3d3d3",
-                      cursor: "pointer",
-                    }}
-                  >
-                    Book Title
-                  </th>
-                  <th
-                    style={{
-                      textAlign: "left",
-                      padding: "5px",
-                      fontSize: "14px",
-                      fontWeight: 600,
-                      borderBottom: "2px solid #d3d3d3",
-                      cursor: "pointer",
-                    }}
-                  >
-                    Book Author
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {queryResults.map((item) => {
-                  return (
-                    <tr key={`row_${item.isbn}`}>
-                      <td
-                        style={{
-                          fontSize: "14px",
-                          border: "1px solid #d3d3d3",
-                        }}
-                      >
-                        {item.isbn}
-                      </td>
-                      <td
-                        style={{
-                          fontSize: "14px",
-                          border: "1px solid #d3d3d3",
-                        }}
-                      >
-                        {item.title}
-                      </td>
-                      <td
-                        style={{
-                          fontSize: "14px",
-                          border: "1px solid #d3d3d3",
-                        }}
-                      >
-                        {item.author}
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-export default ClientSearch
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 4bc08702d..838777ebb 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect } from "react"
+import React, { FunctionComponent } from "react"
 import { Link } from "gatsby"
 import { FaBars, FaTimes } from "react-icons/fa"
 import { ImageDataLike } from "gatsby-plugin-image"
@@ -65,7 +65,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
             }
             id="example-navbar-danger"
           >
-            {(isModalOpen && navbarOpen) && (
+            {isModalOpen && navbarOpen && (
               <div
                 className="opacity-20 fixed inset-0 z-60 bg-black"
                 onClick={closeModal}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/index.tsx b/packages/gatsby-theme-project-portal/src/layouts/index.tsx
index ba41bd287..15d4ae3a2 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/index.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/index.tsx
@@ -5,4 +5,3 @@ export { CardPageLayout } from "./CardPageLayout"
 export { AboutPageLayout } from "./AboutPageLayout"
 export { ContactPageLayout } from "./ContactPageLayout"
 export { ThankYouPageLayout } from "./ThankYouPageLayout"
-export { SearchPageLayout } from "./SearchPageLayout"
diff --git a/packages/gatsby-theme-project-portal/src/templates/client-search-page.js b/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
deleted file mode 100644
index eaf0a7621..000000000
--- a/packages/gatsby-theme-project-portal/src/templates/client-search-page.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { graphql } from "gatsby"
-import { SearchPageLayout } from "../layouts"
-
-export default SearchPageLayout
-
-export const query = graphql`
-  query SearchQuery($slug: String!) {
-    site {
-      siteMetadata {
-        title
-      }
-    }
-    generalPage(slug: { eq: $slug }) {
-      pageName
-      title
-      header
-      accessibility
-      image {
-        childImageSharp {
-          resize(width: 1536) {
-            src
-          }
-        }
-      }
-    }
-    allProject {
-      nodes {
-        slug
-        question
-        title
-        summary
-        status
-        opportunityCloses
-        startDate
-        endDate
-        lastModified
-        agency
-        topics {
-          ...TopicDetails
-        }
-        deliverable
-        purpose
-        expertise
-        requirement
-        keyDates
-        priorResearch
-        statusOfData
-        fundingInfo
-        emailContent
-        mainContact {
-          name
-          title
-          employer
-          email
-        }
-        projectTeam {
-          name
-          title
-          employer
-          email
-        }
-        faq {
-          text
-          title
-        }
-      }
-    }
-    allGeneralPage {
-      nodes {
-        slug
-        lede
-        faq {
-          text
-          title
-        }
-        aims {
-          text
-          title
-        }
-        title
-      }
-    }
-    allSitePage {
-      nodes {
-        pageContext
-      }
-    }
-  }
-`

From 582d9f87bad1284609bdbd9a18a64c98cb006716 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 11 Oct 2023 16:24:47 -0400
Subject: [PATCH 19/64] fix: removed duplicate query in the card layout

---
 .../src/layouts/CardPageLayout.tsx                         | 7 +------
 yarn.lock                                                  | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx
index ffa588fc1..c53ca37b2 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx
@@ -46,7 +46,7 @@ export const CardPageLayout: FunctionComponent<CardPageLayoutProps> = ({
 export default CardPageLayout
 
 export const query = graphql`
-  query CardPageQuery($slug: String!, $statusFilter: [String]) {
+  query CardPageQuery($slug: String!) {
     ...HeadData
     ...LayoutData
     page: cardPage(slug: { eq: $slug }) {
@@ -62,10 +62,5 @@ export const query = graphql`
         ...HeaderWithImageBackground
       }
     }
-    allProject(filter: { status: { in: $statusFilter } }) {
-      nodes {
-        ...CardDetails
-      }
-    }
   }
 `
diff --git a/yarn.lock b/yarn.lock
index 1ae689f7a..0c1101eee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22379,9 +22379,9 @@ __metadata:
     babel-preset-gatsby: ^3.12.0
     gatsby-plugin-testing: ^0.3.5
     identity-obj-proxy: ^3.0.0
-    lunr: ^2.3.9
     jest: ^29.7.0
     jest-environment-jsdom: ^29.7.0
+    lunr: ^2.3.9
     pa11y-ci: ^3.0.1
     prettier: ^3.0.3
     prop-types: ^15.8.1

From be79b1d1ecddf7fa640d56b71a3d9a1223830521 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 12 Oct 2023 11:19:32 -0400
Subject: [PATCH 20/64] fix: focus for search label goes to appropriate
 searchbar

---
 .../src/components/ProjectPage.tsx                           | 1 +
 .../gatsby-theme-project-portal/src/components/SearchBar.tsx | 5 ++++-
 .../src/layouts/SearchPageLayout.tsx                         | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index dd6b5a565..21b466231 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -322,6 +322,7 @@ export const ProjectPage = ({
           </div>
           <div className="flex-1 min-w-30ch auto-rows-auto flex flex-col">
             <SearchBar
+              id="projSearch"
               label={"Search"}
               placeholder="Type to filter posts..."
               onChange={(e) => setSearchQuery(e.target.value)}
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
index 800fc7b47..fb404a266 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
@@ -6,25 +6,28 @@ import React, {
 } from "react"
 
 interface SearchBarProps {
+  id: string
   label: string
   onChange: any
   placeholder: string
 }
 
 export const SearchBar: FunctionComponent<SearchBarProps> = ({
+  id,
   label,
   onChange,
   placeholder,
 }) => {
   return (
     <>
-      <label id="search-label" className="font-bold" htmlFor="filter">
+      <label id="search-label" className="font-bold" htmlFor={id}>
         {label}
       </label>
       <input
         className="rounded border-gray-300 hover:border-gray-400"
         style={{ height: "62%" }}
         type="text"
+        id={id}
         aria-label="Search"
         placeholder={placeholder}
         onChange={onChange}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 97048f892..75b1eb983 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -118,6 +118,7 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
     <div className="flex flex-col items-center justify-center align-middle text-center px-2">
       <div className="container mx-auto my-2 border-b-4 border-primary">
         <SearchBar
+          id="siteSearch"
           label={"Search"}
           placeholder={"Type to search pages..."}
           onChange={(e) => setSearchQuery(e.target.value)}

From d832a16efbbdee5b9b66764fb4407e514a77cf91 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 12 Oct 2023 11:19:49 -0400
Subject: [PATCH 21/64] fix: export SearchLayout in index

---
 packages/gatsby-theme-project-portal/src/layouts/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/index.tsx b/packages/gatsby-theme-project-portal/src/layouts/index.tsx
index 15d4ae3a2..ba41bd287 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/index.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/index.tsx
@@ -5,3 +5,4 @@ export { CardPageLayout } from "./CardPageLayout"
 export { AboutPageLayout } from "./AboutPageLayout"
 export { ContactPageLayout } from "./ContactPageLayout"
 export { ThankYouPageLayout } from "./ThankYouPageLayout"
+export { SearchPageLayout } from "./SearchPageLayout"

From 39da4b1c3d5bad76fff1191982a806e815cad3ea Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 12 Oct 2023 11:30:20 -0400
Subject: [PATCH 22/64] refactor: add label component to make id matching
 easier for selects and filters

---
 .../src/components/Label.tsx                     | 16 ++++++++++++++++
 .../src/components/ProjectPage.tsx               | 15 +++++----------
 .../src/components/SearchBar.tsx                 |  5 ++---
 3 files changed, 23 insertions(+), 13 deletions(-)
 create mode 100644 packages/gatsby-theme-project-portal/src/components/Label.tsx

diff --git a/packages/gatsby-theme-project-portal/src/components/Label.tsx b/packages/gatsby-theme-project-portal/src/components/Label.tsx
new file mode 100644
index 000000000..2c84922f7
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/Label.tsx
@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from "react"
+
+interface LabelProps {
+  id: string
+  label: string
+}
+
+export const Label: FunctionComponent<LabelProps> = ({ id, label }) => {
+  return (
+    <>
+      <label id="search-label" className="font-bold p-1" htmlFor={id}>
+        {label}
+      </label>
+    </>
+  )
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 21b466231..0c46283ef 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -7,6 +7,7 @@ import Select, { MultiValue } from "react-select"
 import * as JsSearch from "js-search"
 import { SearchBar } from "./SearchBar"
 import { ImageDataLike } from "gatsby-plugin-image"
+import { Label } from "./Label"
 
 function customSort(dateField: string, sortAscending: boolean) {
   return function (a, b) {
@@ -276,9 +277,7 @@ export const ProjectPage = ({
       <div className="pt-4 pb-10 md:mx-8 lg:mt-6 lg:pt-8 lg:pb-20 overflow-hidden px-2 xl:px-12 bg-white">
         <div className="flex flex-wrap gap-4 mb-8 mx-3 xl:mx-6 bg-white">
           <div className="flex-1 min-w-30ch">
-            <label id="sort-label" className="font-bold" htmlFor="sort">
-              Sort by
-            </label>
+            <Label id="sort" label="Filter by" />
             <Select
               aria-labelledby="sort-label"
               inputId="sort"
@@ -290,9 +289,7 @@ export const ProjectPage = ({
             />
           </div>
           <div className="flex-1 min-w-30ch">
-            <label id="filter-label" className="font-bold" htmlFor="filter">
-              Filter by status
-            </label>
+            <Label id="filter" label="Filter by status" />
             <Select
               aria-labelledby="filter-label"
               inputId="filter"
@@ -305,12 +302,10 @@ export const ProjectPage = ({
             />
           </div>
           <div className="flex-1 min-w-30ch">
-            <label id="filter-label" className="font-bold" htmlFor="filter">
-              Filter by topic
-            </label>
+            <Label id="filter-select" label="Filter by topic" />
             <Select
               aria-labelledby="filter-label"
-              inputId="filter"
+              inputId="filter-select"
               name="filter-select"
               isMulti={true}
               value={selectedTopicOptions}
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
index fb404a266..6839d2a40 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
@@ -4,6 +4,7 @@ import React, {
   FunctionComponent,
   SetStateAction,
 } from "react"
+import { Label } from "./Label"
 
 interface SearchBarProps {
   id: string
@@ -20,9 +21,7 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({
 }) => {
   return (
     <>
-      <label id="search-label" className="font-bold" htmlFor={id}>
-        {label}
-      </label>
+      <Label id={id} label={label} />
       <input
         className="rounded border-gray-300 hover:border-gray-400"
         style={{ height: "62%" }}

From c8cb2159b212ac9f8876c821ed5aef7a35ee9ab7 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 12 Oct 2023 13:00:01 -0400
Subject: [PATCH 23/64] style: make sure all search fields display evenly

---
 .../gatsby-theme-project-portal/src/components/ProjectPage.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 0c46283ef..cf80c0306 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -275,7 +275,7 @@ export const ProjectPage = ({
         <div ref={scrollToRef} className="absolute -top-100px"></div>
       </div>
       <div className="pt-4 pb-10 md:mx-8 lg:mt-6 lg:pt-8 lg:pb-20 overflow-hidden px-2 xl:px-12 bg-white">
-        <div className="flex flex-wrap gap-4 mb-8 mx-3 xl:mx-6 bg-white">
+        <div className="flex flex-wrap items-end gap-4 mb-8 mx-3 xl:mx-6 bg-white">
           <div className="flex-1 min-w-30ch">
             <Label id="sort" label="Filter by" />
             <Select

From 97030090c4d111e1a5767e78de627bf86f151624 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:11:27 -0400
Subject: [PATCH 24/64] refactor: use react-modal component, clean up Nav

---
 .idea/prettier.xml                            |  1 +
 .../src/components/Modal.tsx                  | 38 ----------
 .../src/components/Navbar.tsx                 | 36 ++--------
 .../src/components/SearchBar.tsx              | 10 ++-
 .../src/components/SearchModal.tsx            | 69 +++++++++++++++++++
 .../src/layouts/Layout.tsx                    |  4 +-
 .../src/layouts/SearchPageLayout.stories.tsx  | 52 ++++++++++++++
 .../src/layouts/SearchPageLayout.tsx          | 30 ++++----
 8 files changed, 150 insertions(+), 90 deletions(-)
 delete mode 100644 packages/gatsby-theme-project-portal/src/components/Modal.tsx
 create mode 100644 packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
 create mode 100644 packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx

diff --git a/.idea/prettier.xml b/.idea/prettier.xml
index 8004cebd9..727b8b533 100644
--- a/.idea/prettier.xml
+++ b/.idea/prettier.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="PrettierConfiguration">
+    <option name="myRunOnSave" value="true" />
     <option name="myRunOnReformat" value="true" />
   </component>
 </project>
\ No newline at end of file
diff --git a/packages/gatsby-theme-project-portal/src/components/Modal.tsx b/packages/gatsby-theme-project-portal/src/components/Modal.tsx
deleted file mode 100644
index 3558d3282..000000000
--- a/packages/gatsby-theme-project-portal/src/components/Modal.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { FunctionComponent } from "react"
-import { createPortal } from "react-dom"
-import { SearchPageLayout } from "../layouts"
-
-export interface ModalProps {
-  closeModal
-  data
-}
-export const Modal: FunctionComponent<ModalProps> = ({
-  closeModal,
-  data,
-}: ModalProps) => {
-  return (
-    <>
-      {createPortal(
-        <div className="modal">
-          <div
-            className="fixed inset-0 z-40 w-auto my-6 mx-auto max-w-3xl max-h-fit"
-            onClick={(e) => {
-              e.stopPropagation()
-            }}
-          >
-            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none max-h-screen overflow-y-auto">
-              <SearchPageLayout searchNodes={data} />
-              <div className="relative p-6 flex-auto"></div>
-              {/*footer*/}
-            </div>
-          </div>
-          <div
-            className="opacity-20 fixed inset-0 z-60 bg-black"
-            onClick={closeModal}
-          ></div>
-        </div>,
-        document.body
-      )}
-    </>
-  )
-}
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 838777ebb..8c124a66d 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -1,9 +1,10 @@
 import React, { FunctionComponent } from "react"
 import { Link } from "gatsby"
-import { FaBars, FaTimes } from "react-icons/fa"
+import { FaBars, FaTimes, FaTimesCircle } from "react-icons/fa"
 import { ImageDataLike } from "gatsby-plugin-image"
 import { SiteTitle, NavbarItem } from "."
-import { Modal } from "./Modal"
+import Modal from "react-modal"
+import { SearchModal } from "./SearchModal"
 
 interface NavbarProps {
   title: string
@@ -25,13 +26,6 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
   searchNodes,
 }: NavbarProps) => {
   const [navbarOpen, setNavbarOpen] = React.useState(false)
-  const [isModalOpen, setModalOpen] = React.useState(false)
-  const openModal = () => {
-    setModalOpen(true)
-  }
-  const closeModal = () => {
-    setModalOpen(false)
-  }
 
   return (
     <>
@@ -65,13 +59,6 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
             }
             id="example-navbar-danger"
           >
-            {isModalOpen && navbarOpen && (
-              <div
-                className="opacity-20 fixed inset-0 z-60 bg-black"
-                onClick={closeModal}
-              ></div>
-            )}
-
             <ul className="flex flex-col items-center justify-center list-none xl:flex-row xl:ml-auto">
               {pages.map(({ name, link, show }, i) =>
                 show ? (
@@ -86,21 +73,8 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
                   ""
                 )
               )}
-              <div>
-                <button
-                  className="bg-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setModalOpen(true)
-                  }}
-                >
-                  Quick Search
-                </button>
-              </div>
-              {isModalOpen ? (
-                <Modal closeModal={closeModal} data={searchNodes} />
-              ) : null}
+
+              <SearchModal data={searchNodes} />
             </ul>
           </div>
         </div>
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
index 6839d2a40..0c7304c7d 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
@@ -1,9 +1,4 @@
-import React, {
-  ChangeEventHandler,
-  Dispatch,
-  FunctionComponent,
-  SetStateAction,
-} from "react"
+import React, { FunctionComponent } from "react"
 import { Label } from "./Label"
 
 interface SearchBarProps {
@@ -11,6 +6,7 @@ interface SearchBarProps {
   label: string
   onChange: any
   placeholder: string
+  autoFocus?: boolean
 }
 
 export const SearchBar: FunctionComponent<SearchBarProps> = ({
@@ -18,11 +14,13 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({
   label,
   onChange,
   placeholder,
+  autoFocus,
 }) => {
   return (
     <>
       <Label id={id} label={label} />
       <input
+        autoFocus={autoFocus}
         className="rounded border-gray-300 hover:border-gray-400"
         style={{ height: "62%" }}
         type="text"
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
new file mode 100644
index 000000000..5a1423bcb
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
@@ -0,0 +1,69 @@
+import React, { FunctionComponent } from "react"
+import { SearchPageLayout } from "../layouts"
+import { FaTimesCircle } from "react-icons/fa"
+import { Link } from "gatsby"
+import Modal from "react-modal"
+
+export interface ModalProps {
+  data
+}
+export const SearchModal: FunctionComponent<ModalProps> = ({
+  data,
+}: ModalProps) => {
+  const modalCloseTimeout = 300
+  const [isModalOpen, setModalOpen] = React.useState(false)
+  const openModal = () => {
+    setModalOpen(true)
+  }
+  const closeModal = () => {
+    setModalOpen(false)
+  }
+  const modalStyles = {
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.58)",
+    },
+    content: {
+      maxWidth: "960px",
+      margin: "32px auto",
+    },
+  }
+  return (
+    <>
+      <li className="nav-item">
+        <button
+          className="flex items-center p-5 leading-snug text-white
+                  hover:opacity-75 xl:text-black xl:px-3 xl:py-2"
+          onClick={(e) => {
+            e.stopPropagation()
+            setModalOpen(true)
+          }}
+        >
+          <span className="text-nav pb-1 ml-2 border-b-2 border-transparent hover:border-primary">
+            Quick Search
+          </span>
+        </button>
+      </li>
+      <Modal
+        isOpen={isModalOpen}
+        style={modalStyles}
+        onRequestClose={closeModal}
+        contentLabel="Modal"
+        closeTimeoutMS={modalCloseTimeout}
+      >
+        <Link
+          to="/"
+          aria-label="close modal"
+          onClick={(e) => {
+            e.preventDefault()
+            closeModal()
+          }}
+        >
+          <span className="pt-1">
+            <FaTimesCircle className="text-primary text-xl" />
+          </span>
+        </Link>
+        <SearchPageLayout searchNodes={data} />
+      </Modal>
+    </>
+  )
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
index e1d406266..7d862ec2c 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode } from "react"
+import React, { FunctionComponent, ReactNode, useState } from "react"
 import { graphql } from "gatsby"
 import {
   Footer,
@@ -8,6 +8,8 @@ import {
   TopicType,
 } from "../components"
 import { ImageDataLike } from "gatsby-plugin-image"
+import Modal from "react-modal"
+Modal.setAppElement(`#___gatsby`)
 
 export interface LayoutProps {
   path: string
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
new file mode 100644
index 000000000..92805408f
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SearchPageLayout } from "./SearchPageLayout"
+import { loadImage } from "../components/Story.utilities"
+
+const meta: Meta<typeof SearchPageLayout> = {
+  component: SearchPageLayout,
+  tags: ["autodocs"],
+}
+
+export default meta
+
+type Story = StoryObj<typeof SearchPageLayout>
+
+export const Primary: Story = {
+  args: {
+    searchNodes: {
+      generalPage: {
+        image: loadImage("image/background.jpg"),
+      },
+    },
+  },
+}
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 75b1eb983..e7f8ea559 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from "react"
+import React, { FunctionComponent, useEffect, useRef, useState } from "react"
 import lunr from "lunr"
 import { SearchBar } from "../components/SearchBar"
 import { isNull } from "lodash"
@@ -20,15 +20,9 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
     if (page === "siteUrl") {
       return
     } else {
-      if (page === "allProject") {
-        searchNodes[page].nodes.forEach((node) => {
-          if (!node.slug.includes("/")) {
-            node.slug = `project/${node.slug}`
-          }
-        })
-      }
       searchNodes[page].nodes.forEach((node) => {
-        const newItem = Object.values(node).map((field) => {
+        let tempNode = structuredClone(node)
+        const newItem = Object.values(tempNode).map((field) => {
           if (isNull(field)) {
             return null
           }
@@ -48,11 +42,18 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
             return field
           }
         })
+        if (page === "allProject") {
+          searchNodes[page].nodes.forEach((node) => {
+            if (!node.slug.includes("/")) {
+              tempNode.slug = `project/${node.slug}`
+            }
+          })
+        }
 
-        Object.keys(node).forEach((page, i) => {
-          node[page] = newItem[i]
+        Object.keys(tempNode).forEach((page, i) => {
+          tempNode[page] = newItem[i]
         })
-        documents.push(node)
+        documents.push(tempNode)
       })
     }
   })
@@ -116,9 +117,10 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
   //const meta = useSiteMetadata()
   return (
     <div className="flex flex-col items-center justify-center align-middle text-center px-2">
-      <div className="container mx-auto my-2 border-b-4 border-primary">
+      <div className="container mx-auto mt-2 border-b-4 border-primary">
         <SearchBar
           id="siteSearch"
+          autoFocus={true}
           label={"Search"}
           placeholder={"Type to search pages..."}
           onChange={(e) => setSearchQuery(e.target.value)}
@@ -153,7 +155,7 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
                   <h2 className="capitalize">
                     {db[result.ref].question || db[result.ref].slug}
                   </h2>
-                  <ul className="mt-4">
+                  <ul className="grid grid-rows-1 justify-center md:block">
                     <h2 className="font-sans text-black text-tag mb-1 font-extrabold">
                       Match found in:
                     </h2>

From b89106adce7ddc627dfad0116c6ca5a0cb7d687d Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:24:58 -0400
Subject: [PATCH 25/64] refactor: revert changes where I added a status filter
 option

---
 .../src/components/ProjectPage.tsx            | 44 +------------------
 1 file changed, 2 insertions(+), 42 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index cf80c0306..14cd4ddc1 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -65,26 +65,9 @@ export const ProjectPage = ({
     }
     return tempFilterOptions
   }
-  const getStatus = (project: CardProps[]): CardProps[] => {
-    let tempStatus = []
-    for (const tempProject of project) {
-      if (tempProject.status) {
-        if (!tempStatus.some(({ value }) => value === tempProject.status)) {
-          tempStatus.push({
-            value: tempProject.status,
-            label: tempProject.status,
-          })
-        }
-      }
-    }
-    return tempStatus
-  }
   const [filterOptionsTopic, setFilterOptionsTopic] = useState(
     getTopics(allProjects)
   )
-  const [filterOptionsStatus, setFilterOptionsStatus] = useState(
-    getStatus(allProjects)
-  )
 
   const ITEMS_PER_PAGE = 6
   const [sortedProjects, setSortedProjects] = useState(allProjects)
@@ -232,16 +215,7 @@ export const ProjectPage = ({
     }
     setPageStart(0)
     setPageEnd(ITEMS_PER_PAGE)
-
-    // 3. filter by status. If there are any filters chosen
-    // apply it to filteredProjects
-    if (selectedStatusOptions.length > 0) {
-      const filteredStatus = selectedStatusOptions.map(({ value }) => value)
-      filteredProjects = sortedProjects.filter((project) =>
-        filteredStatus.includes(project.status)
-      )
-    }
-    //4. search query
+    //3. search query
     // if search query is used, we will now apply search results, to filteredProjects
     if (searchQuery.length > 0) {
       for (let i = 0; i < filteredProjects.length; i++) {
@@ -255,12 +229,11 @@ export const ProjectPage = ({
     }
 
     setFilterOptionsTopic(getTopics(filteredProjects))
-    setFilterOptionsStatus(getStatus(filteredProjects))
     //now filteredProjects has gone through all 3 checks
     //ready to update displayProjects
     setDisplayProjects(filteredProjects)
     //setDisplayProjects will trigger an updated display
-  }, [selectedTopicOptions, selectedStatusOptions, sortedProjects, searchQuery]) // triggered when list is changed
+  }, [selectedTopicOptions, sortedProjects, searchQuery]) // triggered when list is changed
 
   const selectStyle = {
     placeholder: (provided) => ({ ...provided, color: "#767676" }),
@@ -288,19 +261,6 @@ export const ProjectPage = ({
               styles={selectStyle}
             />
           </div>
-          <div className="flex-1 min-w-30ch">
-            <Label id="filter" label="Filter by status" />
-            <Select
-              aria-labelledby="filter-label"
-              inputId="filter"
-              name="filter-select"
-              isMulti={true}
-              value={selectedStatusOptions}
-              onChange={setSelectedStatusOptions}
-              options={filterOptionsStatus}
-              styles={selectStyle}
-            />
-          </div>
           <div className="flex-1 min-w-30ch">
             <Label id="filter-select" label="Filter by topic" />
             <Select

From 37c03bbf8526b10dfd6209853166729e2358c928 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:28:40 -0400
Subject: [PATCH 26/64] feat: add react-modal

---
 package.json | 3 ++-
 yarn.lock    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4bc787109..804eedd4d 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "gatsby-plugin-testing": "^0.3.5",
-    "lunr": "^2.3.9"
+    "lunr": "^2.3.9",
+    "react-modal": "^3.16.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a12d06928..65e3d7516 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22483,6 +22483,7 @@ __metadata:
     prop-types: ^15.8.1
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-modal: ^3.16.1
     tslint-react: ^5.0.0
   languageName: unknown
   linkType: soft
@@ -23216,7 +23217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-modal@npm:^3.8.1":
+"react-modal@npm:^3.16.1, react-modal@npm:^3.8.1":
   version: 3.16.1
   resolution: "react-modal@npm:3.16.1"
   dependencies:

From 8d30b627f081442f6b0b77a57f4e644af6e7aca6 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:40:39 -0400
Subject: [PATCH 27/64] fix: move modal mount into layout component

---
 packages/gatsby-theme-project-portal/src/layouts/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
index 7d862ec2c..4456d005d 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
@@ -9,7 +9,6 @@ import {
 } from "../components"
 import { ImageDataLike } from "gatsby-plugin-image"
 import Modal from "react-modal"
-Modal.setAppElement(`#___gatsby`)
 
 export interface LayoutProps {
   path: string
@@ -127,6 +126,7 @@ export const Layout: FunctionComponent<LayoutProps> = ({
   children,
 }) => {
   const searchNodes = { siteUrl, allProject, allGeneralPage }
+  Modal.setAppElement(`#___gatsby`)
   return (
     <div className="w-full mx-0 bg-white border-0 xl:container xl:p-0 xl:mx-auto xl:border-l xl:border-r xl:border-gray-200 flex flex-col min-h-screen">
       {showDevBanner && <DevelopmentBanner />}

From f3df1d90c41e0d32c1a4e3ff8bbc0667b8272a7d Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:41:01 -0400
Subject: [PATCH 28/64] fix: edit stories for searchbar to include additional
 args

---
 .../src/components/SearchBar.stories.tsx                    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
index 2c77f391c..9f2ff16fe 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
@@ -11,5 +11,9 @@ export default meta
 type Story = StoryObj<typeof SearchBar>
 
 export const Primary: Story = {
-  args: { label: "Search here: " },
+  args: {
+    label: "Search here: ",
+    id: "filter",
+    placeholder: "Type to Search...",
+  },
 }

From 9c15ecd6cca29571062591c7178991b2844b391b Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 14:24:41 -0400
Subject: [PATCH 29/64] fix: update searchbar tests

---
 .../SearchBar.spec.tsx                        | 49 ++++++++++++++++---
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
index 048f9fb02..6ddd40761 100644
--- a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
+++ b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
@@ -8,7 +8,12 @@ describe("SearchBar", () => {
 
   it("renders label and input elements with the correct props", () => {
     const { getByLabelText, getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"test"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //looking for text set to "Test Label"
     expect(getByText("Test Label")).toBeInTheDocument()
@@ -18,7 +23,12 @@ describe("SearchBar", () => {
 
   it("calls the onChange callback when the input value changes", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"test"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //fireEvent.change to simulate the input value change
     //trigger's a change event on the input element
@@ -30,7 +40,12 @@ describe("SearchBar", () => {
 
   it("renders the input placeholder correctly", () => {
     const { getByPlaceholderText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"test"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check placeholder text
     expect(getByPlaceholderText("Type to filter posts...")).toBeInTheDocument()
@@ -38,7 +53,12 @@ describe("SearchBar", () => {
 
   it("sets the aria-label attribute to the correct value", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"test"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks  that aria-label is set correctly
     expect(getByLabelText("Search")).toHaveAttribute("aria-label", "Search")
@@ -46,7 +66,12 @@ describe("SearchBar", () => {
 
   it("applies the correct CSS classes to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"test"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks that tailwind styling is correct
     expect(getByLabelText("Search")).toHaveClass(
@@ -58,7 +83,12 @@ describe("SearchBar", () => {
 
   it("sets the htmlFor attribute on the label element", () => {
     const { getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"test"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check rendered component has attribute id = search-label
     expect(getByText("Test Label")).toHaveAttribute("id", "search-label")
@@ -66,7 +96,12 @@ describe("SearchBar", () => {
 
   it("applies the style prop correctly to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"test"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     expect(getByLabelText("Search")).toHaveStyle({ height: "62%" })
   })

From 5470ab9265fd7dd68f97a852bed63b0486355609 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 14:28:11 -0400
Subject: [PATCH 30/64] fix: Label component needs to use the id prop in id
 field to prevent dupes

---
 packages/gatsby-theme-project-portal/src/components/Label.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/Label.tsx b/packages/gatsby-theme-project-portal/src/components/Label.tsx
index 2c84922f7..5562a3d1d 100644
--- a/packages/gatsby-theme-project-portal/src/components/Label.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Label.tsx
@@ -8,7 +8,7 @@ interface LabelProps {
 export const Label: FunctionComponent<LabelProps> = ({ id, label }) => {
   return (
     <>
-      <label id="search-label" className="font-bold p-1" htmlFor={id}>
+      <label id={`${id}-label`} className="font-bold p-1" htmlFor={id}>
         {label}
       </label>
     </>

From bcf1e14d7c9fafc76b3ce38a7e38f28dfeda281f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 13 Oct 2023 14:34:51 -0400
Subject: [PATCH 31/64] fix test

---
 .../gatsby-theme-project-portal/SearchBar.spec.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
index 6ddd40761..399e0378a 100644
--- a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
+++ b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
@@ -11,7 +11,7 @@ describe("SearchBar", () => {
       <SearchBar
         label="Test Label"
         onChange={onChange}
-        id={"test"}
+        id={"search"}
         placeholder={"Type to filter posts..."}
       />
     )
@@ -26,7 +26,7 @@ describe("SearchBar", () => {
       <SearchBar
         label="Test Label"
         onChange={onChange}
-        id={"test"}
+        id={"search"}
         placeholder={"Type to filter posts..."}
       />
     )
@@ -43,7 +43,7 @@ describe("SearchBar", () => {
       <SearchBar
         label="Test Label"
         onChange={onChange}
-        id={"test"}
+        id={"search"}
         placeholder={"Type to filter posts..."}
       />
     )
@@ -56,7 +56,7 @@ describe("SearchBar", () => {
       <SearchBar
         label="Test Label"
         onChange={onChange}
-        id={"test"}
+        id={"search"}
         placeholder={"Type to filter posts..."}
       />
     )
@@ -69,7 +69,7 @@ describe("SearchBar", () => {
       <SearchBar
         label="Test Label"
         onChange={onChange}
-        id={"test"}
+        id={"search"}
         placeholder={"Type to filter posts..."}
       />
     )
@@ -86,7 +86,7 @@ describe("SearchBar", () => {
       <SearchBar
         label="Test Label"
         onChange={onChange}
-        id={"test"}
+        id={"search"}
         placeholder={"Type to filter posts..."}
       />
     )
@@ -99,7 +99,7 @@ describe("SearchBar", () => {
       <SearchBar
         label="Test Label"
         onChange={onChange}
-        id={"test"}
+        id={"search"}
         placeholder={"Type to filter posts..."}
       />
     )

From 6646adb852bdf5a62b0640c376bb6fc606934cf7 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:01:16 -0400
Subject: [PATCH 32/64] refactor: start with search page PR

removing modal things
---
 .../example-site/content/page/search.json     |   5 +
 .../src/components/Navbar.tsx                 |   4 -
 .../src/fragments/site-search.js              |  63 +++++++++
 .../src/layouts/CardPageLayout.tsx            |   7 +-
 .../src/layouts/Layout.tsx                    | 124 +-----------------
 .../src/layouts/SearchPageLayout.tsx          | 101 +++++++++++++-
 6 files changed, 172 insertions(+), 132 deletions(-)
 create mode 100644 packages/example-site/content/page/search.json
 create mode 100644 packages/gatsby-theme-project-portal/src/fragments/site-search.js

diff --git a/packages/example-site/content/page/search.json b/packages/example-site/content/page/search.json
new file mode 100644
index 000000000..d7a90497d
--- /dev/null
+++ b/packages/example-site/content/page/search.json
@@ -0,0 +1,5 @@
+{
+  "templateKey": "SearchPage",
+  "title": "Search the Whole Site!",
+  "image": "background.jpg"
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 8c124a66d..4968dde6c 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -15,7 +15,6 @@ interface NavbarProps {
     link: string
     show: boolean
   }[]
-  searchNodes
 }
 
 export const Navbar: FunctionComponent<NavbarProps> = ({
@@ -23,7 +22,6 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
   activePage,
   image,
   pages,
-  searchNodes,
 }: NavbarProps) => {
   const [navbarOpen, setNavbarOpen] = React.useState(false)
 
@@ -73,8 +71,6 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
                   ""
                 )
               )}
-
-              <SearchModal data={searchNodes} />
             </ul>
           </div>
         </div>
diff --git a/packages/gatsby-theme-project-portal/src/fragments/site-search.js b/packages/gatsby-theme-project-portal/src/fragments/site-search.js
new file mode 100644
index 000000000..0416df574
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/fragments/site-search.js
@@ -0,0 +1,63 @@
+import { graphql } from "gatsby"
+
+export const searchFragment = graphql`
+  fragment SearchData on Query {
+    allProject {
+      nodes {
+        slug
+        question
+        title
+        summary
+        status
+        opportunityCloses
+        startDate
+        endDate
+        lastModified
+        agency
+        topics {
+          ...TopicDetails
+        }
+        deliverable
+        purpose
+        expertise
+        requirement
+        keyDates
+        priorResearch
+        statusOfData
+        fundingInfo
+        emailContent
+        mainContact {
+          name
+          title
+          employer
+          email
+        }
+        projectTeam {
+          name
+          title
+          employer
+          email
+        }
+        faq {
+          text
+          title
+        }
+      }
+    }
+    allGeneralPage {
+      nodes {
+        slug
+        lede
+        faq {
+          text
+          title
+        }
+        aims {
+          text
+          title
+        }
+        title
+      }
+    }
+  }
+`
diff --git a/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx
index c53ca37b2..ffa588fc1 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx
@@ -46,7 +46,7 @@ export const CardPageLayout: FunctionComponent<CardPageLayoutProps> = ({
 export default CardPageLayout
 
 export const query = graphql`
-  query CardPageQuery($slug: String!) {
+  query CardPageQuery($slug: String!, $statusFilter: [String]) {
     ...HeadData
     ...LayoutData
     page: cardPage(slug: { eq: $slug }) {
@@ -62,5 +62,10 @@ export const query = graphql`
         ...HeaderWithImageBackground
       }
     }
+    allProject(filter: { status: { in: $statusFilter } }) {
+      nodes {
+        ...CardDetails
+      }
+    }
   }
 `
diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
index 4456d005d..be8720608 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
@@ -1,12 +1,6 @@
 import React, { FunctionComponent, ReactNode, useState } from "react"
 import { graphql } from "gatsby"
-import {
-  Footer,
-  BottomBanner,
-  DevelopmentBanner,
-  Navbar,
-  TopicType,
-} from "../components"
+import { Footer, BottomBanner, DevelopmentBanner, Navbar } from "../components"
 import { ImageDataLike } from "gatsby-plugin-image"
 import Modal from "react-modal"
 
@@ -45,61 +39,6 @@ export interface LayoutProps {
         }
       }
     }
-    allProject: {
-      nodes: {
-        slug
-        question
-        title
-        summary
-        status
-        opportunityCloses
-        startDate
-        endDate
-        lastModified
-        agency
-        topics: TopicType[]
-        deliverable
-        purpose
-        expertise
-        requirement
-        keyDates
-        priorResearch
-        statusOfData
-        fundingInfo
-        emailContent
-        mainContact: {
-          name
-          title
-          employer
-          email
-        }
-        projectTeam: {
-          name
-          title
-          employer
-          email
-        }
-        faq: {
-          text
-          title
-        }
-      }
-    }
-    allGeneralPage: {
-      nodes: {
-        slug
-        lede
-        faq: {
-          text
-          title
-        }
-        aims: {
-          text
-          title
-        }
-        title
-      }
-    }
     navbarLogo?: ImageDataLike
     bottomBannerLogo?: ImageDataLike
     footerLogo?: ImageDataLike
@@ -117,15 +56,12 @@ export const Layout: FunctionComponent<LayoutProps> = ({
       pages,
       staticText: { bottomBanner, footer },
     },
-    allProject,
-    allGeneralPage,
     navbarLogo,
     bottomBannerLogo,
     footerLogo,
   },
   children,
 }) => {
-  const searchNodes = { siteUrl, allProject, allGeneralPage }
   Modal.setAppElement(`#___gatsby`)
   return (
     <div className="w-full mx-0 bg-white border-0 xl:container xl:p-0 xl:mx-auto xl:border-l xl:border-r xl:border-gray-200 flex flex-col min-h-screen">
@@ -135,7 +71,6 @@ export const Layout: FunctionComponent<LayoutProps> = ({
         image={navbarLogo}
         pages={pages}
         activePage={path}
-        searchNodes={searchNodes}
       />
       <div className="flex-1">{children}</div>
       <BottomBanner
@@ -217,62 +152,5 @@ export const query = graphql`
         gatsbyImageData(height: 64)
       }
     }
-    allProject {
-      nodes {
-        slug
-        question
-        title
-        summary
-        status
-        opportunityCloses
-        startDate
-        endDate
-        lastModified
-        agency
-        topics {
-          ...TopicDetails
-        }
-        deliverable
-        purpose
-        expertise
-        requirement
-        keyDates
-        priorResearch
-        statusOfData
-        fundingInfo
-        emailContent
-        mainContact {
-          name
-          title
-          employer
-          email
-        }
-        projectTeam {
-          name
-          title
-          employer
-          email
-        }
-        faq {
-          text
-          title
-        }
-      }
-    }
-    allGeneralPage {
-      nodes {
-        slug
-        lede
-        faq {
-          text
-          title
-        }
-        aims {
-          text
-          title
-        }
-        title
-      }
-    }
   }
 `
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index e7f8ea559..36e8f5f0c 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -2,18 +2,88 @@ import React, { FunctionComponent, useEffect, useRef, useState } from "react"
 import lunr from "lunr"
 import { SearchBar } from "../components/SearchBar"
 import { isNull } from "lodash"
+import { graphql } from "gatsby"
+import { TopicType } from "../components"
 
 export interface SearchProps {
-  searchNodes
+  data: {
+    site: {
+      siteMetadata: {
+        siteUrl
+      }
+    }
+    allProject: {
+      nodes: {
+        slug
+        question
+        title
+        summary
+        status
+        opportunityCloses
+        startDate
+        endDate
+        lastModified
+        agency
+        topics: TopicType[]
+        deliverable
+        purpose
+        expertise
+        requirement
+        keyDates
+        priorResearch
+        statusOfData
+        fundingInfo
+        emailContent
+        mainContact: {
+          name
+          title
+          employer
+          email
+        }
+        projectTeam: {
+          name
+          title
+          employer
+          email
+        }
+        faq: {
+          text
+          title
+        }
+      }
+    }
+    allGeneralPage: {
+      nodes: {
+        slug
+        lede
+        faq: {
+          text
+          title
+        }
+        aims: {
+          text
+          title
+        }
+        title
+      }
+    }
+  }
 }
 
 export const SearchPageLayout: FunctionComponent<SearchProps> = ({
-  searchNodes,
+  data: {
+    site: {
+      siteMetadata: { siteUrl },
+    },
+    allProject,
+    allGeneralPage,
+  },
 }: SearchProps) => {
-  const siteUrl = searchNodes.siteUrl
+  // The following is run when the component mounts, unmounts, or changes
+  // TODO: Want to create the idx at build time
   const [searchQuery, setSearchQuery] = useState([])
   const [queryResults, setQueryResults] = useState([])
-
+  const searchNodes = { siteUrl, allProject, allGeneralPage }
   let documents = []
 
   Object.keys(searchNodes).forEach((page) => {
@@ -183,3 +253,26 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
     </div>
   )
 }
+
+export default SearchPageLayout
+
+export const query = graphql`
+  query SearchQuery($slug: String!) {
+    ...HeadData
+    ...LayoutData
+    ...SearchData
+    page: generalPage(slug: { eq: $slug }) {
+      title
+      description: lede
+    }
+    generalPage(slug: { eq: $slug }) {
+      pageName
+      title
+      header
+      accessibility
+      image {
+        ...HeaderWithImageBackground
+      }
+    }
+  }
+`

From 31f2716e9caacb1cb1f228679055233dee736869 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:11:08 -0400
Subject: [PATCH 33/64] refactor: add search page to node

---
 .../gatsby-node.js                            | 22 ++++++++++++++++++-
 .../src/layouts/SearchPageLayout.tsx          | 10 +++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index df7ca6816..e433e45ed 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -6,6 +6,7 @@ const {
   pageTypeDefs,
 } = require(`./utils/types`)
 const fs = require("fs")
+const { node } = require("prop-types")
 
 exports.onPreBootstrap = ({ reporter }, themeOptions) => {
   const { themeImageDirectory } = withDefaults(themeOptions)
@@ -31,7 +32,7 @@ exports.sourceNodes = ({ actions, createContentDigest }, themeOptions) => {
   const { createNode } = actions
 
   const projectPortalConfig = withDefaults(themeOptions)
-
+  const searchData = node
   createNode({
     ...projectPortalConfig,
     id: `@thepolicylab-projectportals/gatsby-theme-project-portal`,
@@ -95,6 +96,13 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           }
         }
       }
+      searchPages: allGeneralPage(
+        filter: { templateKey: { eq: "SearchPage" } }
+      ) {
+        nodes {
+          slug
+        }
+      }
       aboutPages: allGeneralPage(filter: { templateKey: { eq: "AboutPage" } }) {
         nodes {
           slug
@@ -147,6 +155,18 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     })
   })
 
+  const { searchPages } = result.data
+  searchPages.nodes.forEach((page) => {
+    const { slug } = page
+    createPage({
+      path: `/${slug}`,
+      component: require.resolve(`./src/layouts/SearchPageLayout.tsx`),
+      context: {
+        slug: slug,
+      },
+    })
+  })
+
   const { aboutPages } = result.data
   aboutPages.nodes.forEach((page) => {
     const { slug } = page
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 36e8f5f0c..19f7275e1 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -79,8 +79,6 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
     allGeneralPage,
   },
 }: SearchProps) => {
-  // The following is run when the component mounts, unmounts, or changes
-  // TODO: Want to create the idx at build time
   const [searchQuery, setSearchQuery] = useState([])
   const [queryResults, setQueryResults] = useState([])
   const searchNodes = { siteUrl, allProject, allGeneralPage }
@@ -113,11 +111,9 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
           }
         })
         if (page === "allProject") {
-          searchNodes[page].nodes.forEach((node) => {
-            if (!node.slug.includes("/")) {
-              tempNode.slug = `project/${node.slug}`
-            }
-          })
+          if (!node.slug.includes("/")) {
+            tempNode.slug = `project/${node.slug}`
+          }
         }
 
         Object.keys(tempNode).forEach((page, i) => {

From 2bfdb9d7d4d5809ace32622d851249e4d348defa Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:46:49 -0400
Subject: [PATCH 34/64] refactor: move lunr and react-modal to theme

---
 package.json                                      | 4 +---
 packages/gatsby-theme-project-portal/package.json | 5 ++++-
 yarn.lock                                         | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 9572f6844..37d32cfaf 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,6 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "gatsby-plugin-testing": "^0.3.5",
-    "lunr": "^2.3.9",
-    "react-modal": "^3.16.1"
+    "gatsby-plugin-testing": "^0.3.5"
   }
 }
diff --git a/packages/gatsby-theme-project-portal/package.json b/packages/gatsby-theme-project-portal/package.json
index 39e6caa1a..0735d754f 100644
--- a/packages/gatsby-theme-project-portal/package.json
+++ b/packages/gatsby-theme-project-portal/package.json
@@ -9,7 +9,8 @@
     "Aisulu Omar <aisulu_omar@brown.edu>",
     "Paul Xu <yang_xu@brown.edu>",
     "Kevin Wilson <kevin_wilson@brown.edu>",
-    "Aidan Hudson-Lapore <aidan_hudson-lapore@brown.edu>"
+    "Aidan Hudson-Lapore <aidan_hudson-lapore@brown.edu>",
+    "Heather Yu <heather_yu@brown.edu>"
   ],
   "license": "MIT",
   "peerDependencies": {
@@ -30,10 +31,12 @@
     "gatsby-transformer-sharp": "^5.12.2",
     "js-search": "^2.0.1",
     "lodash": "^4.17.21",
+    "lunr": "^2.3.9",
     "markdown-to-jsx": "^7.3.2",
     "moment": "^2.29.4",
     "react-google-recaptcha": "^3.1.0",
     "react-icons": "^4.11.0",
+    "react-modal": "^3.16.1",
     "react-select": "^5.7.7",
     "react-share": "^4.4.0",
     "tailwindcss": "^3.3.3"
diff --git a/yarn.lock b/yarn.lock
index 3c3526020..44175e727 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7867,10 +7867,12 @@ __metadata:
     gatsby-transformer-sharp: ^5.12.2
     js-search: ^2.0.1
     lodash: ^4.17.21
+    lunr: ^2.3.9
     markdown-to-jsx: ^7.3.2
     moment: ^2.29.4
     react-google-recaptcha: ^3.1.0
     react-icons: ^4.11.0
+    react-modal: ^3.16.1
     react-select: ^5.7.7
     react-share: ^4.4.0
     tailwindcss: ^3.3.3
@@ -22489,13 +22491,11 @@ __metadata:
     identity-obj-proxy: ^3.0.0
     jest: ^29.7.0
     jest-environment-jsdom: ^29.7.0
-    lunr: ^2.3.9
     pa11y-ci: ^3.0.1
     prettier: ^3.0.3
     prop-types: ^15.8.1
     react: ^18.2.0
     react-dom: ^18.2.0
-    react-modal: ^3.16.1
     tslint-react: ^5.0.0
   languageName: unknown
   linkType: soft

From 3f87a56fb60f8c83987f17b9504b5997c0c0e94f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:47:11 -0400
Subject: [PATCH 35/64] style: better styling for mobile

---
 .../src/layouts/SearchPageLayout.tsx                  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 19f7275e1..03a75df9e 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -183,7 +183,7 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
   //const meta = useSiteMetadata()
   return (
     <div className="flex flex-col items-center justify-center align-middle text-center px-2">
-      <div className="container mx-auto mt-2 border-b-4 border-primary">
+      <div className="container mx-auto mt-4 border-b-4 border-primary">
         <SearchBar
           id="siteSearch"
           autoFocus={true}
@@ -197,8 +197,8 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
         </div>
       </div>
 
-      <article className="container py-6 mx-auto">
-        <div className="grid grid-cols-1 mx-4 xl:mx-6 gap-4 justify-self-center">
+      <article className="py-6 md:container md:mx-auto">
+        <div className="grid grid-cols-1 md:mx-4 xl:mx-6 gap-4 justify-self-center">
           {queryResults.map((result) => {
             const fields = new Set<string>()
             Object.keys(result.matchData.metadata).forEach((term) => {
@@ -217,12 +217,12 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
             ))
             const item = (
               <React.Fragment key={result.ref}>
-                <div className="px-2 py-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-md h-full flex flex-col">
+                <div className="px-2 py-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-md h-full flex flex-col md:mx-10 md:py-6 lg:mx-60">
                   <h2 className="capitalize">
                     {db[result.ref].question || db[result.ref].slug}
                   </h2>
                   <ul className="grid grid-rows-1 justify-center md:block">
-                    <h2 className="font-sans text-black text-tag mb-1 font-extrabold">
+                    <h2 className="font-sans text-black text-tag my-2 font-extrabold">
                       Match found in:
                     </h2>
                     {found}
@@ -252,6 +252,7 @@ export const SearchPageLayout: FunctionComponent<SearchProps> = ({
 
 export default SearchPageLayout
 
+export { Head } from "../hooks"
 export const query = graphql`
   query SearchQuery($slug: String!) {
     ...HeadData

From 9f2ffb69d72e34ba3c491be4de19d6c38e044eb0 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 26 Oct 2023 09:51:29 -0400
Subject: [PATCH 36/64] refactor: move changes to a different PR

---
 .../src/components/Navbar.tsx                 |  2 -
 .../src/components/ProjectPage.tsx            | 41 +++++------
 .../src/components/SearchBar.stories.tsx      |  6 +-
 .../src/components/SearchBar.tsx              | 22 +++---
 .../src/components/SearchModal.tsx            | 69 -------------------
 .../src/layouts/Layout.tsx                    |  8 +--
 6 files changed, 31 insertions(+), 117 deletions(-)
 delete mode 100644 packages/gatsby-theme-project-portal/src/components/SearchModal.tsx

diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 4968dde6c..10cbf7dc9 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -3,8 +3,6 @@ import { Link } from "gatsby"
 import { FaBars, FaTimes, FaTimesCircle } from "react-icons/fa"
 import { ImageDataLike } from "gatsby-plugin-image"
 import { SiteTitle, NavbarItem } from "."
-import Modal from "react-modal"
-import { SearchModal } from "./SearchModal"
 
 interface NavbarProps {
   title: string
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 14cd4ddc1..827c56941 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -7,7 +7,6 @@ import Select, { MultiValue } from "react-select"
 import * as JsSearch from "js-search"
 import { SearchBar } from "./SearchBar"
 import { ImageDataLike } from "gatsby-plugin-image"
-import { Label } from "./Label"
 
 function customSort(dateField: string, sortAscending: boolean) {
   return function (a, b) {
@@ -65,9 +64,7 @@ export const ProjectPage = ({
     }
     return tempFilterOptions
   }
-  const [filterOptionsTopic, setFilterOptionsTopic] = useState(
-    getTopics(allProjects)
-  )
+  const [filterOptions, setFilterOptions] = useState(getTopics(allProjects))
 
   const ITEMS_PER_PAGE = 6
   const [sortedProjects, setSortedProjects] = useState(allProjects)
@@ -176,12 +173,7 @@ export const ProjectPage = ({
     setHasNext(pageEnd < displayProjects.length)
   }, [list]) // triggered when list is changed
 
-  const [selectedTopicOptions, setSelectedTopicOptions] = useState<
-    MultiValue<any>
-  >([])
-  const [selectedStatusOptions, setSelectedStatusOptions] = useState<
-    MultiValue<any>
-  >([])
+  const [selectedOptions, setSelectedOptions] = useState<MultiValue<any>>([])
 
   useEffect(() => {
     const sortedList = [...allProjects]
@@ -205,8 +197,8 @@ export const ProjectPage = ({
     //2. filter by topic. If there are any filters chosen
     // apply it to filteredProjects
     // or else stick with sortedProjects (which may have been updated by sortOptions) aka the first check
-    if (selectedTopicOptions.length > 0) {
-      const filteredTopics = selectedTopicOptions.map(({ value }) => value)
+    if (selectedOptions.length > 0) {
+      const filteredTopics = selectedOptions.map(({ value }) => value)
       filteredProjects = sortedProjects.filter((project) =>
         project.topics
           .map((topic) => topic.slug)
@@ -215,6 +207,7 @@ export const ProjectPage = ({
     }
     setPageStart(0)
     setPageEnd(ITEMS_PER_PAGE)
+
     //3. search query
     // if search query is used, we will now apply search results, to filteredProjects
     if (searchQuery.length > 0) {
@@ -228,12 +221,12 @@ export const ProjectPage = ({
       }
     }
 
-    setFilterOptionsTopic(getTopics(filteredProjects))
+    setFilterOptions(getTopics(filteredProjects))
     //now filteredProjects has gone through all 3 checks
     //ready to update displayProjects
     setDisplayProjects(filteredProjects)
     //setDisplayProjects will trigger an updated display
-  }, [selectedTopicOptions, sortedProjects, searchQuery]) // triggered when list is changed
+  }, [selectedOptions, sortedProjects, searchQuery]) // triggered when list is changed
 
   const selectStyle = {
     placeholder: (provided) => ({ ...provided, color: "#767676" }),
@@ -248,9 +241,11 @@ export const ProjectPage = ({
         <div ref={scrollToRef} className="absolute -top-100px"></div>
       </div>
       <div className="pt-4 pb-10 md:mx-8 lg:mt-6 lg:pt-8 lg:pb-20 overflow-hidden px-2 xl:px-12 bg-white">
-        <div className="flex flex-wrap items-end gap-4 mb-8 mx-3 xl:mx-6 bg-white">
+        <div className="flex flex-wrap gap-4 mb-8 mx-3 xl:mx-6 bg-white">
           <div className="flex-1 min-w-30ch">
-            <Label id="sort" label="Filter by" />
+            <label id="sort-label" className="font-bold" htmlFor="sort">
+              Sort by
+            </label>
             <Select
               aria-labelledby="sort-label"
               inputId="sort"
@@ -262,24 +257,24 @@ export const ProjectPage = ({
             />
           </div>
           <div className="flex-1 min-w-30ch">
-            <Label id="filter-select" label="Filter by topic" />
+            <label id="filter-label" className="font-bold" htmlFor="filter">
+              Filter by topic
+            </label>
             <Select
               aria-labelledby="filter-label"
-              inputId="filter-select"
+              inputId="filter"
               name="filter-select"
               isMulti={true}
-              value={selectedTopicOptions}
-              onChange={setSelectedTopicOptions}
-              options={filterOptionsTopic}
+              value={selectedOptions}
+              onChange={setSelectedOptions}
+              options={filterOptions}
               styles={selectStyle}
               noOptionsMessage={() => "No remaining topics"}
             />
           </div>
           <div className="flex-1 min-w-30ch auto-rows-auto flex flex-col">
             <SearchBar
-              id="projSearch"
               label={"Search"}
-              placeholder="Type to filter posts..."
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
index 9f2ff16fe..2c77f391c 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
@@ -11,9 +11,5 @@ export default meta
 type Story = StoryObj<typeof SearchBar>
 
 export const Primary: Story = {
-  args: {
-    label: "Search here: ",
-    id: "filter",
-    placeholder: "Type to Search...",
-  },
+  args: { label: "Search here: " },
 }
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
index 0c7304c7d..5435bf6e2 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
@@ -1,32 +1,30 @@
-import React, { FunctionComponent } from "react"
-import { Label } from "./Label"
+import React, {
+  ChangeEventHandler,
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+} from "react"
 
 interface SearchBarProps {
-  id: string
   label: string
   onChange: any
-  placeholder: string
-  autoFocus?: boolean
 }
 
 export const SearchBar: FunctionComponent<SearchBarProps> = ({
-  id,
   label,
   onChange,
-  placeholder,
-  autoFocus,
 }) => {
   return (
     <>
-      <Label id={id} label={label} />
+      <label id="search-label" className="font-bold" htmlFor="filter">
+        {label}
+      </label>
       <input
-        autoFocus={autoFocus}
         className="rounded border-gray-300 hover:border-gray-400"
         style={{ height: "62%" }}
         type="text"
-        id={id}
         aria-label="Search"
-        placeholder={placeholder}
+        placeholder="Type to filter posts..."
         onChange={onChange}
       />
     </>
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx b/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
deleted file mode 100644
index 5a1423bcb..000000000
--- a/packages/gatsby-theme-project-portal/src/components/SearchModal.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { FunctionComponent } from "react"
-import { SearchPageLayout } from "../layouts"
-import { FaTimesCircle } from "react-icons/fa"
-import { Link } from "gatsby"
-import Modal from "react-modal"
-
-export interface ModalProps {
-  data
-}
-export const SearchModal: FunctionComponent<ModalProps> = ({
-  data,
-}: ModalProps) => {
-  const modalCloseTimeout = 300
-  const [isModalOpen, setModalOpen] = React.useState(false)
-  const openModal = () => {
-    setModalOpen(true)
-  }
-  const closeModal = () => {
-    setModalOpen(false)
-  }
-  const modalStyles = {
-    overlay: {
-      backgroundColor: "rgba(0, 0, 0, 0.58)",
-    },
-    content: {
-      maxWidth: "960px",
-      margin: "32px auto",
-    },
-  }
-  return (
-    <>
-      <li className="nav-item">
-        <button
-          className="flex items-center p-5 leading-snug text-white
-                  hover:opacity-75 xl:text-black xl:px-3 xl:py-2"
-          onClick={(e) => {
-            e.stopPropagation()
-            setModalOpen(true)
-          }}
-        >
-          <span className="text-nav pb-1 ml-2 border-b-2 border-transparent hover:border-primary">
-            Quick Search
-          </span>
-        </button>
-      </li>
-      <Modal
-        isOpen={isModalOpen}
-        style={modalStyles}
-        onRequestClose={closeModal}
-        contentLabel="Modal"
-        closeTimeoutMS={modalCloseTimeout}
-      >
-        <Link
-          to="/"
-          aria-label="close modal"
-          onClick={(e) => {
-            e.preventDefault()
-            closeModal()
-          }}
-        >
-          <span className="pt-1">
-            <FaTimesCircle className="text-primary text-xl" />
-          </span>
-        </Link>
-        <SearchPageLayout searchNodes={data} />
-      </Modal>
-    </>
-  )
-}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
index be8720608..95451b238 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/Layout.tsx
@@ -1,8 +1,7 @@
-import React, { FunctionComponent, ReactNode, useState } from "react"
+import React, { FunctionComponent, ReactNode } from "react"
 import { graphql } from "gatsby"
 import { Footer, BottomBanner, DevelopmentBanner, Navbar } from "../components"
 import { ImageDataLike } from "gatsby-plugin-image"
-import Modal from "react-modal"
 
 export interface LayoutProps {
   path: string
@@ -11,7 +10,6 @@ export interface LayoutProps {
     site: {
       siteMetadata: {
         title: string
-        siteUrl: string
       }
     }
     projectPortalConfig: {
@@ -49,7 +47,7 @@ export const Layout: FunctionComponent<LayoutProps> = ({
   path,
   data: {
     site: {
-      siteMetadata: { title: siteTitle, siteUrl },
+      siteMetadata: { title: siteTitle },
     },
     projectPortalConfig: {
       showDevBanner,
@@ -62,7 +60,6 @@ export const Layout: FunctionComponent<LayoutProps> = ({
   },
   children,
 }) => {
-  Modal.setAppElement(`#___gatsby`)
   return (
     <div className="w-full mx-0 bg-white border-0 xl:container xl:p-0 xl:mx-auto xl:border-l xl:border-r xl:border-gray-200 flex flex-col min-h-screen">
       {showDevBanner && <DevelopmentBanner />}
@@ -97,7 +94,6 @@ export const query = graphql`
     site {
       siteMetadata {
         title
-        siteUrl
       }
     }
     projectPortalConfig {

From fac1f19da363d641119f539003f9cf83d9f57b04 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 26 Oct 2023 09:59:31 -0400
Subject: [PATCH 37/64] refactor: rollback changes

---
 .../SearchBar.spec.tsx                        | 49 +++----------------
 .../gatsby-node.js                            | 15 +++---
 .../gatsby-theme-project-portal/package.json  |  1 -
 .../src/components/Label.tsx                  | 16 ------
 .../src/components/Navbar.tsx                 |  7 ++-
 5 files changed, 17 insertions(+), 71 deletions(-)
 delete mode 100644 packages/gatsby-theme-project-portal/src/components/Label.tsx

diff --git a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
index 399e0378a..048f9fb02 100644
--- a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
+++ b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
@@ -8,12 +8,7 @@ describe("SearchBar", () => {
 
   it("renders label and input elements with the correct props", () => {
     const { getByLabelText, getByText } = render(
-      <SearchBar
-        label="Test Label"
-        onChange={onChange}
-        id={"search"}
-        placeholder={"Type to filter posts..."}
-      />
+      <SearchBar label="Test Label" onChange={onChange} />
     )
     //looking for text set to "Test Label"
     expect(getByText("Test Label")).toBeInTheDocument()
@@ -23,12 +18,7 @@ describe("SearchBar", () => {
 
   it("calls the onChange callback when the input value changes", () => {
     const { getByLabelText } = render(
-      <SearchBar
-        label="Test Label"
-        onChange={onChange}
-        id={"search"}
-        placeholder={"Type to filter posts..."}
-      />
+      <SearchBar label="Test Label" onChange={onChange} />
     )
     //fireEvent.change to simulate the input value change
     //trigger's a change event on the input element
@@ -40,12 +30,7 @@ describe("SearchBar", () => {
 
   it("renders the input placeholder correctly", () => {
     const { getByPlaceholderText } = render(
-      <SearchBar
-        label="Test Label"
-        onChange={onChange}
-        id={"search"}
-        placeholder={"Type to filter posts..."}
-      />
+      <SearchBar label="Test Label" onChange={onChange} />
     )
     //check placeholder text
     expect(getByPlaceholderText("Type to filter posts...")).toBeInTheDocument()
@@ -53,12 +38,7 @@ describe("SearchBar", () => {
 
   it("sets the aria-label attribute to the correct value", () => {
     const { getByLabelText } = render(
-      <SearchBar
-        label="Test Label"
-        onChange={onChange}
-        id={"search"}
-        placeholder={"Type to filter posts..."}
-      />
+      <SearchBar label="Test Label" onChange={onChange} />
     )
     //checks  that aria-label is set correctly
     expect(getByLabelText("Search")).toHaveAttribute("aria-label", "Search")
@@ -66,12 +46,7 @@ describe("SearchBar", () => {
 
   it("applies the correct CSS classes to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar
-        label="Test Label"
-        onChange={onChange}
-        id={"search"}
-        placeholder={"Type to filter posts..."}
-      />
+      <SearchBar label="Test Label" onChange={onChange} />
     )
     //checks that tailwind styling is correct
     expect(getByLabelText("Search")).toHaveClass(
@@ -83,12 +58,7 @@ describe("SearchBar", () => {
 
   it("sets the htmlFor attribute on the label element", () => {
     const { getByText } = render(
-      <SearchBar
-        label="Test Label"
-        onChange={onChange}
-        id={"search"}
-        placeholder={"Type to filter posts..."}
-      />
+      <SearchBar label="Test Label" onChange={onChange} />
     )
     //check rendered component has attribute id = search-label
     expect(getByText("Test Label")).toHaveAttribute("id", "search-label")
@@ -96,12 +66,7 @@ describe("SearchBar", () => {
 
   it("applies the style prop correctly to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar
-        label="Test Label"
-        onChange={onChange}
-        id={"search"}
-        placeholder={"Type to filter posts..."}
-      />
+      <SearchBar label="Test Label" onChange={onChange} />
     )
     expect(getByLabelText("Search")).toHaveStyle({ height: "62%" })
   })
diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index e433e45ed..0eda21881 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -1,12 +1,12 @@
 const { withDefaults } = require(`./utils/default-options`)
+const fs = require("fs")
+
 const {
   projectTypeDefs,
   projectPortalConfigTypeDefs,
   contactTypeDefs,
   pageTypeDefs,
 } = require(`./utils/types`)
-const fs = require("fs")
-const { node } = require("prop-types")
 
 exports.onPreBootstrap = ({ reporter }, themeOptions) => {
   const { themeImageDirectory } = withDefaults(themeOptions)
@@ -32,7 +32,7 @@ exports.sourceNodes = ({ actions, createContentDigest }, themeOptions) => {
   const { createNode } = actions
 
   const projectPortalConfig = withDefaults(themeOptions)
-  const searchData = node
+
   createNode({
     ...projectPortalConfig,
     id: `@thepolicylab-projectportals/gatsby-theme-project-portal`,
@@ -127,14 +127,13 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const projects = allProject.nodes
 
   // Create a page for each Post
-  projects.forEach((node) => {
+  projects.forEach((project) => {
+    const { slug } = project
     createPage({
-      path: `project/${node.slug}`,
+      path: `project/${slug}`,
       component: require.resolve(`./src/layouts/ProjectDetailPage.tsx`),
       context: {
-        slug: node.slug,
-        pagePath: `project/${node.slug}`,
-        projectIs: node,
+        slug: slug,
       },
     })
   })
diff --git a/packages/gatsby-theme-project-portal/package.json b/packages/gatsby-theme-project-portal/package.json
index 0735d754f..549117de9 100644
--- a/packages/gatsby-theme-project-portal/package.json
+++ b/packages/gatsby-theme-project-portal/package.json
@@ -36,7 +36,6 @@
     "moment": "^2.29.4",
     "react-google-recaptcha": "^3.1.0",
     "react-icons": "^4.11.0",
-    "react-modal": "^3.16.1",
     "react-select": "^5.7.7",
     "react-share": "^4.4.0",
     "tailwindcss": "^3.3.3"
diff --git a/packages/gatsby-theme-project-portal/src/components/Label.tsx b/packages/gatsby-theme-project-portal/src/components/Label.tsx
deleted file mode 100644
index 5562a3d1d..000000000
--- a/packages/gatsby-theme-project-portal/src/components/Label.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { FunctionComponent } from "react"
-
-interface LabelProps {
-  id: string
-  label: string
-}
-
-export const Label: FunctionComponent<LabelProps> = ({ id, label }) => {
-  return (
-    <>
-      <label id={`${id}-label`} className="font-bold p-1" htmlFor={id}>
-        {label}
-      </label>
-    </>
-  )
-}
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
index 10cbf7dc9..54e808c1e 100644
--- a/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react"
 import { Link } from "gatsby"
-import { FaBars, FaTimes, FaTimesCircle } from "react-icons/fa"
+import { FaBars, FaTimes } from "react-icons/fa"
 import { ImageDataLike } from "gatsby-plugin-image"
 import { SiteTitle, NavbarItem } from "."
 
@@ -22,7 +22,6 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
   pages,
 }: NavbarProps) => {
   const [navbarOpen, setNavbarOpen] = React.useState(false)
-
   return (
     <>
       <nav
@@ -32,7 +31,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
         }
       >
         <div className="flex flex-wrap justify-between w-full px-0 xl:px-4">
-          <div className="relative flex flex-no-wrap w-full xl:static xl:w-auto">
+          <div className="relative flex flex-no-wrap w-full xl:static xl:block xl:w-auto">
             <button
               className="block p-6 ml-0 text-xl leading-none text-white outline-none cursor-pointer bg-primary xl:hidden focus:outline-none"
               type="button"
@@ -55,7 +54,7 @@ export const Navbar: FunctionComponent<NavbarProps> = ({
             }
             id="example-navbar-danger"
           >
-            <ul className="flex flex-col items-center justify-center list-none xl:flex-row xl:ml-auto">
+            <ul className="flex flex-col list-none xl:flex-row xl:ml-auto">
               {pages.map(({ name, link, show }, i) =>
                 show ? (
                   <Link

From 9cde6caf59c44d21163799d3b2c1d3650f03f9bd Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:00:54 -0400
Subject: [PATCH 38/64] refactor: remove modal from yarn lock

---
 yarn.lock | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 44175e727..06f9a4ae6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7872,7 +7872,6 @@ __metadata:
     moment: ^2.29.4
     react-google-recaptcha: ^3.1.0
     react-icons: ^4.11.0
-    react-modal: ^3.16.1
     react-select: ^5.7.7
     react-share: ^4.4.0
     tailwindcss: ^3.3.3
@@ -23229,7 +23228,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-modal@npm:^3.16.1, react-modal@npm:^3.8.1":
+"react-modal@npm:^3.8.1":
   version: 3.16.1
   resolution: "react-modal@npm:3.16.1"
   dependencies:

From 1d72b3bc746ff66568a165ad21460caae9975e2b Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:46:22 -0400
Subject: [PATCH 39/64] refactor: fix SearchBar autofocus

---
 .../src/components/Label.tsx                  | 16 ++++++++++++++
 .../src/components/ProjectPage.tsx            | 14 +++++-------
 .../src/components/SearchBar.tsx              | 22 ++++++++++---------
 3 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 packages/gatsby-theme-project-portal/src/components/Label.tsx

diff --git a/packages/gatsby-theme-project-portal/src/components/Label.tsx b/packages/gatsby-theme-project-portal/src/components/Label.tsx
new file mode 100644
index 000000000..5562a3d1d
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/Label.tsx
@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from "react"
+
+interface LabelProps {
+  id: string
+  label: string
+}
+
+export const Label: FunctionComponent<LabelProps> = ({ id, label }) => {
+  return (
+    <>
+      <label id={`${id}-label`} className="font-bold p-1" htmlFor={id}>
+        {label}
+      </label>
+    </>
+  )
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 827c56941..4d99a4e43 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -241,11 +241,9 @@ export const ProjectPage = ({
         <div ref={scrollToRef} className="absolute -top-100px"></div>
       </div>
       <div className="pt-4 pb-10 md:mx-8 lg:mt-6 lg:pt-8 lg:pb-20 overflow-hidden px-2 xl:px-12 bg-white">
-        <div className="flex flex-wrap gap-4 mb-8 mx-3 xl:mx-6 bg-white">
+        <div className="flex flex-wrap items-end gap-4 mb-8 mx-3 xl:mx-6 bg-white">
           <div className="flex-1 min-w-30ch">
-            <label id="sort-label" className="font-bold" htmlFor="sort">
-              Sort by
-            </label>
+            <Label id="sort" label="Filter by" />
             <Select
               aria-labelledby="sort-label"
               inputId="sort"
@@ -257,12 +255,10 @@ export const ProjectPage = ({
             />
           </div>
           <div className="flex-1 min-w-30ch">
-            <label id="filter-label" className="font-bold" htmlFor="filter">
-              Filter by topic
-            </label>
+            <Label id="filter-select" label="Filter by topic" />
             <Select
               aria-labelledby="filter-label"
-              inputId="filter"
+              inputId="filter-select"
               name="filter-select"
               isMulti={true}
               value={selectedOptions}
@@ -274,7 +270,9 @@ export const ProjectPage = ({
           </div>
           <div className="flex-1 min-w-30ch auto-rows-auto flex flex-col">
             <SearchBar
+              id="projSearch"
               label={"Search"}
+              placeholder="Type to filter posts..."
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
index 5435bf6e2..0c7304c7d 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.tsx
@@ -1,30 +1,32 @@
-import React, {
-  ChangeEventHandler,
-  Dispatch,
-  FunctionComponent,
-  SetStateAction,
-} from "react"
+import React, { FunctionComponent } from "react"
+import { Label } from "./Label"
 
 interface SearchBarProps {
+  id: string
   label: string
   onChange: any
+  placeholder: string
+  autoFocus?: boolean
 }
 
 export const SearchBar: FunctionComponent<SearchBarProps> = ({
+  id,
   label,
   onChange,
+  placeholder,
+  autoFocus,
 }) => {
   return (
     <>
-      <label id="search-label" className="font-bold" htmlFor="filter">
-        {label}
-      </label>
+      <Label id={id} label={label} />
       <input
+        autoFocus={autoFocus}
         className="rounded border-gray-300 hover:border-gray-400"
         style={{ height: "62%" }}
         type="text"
+        id={id}
         aria-label="Search"
-        placeholder="Type to filter posts..."
+        placeholder={placeholder}
         onChange={onChange}
       />
     </>

From f356e5fb9d3b6e7426454c3eb09970aec5f92c8f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:46:48 -0400
Subject: [PATCH 40/64] fix: searchlayout story

---
 .../src/layouts/SearchPageLayout.stories.tsx  | 65 ++++++++++++++-
 .../src/layouts/SearchPageLayout.tsx          | 80 ++++++++-----------
 2 files changed, 96 insertions(+), 49 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
index 92805408f..20bb3e176 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { SearchPageLayout } from "./SearchPageLayout"
-import { loadImage } from "../components/Story.utilities"
+import { contactImage } from "../components/Contact.stories"
+import * as ProjectTeamStories from "../components/ProjectTeam.stories"
 
 const meta: Meta<typeof SearchPageLayout> = {
   component: SearchPageLayout,
@@ -13,10 +14,66 @@ type Story = StoryObj<typeof SearchPageLayout>
 
 export const Primary: Story = {
   args: {
-    searchNodes: {
-      generalPage: {
-        image: loadImage("image/background.jpg"),
+    data: {
+      allGeneralPage: {
+        nodes: {
+          slug: "/about",
+          lede: "About the Tests",
+          aims: [
+            {
+              title: "About Aim",
+              text: "Some text",
+            },
+          ],
+          faq: [
+            {
+              title: "Is this an FAQ question?",
+              text: "Yes, and here is the answer.",
+            },
+          ],
+          title: null,
+        },
       },
+      allProject: {
+        nodes: {
+          slug: "/test",
+          question: "Test Question?",
+          summary: "Test Summary\n",
+          title: "The Title",
+
+          deliverable: "- Test.\n- Test.\n- Test.\n",
+          purpose: "- Sample.",
+          fundingInfo: "- Test.\n- Test.\n",
+          statusOfData: "Testing\n",
+          priorResearch:
+            "None, but we will share project background with our selected collaborator.\n",
+
+          expertise: "- Testing.\n- Testing.\n",
+          requirement: "None\n",
+          keyDates:
+            "We are ready to begin the project as soon as we identify a collaborator.\n",
+          emailContent: "- Testing.\n- Testing.\n",
+          mainContact: {
+            name: "Contact Name",
+            title: "Title",
+            employer: "Employer",
+            email: "some-email@example.com",
+          },
+
+          projectTeam: ProjectTeamStories.Primary.args.contacts,
+
+          faq: [{ text: "Answer 1!", title: "Question 1?" }],
+
+          status: "open",
+          opportunityCloses: new Date("2022-03-04"),
+          startDate: new Date("2022-01-03"),
+          endDate: new Date("2022-03-04"),
+          agency: "Sample Agency",
+          lastModified: new Date("2022-05-27T16:34:04.000Z"),
+          topics: [{ slug: "test", title: "Test" }],
+        },
+      },
+      site: { siteMetadata: { siteUrl: "https://localhost" } },
     },
   },
 }
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 03a75df9e..95ab3944f 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -3,68 +3,58 @@ import lunr from "lunr"
 import { SearchBar } from "../components/SearchBar"
 import { isNull } from "lodash"
 import { graphql } from "gatsby"
-import { TopicType } from "../components"
+import { ContactType, TopicType } from "../components"
 
 export interface SearchProps {
   data: {
     site: {
       siteMetadata: {
-        siteUrl
+        siteUrl: string
       }
     }
     allProject: {
       nodes: {
-        slug
-        question
-        title
-        summary
-        status
-        opportunityCloses
-        startDate
-        endDate
-        lastModified
-        agency
-        topics: TopicType[]
+        slug: string
+        question: string
+        title: string
+        summary: string
+        status: string
+        opportunityCloses: Date
+        startDate: Date
+        endDate: Date
+        lastModified: Date
+        agency: string
+        topics?: TopicType[]
         deliverable
-        purpose
-        expertise
-        requirement
-        keyDates
-        priorResearch
-        statusOfData
-        fundingInfo
-        emailContent
-        mainContact: {
-          name
-          title
-          employer
-          email
-        }
-        projectTeam: {
-          name
-          title
-          employer
-          email
-        }
+        purpose: string
+        expertise: string
+        requirement: string
+        keyDates: string
+        priorResearch: string
+        statusOfData: string
+        fundingInfo: string
+        emailContent: string
+        mainContact: ContactType
+        projectTeam?: ContactType[]
         faq: {
-          text
-          title
-        }
+          text: string
+          title: string
+        }[]
       }
     }
     allGeneralPage: {
       nodes: {
-        slug
-        lede
+        slug: string
+        lede: string
         faq: {
-          text
-          title
-        }
+          text: string
+          title: string
+        }[]
         aims: {
-          text
-          title
-        }
-        title
+          text: string
+          title: string
+        }[]
+        title: string
       }
     }
   }

From 5adb1e90ecefa73a26db3e46ce5c6d74b53cf37e Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:49:18 -0400
Subject: [PATCH 41/64] fix: add import

---
 .../gatsby-theme-project-portal/src/components/ProjectPage.tsx   | 1 +
 .../src/layouts/SearchPageLayout.stories.tsx                     | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
index 4d99a4e43..3bfe47156 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectPage.tsx
@@ -7,6 +7,7 @@ import Select, { MultiValue } from "react-select"
 import * as JsSearch from "js-search"
 import { SearchBar } from "./SearchBar"
 import { ImageDataLike } from "gatsby-plugin-image"
+import { Label } from "./Label"
 
 function customSort(dateField: string, sortAscending: boolean) {
   return function (a, b) {
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
index 20bb3e176..be995a206 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { SearchPageLayout } from "./SearchPageLayout"
-import { contactImage } from "../components/Contact.stories"
 import * as ProjectTeamStories from "../components/ProjectTeam.stories"
 
 const meta: Meta<typeof SearchPageLayout> = {

From 8ec70dceef0030057bb25a1f326ab4f37ad13d30 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:55:32 -0400
Subject: [PATCH 42/64] fix: update search story and test

---
 .../SearchBar.spec.tsx                        | 49 ++++++++++++++++---
 .../src/components/SearchBar.stories.tsx      |  6 ++-
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
index 048f9fb02..399e0378a 100644
--- a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
+++ b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
@@ -8,7 +8,12 @@ describe("SearchBar", () => {
 
   it("renders label and input elements with the correct props", () => {
     const { getByLabelText, getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //looking for text set to "Test Label"
     expect(getByText("Test Label")).toBeInTheDocument()
@@ -18,7 +23,12 @@ describe("SearchBar", () => {
 
   it("calls the onChange callback when the input value changes", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //fireEvent.change to simulate the input value change
     //trigger's a change event on the input element
@@ -30,7 +40,12 @@ describe("SearchBar", () => {
 
   it("renders the input placeholder correctly", () => {
     const { getByPlaceholderText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check placeholder text
     expect(getByPlaceholderText("Type to filter posts...")).toBeInTheDocument()
@@ -38,7 +53,12 @@ describe("SearchBar", () => {
 
   it("sets the aria-label attribute to the correct value", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks  that aria-label is set correctly
     expect(getByLabelText("Search")).toHaveAttribute("aria-label", "Search")
@@ -46,7 +66,12 @@ describe("SearchBar", () => {
 
   it("applies the correct CSS classes to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks that tailwind styling is correct
     expect(getByLabelText("Search")).toHaveClass(
@@ -58,7 +83,12 @@ describe("SearchBar", () => {
 
   it("sets the htmlFor attribute on the label element", () => {
     const { getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check rendered component has attribute id = search-label
     expect(getByText("Test Label")).toHaveAttribute("id", "search-label")
@@ -66,7 +96,12 @@ describe("SearchBar", () => {
 
   it("applies the style prop correctly to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     expect(getByLabelText("Search")).toHaveStyle({ height: "62%" })
   })
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
index 2c77f391c..9f2ff16fe 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
@@ -11,5 +11,9 @@ export default meta
 type Story = StoryObj<typeof SearchBar>
 
 export const Primary: Story = {
-  args: { label: "Search here: " },
+  args: {
+    label: "Search here: ",
+    id: "filter",
+    placeholder: "Type to Search...",
+  },
 }

From 8af83f960310be2cc487ffe264a1a2ee2b826773 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 8 Nov 2023 16:47:01 -0500
Subject: [PATCH 43/64] feat: add search page to example site, add nodes for
 search

---
 packages/example-site/content/config/layout.json  |  5 +++++
 .../gatsby-theme-project-portal/gatsby-node.js    | 15 +++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/example-site/content/config/layout.json b/packages/example-site/content/config/layout.json
index e6ebe4c8c..b6063f7f7 100644
--- a/packages/example-site/content/config/layout.json
+++ b/packages/example-site/content/config/layout.json
@@ -33,6 +33,11 @@
         "name": "Contact",
         "link": "/contact/",
         "show": true
+      },
+      {
+        "name": "Search",
+        "link": "/search/",
+        "show": true
       }
     ]
   },
diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index d24cbf2a7..5be68018a 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -69,6 +69,21 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           slug
         }
       }
+      allGeneralPage {
+        nodes {
+          slug
+          lede
+          faq {
+            text
+            title
+          }
+          aims {
+            text
+            title
+          }
+          title
+        }
+      }
       allCardPage {
         nodes {
           slug

From 9bf7e8bac00e448e87df166d9d385f1a0955159a Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 8 Nov 2023 16:49:36 -0500
Subject: [PATCH 44/64] refactor: SiteSearch component, SiteWrapper with data,
 and Layout for the Page

---
 .../src/components/SiteSearch.tsx             |  98 ++++++++
 .../src/components/SiteSearchWrapper.tsx      | 111 +++++++++
 .../src/layouts/SearchPageLayout.tsx          | 231 +-----------------
 3 files changed, 218 insertions(+), 222 deletions(-)
 create mode 100644 packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
 create mode 100644 packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
new file mode 100644
index 000000000..2e2f88c8f
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
@@ -0,0 +1,98 @@
+import React, { FunctionComponent, useEffect, useRef, useState } from "react"
+import { SearchBar } from "../components/SearchBar"
+
+export interface SearchProps {
+  siteUrl: string
+  index
+}
+
+export const SiteSearch: FunctionComponent<SearchProps> = ({
+  siteUrl,
+  index,
+}: SearchProps) => {
+  const [searchQuery, setSearchQuery] = useState([])
+  const [queryResults, setQueryResults] = useState([])
+
+  useEffect(() => {
+    if (searchQuery.length > 0) {
+      let searchResults = index.search(searchQuery)
+      let results = []
+      searchResults.forEach(function (result) {
+        //results.push(db[result.ref])
+      })
+      setQueryResults(searchResults)
+    } else {
+      setQueryResults([])
+    }
+  }, [searchQuery])
+
+  return (
+    <div className="flex flex-col items-center justify-center align-middle text-center px-2">
+      <div className="container mx-auto mt-4 border-b-4 border-primary">
+        <SearchBar
+          id="siteSearch"
+          autoFocus={true}
+          label={"Search"}
+          placeholder={"Type to search pages..."}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <div className=" pt-2">
+          Number of found pages:
+          {queryResults.length}
+        </div>
+      </div>
+
+      <article className="py-6 md:container md:mx-auto">
+        <div className="grid grid-cols-1 md:mx-4 xl:mx-6 gap-4 justify-self-center">
+          {queryResults.map((result) => {
+            const fields = new Set<string>()
+            Object.keys(result.matchData.metadata).forEach((term) => {
+              Object.keys(result.matchData.metadata[term]).forEach((field) => {
+                fields.add(field)
+              })
+            })
+
+            const found = Array.from(fields).map((field, index) => (
+              <li
+                key={index}
+                className="inline mx-px px-3 py-1 mt-1 text-tag whitespace-nowrap font-semibold mr-2 bg-topics"
+              >
+                {field}
+              </li>
+            ))
+            const item = (
+              <React.Fragment key={result.ref}>
+                <div className="px-2 py-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-md h-full flex flex-col md:mx-10 md:py-6 lg:mx-60">
+                  <h2 className="capitalize">
+                    {/*{db[result.ref].question || db[result.ref].slug}*/}
+                  </h2>
+                  <ul className="grid grid-rows-1 justify-center md:block">
+                    <h2 className="font-sans text-black text-tag my-2 font-extrabold">
+                      Match found in:
+                    </h2>
+                    {found}
+                  </ul>
+                  <h2 className="pt-3 mt-4 border-t-2 border-solid">
+                    <a className="btn-wide" href={`${siteUrl}/${result.ref}`}>
+                      View Page
+                    </a>
+                  </h2>
+                </div>
+              </React.Fragment>
+            )
+            return item
+          })}
+        </div>
+        <div className="">
+          {queryResults.length == 0 && (
+            <section>
+              <h2>No Results</h2>
+            </section>
+          )}
+        </div>
+      </article>
+    </div>
+  )
+}
+
+export default SiteSearch
diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
new file mode 100644
index 000000000..f7234becf
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
@@ -0,0 +1,111 @@
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { graphql, useStaticQuery } from "gatsby"
+import SiteSearch from "./SiteSearch"
+import { createSearchIndex } from "../utils"
+
+export interface SearchWrapperProps {
+  siteUrl: string
+}
+const siteSearchQuery = graphql`
+  query searchNodes {
+    allProject {
+      nodes {
+        slug
+        question
+        title
+        summary
+        status
+        opportunityCloses
+        startDate
+        endDate
+        lastModified
+        agency
+        topics {
+          ...TopicDetails
+        }
+        deliverable
+        purpose
+        expertise
+        requirement
+        keyDates
+        priorResearch
+        statusOfData
+        fundingInfo
+        emailContent
+        mainContact {
+          name
+          title
+          employer
+          email
+        }
+        projectTeam {
+          name
+          title
+          employer
+          email
+        }
+        faq {
+          text
+          title
+        }
+      }
+    }
+    allGeneralPage {
+      nodes {
+        slug
+        lede
+        faq {
+          text
+          title
+        }
+        aims {
+          text
+          title
+        }
+        title
+      }
+    }
+  }
+`
+
+export const SearchWrapper: FunctionComponent<SearchWrapperProps> = ({
+  siteUrl,
+}: SearchWrapperProps) => {
+  console.log("search page has loaded")
+
+  // const queryData = useMemo(() => {
+  //   const data = useStaticQuery(siteSearchQuery)
+  //   return { ...data, siteUrl }
+  // }, [siteSearchQuery, siteUrl])
+  // const searchIndex = useMemo(() => createSearchIndex(queryData), [queryData])
+
+  /* this is a function which grabs the slug from the original documents; lunr tosses this info for SPEED
+  // const db = documents.reduce(function (acc, document) {
+  //   acc[document.slug] = document
+  //   return acc
+  // }, {})
+   */
+
+  // useEffect(() => {
+  //   // declare the data fetching function
+  //   const fetchData = async () => {
+  //     const data = await import("/static/lunrIndex.json")
+  //     let index = (lunr.Index.load(JSON.parse(data)))
+  //   }
+  //
+  //   // call the function
+  //   fetchData()
+  //     // make sure to catch any error
+  //     .catch(console.error)
+  // }, [])
+
+  return <div>{/*<SiteSearch siteUrl={siteUrl} index={index} db={db} />*/}</div>
+}
+export default SearchWrapper
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 95ab3944f..77214b083 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -1,242 +1,30 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from "react"
-import lunr from "lunr"
-import { SearchBar } from "../components/SearchBar"
-import { isNull } from "lodash"
 import { graphql } from "gatsby"
-import { ContactType, TopicType } from "../components"
+import SiteSearchWrapper from "../components/SiteSearchWrapper"
 
-export interface SearchProps {
+export interface SearchLayoutProps {
   data: {
     site: {
       siteMetadata: {
         siteUrl: string
       }
     }
-    allProject: {
-      nodes: {
-        slug: string
-        question: string
-        title: string
-        summary: string
-        status: string
-        opportunityCloses: Date
-        startDate: Date
-        endDate: Date
-        lastModified: Date
-        agency: string
-        topics?: TopicType[]
-        deliverable
-        purpose: string
-        expertise: string
-        requirement: string
-        keyDates: string
-        priorResearch: string
-        statusOfData: string
-        fundingInfo: string
-        emailContent: string
-        mainContact: ContactType
-        projectTeam?: ContactType[]
-        faq: {
-          text: string
-          title: string
-        }[]
-      }
-    }
-    allGeneralPage: {
-      nodes: {
-        slug: string
-        lede: string
-        faq: {
-          text: string
-          title: string
-        }[]
-        aims: {
-          text: string
-          title: string
-        }[]
-        title: string
-      }
-    }
   }
 }
 
-export const SearchPageLayout: FunctionComponent<SearchProps> = ({
+export const SearchPageLayout: FunctionComponent<SearchLayoutProps> = ({
   data: {
     site: {
       siteMetadata: { siteUrl },
     },
-    allProject,
-    allGeneralPage,
   },
-}: SearchProps) => {
-  const [searchQuery, setSearchQuery] = useState([])
-  const [queryResults, setQueryResults] = useState([])
-  const searchNodes = { siteUrl, allProject, allGeneralPage }
-  let documents = []
-
-  Object.keys(searchNodes).forEach((page) => {
-    if (page === "siteUrl") {
-      return
-    } else {
-      searchNodes[page].nodes.forEach((node) => {
-        let tempNode = structuredClone(node)
-        const newItem = Object.values(tempNode).map((field) => {
-          if (isNull(field)) {
-            return null
-          }
-
-          if (typeof field === "object") {
-            return Object.values(field)
-              .filter((value) => !isNull(value))
-              .map((value) =>
-                typeof value === "string"
-                  ? value
-                  : Object.values(value)
-                      .filter((k) => !isNull(k))
-                      .join(" ")
-              )
-              .join(" ")
-          } else {
-            return field
-          }
-        })
-        if (page === "allProject") {
-          if (!node.slug.includes("/")) {
-            tempNode.slug = `project/${node.slug}`
-          }
-        }
-
-        Object.keys(tempNode).forEach((page, i) => {
-          tempNode[page] = newItem[i]
-        })
-        documents.push(tempNode)
-      })
-    }
-  })
-
-  let db = documents.reduce(function (acc, document) {
-    acc[document.slug] = document
-    return acc
-  }, {})
-
-  let idx = lunr(function () {
-    this.ref("slug") // identifier
-    // fields to search
-    this.field("slug")
-    this.field("faq")
-    this.field("aims")
-    this.field("lede")
-    this.field("title")
-    this.field("question")
-    this.field("status")
-    this.field("agency")
-    this.field("topics")
-    this.field("mainContact")
-    this.field("summary")
-    this.field("status")
-    this.field("purpose")
-    this.field("emailContent")
-    this.field("projectTeam")
-    this.field("expertise")
-    this.field("requirement")
-
-    // allow access to the position of the found word in the field
-    this.metadataWhitelist = ["position"]
-    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
-     we have 'about' as one of the slugs, which spurred this decision
-    We can implement our own stopWordFilter:
-    var idx = lunr(function () {
-      // normal index definition
-      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
-       this.pipeline.remove(lunr.stopWordFilter)
-    })
-     */
-    this.pipeline.remove(lunr.stopWordFilter)
-
-    documents.forEach(function (doc) {
-      this.add(doc)
-    }, this)
-  })
-
-  useEffect(() => {
-    if (searchQuery.length > 0) {
-      let searchResults = idx.search(searchQuery)
-      let results = []
-      searchResults.forEach(function (result) {
-        results.push(db[result.ref])
-      })
-      setQueryResults(searchResults)
-    } else {
-      setQueryResults([])
-    }
-  }, [searchQuery])
-  //const meta = useSiteMetadata()
+}: SearchLayoutProps) => {
   return (
-    <div className="flex flex-col items-center justify-center align-middle text-center px-2">
-      <div className="container mx-auto mt-4 border-b-4 border-primary">
-        <SearchBar
-          id="siteSearch"
-          autoFocus={true}
-          label={"Search"}
-          placeholder={"Type to search pages..."}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-        <div className=" pt-2">
-          Number of found pages:
-          {queryResults.length}
-        </div>
-      </div>
-
-      <article className="py-6 md:container md:mx-auto">
-        <div className="grid grid-cols-1 md:mx-4 xl:mx-6 gap-4 justify-self-center">
-          {queryResults.map((result) => {
-            const fields = new Set<string>()
-            Object.keys(result.matchData.metadata).forEach((term) => {
-              Object.keys(result.matchData.metadata[term]).forEach((field) => {
-                fields.add(field)
-              })
-            })
-
-            const found = Array.from(fields).map((field, index) => (
-              <li
-                key={index}
-                className="inline mx-px px-3 py-1 mt-1 text-tag whitespace-nowrap font-semibold mr-2 bg-topics"
-              >
-                {field}
-              </li>
-            ))
-            const item = (
-              <React.Fragment key={result.ref}>
-                <div className="px-2 py-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-md h-full flex flex-col md:mx-10 md:py-6 lg:mx-60">
-                  <h2 className="capitalize">
-                    {db[result.ref].question || db[result.ref].slug}
-                  </h2>
-                  <ul className="grid grid-rows-1 justify-center md:block">
-                    <h2 className="font-sans text-black text-tag my-2 font-extrabold">
-                      Match found in:
-                    </h2>
-                    {found}
-                  </ul>
-                  <h2 className="pt-3 mt-4 border-t-2 border-solid">
-                    <a className="btn-wide" href={`${siteUrl}/${result.ref}`}>
-                      View Page
-                    </a>
-                  </h2>
-                </div>
-              </React.Fragment>
-            )
-            return item
-          })}
-        </div>
-        <div className="">
-          {queryResults.length == 0 && (
-            <section>
-              <h2>No Results</h2>
-            </section>
-          )}
-        </div>
-      </article>
-    </div>
+    <>
+      <main>
+        <SiteSearchWrapper siteUrl={siteUrl} />
+      </main>
+    </>
   )
 }
 
@@ -247,7 +35,6 @@ export const query = graphql`
   query SearchQuery($slug: String!) {
     ...HeadData
     ...LayoutData
-    ...SearchData
     page: generalPage(slug: { eq: $slug }) {
       title
       description: lede

From f7d470d3dcd03cc7a195b70df5689d76d1574c25 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 8 Nov 2023 16:49:55 -0500
Subject: [PATCH 45/64] feat: add function to create the search index to utils

---
 .../gatsby-theme-project-portal/src/utils.tsx | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/packages/gatsby-theme-project-portal/src/utils.tsx b/packages/gatsby-theme-project-portal/src/utils.tsx
index b675e1067..35eca9f41 100644
--- a/packages/gatsby-theme-project-portal/src/utils.tsx
+++ b/packages/gatsby-theme-project-portal/src/utils.tsx
@@ -1,3 +1,5 @@
+import { isNull } from "lodash"
+import lunr from "lunr"
 export const statusOutput = (
   status: string,
   open: any,
@@ -9,3 +11,87 @@ export const statusOutput = (
 export const isNA = (s: string): boolean => !s || s === "\n"
 export const isEmpty = (a: any[]): boolean =>
   a === null || a === undefined || a.length == 0
+
+export const createSearchIndex = (searchNodes) => {
+  // searchNodes = {allProject[], allGeneralPage[], siteUrl}
+  console.log("creating search index")
+  let documents = []
+  Object.keys(searchNodes).forEach((page) => {
+    if (page === "siteUrl") {
+      return
+    } else {
+      searchNodes[page].nodes.forEach((node) => {
+        let tempNode = structuredClone(node)
+        if (page === "allProject") {
+          if (!node.slug.includes("/")) {
+            tempNode.slug = `project/${node.slug}`
+          }
+        }
+        const newItem = Object.values(tempNode).map((field) => {
+          if (isNull(field)) {
+            return null
+          }
+
+          if (typeof field === "object") {
+            return Object.values(field)
+              .filter((value) => !isNull(value))
+              .map((value) =>
+                typeof value === "string"
+                  ? value
+                  : Object.values(value)
+                      .filter((k) => !isNull(k))
+                      .join(" ")
+              )
+              .join(" ")
+          } else {
+            return field
+          }
+        })
+
+        Object.keys(tempNode).forEach((page, i) => {
+          tempNode[page] = newItem[i]
+        })
+        documents.push(tempNode)
+      })
+    }
+  })
+  let index = lunr(function () {
+    this.ref("slug") // identifier
+    // fields to search
+    this.field("slug")
+    this.field("faq")
+    this.field("aims")
+    this.field("lede")
+    this.field("title")
+    this.field("question")
+    this.field("status")
+    this.field("agency")
+    this.field("topics")
+    this.field("mainContact")
+    this.field("summary")
+    this.field("status")
+    this.field("purpose")
+    this.field("emailContent")
+    this.field("projectTeam")
+    this.field("expertise")
+    this.field("requirement")
+
+    // allow access to the position of the found word in the field
+    this.metadataWhitelist = ["position"]
+    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
+           we have 'about' as one of the slugs, which spurred this decision
+           We can implement our own stopWordFilter:
+                    var idx = lunr(function () {
+                      // normal index definition
+                      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
+                       this.pipeline.remove(lunr.stopWordFilter)
+                    })
+        */
+    this.pipeline.remove(lunr.stopWordFilter)
+
+    documents.forEach(function (doc) {
+      this.add(doc)
+    }, this)
+  })
+  return index
+}

From c067fe4e99b36b36092845ff10b4dd5d501dd349 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:44:36 -0500
Subject: [PATCH 46/64] feat: createIndex onPostBuild

---
 .../gatsby-node.js                            | 158 +++++++++++++++++-
 .../gatsby-theme-project-portal/src/utils.tsx |  86 ----------
 2 files changed, 156 insertions(+), 88 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index 5be68018a..c74b2353e 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -1,6 +1,7 @@
 const { withDefaults } = require(`./utils/default-options`)
 const fs = require("fs")
-
+const lodash = require("lodash")
+const lunr = require("lunr")
 const {
   siteMetadataTypeDefs,
   projectTypeDefs,
@@ -113,7 +114,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       }
     }
   `)
-
   if (result.errors) {
     reporter.panicOnBuild(result.errors)
   }
@@ -194,3 +194,157 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     })
   })
 }
+
+exports.onPostBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
+  const result = await graphql(`
+    query {
+      allProject {
+        nodes {
+          title
+          agency
+          topics {
+            title
+          }
+          slug
+          summary
+          statusOfData
+          status
+          startDate
+          requirement
+          question
+          purpose
+          projectTeam {
+            name
+            employer
+          }
+          priorResearch
+          opportunityCloses
+          mainContact {
+            name
+          }
+          fundingInfo
+          expertise
+          faq {
+            text
+            title
+          }
+          deliverable
+          emailContent
+          endDate
+          slug
+        }
+      }
+      allGeneralPage {
+        nodes {
+          slug
+          lede
+          faq {
+            text
+            title
+          }
+          aims {
+            text
+            title
+          }
+          title
+        }
+      }
+    }
+  `)
+  const { allProject, allGeneralPage } = result.data
+  const createSearchIndex = (searchNodes) => {
+    // searchNodes = {allProject[], allGeneralPage[], siteUrl}
+    let documents = []
+    Object.keys(searchNodes).forEach((page) => {
+      if (page === "siteUrl") {
+        return
+      } else {
+        searchNodes[page].nodes.forEach((node) => {
+          let tempNode = structuredClone(node)
+          if (page === "allProject") {
+            if (!node.slug.includes("/")) {
+              tempNode.slug = `project/${node.slug}`
+            }
+          }
+          const newItem = Object.values(tempNode).map((field) => {
+            if (lodash.isNull(field)) {
+              return null
+            }
+
+            if (typeof field === "object") {
+              return Object.values(field)
+                .filter((value) => !lodash.isNull(value))
+                .map((value) =>
+                  typeof value === "string"
+                    ? value
+                    : Object.values(value)
+                        .filter((k) => !lodash.isNull(k))
+                        .join(" ")
+                )
+                .join(" ")
+            } else {
+              return field
+            }
+          })
+
+          Object.keys(tempNode).forEach((page, i) => {
+            tempNode[page] = newItem[i]
+          })
+          documents.push(tempNode)
+        })
+      }
+    })
+
+    let index = lunr(function () {
+      this.ref("slug") // identifier
+      // fields to search
+      this.field("slug")
+      this.field("faq")
+      this.field("aims")
+      this.field("lede")
+      this.field("title")
+      this.field("question")
+      this.field("status")
+      this.field("agency")
+      this.field("topics")
+      this.field("mainContact")
+      this.field("summary")
+      this.field("status")
+      this.field("purpose")
+      this.field("emailContent")
+      this.field("projectTeam")
+      this.field("expertise")
+      this.field("requirement")
+
+      // allow access to the position of the found word in the field
+      this.metadataWhitelist = ["position"]
+      /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
+             we have 'about' as one of the slugs, which spurred this decision
+             We can implement our own stopWordFilter:
+                      var idx = lunr(function () {
+                        // normal index definition
+                        this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
+                         this.pipeline.remove(lunr.stopWordFilter)
+                      })
+          */
+      this.pipeline.remove(lunr.stopWordFilter)
+
+      documents.forEach(function (doc) {
+        this.add(doc)
+      }, this)
+    })
+    return { index, documents }
+  }
+
+  const { index, documents } = createSearchIndex({ allProject, allGeneralPage })
+  fs.writeFile("static/lunr-index.json", JSON.stringify(index), (err) => {
+    if (err) console.error(err)
+  })
+  fs.writeFile("static/documents.json", JSON.stringify(documents), (err) => {
+    if (err) console.error(err)
+  })
+
+  reporter.info(
+    `Site was built with basePath: ${basePath} & pathPrefix: ${pathPrefix}`
+  )
+}
diff --git a/packages/gatsby-theme-project-portal/src/utils.tsx b/packages/gatsby-theme-project-portal/src/utils.tsx
index 35eca9f41..b675e1067 100644
--- a/packages/gatsby-theme-project-portal/src/utils.tsx
+++ b/packages/gatsby-theme-project-portal/src/utils.tsx
@@ -1,5 +1,3 @@
-import { isNull } from "lodash"
-import lunr from "lunr"
 export const statusOutput = (
   status: string,
   open: any,
@@ -11,87 +9,3 @@ export const statusOutput = (
 export const isNA = (s: string): boolean => !s || s === "\n"
 export const isEmpty = (a: any[]): boolean =>
   a === null || a === undefined || a.length == 0
-
-export const createSearchIndex = (searchNodes) => {
-  // searchNodes = {allProject[], allGeneralPage[], siteUrl}
-  console.log("creating search index")
-  let documents = []
-  Object.keys(searchNodes).forEach((page) => {
-    if (page === "siteUrl") {
-      return
-    } else {
-      searchNodes[page].nodes.forEach((node) => {
-        let tempNode = structuredClone(node)
-        if (page === "allProject") {
-          if (!node.slug.includes("/")) {
-            tempNode.slug = `project/${node.slug}`
-          }
-        }
-        const newItem = Object.values(tempNode).map((field) => {
-          if (isNull(field)) {
-            return null
-          }
-
-          if (typeof field === "object") {
-            return Object.values(field)
-              .filter((value) => !isNull(value))
-              .map((value) =>
-                typeof value === "string"
-                  ? value
-                  : Object.values(value)
-                      .filter((k) => !isNull(k))
-                      .join(" ")
-              )
-              .join(" ")
-          } else {
-            return field
-          }
-        })
-
-        Object.keys(tempNode).forEach((page, i) => {
-          tempNode[page] = newItem[i]
-        })
-        documents.push(tempNode)
-      })
-    }
-  })
-  let index = lunr(function () {
-    this.ref("slug") // identifier
-    // fields to search
-    this.field("slug")
-    this.field("faq")
-    this.field("aims")
-    this.field("lede")
-    this.field("title")
-    this.field("question")
-    this.field("status")
-    this.field("agency")
-    this.field("topics")
-    this.field("mainContact")
-    this.field("summary")
-    this.field("status")
-    this.field("purpose")
-    this.field("emailContent")
-    this.field("projectTeam")
-    this.field("expertise")
-    this.field("requirement")
-
-    // allow access to the position of the found word in the field
-    this.metadataWhitelist = ["position"]
-    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
-           we have 'about' as one of the slugs, which spurred this decision
-           We can implement our own stopWordFilter:
-                    var idx = lunr(function () {
-                      // normal index definition
-                      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
-                       this.pipeline.remove(lunr.stopWordFilter)
-                    })
-        */
-    this.pipeline.remove(lunr.stopWordFilter)
-
-    documents.forEach(function (doc) {
-      this.add(doc)
-    }, this)
-  })
-  return index
-}

From 2cfc17ce7d9ed5506ec3bd3f2c48bbbe0e833459 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:46:24 -0500
Subject: [PATCH 47/64] feat: fetch data from static folder, tell gatsby not to
 run fetch on build

Co-Authored-By: bradford roarr <49485134+broarr@users.noreply.github.com>
---
 .../src/components/SiteSearchWrapper.tsx      | 121 ++++--------------
 1 file changed, 24 insertions(+), 97 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
index f7234becf..839f7b57d 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
@@ -1,111 +1,38 @@
-import React, {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-import { graphql, useStaticQuery } from "gatsby"
+import React, { FunctionComponent, useEffect, useState } from "react"
+import lunr from "lunr"
 import SiteSearch from "./SiteSearch"
-import { createSearchIndex } from "../utils"
 
 export interface SearchWrapperProps {
   siteUrl: string
 }
-const siteSearchQuery = graphql`
-  query searchNodes {
-    allProject {
-      nodes {
-        slug
-        question
-        title
-        summary
-        status
-        opportunityCloses
-        startDate
-        endDate
-        lastModified
-        agency
-        topics {
-          ...TopicDetails
-        }
-        deliverable
-        purpose
-        expertise
-        requirement
-        keyDates
-        priorResearch
-        statusOfData
-        fundingInfo
-        emailContent
-        mainContact {
-          name
-          title
-          employer
-          email
-        }
-        projectTeam {
-          name
-          title
-          employer
-          email
-        }
-        faq {
-          text
-          title
-        }
-      }
-    }
-    allGeneralPage {
-      nodes {
-        slug
-        lede
-        faq {
-          text
-          title
-        }
-        aims {
-          text
-          title
-        }
-        title
-      }
-    }
-  }
-`
 
 export const SearchWrapper: FunctionComponent<SearchWrapperProps> = ({
   siteUrl,
 }: SearchWrapperProps) => {
-  console.log("search page has loaded")
+  const [idx, setIdx] = useState()
+  const [db, setDb] = useState()
+  useEffect(() => {
+    const getIndex = async () => {
+      const savedIndex = await (await fetch("/lunr-index.json")).json()
+      const documents = await (await fetch("/documents.json")).json()
 
-  // const queryData = useMemo(() => {
-  //   const data = useStaticQuery(siteSearchQuery)
-  //   return { ...data, siteUrl }
-  // }, [siteSearchQuery, siteUrl])
-  // const searchIndex = useMemo(() => createSearchIndex(queryData), [queryData])
-
-  /* this is a function which grabs the slug from the original documents; lunr tosses this info for SPEED
-  // const db = documents.reduce(function (acc, document) {
-  //   acc[document.slug] = document
-  //   return acc
-  // }, {})
-   */
+      setIdx(lunr.Index.load(savedIndex))
+      // this is a function which grabs the slug from the original documents
+      // lunr tosses this info for SPEED
+      setDb(
+        documents.reduce(function (acc, document) {
+          acc[document.slug] = document
+          return acc
+        }, {})
+      )
+    }
 
-  // useEffect(() => {
-  //   // declare the data fetching function
-  //   const fetchData = async () => {
-  //     const data = await import("/static/lunrIndex.json")
-  //     let index = (lunr.Index.load(JSON.parse(data)))
-  //   }
-  //
-  //   // call the function
-  //   fetchData()
-  //     // make sure to catch any error
-  //     .catch(console.error)
-  // }, [])
+    // Because Gatsby runs this on build, we need to say to ignore getting the json files
+    // if the window is undefined (not running in the browser)
+    // see: https://www.gatsbyjs.com/docs/debugging-html-builds/
+    if (typeof window !== `undefined`) getIndex().catch(console.error)
+  }, [])
 
-  return <div>{/*<SiteSearch siteUrl={siteUrl} index={index} db={db} />*/}</div>
+  return <div>{<SiteSearch siteUrl={siteUrl} index={idx} db={db} />}</div>
 }
 export default SearchWrapper

From 88816d648ff5e727385e6520a4abe05cfec970eb Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:47:06 -0500
Subject: [PATCH 48/64] fix: cleanup unused imports

---
 .../src/components/SiteSearch.tsx                         | 8 +++++---
 .../src/layouts/SearchPageLayout.tsx                      | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
index 2e2f88c8f..933d3987f 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
@@ -1,14 +1,16 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from "react"
+import React, { FunctionComponent, useEffect, useState } from "react"
 import { SearchBar } from "../components/SearchBar"
 
 export interface SearchProps {
   siteUrl: string
   index
+  db: Function
 }
 
 export const SiteSearch: FunctionComponent<SearchProps> = ({
   siteUrl,
   index,
+  db,
 }: SearchProps) => {
   const [searchQuery, setSearchQuery] = useState([])
   const [queryResults, setQueryResults] = useState([])
@@ -18,7 +20,7 @@ export const SiteSearch: FunctionComponent<SearchProps> = ({
       let searchResults = index.search(searchQuery)
       let results = []
       searchResults.forEach(function (result) {
-        //results.push(db[result.ref])
+        results.push(db[result.ref])
       })
       setQueryResults(searchResults)
     } else {
@@ -64,7 +66,7 @@ export const SiteSearch: FunctionComponent<SearchProps> = ({
               <React.Fragment key={result.ref}>
                 <div className="px-2 py-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-md h-full flex flex-col md:mx-10 md:py-6 lg:mx-60">
                   <h2 className="capitalize">
-                    {/*{db[result.ref].question || db[result.ref].slug}*/}
+                    {db[result.ref].question || db[result.ref].slug}
                   </h2>
                   <ul className="grid grid-rows-1 justify-center md:block">
                     <h2 className="font-sans text-black text-tag my-2 font-extrabold">
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 77214b083..8be281f19 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from "react"
+import React, { FunctionComponent } from "react"
 import { graphql } from "gatsby"
 import SiteSearchWrapper from "../components/SiteSearchWrapper"
 

From 6dfc40ae56bda017b8223e6080892e1f23f1edfb Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:55:22 -0500
Subject: [PATCH 49/64] style: container on mobile larger

---
 .../gatsby-theme-project-portal/src/components/SiteSearch.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
index 933d3987f..9fcf6c952 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
@@ -44,7 +44,7 @@ export const SiteSearch: FunctionComponent<SearchProps> = ({
         </div>
       </div>
 
-      <article className="py-6 md:container md:mx-auto">
+      <article className="py-6 container mx-auto">
         <div className="grid grid-cols-1 md:mx-4 xl:mx-6 gap-4 justify-self-center">
           {queryResults.map((result) => {
             const fields = new Set<string>()

From b25e1979d4c47db4f833112cfdc367739d463fde Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 13 Nov 2023 13:13:51 -0500
Subject: [PATCH 50/64] Update
 packages/gatsby-theme-project-portal/gatsby-node.js

let's try this per @jashlu

Co-authored-by: Josh Lu <joshua_lu1@brown.edu>
---
 packages/gatsby-theme-project-portal/gatsby-node.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index c74b2353e..2b00eb2f8 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -337,10 +337,10 @@ exports.onPostBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
   }
 
   const { index, documents } = createSearchIndex({ allProject, allGeneralPage })
-  fs.writeFile("static/lunr-index.json", JSON.stringify(index), (err) => {
+  await fs.writeFile("static/lunr-index.json", JSON.stringify(index), (err) => {
     if (err) console.error(err)
   })
-  fs.writeFile("static/documents.json", JSON.stringify(documents), (err) => {
+  await fs.writeFile("static/documents.json", JSON.stringify(documents), (err) => {
     if (err) console.error(err)
   })
 

From 4220071fbad62a359290ec067762dcf6f781baf3 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 13 Nov 2023 14:47:31 -0500
Subject: [PATCH 51/64] fix: build index files onPREbuild instead of
 onPOSTbuild

---
 packages/gatsby-theme-project-portal/gatsby-node.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index 2b00eb2f8..a002a914f 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -195,7 +195,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   })
 }
 
-exports.onPostBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
+exports.onPreBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
   const result = await graphql(`
     query {
       allProject {
@@ -340,9 +340,13 @@ exports.onPostBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
   await fs.writeFile("static/lunr-index.json", JSON.stringify(index), (err) => {
     if (err) console.error(err)
   })
-  await fs.writeFile("static/documents.json", JSON.stringify(documents), (err) => {
-    if (err) console.error(err)
-  })
+  await fs.writeFile(
+    "static/documents.json",
+    JSON.stringify(documents),
+    (err) => {
+      if (err) console.error(err)
+    }
+  )
 
   reporter.info(
     `Site was built with basePath: ${basePath} & pathPrefix: ${pathPrefix}`

From 9689ff8e5fa4750815f11075939f8f5fcf013b6e Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 13 Nov 2023 14:57:05 -0500
Subject: [PATCH 52/64] feat: specify type for lunr index

---
 .../gatsby-theme-project-portal/src/components/SiteSearch.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
index 9fcf6c952..5af823202 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
@@ -1,9 +1,10 @@
 import React, { FunctionComponent, useEffect, useState } from "react"
 import { SearchBar } from "../components/SearchBar"
+import lunr from "lunr"
 
 export interface SearchProps {
   siteUrl: string
-  index
+  index: lunr.Index
   db: Function
 }
 

From d5e2ceba929eccfa3afb0d83518b12511b652ef5 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 14 Nov 2023 10:01:33 -0500
Subject: [PATCH 53/64] feat: add storybook for SiteSearch

---
 .../src/components/SiteSearch.stories.tsx     | 448 ++++++++++++++++++
 .../src/layouts/SearchPageLayout.stories.tsx  | 108 -----
 .../src/layouts/SearchPageLayout.tsx          |  10 +
 3 files changed, 458 insertions(+), 108 deletions(-)
 create mode 100644 packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
 delete mode 100644 packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
new file mode 100644
index 000000000..ff8e1c23d
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
@@ -0,0 +1,448 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import SiteSearch from "./SiteSearch"
+import lunr from "lunr"
+import lodash from "lodash"
+
+const createSearchIndex = (searchNodes) => {
+  // searchNodes = {allProject[], allGeneralPage[], siteUrl}
+  let documents = []
+  Object.keys(searchNodes).forEach((page) => {
+    if (page === "siteUrl") {
+      return
+    } else {
+      searchNodes[page].nodes.forEach((node) => {
+        let tempNode = structuredClone(node)
+        if (page === "allProject") {
+          if (!node.slug.includes("/")) {
+            tempNode.slug = `project/${node.slug}`
+          }
+        }
+        const newItem = Object.values(tempNode).map((field) => {
+          if (lodash.isNull(field)) {
+            return null
+          }
+
+          if (typeof field === "object") {
+            return Object.values(field)
+              .filter((value) => !lodash.isNull(value))
+              .map((value) =>
+                typeof value === "string"
+                  ? value
+                  : Object.values(value)
+                      .filter((k) => !lodash.isNull(k))
+                      .join(" ")
+              )
+              .join(" ")
+          } else {
+            return field
+          }
+        })
+
+        Object.keys(tempNode).forEach((page, i) => {
+          tempNode[page] = newItem[i]
+        })
+        documents.push(tempNode)
+      })
+    }
+  })
+
+  let index = lunr(function () {
+    this.ref("slug") // identifier
+    // fields to search
+    this.field("slug")
+    this.field("faq")
+    this.field("aims")
+    this.field("lede")
+    this.field("title")
+    this.field("question")
+    this.field("status")
+    this.field("agency")
+    this.field("topics")
+    this.field("mainContact")
+    this.field("summary")
+    this.field("status")
+    this.field("purpose")
+    this.field("emailContent")
+    this.field("projectTeam")
+    this.field("expertise")
+    this.field("requirement")
+
+    // allow access to the position of the found word in the field
+    this.metadataWhitelist = ["position"]
+    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
+           we have 'about' as one of the slugs, which spurred this decision
+           We can implement our own stopWordFilter:
+                    var idx = lunr(function () {
+                      // normal index definition
+                      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
+                       this.pipeline.remove(lunr.stopWordFilter)
+                    })
+        */
+    this.pipeline.remove(lunr.stopWordFilter)
+
+    documents.forEach(function (doc) {
+      this.add(doc)
+    }, this)
+  })
+  return { index, documents }
+}
+
+const meta: Meta<typeof SiteSearch> = {
+  component: SiteSearch,
+  tags: ["autodocs"],
+  includeStories: /^[A-Z]/,
+}
+
+export const exampleProjects = {
+  nodes: [
+    {
+      title: "completed no date",
+      agency: "",
+      topics: "Military Facilities",
+      slug: "project/completed-project-nodate",
+      summary: "",
+      statusOfData: "",
+      status: "completed",
+      startDate: null,
+      requirement: "",
+      question: "Completed no date",
+      purpose: "",
+      projectTeam: "",
+      priorResearch: null,
+      opportunityCloses: null,
+      mainContact: "Isabel",
+      fundingInfo: "",
+      expertise: "",
+      faq: null,
+      deliverable: "",
+      emailContent: "",
+      endDate: null,
+    },
+    {
+      title: "ongoing no date",
+      agency: "",
+      topics: "Military Facilities",
+      slug: "project/ongoing-project-nodate",
+      summary: "",
+      statusOfData: "",
+      status: "ongoing",
+      startDate: null,
+      requirement: "",
+      question: "Ongoing no date",
+      purpose: "",
+      projectTeam: "",
+      priorResearch: null,
+      opportunityCloses: null,
+      mainContact: "Isabel",
+      fundingInfo: "",
+      expertise: "",
+      faq: null,
+      deliverable: "",
+      emailContent: "",
+      endDate: null,
+    },
+    {
+      title: "completed 2",
+      agency: "example agency",
+      topics: "Facilities",
+      slug: "project/completed-project2",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "completed",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question:
+        "Hello world2 (from json)? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: "We are looking for answers to specific projects. This is another question? Here's an answer for that question! Yay! Here's another question on the CMS side",
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "ongoing 1",
+      agency: "example agency",
+      topics: "Facilities",
+      slug: "project/ongoing-project",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "ongoing",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "Hello world (from json)?",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "completed 1",
+      agency: "example agency",
+      topics: "Facilities",
+      slug: "project/completed-project",
+      summary:
+        'example summary that is also testing the media folder.  \n\n![A watercolor painting of a cat laying in some leaves.](/image/cat.jpg "Cat")',
+      statusOfData: "example statusOfData",
+      status: "completed",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "Hello world (from json)?",
+      purpose: "example purpose",
+      projectTeam: "Horacia II Horace I",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "ongoing 2",
+      agency: "example agency",
+      topics: "Facilities",
+      slug: "project/ongoing-project2",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "ongoing",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "Hello world (from json)?",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "open 2",
+      agency: "example agency",
+      topics: "Technologies Facilities",
+      slug: "project/open-project-2",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "open",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "Hello world (from json)?",
+      purpose: "example purpose",
+      projectTeam: "",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Isabel",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "Open Project 3",
+      agency: "example agency",
+      topics: "Security Public Health",
+      slug: "project/open-project3",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "open",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "Open Project 3",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "open no date",
+      agency: "",
+      topics: "Military Facilities",
+      slug: "project/open-project-nodate",
+      summary: "",
+      statusOfData: "",
+      status: "open",
+      startDate: null,
+      requirement: "",
+      question: "Open no date",
+      purpose: "",
+      projectTeam: "",
+      priorResearch: null,
+      opportunityCloses: null,
+      mainContact: "Isabel",
+      fundingInfo: "",
+      expertise: "",
+      faq: null,
+      deliverable: "",
+      emailContent: "",
+      endDate: null,
+    },
+    {
+      title: "Open Project 5",
+      agency: "example agency",
+      topics: "Facilities Public Health",
+      slug: "project/open-project5",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "open",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "0123456789 abcdefghijklmnop 26 chars/1 space",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "Open Project 6",
+      agency: "example agency",
+      topics: "Technologies Military Security",
+      slug: "project/open-project6",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "open",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "012 3 45 67 89 ab cd efg hij klm 23 chars/9 spaces",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "open 1",
+      agency: "example agency",
+      topics: "Military Facilities",
+      slug: "project/open-project",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "open",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "Hello world (from json)?",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Isabel",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+    {
+      title: "Open Project 4",
+      agency: "example agency",
+      topics: "Security",
+      slug: "project/open-project4",
+      summary: "example summary",
+      statusOfData: "example statusOfData",
+      status: "open",
+      startDate: "2022-06-17",
+      requirement: "example requirement",
+      question: "012 345 6789 ab cd efg hij klmn 24 chars/7 spaces",
+      purpose: "example purpose",
+      projectTeam: "Horace I Horacia II",
+      priorResearch: null,
+      opportunityCloses: "2022-10-28",
+      mainContact: "Horace I",
+      fundingInfo: "example fundingInfo",
+      expertise: "example expertise",
+      faq: null,
+      deliverable: "example deliverable",
+      emailContent: "example emailContent",
+      endDate: "2016-12-15",
+    },
+  ],
+}
+
+export const exampleGenPages = {
+  nodes: [
+    {
+      slug: "about",
+      lede: null,
+      faq: "We are looking for academic and scientific researchers from a range of disciplines relevant to policy and program design and evaluation. Example disciplines include public policy, economics, behavioral science, sociology, marketing, data analytics, and law, but we encourage you to apply for any opportunity that you think would be a good fit for you or your team. Where possible, project summaries include information about what types of expertise are likely needed, but if you have an idea for how to contribute that is different or not stated in the summary, please let us know. What sort of collaborators are you looking for? No, but prior experience is helpful. Applied research and collaboration with government partners often requires more flexibility and communication than a lab-based or retrospective study, so be sure to discuss expectations and timeline when considering a collaboration opportunity. Do I need to have prior experience working with government? It depends on the project, so check out the project description to learn more about expectations and requirements. Opportunities typically require a PhD or equivalent experience. Those challenges open to student participation will usually state so in the announcement. Are these opportunities available for students? Needs vary from project to project with respect to expertise needed, project scope, timeline, and other factors. Each project summary page describes expectations and requirements for that project. When appropriate and feasible, the City of San Antonio encourages collaboration within or across organizations. If you are interested in working with a team, please indicate this on the interest form for the project for further discussion. Can multiple people work on a project? Some projects have dedicated funding, others may not have funding available at this time, and some may be open to funding from external sources. The extent and source of funding will depend on the scope of the project, level of expertise needed, and other factors. Research partners, City department representatives, and the Office of Innovation can discuss funding details on a case-by-case basis, including needs and potential sources. What kind of funding is available? Data availability depends on the specific project. Projects may involve qualitative and quantitative data, and collecting or analyzing data. In many cases, academic collaborators will need to sign a Data Use Agreement in order to access and use existing government data. What kind of data is available? After we collect expressions of interest, City departments, research partners, and the Office of Innovation will work together to determine fit and how to best approach the project. Some projects may have a Q&A session to provide more information and some may require a more detailed submission process. The City of San Antonio prioritizes partnerships that are scalable, sustainable, and develop public, open-source resources. What happens after I submit an interest form? The City of San Antonio is always interested in exploring government–research partnerships or other cross-sector collaborative opportunities for improving City services. If you have a research idea, please email us at [rdleague@sanantonio.gov](mailto:rdleague@sanantonio.gov) with a description of your idea. The description should include, at a minimum, a project overview, how the results would benefit residents of San Antonio, and an estimated project timeline. We’ll get in touch to discuss if it’s a good fit for the portal. Can I propose a project idea? The R&D League is a partnership established to build a research and development (R&D) program in the City of San Antonio that paves the path to a better future for our community. The League creates opportunities for cross-sector, multi-disciplinary teams to utilize scientific methods and data to investigate new ideas, facilitate evidence-based policymaking, and explore the frontier of innovation for our 1.5 million residents.\n\nCore League members are the City of San Antonio (CoSA), Southwest Research Institute (SwRI), United Services Automobile Association (USAA), the University of Texas at San Antonio (UTSA), and The Policy Lab @ Brown University. [Learn more about the R&D League](https://www.sanantonio.gov/Innovation/R-D-League).\n What is the R&D League?",
+      aims: "The Research Partnerships Portal is a pilot initiative from the City of San Antonio’s Office of Innovation and multiple City departments. Our goal is to connect City departments and offices with San Antonio's research and philanthropic sectors to answer important questions about how to best design, deliver, and evaluate city services. We believe that evidence is an important part of improving public services and policy, and we're excited about what we can do together! Build and use evidence to improve the lives of San Antonio residents. We believe that great work is built from lasting relationships. We're looking for thought partners, not just evaluators, and seek collaborators from a wide variety of research disciplines. Project opportunities may include problem framing, introduction to existing research, intervention and evaluation design, technical assistance, reporting, and other research and collaboration areas. Promote durable partnerships at all stages of the learning process. Applied research on a specific challenge has the potential to benefit public services as a whole. To do this, we need to be transparent with our results and methods. We know that publication is an important part of the research process, and will work with collaborators to support publication where appropriate. Share knowledge about what works.",
+      title: "About the Project Portal",
+    },
+    {
+      slug: "contact",
+      lede: "Our team is happy to answer questions about the partnerships pilot, project-specific questions, general questions about working with the City of San Antonio, and ideas for how we can improve this site.",
+      faq: null,
+      aims: null,
+      title:
+        "Want to talk to the Office of Innovation? We'd love to hear from you!",
+    },
+    {
+      slug: "search",
+      lede: null,
+      faq: null,
+      aims: null,
+      title: "Search the Whole Site!",
+    },
+  ],
+}
+
+const { index, documents } = createSearchIndex({
+  exampleProjects,
+  exampleGenPages,
+})
+const db = documents.reduce(function (acc, document) {
+  acc[document.slug] = document
+  return acc
+}, {})
+export const primaryData = {
+  siteUrl: "localhost",
+  index: index,
+  db: db,
+}
+
+export default meta
+
+type Story = StoryObj<typeof SiteSearch>
+export const Primary: Story = {
+  args: primaryData,
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
deleted file mode 100644
index be995a206..000000000
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.stories.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { SearchPageLayout } from "./SearchPageLayout"
-import * as ProjectTeamStories from "../components/ProjectTeam.stories"
-
-const meta: Meta<typeof SearchPageLayout> = {
-  component: SearchPageLayout,
-  tags: ["autodocs"],
-}
-
-export default meta
-
-type Story = StoryObj<typeof SearchPageLayout>
-
-export const Primary: Story = {
-  args: {
-    data: {
-      allGeneralPage: {
-        nodes: {
-          slug: "/about",
-          lede: "About the Tests",
-          aims: [
-            {
-              title: "About Aim",
-              text: "Some text",
-            },
-          ],
-          faq: [
-            {
-              title: "Is this an FAQ question?",
-              text: "Yes, and here is the answer.",
-            },
-          ],
-          title: null,
-        },
-      },
-      allProject: {
-        nodes: {
-          slug: "/test",
-          question: "Test Question?",
-          summary: "Test Summary\n",
-          title: "The Title",
-
-          deliverable: "- Test.\n- Test.\n- Test.\n",
-          purpose: "- Sample.",
-          fundingInfo: "- Test.\n- Test.\n",
-          statusOfData: "Testing\n",
-          priorResearch:
-            "None, but we will share project background with our selected collaborator.\n",
-
-          expertise: "- Testing.\n- Testing.\n",
-          requirement: "None\n",
-          keyDates:
-            "We are ready to begin the project as soon as we identify a collaborator.\n",
-          emailContent: "- Testing.\n- Testing.\n",
-          mainContact: {
-            name: "Contact Name",
-            title: "Title",
-            employer: "Employer",
-            email: "some-email@example.com",
-          },
-
-          projectTeam: ProjectTeamStories.Primary.args.contacts,
-
-          faq: [{ text: "Answer 1!", title: "Question 1?" }],
-
-          status: "open",
-          opportunityCloses: new Date("2022-03-04"),
-          startDate: new Date("2022-01-03"),
-          endDate: new Date("2022-03-04"),
-          agency: "Sample Agency",
-          lastModified: new Date("2022-05-27T16:34:04.000Z"),
-          topics: [{ slug: "test", title: "Test" }],
-        },
-      },
-      site: { siteMetadata: { siteUrl: "https://localhost" } },
-    },
-  },
-}
-
-export const TailwindXSWindow: Story = {
-  args: Primary.args,
-  parameters: { viewport: { defaultViewport: "tailwindXS" } },
-}
-
-export const TailwindSMWindow: Story = {
-  args: Primary.args,
-  parameters: { viewport: { defaultViewport: "tailwindSM" } },
-}
-
-export const TailwindMDWindow: Story = {
-  args: Primary.args,
-  parameters: { viewport: { defaultViewport: "tailwindMD" } },
-}
-
-export const TailwindLGWindow: Story = {
-  args: Primary.args,
-  parameters: { viewport: { defaultViewport: "tailwindLG" } },
-}
-
-export const TailwindXLWindow: Story = {
-  args: Primary.args,
-  parameters: { viewport: { defaultViewport: "tailwindXL" } },
-}
-
-export const Tailwind2XLWindow: Story = {
-  args: Primary.args,
-  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
-}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index 8be281f19..acae32cb6 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -1,6 +1,8 @@
 import React, { FunctionComponent } from "react"
 import { graphql } from "gatsby"
 import SiteSearchWrapper from "../components/SiteSearchWrapper"
+import { HeaderWithImage } from "../components"
+import { ImageDataLike } from "gatsby-plugin-image"
 
 export interface SearchLayoutProps {
   data: {
@@ -9,6 +11,10 @@ export interface SearchLayoutProps {
         siteUrl: string
       }
     }
+    generalPage: {
+      title: string
+      image: ImageDataLike
+    }
   }
 }
 
@@ -17,11 +23,15 @@ export const SearchPageLayout: FunctionComponent<SearchLayoutProps> = ({
     site: {
       siteMetadata: { siteUrl },
     },
+    generalPage: { title, image },
   },
 }: SearchLayoutProps) => {
   return (
     <>
       <main>
+        <header>
+          <HeaderWithImage title={title} image={image} lede={""} />
+        </header>
         <SiteSearchWrapper siteUrl={siteUrl} />
       </main>
     </>

From 9690b76a789dfd10dcbd00afd0977c439e3e1379 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 15 Nov 2023 14:41:09 -0500
Subject: [PATCH 54/64] feat: add storybook play for valid and invalid searches

---
 .../src/components/SiteSearch.stories.tsx     | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
index ff8e1c23d..e8df68df0 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
+import { userEvent, within } from "@storybook/testing-library"
+
 import SiteSearch from "./SiteSearch"
 import lunr from "lunr"
 import lodash from "lodash"
@@ -404,7 +406,7 @@ export const exampleGenPages = {
     {
       slug: "about",
       lede: null,
-      faq: "We are looking for academic and scientific researchers from a range of disciplines relevant to policy and program design and evaluation. Example disciplines include public policy, economics, behavioral science, sociology, marketing, data analytics, and law, but we encourage you to apply for any opportunity that you think would be a good fit for you or your team. Where possible, project summaries include information about what types of expertise are likely needed, but if you have an idea for how to contribute that is different or not stated in the summary, please let us know. What sort of collaborators are you looking for? No, but prior experience is helpful. Applied research and collaboration with government partners often requires more flexibility and communication than a lab-based or retrospective study, so be sure to discuss expectations and timeline when considering a collaboration opportunity. Do I need to have prior experience working with government? It depends on the project, so check out the project description to learn more about expectations and requirements. Opportunities typically require a PhD or equivalent experience. Those challenges open to student participation will usually state so in the announcement. Are these opportunities available for students? Needs vary from project to project with respect to expertise needed, project scope, timeline, and other factors. Each project summary page describes expectations and requirements for that project. When appropriate and feasible, the City of San Antonio encourages collaboration within or across organizations. If you are interested in working with a team, please indicate this on the interest form for the project for further discussion. Can multiple people work on a project? Some projects have dedicated funding, others may not have funding available at this time, and some may be open to funding from external sources. The extent and source of funding will depend on the scope of the project, level of expertise needed, and other factors. Research partners, City department representatives, and the Office of Innovation can discuss funding details on a case-by-case basis, including needs and potential sources. What kind of funding is available? Data availability depends on the specific project. Projects may involve qualitative and quantitative data, and collecting or analyzing data. In many cases, academic collaborators will need to sign a Data Use Agreement in order to access and use existing government data. What kind of data is available? After we collect expressions of interest, City departments, research partners, and the Office of Innovation will work together to determine fit and how to best approach the project. Some projects may have a Q&A session to provide more information and some may require a more detailed submission process. The City of San Antonio prioritizes partnerships that are scalable, sustainable, and develop public, open-source resources. What happens after I submit an interest form? The City of San Antonio is always interested in exploring government–research partnerships or other cross-sector collaborative opportunities for improving City services. If you have a research idea, please email us at [rdleague@sanantonio.gov](mailto:rdleague@sanantonio.gov) with a description of your idea. The description should include, at a minimum, a project overview, how the results would benefit residents of San Antonio, and an estimated project timeline. We’ll get in touch to discuss if it’s a good fit for the portal. Can I propose a project idea? The R&D League is a partnership established to build a research and development (R&D) program in the City of San Antonio that paves the path to a better future for our community. The League creates opportunities for cross-sector, multi-disciplinary teams to utilize scientific methods and data to investigate new ideas, facilitate evidence-based policymaking, and explore the frontier of innovation for our 1.5 million residents.\n\nCore League members are the City of San Antonio (CoSA), Southwest Research Institute (SwRI), United Services Automobile Association (USAA), the University of Texas at San Antonio (UTSA), and The Policy Lab @ Brown University. [Learn more about the R&D League](https://www.sanantonio.gov/Innovation/R-D-League).\n What is the R&D League?",
+      faq: "We are looking for academic and scientific researchers from a range of disciplines relevant to policy and program design and evaluation. Example disciplines include public policy, economics, behavioral science, sociology, marketing, data analytics, and law, but we encourage you to apply for any opportunity that you think would be a good fit for you or your team. Where possible, project summaries include information about what types of expertise are likely needed, but if you have an idea for how to contribute that is different or not stated in the summary, please let us know. What sort of collaborators are you looking for? No, but prior experience is helpful. Applied research and collaboration with government partners often requires more flexibility and communication than a lab-based or retrospective study, so be sure to discuss expectations and timeline when considering a collaboration opportunity. Do I need to have prior experience working with government? It depends on the project, so check out the project description to learn more about expectations and requirements. Opportunities typically require a PhD or equivalent experience. Those challenges open to student participation will usually state so in the announcement. Are these opportunities available for students? Needs vary from project to project with respect to expertise needed, project scope, timeline, and other factors. Each project summary page describes expectations and requirements for that project. When appropriate and feasible, the City of San Antonio encourages collaboration within or across organizations. If you are interested in working with a team, please indicate this on the interest form for the project for further discussion. Can multiple people work on a project? Some projects have dedicated funding, others may not have funding available at this time, and some may be open to funding from external sources. The extent and source of funding will depend on the scope of the project, level of expertise needed, and other factors. Research partners, City department representatives, and the Office of Innovation can discuss funding details on a case-by-case basis, including needs and potential sources. What kind of funding is available? Data availability depends on the specific project. Projects may involve qualitative and quantitative data, and collecting or analyzing data. In many cases, academic collaborators will need to sign a Data Use Agreement in order to access and use existing government data. What kind of data is available? After we collect expressions of interest, City departments, research partners, and the Office of Innovation will work together to determine fit and how to best approach the project. Some projects may have a Q&A session to provide more information and some may require a more detailed submission process. The City of San Antonio prioritizes partnerships that are scalable, sustainable, and develop public, open-source resources. What happens after I submit an interest form? The City of San Antonio is always interested in exploring government–research partnerships or other cross-sector collaborative opportunities for improving City services. If you have a research idea, please search us at [rdleague@sanantonio.gov](mailto:rdleague@sanantonio.gov) with a description of your idea. The description should include, at a minimum, a project overview, how the results would benefit residents of San Antonio, and an estimated project timeline. We’ll get in touch to discuss if it’s a good fit for the portal. Can I propose a project idea? The R&D League is a partnership established to build a research and development (R&D) program in the City of San Antonio that paves the path to a better future for our community. The League creates opportunities for cross-sector, multi-disciplinary teams to utilize scientific methods and data to investigate new ideas, facilitate evidence-based policymaking, and explore the frontier of innovation for our 1.5 million residents.\n\nCore League members are the City of San Antonio (CoSA), Southwest Research Institute (SwRI), United Services Automobile Association (USAA), the University of Texas at San Antonio (UTSA), and The Policy Lab @ Brown University. [Learn more about the R&D League](https://www.sanantonio.gov/Innovation/R-D-League).\n What is the R&D League?",
       aims: "The Research Partnerships Portal is a pilot initiative from the City of San Antonio’s Office of Innovation and multiple City departments. Our goal is to connect City departments and offices with San Antonio's research and philanthropic sectors to answer important questions about how to best design, deliver, and evaluate city services. We believe that evidence is an important part of improving public services and policy, and we're excited about what we can do together! Build and use evidence to improve the lives of San Antonio residents. We believe that great work is built from lasting relationships. We're looking for thought partners, not just evaluators, and seek collaborators from a wide variety of research disciplines. Project opportunities may include problem framing, introduction to existing research, intervention and evaluation design, technical assistance, reporting, and other research and collaboration areas. Promote durable partnerships at all stages of the learning process. Applied research on a specific challenge has the potential to benefit public services as a whole. To do this, we need to be transparent with our results and methods. We know that publication is an important part of the research process, and will work with collaborators to support publication where appropriate. Share knowledge about what works.",
       title: "About the Project Portal",
     },
@@ -434,6 +436,7 @@ const db = documents.reduce(function (acc, document) {
   acc[document.slug] = document
   return acc
 }, {})
+
 export const primaryData = {
   siteUrl: "localhost",
   index: index,
@@ -446,3 +449,59 @@ type Story = StoryObj<typeof SiteSearch>
 export const Primary: Story = {
   args: primaryData,
 }
+
+export const ValidSearches: Story = {
+  args: primaryData,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    const searchInput = canvas.getByLabelText("Search")
+
+    await userEvent.type(searchInput, "about", {
+      delay: 500,
+    })
+
+    await userEvent.clear(searchInput)
+
+    await userEvent.type(searchInput, "project", {
+      delay: 500,
+    })
+  },
+}
+
+export const InvalidSearches: Story = {
+  args: primaryData,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    const searchInput = canvas.getByLabelText("Search")
+
+    await userEvent.type(searchInput, "%about%", {
+      delay: 500,
+    })
+
+    await userEvent.clear(searchInput)
+
+    await userEvent.type(searchInput, "😋", {
+      delay: 500,
+    })
+
+    await userEvent.clear(searchInput)
+
+    await userEvent.type(searchInput, "ひらがな", {
+      delay: 500,
+    })
+
+    await userEvent.clear(searchInput)
+
+    await userEvent.type(searchInput, "𒐫", {
+      delay: 500,
+    })
+
+    await userEvent.clear(searchInput)
+
+    await userEvent.type(searchInput, "____", {
+      delay: 500,
+    })
+  },
+}

From 90a1569bcd0353de4bf0b700e43c1dc46a474eef Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 17 Nov 2023 13:24:03 -0500
Subject: [PATCH 55/64] refactor: move createSearchIndex to utils

---
 .../gatsby-node.js                            | 86 +-----------------
 .../utils/search.js                           | 87 +++++++++++++++++++
 2 files changed, 88 insertions(+), 85 deletions(-)
 create mode 100644 packages/gatsby-theme-project-portal/utils/search.js

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index a002a914f..7c8898f23 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -1,7 +1,6 @@
 const { withDefaults } = require(`./utils/default-options`)
 const fs = require("fs")
-const lodash = require("lodash")
-const lunr = require("lunr")
+const { createSearchIndex } = require(`./utils/search`)
 const {
   siteMetadataTypeDefs,
   projectTypeDefs,
@@ -252,89 +251,6 @@ exports.onPreBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
     }
   `)
   const { allProject, allGeneralPage } = result.data
-  const createSearchIndex = (searchNodes) => {
-    // searchNodes = {allProject[], allGeneralPage[], siteUrl}
-    let documents = []
-    Object.keys(searchNodes).forEach((page) => {
-      if (page === "siteUrl") {
-        return
-      } else {
-        searchNodes[page].nodes.forEach((node) => {
-          let tempNode = structuredClone(node)
-          if (page === "allProject") {
-            if (!node.slug.includes("/")) {
-              tempNode.slug = `project/${node.slug}`
-            }
-          }
-          const newItem = Object.values(tempNode).map((field) => {
-            if (lodash.isNull(field)) {
-              return null
-            }
-
-            if (typeof field === "object") {
-              return Object.values(field)
-                .filter((value) => !lodash.isNull(value))
-                .map((value) =>
-                  typeof value === "string"
-                    ? value
-                    : Object.values(value)
-                        .filter((k) => !lodash.isNull(k))
-                        .join(" ")
-                )
-                .join(" ")
-            } else {
-              return field
-            }
-          })
-
-          Object.keys(tempNode).forEach((page, i) => {
-            tempNode[page] = newItem[i]
-          })
-          documents.push(tempNode)
-        })
-      }
-    })
-
-    let index = lunr(function () {
-      this.ref("slug") // identifier
-      // fields to search
-      this.field("slug")
-      this.field("faq")
-      this.field("aims")
-      this.field("lede")
-      this.field("title")
-      this.field("question")
-      this.field("status")
-      this.field("agency")
-      this.field("topics")
-      this.field("mainContact")
-      this.field("summary")
-      this.field("status")
-      this.field("purpose")
-      this.field("emailContent")
-      this.field("projectTeam")
-      this.field("expertise")
-      this.field("requirement")
-
-      // allow access to the position of the found word in the field
-      this.metadataWhitelist = ["position"]
-      /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
-             we have 'about' as one of the slugs, which spurred this decision
-             We can implement our own stopWordFilter:
-                      var idx = lunr(function () {
-                        // normal index definition
-                        this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
-                         this.pipeline.remove(lunr.stopWordFilter)
-                      })
-          */
-      this.pipeline.remove(lunr.stopWordFilter)
-
-      documents.forEach(function (doc) {
-        this.add(doc)
-      }, this)
-    })
-    return { index, documents }
-  }
 
   const { index, documents } = createSearchIndex({ allProject, allGeneralPage })
   await fs.writeFile("static/lunr-index.json", JSON.stringify(index), (err) => {
diff --git a/packages/gatsby-theme-project-portal/utils/search.js b/packages/gatsby-theme-project-portal/utils/search.js
new file mode 100644
index 000000000..bcfae10cc
--- /dev/null
+++ b/packages/gatsby-theme-project-portal/utils/search.js
@@ -0,0 +1,87 @@
+const lodash = require("lodash")
+const lunr = require("lunr")
+function createSearchIndex(searchNodes) {
+  // searchNodes = {allProject[], allGeneralPage[], siteUrl}
+  let documents = []
+  Object.keys(searchNodes).forEach((page) => {
+    if (page === "siteUrl") {
+      return
+    } else {
+      searchNodes[page].nodes.forEach((node) => {
+        let tempNode = structuredClone(node)
+        if (page === "allProject") {
+          if (!node.slug.includes("/")) {
+            tempNode.slug = `project/${node.slug}`
+          }
+        }
+        const newItem = Object.values(tempNode).map((field) => {
+          if (lodash.isNull(field)) {
+            return null
+          }
+
+          if (typeof field === "object") {
+            return Object.values(field)
+              .filter((value) => !lodash.isNull(value))
+              .map((value) =>
+                typeof value === "string"
+                  ? value
+                  : Object.values(value)
+                      .filter((k) => !lodash.isNull(k))
+                      .join(" ")
+              )
+              .join(" ")
+          } else {
+            return field
+          }
+        })
+
+        Object.keys(tempNode).forEach((page, i) => {
+          tempNode[page] = newItem[i]
+        })
+        documents.push(tempNode)
+      })
+    }
+  })
+
+  let index = lunr(function () {
+    this.ref("slug") // identifier
+    // fields to search
+    this.field("slug")
+    this.field("faq")
+    this.field("aims")
+    this.field("lede")
+    this.field("title")
+    this.field("question")
+    this.field("status")
+    this.field("agency")
+    this.field("topics")
+    this.field("mainContact")
+    this.field("summary")
+    this.field("status")
+    this.field("purpose")
+    this.field("emailContent")
+    this.field("projectTeam")
+    this.field("expertise")
+    this.field("requirement")
+
+    // allow access to the position of the found word in the field
+    this.metadataWhitelist = ["position"]
+    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
+           we have 'about' as one of the slugs, which spurred this decision
+           We can implement our own stopWordFilter:
+                    var idx = lunr(function () {
+                      // normal index definition
+                      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
+                       this.pipeline.remove(lunr.stopWordFilter)
+                    })
+        */
+    this.pipeline.remove(lunr.stopWordFilter)
+
+    documents.forEach(function (doc) {
+      this.add(doc)
+    }, this)
+  })
+  return { index, documents }
+}
+
+module.exports = { createSearchIndex }

From affb5646174c431266bc807f5bb2c842fa301b9e Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 17 Nov 2023 13:24:46 -0500
Subject: [PATCH 56/64] feat: add more project examples to projectdetail
 stories

---
 .../src/components/ProjectDetail.stories.tsx  | 72 +++++++++++++++++++
 .../src/components/ProjectDetail.tsx          |  5 +-
 2 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
index addbc9ad6..d877fea38 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
@@ -58,6 +58,78 @@ export const Primary: Story = {
   },
 }
 
+export const LongTitle: Story = {
+  args: {
+    title: "completed 2",
+    agency: "example agency",
+    topics: [],
+    slug: "project/completed-project2",
+    summary: "example summary",
+    statusOfData: "example statusOfData",
+    status: "completed",
+    startDate: new Date("2022-06-17"),
+    requirement: "example requirement",
+    question:
+      "Hello world2 (from json)? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?",
+    purpose: "example purpose",
+    projectTeam: ProjectTeamStories.Primary.args.contacts,
+    priorResearch: null,
+    opportunityCloses: new Date("2022-10-28"),
+    mainContact: {
+      name: "Contact Name",
+      title: "Title",
+      employer: "Employer",
+      email: "some-email@example.com",
+      image: contactImageYogi,
+    },
+    fundingInfo: "example fundingInfo",
+    expertise: "example expertise",
+    faq: [
+      { title: "Question 1?", text: "Answer 1!" },
+      {
+        title: "This is another question?",
+        text: "Here's an answer for that question! Yay!",
+      },
+    ],
+    deliverable: "example deliverable",
+    emailContent: "example emailContent",
+    endDate: new Date("2016-12-15"),
+  },
+}
+
+export const NullValues: Story = {
+  args: {
+    title: "completed 2",
+    agency: "example agency",
+    topics: [],
+    slug: "project/completed-project2",
+    summary: "",
+    statusOfData: null,
+    status: "completed",
+    startDate: new Date("2022-06-17"),
+    requirement: null,
+    question: "",
+    purpose: null,
+    projectTeam: ProjectTeamStories.Primary.args.contacts,
+    priorResearch: null,
+    opportunityCloses: new Date("2022-10-28"),
+    mainContact: {
+      name: "Contact Name",
+      title: "Title",
+      employer: "Employer",
+      email: "some-email@example.com",
+      image: contactImageYogi,
+    },
+    keyDates: null,
+    fundingInfo: null,
+    expertise: null,
+    faq: null,
+    deliverable: null,
+    emailContent: null,
+    endDate: new Date("2016-12-15"),
+  },
+}
+
 export const Open: Story = {
   args: { ...Primary.args, status: "open" },
 }
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.tsx
index 0775f4db3..62620694b 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.tsx
@@ -18,6 +18,7 @@ import { statusOutput, isNA, isEmpty } from "../utils"
 export interface ProjectDetailProps {
   // Core content
   question: string
+  slug?: string
   summary: string
   title: string
 
@@ -57,17 +58,19 @@ export interface ProjectDetailProps {
   agency: string
   topics?: TopicType[]
   lastModified: Date
-
+  emailContent?: String
   defaultContactImage: ImageDataLike
 }
 
 export const ProjectDetail: FunctionComponent<ProjectDetailProps> = ({
   question,
+  slug,
   summary,
   status,
   opportunityCloses,
   startDate,
   endDate,
+  emailContent,
   lastModified,
   agency,
   topics,

From 04a3ff75d2e67bb4fdd8a899ed5b892785d07d36 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 17 Nov 2023 15:19:32 -0500
Subject: [PATCH 57/64] feat: add a no image option for the general page
 layouts

---
 .../src/layouts/AboutPageLayout.stories.tsx   | 26 ++++++++++++++++++-
 .../src/layouts/AboutPageLayout.tsx           |  2 +-
 .../src/layouts/ContactPageLayout.stories.tsx | 22 +++++++++++++++-
 .../src/layouts/ContactPageLayout.tsx         |  2 +-
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx
index 7e95493ff..d362bb74d 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx
@@ -38,7 +38,31 @@ export const Primary: Story = {
     },
   },
 }
-
+export const NoImage: Story = {
+  args: {
+    data: {
+      generalPage: {
+        pageName: null,
+        title: null,
+        header: "What we're here to do",
+        aims: [
+          {
+            title: "About Aim",
+            text: "Some text",
+          },
+        ],
+        faq: [
+          {
+            title: "Is this an FAQ question?",
+            text: "Yes, and here is the answer.",
+          },
+        ],
+        accessibility:
+          "We are committed to making the Project Portal accessible for all.",
+      },
+    },
+  },
+}
 export const TailwindXSWindow: Story = {
   args: Primary.args,
   parameters: { viewport: { defaultViewport: "tailwindXS" } },
diff --git a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx
index 362023535..fa1c43ab2 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx
@@ -21,7 +21,7 @@ interface AboutProps {
         text: string
       }[]
       accessibility: string
-      image: ImageDataLike
+      image?: ImageDataLike
     }
   }
 }
diff --git a/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.stories.tsx
index 7d48f6055..8302469df 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.stories.tsx
@@ -33,7 +33,27 @@ export const Primary: Story = {
     },
   },
 }
-
+export const NoImage: Story = {
+  args: {
+    pageContext: {
+      thankYouPagePath: "/contact/thank-you/",
+    },
+    data: {
+      generalPage: {
+        title: "Want to talk to the Policy Lab? We'd love to hear from you!",
+        lede:
+          "Our team is happy to answer questions about the partnerships pilot," +
+          " project-specific questions, general questions about working with the Project" +
+          " Portal, and ideas for how we can improve this site.",
+      },
+      site: {
+        siteMetadata: {
+          recaptchaSiteKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
+        },
+      },
+    },
+  },
+}
 export const TailwindXSWindow: Story = {
   args: Primary.args,
   parameters: { viewport: { defaultViewport: "tailwindXS" } },
diff --git a/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.tsx
index 3d4023bff..fdb8be9db 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.tsx
@@ -20,7 +20,7 @@ interface ContactProps {
     generalPage: {
       title: string
       lede: string
-      image: ImageDataLike
+      image?: ImageDataLike
     }
     site: {
       siteMetadata: {

From 6f181c496fd009313c1a622669bb87383c7c7704 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 17 Nov 2023 15:24:05 -0500
Subject: [PATCH 58/64] feat: change the returned search to an array so it can
 be called with different variables in stories

---
 packages/gatsby-theme-project-portal/gatsby-node.js  | 2 +-
 packages/gatsby-theme-project-portal/utils/search.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index 7c8898f23..d51e11cf3 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -252,7 +252,7 @@ exports.onPreBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
   `)
   const { allProject, allGeneralPage } = result.data
 
-  const { index, documents } = createSearchIndex({ allProject, allGeneralPage })
+  const [index, documents] = createSearchIndex({ allProject, allGeneralPage })
   await fs.writeFile("static/lunr-index.json", JSON.stringify(index), (err) => {
     if (err) console.error(err)
   })
diff --git a/packages/gatsby-theme-project-portal/utils/search.js b/packages/gatsby-theme-project-portal/utils/search.js
index bcfae10cc..ca7059d8c 100644
--- a/packages/gatsby-theme-project-portal/utils/search.js
+++ b/packages/gatsby-theme-project-portal/utils/search.js
@@ -81,7 +81,7 @@ function createSearchIndex(searchNodes) {
       this.add(doc)
     }, this)
   })
-  return { index, documents }
+  return [index, documents]
 }
 
 module.exports = { createSearchIndex }

From 013c64f8fa99bac41e9ad28894f984034b207258 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 17 Nov 2023 15:25:34 -0500
Subject: [PATCH 59/64] refactor: sitesearch stories pull different args from
 project detail

---
 .../src/components/ProjectDetail.stories.tsx  |   6 +-
 .../src/components/SiteSearch.stories.tsx     | 604 +++++-------------
 .../src/components/SiteSearchWrapper.tsx      |   4 +
 3 files changed, 153 insertions(+), 461 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
index d877fea38..3b7df2d21 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
@@ -63,8 +63,8 @@ export const LongTitle: Story = {
     title: "completed 2",
     agency: "example agency",
     topics: [],
-    slug: "project/completed-project2",
-    summary: "example summary",
+    slug: "project/completed-project",
+    summary: "example project summary",
     statusOfData: "example statusOfData",
     status: "completed",
     startDate: new Date("2022-06-17"),
@@ -99,7 +99,7 @@ export const LongTitle: Story = {
 
 export const NullValues: Story = {
   args: {
-    title: "completed 2",
+    title: "project completed 2",
     agency: "example agency",
     topics: [],
     slug: "project/completed-project2",
diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
index e8df68df0..b6bbe59d1 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
@@ -1,93 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { userEvent, within } from "@storybook/testing-library"
-
+import * as AboutPageStories from "../layouts/AboutPageLayout.stories"
+import * as ContactPageStories from "../layouts/ContactPageLayout.stories"
+import * as ProjectDetailStories from "../components/ProjectDetail.stories"
 import SiteSearch from "./SiteSearch"
-import lunr from "lunr"
-import lodash from "lodash"
-
-const createSearchIndex = (searchNodes) => {
-  // searchNodes = {allProject[], allGeneralPage[], siteUrl}
-  let documents = []
-  Object.keys(searchNodes).forEach((page) => {
-    if (page === "siteUrl") {
-      return
-    } else {
-      searchNodes[page].nodes.forEach((node) => {
-        let tempNode = structuredClone(node)
-        if (page === "allProject") {
-          if (!node.slug.includes("/")) {
-            tempNode.slug = `project/${node.slug}`
-          }
-        }
-        const newItem = Object.values(tempNode).map((field) => {
-          if (lodash.isNull(field)) {
-            return null
-          }
-
-          if (typeof field === "object") {
-            return Object.values(field)
-              .filter((value) => !lodash.isNull(value))
-              .map((value) =>
-                typeof value === "string"
-                  ? value
-                  : Object.values(value)
-                      .filter((k) => !lodash.isNull(k))
-                      .join(" ")
-              )
-              .join(" ")
-          } else {
-            return field
-          }
-        })
-
-        Object.keys(tempNode).forEach((page, i) => {
-          tempNode[page] = newItem[i]
-        })
-        documents.push(tempNode)
-      })
-    }
-  })
-
-  let index = lunr(function () {
-    this.ref("slug") // identifier
-    // fields to search
-    this.field("slug")
-    this.field("faq")
-    this.field("aims")
-    this.field("lede")
-    this.field("title")
-    this.field("question")
-    this.field("status")
-    this.field("agency")
-    this.field("topics")
-    this.field("mainContact")
-    this.field("summary")
-    this.field("status")
-    this.field("purpose")
-    this.field("emailContent")
-    this.field("projectTeam")
-    this.field("expertise")
-    this.field("requirement")
-
-    // allow access to the position of the found word in the field
-    this.metadataWhitelist = ["position"]
-    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
-           we have 'about' as one of the slugs, which spurred this decision
-           We can implement our own stopWordFilter:
-                    var idx = lunr(function () {
-                      // normal index definition
-                      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
-                       this.pipeline.remove(lunr.stopWordFilter)
-                    })
-        */
-    this.pipeline.remove(lunr.stopWordFilter)
-
-    documents.forEach(function (doc) {
-      this.add(doc)
-    }, this)
-  })
-  return { index, documents }
-}
+import { createSearchIndex } from "../../utils/search"
 
 const meta: Meta<typeof SiteSearch> = {
   component: SiteSearch,
@@ -95,413 +12,184 @@ const meta: Meta<typeof SiteSearch> = {
   includeStories: /^[A-Z]/,
 }
 
-export const exampleProjects = {
+type Story = StoryObj<typeof SiteSearch>
+export default meta
+
+export const manyProjects = {
   nodes: [
-    {
-      title: "completed no date",
-      agency: "",
-      topics: "Military Facilities",
-      slug: "project/completed-project-nodate",
-      summary: "",
-      statusOfData: "",
-      status: "completed",
-      startDate: null,
-      requirement: "",
-      question: "Completed no date",
-      purpose: "",
-      projectTeam: "",
-      priorResearch: null,
-      opportunityCloses: null,
-      mainContact: "Isabel",
-      fundingInfo: "",
-      expertise: "",
-      faq: null,
-      deliverable: "",
-      emailContent: "",
-      endDate: null,
-    },
-    {
-      title: "ongoing no date",
-      agency: "",
-      topics: "Military Facilities",
-      slug: "project/ongoing-project-nodate",
-      summary: "",
-      statusOfData: "",
-      status: "ongoing",
-      startDate: null,
-      requirement: "",
-      question: "Ongoing no date",
-      purpose: "",
-      projectTeam: "",
-      priorResearch: null,
-      opportunityCloses: null,
-      mainContact: "Isabel",
-      fundingInfo: "",
-      expertise: "",
-      faq: null,
-      deliverable: "",
-      emailContent: "",
-      endDate: null,
-    },
-    {
-      title: "completed 2",
-      agency: "example agency",
-      topics: "Facilities",
-      slug: "project/completed-project2",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "completed",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question:
-        "Hello world2 (from json)? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: "We are looking for answers to specific projects. This is another question? Here's an answer for that question! Yay! Here's another question on the CMS side",
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "ongoing 1",
-      agency: "example agency",
-      topics: "Facilities",
-      slug: "project/ongoing-project",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "ongoing",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "Hello world (from json)?",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "completed 1",
-      agency: "example agency",
-      topics: "Facilities",
-      slug: "project/completed-project",
-      summary:
-        'example summary that is also testing the media folder.  \n\n![A watercolor painting of a cat laying in some leaves.](/image/cat.jpg "Cat")',
-      statusOfData: "example statusOfData",
-      status: "completed",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "Hello world (from json)?",
-      purpose: "example purpose",
-      projectTeam: "Horacia II Horace I",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "ongoing 2",
-      agency: "example agency",
-      topics: "Facilities",
-      slug: "project/ongoing-project2",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "ongoing",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "Hello world (from json)?",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "open 2",
-      agency: "example agency",
-      topics: "Technologies Facilities",
-      slug: "project/open-project-2",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "open",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "Hello world (from json)?",
-      purpose: "example purpose",
-      projectTeam: "",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Isabel",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "Open Project 3",
-      agency: "example agency",
-      topics: "Security Public Health",
-      slug: "project/open-project3",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "open",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "Open Project 3",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "open no date",
-      agency: "",
-      topics: "Military Facilities",
-      slug: "project/open-project-nodate",
-      summary: "",
-      statusOfData: "",
-      status: "open",
-      startDate: null,
-      requirement: "",
-      question: "Open no date",
-      purpose: "",
-      projectTeam: "",
-      priorResearch: null,
-      opportunityCloses: null,
-      mainContact: "Isabel",
-      fundingInfo: "",
-      expertise: "",
-      faq: null,
-      deliverable: "",
-      emailContent: "",
-      endDate: null,
-    },
-    {
-      title: "Open Project 5",
-      agency: "example agency",
-      topics: "Facilities Public Health",
-      slug: "project/open-project5",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "open",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "0123456789 abcdefghijklmnop 26 chars/1 space",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "Open Project 6",
-      agency: "example agency",
-      topics: "Technologies Military Security",
-      slug: "project/open-project6",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "open",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "012 3 45 67 89 ab cd efg hij klm 23 chars/9 spaces",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "open 1",
-      agency: "example agency",
-      topics: "Military Facilities",
-      slug: "project/open-project",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "open",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "Hello world (from json)?",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Isabel",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
-    {
-      title: "Open Project 4",
-      agency: "example agency",
-      topics: "Security",
-      slug: "project/open-project4",
-      summary: "example summary",
-      statusOfData: "example statusOfData",
-      status: "open",
-      startDate: "2022-06-17",
-      requirement: "example requirement",
-      question: "012 345 6789 ab cd efg hij klmn 24 chars/7 spaces",
-      purpose: "example purpose",
-      projectTeam: "Horace I Horacia II",
-      priorResearch: null,
-      opportunityCloses: "2022-10-28",
-      mainContact: "Horace I",
-      fundingInfo: "example fundingInfo",
-      expertise: "example expertise",
-      faq: null,
-      deliverable: "example deliverable",
-      emailContent: "example emailContent",
-      endDate: "2016-12-15",
-    },
+    { ...ProjectDetailStories.LongTitle.args },
+    { ...ProjectDetailStories.Minimum.args },
+    { ...ProjectDetailStories.NullValues.args },
+    { ...ProjectDetailStories.Open.args },
+    { ...ProjectDetailStories.Ongoing.args },
+    { ...ProjectDetailStories.Completed.args },
   ],
 }
 
-export const exampleGenPages = {
+export const oneProject = {
+  nodes: [{ ...ProjectDetailStories.LongTitle.args }],
+}
+
+export const twoGenPages = {
   nodes: [
     {
       slug: "about",
-      lede: null,
-      faq: "We are looking for academic and scientific researchers from a range of disciplines relevant to policy and program design and evaluation. Example disciplines include public policy, economics, behavioral science, sociology, marketing, data analytics, and law, but we encourage you to apply for any opportunity that you think would be a good fit for you or your team. Where possible, project summaries include information about what types of expertise are likely needed, but if you have an idea for how to contribute that is different or not stated in the summary, please let us know. What sort of collaborators are you looking for? No, but prior experience is helpful. Applied research and collaboration with government partners often requires more flexibility and communication than a lab-based or retrospective study, so be sure to discuss expectations and timeline when considering a collaboration opportunity. Do I need to have prior experience working with government? It depends on the project, so check out the project description to learn more about expectations and requirements. Opportunities typically require a PhD or equivalent experience. Those challenges open to student participation will usually state so in the announcement. Are these opportunities available for students? Needs vary from project to project with respect to expertise needed, project scope, timeline, and other factors. Each project summary page describes expectations and requirements for that project. When appropriate and feasible, the City of San Antonio encourages collaboration within or across organizations. If you are interested in working with a team, please indicate this on the interest form for the project for further discussion. Can multiple people work on a project? Some projects have dedicated funding, others may not have funding available at this time, and some may be open to funding from external sources. The extent and source of funding will depend on the scope of the project, level of expertise needed, and other factors. Research partners, City department representatives, and the Office of Innovation can discuss funding details on a case-by-case basis, including needs and potential sources. What kind of funding is available? Data availability depends on the specific project. Projects may involve qualitative and quantitative data, and collecting or analyzing data. In many cases, academic collaborators will need to sign a Data Use Agreement in order to access and use existing government data. What kind of data is available? After we collect expressions of interest, City departments, research partners, and the Office of Innovation will work together to determine fit and how to best approach the project. Some projects may have a Q&A session to provide more information and some may require a more detailed submission process. The City of San Antonio prioritizes partnerships that are scalable, sustainable, and develop public, open-source resources. What happens after I submit an interest form? The City of San Antonio is always interested in exploring government–research partnerships or other cross-sector collaborative opportunities for improving City services. If you have a research idea, please search us at [rdleague@sanantonio.gov](mailto:rdleague@sanantonio.gov) with a description of your idea. The description should include, at a minimum, a project overview, how the results would benefit residents of San Antonio, and an estimated project timeline. We’ll get in touch to discuss if it’s a good fit for the portal. Can I propose a project idea? The R&D League is a partnership established to build a research and development (R&D) program in the City of San Antonio that paves the path to a better future for our community. The League creates opportunities for cross-sector, multi-disciplinary teams to utilize scientific methods and data to investigate new ideas, facilitate evidence-based policymaking, and explore the frontier of innovation for our 1.5 million residents.\n\nCore League members are the City of San Antonio (CoSA), Southwest Research Institute (SwRI), United Services Automobile Association (USAA), the University of Texas at San Antonio (UTSA), and The Policy Lab @ Brown University. [Learn more about the R&D League](https://www.sanantonio.gov/Innovation/R-D-League).\n What is the R&D League?",
-      aims: "The Research Partnerships Portal is a pilot initiative from the City of San Antonio’s Office of Innovation and multiple City departments. Our goal is to connect City departments and offices with San Antonio's research and philanthropic sectors to answer important questions about how to best design, deliver, and evaluate city services. We believe that evidence is an important part of improving public services and policy, and we're excited about what we can do together! Build and use evidence to improve the lives of San Antonio residents. We believe that great work is built from lasting relationships. We're looking for thought partners, not just evaluators, and seek collaborators from a wide variety of research disciplines. Project opportunities may include problem framing, introduction to existing research, intervention and evaluation design, technical assistance, reporting, and other research and collaboration areas. Promote durable partnerships at all stages of the learning process. Applied research on a specific challenge has the potential to benefit public services as a whole. To do this, we need to be transparent with our results and methods. We know that publication is an important part of the research process, and will work with collaborators to support publication where appropriate. Share knowledge about what works.",
-      title: "About the Project Portal",
+      ...AboutPageStories.NoImage.args.data.generalPage,
     },
     {
       slug: "contact",
-      lede: "Our team is happy to answer questions about the partnerships pilot, project-specific questions, general questions about working with the City of San Antonio, and ideas for how we can improve this site.",
-      faq: null,
-      aims: null,
-      title:
-        "Want to talk to the Office of Innovation? We'd love to hear from you!",
+      ...ContactPageStories.NoImage.args.data.generalPage,
     },
+  ],
+}
+
+export const oneGeneralPage = {
+  nodes: [
     {
-      slug: "search",
-      lede: null,
-      faq: null,
-      aims: null,
-      title: "Search the Whole Site!",
+      slug: "about",
+      ...AboutPageStories.NoImage.args.data.generalPage,
     },
   ],
 }
 
-const { index, documents } = createSearchIndex({
-  exampleProjects,
-  exampleGenPages,
-})
-const db = documents.reduce(function (acc, document) {
-  acc[document.slug] = document
-  return acc
-}, {})
+export const noProjectPage = {
+  nodes: [{}],
+}
 
-export const primaryData = {
-  siteUrl: "localhost",
-  index: index,
-  db: db,
+export const noGeneralPage = {
+  nodes: [],
 }
+// Valid search function
+const validSearches = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
 
-export default meta
+  const searchInput = canvas.getByLabelText("Search")
 
-type Story = StoryObj<typeof SiteSearch>
-export const Primary: Story = {
-  args: primaryData,
+  await userEvent.type(searchInput, "about", {
+    delay: 500,
+  })
+
+  await userEvent.clear(searchInput)
+
+  await userEvent.type(searchInput, "project", {
+    delay: 500,
+  })
 }
 
-export const ValidSearches: Story = {
-  args: primaryData,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+// Invalid search function
+const invalidSearches = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+
+  const searchInput = canvas.getByLabelText("Search")
+
+  await userEvent.type(searchInput, "%about%", {
+    delay: 100,
+  })
+
+  await userEvent.clear(searchInput)
+
+  await userEvent.type(searchInput, "😋", {
+    delay: 100,
+  })
+
+  await userEvent.clear(searchInput)
 
-    const searchInput = canvas.getByLabelText("Search")
+  await userEvent.type(searchInput, "ひらがな", {
+    delay: 100,
+  })
 
-    await userEvent.type(searchInput, "about", {
-      delay: 500,
-    })
+  await userEvent.clear(searchInput)
+
+  await userEvent.type(searchInput, "𒐫", {
+    delay: 100,
+  })
+
+  await userEvent.clear(searchInput)
+
+  await userEvent.type(searchInput, "____", {
+    delay: 100,
+  })
+}
 
-    await userEvent.clear(searchInput)
+// Many pages
+const [indexMany, documentsMany] = createSearchIndex({
+  manyProjects,
+  twoGenPages,
+})
+const dbMany = documentsMany.reduce(function (acc, document) {
+  acc[document.slug] = document
+  return acc
+}, {})
 
-    await userEvent.type(searchInput, "project", {
-      delay: 500,
-    })
-  },
+export const manyData = {
+  siteUrl: "localhost:6006",
+  index: indexMany,
+  db: dbMany,
 }
 
-export const InvalidSearches: Story = {
-  args: primaryData,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+// One general page, no project pages
+const [indexOneGen, documentsOneGen] = createSearchIndex({
+  noProjectPage,
+  oneGeneralPage,
+})
+const dbOneGen = documentsOneGen.reduce(function (acc, document) {
+  acc[document.slug] = document
+  return acc
+}, {})
 
-    const searchInput = canvas.getByLabelText("Search")
+export const oneData = {
+  siteUrl: "localhost:6006",
+  index: indexOneGen,
+  db: dbOneGen,
+}
 
-    await userEvent.type(searchInput, "%about%", {
-      delay: 500,
-    })
+// No general pages, one project page
+const [indexOneProj, documentsOneProj] = createSearchIndex({
+  oneProject,
+  noGeneralPage,
+})
+const dbOneProj = documentsOneProj.reduce(function (acc, document) {
+  acc[document.slug] = document
+  return acc
+}, {})
 
-    await userEvent.clear(searchInput)
+export const oneProjectData = {
+  siteUrl: "localhost:6006",
+  index: indexOneProj,
+  db: dbOneProj,
+}
 
-    await userEvent.type(searchInput, "😋", {
-      delay: 500,
-    })
+//
+export const Primary: Story = {
+  args: manyData,
+}
 
-    await userEvent.clear(searchInput)
+export const ValidMany: Story = {
+  args: manyData,
+  play: validSearches,
+}
 
-    await userEvent.type(searchInput, "ひらがな", {
-      delay: 500,
-    })
+export const InvalidMany: Story = {
+  args: manyData,
+  play: invalidSearches,
+}
 
-    await userEvent.clear(searchInput)
+export const ValidOneGeneralPage: Story = {
+  args: oneData,
+  play: validSearches,
+}
 
-    await userEvent.type(searchInput, "𒐫", {
-      delay: 500,
-    })
+export const InvalidOneGeneralPage: Story = {
+  args: oneData,
+  play: invalidSearches,
+}
 
-    await userEvent.clear(searchInput)
+export const ValidOneProjectPage: Story = {
+  args: oneProjectData,
+  play: validSearches,
+}
 
-    await userEvent.type(searchInput, "____", {
-      delay: 500,
-    })
-  },
+export const InvalidOneProjectPage: Story = {
+  args: oneProjectData,
+  play: invalidSearches,
 }
diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
index 839f7b57d..1ab2ccd89 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
@@ -4,10 +4,14 @@ import SiteSearch from "./SiteSearch"
 
 export interface SearchWrapperProps {
   siteUrl: string
+  index?: lunr.Index
+  dataBase?: Function
 }
 
 export const SearchWrapper: FunctionComponent<SearchWrapperProps> = ({
   siteUrl,
+  index,
+  dataBase,
 }: SearchWrapperProps) => {
   const [idx, setIdx] = useState()
   const [db, setDb] = useState()

From 6832732e8ab4ecbff0a109edcc41efecda5d04b4 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 17 Nov 2023 17:09:21 -0500
Subject: [PATCH 60/64] feat: implement our own stopwordfilter

---
 .../utils/search.js                           | 133 ++++++++++++++++--
 1 file changed, 124 insertions(+), 9 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/utils/search.js b/packages/gatsby-theme-project-portal/utils/search.js
index ca7059d8c..c5f776aca 100644
--- a/packages/gatsby-theme-project-portal/utils/search.js
+++ b/packages/gatsby-theme-project-portal/utils/search.js
@@ -43,6 +43,128 @@ function createSearchIndex(searchNodes) {
     }
   })
 
+  // ask lunr to ignore these words within a search
+  const newStopWordFilter = lunr.generateStopWordFilter([
+    "a",
+    "able",
+    "across",
+    "after",
+    "all",
+    "almost",
+    "also",
+    "am",
+    "among",
+    "an",
+    "and",
+    "any",
+    "are",
+    "as",
+    "at",
+    "be",
+    "because",
+    "been",
+    "but",
+    "by",
+    "can",
+    "cannot",
+    "could",
+    "dear",
+    "did",
+    "do",
+    "does",
+    "either",
+    "else",
+    "ever",
+    "every",
+    "for",
+    "from",
+    "get",
+    "got",
+    "had",
+    "has",
+    "have",
+    "he",
+    "her",
+    "hers",
+    "him",
+    "his",
+    "how",
+    "however",
+    "i",
+    "if",
+    "in",
+    "into",
+    "is",
+    "it",
+    "its",
+    "just",
+    "least",
+    "let",
+    "like",
+    "likely",
+    "may",
+    "me",
+    "might",
+    "most",
+    "must",
+    "my",
+    "neither",
+    "no",
+    "nor",
+    "not",
+    "of",
+    "off",
+    "often",
+    "on",
+    "only",
+    "or",
+    "other",
+    "our",
+    "own",
+    "rather",
+    "said",
+    "say",
+    "says",
+    "she",
+    "should",
+    "since",
+    "so",
+    "some",
+    "than",
+    "that",
+    "the",
+    "their",
+    "them",
+    "then",
+    "there",
+    "these",
+    "they",
+    "this",
+    "tis",
+    "to",
+    "too",
+    "twas",
+    "us",
+    "wants",
+    "was",
+    "we",
+    "were",
+    "what",
+    "when",
+    "where",
+    "which",
+    "while",
+    "who",
+    "whom",
+    "why",
+    "will",
+    "with",
+    "would",
+    "yet",
+    "you",
+    "your",
+  ])
+
   let index = lunr(function () {
     this.ref("slug") // identifier
     // fields to search
@@ -66,15 +188,8 @@ function createSearchIndex(searchNodes) {
 
     // allow access to the position of the found word in the field
     this.metadataWhitelist = ["position"]
-    /* allow stop words (see https://github.com/olivernn/lunr.js/blob/master/lunr.js)
-           we have 'about' as one of the slugs, which spurred this decision
-           We can implement our own stopWordFilter:
-                    var idx = lunr(function () {
-                      // normal index definition
-                      this.pipeline.after(lunr.stopWordFilter, myStopWordFilter)
-                       this.pipeline.remove(lunr.stopWordFilter)
-                    })
-        */
+
+    this.pipeline.after(lunr.stopWordFilter, newStopWordFilter)
     this.pipeline.remove(lunr.stopWordFilter)
 
     documents.forEach(function (doc) {

From cada7f195b2e4bd8ae42f11907d70eae34656f70 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 21 Nov 2023 11:25:32 -0500
Subject: [PATCH 61/64] Update
 packages/gatsby-theme-project-portal/package.json

Co-authored-by: John Gerrard Holland <john_holland1@brown.edu>
---
 packages/gatsby-theme-project-portal/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/package.json b/packages/gatsby-theme-project-portal/package.json
index b07ff44a3..9e773baa6 100644
--- a/packages/gatsby-theme-project-portal/package.json
+++ b/packages/gatsby-theme-project-portal/package.json
@@ -11,7 +11,6 @@
     "Aisulu Omar <aisulu_omar@brown.edu>",
     "Joselynn Wallace <Joselynn Wallace@brown.edu>",
     "Kevin Wilson <kevin_wilson@brown.edu>",
-    "Aidan Hudson-Lapore <aidan_hudson-lapore@brown.edu>",
     "Paul Xu <yang_xu@brown.edu>",
     "Heather Yu <heather_yu@brown.edu>"
   ],

From 38e5b9059ec369320d5bbd7752d19c1c31912bfc Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 21 Nov 2023 12:03:27 -0500
Subject: [PATCH 62/64] Update
 packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx

Co-authored-by: John Gerrard Holland <john_holland1@brown.edu>
---
 .../src/components/SiteSearch.stories.tsx                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
index b6bbe59d1..61abab1a0 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
@@ -30,7 +30,7 @@ export const oneProject = {
   nodes: [{ ...ProjectDetailStories.LongTitle.args }],
 }
 
-export const twoGenPages = {
+export const twoGeneralPages = {
   nodes: [
     {
       slug: "about",

From dd32d321c0e3ff20b971db8648492b7fa5c091d7 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 21 Nov 2023 12:15:54 -0500
Subject: [PATCH 63/64] Update
 packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx

Co-authored-by: John Gerrard Holland <john_holland1@brown.edu>
---
 .../src/layouts/SearchPageLayout.tsx                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index acae32cb6..e4cbec5ce 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -13,7 +13,7 @@ export interface SearchLayoutProps {
     }
     generalPage: {
       title: string
-      image: ImageDataLike
+      image?: ImageDataLike
     }
   }
 }

From d73ff7ecbd2fc762ad62b913e42927c0bc937b65 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 22 Nov 2023 11:12:50 -0500
Subject: [PATCH 64/64] fix: address pr comments

---
 .../gatsby-node.js                            | 118 ++------------
 .../src/components/ProjectDetail.stories.tsx  |  54 ++++++-
 .../src/components/SiteSearch.stories.tsx     |  21 ++-
 .../src/components/SiteSearch.tsx             |   4 +-
 .../src/components/SiteSearchWrapper.tsx      |  18 +--
 .../src/components/index.tsx                  |   1 +
 .../src/fragments/site-search.js              |  63 --------
 .../src/layouts/AboutPageLayout.stories.tsx   |   8 +-
 .../src/layouts/SearchPageLayout.tsx          |   3 +-
 .../utils/search.js                           | 144 +++++++++++-------
 10 files changed, 181 insertions(+), 253 deletions(-)
 delete mode 100644 packages/gatsby-theme-project-portal/src/fragments/site-search.js

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
index d51e11cf3..6ba0a9a51 100644
--- a/packages/gatsby-theme-project-portal/gatsby-node.js
+++ b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -1,6 +1,6 @@
 const { withDefaults } = require(`./utils/default-options`)
 const fs = require("fs")
-const { createSearchIndex } = require(`./utils/search`)
+const { createSearchIndex, searchQuery } = require(`./utils/search`)
 const {
   siteMetadataTypeDefs,
   projectTypeDefs,
@@ -35,55 +35,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     query {
       allProject {
         nodes {
-          title
-          agency
-          topics {
-            title
-          }
-          slug
-          summary
-          statusOfData
-          status
-          startDate
-          requirement
-          question
-          purpose
-          projectTeam {
-            name
-            employer
-          }
-          priorResearch
-          opportunityCloses
-          mainContact {
-            name
-          }
-          fundingInfo
-          expertise
-          faq {
-            text
-            title
-          }
-          deliverable
-          emailContent
-          endDate
           slug
         }
       }
-      allGeneralPage {
-        nodes {
-          slug
-          lede
-          faq {
-            text
-            title
-          }
-          aims {
-            text
-            title
-          }
-          title
-        }
-      }
       allCardPage {
         nodes {
           slug
@@ -195,61 +149,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 }
 
 exports.onPreBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
-  const result = await graphql(`
-    query {
-      allProject {
-        nodes {
-          title
-          agency
-          topics {
-            title
-          }
-          slug
-          summary
-          statusOfData
-          status
-          startDate
-          requirement
-          question
-          purpose
-          projectTeam {
-            name
-            employer
-          }
-          priorResearch
-          opportunityCloses
-          mainContact {
-            name
-          }
-          fundingInfo
-          expertise
-          faq {
-            text
-            title
-          }
-          deliverable
-          emailContent
-          endDate
-          slug
-        }
-      }
-      allGeneralPage {
-        nodes {
-          slug
-          lede
-          faq {
-            text
-            title
-          }
-          aims {
-            text
-            title
-          }
-          title
-        }
-      }
-    }
-  `)
+  const result = await graphql(searchQuery)
   const { allProject, allGeneralPage } = result.data
 
   const [index, documents] = createSearchIndex({ allProject, allGeneralPage })
@@ -263,6 +163,20 @@ exports.onPreBuild = async ({ reporter, basePath, pathPrefix, graphql }) => {
       if (err) console.error(err)
     }
   )
+  // this is a function which grabs the page from the original documents
+  // lunr tosses this info for SPEED
+  const reduceDocuments = documents.reduce(function (page, document) {
+    page[document.slug] = document
+    return page
+  }, {})
+
+  await fs.writeFile(
+    "static/documents-reduced.json",
+    JSON.stringify(reduceDocuments),
+    (err) => {
+      if (err) console.error(err)
+    }
+  )
 
   reporter.info(
     `Site was built with basePath: ${basePath} & pathPrefix: ${pathPrefix}`
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
index 3b7df2d21..62a4fefed 100644
--- a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
@@ -87,7 +87,7 @@ export const LongTitle: Story = {
     faq: [
       { title: "Question 1?", text: "Answer 1!" },
       {
-        title: "This is another question?",
+        title: "This is another different question?",
         text: "Here's an answer for that question! Yay!",
       },
     ],
@@ -165,6 +165,58 @@ export const Minimum: Story = {
   },
 }
 
+export const Maximum: Story = {
+  args: {
+    question: "Is there a difference between brown sugar and white sugar?",
+    summary:
+      "Contrary to common belief, they are nutritionally similar. Nutritionally speaking, all natural sugars have relatively comparable nutritional value with approximately 15 calories per teaspoon (4.2 g).\n",
+    title: "Sugar Investigations in the US",
+    mainContact: {
+      name: "Contact Name",
+      title: "Title",
+      employer: "Employer",
+      email: "some-email@example.com",
+    },
+
+    status: "open",
+    opportunityCloses: new Date("2022-03-04"),
+    startDate: new Date("2022-01-03"),
+    endDate: new Date("2022-03-04"),
+    agency: "Sugar Agency",
+    topics: [
+      { slug: "conspiracy", title: "conspiracy" },
+      { slug: "investigation", title: "investigation" },
+    ],
+    lastModified: new Date("2022-05-27T16:34:04.000Z"),
+    slug: "project/sugar-investigations",
+    emailContent:
+      "Dearest community, Are you interested in knowing about sugars? So are we! Join our search!",
+    deliverable:
+      "Analysis of existing sugars in the United States. Summary of and detailed recommendations and potential action steps to inform the public about the sugars they are consuming.  \\n* See project summary for additional information.",
+    purpose:
+      "Results will be shared with the FDA and whoever else wants these results. We have no oversight and thus may do as we wish.",
+    expertise:
+      "While our team does not have previous experience in organic chemistry, we are committed to uncovering the truth.",
+    requirement: "I do not understand this question. Next.",
+    keyDates: "Publish data at some point in time.",
+    priorResearch: "Prior research is published in many reputable journals.",
+    statusOfData: "Data collection has not begun.",
+    fundingInfo:
+      "Our team will evaluate whether or not a project needs money, and we will most likely need the project team to figure out funding.",
+    openText: "Are you interested in collaborating?",
+    ongoingText: "This project is ongoing.",
+    completeText: "This project is complete.",
+    projectTeam: ProjectTeamStories.Primary.args.contacts,
+    faq: [
+      { title: "Question 1?", text: "Answer 1!" },
+      {
+        title: "This is another question?",
+        text: "Here's an answer for that question! Yay!",
+      },
+    ],
+  },
+}
+
 export const TailwindXSWindow: Story = {
   args: Primary.args,
   parameters: { viewport: { defaultViewport: "tailwindXS" } },
diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
index 61abab1a0..d47e3c317 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
@@ -23,6 +23,7 @@ export const manyProjects = {
     { ...ProjectDetailStories.Open.args },
     { ...ProjectDetailStories.Ongoing.args },
     { ...ProjectDetailStories.Completed.args },
+    { ...ProjectDetailStories.Maximum.args },
   ],
 }
 
@@ -30,15 +31,15 @@ export const oneProject = {
   nodes: [{ ...ProjectDetailStories.LongTitle.args }],
 }
 
-export const twoGeneralPages = {
+export const twoGenPages = {
   nodes: [
     {
       slug: "about",
-      ...AboutPageStories.NoImage.args.data.generalPage,
+      ...AboutPageStories.Primary.args.data.generalPage,
     },
     {
       slug: "contact",
-      ...ContactPageStories.NoImage.args.data.generalPage,
+      ...ContactPageStories.Primary.args.data.generalPage,
     },
   ],
 }
@@ -47,18 +48,15 @@ export const oneGeneralPage = {
   nodes: [
     {
       slug: "about",
-      ...AboutPageStories.NoImage.args.data.generalPage,
+      ...AboutPageStories.Primary.args.data.generalPage,
     },
   ],
 }
 
-export const noProjectPage = {
-  nodes: [{}],
-}
-
-export const noGeneralPage = {
+export const noPage = {
   nodes: [],
 }
+
 // Valid search function
 const validSearches = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
@@ -129,7 +127,7 @@ export const manyData = {
 
 // One general page, no project pages
 const [indexOneGen, documentsOneGen] = createSearchIndex({
-  noProjectPage,
+  noPage,
   oneGeneralPage,
 })
 const dbOneGen = documentsOneGen.reduce(function (acc, document) {
@@ -146,7 +144,7 @@ export const oneData = {
 // No general pages, one project page
 const [indexOneProj, documentsOneProj] = createSearchIndex({
   oneProject,
-  noGeneralPage,
+  noPage,
 })
 const dbOneProj = documentsOneProj.reduce(function (acc, document) {
   acc[document.slug] = document
@@ -159,7 +157,6 @@ export const oneProjectData = {
   db: dbOneProj,
 }
 
-//
 export const Primary: Story = {
   args: manyData,
 }
diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
index 5af823202..902b5b48a 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
@@ -66,9 +66,7 @@ export const SiteSearch: FunctionComponent<SearchProps> = ({
             const item = (
               <React.Fragment key={result.ref}>
                 <div className="px-2 py-4 overflow-hidden bg-white border border-gray-200 rounded-md shadow-md h-full flex flex-col md:mx-10 md:py-6 lg:mx-60">
-                  <h2 className="capitalize">
-                    {db[result.ref].question || db[result.ref].slug}
-                  </h2>
+                  <h2 className="capitalize">{db[result.ref].title}</h2>
                   <ul className="grid grid-rows-1 justify-center md:block">
                     <h2 className="font-sans text-black text-tag my-2 font-extrabold">
                       Match found in:
diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
index 1ab2ccd89..cd236eb1c 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearchWrapper.tsx
@@ -4,31 +4,20 @@ import SiteSearch from "./SiteSearch"
 
 export interface SearchWrapperProps {
   siteUrl: string
-  index?: lunr.Index
-  dataBase?: Function
 }
 
-export const SearchWrapper: FunctionComponent<SearchWrapperProps> = ({
+export const SiteSearchWrapper: FunctionComponent<SearchWrapperProps> = ({
   siteUrl,
-  index,
-  dataBase,
 }: SearchWrapperProps) => {
   const [idx, setIdx] = useState()
   const [db, setDb] = useState()
   useEffect(() => {
     const getIndex = async () => {
       const savedIndex = await (await fetch("/lunr-index.json")).json()
-      const documents = await (await fetch("/documents.json")).json()
+      const db = await (await fetch("/documents-reduced.json")).json()
 
       setIdx(lunr.Index.load(savedIndex))
-      // this is a function which grabs the slug from the original documents
-      // lunr tosses this info for SPEED
-      setDb(
-        documents.reduce(function (acc, document) {
-          acc[document.slug] = document
-          return acc
-        }, {})
-      )
+      setDb(db)
     }
 
     // Because Gatsby runs this on build, we need to say to ignore getting the json files
@@ -39,4 +28,3 @@ export const SearchWrapper: FunctionComponent<SearchWrapperProps> = ({
 
   return <div>{<SiteSearch siteUrl={siteUrl} index={idx} db={db} />}</div>
 }
-export default SearchWrapper
diff --git a/packages/gatsby-theme-project-portal/src/components/index.tsx b/packages/gatsby-theme-project-portal/src/components/index.tsx
index db4f1b166..c4a7a6edc 100644
--- a/packages/gatsby-theme-project-portal/src/components/index.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/index.tsx
@@ -31,3 +31,4 @@ export { Accordion } from "./Accordion"
 export { KeyDate } from "./KeyDate"
 export { NavbarItem } from "./NavbarItem"
 export { PageLayout } from "./PageLayout"
+export { SiteSearchWrapper } from "./SiteSearchWrapper"
diff --git a/packages/gatsby-theme-project-portal/src/fragments/site-search.js b/packages/gatsby-theme-project-portal/src/fragments/site-search.js
deleted file mode 100644
index 0416df574..000000000
--- a/packages/gatsby-theme-project-portal/src/fragments/site-search.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { graphql } from "gatsby"
-
-export const searchFragment = graphql`
-  fragment SearchData on Query {
-    allProject {
-      nodes {
-        slug
-        question
-        title
-        summary
-        status
-        opportunityCloses
-        startDate
-        endDate
-        lastModified
-        agency
-        topics {
-          ...TopicDetails
-        }
-        deliverable
-        purpose
-        expertise
-        requirement
-        keyDates
-        priorResearch
-        statusOfData
-        fundingInfo
-        emailContent
-        mainContact {
-          name
-          title
-          employer
-          email
-        }
-        projectTeam {
-          name
-          title
-          employer
-          email
-        }
-        faq {
-          text
-          title
-        }
-      }
-    }
-    allGeneralPage {
-      nodes {
-        slug
-        lede
-        faq {
-          text
-          title
-        }
-        aims {
-          text
-          title
-        }
-        title
-      }
-    }
-  }
-`
diff --git a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx
index d362bb74d..f6c0103b6 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx
@@ -7,7 +7,8 @@ const meta: Meta<typeof AboutPageLayout> = {
   component: AboutPageLayout,
   tags: ["autodocs"],
 }
-
+const backgroundImage = loadImage("image/background.jpg")
+console.log(backgroundImage)
 export default meta
 
 type Story = StoryObj<typeof AboutPageLayout>
@@ -17,7 +18,7 @@ export const Primary: Story = {
     data: {
       generalPage: {
         pageName: null,
-        title: null,
+        title: "About the Site",
         header: "What we're here to do",
         image: loadImage("image/background.jpg"),
         aims: [
@@ -43,8 +44,9 @@ export const NoImage: Story = {
     data: {
       generalPage: {
         pageName: null,
-        title: null,
+        title: "About No Images",
         header: "What we're here to do",
+        image: undefined,
         aims: [
           {
             title: "About Aim",
diff --git a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
index e4cbec5ce..6a233caba 100644
--- a/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
+++ b/packages/gatsby-theme-project-portal/src/layouts/SearchPageLayout.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from "react"
 import { graphql } from "gatsby"
-import SiteSearchWrapper from "../components/SiteSearchWrapper"
-import { HeaderWithImage } from "../components"
+import { HeaderWithImage, SiteSearchWrapper } from "../components"
 import { ImageDataLike } from "gatsby-plugin-image"
 
 export interface SearchLayoutProps {
diff --git a/packages/gatsby-theme-project-portal/utils/search.js b/packages/gatsby-theme-project-portal/utils/search.js
index c5f776aca..622a41e2f 100644
--- a/packages/gatsby-theme-project-portal/utils/search.js
+++ b/packages/gatsby-theme-project-portal/utils/search.js
@@ -4,43 +4,44 @@ function createSearchIndex(searchNodes) {
   // searchNodes = {allProject[], allGeneralPage[], siteUrl}
   let documents = []
   Object.keys(searchNodes).forEach((page) => {
-    if (page === "siteUrl") {
-      return
-    } else {
-      searchNodes[page].nodes.forEach((node) => {
-        let tempNode = structuredClone(node)
-        if (page === "allProject") {
-          if (!node.slug.includes("/")) {
-            tempNode.slug = `project/${node.slug}`
-          }
+    searchNodes[page].nodes.forEach((node) => {
+      let tempNode = structuredClone(node)
+      if (page === "allProject") {
+        if (!node.slug.includes("/")) {
+          tempNode.slug = `project/${node.slug}`
         }
-        const newItem = Object.values(tempNode).map((field) => {
-          if (lodash.isNull(field)) {
-            return null
-          }
-
-          if (typeof field === "object") {
-            return Object.values(field)
-              .filter((value) => !lodash.isNull(value))
-              .map((value) =>
-                typeof value === "string"
-                  ? value
-                  : Object.values(value)
-                      .filter((k) => !lodash.isNull(k))
-                      .join(" ")
-              )
-              .join(" ")
-          } else {
-            return field
-          }
-        })
+      }
+      const newItem = Object.values(tempNode).map((field) => {
+        if (lodash.isNull(field)) {
+          return null
+        }
+        // extract this part out, test it with a bunch of object cases
+        if (typeof field === "object") {
+          return Object.values(field)
+            .filter((value) => !lodash.isNull(value))
+            .map((value) => {
+              if (typeof value === "string") {
+                return value
+              } else if (value == undefined) {
+                // loose assignment for null
+                return value
+              } else {
+                Object.values(value)
+                  .filter((k) => !lodash.isNull(k))
+                  .join(" ")
+              }
+            })
+            .join(" ")
+        } else {
+          return field
+        }
+      })
 
-        Object.keys(tempNode).forEach((page, i) => {
-          tempNode[page] = newItem[i]
-        })
-        documents.push(tempNode)
+      Object.keys(tempNode).forEach((page, i) => {
+        tempNode[page] = newItem[i]
       })
-    }
+      documents.push(tempNode)
+    })
   })
 
   // ask lunr to ignore these words within a search
@@ -65,9 +66,6 @@ function createSearchIndex(searchNodes) {
     "been",
     "but",
     "by",
-    "can",
-    "cannot",
-    "could",
     "dear",
     "did",
     "do",
@@ -81,14 +79,11 @@ function createSearchIndex(searchNodes) {
     "get",
     "got",
     "had",
-    "has",
-    "have",
     "he",
     "her",
     "hers",
     "him",
     "his",
-    "how",
     "however",
     "i",
     "if",
@@ -101,7 +96,6 @@ function createSearchIndex(searchNodes) {
     "least",
     "let",
     "like",
-    "likely",
     "may",
     "me",
     "might",
@@ -126,7 +120,6 @@ function createSearchIndex(searchNodes) {
     "say",
     "says",
     "she",
-    "should",
     "since",
     "so",
     "some",
@@ -145,21 +138,12 @@ function createSearchIndex(searchNodes) {
     "too",
     "twas",
     "us",
-    "wants",
     "was",
     "we",
     "were",
-    "what",
-    "when",
-    "where",
-    "which",
     "while",
-    "who",
-    "whom",
-    "why",
     "will",
     "with",
-    "would",
     "yet",
     "you",
     "your",
@@ -199,4 +183,60 @@ function createSearchIndex(searchNodes) {
   return [index, documents]
 }
 
-module.exports = { createSearchIndex }
+const searchQuery = `
+    query {
+      allProject {
+        nodes {
+          title
+          agency
+          topics {
+            title
+          }
+          slug
+          summary
+          statusOfData
+          status
+          startDate
+          requirement
+          question
+          purpose
+          projectTeam {
+            name
+            employer
+          }
+          priorResearch
+          opportunityCloses
+          mainContact {
+            name
+          }
+          fundingInfo
+          expertise
+          faq {
+            text
+            title
+          }
+          deliverable
+          emailContent
+          endDate
+          slug
+        }
+      }
+      allGeneralPage {
+        nodes {
+          slug
+          lede
+          faq {
+            text
+            title
+          }
+          aims {
+            text
+            title
+          }
+          title
+        }
+      }
+    }
+  `
+
+module.exports = { createSearchIndex, searchQuery }