improve searcher

This commit is contained in:
Carlos Polop 2025-05-04 10:57:09 +02:00
parent 96756761c8
commit 9e634b0394

View File

@ -1,105 +1,120 @@
/* ht_searcher.js /* ht_searcher.js
Full Web-Worker search with while loading and 🔍 after. Dual-index Web-Worker search (HackTricks + HackTricks-Cloud)
Keeps every feature of the original theme (teasers, breadcrumbs, with loading icon swap 🔍 and proper host prefix for
highlight link, hot-keys, arrow navigation, ESC to close, ). cloud results (https://cloud.hacktricks.wiki).
Dependencies already expected by the theme: Dependencies already expected by the theme:
mark.js (for in-page highlights) mark.js
elasticlunr.min.js (worker fetches a CDN or /elasticlunr.min.js) elasticlunr.min.js (worker fetches CDN or /elasticlunr.min.js)
searchindex.js (worker fetches GitHub raw or /searchindex.js) searchindex.js (local fallback copies for both wikis)
*/ */
(() => { (() => {
"use strict"; "use strict";
/* ───────────────── 0. Worker code (string) ───────────────── */ /* ───────────── 0. Utility (main thread) ─────────────────── */
const clear = el => { while (el.firstChild) el.removeChild(el.firstChild); };
/* ───────────── 1. WebWorker code (as string) ───────────── */
const workerCode = ` const workerCode = `
self.window = self; /* make 'window' exist */ /* emulate browser globals inside worker */
self.window = self;
self.search = self.search || {}; self.search = self.search || {};
const abs = p => location.origin + p; /* helper */ const abs = p => location.origin + p; /* helper */
/* 0.1 load elasticlunr (CDN → local fallback) */ /* 1 ─ elasticlunr (CDN → local) */
try { try {
importScripts('https://cdn.jsdelivr.net/npm/elasticlunr@0.9.5/elasticlunr.min.js'); importScripts('https://cdn.jsdelivr.net/npm/elasticlunr@0.9.5/elasticlunr.min.js');
} catch { } catch {
importScripts(abs('/elasticlunr.min.js')); importScripts(abs('/elasticlunr.min.js'));
} }
/* 0.2 load searchindex.js (GitHub → local fallback) */ /* 2 ─ helper to load one search index */
(async () => { async function loadIndex(remoteRaw, localPath){
async function loadRemote () { try {
const r = await fetch( const r = await fetch(remoteRaw, {mode:'cors'});
'https://raw.githubusercontent.com/HackTricks-wiki/hacktricks/refs/heads/master/searchindex.js',
{ mode:'cors' }
);
if (!r.ok) throw new Error('HTTP '+r.status); if (!r.ok) throw new Error('HTTP '+r.status);
importScripts( importScripts(URL.createObjectURL(new Blob([await r.text()],{type:'application/javascript'})));
URL.createObjectURL( } catch (e) {
new Blob([await r.text()],{type:'application/javascript'}) console.warn(remoteRaw,'→',e,'. Trying local fallback …');
) importScripts(abs(localPath));
); }
const data = { idxJSON: self.search.index, urls: self.search.doc_urls };
delete self.search.index; delete self.search.doc_urls;
return data;
} }
try { await loadRemote(); }
catch(e){ console.warn('remote index failed →',e);
importScripts(abs('/searchindex.js')); }
/* 0.3 build index once, keep for all queries */ /* 3 ─ load BOTH indexes */
const idx = elasticlunr.Index.load(self.search.index); (async () => {
const DOC_URLS = self.search.doc_urls; const MAIN_RAW = 'https://raw.githubusercontent.com/HackTricks-wiki/hacktricks/refs/heads/master/searchindex.js';
const MAX = 30; const CLOUD_RAW = 'https://raw.githubusercontent.com/HackTricks-wiki/hacktricks-cloud/refs/heads/master/searchindex.js';
/* ping main-thread so it can swap the icon */ const { idxJSON:mainJSON, urls:mainURLs } = await loadIndex(MAIN_RAW , '/searchindex.js');
const { idxJSON:cloudJSON, urls:cloudURLs } = await loadIndex(CLOUD_RAW, '/searchindex-cloud.js');
const mainIdx = elasticlunr.Index.load(mainJSON);
const cloudIdx = elasticlunr.Index.load(cloudJSON);
const MAX_OUT = 30;
/* ✔ notify UI */
postMessage({ready:true}); postMessage({ready:true});
/* 4 ─ search handler */
self.onmessage = ({data:q}) => { self.onmessage = ({data:q}) => {
if (!q) { postMessage([]); return; } if (!q) { postMessage([]); return; }
const res = idx.search(q,{bool:'AND',expand:true}).slice(0,MAX); const opts = { bool:'AND', expand:true };
postMessage(res.map(r => {
const d = idx.documentStore.getDoc(r.ref); function searchAndScale(idx, urls, base=''){
return { /* only the fields the UI needs */ const res = idx.search(q, opts);
ref : r.ref, if (!res.length) return [];
title : d.title, const max = res[0].score || 1;
body : d.body, return res.map(r => ({
breadcrumbs: d.breadcrumbs, normScore: r.score / max,
url : DOC_URLS[r.ref] doc : idx.documentStore.getDoc(r.ref),
}; url : base + urls[r.ref]
})); }));
}
const combined = [
...searchAndScale(mainIdx , mainURLs , ''),
...searchAndScale(cloudIdx, cloudURLs, 'https://cloud.hacktricks.wiki/')
];
combined.sort((a,b) => b.normScore - a.normScore);
const top = combined.slice(0, MAX_OUT).map(o => ({
title : o.doc.title,
body : o.doc.body,
breadcrumbs: o.doc.breadcrumbs,
url : o.url
}));
postMessage(top);
}; };
})(); })();
`; `;
/* ───────────────── 1. Build worker ───────────────────────── */ /* ───────────── 2. Spawn worker ─────────────────────────── */
const workerURL = URL.createObjectURL( const worker = new Worker(URL.createObjectURL(new Blob([workerCode],{type:'application/javascript'})));
new Blob([workerCode],{type:'application/javascript'})
);
const worker = new Worker(workerURL);
URL.revokeObjectURL(workerURL); /* tidy blob */
/* ───────────────── 2. DOM references ─────────────────────── */ /* ───────────── 3. DOM refs ─────────────────────────────── */
const wrap = document.getElementById('search-wrapper'); const wrap = document.getElementById('search-wrapper');
const modal = document.getElementById('search-modal');
const bar = document.getElementById('searchbar'); const bar = document.getElementById('searchbar');
const list = document.getElementById('searchresults'); const list = document.getElementById('searchresults');
const listOut = document.getElementById('searchresults-outer'); const listOut = document.getElementById('searchresults-outer');
const header = document.getElementById('searchresults-header'); const header = document.getElementById('searchresults-header');
const icon = document.getElementById('search-toggle'); const icon = document.getElementById('search-toggle');
/* ───────────────── 3. Constants & state ─────────────────── */ /* loading icon */
const HOTKEY = 83, ESC=27, DOWN=40, UP=38, ENTER=13; const READY_ICON = icon.innerHTML; /* theme SVG/HTML */
const URL_MARK_PARAM = 'highlight'; icon.textContent = '⏳';
const MAX_RESULTS = 30;
const READY_ICON_HTML= icon.innerHTML; /* save original “🔍” */
icon.textContent = '⏳'; /* show hour-glass */
icon.setAttribute('aria-label','Loading search …'); icon.setAttribute('aria-label','Loading search …');
/* key codes */
const HOTKEY=83, ESC=27, DOWN=40, UP=38, ENTER=13;
let debounce, teaserCount=0; let debounce, teaserCount=0;
/* ───────────────── 4. Helpers (escaped, teaser, format …) ─ */ /* ───────────── 4. helpers (teaser etc.) ─────────────── */
const escapeHTML = (() => { const escapeHTML = (()=>{const M={'&':'&amp;','<':'&lt;','>':'&gt;','"':'&#34;','\'':'&#39;'};return s=>s.replace(/[&<>'"]/g,c=>M[c]);})();
const MAP = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&#34;',"'":'&#39;'};
return s => s.replace(/[&<>'"]/g,c=>MAP[c]);
})();
function metric(c,t){ function metric(c,t){
return c===0 ? `No search results for '${t}'.` return c===0 ? `No search results for '${t}'.`
@ -107,105 +122,84 @@
: `${c} search results for '${t}':`; : `${c} search results for '${t}':`;
} }
/* ── teaser algorithm (unchanged from theme, just ES-ified) ── */
function makeTeaser(body,terms){ function makeTeaser(body,terms){
const stem=w=>elasticlunr.stemmer(w.toLowerCase()); const stem=w=>elasticlunr.stemmer(w.toLowerCase());
const t = terms.map(stem); const T=terms.map(stem), W_SRCH=40,W_1ST=8,W_NRM=2,WIN=30;
const W_SEARCH=40,W_FIRST=8,W_NORM=2,WIN=30; const W=[], sents=body.toLowerCase().split('. ');
const wArr=[],sents=body.toLowerCase().split('. '); let idx=0, v=W_1ST, found=false;
let idx=0, val=W_FIRST, found=false; sents.forEach(s=>{
v=W_1ST;
sents.forEach(sent=>{ s.split(' ').forEach(w=>{
val=W_FIRST; if(w){
sent.split(' ').forEach(word=>{ if(T.some(t=>stem(w).startsWith(t))){v=W_SRCH;found=true;}
if(word){ W.push([w,v,idx]); v=W_NRM;
if(t.some(st=>stem(word).startsWith(st))){val=W_SEARCH;found=true;}
wArr.push([word,val,idx]); val=W_NORM;
} }
idx+=word.length+1; idx+=w.length+1;
}); });
idx+=1; /* account for '. ' */ idx++;
}); });
if(!wArr.length) return body; if(!W.length) return body;
const win=Math.min(W.length,WIN);
const win = Math.min(wArr.length,WIN); const sums=[W.slice(0,win).reduce((a,[,wt])=>a+wt,0)];
const sums=[ wArr.slice(0,win).reduce((a,[,w])=>a+w,0) ]; for(let i=1;i<=W.length-win;i++)
for(let i=1;i<=wArr.length-win;i++) sums[i]=sums[i-1]-W[i-1][1]+W[i+win-1][1];
sums[i]=sums[i-1]-wArr[i-1][1]+wArr[i+win-1][1];
const best=found ? sums.lastIndexOf(Math.max(...sums)) : 0; const best=found ? sums.lastIndexOf(Math.max(...sums)) : 0;
const out=[], start=wArr[best][2]; const out=[]; idx=W[best][2];
idx=start;
for(let i=best;i<best+win;i++){ for(let i=best;i<best+win;i++){
const [word,w,pos] = wArr[i]; const [w,wt,pos]=W[i];
if(idx<pos){out.push(body.substring(idx,pos)); idx=pos;} if(idx<pos){out.push(body.substring(idx,pos)); idx=pos;}
if(w===W_SEARCH) out.push('<em>'); if(wt===W_SRCH) out.push('<em>');
out.push(body.substr(pos,word.length)); out.push(body.substr(pos,w.length));
if(w===W_SEARCH) out.push('</em>'); if(wt===W_SRCH) out.push('</em>');
idx=pos+word.length; idx=pos+w.length;
} }
return out.join(''); return out.join('');
} }
function formatResult(doc,terms){ const URL_MARK_PARAM='highlight';
const teaser = makeTeaser(escapeHTML(doc.body),terms); function formatResult(d,terms){
const teaser = makeTeaser(escapeHTML(d.body),terms);
teaserCount++; teaserCount++;
const enc = encodeURIComponent(terms.join(' ')).replace(/'/g,'%27'); const enc = encodeURIComponent(terms.join(' ')).replace(/'/g,'%27');
const u = doc.url.split('#'); if(u.length===1)u.push('');
return `<a href="${path_to_root}${u[0]}?${URL_MARK_PARAM}=${enc}#${u[1]}" aria-details="teaser_${teaserCount}">`+ /* decide if absolute */
`${doc.breadcrumbs}<span class="teaser" id="teaser_${teaserCount}" aria-label="Search Result Teaser">`+ const absolute = d.url.startsWith('http');
const parts = d.url.split('#'); if(parts.length===1) parts.push('');
const base = absolute ? '' : path_to_root;
const href = `${base}${parts[0]}?${URL_MARK_PARAM}=${enc}#${parts[1]}`;
return `<a href="${href}" aria-details="teaser_${teaserCount}">`+
`${d.breadcrumbs}<span class="teaser" id="teaser_${teaserCount}" aria-label="Search Result Teaser">`+
`${teaser}</span></a>`; `${teaser}</span></a>`;
} }
const clear = el => { while(el.firstChild) el.removeChild(el.firstChild); };
function showUI(show){ function showUI(show){
wrap.classList.toggle('hidden',!show); wrap.classList.toggle('hidden',!show);
icon.setAttribute('aria-expanded',show); icon.setAttribute('aria-expanded',show);
if(!show){ if(show){ window.scrollTo(0,0); bar.focus(); bar.select(); }
listOut.classList.add('hidden'); else{ listOut.classList.add('hidden'); [...list.children].forEach(li=>li.classList.remove('focus')); }
[...list.children].forEach(li=>li.classList.remove('focus'));
}else{
window.scrollTo(0,0);
bar.focus(); bar.select();
} }
}
function blurBar(){ function blurBar(){
const tmp=document.createElement('input'); const tmp=document.createElement('input');
tmp.style.position='absolute'; tmp.style.opacity=0; tmp.style.cssText='position:absolute;opacity:0;';
icon.appendChild(tmp); tmp.focus(); tmp.remove(); icon.appendChild(tmp); tmp.focus(); tmp.remove();
} }
/* ───────────────── 5. Event handlers ─────────────────────── */ /* ───────────── 5. UI events ───────────────────────────── */
icon.addEventListener('click',()=>showUI(wrap.classList.contains('hidden'))); icon.addEventListener('click',()=>showUI(wrap.classList.contains('hidden')));
document.addEventListener('keydown',e=>{ document.addEventListener('keydown',e=>{
if(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey) return; if(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey) return;
const isInput=/^(?:input|select|textarea)$/i.test(e.target.nodeName); const inForm=/^(?:input|select|textarea)$/i.test(e.target.nodeName);
if(e.keyCode===HOTKEY && !inForm){ e.preventDefault(); showUI(true); }
if(e.keyCode===HOTKEY && !isInput){ else if(e.keyCode===ESC){ e.preventDefault(); showUI(false); blurBar(); }
e.preventDefault(); showUI(true); else if(e.keyCode===DOWN && document.activeElement===bar){
}else if(e.keyCode===ESC){ e.preventDefault(); const first=list.firstElementChild; if(first){ blurBar(); first.classList.add('focus'); }
e.preventDefault(); showUI(false); blurBar(); }else if([DOWN,UP,ENTER].includes(e.keyCode) && document.activeElement!==bar){
}else if(e.keyCode===DOWN && document.activeElement===bar){ const cur=list.querySelector('li.focus'); if(!cur) return; e.preventDefault();
e.preventDefault(); if(e.keyCode===DOWN){ const nxt=cur.nextElementSibling; if(nxt){ cur.classList.remove('focus'); nxt.classList.add('focus'); }}
const first=list.firstElementChild; else if(e.keyCode===UP){ const prv=cur.previousElementSibling; cur.classList.remove('focus'); if(prv){ prv.classList.add('focus'); } else { bar.focus(); }}
if(first){ blurBar(); first.classList.add('focus'); } else { const a=cur.querySelector('a'); if(a) window.location.assign(a.href); }
}else if((e.keyCode===DOWN||e.keyCode===UP||e.keyCode===ENTER)
&& document.activeElement!==bar){
const cur=list.querySelector('li.focus'); if(!cur) return;
e.preventDefault();
if(e.keyCode===DOWN){
const nxt=cur.nextElementSibling;
if(nxt){ cur.classList.remove('focus'); nxt.classList.add('focus'); }
}else if(e.keyCode===UP){
const prv=cur.previousElementSibling;
cur.classList.remove('focus');
if(prv){ prv.classList.add('focus'); } else { bar.focus(); }
}else{ /* ENTER */
const a=cur.querySelector('a'); if(a) window.location.assign(a.href);
}
} }
}); });
@ -214,16 +208,15 @@
debounce=setTimeout(()=>worker.postMessage(e.target.value.trim()),120); debounce=setTimeout(()=>worker.postMessage(e.target.value.trim()),120);
}); });
/* ───────────────── 6. Worker messages ────────────────────── */ /* ───────────── 6. Worker messages ────────────────────── */
worker.onmessage = ({data}) => { worker.onmessage = ({data}) => {
if(data && data.ready){ /* first ping */ if(data && data.ready){
icon.innerHTML=READY_ICON_HTML; /* restore “🔍” */ icon.innerHTML=READY_ICON;
icon.setAttribute('aria-label','Open search (S)'); icon.setAttribute('aria-label','Open search (S)');
return; return;
} }
const docs=data; const docs=data;
const q=bar.value.trim(); const q = bar.value.trim(); const terms=q.split(/\s+/).filter(Boolean);
const terms=q.split(/\s+/).filter(Boolean);
header.textContent=metric(docs.length,q); header.textContent=metric(docs.length,q);
clear(list); clear(list);
docs.forEach(d=>{ docs.forEach(d=>{