@gouvfr/dsfr-roller 1.0.68 → 1.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.68",
+  "version": "1.0.70",
   "description": "Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR",
   "keywords": [
     "Système de Design de l'État",
@@ -56,7 +56,7 @@
   ],
   "main": "./index.js",
   "dependencies": {
-    "@gouvfr/dsfr-forge": "=1.0.68",
+    "@gouvfr/dsfr-forge": "=1.0.70",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.2",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

package/src/component/components/sidemenu.js

@@ -1,23 +1,7 @@
 import { Component } from '../component.js';
 import { formatLink } from '../../core/format-link.js';
 import { log } from '@gouvfr/dsfr-forge';
-
-const Badges = {
-  BETA: {
-    id: 'beta',
-    type: 'info',
-    icon: false,
-    size: 'sm',
-  },
-  NEW: {
-    id: 'new',
-    type: 'new',
-    icon: true,
-    size: 'sm',
-  }
-}
-
-const BadgesMap = new Map(Object.values(Badges).map(badge => [badge.id, badge]));
+import { BadgesMap } from '../../page/body/badges-map.js';
 
 class Sidemenu extends Component {
   constructor (data, badgeLabels) {

package/src/page/body/badges-map.js

@@ -0,0 +1,18 @@
+const BadgeVariants = {
+  BETA: {
+    id: 'beta',
+    type: 'info',
+    icon: false,
+    size: 'sm',
+  },
+  NEW: {
+    id: 'new',
+    type: 'new',
+    icon: true,
+    size: 'sm',
+  }
+};
+
+const BadgesMap = new Map(Object.values(BadgeVariants).map(badge => [badge.id, badge]));
+
+export { BadgesMap };

package/src/page/body/badges.js

@@ -1,21 +1,5 @@
 import { log } from '@gouvfr/dsfr-forge';
-
-const BadgeVariants = {
-  BETA: {
-    id: 'beta',
-    type: 'info',
-    icon: false,
-    size: 'sm',
-  },
-  NEW: {
-    id: 'new',
-    type: 'new',
-    icon: true,
-    size: 'sm',
-  }
-};
-
-const BadgesMap = new Map(Object.values(BadgeVariants).map(badge => [badge.id, badge]));
+import { BadgesMap } from './badges-map.js';
 
 class Badges {
   constructor(data) {

package/src/page/page.js

@@ -31,6 +31,7 @@ class Page extends Renderable {
       boost: this.data.boost,
       text: this._html.text,
       section: this.data.section,
+      badge: this.data.badge,
     }
   }
 

package/src/script/search/elements/result-card.js

@@ -1,46 +1,74 @@
+import { BadgesMap } from '../../../page/body/badges-map.js';
+
 class ResultCard {
-    constructor(data) {
-        this._title = data.title;
-        this._url = data.url;
-        this._desc = data.excerpt ?? data.summary;
-        this._cover = data.cover || '/static/img/placeholder.16x9.png';
-        this._section = data.section;
-    }
-
-    getTags() {
-        if (!this._section) return '';
-        return `<div class="fr-card__start">
-                    <ul class="fr-tags-group">
-                        <li>
-                            <p class="fr-tag">${this._section}</p>
-                        </li>
-                    </ul>
-                </div>`;
-    }
-
-    getCover() {
-        if (!this._cover) return '';
-        return `<div class="fr-card__header">
-                    <div class="fr-card__img">
-                        <img src="${this._cover}" alt="" class="fr-responsive-img">
-                    </div>
-                </div>`;
-    }
-
-    render() {
-        return `<div class="fr-card fr-enlarge-link fr-card--horizontal fr-mb-8v">
-                    <div class="fr-card__body">
-                        <div class="fr-card__content">
-                            <h3 class="fr-card__title">
-                                <a href="${this._url}">${this._title}</a>
-                            </h3>
-                            ${this._desc ? `<p class="fr-card__desc">${this._desc}</p>` : ''}
-                            ${this.getTags()}
-                        </div>
-                    </div>
-                    ${this.getCover()}
-                </div>`;
-    }
+  constructor (data) {
+    this._title = data.title;
+    this._url = data.url;
+    this._desc = data.excerpt ?? data.summary;
+    this._cover = data.cover || '/static/img/placeholder.16x9.png';
+    this._section = data.section;
+    this._badge = data.badge || [];
+  }
+
+  getTags () {
+    if (!this._section) return '';
+    return `<div class="fr-card__start">
+      <ul class="fr-tags-group">
+        <li>
+          <p class="fr-tag">${this._section}</p>
+        </li>
+      </ul>
+    </div>`;
+  }
+
+  getBadges () {
+    if (!this._badge?.length) return '';
+
+    const badges = Array.isArray(this._badge) ? this._badge : this._badge.split(',').map(b => b.trim());
+    const badgeItems = badges
+      .map(badge => {
+        const badgeData = BadgesMap.get(badge);
+        if (!badgeData) return null;
+
+        const badgeLabel = window.resource?.badge?.[badge] || badge;
+        let iconClass = '';
+        if (badgeData.icon === false) {
+          iconClass = ' fr-badge--no-icon';
+        } else {
+          iconClass = ` fr-badge--icon-${badgeData.icon}`;
+        }
+        return `<li><span class="fr-badge fr-badge--${badgeData.type} fr-badge--${badgeData.size}${iconClass}">${badgeLabel}</span></li>`;
+      })
+      .filter(Boolean)
+      .join('');
+
+    return `<ul class="fr-badges-group fr-mb-2v">${badgeItems}</ul>`;
+  }
+
+  getCover () {
+    if (!this._cover) return '';
+    return `<div class="fr-card__header">
+      <div class="fr-card__img">
+        <img src="${this._cover}" alt="" class="fr-responsive-img">
+      </div>
+      ${this.getBadges()}
+    </div>`;
+  }
+
+  render () {
+    return `<div class="fr-card fr-enlarge-link fr-card--horizontal fr-mb-8v">
+      <div class="fr-card__body">
+        <div class="fr-card__content">
+          <h3 class="fr-card__title">
+            <a href="${this._url}">${this._title}</a>
+          </h3>
+          ${this._desc ? `<p class="fr-card__desc">${this._desc}</p>` : ''}
+          ${this.getTags()}
+        </div>
+      </div>
+      ${this.getCover()}
+    </div>`;
+  }
 }
 
 export { ResultCard };

package/src/script/search/elements/search-page.js

@@ -7,39 +7,39 @@ import { Pagination } from '../../main/elements/pagination/index.js';
 const RESULTS_PER_PAGES = 10;
 
 class SearchPage extends Element {
-    constructor(element) {
-        super(element, 'searchPage');
-
-        this._query = getQuery();
-        this._searchBarInput = document.querySelector('#search-input');
-        this._resultsCount = document.querySelector('#results-count');
-        this._resultsList = document.querySelector('#results-cards');
-        this._container = element.querySelector('#results-page--container');
-    }
+  constructor(element) {
+    super(element, 'searchPage');
+
+    this._query = getQuery();
+    this._searchBarInput = document.querySelector('#search-input');
+    this._resultsCount = document.querySelector('#results-count');
+    this._resultsList = document.querySelector('#results-cards');
+    this._container = element.querySelector('#results-page--container');
+  }
 
-    async init() {
-        await window.searchEngine.init('searchPage');
+  async init() {
+    await window.searchEngine.init('searchPage');
 
-        if (this._query) {
-            this._searchBarInput.value = this._query;
-            const results = window.searchEngine.search(this._query);
+    if (this._query) {
+      this._searchBarInput.value = this._query;
+      const results = window.searchEngine.search(this._query);
 
-            const count = new ResultsCount(results.length);
-            const resultsList = new ResultsList(results, RESULTS_PER_PAGES);
+      const count = new ResultsCount(results.length);
+      const resultsList = new ResultsList(results, RESULTS_PER_PAGES);
 
-            this._resultsCount.innerHTML = count.render();
-            document.title = `${document.title} - ${count.render()}`;
+      this._resultsCount.innerHTML = count.render();
+      document.title = `${document.title} - ${count.render()}`;
 
-            this._container.appendChild(resultsList.element);
-            resultsList.init();
+      this._container.appendChild(resultsList.element);
+      resultsList.init();
 
-            if (results.length > RESULTS_PER_PAGES) {
-                const pagination = new Pagination(results, RESULTS_PER_PAGES);
-                this._container.appendChild(pagination.element);
-                pagination.init();
-            }
-        }
+      if (results.length > RESULTS_PER_PAGES) {
+        const pagination = new Pagination(results, RESULTS_PER_PAGES);
+        this._container.appendChild(pagination.element);
+        pagination.init();
+      }
     }
+  }
 }
 
 export { SearchPage };