@gouvfr/dsfr-roller 1.0.0

package/src/component/components/translate.js

@@ -0,0 +1,32 @@
+import { Component } from '../component.js';
+
+class Translate extends Component {
+  constructor (data) {
+    super(data, 'translate');
+  }
+  get ejsPath () {
+    return 'src/dsfr/component/translate/template/ejs/translate.ejs';
+  }
+
+  async format () {
+    return {
+      id: 'translate',
+      button: { title: this.data.button, kind: 3 },
+      collapseId: 'translate-collapse',
+      languages: this._formatLanguages(this.data.languages)
+    };
+  }
+
+  _formatLanguages (languages) {
+    return languages.map(lang => this._formatLanguage(lang));
+  }
+
+  _formatLanguage (lang) {
+    return {
+      ...lang,
+      href: lang.url
+    };
+  }
+}
+
+export { Translate };

package/src/component/components/version.js

@@ -0,0 +1,21 @@
+import { Component } from '../component.js';
+import { EJS_PKG } from '../ejs-pkg.js';
+class Version extends Component {
+  constructor (data) {
+    super(data, 'version', EJS_PKG.ROLLER);
+  }
+  get ejsPath () {
+    return 'src/component/ejs/version/version.ejs';
+  }
+
+  async format () {
+    return {
+      id: 'version',
+      button: { title: this.data.button, kind: 3 },
+      collapseId: 'version-collapse',
+      versions: this.data.versions
+    };
+  }
+}
+
+export { Version };

package/src/component/ejs/version/version.ejs

@@ -0,0 +1,46 @@
+<%#
+# paramètres header version
+
+* version (object, optional) : Paramètres du sélecteur de langue
+  ** version.id (string) : id de l'élément
+  ** version.button (object, optional) : Paramètres du bouton du sélecteur de langue (ex: {kind:3} pour un btn tertiary)
+  ** version.collapseId (string, required) : Id du menu à controler
+  ** version.versions (array, required) : Tableau d'objets langues
+    *** version.versions[].name (string, required) : Nom de la langue dans son alphabet
+    *** version.versions[].locale (string, required) : Code de la langue en 2 caratères
+    *** version.versions[].active (boolean, required) : La langue qui apparait dans le bouton et en style active dans la liste (1 seule langue active)
+%>
+<%
+const version = locals.version || {};
+const attributes = version.attributes || {};
+attributes.id = version.id || uniqueId('version');
+const collapseId = version.collapseId || uniqueId('version');
+%>
+
+<% eval(include(`${dsfrPkg}src/dsfr/core/index.ejs`)); %>
+
+<nav role="navigation" class="dsfr-doc-version <%= prefix %>-nav" <%- includeAttrs(attributes) %>>
+  <div class="<%= prefix %>-nav__item">
+    <%
+    const versionBtn = version.button || {};
+    const activeVersion = version.versions.find(version => version.active === true);
+    versionBtn.label = activeVersion?.label ?? activeVersion?.text;
+    const minBtnClasses = [`dsfr-doc-version__btn`];
+    const minBtnAttrs = {
+      'aria-controls': collapseId,
+      'aria-expanded': false,
+      title: versionBtn.title
+    };
+    versionBtn.classes = versionBtn.classes !== undefined ? versionBtn.classes.concat(minBtnClasses) : minBtnClasses;
+    versionBtn.attributes = versionBtn.attributes !== undefined ? {...minBtnAttrs, ...versionBtn.attributes} : minBtnAttrs;
+
+    %>
+
+    <%- include(`${dsfrPkg}src/dsfr/component/button/template/ejs/button`, { button:versionBtn }); %>
+
+    <div class="<%= prefix %>-collapse dsfr-doc-version__menu <%= prefix %>-menu" id="<%= version.collapseId %>">
+
+        <%- include('versions.ejs', {versions: version.versions}) %>
+    </div>
+  </div>
+</nav>

package/src/component/ejs/version/versions.ejs

@@ -0,0 +1,31 @@
+<%#
+# paramètres versionSelect Versions
+
+* versions (array, required) : Tableau d'objets versions
+  ** versions[].id (string) : id de l'élément
+  ** versions[].name (string, required) : Nom de la version
+
+  ** versions[].url (string) : url de la version
+  ** versions[].active (boolean, required) : La version qui apparait dans le bouton et en style active dans la liste (1 seule version active)
+  ** versions[].badge (string) : complément au nom de version
+%>
+<%
+const versions = locals.versions || {};
+%>
+
+<ul class="<%= prefix %>-menu__list">
+  <%
+  for (let i = 0; i < versions.length; i++) {
+    const version = versions[i];
+    const attrs = {
+      href: version.url,
+      id: version.id || uniqueId('version')
+    };
+    if (version.active) attrs['aria-current'] = true;
+    const badge = version.badge !== undefined ? `&nbsp;<span class="${prefix}-badge ${prefix}-badge--new ${prefix}-badge--sm" >${version.badge}</span>` : '';
+  %>
+    <li>
+      <a class="dsfr-doc-version__version <%= prefix %>-nav__link" <%- includeAttrs(attrs); %> ><%= version.text %><%- badge %></a>
+    </li>
+  <% } %>
+</ul>

