bgoonz/search-index.js

## search-index.js
const fs = require("fs");
const path = require("path");

const fm = require("front-matter");

const {
  CONTENT_ROOT,
  CONTENT_TRANSLATED_ROOT,
  VALID_LOCALES,
} = require("../content");
const { SearchIndex } = require("../build");

function* walker(root) {
  const dirents = fs.readdirSync(root, { withFileTypes: true });
  for (const dirent of dirents) {
    // Doing it this way is faster than doing `path.join(root, dirent.name)`
    const filepath = `${root}${path.sep}${dirent.name}`;
    if (dirent.isDirectory()) {
      yield* walker(filepath);
    } else {
      yield filepath;
    }
  }
}

function populateSearchIndex(searchIndex, localeLC) {
  const root = path.join(
    localeLC === "en-us" ? CONTENT_ROOT : CONTENT_TRANSLATED_ROOT,
    localeLC
  );
  const locale = VALID_LOCALES.get(localeLC);
  for (const filePath of walker(root)) {
    const basename = path.basename(filePath);
    if (!(basename === "index.html" || basename === "index.md")) {
      continue;
    }
    const rawContent = fs.readFileSync(filePath, "utf-8");
    const { attributes: metadata } = fm(rawContent);
    metadata.locale = locale;

    const url = `/${locale}/docs/${metadata.slug}`;
    const doc = { metadata, url };
    searchIndex.add(doc);
  }
}

async function searchIndexRoute(req, res) {
  // Remember, this is always in lowercase because of a middleware
  // that lowercases all incoming requests' pathname.
  const locale = req.params.locale;
  if (locale !== "en-us" && !CONTENT_TRANSLATED_ROOT) {
    res.status(500).send("CONTENT_TRANSLATE_ROOT not set\n");
    return;
  }
  if (!VALID_LOCALES.has(locale)) {
    res.status(500).send(`unrecognized locale ${locale}`);
    return;
  }

  // The advantage of creating the search index over and over on every
  // request is that it can't possible cache itself stale.
  // Imagine if a user just seconds ago created a page, and reaches for
  // the search widget and can't find what they just created.
  // Or perhaps they edited a title and expect that to turn up.

  // However, if this is causing a problem, we can easily turn on some
  // caching. Either `Cache-Control` on the response.
  // Or, we can make this `searchIndex` a module global so it's reused
  // repeatedly until the server is restarted.

  const searchIndex = new SearchIndex();

  const label = "Populate search-index";
  console.time(label);
  populateSearchIndex(searchIndex, locale);
  searchIndex.sort();
  console.timeEnd(label);
  res.json(searchIndex.getItems()[locale]);
}

module.exports = {
  searchIndexRoute,
};

## search.html
<!DOCTYPE html>
<html lang='en' class=''>
  <head>
    <meta charset='UTF-8'>
    <title>Search Bar Demo</title>
    <style>
        body {
        background-color: #3745c2;
        margin: 200px 40%;
      }

      form {
        background-color: #4654e1;
        width: 300px;
        height: 44px;
        border-radius: 5px;
        display:flex;
        flex-direction:row;
        align-items:center;
      }

      input {
        all: unset;
        font: 16px system-ui;
        color: #fff;
        height: 100%;
        width: 100%;
        padding: 6px 10px;
      }

      ::placeholder {
        color: #fff;
        opacity: 0.7;
      }

      svg {
        color: #fff;
        fill: currentColor;
        width: 24px;
        height: 24px;
        padding: 10px;
      }

      button {
        all: unset;
        cursor: pointer;
        width: 44px;
        height: 44px;
      }
    </style>
  </head>
  <body>
    <form role="search" id="form">
      <input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
      <button>
        <svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
      </button>
    </form>
    <script>
      const f = document.getElementById('form');
      const q = document.getElementById('query');
      const google = 'https://www.google.com/search?q=site%3A+';
      const site = 'pagedart.com';

      function submitted(event) {
        event.preventDefault();
        const url = google + site + '+' + q.value;
        const win = window.open(url, '_blank');
        win.focus();
      }

      f.addEventListener('submit', submitted);
    </script>
  </body>
