Maintenant que j’avais un moteur de recherche fonctionnel, fallait l’habiller. Et c’est l\u00e0 que j’ai eu cette id\u00e9e un peu d\u00e9bile : Pourquoi pas recr\u00e9er l’interface du Google de 1998 ?<\/strong><\/p>\n

Pour les plus jeunes qui lisent \u00e7a, Google en 1998 c’\u00e9tait une page blanche avec un logo, un champ de recherche, et deux boutons : \u00ab\u00a0Google Search<\/em>\u00a0\u00bb et \u00ab\u00a0I’m Feeling Lucky<\/em>\u00ab\u00a0. Pas de suggestions, pas de carrousels, pas de pubs… Juste un champs de recherche. C’\u00e9tait la belle \u00e9poque !<\/p>\n

J’ai donc cr\u00e9\u00e9 une page de recherche avec deux vues distinctes. La page d’accueil avec le logo centr\u00e9 et le champ de recherche au milieu, exactement comme le Google originel.<\/p>\n

Et la page de r\u00e9sultats avec le logo en petit en haut \u00e0 gauche et les r\u00e9sultats en dessous.<\/p>\n

Pour le code CSS, j’ai voulu \u00eatre fid\u00e8le \u00e0 l’\u00e9poque. Times New Roman comme police par d\u00e9faut, les liens en bleu soulign\u00e9 qui deviennent violet une fois visit\u00e9s. Et surtout, les boutons avec l’effet 3D des interfaces Windows 95 :<\/p>\n