package/src/component/ejs-pkg.js

@@ -0,0 +1,6 @@
+import { getPackagePath } from '@gouvfr/dsfr-forge';
+
+export const EJS_PKG = {
+  DSFR: getPackagePath('@gouvfr/dsfr-publisher'),
+  ROLLER: getPackagePath('@gouvfr/dsfr-roller')
+}

package/src/component/render.js

@@ -0,0 +1,19 @@
+import ejs from 'ejs';
+import { EJS_PKG } from './ejs-pkg.js';
+
+let count = 0;
+
+const uniqueId = (module) => {
+  count++;
+  return `${module}-${count}`;
+};
+
+const DATA = {
+  uniqueId: uniqueId,
+  dsfrPkg: EJS_PKG.DSFR,
+  relativeRoot: '/'
+};
+
+const render = async (template, data, pkg = EJS_PKG.DSFR) => await ejs.render(`<%- include('${pkg}${template}') %>`, {...DATA, ...data});
+
+export default render;

package/src/constants.js

@@ -0,0 +1,7 @@
+import { getPackagePath } from '@gouvfr/dsfr-forge';
+
+export const ROLLER_MODULE = getPackagePath('@gouvfr/dsfr-roller');
+
+export const DOMAIN = 'https://www.systeme-de-design.gouv.fr';
+
+export const BANNER = '/*! DSFR | SPDX-License-Identifier: MIT */';

package/src/core/format-html.js

@@ -0,0 +1,16 @@
+import { log } from '@gouvfr/dsfr-forge';
+import * as prettier from 'prettier';
+import htmlParser from 'prettier/parser-html';
+
+export const formatHtml = async (html, src = 'unknown') => {
+  try {
+    const pretty = await prettier.format(html, { parser: 'html', plugins: [htmlParser], tabWidth: 2, });
+    return pretty;
+  }
+  catch (error) {
+    log.error(`Error while formatting HTML @ ${src}`);
+    log.error(error);
+  }
+
+  return html;
+}

package/src/core/format-link.js

@@ -0,0 +1,8 @@
+export const formatLink = (link) => {
+  if (!link) return undefined;
+  const url = link.url ?? link.href;
+  if (/^(https:|http:|www\.)\S*$/.test(url)) link.blank = true;
+  link.href = url;
+  link.label = link.label ?? link.text;
+  return link;
+};

package/src/core/html-renderable.js

@@ -0,0 +1,10 @@
+import { Renderable } from './renderable.js';
+import { formatHtml } from './format-html.js';
+
+class HtmlRenderable extends Renderable {
+  async format (html) {
+    return formatHtml(html, this._data.src);
+  }
+}
+
+export { HtmlRenderable };

package/src/core/renderable.js

@@ -0,0 +1,20 @@
+class Renderable {
+  constructor (data) {
+    data = this.structure(data);
+    this._data = data;
+  }
+
+  structure (data) {
+    return data;
+  }
+
+  get data () {
+    return this._data;
+  }
+
+  async render () {
+    return '';
+  }
+}
+
+export { Renderable };

package/src/integration/bundler.js

@@ -0,0 +1,47 @@
+import { ROLLER_MODULE, BANNER } from '../constants.js';
+import { copyDir, getPackagePath, log } from '@gouvfr/dsfr-forge';
+import { ScriptCompiler, StyleCompiler } from '@gouvfr/dsfr-alchemist'
+import path from 'path'
+import fs from 'fs'
+
+class Bundler {
+  constructor (dest) {
+    this._dest = dest;
+  }
+
+  async copy () {
+    await copyDir(`${ROLLER_MODULE}/static`, `${this._dest}/static`);
+  }
+
+  async compile () {
+    await this._compileScripts();
+    await this._compileStyles();
+  }
+
+  async _compileScripts () {
+    const scriptCompiler = new ScriptCompiler();
+    const entries = fs.readdirSync(`${ROLLER_MODULE}/src/script`, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+      const index = `${ROLLER_MODULE}/src/script/${entry.name}/index.js`;
+      if (!fs.existsSync(index)) continue;
+      await scriptCompiler.compile(index, `${this._dest}/lib`, `dsfr-doc-${entry.name}`, {
+        minify: true, sourceMap: true, banner: BANNER
+      });
+    }
+  }
+
+  async _compileStyles () {
+    const modulesPath = path.resolve(getPackagePath('@gouvfr/dsfr-publisher'), '../../') + '/';
+    const styleCompiler = new StyleCompiler();
+    const entries = fs.readdirSync(`${ROLLER_MODULE}/src/style`, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+      const index = `${ROLLER_MODULE}/src/style/${entry.name}/index.scss`;
+      if (!fs.existsSync(index)) continue;
+      await styleCompiler.compile(index, `${this._dest}/lib`, `dsfr-doc-${entry.name}`, { minify: true, sourceMap: true, banner: BANNER, loadPaths: [modulesPath] });
+    }
+  }
+}
+
+export { Bundler };

