@gouvfr/dsfr-roller 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+Le contenu de ce dépôt est placé sous licence MIT License, à l'exception de la fonte Marianne. 
+Voir les [conditions générales d'utilisation](doc/legal/cgu.md)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,11 @@
+# 🇫🇷 Outil de publication du site de documentation du Système de Design de l’État
+
+[![GitHub release](https://img.shields.io/github/v/release/gouvernementFR/dsfr.svg)](https://GitHub.com/gouvernementFR/dsfr/releases/) [![Generic badge](https://img.shields.io/badge/npm-yellow.svg)](https://www.npmjs.com/package/@gouvfr/dsfr-roller) [![Generic badge](https://img.shields.io/badge/license-grey.svg)](https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md) [![Npm package monthly downloads](https://badgen.net/npm/dm/@gouvfr/dsfr-roller)](https://npmjs.com/package/@gouvfr/dsfr-roller)
+
+Le Système de Design de l’État (ci-après, le **DSFR**) est un ensemble de composants web HTML, CSS et Javascript pour faciliter le travail des équipes projets des sites Internet publics, et créer des interfaces numériques de qualité et accessibles.
+
+Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR. Il est destiné à un usage interne par les équipes du Service d'Information du Gouvernement (SIG).
+
+## Licence et droit d'utilisation
+
+Le contenu de ce projet est placé sous licence MIT License. Voir [LICENSE.md](https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md).

package/index.js

@@ -0,0 +1,5 @@
+export { Page } from './src/page/page.js';
+export { Bundler } from './src/integration/bundler.js';
+export { RedirectionType } from './src/integration/redirect/redirection-type.js';
+export { Redirection } from './src/integration/redirect/redirection.js';
+export { Indexer } from './src/integration/indexing/indexer.js';

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@gouvfr/dsfr-roller",
+  "version": "1.0.0",
+  "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",
+    "gouvfr",
+    "dsfr",
+    "doc"
+  ],
+  "homepage": "https://github.com/GouvernementFR/dsfr/tree/main/modules/roller",
+  "bugs": {
+    "url": "https://github.com/GouvernementFR/dsfr/issues"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": {
+    "name": "Service d'Information du Gouvernement",
+    "email": "maxime.beaugrand@pm.gouv.fr",
+    "url": "https://www.systeme-de-design.gouv.fr/"
+  },
+  "contributors": [
+    {
+      "name": "Bertrand Larrieu",
+      "email": "bertrand.larrieu@actimage.com"
+    },
+    {
+      "name": "Keryan Sanié",
+      "email": "keryan.sanie@actimage.com"
+    },
+    {
+      "name": "Baptiste Zeller",
+      "email": "baptiste.zeller@actimage.com"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/GouvernementFR/dsfr.git",
+    "directory": "./modules/doc/publisher"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=22.14.0"
+  },
+  "packageManager": "yarn@4.5.2+sha224.c2e2e9ed3cdadd6ec250589b3393f71ae56d5ec297af11cec1eba3b4",
+  "files": [
+    "index.js",
+    "src/",
+    "../../../legal/*",
+    "../../../SECURITY.md",
+    "../../../LICENSE.md"
+  ],
+  "main": "./index.js",
+  "dependencies": {
+    "@gouvfr/dsfr-forge": "=1.0.0",
+    "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.13.1",
+    "deepmerge": "^4.3.1",
+    "ejs": "^3.1.10",
+    "highlight.js": "^11.10.0",
+    "prettier": "^3.3.3",
+    "yaml": "^2.4.1"
+  }
+}

package/src/component/component.js

@@ -0,0 +1,50 @@
+import render from './render.js';
+import deepmerge from 'deepmerge';
+import { Renderable } from '../core/renderable.js';
+
+class Component extends Renderable {
+  constructor (data, id, pkg = undefined) {
+    super(data);
+    this._id = id;
+    this._pkg = pkg;
+    this._counter = 0;
+  }
+
+  get id () {
+    return this._id;
+  }
+
+  get counter () {
+    this._counter++;
+    return this._counter;
+  }
+
+  uniqueId () {
+    return `${this.id}-${this.counter}`;
+  }
+
+  get ejsPath () {
+    return null;
+  }
+
+  async format () {
+    return this._data;
+  }
+
+  async render (renderingData) {
+    if (!this.ejsPath) {
+      throw new Error('The ejsPath property must be defined');
+    }
+    const formatedData = await this.format();
+
+    const mergedData = renderingData ? deepmerge(formatedData, renderingData) : formatedData;
+
+    const data = {
+      [this.id]: mergedData
+    }
+
+    return await render(this.ejsPath, data, this._pkg);
+  }
+}
+
+export { Component };

package/src/component/components/action.js

@@ -0,0 +1,28 @@
+import { Component } from '../component.js';
+
+class Action extends Component {
+  constructor (data) {
+    super(data, 'action');
+  }
+
+  get ejsPath () {
+    return 'src/dsfr/core/template/ejs/action/action.ejs';
+  }
+
+  async format () {
+    return {
+      markup: this.data.markup ?? 'button',
+      label: this.data.label ?? this.data.text,
+      id: this.data.id,
+      href: this.data.url ?? this.data.href,
+      type: this.data.type,
+      blank: this.data.blank,
+      self: this.data.self,
+      disabled: this.data.disabled,
+      classes: this.data.classes,
+      attributes: this.data.attributes,
+    }
+  }
+}
+
+export { Action };

package/src/component/components/breadcrumb.js

@@ -0,0 +1,33 @@
+import { Component } from '../component.js';
+
+class Breadcrumb extends Component {
+  constructor (data) {
+    super(data, 'breadcrumb');
+  }
+  get ejsPath () {
+    return 'src/dsfr/component/breadcrumb/template/ejs/breadcrumb.ejs';
+  }
+
+  async format () {
+    const chunks = [''];
+    const segments = this.data.segments.map((segment)  => this._formatSegment(segment, chunks));
+    segments[0].path = `/${segments[0].path}`;
+    return {
+      id: 'breadcrumb',
+      segments: segments,
+      button: this.data.button
+    };
+  }
+
+  _formatSegment (segment, chunks) {
+    const missing = segment.url.split('/').filter((chunk) => !chunks.includes(chunk));
+    chunks.push(...missing);
+
+    return {
+      label: segment.label ?? segment.text,
+      path: missing.join('/')
+    };
+  }
+}
+
+export { Breadcrumb };

package/src/component/components/button.js

@@ -0,0 +1,37 @@
+import { Component } from '../component.js';
+import yaml from 'yaml';
+
+class Button extends Component {
+  constructor (data) {
+    super(data, 'button');
+  }
+
+  get ejsPath () {
+    return 'src/dsfr/component/button/template/ejs/button.ejs';
+  }
+
+  async format () {
+    const index = [, , 'secondary', 'tertiary', 'tertiary-no-outline'].indexOf(this.data.kind);
+    const url = this.data.url ?? this.data.href;
+    const blank = this.data.blank === 'true' || /^(http|www)/.test(url);
+    return {
+      markup: url ? 'a' : this.data.markup,
+      kind: index > -1 ? index : parseInt(this.data.kind),
+      size: this.data.size,
+      label: this.data.label ?? this.data.text,
+      title: this.data.title,
+      id: this.data.id,
+      href: url,
+      type: this.data.type,
+      blank,
+      self: !blank || this.data.self === 'true',
+      disabled: this.data.disabled === 'true',
+      classes: this.data.classes.split(','),
+      attributes: yaml.parse(this.data.attributes),
+      icon: this.data.icon,
+      iconPlace: this.data['icon-place'],
+    }
+  }
+}
+
+export { Button };

package/src/component/components/display-body.js

@@ -0,0 +1,41 @@
+import { Component } from '../component.js';
+
+class DisplayBody extends Component {
+  constructor (data) {
+    super(data, 'fieldset');
+  }
+  get ejsPath () {
+    return 'src/dsfr/component/form/template/ejs/fieldset/fieldset.ejs';
+  }
+
+  async format () {
+    return {
+      id: 'display-fieldset',
+      legend: this.data.legend,
+      inline: false,
+      choice: true,
+      elements: this.data.radios.map(radio => this.formatRadio(radio))
+    };
+  }
+
+  formatRadio ({id, text, pictogram, hint}) {
+    return {
+      type: 'radio',
+      inline: false,
+      data: {
+        id: `fr-radios-theme-${id}`,
+        label: text,
+        value: id,
+        size: 'md',
+        name: 'fr-radios-theme',
+        rich: true,
+        hint: hint,
+        pictogram: {
+          name: pictogram
+        }
+      }
+    };
+  }
+}
+
+export { DisplayBody };

package/src/component/components/display-modal.js

@@ -0,0 +1,29 @@
+import { Component } from '../component.js';
+import { DisplayBody } from './display-body.js';
+
+class DisplayModal extends Component {
+  constructor (data) {
+    super(data, 'modal');
+    this._displayBody = new DisplayBody(data.resource.display);
+  }
+
+  get ejsPath () {
+    return 'src/dsfr/component/modal/template/ejs/modal.ejs';
+  }
+
+  async format () {
+    const displayBody = await this._displayBody.render();
+
+    return {
+      id: 'display-modal',
+      title: this.data.resource.display.title,
+      size: 'sm',
+      closeButton: {
+        label: this.data.fragments.button.close,
+      },
+      body: `<div id="fr-display" class="fr-display">${displayBody}</div>`,
+    };
+  }
+}
+
+export { DisplayModal };

package/src/component/components/footer.js

@@ -0,0 +1,85 @@
+import { Component } from '../component.js';
+import { formatLink } from '../../core/format-link.js';
+
+class Footer extends Component {
+  constructor (data) {
+    super(data, 'footer');
+  }
+  get ejsPath () {
+    return 'src/dsfr/component/footer/template/ejs/footer.ejs';
+  }
+
+  async format () {
+    return  {
+      id: 'footer',
+      top: this._formatTop(this.data?.top),
+      brand: {
+        logo: {
+          title: 'République<br>Française',
+        },
+        link: formatLink(this.data?.link),
+      },
+      content: {
+        ...this.data.content,
+        links: this.data?.content?.links?.map(link => formatLink(link))
+      },
+      bottom: this._formatBottom(this.data?.bottom),
+    };
+  }
+
+  _formatTop (top) {
+    if (!top) return undefined;
+    return {
+      ...top,
+      categories: top?.categories?.map(category => {
+        return {
+          ...formatLink(category),
+          links: category?.links.map(link => formatLink(link))
+        }
+      })
+    }
+  }
+
+  _formatBottom (bottom) {
+    if (!bottom) return undefined;
+    return {
+      ...bottom,
+      links: bottom?.links?.map(link => this._formatBottomLink(link))
+    }
+  }
+
+  _formatBottomLink (link) {
+    const classes = link.classes ?? [];
+    const attributes = link.attributes ?? {};
+
+    switch (true) {
+      case link.action === 'display':
+        classes.push('fr-btn--display');
+        attributes['data-fr-opened'] = false;
+        attributes['aria-controls'] = 'display-modal';
+        link.template = 'button';
+        link.label = link.text ?? link.label;
+        break;
+
+      case link.action === 'consent':
+        classes.push('fr-btn--tertiary-no-outline');
+        attributes['data-fr-opened'] = false;
+        attributes['aria-controls'] = 'consent-modal';
+        link.template = 'button';
+        link.label = link.text ?? link.label;
+        break;
+
+      default:
+        link = formatLink(link);
+    }
+
+    link.classes = classes;
+    link.attributes = attributes;
+
+    return link;
+  }
+
+
+}
+
+export { Footer };

package/src/component/components/header.js

@@ -0,0 +1,96 @@
+import { Component } from '../component.js';
+import { formatLink } from '../../core/format-link.js';
+
+class Header extends Component {
+  constructor (data) {
+    super(data, 'header');
+  }
+  get ejsPath () {
+    return 'src/dsfr/component/header/template/ejs/header.ejs';
+  }
+
+  async format () {
+    const links = this.data.links ? this._formatButtons(this.data.links) : undefined;
+
+    const menu = {
+      id: 'menu',
+      modalId: 'menu-modal',
+    }
+
+    const search = {
+      id: 'search',
+      modalId: 'search-modal',
+      input: { placeholder: this.data.search.label, label: this.data.search.label },
+      button: { id: 'search-button', label: this.data.search.label, title: this.data.search.title ?? this.data.search.label, attributes: { 'data-href': this.data.search.url } }
+    };
+
+    return {
+      body: {
+        brand: {
+          logo: {
+            title: 'République<br>Française'
+          },
+          service: {
+            title: this.data.title
+          },
+          link: {
+            href: this.data.link.url,
+            title: this.data.link.title,
+            position: 'service'
+          },
+          navbar: {
+            menu: menu
+          }
+        },
+        tools: {
+          links: links,
+          search: search
+        }
+      },
+      menu: {
+        ...menu,
+        tools: {
+          ...links
+        }
+      }
+    };
+  }
+
+  _formatButtons (data) {
+    return { buttons: data.map(button => this._formatButton(button)) };
+  }
+
+  _formatButton (data) {
+    const classes = [];
+    const attributes = {};
+
+    switch (true) {
+      case data.action === 'display':
+        classes.push('fr-btn--display');
+        attributes['data-fr-opened'] = 'false';
+        attributes['aria-controls'] = 'display-modal';
+        data.label = data.text;
+        break;
+
+      case data.url !== undefined:
+        data.markup = 'a';
+        data = formatLink(data);
+        break;
+    }
+
+    if (data.icon) classes.push(`fr-icon-${data.icon}`);
+    if (data.modifier) classes.push(`fr-btn--${data.modifier}`);
+    data.classes = classes;
+    data.attributes = attributes;
+    return data;
+  }
+
+  _formatNavigation (data) {
+    return {
+      id: 'navigation',
+      links: this.data?.items?.map(item => ({ ...formatLink(item), active: item.isCurrent })).filter(item => item)
+    };
+  }
+}
+
+export { Header };

package/src/component/components/navigation.js

@@ -0,0 +1,72 @@
+import { Component } from '../component.js';
+import { formatLink } from '../../core/format-link.js';
+class Navigation extends Component {
+  constructor (data) {
+    super(data, 'navigation');
+  }
+  get ejsPath () {
+    return 'src/component/navigation/template/ejs/navigation.ejs';
+  }
+
+  async format () {
+    return {
+      id: 'navigation',
+      items: this.data?.items?.map(item => this._formatItem(item)).filter(item => item)
+    };
+  }
+
+  _formatItem (item) {
+    switch (item.type) {
+      case 'link':
+        return this._formatLink(item)
+
+      case 'menu':
+        return this._formatMenu(item);
+
+      case 'mega-menu':
+        return this._formatMegaMenu(item);
+    }
+  }
+
+  _formatLink (link) {
+    return {
+      ...formatLink(link),
+      active: link.isCurrent,
+      type: 'link'
+    };
+  }
+
+  _formatMenu (menu) {
+    return {
+      id: menu.id,
+      collapseId: this.uniqueId(),
+      type: 'menu',
+      label: menu.label ?? menu.text,
+      active: menu.isCurrent,
+      items: menu.items.map(link => this._formatLink(link))
+    }
+  }
+
+  _formatMegaMenu (megaMenu) {
+    return {
+      id: megaMenu.id,
+      collapseId: this.uniqueId(),
+      type: 'mega-menu',
+      label: megaMenu.label ?? megaMenu.text,
+      href: megaMenu.url,
+      active: megaMenu.isCurrent,
+      categories: megaMenu.categories.map(category => this._formatCategory(category))
+    };
+  }
+
+  _formatCategory (category) {
+    return {
+      id: category.id,
+      ...formatLink(category),
+      active: category.isCurrent,
+      items: category.items.map(link => this._formatLink(link))
+    }
+  }
+}
+
+export { Navigation };

package/src/component/components/sidemenu.js

@@ -0,0 +1,58 @@
+import { Component } from '../component.js';
+import { formatLink } from '../../core/format-link.js';
+
+class Sidemenu extends Component {
+  constructor (data) {
+    super(data, 'sidemenu');
+  }
+  get ejsPath () {
+    return 'src/dsfr/component/sidemenu/template/ejs/sidemenu.ejs';
+  }
+
+  async format () {
+    return {
+      id: 'sidemenu',
+      collapseId: this.uniqueId(),
+      titleId: this.uniqueId(),
+      title: this.data.title,
+      items: this.data?.items?.map(item => this._formatItem(item)).filter(item => item)
+    };
+  }
+
+  _formatItem (item) {
+    switch (item.type) {
+      case 'menu':
+        return this._formatMenu(item);
+
+      default:
+        return this._formatLink(item);
+    }
+  }
+
+  _formatLink (link) {
+    return {
+      ...formatLink(link),
+      active: link.isCurrent,
+      type: 'link'
+    };
+  }
+
+  _formatMenu (menu) {
+    return {
+      id: menu.id,
+      isCollapsible: menu.isCollapsible,
+      collapseId: this.uniqueId(),
+      type: 'menu',
+      label: menu.label ?? menu.text,
+      href: menu.url,
+      active: menu.isCurrent,
+      items: menu.items.map(item => this._formatItem(item))
+    }
+  }
+
+  async render () {
+    return await super.render();
+  }
+}
+
+export { Sidemenu };

package/src/component/components/skiplink.js

@@ -0,0 +1,49 @@
+import { Component } from '../component.js';
+
+class Skiplink extends Component {
+    constructor(data) {
+        super(data, 'skiplink');
+    }
+
+    get ejsPath() {
+        return 'src/dsfr/component/skiplink/template/ejs/skiplinks.ejs';
+    }
+
+    async format() {
+        return {
+            id: 'skiplink',
+            items: [
+                {
+                    attributes: {
+                        id: 'skiplink-content',
+                    },
+                    label: this.data.resource.skiplink.content,
+                    href: '#content',
+                },
+                {
+                    attributes: {
+                        id: 'skiplink-navigation',
+                    },
+                    label: this.data.resource.skiplink.navigation,
+                    href: '#menu-modal',
+                },
+                {
+                    attributes: {
+                        id: 'skiplink-search',
+                    },
+                    label: this.data.resource.skiplink.search,
+                    href: '#search-modal',
+                },
+                {
+                    attributes: {
+                        id: 'skiplink-footer',
+                    },
+                    label: this.data.resource.skiplink.footer,
+                    href: '#footer',
+                },
+            ],
+        };
+    }
+}
+
+export { Skiplink };