feat: search function

Author: Tony-Rome

pelicanconf.py

@@ -44,3 +44,7 @@
     },
     "output_format": "html5",
 }
+
+TEMPLATE_PAGES = {
+    "search.json": "search.json",
+}

theme/templates/base.html

@@ -40,48 +40,57 @@
               });
         });
 
-        document.addEventListener("DOMContentLoaded", () => {
-  const searchInput = document.getElementById("search-bar");
-  const resultsContainer = document.createElement("div");
-  resultsContainer.className = "search-results";
-  searchInput.parentNode.appendChild(resultsContainer);
-
-  let articles = [];
-
-  // Load JSON
-  fetch("{{ SITEURL }}/search.json")
-    .then(response => response.json())
-    .then(data => { articles = data; });
-
-  // Search logic
-  searchInput.addEventListener("input", () => {
-    const query = searchInput.value.toLowerCase().trim();
-    resultsContainer.innerHTML = "";
-
-    if (!query) return;
-
-    const words = query.split(/\s+/);
-
-    // ✅ At least one word must match title, summary, or tags
-    const matches = articles.filter(article =>
-      words.some(word =>
-        (article.title && article.title.toLowerCase().includes(word)) ||
-        (article.summary && article.summary.toLowerCase().includes(word)) ||
-        (article.tags && article.tags.join(" ").toLowerCase().includes(word))
-      )
-    );
-
-    if (matches.length === 0) {
-      resultsContainer.innerHTML = "<div>No results found</div>";
-    } else {
-      matches.forEach(article => {
-        const item = document.createElement("div");
-        item.className = "search-result";
-        item.innerHTML = `<a href="${article.url}">${article.title}</a>`;
-        resultsContainer.appendChild(item);
-      });
-    }
-  });
+    document.addEventListener("DOMContentLoaded", () => {
+        const searchInput = document.getElementById("search-bar");
+        const resultsContainer = document.createElement("div");
+        resultsContainer.className = "search-results";
+        searchInput.parentNode.appendChild(resultsContainer);
+
+        let articles = [];
+
+        fetch("{{ SITEURL }}/search.json")
+            .then(response => response.json())
+            .then(data => { articles = data; });
+
+        searchInput.addEventListener("input", () => {
+
+            const query = searchInput.value.toLowerCase().trim();
+
+            if (!query) return;
+
+            const words = query.split(/\s+/);
+
+            // Almenos una coincidencia con title, summary, tags
+            const matches = articles.filter(article =>
+            words.some(word =>
+            (article.title && article.title.toLowerCase().includes(word)) ||
+            (article.summary && article.summary.toLowerCase().includes(word)) ||
+            (article.tags && article.tags.join(" ").toLowerCase().includes(word))
+            ));
+
+            if (matches.length !== 0) {
+
+                const previewContainer = document.querySelector(".preview-container");
+                previewContainer.innerHTML = "";
+
+                matches.forEach(article => {
+                    const li = document.createElement("li");
+                    li.className = "preview-post";
+                    li.innerHTML = `
+                      <a class="preview-link" href="${article.url}">
+                        <img class="preview-img" src="${article.image || '{{ SITEURL }}/img/otros/default.webp'}" alt="">
+                        <div class="preview-title">${article.title}</div>
+                        <div class="preview-summary">${article.summary || ""}</div>
+                        <div class="preview-author">${article.date || ""} ${article.author ? "Por " + article.author : ""}</div>
+                        <div class="preview-tags-container">
+                          ${(article.tags || []).map(tag => `<div class="preview-tag">${tag}</div>`).join("")}
+                        </div>
+                      </a>
+                    `;
+                    previewContainer.appendChild(li);
+                });
+            }
+        });
 });
     </script>
 

theme/templates/index.html

@@ -21,7 +21,6 @@ <h1 class="welcome-msg-title">¡Hola Pythonista!</h1>
             <li class="preview-post">
                 <a class="preview-link" href="{{ SITEURL }}/{{ article.url }}">
                     <img class="preview-img" src="{{ SITEURL }}/{{ article.image }}" alt="">
-                    <br/>
                     <div class="preview-title">{{ article.title }}</div>
                     <div class="preview-summary">{{ article.summary }}</div>
                     <div class="preview-author">{{ article.date.strftime('%Y-%m-%d') }} Por {{ article.author }}</div>

theme/templates/search.json

@@ -0,0 +1,12 @@
+[
+  {% for article in articles %}
+    {
+      "title": {{ article.title|tojson }},
+      "date": "{{ article.date }}",
+      "url": "{{ SITEURL }}/{{ article.url }}",
+      "summary": {{ article.summary|striptags|tojson }},
+      "image": "{{ SITEURL }}/{{ article.image }}",
+      "tags": [{% for tag in article.tags %}{{ tag.name|tojson }}{% if not loop.last %}, {% endif %}{% endfor %}]
+    }{% if not loop.last %},{% endif %}
+  {% endfor %}
+]