Add tags to search, exclude home from search, add keyword options for search. After push still need to update index

Author: Erik2609

assets/scss/_custom.scss

@@ -59,10 +59,29 @@
 	color: #005aa7;
 	font-style: normal;
 	text-decoration: none !important;
-	
 	background-color: #FFCBBD;
 }
 
+.highlight-yellow-sm {
+	border: rgba(255, 255, 255, 0) 0.3rem solid;
+	border-radius: 0.75rem;
+	padding: 0.25rem 0.5rem !important;
+	color: #005aa7;
+	font-style: normal;
+	text-decoration: none !important;
+	background-color: #FFFDE4;
+}
+
+.highlight-lightblue-sm {
+	border: rgba(255, 255, 255, 0) 0.3rem solid;
+	border-radius: 0.75rem;
+	padding: 0.25rem 0.5rem !important;
+	color: #005aa7;
+	font-style: normal;
+	text-decoration: none !important;
+	background-color: #E3F0FE;
+}
+
 .yellow-button {
 	margin-left: 20px;
 	background-color: #005aa7;

content/english/_index.md

@@ -1,5 +1,6 @@
 ---
 search:
+  excludeFromSearch: true
   title: Building public knowledge for responsible algorithms
   subtitle: A European knowledge platform for AI bias testing and AI standards.
   image: /images/logo/logo.svg
@@ -79,9 +80,11 @@ Activity_Feed:
   items_title: Upcoming events
   activities:
     - title: >-
-        Presentation 'Meaningful human interaction', Network of Dutch Public Service Suppiers
+        Presentation 'Meaningful human interaction', Network of Dutch Public
+        Service Suppiers
+      link: >-
+        /knowledge-platform/knowledge-base/public_standard_meaningful_human_intervention/
       image: /images/partner logo-cropped/NPD.png
-      link: /knowledge-platform/knowledge-base/public_standard_meaningful_human_intervention/
       date: 30-10-2025
       type: presentation
     - title: >-

content/english/events/activities.md

@@ -1,5 +1,6 @@
 ---
 search:
+  excludeFromSearch: true
   title: Publieke kennisopbouw voor verantwoorde algoritmes
   subtitle: Een Europees kennisplatform voor  AI bias testing en AI standaarden.
   image: /images/logo/logo.svg
@@ -84,9 +85,11 @@ Activity_Feed:
   items_title: Aankomende events
   activities:
     - title: >-
-        Presentatie 'Betekenisvolle menselijke tussenkomst', Netwerk van Publieke Dienstverleners
+        Presentatie 'Betekenisvolle menselijke tussenkomst', Netwerk van
+        Publieke Dienstverleners
+      link: >-
+        /nl/knowledge-platform/knowledge-base/public_standard_meaningful_human_intervention/
       image: /images/partner logo-cropped/NPD.png
-      link: /nl/knowledge-platform/knowledge-base/public_standard_meaningful_human_intervention/
       date: 30-10-2025
       type: presentatie
     - title: 'Presentatie ''Local-only tools voor AI validatie'', Platform AI & Overheid'

content/nederlands/_index.md

@@ -11,7 +11,6 @@
 {{ partial "overview_block.html" .}}
 
 <style>
-    
   .search-overlay {
     cursor: pointer;
     position: fixed;
@@ -27,7 +26,9 @@
     &.isfocused {
       z-index: 12000;
     }
+
     position: relative;
+
     .search-panel {
       display: block;
     }
@@ -56,12 +57,15 @@
       margin-top: 10px;
       margin-bottom: 10px;
     }
+
     .search-result-image {
       height: auto;
       width: auto;
+
       @media (min-width: 992px) {
         position: absolute;
       }
+
       top: 0;
       left: 0;
       bottom: 0;
@@ -75,6 +79,27 @@
       margin-top: 40px;
     }
 
+    .search-tags-desktop {
+      @media (max-width: 992px) {
+        display: none;
+      }
+
+      @media (min-width: 992px) {
+        bottom: 13px;
+      }
+    }
+
+    .search-tags-mobile {
+      @media (min-width: 992px) {
+        display: none;
+      }
+
+      @media (max-width: 992px) {
+        top: 30px;
+        right: 30px;
+      }
+    }
+
     ol.ais-Hits-list {
       list-style: none;
     }
@@ -121,7 +146,7 @@ <h2 class="pt-5 color-blue">{{i18n "search" }}</h2>
       indexName: 'website_pages',
       searchClient,
       future: { preserveSharedStateOnUnmount: true },
-      searchFunction: function(helper) {
+      searchFunction: function (helper) {
         if (helper.state.query === '') {
           return;
         }
@@ -163,16 +188,50 @@ <h2 class="pt-5 color-blue">{{i18n "search" }}</h2>
         }
 
         const searchInput = $(".ais-SearchBox-input");
-        if(!searchInput.is(":focus")) {
+        if (!searchInput.is(":focus")) {
           container.querySelector('ol').innerHTML = "";
           return;
         }
 
-        if(!items || !items.length > 0) {
+        if (!items || !items.length > 0) {
           container.querySelector('ol').innerHTML = `<p>{{i18n "search-no-results"}}</p>`;
           return;
         }
-        
+
+        const tagToHighlightClass = (tag) => {
+          if (tag === "Kennisplatform"
+          || tag === "Knowledge platform") {
+            return `highlight-lightblue-sm`;
+          }
+
+          if (tag === "Algoprudentie"
+          || tag === "Algoprudence") {
+            return `highlight-red-sm`;
+          }
+
+          if (tag === "Technische tools"
+          || tag === "Technical tools") {
+            return `highlight-yellow-sm`;
+          }
+
+          if (tag === "Events"
+          || tag === "Evenementen") {
+            return `highlight-lightblue-sm`;
+          }
+
+          if (tag === "About"
+          || tag === "Over ons") {
+            return `highlight-lightblue-sm`;
+          }
+        }
+
+        const tagToHtml = (tag) => {
+          if (!tag) {
+            return '';
+          }
+          return `<span class="${tagToHighlightClass(tag)} mr-3">${tag}</span>`;
+        };
+
         container.querySelector('ol').innerHTML = items
           .map(
             item => {
@@ -181,15 +240,22 @@ <h2 class="pt-5 color-blue">{{i18n "search" }}</h2>
               <a href=${item.url} class="container">
                 <div class="row search-result-row">
                   <div class="col-12 col-lg-2">
+                    <div class="position-absolute search-tags-mobile">
+                      ${tagToHtml(item.tag)}
+                    </div>
                     <div class="my-3 text-center image-frame">
                       <img class="image-fluid search-result-image d-inline p-2" src='${item.image}' alt='${item.title}' />
                     </div>
                   </div>
                   <div class="col-12 col-lg-10">
                     <h3 class="color-blue search-result-title">${item._highlightResult.title.value}</h3>
                     <p class="color-gray search-result-subtitle">${item._highlightResult.subtitle.value}</p>
+                    <div class="position-absolute search-tags-desktop">
+                      ${tagToHtml(item.tag)}
+                    </div>
                   </div>
                 </div>
+                
               </a>
             </li>
           `;

layouts/index.html

@@ -17,9 +17,11 @@
 
 <meta name="algolia-site-verification"  content="5A3FFC70E885F0D0" />
 
+<meta name="search_exclude" content="{{if .Params.search.excludeFromSearch}}true{{end}}"> 
 <meta name="search_title" content="{{if .Params.search.title}}{{.Params.search.title}}{{else}}{{.Params.title}}{{end}}"> 
 <meta name="search_subtitle" content="{{if .Params.search.title}}{{.Params.search.subtitle}}{{else}}{{.Params.subtitle}}{{end}}"> 
 <meta name="search_image" content="{{if .Params.search.image}}{{.Params.search.image | relURL}}{{else}}{{.Params.image | relURL}}{{end}}"> 
+<meta name="search_content" content="{{if .Params.search.searchableText}}{{.Params.search.searchableText}}{{end}}"> 
 
 <!--Favicon-->
 <link rel="shortcut icon" href="{{ site.Params.favicon | absURL }}" type="image/x-icon">

layouts/partials/head.html

@@ -7,6 +7,11 @@ const search: TinaField = {
   description:
     "Search configuration for Algolia. This will be used to populate the search index. If left empty, the values above will be used. It is recommended to fill this out for better search results.",
   fields: [
+    {
+      type: "boolean",
+      name: "excludeFromSearch",
+      label: "Exclude from Algolia Search",
+    },
     {
       type: "string",
       name: "title",
@@ -21,7 +26,11 @@ const search: TinaField = {
       type: "image",
       name: "image",
       label: "Image",
-      required: true,
+    },
+    {
+      type: "string",
+      name: "searchableText",
+      label: "Searchable Text",
     },
   ],
 };