Tuesday | 05 NOV 2024
[ previous ]
[ next ]

Set Up Search for the Blog

Title:
Date: 2023-01-21
Tags:  

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>