\n
.search-button:active { border-style: inset; }\n<\/span><\/span><\/code><\/pre>\nCe border: outset<\/code> et border-style: inset<\/code> au clic, c’est exactement ce qui donnait cet effet de bouton en relief qu’on avait partout dans les ann\u00e9es 90. Pour moi, \u00e7a fait toute la diff\u00e9rence pour l’authenticit\u00e9. M\u00eame le logo, je l’ai volontairement \u00ab\u00a0d\u00e9grad\u00e9\u00a0\u00bb pour qu’il soit de la m\u00eame qualit\u00e9 que le logo Google d’origine.<\/p>\n <\/p>\n La pagination \u00ab\u00a0Koooooorben\u00a0\u00bb<\/h2>\nVous vous souvenez de la pagination de Google avec \u00ab\u00a0Goooooogle\u00a0\u00bb en bas de page ? Le nombre de \u00ab\u00a0o\u00a0\u00bb correspondait au nombre de pages de r\u00e9sultats. J’ai fait pareil, mais avec \u00ab\u00a0Koooooorben\u00a0\u00bb.<\/p>\n \nlet logo = 'K'; for (let i = 0; i < oCount; i++)\n<\/span><\/span>{\n<\/span><\/span>logo += o;\n<\/span><\/span>} logo += 'rben'; }\n<\/span><\/span><\/code><\/pre>\n<\/p>\n Plus il y a de r\u00e9sultats, plus il y a de \u00ab\u00a0o\u00a0\u00bb. C’est compl\u00e8tement inutile mais \u00e7a me fait marrer \u00e0 chaque fois que je le vois.<\/p>\n Le bouton \u00ab\u00a0J’ai de la chance\u00a0\u00bb<\/h2>\nAh, le fameux \u00ab\u00a0I’m Feeling Lucky\u00a0\u00bb de Google, j’ai voulu l’impl\u00e9menter comme \u00e0 l’\u00e9poque ! Si vous tapez une recherche et cliquez sur \u00ab\u00a0J’ai de la chance\u00a0\u00bb, vous \u00eates envoy\u00e9 sur le premier r\u00e9sultat. Classique. Mais si vous cliquez sur le bouton avec le champ vide sur la home de la recherche, vous \u00eates envoy\u00e9 sur un article al\u00e9atoire parmi les +18 000 du site.<\/p>\n <\/p>\n Pour \u00e7a, j’ai utilis\u00e9 une astuce : le sitemap<\/strong>. Mon Hugo g\u00e9n\u00e8re un fichier sitemap.xml<\/code> qui contient toutes les URLs du site et je peux aller piocher dedans en JS :<\/p>\n \nconst<\/span> articles<\/span> =<\/span> [<\/span>...<\/span>xml<\/span>.<\/span>querySelectorAll<\/span>(<\/span>'loc'<\/span>)]<\/span> .<\/span>map<\/span>(<\/span>loc<\/span> =><\/span> loc<\/span>.<\/span>textContent<\/span>)<\/span> .<\/span>filter<\/span>(<\/span>url<\/span> =><\/span> {<\/span>\n<\/span><\/span>\/\/<\/span> Exclure<\/span> les<\/span> pages<\/span> qui<\/span> ne<\/span> sont<\/span> pas<\/span> des<\/span> articles<\/span>\n<\/span><\/span>const<\/span> path<\/span> =<\/span> new<\/span> URL<\/span>(<\/span>url<\/span>)<\/span>.<\/span>pathname<\/span>;<\/span>\n<\/span><\/span>return<\/span> !<\/span>path<\/span>.<\/span>startsWith<\/span>(<\/span>'\/categories\/'<\/span>)<\/span> &&<\/span> !<\/span>path<\/span>.<\/span>startsWith<\/span>(<\/span>'\/page\/'<\/span>)<\/span> &&<\/span> path<\/span> !==<\/span> '\/'<\/span>;<\/span>\n<\/span><\/span>});<\/span>\n<\/span><\/span>const<\/span> randomUrl<\/span> =<\/span> articles<\/span>[<\/span>Math<\/span>.<\/span>floor<\/span>(<\/span>Math<\/span>.<\/span>random<\/span>()<\/span> *<\/span> articles<\/span>.<\/span>length<\/span>)];<\/span>\n<\/span><\/span>window<\/span>.<\/span>location<\/span>.<\/span>href<\/span> =<\/span> randomUrl<\/span>;<\/span>\n<\/span><\/span>}<\/span> }<\/span>\n<\/span><\/span><\/code><\/pre>\nUn seul fetch, un peu de parsing XML natif, et hop c’est le grand retour de la fonctionnalit\u00e9 \u00ab\u00a0article al\u00e9atoire\u00a0\u00bb qui vous manquait, je le sais !<\/p>\n Tri et nombre de r\u00e9sultats<\/h2>\nJe vous ai aussi mis une listbox qui vous permet d’afficher 10, 25 ou 50 r\u00e9sultats ainsi qu’un tri par pertinence ou data. Et \u00e7a aussi Pagefind sait parfaitement le navigateur.<\/p>\n Mode sombre et accessibilit\u00e9<\/h2>\nM\u00eame si l’interface est r\u00e9tro, j’ai quand m\u00eame ajout\u00e9 quelques fonctionnalit\u00e9s modernes. Le mode sombre respecte les pr\u00e9f\u00e9rences syst\u00e8me, et j’ai int\u00e9gr\u00e9 la police OpenDyslexic pour les personnes dyslexiques.<\/p>\n <\/p>\n Le truc important c’est de charger ces pr\u00e9f\u00e9rences avant le rendu de la page pour \u00e9viter le fameux flash. J’ai donc un petit script qui lit les pr\u00e9f\u00e9rences dans le localStorage et applique les classes CSS imm\u00e9diatement :<\/p>\n \nfunction() {\n<\/span><\/span> if (localStorage.getItem('theme') === 'dark') {\n<\/span><\/span> document.documentElement.classList.add('dark-mode');\n<\/span><\/span> }\n<\/span><\/span> if (localStorage.getItem('dyslexic-font') === 'true') {\n<\/span><\/span> document.documentElement.classList.add('dyslexic-mode');\n<\/span><\/span> }\n<\/span><\/span>});\n<\/span><\/span><\/code><\/pre>\nGestion de l’historique navigateur<\/h2>\nUn d\u00e9tail qui peut sembler anodin mais qui est super important pour l’exp\u00e9rience utilisateur c’est la gestion du bouton retour du navigateur.<\/p>\n Quand vous faites une recherche, l’URL change selon votre requ\u00eate du genre \/recherche\/?q=linux&p=2<\/code>. Du coup si vous partagez cette URL \u00e0 un coll\u00e8gue, la personne arrivera directement sur les r\u00e9sultats de recherche. Et si vous utilisez le bouton retour, vous reviendrez alors \u00e0 la recherche pr\u00e9c\u00e9dente.<\/p>\n <\/p>\n \nwindow<\/span>.<\/span>addEventListener<\/span>(<\/span>'popstate'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\n<\/span><\/span>const<\/span> query<\/span> =<\/span> new<\/span> URLSearchParams<\/span>(<\/span>location<\/span>.<\/span>search<\/span>)<\/span>.<\/span>get<\/span>(<\/span>'q'<\/span>);<\/span>\n<\/span><\/span>if<\/span> (<\/span>query<\/span>)<\/span> doSearch<\/span>(<\/span>query<\/span>);<\/span>\n<\/span><\/span>else<\/span> showHomePage<\/span>();<\/span>\n<\/span><\/span>});<\/span>\n<\/span><\/span><\/code><\/pre>\nLiens vers d’autres moteurs<\/h2>\nEt si vous ne trouvez pas votre bonheur dans mes +18 000 articles (ce qui serait quand m\u00eame \u00e9tonnant ^^), j’ai ajout\u00e9 des liens pour relancer la m\u00eame recherche sur Google, DuckDuckGo, Qwant, Brave et Ecosia. Bref, un petit service bonus pour mes visiteurs, exactement comme le proposait Google \u00e0 l’\u00e9poque.<\/p>\n <\/p>\n Le bilan – Algolia vs Pagefind<\/h2>\nApr\u00e8s 1 semaine d’utilisation, voici donc mon verdict ! C\u00f4t\u00e9 portefeuille d’abord, Algolia me co\u00fbtait entre 60 et +100 euros par mois et maintenant pour Pagefind, c’est z\u00e9ro euros ! Et les performances sont \u00e9galement au rendez-vous. Algolia c’\u00e9tait rapide et bien l\u00e0, \u00e7a l’est encore plus. Seul compromis \u00e0 noter, l’index Algolia se mettait \u00e0 jour en temps r\u00e9el, alors que Pagefind n\u00e9cessite une reconstruction au moment du build.<\/p>\n La conclusion<\/h2>\nVoil\u00e0, j’ai maintenant une recherche qui marche vraiment bien, qui me co\u00fbte 0\u20ac par mois, et qui a un look r\u00e9tro qui va en surprendre plus d’un…<\/p>\n Alors est-ce que c’\u00e9tait n\u00e9cessaire de passer autant de temps sur le design r\u00e9tro ? H\u00e9 bien absolument pas. Mais est-ce que \u00e7a valait le coup ?<\/p>\n Franchement, oui !! C’est mon site, je fais ce que je veux, et si \u00e7a peut faire sourire quelques visiteurs nostalgiques des d\u00e9buts du web, c’est du bonus. \nD’ailleurs un grand merci aux Patreons<\/a> \nqui me soutiennent car sans eux, je n’aurais pas pu passer mon dimanche l\u00e0 dessus ^^<\/p>\n Et puis surtout, \u00e7a m’a permis de d\u00e9couvrir Pagefind qui est vraiment un excellent outil. Donc si vous avez un site statique (ou n’importe quel type de contenu textuel) et que vous cherchez une solution de recherche gratuite et performante, je vous le recommande chaudement. La documentation est claire, l’int\u00e9gration est simple, et le r\u00e9sultat est top !<\/p>\n Allez, maintenant \nvous pouvez aller tester la nouvelle recherche sur le site<\/a> \n. Et si vous cliquez sur \u00ab\u00a0J’ai de la chance\u00a0\u00bb sans rien taper… bonne d\u00e9couverte !<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Bon, faut qu’on parle un peu du moteur de recherche de mon site. Ceux qui l’ont d\u00e9j\u00e0 utilis\u00e9 savent de quoi je parle : c’\u00e9tait pas terrible. Enfin, \u00ab\u00a0pas terrible\u00a0\u00bb j’suis gentil. C’est un esp\u00e8ce d’overlay avec des r\u00e9sultats certes fiables mais c’\u00e9tait vraiment pas pratique. Et en plus de \u00e7a, comme j’ai un site statique g\u00e9n\u00e9r\u00e9 avec Hugo, je passais par Algolia pour la recherche. Si vous ne connaissez pas, Algolia c’est un service cloud qui indexe votre contenu et vous fournit une API de recherche ultra-rapide. Sur le papier c’est g\u00e9nial et dans la pratique aussi d’ailleurs sauf que voil\u00e0, \u00e7a co\u00fbte des sous. Et mon site rencontre un franc succ\u00e8s ces derniers temps (merci \u00e0 vous !), donc j’ai de plus en plus de visiteurs, donc de plus en plus de recherches, donc une facture Algolia qui grimpe gentiment chaque mois. Du coup je me suis dit : \u00ab\u00a0Et si je trouvais une solution de recherche pour sites statiques ?\u00a0\u00bb Parce que oui, \u00e7a existe et c’est comme \u00e7a que j’ai d\u00e9couvert Pagefind. Pagefind c’est donc un moteur de recherche statique open source d\u00e9velopp\u00e9 par CloudCannon qui fonctionne comme ceci : Au moment du build de votre site, Pagefind parcourt tout votre HTML g\u00e9n\u00e9r\u00e9 et cr\u00e9e un index de recherche qu’on peut interroger avec un peu de JS. Y’a donc plus d’API, et tout se fait localement sur le navigateur des internautes. Bref, \u00e7a avait l’air tr\u00e8s cool alors \u00e9videmment, je me suis lanc\u00e9 dans l’aventure et comme j’aime bien me compliquer la vie, j’ai d\u00e9cid\u00e9 de pas juste int\u00e9grer Pagefind tel quel. Non non. J’ai voulu recr\u00e9er l’interface du Google de 1998 parce que \u00e0 quoi bon avoir son propre site web si on peut pas s’amuser un peu ^^. Laissez-moi donc vous raconter cette aventure. Le probl\u00e8me avec Algolia Leur service est excellent, je dis pas le contraire, la recherche est rapide, les r\u00e9sultats sont pertinents, l’API est bien foutue mais voil\u00e0, y’a le mod\u00e8le de pricing puisque Algolia facture au nombre de requ\u00eates de recherche. Plus les gens cherchent sur votre site, plus vous payez et quand vous avez un site qui fait plusieurs millions de pages vues par mois, bah… \u00e7a chiffre vite. En gros je d\u00e9passe tr\u00e8s vite les 10 000 recherches offertes chaque semaine et ensuite \u00e7a chiffre. C’est pas la mort, mais c’est un co\u00fbt r\u00e9current d\u00e9bile pour un truc qui pourrait \u00eatre gratuit. En plus de \u00e7a, y’a la d\u00e9pendance \u00e0 un service externe. Si Algolia tombe, ma recherche tombe. Et si Algolia change ses prix, je vais devoir subir. M\u00eame chose si Algolia d\u00e9cide de modifier son API… il faudra que j’adapte mon code. Bref, c’est le cloud dans toute sa splendeur… C’est pratique mais on n’est jamais vraiment chez nous. Pagefind \u00e0 la rescousse Pagefind r\u00e9sout donc tous ces probl\u00e8mes d’un coup. C’est un outil en ligne de commande qui s’ex\u00e9cute apr\u00e8s votre g\u00e9n\u00e9rateur de site statique (Hugo dans mon cas, mais \u00e7a marche avec Jekyll, Eleventy, Astro, ou n’importe quoi d’autre). Concr\u00e8tement, vous lancez : npx pagefind –site public Et Pagefind va : Scanner tous vos fichiers HTML dans le dossier public\/ Extraire le contenu textuel (en ignorant la nav, le footer, les pubs si vous lui dites) Cr\u00e9er un index de recherche optimis\u00e9 G\u00e9n\u00e9rer des fichiers JavaScript pour interroger cet index c\u00f4t\u00e9 client Et le r\u00e9sultat c’est un dossier pagefind\/ qui contient tout ce qu’il faut. Ensuite; \u00e0 vous de servir ces fichiers statiquement avec le reste de votre site, et la magie pourra op\u00e9rer ! L’index pour mes 18 000 articles fait environ 1,5 Go. \u00c7a peut para\u00eetre beaucoup, mais Pagefind est malin car il d\u00e9coupe l’index en fragments et ne charge que ce qui est n\u00e9cessaire pour la recherche en cours. Du coup en pratique, une recherche typique t\u00e9l\u00e9charge quelques centaines de Ko, et pas plus. L’int\u00e9gration technique Pour int\u00e9grer Pagefind dans mon workflow Hugo, j’ai donc \u00e9t\u00e9 cherch\u00e9 le binaire, je l’ai mis sur mon serveur et je l’ai appel\u00e9 dans un cron comme \u00e7a, je rafraichi l’index de recherche 1 fois par jour (et pas \u00e0 chaque g\u00e9n\u00e9ration du site). 0 4 * * * \/home\/manu\/pagefind\/pagefind –site \/home\/manu\/public_html –output-path \/home\/manu\/public_html\/pagefind >> \/var\/log\/pagefind.log 2>&1 J’ai aussi cr\u00e9\u00e9 un fichier de configuration pagefind.yml pour affiner le comportement : root_selector: “[data-pagefind-body]” exclude_selectors: – “header” – “.site-header” – “footer” – “.sidebar” L’astuce ici c’est d’indexer uniquement les div ayant la class data-pagefind-body=’true’ et d’exclure les \u00e9l\u00e9ments qui ne font pas partie du contenu \u00e9ditorial afin de ne pas indexer ce qui se trouve dans le header, les natives, le footer…etc. C\u00f4t\u00e9 JavaScript, Pagefind utilise les imports ES6 dynamiques. \u00c7a veut dire que le moteur de recherche n’est charg\u00e9 que quand l’utilisateur lance effectivement une recherche : async function initPagefind() { pagefind = await import(‘\/pagefind\/pagefind.js’); await pagefind.init(); } Et pour faire une recherche : const search = await pagefind.search(“linux”); \/\/ search.results contient les IDs des r\u00e9sultats \/\/ On charge le contenu de chaque r\u00e9sultat \u00e0 la demande for (const result of search.results) { const data = await result.data(); console.log(data.url, data.meta.title, data.excerpt); } C’est bien fichu parce que search.results retourne imm\u00e9diatement les r\u00e9f\u00e9rences des r\u00e9sultats, mais le contenu r\u00e9el (titre, extrait, URL) n’est charg\u00e9 que quand vous appelez result.data(). Du coup vous pouvez impl\u00e9menter une pagination propre sans t\u00e9l\u00e9charger les donn\u00e9es de milliers de r\u00e9sultats d’un coup. Le d\u00e9lire r\u00e9tro – Recr\u00e9er Google 1998 Maintenant que j’avais un moteur de recherche fonctionnel, fallait l’habiller. Et c’est l\u00e0 que j’ai eu cette id\u00e9e un peu d\u00e9bile : Pourquoi pas recr\u00e9er l’interface du Google de 1998 ? Pour les plus jeunes qui lisent \u00e7a, Google en 1998 c’\u00e9tait une page blanche avec un logo, un champ de recherche, et deux boutons : \u00ab\u00a0Google Search\u00a0\u00bb et \u00ab\u00a0I’m Feeling Lucky\u00ab\u00a0. Pas de suggestions, pas de carrousels, pas de pubs… Juste un champs de recherche. C’\u00e9tait la belle \u00e9poque ! J’ai donc cr\u00e9\u00e9 une page de recherche avec deux vues distinctes. La page d’accueil avec le logo centr\u00e9 et le champ<\/p>\n","protected":false},"author":1,"featured_media":1948,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1947","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1947"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1947\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/1948"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}