Jeudi 15 août 2024 à 16:00

#iteration Projet 11 - "Première version d'un moteur web PKM".

Le nombre de tags listé sur ce screenshot est limité par un flex-wrap: wrap + height: 2em + overflow: hidden.

Problème : j'aimerais que le bouton "Afficher plus de tags…" soit affiché directement à droite du dernier tag (ici "Svelte").

Je souhaite limiter le nombre de tags affiché non pas via du css (overflow: hidden), mais via une action Svelte.

J'aimerais pouvoir utiliser cette svelte/action comme ceci :

<ul use:ItemOverflowLimiter={{itemClass: "tag"}}>
	{#each data.tags as tag}
		<li class="tag">
			<a
				href={`/search/?tags=${tag.name}`}
				>{tag.name} ({tag.note_counts})</a>
		</li>
	{/each}
	<li>Afficher plus de tags…</li>
</ul>

1 heure plus tard, j'ai réussi à atteindre mon objectif avec ce commit.
Voici le résulat 🙂 :

Voici le code de la fonction svelte/action ItemOverflowLimiter.js :

export default function ItemOverflowLimiter(node, options) {
    let destroyAllNextItems = false;
    let itemsToDestroy = [];

    // search width of items to keep
    let widthItemsToKeep = 0;
    for (let item of node.children) {
        if (
            (options?.itemClass) &&
            (!item.classList.contains(options.itemClass))
        ) {
            widthItemsToKeep += item.clientWidth;
        }
    }

    for (let item of node.children) {
        if (destroyAllNextItems) {
            if (
                (!options?.itemClass) ||
                (item.classList.contains(options.itemClass))
            ) {
                itemsToDestroy.push(item);
            }
        } else if (
            (item.offsetTop > 0) ||
            (item.offsetLeft + item.clientWidth > (node.clientWidth - widthItemsToKeep))
        ) {
            itemsToDestroy.push(item);
            destroyAllNextItems = true;
        }
    }

    for (let item of itemsToDestroy) {
        item.remove();
    }
}

Je trouve les svelte/action très agréable à utiliser.

Journaux liées à cette note :

Voici les nouveautés depuis ma dernière itération du Projet 11 - "Première version d'un moteur web PKM".

Ce commit contient le résultat du travail du Projet 13, c'est-à-dire le refactoring de PostgreSQL vers Elasticsearch ainsi que la page /src/routes/search qui permet à la fois d'effectuer une recherche sur le contenu des notes et un filtrage de type and sur les tags.

Une démo est visible ici https://notes.develop.sklein.xyz/

Ma Developer eXperience avec Elasticsearch est excellente. J'ai trouvé toutes les fonctionnalités dont j'avais besoin.

Je pense que mon utilisation des Fleeting Note n'est pas la bonne. Je pense que les notes que je qualifie de Fleeting Note sont en réalité des Diary notes ou Journal notes.

J'ai donc décidé de :

[x] Renommer partout fleeting_note en journal_notes

Après implémentation, j'ai réalisé que j'ai fait l'erreur de mélanger l'implémentation de le page qui affiche la liste des notes antéchronologiques et la page de recherche.

Pour être efficace, le résultat de la page recherche doit être affiché en fonction du scoring de la recherche, alors que les pages listes de notes par date de publication.

J'ai donc décidé de :

[x] Implémenter une page /diaries/ (pour la cohérence des path en anglais, je préfère "diaries" à "journaux") qui affiche une liste de notes de type Diary notes ;
- [x] Cette page doit permettre un filtrage par tags
[x] Implémenter une page /notes/ qui affiche une liste des notes qui ne sont pas de type Diary notes, comme des Evergreen Note, Hub note…
- [x] Contrairement à la page liste des Diary notes, cette page de liste ne doit pas afficher le contenu des notes, mais seulement le titre des notes ;
- [x] Je propose de classer ces titres de notes par ordre alphabétique ;
- [x] Je propose aussi de séparer ces notes par lettre, A, B… c'est-à-dire un index alphabétique.
- [x] Cette page doit permettre un filtrage par tags
[x] Refactoring la page /search/ pour ordonner le résultat de la recherche par scoring.
- [x] Cette page doit afficher le contenu des notes avec highligthing ;
- [x] Cette page doit permettre un filtrage sur les types de notes, pour le moment Diary notes et Evergreen Note.
- [x] Cette page doit permettre un filtrage par tags

Au moment où j'écris ces lignes, je ne sais pas encore comment je vais gérer les opérateurs or, (.

Pour le moment, le filtrage multi tags est effectué avec des and.