</html>
	const fs = require("fs");
	const path = require("path");

	const fm = require("front-matter");

	const {
	CONTENT_ROOT,
	CONTENT_TRANSLATED_ROOT,
	VALID_LOCALES,
	} = require("../content");
	const { SearchIndex } = require("../build");

	function* walker(root) {
	const dirents = fs.readdirSync(root, { withFileTypes: true });
	for (const dirent of dirents) {
	// Doing it this way is faster than doing `path.join(root, dirent.name)`
	const filepath = `${root}${path.sep}${dirent.name}`;
	if (dirent.isDirectory()) {
	yield* walker(filepath);
	} else {
	yield filepath;
	}
	}
	}

	function populateSearchIndex(searchIndex, localeLC) {
	const root = path.join(
	localeLC === "en-us" ? CONTENT_ROOT : CONTENT_TRANSLATED_ROOT,
	localeLC
	);
	const locale = VALID_LOCALES.get(localeLC);
	for (const filePath of walker(root)) {
	const basename = path.basename(filePath);
	if (!(basename === "index.html" \|\| basename === "index.md")) {
	continue;
	}
	const rawContent = fs.readFileSync(filePath, "utf-8");
	const { attributes: metadata } = fm(rawContent);
	metadata.locale = locale;

	const url = `/${locale}/docs/${metadata.slug}`;
	const doc = { metadata, url };
	searchIndex.add(doc);
	}
	}

	async function searchIndexRoute(req, res) {
	// Remember, this is always in lowercase because of a middleware
	// that lowercases all incoming requests' pathname.
	const locale = req.params.locale;
	if (locale !== "en-us" && !CONTENT_TRANSLATED_ROOT) {
	res.status(500).send("CONTENT_TRANSLATE_ROOT not set\n");
	return;
	}
	if (!VALID_LOCALES.has(locale)) {
	res.status(500).send(`unrecognized locale ${locale}`);
	return;
	}

	// The advantage of creating the search index over and over on every
	// request is that it can't possible cache itself stale.
	// Imagine if a user just seconds ago created a page, and reaches for
	// the search widget and can't find what they just created.
	// Or perhaps they edited a title and expect that to turn up.

	// However, if this is causing a problem, we can easily turn on some
	// caching. Either `Cache-Control` on the response.
	// Or, we can make this `searchIndex` a module global so it's reused
	// repeatedly until the server is restarted.

	const searchIndex = new SearchIndex();

	const label = "Populate search-index";
	console.time(label);
	populateSearchIndex(searchIndex, locale);
	searchIndex.sort();
	console.timeEnd(label);
	res.json(searchIndex.getItems()[locale]);
	}

	module.exports = {
	searchIndexRoute,
	};
	<!DOCTYPE html>
	<html lang='en' class=''>
	<head>
	<meta charset='UTF-8'>
	<title>Search Bar Demo</title>
	<style>
	body {
	background-color: #3745c2;
	margin: 200px 40%;
	}

	form {
	background-color: #4654e1;
	width: 300px;
	height: 44px;
	border-radius: 5px;
	display:flex;
	flex-direction:row;
	align-items:center;
	}

	input {
	all: unset;
	font: 16px system-ui;
	color: #fff;
	height: 100%;
	width: 100%;
	padding: 6px 10px;
	}

	::placeholder {
	color: #fff;
	opacity: 0.7;
	}

	svg {
	color: #fff;
	fill: currentColor;
	width: 24px;
	height: 24px;
	padding: 10px;
	}

	button {
	all: unset;
	cursor: pointer;
	width: 44px;
	height: 44px;
	}
	</style>
	</head>
	<body>
	<form role="search" id="form">
	<input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
	<button>
	<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
	</button>
	</form>
	<script>
	const f = document.getElementById('form');
	const q = document.getElementById('query');
	const google = 'https://www.google.com/search?q=site%3A+';
	const site = 'pagedart.com';

	function submitted(event) {
	event.preventDefault();
	const url = google + site + '+' + q.value;
	const win = window.open(url, '_blank');
	win.focus();
	}

	f.addEventListener('submit', submitted);
	</script>
	</body>
	</html>