@gouvfr/dsfr-roller 1.0.0

package/src/node/node.js

@@ -0,0 +1,106 @@
+import { Renderable } from '../core/renderable.js';
+import { nodeFactory } from './node-factory.js';
+import { log, normalize, TagAttributes } from '@gouvfr/dsfr-forge';
+class Node extends Renderable {
+  constructor (data, tagName = null, isSelfClosing = false, hasNormalizedId = false) {
+    super(data);
+    this._tagName = tagName || this.data.tagName;
+    this._isSelfClosing = isSelfClosing;
+    this._hasNormalizedId = hasNormalizedId;
+    this._type = this.data.type;
+    this._children = Array.isArray(this.data.children) ? this.data.children.map(childData => nodeFactory.create(childData)) : [];
+    if (typeof this.data?.attributes === 'object' && Object.keys(this.data.attributes).length > 0) {
+      Object.entries(this.data.attributes).forEach(([key, value]) => {
+        this.attributes.setAttribute(key, value);
+      });
+    }
+    if (typeof this.data?.classes === 'object' && Array.isArray(this.data.classes)) {
+      this.attributes.setClasses(this.data.classes);
+    }
+  }
+
+  get children () {
+    return this._children;
+  }
+
+  get type () {
+    return this._type;
+  }
+
+  set tagName (value) {
+    this._tagName = value;
+  }
+
+  get tagName () {
+    return this._tagName;
+  }
+
+  get isSelfClosing () {
+    return this._isSelfClosing;
+  }
+
+  get hasNormalizedId () {
+    return this._hasNormalizedId;
+  }
+
+  get attributes () {
+    if (!this._attributes) {
+      this._attributes = new TagAttributes();
+    }
+    return this._attributes;
+  }
+
+  renderAttributes () {
+    return this._attributes ? this._attributes.render() : '';
+  }
+
+  getAttributes () {
+    return this._attributes ? this._attributes.getAttributes() : {};
+  }
+
+  findDescendantsByType (type) {
+    const descendants = [];
+    for (const child of this._children) {
+      if (child.type === type) descendants.push(child);
+      descendants.push(...child.findDescendantsByType(type));
+    }
+    return descendants;
+  }
+
+  async renderChildren () {
+    let html = '';
+    for (const child of this._children) {
+      html += await child.render();
+    }
+    return html;
+  }
+
+  async render () {
+    const html = await this.renderChildren();
+
+    if (!this.tagName) return html;
+
+    if (this.hasNormalizedId) {
+      this.attributes.setAttribute('id', normalize(this.text));
+    }
+
+    return this.isSelfClosing ? `<${this.tagName}${this.renderAttributes()}/>` : `<${this.tagName}${this.renderAttributes()}>${html}</${this.tagName}>`;
+  }
+
+  get text () {
+    return this._children.map(child => child.text).join(' ');
+  }
+
+  static getImageChild (data) {
+    if (data.type === 'image') return data;
+    if (data.children) {
+      for (const child of data.children) {
+        const image = Node.getImageChild(child);
+        if (image) return image;
+      }
+    }
+    return null;
+  }
+}
+
+export { Node };

package/src/page/body/custom-header.js

@@ -0,0 +1,40 @@
+import { Renderable } from '../../core/renderable.js';
+import { Translate } from '../../component/components/translate.js';
+import { Version } from '../../component/components/version.js';
+import { Header } from '../../component/components/header.js';
+import { Navigation } from '../../component/components/navigation.js';
+
+class CustomHeader extends Renderable {
+  constructor (data) {
+    super(data);
+    if (data.translate) this._translate = new Translate(data.translate);
+    this._version = new Version(data.version);
+    this._header = new Header(data.resource.header);
+    this._navigation = new Navigation(data.resource.navigation.main);
+  }
+  async render () {
+    let toolsContent = await this._version.render({ id: 'version', collapseId: 'version-collapse' });
+    if (this._translate) toolsContent += await this._translate.render({ id: 'translate', collapseId: 'translate-collapse' });
+
+    let menuContent = await this._version.render({ id: 'version-menu', collapseId: 'version-collapse-menu' });
+    if (this._translate) menuContent += await this._translate.render({ id: 'translate-menu', collapseId: 'translate-collapse-menu' });
+
+    const navigation = await this._navigation.format();
+
+    return await this._header.render({
+      body: {
+        tools: {
+          toolsContent: toolsContent
+        }
+      },
+      menu: {
+        tools: {
+          toolsContent: menuContent
+        },
+        navigation: navigation
+      }
+    });
+  }
+}
+
+export { CustomHeader };

