Make page score configurable for search results

gatsby-config.js

@@ -98,7 +98,7 @@ module.exports = {
           {query: 'li', label: 'List item'},
           {query: 'pre', label: 'Code'},
           {query: 'table', label: 'Table'},
-          {query: 'h3, h4, h5, h6', label: 'Heading'},
+          {query: 'h3, h4, h5, h6', label: 'Heading', weight: 5},
           {query: 'p', label: 'Paragraph'},
         ],
         exclude: {

plugins/my-search-index/gatsby-node.js

@@ -50,6 +50,7 @@ const getChunks = ($, node, chunkTypes, exclude, counts) => {
             label: type.label,
             id: id,
             text: text,
+            weight: type.weight === undefined ? 1 : type.weight,
           })
       }
       break

src/components/search.js

@@ -19,7 +19,7 @@ const getSearchResults = (query, data) => {
 
   const result = data.map( ({ node }) => {
 
-    let score = 0
+    let pageScore = 0
     const matches = []
     for (let i = 0; i < node.chunks?.length; i++) {
 
@@ -40,7 +40,7 @@ const getSearchResults = (query, data) => {
             indices: indices,
           }
         )
-        score += indices.length
+        pageScore += chunk.weight * indices.length
       }
     }
 
@@ -48,7 +48,7 @@ const getSearchResults = (query, data) => {
       url: node.frontmatter.path,
       title: node.frontmatter.titles.filter(x => x).join(' | '),
       matches: matches,
-      score: score,
+      score: pageScore,
     }
   })
 

src/css/search.css

@@ -50,6 +50,7 @@
   padding: 0.5rem;
   background: var(--search-chunk-background);
   border-radius: 0.75rem;
+  font-size: 1.1rem;
 }
 
 #search-results a.label {