initial static search

gatsby-config.ts

@@ -72,7 +72,112 @@ const config: GatsbyConfig = {
           },
         ]
       }
-    }
+    },
+    {
+      resolve: 'gatsby-plugin-local-search',
+      options: {
+        // A unique name for the search index. This should be descriptive of
+        // what the index contains. This is required.
+        name: 'collections',
+
+        // Set the search engine to create the index. This is required.
+        // The following engines are supported: flexsearch, lunr
+        engine: 'flexsearch',
+
+        // Provide options to the engine. This is optional and only recommended
+        // for advanced users.
+        //
+        // Note: Only the flexsearch engine supports options.
+        engineOptions: 'speed',
+
+        // GraphQL query used to fetch all data for the search index. This is
+        // required.
+        query: `
+          {
+            allAirtableScdItems(
+              filter: {data: {scd_publish_status: {nin: ["duplicate-record-do-not-display", "do-not-display"]}}}
+            ) {
+              nodes {
+                data {
+                  collection_id
+                  scd_publish_status
+                  record_type
+                  collection_content_category
+                  collection_title
+                  collection_description
+                  collection_holder_category
+                  collection_holder_name
+                  collection_holder_city
+                  collection_holder_state
+                  collection_holder_country
+                  content_types
+                  dates
+                  extent
+                  historical_relevance
+                  subjects
+                  creators
+                  physical_formats
+                  access_statement
+                  finding_aid_url
+                  collection_catalog_url
+                  supporting_documentation
+                  languages
+                  inventory_description
+                }
+              }
+            }
+          }
+        `,
+
+        // Field used as the reference value for each document.
+        // Default: 'id'.
+        ref: 'collection_id',
+
+        // List of keys to index. The values of the keys are taken from the
+        // normalizer function below.
+        // Default: all fields
+        // index: ['title', 'body'],
+
+        // List of keys to store and make available in your UI. The values of
+        // the keys are taken from the normalizer function below.
+        // Default: all fields
+        store: ['collection_id'],
+
+        // Function used to map the result from the GraphQL query. This should
+        // return an array of items to index in the form of flat objects
+        // containing properties to index. The objects must contain the `ref`
+        // field above (default: 'id'). This is required.
+        normalizer: ({ data }: {data: Queries.qCollectionsQuery}) =>
+          data.allAirtableScdItems.nodes.map((node) => {
+            const d = node.data!
+            return ({
+            collection_id: d.collection_id,
+            scd_publish_status: d.scd_publish_status,
+            record_type: d.record_type,
+            collection_content_category: d.collection_content_category,
+            collection_title: d.collection_title,
+            collection_description: d.collection_description,
+            collection_holder_category: d.collection_holder_category,
+            collection_holder_name: d.collection_holder_name,
+            collection_holder_city: d.collection_holder_city,
+            collection_holder_state: d.collection_holder_state,
+            collection_holder_country: d.collection_holder_country,
+            content_types: d.content_types,
+            dates: d.dates,
+            extent: d.extent,
+            historical_relevance: d.historical_relevance,
+            subjects: d.subjects,
+            creators: d.creators,
+            physical_formats: d.physical_formats,
+            access_statement: d.access_statement,
+            finding_aid_url: d.finding_aid_url,
+            collection_catalog_url: d.collection_catalog_url,
+            supporting_documentation: d.supporting_documentation,
+            languages: d.languages,
+            inventory_description: d.inventory_description
+          })}),
+      },
+    },
   ]
 };
 

package.json

@@ -18,8 +18,10 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.20",
+    "flexsearch": "^0.7.43",
     "gatsby": "^5.13.7",
     "gatsby-plugin-image": "^3.13.1",
+    "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-postcss": "^6.13.1",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-source-airtable": "^2.4.3",
@@ -29,6 +31,7 @@
     "postcss": "^8.4.47",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-use-flexsearch": "^0.1.1",
     "tailwindcss": "^3.4.14"
   },
   "devDependencies": {

src/components/FacetAccordion.tsx

@@ -79,7 +79,10 @@ const FacetAccordion: React.FC<PropsWithChildren & FacetAccordionProps>  = ({lab
               return <li className={`table-row ${active ? 'text-green-600 font-bold' : ''}`} key={`v${item.label}`}>
                 <span className="table-cell px-4 -indent-4 pb-2 break-words hyphens-auto">
                   {active
-                    ? <>{item.label}<a onClick={(e) => handleRemoveFacet(e, item)} href="#" className="text-gray-500 font-bold pl-2 text-[0.6rem] align-bottom hover:text-rose-800"><span aria-hidden="true">✖</span><span className="sr-only">[remove]</span></a></>
+                    ? <>
+                        <a onClick={(e) => handleRemoveFacet(e, item)} href="#" className="text-gray-500 font-bold pr-2 text-[0.6rem] align-bottom hover:text-rose-800"><span aria-hidden="true">✖</span><span className="sr-only">[remove]</span></a>
+                        {item.label}
+                      </>
                     : <a className="text-rose-800 hover:underline" href="#" onClick={(e) => handleItemClick(e, item)}>{item.label}</a>
                   }
                 </span>

src/components/Header.tsx

@@ -17,9 +17,6 @@ const Header = () => {
       </ul>
     </nav>
   </header>
-  <div className="h-14">
-    {/* This will hold the search bar */}
-  </div>
   </>)
 }