package/src/page/body/main.js

@@ -0,0 +1,23 @@
+import { templateFactory } from '../../template/template-factory.js';
+import { Renderable } from '../../core/renderable.js';
+
+class Main extends Renderable {
+  constructor (data) {
+    super(data);
+    this._template = templateFactory(this.data);
+  }
+
+  async render () {
+    return `
+      <main id="content" role="main">
+        ${await this._template.render()}
+      </main>
+    `;
+  }
+
+  get text () {
+    return this._template.text;
+  }
+}
+
+export { Main };

package/src/page/body/scheme.js

@@ -0,0 +1,9 @@
+import { Renderable } from '../../core/renderable.js';
+
+class Scheme extends Renderable {
+  async render () {
+    return '<script type="module">const e="system",t="dark",c="dark",o="data-fr-theme",a="data-fr-scheme",r=`:root[${o}], :root[${a}]`,m=()=>{document.documentElement.setAttribute(o,c),document.documentElement.style.colorScheme="dark"},n=()=>{window.matchMedia("(prefers-color-scheme: dark)").matches&&m()};(()=>{if(document.documentElement.matches(r)){const c=(()=>{try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}})()?localStorage.getItem("scheme"):"",o=document.documentElement.getAttribute(a);switch(!0){case c===t:m();break;case c===e:n();break;case o===t:m();break;case o===e:n()}}})();</script>';
+  }
+}
+
+export { Scheme };

package/src/page/head/canonical.js

@@ -0,0 +1,16 @@
+import { DOMAIN } from '../../constants.js'
+import { Renderable } from '../../core/renderable.js';
+
+class Canonical extends Renderable {
+  async render () {
+    const links = [`<link rel="canonical" href="${DOMAIN}${this.data.url}">`];
+
+    for (const alt of this.data.alts) {
+      links.push(`<link rel="alternate" href="${DOMAIN}${alt.url}" hreflang="${alt.lang}">`);
+    }
+
+    return links.join('\n');
+  }
+}
+
+export { Canonical };

package/src/page/head/favicon.js

@@ -0,0 +1,14 @@
+import { Renderable } from '../../core/renderable.js';
+
+class Favicon extends Renderable {
+  async render () {
+    return `
+      <meta name="theme-color" content="#000091">
+      <link rel="apple-touch-icon" href="/dist/favicon/apple-touch-icon.png">
+      <link rel="icon" href="/dist/favicon/favicon.svg" type="image/svg+xml">
+      <link rel="shortcut icon" href="/dist/favicon/favicon.ico" type="image/x-icon">
+      <link rel="manifest" href="/dist/favicon/manifest.webmanifest" crossorigin="use-credentials">`
+  }
+}
+
+export { Favicon };

package/src/page/head/head.js

@@ -0,0 +1,35 @@
+import { Title } from './title.js';
+import { Canonical } from './canonical.js';
+import { Stylesheets } from './stylesheets.js';
+import { Renderable } from '../../core/renderable.js';
+import { Favicon } from './favicon.js';
+import { Share } from './share.js';
+
+class Head extends Renderable {
+
+  constructor (data) {
+    super(data);
+    this._title = new Title(data);
+    this._canonical = new Canonical(data);
+    this._favicon = new Favicon(data);
+    this._share = new Share(data);
+    this._stylesheets = new Stylesheets(data);
+  }
+
+  async render () {
+    return `
+      <head>
+        ${await this._title.render()}
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
+        ${await this._canonical.render()}
+        ${await this._favicon.render()}
+        ${await this._share.render()}
+        ${await this._stylesheets.render()}
+      </head>
+    `;
+  }
+}
+
+export { Head };

package/src/page/head/share.js

@@ -0,0 +1,14 @@
+import { Renderable } from '../../core/renderable.js';
+
+class Share extends Renderable {
+  constructor (data) {
+    super(data);
+  }
+
+  async render () {
+    // facebook, twitter, linkedin, bluesky
+    return '<!-- Share -->';
+  }
+}
+
+export { Share };

package/src/page/head/stylesheets.js

