replaced .ajax with XMLHttpRequest, now binary fetches are working

5 files changed, 74 insertions, 46 deletions

diff --git a/config.toml b/config.toml
index 888a0cc..9d1d0c5 100644
--- a/config.toml
+++ b/config.toml
@@ -40,7 +40,7 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
 	list = "right"   # Configure layout for list pages
 	single = "right" # Configure layout for single pages
 	# Enable widgets in given order
-	widgets = ["dataprotection", "elasticlunr_search", "recent", "categories"]
+	widgets = ["dataprotection", "fts5_search", "recent", "categories"]
 
 [taxonomies]
 	category = "categories"
@@ -107,3 +107,9 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
 	changefreq = "monthly"
 	filename = "sitemap.xml"
 	priority = 0.5
+
+[mediaTypes.'application/wasm']
+	suffixes = [ 'wasm' ]
+	
+[mediaTypes.'application/octet-stream']
+	suffixes = [ 'db' ]
diff --git a/search/fts5/README b/search/fts5/README
index 5ab27ed..db52dc2 100644
--- a/search/fts5/README
+++ b/search/fts5/README
@@ -44,15 +44,26 @@ git clone --recursive https://github.com/jlongster/sql.js
 # emcc: error: setting `INLINING_LIMIT` expects `bool` but got `int`
 # set -sINLINING_LIMIT as booelean flag, modern emcc doesn't allow a cost integer here anymore it seems
 make
