I now have search functionality on this blog of mine. I didn't want to use a backend so I wired it up so that a sqlite database can be used from the client side with a static sqlite database.
It works!
https://nivethan.dev/search/
I'm pretty happy with how this project turned out and it was one the largest things that was missing. A future goal is going to be to integrate the search everywhere and ideally switch to a newer version of sqlite as well.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>search</title>
</head>
<body>
<h1>search</h1>
<div>
<input type="text" v-model="searchString" v-on:keyup.enter="search" placeholder="Needle">
<button @click="search">Search</button>
</div>
<br>
<template v-if="results.length > 0">
<div><small>{{ results.length }} results<small></div>
<br>
</template>
<template v-for="result in results">
<div>
<a :href="result.link">{{result.title}}</a>
<br>
<small>{{result.body.substring(1,50)}}</small>
</div>
<br>
</template>
<script type="module">
import { load } from "/js/sqlite/sql-httpvfs.js";
import { createApp } from "/js/petite-vue.es.js";
async function search() {
let query = `select * from posts where posts match "${this.searchString}"`;
this.results = await worker.db.query(query);
}
createApp({
searchString: "",
results: [],
search,
}).mount();
const worker = await load("/db/blog.db");
</script>
</body>
</html>