ajout tags filters

IGNF · May 27, 2024 · 82f485c · 82f485c
1 parent f887a97
commit 82f485c
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 45 deletions.
diff --git a/_includes/components/pagefind_filters.njk b/_includes/components/pagefind_filters.njk
@@ -0,0 +1,9 @@
+{% if format %}
+    {% for item in format %}<span class="fr-hidden" data-pagefind-filter="format">{{ item }}</span>{% endfor %}
+{% endif %}
+{% if espace %}
+    {% for item in espace %}<span class="fr-hidden" data-pagefind-filter="espace">{{ item }}</span>{% endfor %}
+{% endif %}
+{% if profile %}
+    {% for item in profile %}<span class="fr-hidden" data-pagefind-filter="profile">{{ item }}</span>{% endfor %}
+{% endif %}
diff --git a/_includes/components/taggroup.njk b/_includes/components/taggroup.njk
@@ -4,7 +4,7 @@
             {{ (tagsUrl or "/blog/tags/") | locale_url }}{{ tag | slugify }}/
         {% endset %}
         <li>
-            <a href="{{ tagUrl }}" class="fr-tag">{{ tag }}</a>
+            <a href="{{ tagUrl }}" class="fr-tag" data-pagefind-filter="tag">{{ tag }}</a>
         </li>
     {% endfor %}
 </ul>
diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
@@ -19,6 +19,7 @@ sidemenu: false
         </div>
     </div>
     <div class="fr-container fr-mt-6w" data-pagefind-body>
+        {% include "components/pagefind_filters.njk" %}
         <div class="fr-grid-row">
             {% if sidemenu %}
                 {% set sideMenuItems = content | getSideMenuItems %}

diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
@@ -7,6 +7,7 @@ layout: layouts/base.njk
         {% include "components/breadcrumb.njk" %}
     {% endif %}
     <div class="fr-grid-row fr-grid-row--center" data-pagefind-body>
+        {% include "components/pagefind_filters.njk" %}
         <div class="fr-col-12 fr-col-md-8">
             {% include "components/taggroup.njk" %}
             <div class="fr-grid-row">

diff --git a/content/fr/blog/posts/accordeon.md b/content/fr/blog/posts/accordeon.md
@@ -5,6 +5,18 @@ date: git Last Modified
 tags:
     - DSFR
     - composant
