feat: add search

Author: jeffabailey

assets/scss/_search.scss

@@ -0,0 +1,56 @@
+.search-container {
+    position: relative;
+    padding: 10px 15px;
+  }
+  
+  #search-input {
+    width: 100px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .search-results {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 15px;
+    right: -200px;
+    min-width: 300px;
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    max-height: 400px;
+    overflow-y: auto;
+    z-index: 1000;
+
+    .search-result-item {
+      display: block;
+      padding: 10px;
+      text-decoration: none;
+      color: inherit;
+      border-bottom: 1px solid #eee;
+
+      &:hover {
+        background: #f5f5f5;
+      }
+
+      .search-result-title {
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      .search-result-summary {
+        font-size: 0.9em;
+        color: #666;
+      }
+    }
+
+    .no-results {
+      padding: 10px;
+      text-align: center;
+      color: #666;
+    }
+  } 

assets/scss/style.scss

@@ -23,4 +23,6 @@ VERSION:	Versoin Number
 
 @import 'templates/main.scss';
 
-@import 'custom';
+@import 'custom';
+
+@import 'search';

config/_default/config.yaml

@@ -21,3 +21,5 @@ frontmatter:
   date:
   - report_publish_date
   - :default
+outputs:
+  home: ["HTML", "RSS", "JSON"]

layouts/_default/index.json

@@ -0,0 +1,20 @@
+{
+  "data": [
+    {{- $pages := .Site.AllPages -}}
+    {{- $len := (len $pages) -}}
+
+    {{- range $index, $e := (where .Site.AllPages "Section" "in" (slice "learn" "about" "events" "stories" "patterns" "isc-101")) -}}
+      {{- if and (not .Params.hidden) (not .Draft) -}}
+        {{- if $index -}},{{- end }}
+        {
+          "id": {{ $index | add 1 }},
+          "len": {{ $len }},
+          "url": "{{ .Permalink }}",
+          "title": {{ .Title | jsonify }},
+          "summary": {{ .Summary | jsonify }},
+          "lang": "{{ .Language.Lang }}"
+        }
+      {{- end -}}
+    {{- end -}}
+  ]
+} 

layouts/partials/menu.html

@@ -11,6 +11,7 @@
       </div>
     </div>
   </div>
+  {{ partial "search" . }}
 </li>
 
 <script>

layouts/partials/search.html

@@ -0,0 +1,70 @@
+<li class="menu-item" id="search-menu-item">
+  <div class="search-container">
+    <input 
+      type="text" 
+      id="search-input" 
+      placeholder="Search..." 
+      autocomplete="off"
+    >
+    <div id="search-results" class="search-results"></div>
+  </div>
+</li>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const searchInput = document.getElementById('search-input');
+  const searchResults = document.getElementById('search-results');
+
+  function createSearchResultHTML(item) {
+    const summary = item.summary || '';
+    const truncatedSummary = summary.length > 100 ? 
+      `${summary.substring(0, 100)}...` : 
+      summary;
+
+    return `
+      <a href="${item.url}" class="search-result-item">
+        <div class="search-result-title">${item.title || ''}</div>
+        <div class="search-result-summary">${truncatedSummary}</div>
+      </a>
+    `;
+  }
+
+  function handleSearch() {
+    const searchQuery = searchInput.value.trim();
+    
+    if (searchQuery.length < 2) {
+      searchResults.style.display = 'none';
+      return;
+    }
+
+    fetch('/index.json')
+      .then(response => response.json())
+      .then(response => {
+        const data = Object.values(response.data || {});
+        const currentLang = document.documentElement.lang || 'en';
+        
+        const results = data.filter(item => {
+          if (item.lang !== currentLang) return false;
+          
+          const regex = new RegExp(searchQuery, 'i');
+          return (item.title && item.title.match(regex)) || 
+                 (item.content && item.content.match(regex));
+        });
+
+        searchResults.innerHTML = results.length ? 
+          results.map(createSearchResultHTML).join('') : 
+          '<div class="no-results">No results found</div>';
+        
+        searchResults.style.display = 'block';
+      });
+  }
+
+  searchInput.addEventListener('input', handleSearch);
+
+  document.addEventListener('click', function(e) {
+    if (!e.target.closest('.search-container')) {
+      searchResults.style.display = 'none';
+    }
+  });
+});
+</script>