made the ranklist with sqlite/fts5 look as the one with elasticlunr (but with highlighting and abstracting)

2 files changed, 42 insertions, 39 deletions

diff --git a/content/search/_index.md b/content/search/_index.md
index 995b1dd..1c0d6d7 100644
--- a/content/search/_index.md
+++ b/content/search/_index.md
@@ -4,4 +4,4 @@ title = "Search"
 
 <!-- The search is using [ElasticLunr](http://elasticlunr.com/). -->
 
-The search is using [FTS5 Sqlite3 in sql.js](https://github.com/sql-js/sql.js).
+The search is using [FTS5 Sqlite3 in sql.js](https://www.skypack.dev/view/sql.js-fts5).
diff --git a/themes/new_theme/layouts/partials/ranklist_fts5.html b/themes/new_theme/layouts/partials/ranklist_fts5.html
index 56ba77c..cf65f56 100644
--- a/themes/new_theme/layouts/partials/ranklist_fts5.html
+++ b/themes/new_theme/layouts/partials/ranklist_fts5.html
@@ -9,62 +9,66 @@
 		return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;" );
 	}
 
-// https://gist.github.com/igorgatis/d294fe714a4f523ac3a3
-function hexdump(buffer, blockSize) {
-    blockSize = blockSize || 16;
-    var lines = [];
-    var hex = "0123456789ABCDEF";
-    for (var b = 0; b < buffer.length; b += blockSize) {
-        var block = buffer.slice(b, Math.min(b + blockSize, buffer.length));
-        var addr = ("0000" + b.toString(16)).slice(-4);
-        var codes = block.split('').map(function (ch) {
-            var code = ch.charCodeAt(0);
-            return " " + hex[(0xF0 & code) >> 4] + hex[0x0F & code];
-        }).join("");
-        codes += "   ".repeat(blockSize - block.length);
-        var chars = block.replace(/[\x00-\x1F\x20]/g, '.');
-        chars +=  " ".repeat(blockSize - block.length);
-        lines.push(addr + " " + codes + "  " + chars);
-    }
-    return lines.join("\n");
-}
+	function draw_ranklist( query, results ) {
+		var html = '';
+
+		if( results.length == 0 ) {
+			return "<p>No hits for query '" + query + "'...</p>";
+		} else {
+			html += "<p>" + results.length + " hits found</p>";
+		}
+
+		var start = 1;
+		html += "<ol class=\"ranklist\" start=\"" + start + "\">";
+		for( var i = 0; i < results.length; i++ ) {
+			var rank = results[i];
+			var docid = rank['docid'];
+			var abstract = rank['abstract'];
+			var title = rank['title'];
+			if( title == '' ) {
+				title = 'No title';
+			}
+			html += "<li>";
+			html += "<div class='title'>"
+			html += "<a href=\"" + docid + "\">" + title + "</a></div>";
+			if( abstract != '' ) {
+				html += "<div class='abstract'>" + abstract + "</div>";
+			}
+			html += "</li>";
+		}
+		html += "</ol>";
+		
+		return html;
+	}
 
 	function executeQuery( query ) {		
 		$( "#query" ).LoadingOverlay( "show" );
 		
-		console.log( "here" );
-
 		const xhr = new XMLHttpRequest();
 		xhr.open('GET', '/index/posts.db', true);
 		xhr.responseType = 'arraybuffer';
-		console.log( "here" );
 		xhr.onload = e => {
 			const uInt8Array = new Uint8Array(xhr.response);
-			console.log( uInt8Array );
 			requirejs(["/js/sql-wasm.js"], function(initSqlJs) {
+
 				const SQL = initSqlJs({
 				  locateFile: file => `http://localhost:1313/js/${file}`
 				});
+
 				initSqlJs().then( function( SQL ) {
 					var db = new SQL.Database(uInt8Array);
-					//~ const stmt = db.prepare("SELECT sqlite_version()");
-					const stmt = db.prepare( "select uri,highlight(posts, 1, '<b>', '</b>'),snippet(posts, 2, '<b>', '</b>', '...', 50) from posts where posts MATCH 'OpenBSD' ORDER BY bm25(posts) limit 5 offset 0" );
-					//~ var stmt = db.prepare( "select * from sqlite_master" );
-					//~ const result = stmt.getAsObject({':aval' : 1, ':bval' : 'world'});
-					//~ console.log(result);
-					//~ while (stmt.step()) console.log(stmt.get());
-					stmt.bind({a:1, b:2});
-					console.log( stmt);
+					const stmt = db.prepare( "select uri as docid,title,snippet(posts, 2, '<b>', '</b>', '...', 50) as abstract from posts where posts MATCH @query ORDER BY bm25(posts)" );
+					stmt.bind({'@query':query});
 
-					var html = "<pre>";
-					while(stmt.step()) { //
-					var row = stmt.getAsObject();
-						html += JSON.stringify( row );
+					var results = [];
+					while(stmt.step()) {
+						var row = stmt.getAsObject();
+						results.push( row );
 					}
 					stmt.free();
 					db.close();
-					
-					html += "</pre>";
+
+					var html = draw_ranklist( query, results );
 					
 					$( '#ranklist' ).html( html );
 										
@@ -86,5 +90,4 @@ function hexdump(buffer, blockSize) {
 	} );
 </script>
 <div id="ranklist">
-	ranks
 </div>