+#https://github.com/sql-js/sql.js/issues/546
+
+building emscripten2
+/data/INSTALL/emscripten2/src/llvm-project/llvm/include/llvm/Support/Signals.h:119:8: error: variable or field ‘CleanupOnSignal’ declared void
+  119 |   void CleanupOnSignal(uintptr_t Context);
+      |        ^~~~~~~~~~~~~~~
+In file included from /data/INSTALL/emscripten2/src/llvm-project/llvm/lib/Support/Signals.cpp:251:
+/data/INSTALL/emscripten2/src/llvm-project/llvm/lib/Support/Unix/Signals.inc:348:44: error: ‘void llvm::sys::CleanupOnSignal(uintptr_t)’ should have been declared inside ‘llvm::sys’
+  348 | void sys::CleanupOnSignal(uintptr_t Context) {
+
+
 # tons of errors, the containersized version uses VCode and WSL, so this things is
 # hairy to build
 # let's try a precompiled one
 # https://verdicts.listen.dev/npm/sql.js-fts5
 npm install sql.js-fts5
-sudo pacman -S browserify
-browserify main.js -o sql-fts5.js
-cp sql-fts5.js ../../themes/new_theme/static/js/.
 cp node_modules/sql.js-fts5/dist/sql-wasm.js ../../themes/new_theme/static/js/.
+cp node_modules/sql.js-fts5/dist/sql-wasm.wasm ../../themes/new_theme/static/js/.
+# WASM is not read because of a charset-utf-8 added to application/wasm: https://github.com/gohugoio/hugo/issues/10734
+# hugo-0.120.1-charset.patch
 
 # TODO: add as sqlite.js to page with data (local sqlite fts search)
 # https://blog.ouseful.info/2022/04/06/compiling-full-text-search-fts5-into-sqlite-wasm-build/
@@ -61,4 +72,8 @@ cp node_modules/sql.js-fts5/dist/sql-wasm.js ../../themes/new_theme/static/js/.
 # https://github.com/phiresky/sql.js-httpvfs
 # https://github.com/psanford/sqlite3vfshttp
 # https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/
+
 # https://github.com/kbumsik/sqlite-wasm
+sudo pacman -S typescript
+# typescript compile errors
+# 362             this.wasm._free(blobPtr);
diff --git a/search/fts5/main.js b/search/fts5/main.js
index 70479aa..4f5d648 100644
--- a/search/fts5/main.js
+++ b/search/fts5/main.js
@@ -1,10 +1,10 @@
 const initSqlJs = require( 'sql.js-fts5' );
 
-const SQL = initSqlJs({
-  locateFile: file => `http://localhost:1313/js/${file}`
-});
+//~ const SQL = initSqlJs({
+  //~ locateFile: file => `http://localhost:1313/js/${file}`
+//~ });
 
-const db = new SQL.Database();
+//~ const db = new SQL.Database();
 
-let sqlstr = "SELECT * FROM posts";
-db.run(sqlstr);
+//~ let sqlstr = "SELECT * FROM posts";
+//~ db.run(sqlstr);
diff --git a/themes/new_theme/layouts/_default/list.html b/themes/new_theme/layouts/_default/list.html
index c4278e5..4816514 100644
--- a/themes/new_theme/layouts/_default/list.html
+++ b/themes/new_theme/layouts/_default/list.html
@@ -8,7 +8,7 @@
 	{{- with .Content }}
 	<div class="content main__content clearfix">
 		{{ . }}
-		{{ partial "ranklist_elasticlunr.html" . }}
+		{{ partial "ranklist_fts5.html" . }}
 	</div>
 	{{- end }}
 	{{ $section := .Section }}
diff --git a/themes/new_theme/layouts/partials/ranklist_fts5.html b/themes/new_theme/layouts/partials/ranklist_fts5.html
index 3a29507..56ba77c 100644
--- a/themes/new_theme/layouts/partials/ranklist_fts5.html
+++ b/themes/new_theme/layouts/partials/ranklist_fts5.html
@@ -1,6 +1,7 @@
 <script src="/js/jquery.js" type="text/javascript"></script>
 <script src="/js/url-search-params.js" type="text/javascript"></script>
 <script src="/js/loadingoverlay.min.js" type="text/javascript"></script>
+<script src="/js/require.js" type="text/javascript"></script>
 <script src="/js/sql-fts5.js" type="module"></script>
 
 <script language="Javascript">
@@ -28,44 +29,50 @@ function hexdump(buffer, blockSize) {
     return lines.join("\n");
 }
 
-	function executeQuery( query ) {
+	function executeQuery( query ) {		
 		$( "#query" ).LoadingOverlay( "show" );
 		
-		$.ajax( {
-			type : 'GET',
-			url : '/index/posts.db',
-			cache : false,
-			timeout : 5000
-		} )
-		.error( function( x, t, m ) {
-			var html = '';
-			if( x.status > 0 ) {
-				msg = x.responseText;
-			} else {
-				msg = t;
-			}
-			msg = escapeHtml( msg );
-			html = "<pre><font color='red'>There was an error loading the Sqlite3/FTS5 index, reason: " + msg + "</font></pre>\n";
-			$( '#ranklist' ).html( html );
-			
-			$( "#query" ).LoadingOverlay( "hide", true );			
-		} )
-		.success( function( data ) {
-			
-			var uInt8Array = new Uint8Array( data );
-			//~ var html = "<pre>" + hexdump( data , 16 ) + "</pre>";
-			//~ var db = new SQL.Database(uInt8Array);
-			//~ var contents = db.exec("SELECT * FROM my_table");
+		console.log( "here" );
 
-			var html = "<pre>ranklist" + db + "</pre>";
-			
-			$( '#ranklist' ).html( html );
-			
-			
-			$( "#query" ).LoadingOverlay( "hide" );
-		} );
-		
-		$( "#query" ).LoadingOverlay( "hide", true );			
+		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);
+
+					var html = "<pre>";
+					while(stmt.step()) { //
+					var row = stmt.getAsObject();
+						html += JSON.stringify( row );
+					}
+					stmt.free();
+					db.close();
+					
+					html += "</pre>";
+					
+					$( '#ranklist' ).html( html );
+										
+					$( "#query" ).LoadingOverlay( "hide" );
+				} );
+			} );
+		}
+		xhr.send( );
 	}
 
 	$( window ).load( function( ) {