@@ -0,0 +1,48 @@
+import { Renderable } from '../../core/renderable.js';
+import { TagAttributes } from '@gouvfr/dsfr-forge'
+
+const DIST_FILES = [
+  'dsfr',
+  'utility/utility',
+];
+
+const DEFAULT_LIB_FILES = [
+  'dsfr-doc-main',
+];
+
+const STYLES_MAP = new Map([
+  ['search', 'dsfr-doc-search']
+]);
+
+class Stylesheets extends Renderable {
+  constructor (data) {
+    super(data);
+    this._stylesheets = [
+      ...DIST_FILES.map(filename => new Stylesheet({ href: `/dist/${filename}.min.css` })),
+      ...DEFAULT_LIB_FILES.map(filename => new Stylesheet({ href: `/lib/${filename}.min.css` }))
+    ];
+    if (Array.isArray(this.data.styles) && this.data.styles.length > 0) {
+      this._stylesheets.push(...this.data.styles.map(style => new Stylesheet({ href: `/lib/${STYLES_MAP.get(style)}.min.css` })));
+    }
+  }
+  async render () {
+    const stylesheets = await Promise.all(this._stylesheets.map(async stylesheet => await stylesheet.render()));
+    return stylesheets.join('\n');
+  }
+}
+
+class Stylesheet extends Renderable {
+  constructor (data) {
+    super(data);
+    this._attributes = new TagAttributes();
+    this._attributes.setAttribute('rel', 'stylesheet');
+    this._attributes.setAttribute('href', this.data.href);
+    if (this.data.integrity) this._attributes.setAttribute('integrity', this.data.integrity);
+    if (this.data.crossorigin) this._attributes.setAttribute('crossorigin', this.data.crossorigin);
+  }
+  async render () {
+    return `<link${this._attributes.render()}>`;
+  }
+}
+
+export { Stylesheets };

package/src/page/head/title.js

@@ -0,0 +1,9 @@
+import { Renderable } from '../../core/renderable.js';
+
+class Title extends Renderable {
+  async render () {
+    return `<title>${this.data.title}</title>`;
+  }
+}
+
+export { Title };

package/src/page/html.js

@@ -0,0 +1,46 @@
+import { Head } from './head/head.js';
+import { Footer } from '../component/components/footer.js';
+import { DisplayModal } from '../component/components/display-modal.js';
+import { Skiplink } from '../component/components/skiplink.js';
+import { CustomHeader } from './body/custom-header.js';
+import { Scheme } from './body/scheme.js';
+import { Main } from './body/main.js';
+import { Scripts } from './scripts/scripts.js';
+import { HtmlRenderable } from '../core/html-renderable.js';
+
+class Html extends HtmlRenderable {
+  constructor(data) {
+    super(data);
+
+    this._head = new Head(data);
+    this._scheme = new Scheme(data);
+    this._skiplink = new Skiplink(data);
+    this._header = new CustomHeader(data);
+    this._main = new Main(data);
+    this._footer = new Footer(data.resource.footer);
+    this._displayModal = new DisplayModal(data);
+    this._scripts = new Scripts(data);
+  }
+
+  async render () {
+    return this.format(`<!doctype html>
+      <html lang="${this.data.lang}" data-fr-theme>
+        ${await this._head.render()}
+        <body>
+          ${await this._scheme.render()}
+          ${await this._skiplink.render()}
+          ${await this._header.render()}
+          ${await this._main.render()}
+          ${await this._footer.render()}
+          ${await this._displayModal.render()}
+          ${await this._scripts.render()}
+        </body>
+      </html>`);
+  }
+
+  get text () {
+    return this._main.text;
+  }
+}
+
+export { Html };

package/src/page/page.js

@@ -0,0 +1,39 @@
+import fs from 'fs';
+import yaml from 'yaml';
+import { Html } from './html.js';
+import { log } from '@gouvfr/dsfr-forge';
+import { Renderable } from '../core/renderable.js'
+
+class Page extends Renderable {
+  constructor (src) {
+    const dataFile = fs.readFileSync(src, 'utf8');
+    const data = yaml.parse(dataFile);
+    super(data);
+    this._src = src;
+    this._dest = `${this.data.url}/index.html`;
+    this._html = new Html(this.data);
+  }
+
+  async render () {
+    log.info(`Rendering page ${this._src}`);
+    return this._html.render();
+  }
+
+  get document () {
+    return {
+      url: this.data.url,
+      title: this.data.title,
+      keywords: this.data.keywords,
+      summary: this.data.summary,
+      excerpt: this.data.excerpt,
+      boost: this.data.boost,
+      text: this._html.text
+    }
+  }
+
+  get dest () {
+    return this._dest;
+  }
+}
+
+export { Page };