+format:
+    - Initiation
+    - Tutoriel
+    - Référentiel technique
+    - Article
+profile:
+    - Utilisateur
+    - Producteur
+    - Développeur
+espace:
+    - Ecosystème Géoplateforme
+    - Organismes producteurs
 ---
 
 Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`.

diff --git a/content/fr/blog/posts/md-cheatsheet.md b/content/fr/blog/posts/md-cheatsheet.md
@@ -5,6 +5,10 @@ date: git Last Modified
 tags:
     - contenu
     - Markdown
+format:
+    - Initiation
+    - Tutoriel
+    - Référentiel technique
 ---
 
 La syntaxe utilisée dans les fichiers Markdown `.md` du site suit la spécification [CommonMark](https://commonmark.org/).

diff --git a/content/fr/search-results.njk b/content/fr/search-results.njk
@@ -13,6 +13,7 @@ layout: layouts/base.njk
                 <p class="fr-text--lg">
                     <span id="result-count">0</span> {{ "results" | i18n }}
                 </p>
+                <div id="search-filter-tags"></div>
                 <div class="fr-grid-row fr-grid-row--gutters" id="search-results"></div>
             </div>
             {% include "components/back_to_top.njk" %}

diff --git a/public/js/search-results.js b/public/js/search-results.js
@@ -1,27 +1,122 @@
-(() => {
-    const RESULTS_PER_PAGE = 10;
+const RESULTS_PER_PAGE = 10;
 
-    const SEARCH_TERM_SELECTOR = "#search-term";
-    const RESULT_COUNT_SELECTOR = "#result-count";
-    const SEARCH_RESULTS_SELECTOR = "#search-results";
+const SEARCH_TERM_SELECTOR = "#search-term";
+const RESULT_COUNT_SELECTOR = "#result-count";
+const SEARCH_RESULTS_SELECTOR = "#search-results";
 
-    const FULL_WIDTH_COL_CLASS = "fr-col-12";
+const FULL_WIDTH_COL_CLASS = "fr-col-12";
 
-    const searchTermText = document.querySelector(SEARCH_TERM_SELECTOR);
-    const resultCounter = document.querySelector(RESULT_COUNT_SELECTOR);
-    const searchResultList = document.querySelector(SEARCH_RESULTS_SELECTOR);
+class PageFinder {
+    constructor(pagefind) {
+        this.pagefind = pagefind;
 
-    const getSearchResults = async () => {
-        const pagefind = await import(PAGEFIND_URL);
+        this.searchTermText = document.querySelector(SEARCH_TERM_SELECTOR);
+        this.resultCounter = document.querySelector(RESULT_COUNT_SELECTOR);
+        this.searchResultList = document.querySelector(SEARCH_RESULTS_SELECTOR);
+        this.filterTagsEl = document.getElementById("search-filter-tags");
+    }
+
+    async getSearchResults() {
+        const queryParams = new URLSearchParams(window.location.search);
+        console.log(queryParams.get("filters"));
+        const searchTerm = queryParams.get(SEARCH_PARAM);
+        this.searchTermText.textContent = searchTerm;
+
+        // https://github.com/CloudCannon/pagefind/blob/production-docs/pagefind_web_js/types/index.d.ts#L72
+        const search = await this.pagefind.search(searchTerm);
+        this.resultCounter.innerText = search.results.length;
+
+        const filters = await this.pagefind.filters();
+        console.log(filters);
+        // , {
+        //     filters: {
+        //         format: "Tutoriel",
+        //     },
+        // }
+
+        let start = 0;
+        let paginatedResults = await Promise.all(search.results.slice(start, start + RESULTS_PER_PAGE).map((r) => r.data()));
+
+        await this.populateSearchResults(paginatedResults);
+        this.showFilters(filters);
+
+        window.addEventListener("scroll", async () => {
+            if (this._bottomIsReached()) {
+                start += RESULTS_PER_PAGE;
+                paginatedResults = await Promise.all(search.results.slice(start, start + RESULTS_PER_PAGE).map((r) => r.data()));
+                await populateSearchResults(paginatedResults);
+            }
+        });
+    }
+
+    async populateSearchResults(paginatedResults) {
+        this.searchResultList.innerHTML = "";
+
+        paginatedResults.forEach((result) => {
+            const cardCol = document.createElement("div");
+            cardCol.className = FULL_WIDTH_COL_CLASS;
+            cardCol.innerHTML = this._getCardHtml(result.meta.title, result.excerpt, result.url);
+            this.searchResultList.appendChild(cardCol);
+        });
+    }
+
+    showFilters(filters) {
         const queryParams = new URLSearchParams(window.location.search);
+
         const searchTerm = queryParams.get(SEARCH_PARAM);
-        searchTermText.textContent = searchTerm;
-        pagefind.init();
-        const search = await pagefind.search(searchTerm);
-        return search.results;
-    };
+        let queryFilters = queryParams.get("filters") ? JSON.parse(decodeURIComponent(queryParams.get("filters"))) : {};
+
+        Object.entries(filters).map(([filterType, subFilter]) => {
+            let div = document.createElement("div");
+            div.className = "fr-grid-row fr-grid-row--middle";
+
+            let divTitle = document.createElement("div");
+            divTitle.className = "fr-col-12 fr-col-sm-2";
+            divTitle.textContent = `${filterType} : `;
 
-    const getCardHtml = (title, excerpt, url) => {
+            let divTags = document.createElement("div");
+            divTags.className = "fr-col-12 fr-col-sm-10";
+
+            let ul = document.createElement("ul");
+            ul.className = "fr-tags-group";
+            divTags.appendChild(ul);
+
+            div.appendChild(divTitle);
+            div.appendChild(divTags);
+
+            Object.entries(subFilter).map(([filter, count]) => {
+                const li = document.createElement("li");
+                li.className = "fr-tag fr-tag--sm";
+
+                const tmpQueryFilters = { ...queryFilters };
+                tmpQueryFilters[filterType] = Array.from(new Set([...(tmpQueryFilters[filterType] ?? []), filter]));
+                console.log(tmpQueryFilters);
+
+                const aTag = document.createElement("a");
+                aTag.href = `${new URL(window.location).pathname}?term=${searchTerm}&filters=${encodeURIComponent(JSON.stringify(tmpQueryFilters))}`;
+                aTag.text = `${filter} (${count})`;
+
+                li.appendChild(aTag);
+                ul.appendChild(li);
+            });
+
+            this.filterTagsEl.appendChild(div);
+        });
+
+        // let ul = document.createElement("ul");
+        // ul.className = "fr-tags-group";
+        // filters.espace.forEach((espace) => {
+        //     const li = document.createElement("li");
+        //     li.className = "fr-tag";
+        //     li.textContent = espace;
+        //     ul.appendChild(li);
+        // });
+        // filterTagsEl.appendChild(ul);
+
+        // console.log(filters);
+    }
+
+    _getCardHtml(title, excerpt, url) {
         return `
 <div class="fr-card fr-enlarge-link fr-card--horizontal">
     <div class="fr-card__body">
@@ -33,35 +128,16 @@
         </div>
     </div>
 </div>`;
-    };
-
-    const populateSearchResults = async (paginatedResults) => {
-        paginatedResults.forEach((result) => {
-            const cardCol = document.createElement("div");
-            cardCol.className = FULL_WIDTH_COL_CLASS;
-            cardCol.innerHTML = getCardHtml(result.meta.title, result.excerpt, result.url);
-            searchResultList.appendChild(cardCol);
-        });
-    };
+    }
 
-    const bottomIsReached = () => {
+    _bottomIsReached() {
         return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight;
-    };
-
-    getSearchResults().then(async (searchResults) => {
-        resultCounter.innerText = searchResults.length;
-
-        let start = 0;
-        let paginatedResults = await Promise.all(searchResults.slice(start, start + RESULTS_PER_PAGE).map((r) => r.data()));
+    }
+}
 
-        await populateSearchResults(paginatedResults);
+(async () => {
+    const pagefind = await import(PAGEFIND_URL);
 
-        window.addEventListener("scroll", async () => {
-            if (bottomIsReached()) {
-                start += RESULTS_PER_PAGE;
-                paginatedResults = await Promise.all(searchResults.slice(start, start + RESULTS_PER_PAGE).map((r) => r.data()));
-                await populateSearchResults(paginatedResults);
-            }
-        });
-    });
+    const pageFinder = new PageFinder(pagefind);
+    await pageFinder.getSearchResults();
 })();