@gouvfr/dsfr-roller 1.0.28 → 1.0.29

package/package.json

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

package/src/page/head/head.js

@@ -5,8 +5,6 @@ import { Renderable } from '../../core/renderable.js';
 import { Favicon } from './favicon.js';
 import { Resource } from './resource.js';
 import { Share } from './share.js';
-import { AnalyticsConfig } from './analytics-config.js';
-
 class Head extends Renderable {
 
   constructor (data) {
@@ -17,7 +15,6 @@ class Head extends Renderable {
     this._resource = new Resource(data);
     this._share = new Share(data);
     this._stylesheets = new Stylesheets(data);
-    this._analyticsConfig = new AnalyticsConfig(data);
   }
 
   async render () {
@@ -32,7 +29,6 @@ class Head extends Renderable {
         ${await this._share.render()}
         ${await this._stylesheets.render()}
         ${await this._resource.render()}
-        ${await this._analyticsConfig.render()}
       </head>
     `;
   }

package/src/page/html.js

@@ -6,6 +6,7 @@ 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 { AnalyticsConfig } from './scripts/analytics-config.js';
 import { HtmlRenderable } from '../core/html-renderable.js';
 
 class Html extends HtmlRenderable {
@@ -20,6 +21,7 @@ class Html extends HtmlRenderable {
     this._footer = new Footer(data.resource.footer);
     this._displayModal = new DisplayModal(data);
     this._scripts = new Scripts(data);
+    this._analyticsConfig = new AnalyticsConfig(data);
   }
 
   async render () {
@@ -33,6 +35,7 @@ class Html extends HtmlRenderable {
           ${await this._main.render()}
           ${await this._footer.render()}
           ${await this._displayModal.render()}
+          ${await this._analyticsConfig.render()}
           ${await this._scripts.render()}
         </body>
       </html>`);

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

@@ -12,22 +12,17 @@ class Storybook extends Element {
   }
 
   handleMessage(event) {
-    const eventType = JSON.parse(event.data)?.event?.type;
-    if (!eventType) return;
-
-    if (eventType === 'storyRendered') {
-      this._iframeDoc = this.iframe.contentDocument;
-      if (!this._iframeDoc) return;
-      this.resize();
+    if (event.data?.type === 'storybook-height-change') {
+      this.setIframeHeight(event.data.height);
     }
   }
 
-  resize() {
-    const height =
-      this._iframeDoc.body?.scrollHeight ??
-      this._iframeDoc.documentElement?.scrollHeight;
-    this.iframe.style.height =
-      isNaN(height) || !height ? '100%' : height + 'px';
+  setIframeHeight(height) {
+    if (isNaN(height) || !height) {
+      this.iframe.style.height = '100%';
+    } else {
+      this.iframe.style.height = height + 'px';
+    }
   }
 
   setIframeTheme() {

package/src/style/main/components/_dsfr-doc-storybook.scss

@@ -0,0 +1,5 @@
+.dsfr-doc-storybook-leaf {
+  iframe {
+    border: 1px solid var(--border-default-grey);
+  }
+}

package/src/style/main/components/_index.scss

@@ -7,3 +7,4 @@
 @use 'dsfr-doc-searchbar';
 @use 'dsfr-doc-pagination';
 @use 'dsfr-doc-edit';
+@use 'dsfr-doc-storybook';

package/src/style/main/utility/_global.scss

@@ -2,7 +2,7 @@
   --block-spacing: 1.5rem;
 }
 
-.fr-container {
+#content-editorial {
   img {
     max-width: 100%;
     height: auto;

package/src/template/template-factory.js

@@ -1,11 +1,13 @@
 import { HomeTemplate } from './templates/home-template.js';
 import { EditorialTemplate } from './templates/editorial-template.js';
 import { SearchTemplate } from './templates/search-template.js'
+import { ErrorTemplate } from './templates/error-template.js'
 
 const TEMPLATES = [
   EditorialTemplate,
   HomeTemplate,
-  SearchTemplate
+  SearchTemplate,
+  ErrorTemplate
 ];
 
 const templatesMap = new Map(TEMPLATES.map((Template) => [Template.NAME, Template]));

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

@@ -9,7 +9,7 @@ class EditorialTemplate extends Template {
     super(data);
 
     this._hasSidemenu = data?.resource?.navigation?.sidemenu !== undefined;
-    
+
     this._hasEditUrl = data?.editUrl !== undefined;
 
     if (this._hasSidemenu) this._sidemenu = new Sidemenu(data.resource.navigation.sidemenu, data.resource.badge);
@@ -32,7 +32,7 @@ class EditorialTemplate extends Template {
     }
 
     cols.push(`
-                <div class="fr-col-12 fr-col-md-8">
+                <div class="fr-col-12 fr-col-md-8" id="content-editorial">
                     ${await this._breadcrumb.render()}
                     ${await this._toc.render()}
                     ${await super.render()}

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

@@ -0,0 +1,33 @@
+import { Template } from '../template.js';
+
+class ErrorTemplate extends Template {
+  constructor (data) {
+    super(data);
+  }
+
+  async render () {
+    return `
+      <div class="fr-container">
+        <div class="fr-my-14v fr-mt-md-24v fr-mb-md-20v fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-grid-row--center">
+          <div class="fr-py-0 fr-col-12 fr-col-md-6">
+            ${await super.render()}
+          </div>
+          <div class="fr-col-12 fr-col-md-3 fr-col-offset-md-1 fr-px-6w fr-px-md-0 fr-py-0">
+            <svg xmlns="http://www.w3.org/2000/svg" class="fr-responsive-img fr-artwork" aria-hidden="true" width="160" height="200" viewBox="0 0 160 200">
+              <use class="fr-artwork-motif" href="/dist/artwork/background/ovoid.svg#artwork-motif"></use>
+              <use class="fr-artwork-background" href="/dist/artwork/background/ovoid.svg#artwork-background"></use>
+              <g transform="translate(40, 60)">
+                <use class="fr-artwork-decorative" href="/dist/artwork/pictograms/system/technical-error.svg#artwork-decorative"></use>
+                <use class="fr-artwork-minor" href="/dist/artwork/pictograms/system/technical-error.svg#artwork-minor"></use>
+                <use class="fr-artwork-major" href="/dist/artwork/pictograms/system/technical-error.svg#artwork-major"></use>
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>`;
+  }
+}
+
+ErrorTemplate.NAME = 'error';
+
+export { ErrorTemplate };