package/src/page/scripts/highlight.js

@@ -0,0 +1,53 @@
+export const HIGHLIGHT_SCRIPTS = [
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js',
+    integrity: 'sha512-6yoqbrcLAHDWAdQmiRlHG4+m0g/CT/V9AGyxabG8j7Jk8j3r3K6due7oqpiRMZqcYe9WM2gPcaNNxnl2ux+3tA==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/javascript.min.js',
+    integrity: 'sha512-XrpvbK+zc0wErJG1VptH0H4w4zyiniHOBR35DJ1VISA+cqYxhksvqFwZk0M8lX9ylaIjTXoMYolOPb93zdrGpg==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/xml.min.js',
+    integrity: 'sha512-dG+W2e5Wf51XUF9HqsX31z5+nTTuxe8wpOEC3/1gCJImJusP1FZS1PHxiH3NjBUQJ6oDpVRKKXH7+aCVd+wkDA==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/scss.min.js',
+    integrity: 'sha512-fhGqLFbE7MvF94wQ72OFn5VsWhqnvxciu8Zq2omUg641h1LxrluzrmGBXEF0Bhlev3p5Am9kpLfunqGw5JaRtA==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/css.min.js',
+    integrity: 'sha512-fpDUuCO8gpUPZ7TzS3mjJsopogeCbFf94kXHQNzOdEQXksHWOiOHaynatkhBRQraX1GMVtLlU5Z/8NWuK8TLLw==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/bash.min.js',
+    integrity: 'sha512-4ea7XTSjSgnYA2UCmeriRmmIfJ5iXR562Y8faBB+y3BKcwftFMofy6ff0wX4A4UmR155PlFghb5np+WrAVIoaw==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/json.min.js',
+    integrity: 'sha512-hWf27MxSv3ZoSOnIh0STq7QrN5YWaGxD53WCPl8GS7WboKLvz+x/FK6431QNwZ6vz6tigXSw1D1z9gz1WwoObg==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/yaml.min.js',
+    integrity: 'sha512-10TmDDlpvsCOKvlpApa381uvcDbBL4WeJw0txuN8c786A6kMyS/Ts93o4XbtDtBnzXzdqtTbBb1xiDW5YP3x9w==',
+    crossorigin: 'anonymous',
+    referrerpolicy: 'no-referrer'
+  },
+  {
+    innerScript: 'hljs.highlightAll();'
+  }
+];

package/src/page/scripts/scripts.js

@@ -0,0 +1,57 @@
+import { Renderable } from '../../core/renderable.js';
+import { TagAttributes } from '@gouvfr/dsfr-forge';
+import { HIGHLIGHT_SCRIPTS } from './highlight.js'
+
+const DIST_FILES = [
+  'dsfr',
+];
+
+const DEFAULT_LIB_FILES = [
+  'dsfr-doc-main',
+];
+
+const SCRIPTS_MAP = new Map([
+  ['search', 'dsfr-doc-search']
+]);
+
+class Scripts extends Renderable {
+  constructor (data) {
+    super(data);
+    this._innerScript = this.data.innerScript ?? '';
+    this._scripts = [
+      ...DIST_FILES.map(filename => new Script({ src: `/dist/${filename}.module.min.js`, type: 'module' })),
+      ...DEFAULT_LIB_FILES.map(filename => new Script({ src: `/lib/${filename}.min.js`, type: 'module' })),
+    ];
+
+    if (Array.isArray(this.data.scripts) && this.data.scripts.length > 0) {
+      this._scripts.push(...this.data.scripts.map(script => new Script({ src: `/lib/${SCRIPTS_MAP.get(script)}.min.js`, type: 'module' })));
+    }
+
+    this._scripts.push(...HIGHLIGHT_SCRIPTS.map(data => new Script(data)));
+  }
+
+  async render () {
+    const scripts = await Promise.all(this._scripts.map(async script => await script.render()));
+    return scripts.join('\n');
+  }
+}
+
+class Script extends Renderable {
+  constructor (data) {
+    super(data)
+    this._innerScript = this.data.innerScript ?? '';
+    this._attributes = new TagAttributes();
+    if (this.data.type) this._attributes.setAttribute('type', this.data.type);
+    if (this.data.src) this._attributes.setAttribute('src', this.data.src);
+    if (this.data.integrity) this._attributes.setAttribute('integrity', this.data.integrity);
+    if (this.data.crossorigin) this._attributes.setAttribute('crossorigin', this.data.crossorigin);
+    if (this.data.referrerPolicy) this._attributes.setAttribute('referrerpolicy', this.data.referrerPolicy);
+    if (this.data.defer) this._attributes.setAttribute('defer', '');
+    if (this.data.async) this._attributes.setAttribute('async', '');
+  }
+  async render () {
+    return `<script${this._attributes.render()}>${this._innerScript}</script>`;
+  }
+}
+
+export { Scripts };

