search - NFHN Reader

Static Site Search

A tool to index and generate a search page for your static site.

Demo

Find it here https://mindaslab.github.io/search/

Install

Install static site search using

$ curl -L https://yu7.in/install-sss | sh

Get the latest release here https://codeberg.org/static-site-search/search/releases, you need to have Java installed, and you must know to run a jar file.

Usage

Collect URL's

First I took all links from my Jekyll blog using this commpand. Please install lynx first.

$ lynx --dump --listonly --nonumbers --display_charset=utf-8 https://mindaslab.github.io | grep "^http" | sort | uniq > urls.txt

urls.txt contains all the URLs I want to index. Now I can run the indexer.

Now in the same directory run:

$ sss

Now you will have a file named index.html in your current directory, this will search through your blog / static site.

Custom template

For example in Clojure Diary Search, I used a custom template. I created a file called _template.html in the same directory as urls.txt, and it had the following content:

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Clojure Diary Search</title>
      <style>
          body { font-family: Arial, sans-serif; }
          #search { width: 300px; padding: 10px; font-size: 16px; }
          #results { margin-top: 20px; }
          .result-item { margin-bottom: 10px; }
          .result-url { color: grey; font-size: 0.9em; }
          a { text-decoration: none; color: inherit; }
          a:hover { text-decoration: underline; }
          .powered_by {
            text-align: center;
            margin-top: 50px;
          }

          .powered_by img {
            width: 200px;
          }

          .home{
            color: blue;
          }
      </style>
  </head>
  <body>
    <h1>Clojure Diary Search</h1>
    <input type="text" id="search" placeholder="Enter words to search...">

    <p>
      <a href="/" class="home">Home</a>
    </p>

    <div id="results"></div>

    <div class="powered_by">
      <a href="https://yu7.in/sss" target="_blank" />
        <img src="https://yu7.in/btn-sss" />
      </a>
    </div>

    <script>
        const data = #{{JSON_DATA}};
        const urls = data.urls;
        const index = data.index;

        document.getElementById('search').addEventListener('input', function(event) {
            const query = event.target.value.toLowerCase().trim();
            const words = query.split(/\s+/).filter(word => word.length > 0);
            const results = words.length === 0
                ? []
                : Object.values(index)
                      .flatMap(wordIds => wordIds)
                      .filter(id => words.every(word => index[word]?.includes(id)))
                      .filter((id, index, self) => self.indexOf(id) === index) // Remove duplicates
                      .map(id => urls.find(url => url.id === id));
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = results.map(info => `
                <div class="result-item">
                    <a href="${info.url}" target="_blank"><strong>${info.title}</strong></a>
                    <div class="result-url">${info.url}</div>
                </div>
            `).join('');
        });
    </script>
  </body>
  </html>

Static Site Search will omit its default template and use the custom one, if it finds it in the working directory.

Contributing to this project

To contribute, contact +91 8428050777, on Arattai, WhatApp, Telegram, Signal. Or generate a pull request with clear notes telling what you have done.