github · avanimathur · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
@@ -1,19 +1,79 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang }}">
-{% include head.html %}
+  {% include head.html %}
 
 <body>
   <main>
     <div id="content">
+      <!-- Search Form -->
+      <form id="searchForm" onsubmit="return searchSite(event)">
+        <input type="text" id="searchBar" placeholder="Search guides..." />
+        <button type="submit">Search</button>
+      </form>
+      <div id="results"></div>
+
+      <!-- Main Content -->
       {{ content }}
     </div>
   </main>
 
+  <!-- Scripts -->
   <script src="https://cdn.usefathom.com/script.js" data-site="BFHXUQHJ" defer></script>
   <script src='{{ "/assets/js/index.js" | relative_url }}'></script>
+  <script src="https://unpkg.com/lunr/lunr.js"></script>
+  <script src='{{ "/assets/js/search.js" | relative_url }}'></script>
+
+  <!-- Mailchimp Validation Script -->
   <script type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
-  <script
-    type="text/javascript">(function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; }(jQuery)); var $mcj = jQuery.noConflict(true);</script>
+  <script type="text/javascript">
+    (function ($) {
+      window.fnames = new Array(); 
+      window.ftypes = new Array();
+      fnames[0] = 'EMAIL'; ftypes[0] = 'email';
+      fnames[1] = 'FNAME'; ftypes[1] = 'text';
+      fnames[2] = 'LNAME'; ftypes[2] = 'text';
+    }(jQuery)); 
+    var $mcj = jQuery.noConflict(true);
+  </script>
+
+  <!-- Search Functionality -->
+  <script>
+    function searchSite(event) {
+      event.preventDefault();
+      const query = document.getElementById('searchBar').value.toLowerCase();
+      const resultsContainer = document.getElementById('results');
+      resultsContainer.innerHTML = ''; // Clear previous results
+
+      if (!query) {
+        return;
+      }
+
+      fetch('/assets/js/search-index.json')
+        .then(response => response.json())
+        .then(data => {
+          const idx = lunr(function () {
+            this.ref('id');
+            this.field('title');
+            this.field('content');
+
+            data.forEach(doc => {
+              this.add(doc);
+            });
+          });
+
+          const results = idx.search(query);
+          if (results.length === 0) {
+            resultsContainer.innerHTML = '<p>No results found.</p>';
+          } else {
+            results.forEach(result => {
+              const item = data.find(d => d.id === result.ref);
+              const resultItem = `<h3>${item.title}</h3><p>${item.content.slice(0, 150)}...</p>`;
+              resultsContainer.innerHTML += resultItem;
+            });
+          }
+        });
+    }
+  </script>
 </body>
 
-</html>
+</html>
@@ -0,0 +1,29 @@
+#searchBar {
+    width: 300px;
+    padding: 8px;
+    align-items: center;
+}
+
+button {
+    padding: 8px 12px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+#results div {
+    margin-top: 20px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    background-color: #f9f9f9;
+}
+
+#results h3 {
+    margin: 0;
+    font-size: 1.2em;
+}
+
+#results p {
+    margin: 5px 0 0 0;
+}
@@ -0,0 +1,27 @@
+[
+    {
+      "id": "1",
+      "title": "Building Community",
+      "content": "A guide for building a healthy and inclusive open-source community. It covers steps like defining community roles, setting clear expectations, and offering mentorship."
+    },
+    {
+      "id": "2",
+      "title": "Best Practices",
+      "content": "This guide discusses open-source best practices, including creating a clear README, using version control, writing contributing guidelines, and managing issues and pull requests effectively."
+    },
+    {
+      "id": "3",
+      "title": "Starting an Open Source Project",
+      "content": "Learn how to start an open-source project. It includes tips on choosing a license, writing documentation, and finding contributors."
+    },
+    {
+      "id": "4",
+      "title": "Leadership and Governance",
+      "content": "This article explains the importance of governance in open-source projects and provides advice on leadership structures and decision-making processes."
+    },
+    {
+      "id": "5",
+      "title": "Metrics and Measuring Success",
+      "content": "Focuses on the importance of tracking metrics in open-source projects. It covers ways to measure success, including community growth, code contributions, and user feedback."
+    }
+  ]  
@@ -98,4 +98,49 @@ function maintainHistoryState(event) {
   }
 }
 
+  // Additional code for Lunr.js integration
+  var searchBox = document.getElementById('searchBar');
+  var searchResultsDiv = document.getElementById('results');
+
+  // Initialize Lunr.js
+  const documents = [
+    { "id": 1, "title": "How to Contribute", "content": "Learn how to contribute to open source projects." },
+    { "id": 2, "title": "Building a Community", "content": "Guidelines for creating and nurturing a community." },
+    { "id": 3, "title": "Finding Users for Your Project", "content": "Strategies for getting users for your open source project." },
+    // Add more guide data dynamically or statically
+  ];
+
+  const idx = lunr(function () {
+    this.ref('id');
+    this.field('title');
+    this.field('content');
+
+    documents.forEach(function (doc) {
+      this.add(doc);
+    }, this);
+  });
+
+  // Handle form submission and search
+  document.getElementById('searchForm').addEventListener('submit', function (e) {
+    e.preventDefault();
+    const query = searchBox.value;
+    const results = idx.search(query);
+    displayResults(results);
+  });
+
+  // Function to display search results
+  function displayResults(results) {
+    searchResultsDiv.innerHTML = ''; // Clear previous results
+
+    if (results.length > 0) {
+      results.forEach(result => {
+        const doc = documents.find(d => d.id === parseInt(result.ref));
+        const resultItem = `<div><h3>${doc.title}</h3><p>${doc.content}</p></div>`;
+        searchResultsDiv.innerHTML += resultItem;
+      });
+    } else {
+      searchResultsDiv.innerHTML = '<p>No results found</p>';
+    }
+  }
+
 })();