package/src/integration/indexing/indexer.js

@@ -0,0 +1,23 @@
+import { Sitemap } from './sitemap.js';
+import { createFile } from '@gouvfr/dsfr-forge';
+import { DOMAIN } from '../../constants.js';
+
+class Indexer {
+  constructor (urlSet, dest) {
+    this._urlSet = urlSet;
+    this._dest = dest;
+  }
+
+  async write () {
+    const sitemap = new Sitemap(this._urlSet);
+    await sitemap.generate();
+
+    createFile( `${this._dest}/sitemap.txt`, sitemap.text);
+    createFile( `${this._dest}/sitemap.xml`, sitemap.xml);
+
+    const robots = `Sitemap: ${DOMAIN}/sitemap.xml`;
+    createFile( `${this._dest}/robots.txt`, robots);
+  }
+}
+
+export { Indexer };

package/src/integration/indexing/sitemap.js

@@ -0,0 +1,44 @@
+import { DOMAIN } from '../../constants.js';
+import { formatHtml } from '../../core/format-html.js';
+
+class Sitemap {
+  constructor (urlSet) {
+    this._urlSet = urlSet;
+  }
+
+  async generate () {
+    let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">\n';
+    let text = '';
+
+    for (const url of this._urlSet) {
+      xml += '<url>\n';
+      if (url.hasOwnProperty('loc')) {
+        xml += `<loc>${DOMAIN}${url.loc}</loc>\n`;
+
+
+        if (Array.isArray(url.alts)) {
+          xml += url.alts.map(alt => `<xhtml:link rel="alternate" hreflang="${alt.lang}" href="${DOMAIN}${alt.url}"/>\n`).join('');
+          text += url.alts.map(alt => `${DOMAIN}${alt.url}\n`).join('\n');
+        }
+        else {
+          text += `${DOMAIN}${url.loc}\n`;
+        }
+      }
+      xml += '</url>\n';
+    }
+    xml += '</urlset>';
+
+    this._xml = await formatHtml(xml, 'sitemap');
+    this._text = text;
+  }
+
+  get text () {
+    return this._text;
+  }
+
+  get xml () {
+    return this._xml;
+  }
+}
+
+export { Sitemap };

package/src/integration/redirect/redirection-type.js

@@ -0,0 +1,4 @@
+export const RedirectionType = {
+  META: 'meta',
+  SCRIPT: 'script'
+};

package/src/integration/redirect/redirection.js

@@ -0,0 +1,77 @@
+import { HtmlRenderable } from '../../core/html-renderable.js';
+import { RedirectionType } from './redirection-type.js'
+
+class Redirection extends HtmlRenderable {
+  constructor (data) {
+    super(data);
+    this._dest = data.dest;
+  }
+
+  get dest () {
+    return this._dest;
+  }
+
+  get meta () {
+    return `
+        <meta http-equiv="refresh" content="0; url=${this.data.url}">
+`;
+  }
+
+  get script () {
+    return `
+        <script>
+          const locales = ${JSON.stringify(this.data.locales)};
+          const urls = new Map(${JSON.stringify(Object.entries(this.data.urls))});
+          const language = navigator.language;
+          const code = language.split('-')[0];
+
+          switch (true) {
+            case locales.includes(language):
+              window.location.href = urls.get(language);
+              break;
+
+            case locales.includes(code):
+              window.location.href = urls.get(code);
+              break;
+
+            case locales.some(locale => locale.startsWith(code)):
+              const locale = locales.find(locale => locale.startsWith(code));
+              window.location.href = urls.get(locale);
+              break;
+
+            default:
+              window.location.href = '${this.data.url}';
+              break;
+          }
+        </script>
+`;
+  }
+
+  get redirection () {
+    switch (this.data.type) {
+      case RedirectionType.META:
+        return this.meta;
+      case RedirectionType.SCRIPT:
+        return this.script;
+      default:
+        return '';
+    }
+  }
+
+  async render () {
+    return this.format(`
+<html lang="${this.data.code}">
+    <head>
+        <meta charset="UTF-8">
+        <title>${this.data.title}</title>
+        ${this.redirection}
+    </head>
+    <body>
+        <p>${this.data.text}</p>
+    </body>
+</html>
+`);
+  }
+}
+
+export { Redirection };

