diff --git a/src/_includes/layouts/common-js.njk b/src/_includes/layouts/common-js.njk
index 161f877125..344a96e487 100644
--- a/src/_includes/layouts/common-js.njk
+++ b/src/_includes/layouts/common-js.njk
@@ -40,6 +40,72 @@
         }
         const placeholder = Object.prototype.hasOwnProperty.call(scopeTitles, searchScope) ? `Search in ${scopeTitles[searchScope]}...` : 'Search...'
 
+        const searchQuery = (searchClient, query, scope) => {
+            return {
+                sourceId : scope,
+                getItems : () => getAlgoliaResults({
+                    searchClient,
+                    queries: [
+                        {
+                            indexName            : 'netlify_00f8cf60-997f-4c4d-9427-a97924358648_live_all',
+                            params               : {
+                                query,
+                                hitsPerPage: 5,
+                            },
+                            attributesToHighlight: '*',
+                            filters: scope.length === 0 ?  undefined : `category:${scope}`
+                        },
+                    ],
+                }),
+                templates: {
+                    header({html}) {
+                        if (!Object.prototype.hasOwnProperty.call(scopeTitles, scope)) {
+                            return null;
+                        }
+
+                        return html`
+                            <span class="aa-SourceHeaderTitle">In ${scopeTitles[scope]}</span>
+                            <div class="aa-SourceHeaderLine"/>
+                        `;
+                    },
+                    item({item, components, html}) {
+                        return html`
+                            <a href="${item.url}" class="aa-ItemWrapper">
+                                <div class="aa-ItemContent">
+                                    <div class="aa-ItemIcon aa-ItemIcon--alignTop">
+                                        <img
+                                                src="${item.image}"
+                                                alt="${item.name}"
+                                                width="40"
+                                                height="40"
+                                        />
+                                    </div>
+                                    <div class="aa-ItemContentBody">
+                                        <div class="aa-ItemContentTitle">
+                                            ${components.Highlight({
+                            hit      : item,
+                            attribute: ['hierarchy', 'lvl0'],
+                        })}
+                                        </div>
+                                          <div class="aa-ItemContentSubTitle ${item.type === 'lvl0' ? 'hidden' : ''}">
+                                            ${components.Highlight({
+                            hit      : item,
+                            attribute: ['hierarchy', item.type],
+                        })}
+                                          </div>
+                                        <div class="aa-ItemContentDescription">
+                                            ${components.Snippet({
+                            hit      : item,
+                            attribute: 'description',
+                        })}
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>`;
+                    },
+                },
+            };
+        }
     }
 </script>