gave up on fts5 sql with wasm for now, far too convoluted build systems

8 files changed, 151 insertions, 4 deletions

diff --git a/content/search/_index.md b/content/search/_index.md
index 80efd10..995b1dd 100644
--- a/content/search/_index.md
+++ b/content/search/_index.md
@@ -2,4 +2,6 @@
 title = "Search"
 +++
 
-The search is using [ElasticLunr](http://elasticlunr.com/).
+<!-- The search is using [ElasticLunr](http://elasticlunr.com/). -->
+
+The search is using [FTS5 Sqlite3 in sql.js](https://github.com/sql-js/sql.js).
diff --git a/search/fts5/README b/search/fts5/README
index a9ce834..5ab27ed 100644
--- a/search/fts5/README
+++ b/search/fts5/README
@@ -19,16 +19,46 @@ EOF
 jq -j '.[] | "INSERT INTO posts(uri, title, content) VALUES (", ( [ .uri, .title, .content // empty ] | map(.|gsub("'"'"'";"`")|gsub("\n";" ")|@sh) | join(",")), ");\n"' \
 	posts.json > posts.sql
 sqlite3 posts.db < posts.sql
+cp posts.db ../../static/index/.
 
 # some test queries
 # https://www.legendu.net/misc/blog/hands-on-full-text-search-in-sqlite3/
 # https://sqlite.org/fts5.html
 select uri from posts where posts MATCH 'OpenBSD' ORDER BY bm25(posts);
-select uri,highlight(posts, 1, '<b>', '</b>'),snippet(posts, 2, '<b>', '</b>', '...', 10) from posts where posts MATCH 'OpenBSD' ORDER BY bm25(posts);
+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;
 
 # TODO: make a server-side search (search window and result page)
+# this would mean we have to render the hugo and the ranklist part on the server?
+
+# typical "modern" web development craziness.. :-)
+pacman --needed -S sha3sum
+trizen -G emsdk
+cd emdsk && makepkg -sif
+sudo emsdk install latest
+sudo emsdk activate latest
+sudo chown -R abaumann:users /usr/lib/emsdk/
+source /usr/lib/emsdk/emsdk_env.sh
+git clone --recursive https://github.com/jlongster/sql.js
+# add -DSQLITE_ENABLE_FTS5 to CFLAGS in Makefile
+# disable 'sha3sum -c cache/check.txt' (is broken)
+# 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
+# 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/.
 
 # 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/
 # https://jlongster.com/future-sql-web
+# https://www.skypack.dev/view/sql.js-fts5
+# 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
diff --git a/search/fts5/main.js b/search/fts5/main.js
new file mode 100644
index 0000000..70479aa
--- /dev/null
+++ b/search/fts5/main.js
@@ -0,0 +1,10 @@
+const initSqlJs = require( 'sql.js-fts5' );
+
+const SQL = initSqlJs({
+  locateFile: file => `http://localhost:1313/js/${file}`
+});
+
+const db = new SQL.Database();
+
+let sqlstr = "SELECT * FROM posts";
+db.run(sqlstr);
diff --git a/themes/new_theme/CHANGES b/themes/new_theme/CHANGES
index 3af49a0..79e711f 100644
--- a/themes/new_theme/CHANGES
+++ b/themes/new_theme/CHANGES
@@ -9,4 +9,5 @@ Changes made to https://github.com/Vimux/Mainroad.git
   result)
 - list.html: only display list in blog contents, not on toolbox or
   software section
-  
+- replaced Google fonts with Bunny fonts
+
diff --git a/themes/new_theme/layouts/_default/list.html b/themes/new_theme/layouts/_default/list.html
index 4a151c3..c4278e5 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.html" . }}
+		{{ partial "ranklist_elasticlunr.html" . }}
 	</div>
 	{{- end }}
 	{{ $section := .Section }}
diff --git a/themes/new_theme/layouts/partials/ranklist.html b/themes/new_theme/layouts/partials/ranklist_elasticlunr.html
index 5c7786b..5c7786b 100644
--- a/themes/new_theme/layouts/partials/ranklist.html
+++ b/themes/new_theme/layouts/partials/ranklist_elasticlunr.html
diff --git a/themes/new_theme/layouts/partials/ranklist_fts5.html b/themes/new_theme/layouts/partials/ranklist_fts5.html
new file mode 100644
index 0000000..3a29507
--- /dev/null
+++ b/themes/new_theme/layouts/partials/ranklist_fts5.html
@@ -0,0 +1,83 @@
+<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/sql-fts5.js" type="module"></script>
+
+<script language="Javascript">
+	function escapeHtml( text ) {
+		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 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");
+
+			var html = "<pre>ranklist" + db + "</pre>";
+			
+			$( '#ranklist' ).html( html );
+			
+			
+			$( "#query" ).LoadingOverlay( "hide" );
+		} );
+		
+		$( "#query" ).LoadingOverlay( "hide", true );			
+	}
+
+	$( window ).load( function( ) {
+		var paramsString = window.location.search;
+		var searchParams = new URLSearchParams( paramsString );
+		if( searchParams.has( "q" ) ) {
+			executeQuery( searchParams.get( "q" ) );
+		} else {
+			// TODO: come up with something here
+		}	// Show full page LoadingOverlay
+	} );
+</script>
+<div id="ranklist">
+	ranks
+</div>
diff --git a/themes/new_theme/layouts/partials/widgets/fts5_search.html b/themes/new_theme/layouts/partials/widgets/fts5_search.html
new file mode 100644
index 0000000..5da7a2a
--- /dev/null
+++ b/themes/new_theme/layouts/partials/widgets/fts5_search.html
@@ -0,0 +1,21 @@
+<h4 class="widget__title">Search</h4>
+<div class="widget-search widget">
+	<form class="widget-search__form" role="search" method="get" action="/search/">
+		<label>
+			<input class="widget-search__field" type="search" autocomplete="off" placeholder="{{ T "search_placeholder" }}" value="" id="query" name="q" aria-label="{{ T "search_placeholder" }}">
+		</label>
+		<input class="widget-search__submit" type="submit" value="Search">
+	</form>
+</div>
+{{- if ( eq .Permalink "/search/" ) }}
+<script language="Javascript">
+	$( window ).load( function( ) {	
+		var paramsString = window.location.search;
+		var searchParams = new URLSearchParams( paramsString );
+		if( searchParams.has( "q" ) ) {
+			$( "#query" ).val( searchParams.get( "q" ) );
+			$( "#query" ).removeAttr( "placeholder" );
+		}
+	} );
+</script>
+{{- end }}