package/src/node/custom/html-container-node.js

@@ -0,0 +1,7 @@
+import { Node } from '../node.js';
+
+class HtmlContainerNode extends Node {}
+
+HtmlContainerNode.TYPE = 'htmlContainer';
+
+export { HtmlContainerNode };

package/src/node/directive/doc/accordion-container-directive.js

@@ -0,0 +1,59 @@
+import { Node } from '../../node.js'
+import { log } from '@gouvfr/dsfr-forge';
+
+class AccordionContainerDirective extends Node {
+  structure (data) {
+    if (!data.attributes.id) {
+      log.warn('AccordionContainerDirective: missing "accordion id"');
+      return data;
+    }
+
+    const accordionId = data.attributes.id;
+    const titleChildren = data.children.filter(child => child?.data?.directiveLabel)?.[0]?.children;
+    const contentChildren = data.children.filter(child => !child?.data?.directiveLabel);
+    const titleType = titleChildren[0].value.startsWith('#') ? 'heading' : 'paragraph';
+    const titleDepth = /^(#+)/.exec(titleChildren[0].value)?.[1]?.length;
+    if (titleType === 'heading') {
+      titleChildren[0].value = titleChildren[0].value.replace(/^(#+)\s*/, '');
+    }
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-accordion'],
+      children: [
+        {
+          type: titleType,
+          depth: titleDepth,
+          classes: ['fr-accordion__title'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'button',
+              classes: ['fr-accordion__btn'],
+              attributes: {
+                type: 'button',
+                'aria-expanded': data.attributes['aria-expanded'] || false,
+                'aria-controls': accordionId
+              },
+              children: titleChildren
+            }
+          ]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          attributes: {
+            id: accordionId
+          },
+          classes: ['fr-collapse'],
+          children: contentChildren
+        }
+      ]
+    });
+  }
+}
+
+AccordionContainerDirective.NAME = 'fr-accordion';
+
+export { AccordionContainerDirective };

package/src/node/directive/doc/accordions-group-container-directive.js

@@ -0,0 +1,12 @@
+import { Node } from '../../node.js'
+
+class AccordionsGroupContainerDirective extends Node {
+  constructor (data) {
+    super(data, 'div');
+    this.attributes.addClass('fr-accordions-group');
+  }
+}
+
+AccordionsGroupContainerDirective.NAME = 'fr-accordions-group';
+
+export { AccordionsGroupContainerDirective };

package/src/node/directive/doc/anatomy-container-directive.js

@@ -0,0 +1,61 @@
+import { Node } from '../../node.js'
+import { log } from '@gouvfr/dsfr-forge';
+
+class AnatomyContainerDirective extends Node {
+  structure (data) {
+    const image = Node.getImageChild(data);
+    const col = data.attributes?.col ?? 12;
+
+    if (!image) {
+      log.warn('GuidelineContainerDirective: missing image');
+      return data;
+    }
+
+    const contentChildren = data.children.filter(child => !Node.getImageChild(child));
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-grid-row', 'fr-grid-row--gutters'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-col-12', `fr-col-sm-${col}`],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-anatomy'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-anatomy__image'],
+                  children: [
+                    {
+                      ...image,
+                      classes: ['fr-responsive-img']
+                    }
+                  ]
+                },
+                {
+                  type: 'htmlContainer',
+                  tagName: 'ol',
+                  classes: ['dsfr-doc-anatomy__content'],
+                  children: contentChildren
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+
+  }
+
+}
+
+AnatomyContainerDirective.NAME = 'dsfr-doc-anatomy';
+
+export { AnatomyContainerDirective };

package/src/node/directive/doc/button-leaf-directive.js

@@ -0,0 +1,37 @@
+import { Node } from '../../node.js';
+import { Button } from '../../../component/components/button.js';
+
+class ButtonLeafDirective extends Node {
+  constructor (data) {
+    super(data);
+    this.button = new Button(this.data.attributes);
+  }
+
+  structure (data) {
+    if (!data.children.some(child => child.type === 'link')) {
+      return super.structure(data);
+    }
+
+    const link = data.children.find(child => child.type === 'link');
+    const children = data.children.slice();
+    children.splice(data.children.indexOf(link), 1, ...link.children);
+
+    return super.structure({
+      ...data,
+      attributes: {
+        ...data.attributes,
+        url: link.url
+      },
+      children: children
+    });
+  }
+
+  async render () {
+    const data = { label: await this.renderChildren() };
+    return this.button.render(data);
+  }
+}
+
+ButtonLeafDirective.NAME = 'fr-button';
+
+export { ButtonLeafDirective };