package/src/script/main/core/element.js

@@ -0,0 +1,29 @@
+class Element {
+  constructor (element) {
+    this._element = element;
+    this.init();
+  }
+
+  get element () {
+    return this._element;
+  }
+
+  init () {}
+
+  observeResize (target) {
+    this._observer = new ResizeObserver(this.resize.bind(this));
+    this._observer.observe(target);
+  }
+
+  resize () {}
+
+  listenClick (target) {
+    target.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick () {}
+}
+
+const instantiateElements = (selector, ElementClass) => [...document.querySelectorAll(selector)].map(element => new ElementClass(element));
+
+export { Element, instantiateElements };

package/src/script/main/elements/copy-snippet.js

@@ -0,0 +1,35 @@
+import { Element } from '../core/element.js'
+
+class CopySnippet extends Element {
+  get button () {
+    return this.element;
+  }
+  init() {
+    this._copyLabel = this.button.innerText;
+    this._copiedLabel = this.button.getAttribute('data-label-copied');
+    this._code = this.button.previousElementSibling.innerText;
+    this.listenClick(this.button);
+  }
+
+  get isCopied () {
+    return this._isCopied;
+  }
+
+  set isCopied (value) {
+    this._isCopied = value;
+    this.button.innerText = value ? this._copiedLabel : this._copyLabel;
+    this.button.disabled = value;
+  }
+
+  handleClick () {
+    navigator.clipboard.writeText(this._code);
+    this.isCopied = true;
+    setTimeout(this._handleTimeout.bind(this), 1500);
+  }
+
+  _handleTimeout () {
+    this.isCopied = false;
+  }
+}
+
+export default CopySnippet;

package/src/script/main/elements/searchbar.js

@@ -0,0 +1,18 @@
+import { Element } from '../core/element.js'
+
+class Searchbar extends Element {
+  init () {
+    this._input = this.element.querySelector('#search-input');
+    this._button = this.element.querySelector('#search-button');
+    this.listenClick(this._button);
+  }
+
+  handleClick () {
+    const query = this._input.value;
+    const href = this._button.getAttribute('data-href');
+    document.location.href = `${href}?query=${query}`;
+  }
+
+}
+
+export { Searchbar };

package/src/script/main/elements/storybook.js

@@ -0,0 +1,20 @@
+import { Element } from '../core/element.js'
+
+class Storybook extends Element {
+  get iframe () {
+    return this.element;
+  }
+
+  init() {
+    this._iframeDoc = this.iframe.contentDocument;
+    if (!this._iframeDoc) return;
+    this.observeResize(this._iframeDoc.body);
+  }
+
+  resize () {
+    const height = this._iframeDoc.body?.scrollHeight ?? this._iframeDoc.documentElement?.scrollHeight;
+    this.iframe.style.height = isNaN(height) || !height ? '100%' : height + 'px';
+  }
+}
+
+export default Storybook;

package/src/script/main/index.js

@@ -0,0 +1,10 @@
+import { instantiateElements } from './core/element.js'
+import CopySnippet from './elements/copy-snippet.js';
+import Storybook from './elements/storybook.js';
+import { Searchbar } from './elements/searchbar.js'
+
+window.onload = () => {
+  instantiateElements('.code-snippet--copy', CopySnippet);
+  instantiateElements('.storybook-leaf iframe', Storybook);
+  instantiateElements('#search', Searchbar);
+};