@gouvfr/dsfr-roller 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "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.14",
+    "@gouvfr/dsfr-forge": "=1.0.15",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.13.1",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

package/src/component/components/summary.js

@@ -0,0 +1,13 @@
+import { Component } from '../component.js';
+
+class Summary extends Component {
+  constructor (data) {
+    super(data, 'summary');
+  }
+
+  get ejsPath () {
+    return 'src/dsfr/component/summary/template/ejs/summary.ejs';
+  }
+}
+
+export { Summary };

package/src/node/generic/blockquote-node.js

@@ -10,8 +10,8 @@ const LEVELS = new Map([
 
 class BlockquoteNode extends Node {
   constructor (data) {
-    if (data?.children?.[0]?.type === 'heading') data.children[0].attributes = { class: 'fr-callout__title' };
     super(data, 'div');
+    if (this.children[0]?.type === 'heading') this.children[0].attributes.addClass('fr-callout__title');
     this.attributes.addClass('fr-callout fr-mb-6v');
 
     if (data?.level && LEVELS.has(data.level)) {

package/src/node/generic/heading-node.js

@@ -7,10 +7,14 @@ class HeadingNode extends Node {
     this._depth = data.depth;
   }
 
+  get depth () {
+    return this._depth;
+  }
+
   adjust (map) {
-    if (map.has(this.data.depth)) {
-      this._depth = map.get(this.data.depth);
-      this.tagName = `h${this._depth}`;
+    if (map.has(this._depth)) {
+      const depth = map.get(this._depth);
+      this.tagName = `h${depth}`;
 
       switch (true) {
         case this._data?.data?.isSemantic:
@@ -18,7 +22,7 @@ class HeadingNode extends Node {
           break;
 
         default:
-          this.attributes.addClass(`fr-h${this.data.depth}`);
+          this.attributes.addClass(`fr-h${this._depth}`);
       }
     }
   }
@@ -28,7 +32,7 @@ HeadingNode.TYPE = 'heading';
 
 const adjustHeading = (nodes) => {
   let isPromoted = false;
-  const headings = nodes.map(node => node.data.depth);
+  const headings = nodes.map(node => node.depth);
 
   if (headings.indexOf(1) === -1) {
     if (headings.filter(heading => heading === 2).length === 1) {
@@ -53,4 +57,4 @@ const adjustHeading = (nodes) => {
   nodes.forEach(node => node.adjust(map));
 };
 
-export { HeadingNode, adjustHeading};
+export { HeadingNode, adjustHeading };

package/src/node/node-root.js

@@ -11,12 +11,11 @@ class NodeRoot extends Node {
   constructor (data) {
     super(data);
     this._nodes = gather(this);
-  }
-
-  async render () {
     adjustHeading(this._nodes.filter(node => node.type === 'heading'));
+  }
 
-    return await super.render();
+  get nodes () {
+    return this._nodes;
   }
 }
 

package/src/node/node.js

@@ -17,6 +17,11 @@ class Node extends Renderable {
     if (typeof this.data?.classes === 'object' && Array.isArray(this.data.classes)) {
       this.attributes.setClasses(this.data.classes);
     }
+
+    if (this.hasNormalizedId) {
+      this._normalizedId =  normalize(this.text);
+      this.attributes.setAttribute('id', this._normalizedId);
+    }
   }
 
   get children () {
@@ -43,6 +48,10 @@ class Node extends Renderable {
     return this._hasNormalizedId;
   }
 
+  get normalizedId () {
+    return this._normalizedId;
+  }
+
   get attributes () {
     if (!this._attributes) {
       this._attributes = new TagAttributes();
@@ -76,15 +85,11 @@ class Node extends Renderable {
   }
 
   async render () {
-    const html = await this.renderChildren();
-
-    if (!this.tagName) return html;
+    const innerHtml = await this.renderChildren();
 
-    if (this.hasNormalizedId) {
-      this.attributes.setAttribute('id', normalize(this.text));
-    }
+    if (!this.tagName) return innerHtml;
 
-    return this.isSelfClosing ? `<${this.tagName}${this.renderAttributes()}/>` : `<${this.tagName}${this.renderAttributes()}>${html}</${this.tagName}>`;
+    return this.isSelfClosing ? `<${this.tagName}${this.renderAttributes()}/>` : `<${this.tagName}${this.renderAttributes()}>${innerHtml}</${this.tagName}>`;
   }
 
   get text () {

package/src/page/body/toc.js

@@ -0,0 +1,96 @@
+import { Renderable } from '../../core/renderable.js';
+import { Summary } from '../../component/components/summary.js';
+
+const filterHeadings = (list, depths = [2]) => {
+  if (!list || list.length === 0) return undefined;
+  let heading = list[0];
+  if (!depths.includes(heading.depth)) return undefined;
+  for (heading of list) {
+    if (Array.isArray(heading.list)) {
+      heading.list = filterHeadings(heading.list, depths);
+    }
+  }
+  return list;
+}
+
+class TOC extends Renderable {
+  constructor (data, nodes) {
+    super(data);
+    this._hasToc = data.toc !== undefined;
+    this._nodes = nodes;
+  }
+
+  async render () {
+    if (!this._hasToc) {
+      return '';
+    }
+
+    const headings = this._nodes.filter(node => node.type === 'heading').map (heading => {
+      return {
+        depth: heading.depth,
+        href: `#${heading.normalizedId}`,
+        label: heading.text,
+      };
+    });
+
+    let depths = headings.map(heading => heading.depth).filter((depth, index, array) => array.indexOf(depth) === index).sort((a, b) => a - b);
+
+    let depth = depths[0];
+    const lists = [];
+    let mainList = [];
+    let list = mainList;
+    let previous;
+
+    for (const heading of headings) {
+      switch (true) {
+        case heading.depth === depth:
+          list.push(heading);
+          break;
+
+        case heading.depth < depth:
+          while (lists.length > 0 && list[0].depth > heading.depth) {
+            list = lists.pop();
+          }
+          if (list[0].depth === heading.depth) {
+            list.push(heading);
+            depth = heading.depth;
+          }
+          else {
+            list = [heading];
+            lists.push(list);
+            if (previous) previous.list = list;
+            depth = heading.depth;
+          }
+          break;
+
+        case heading.depth > depth:
+          lists.push(list);
+          list = [heading];
+          if (previous) previous.list = list;
+          depth = heading.depth;
+          break;
+      }
+
+      previous = heading;
+    }
+
+    while (mainList?.length === 1) mainList = mainList[0].list;
+
+    if (!mainList || mainList?.length === 0) return '';
+
+    switch (typeof this._data.toc) {
+      case 'string':
+        depths = this._data.toc.split(',').map(depth => parseInt(depth.trim(), 10)).filter(depth => !isNaN(depth));
+        mainList = filterHeadings(mainList, depths);
+        break;
+    }
+
+    const summary = new Summary({ list: mainList });
+
+    return `<div class="fr-mb-6v" >
+    ${await summary.render()}
+    </div>`;
+  }
+}
+
+export { TOC };

package/src/page/page.js

@@ -6,6 +6,7 @@ import { Renderable } from '../core/renderable.js'
 
 class Page extends Renderable {
   constructor (src) {
+    log.info(`Reading page ${src}`);
     const dataFile = fs.readFileSync(src, 'utf8');
     const data = yaml.parse(dataFile);
     super(data);

package/src/template/template.js

@@ -11,6 +11,10 @@ class Template extends Renderable {
     });
   }
 
+  get content () {
+    return this._content;
+  }
+
   get name () {
     return this.constructor.NAME;
   }

package/src/template/templates/editorial-template.js

@@ -1,6 +1,7 @@
 import { Template } from '../template.js';
 import { Sidemenu } from '../../component/components/sidemenu.js';
 import { Breadcrumb } from '../../component/components/breadcrumb.js';
+import { TOC } from '../../page/body/toc.js';
 
 class EditorialTemplate extends Template {
   constructor (data) {
@@ -11,6 +12,8 @@ class EditorialTemplate extends Template {
     if (this._hasSidemenu) this._sidemenu = new Sidemenu(data.resource.navigation.sidemenu);
 
     this._breadcrumb = new Breadcrumb(data.breadcrumb);
+
+    this._toc = new TOC(data, this.content.nodes);
   }
 
   async render () {
@@ -26,6 +29,7 @@ class EditorialTemplate extends Template {
     cols.push(`
                 <div class="fr-col-12 fr-col-md-8">
                     ${await this._breadcrumb.render()}
+                    ${await this._toc.render()}
                     ${await super.render()}
                 </div>
             `);