web-documentation 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-documentation",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Declarative multilanguage documentation website generator",
   "keywords": [
     "documentation",
@@ -50,7 +50,7 @@
     "watch": "weboptimizer build --watch"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "^3.1036.0",
+    "@aws-sdk/client-s3": "^3.1043.0",
     "@babel/eslint-parser": "^7.28.6",
     "@babel/runtime": "^7.29.2",
     "@eslint/js": "^10.0.1",
@@ -63,16 +63,16 @@
     "@types/node": "^25.6.0",
     "@types/unzipper": "^0.10.11",
     "@types/webpack-env": "^1.18.8",
-    "@typescript-eslint/eslint-plugin": "^8.59.0",
-    "@typescript-eslint/parser": "^8.59.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "archiver": "^7.0.1",
-    "clientnode": "^4.0.1389",
+    "clientnode": "^4.0.1394",
     "css-loader": "^7.1.4",
-    "cssnano": "^7.1.7",
+    "cssnano": "^8.0.0",
     "default-gateway": "^7.2.2",
     "errorreporter": "^1.0.339",
-    "eslint": "^10.2.1",
+    "eslint": "^10.3.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-jsdoc": "^62.9.0",
     "favicons": "^7.2.0",
@@ -81,12 +81,12 @@
     "jest": "^30.3.0",
     "jsdoc": "^4.0.5",
     "legal-notes": "^1.0.29",
-    "marked": "^18.0.2",
+    "marked": "^18.0.3",
     "marked-gfm-heading-id": "^4.1.4",
     "marked-highlight": "^2.2.4",
     "marked-xhtml": "^1.0.15",
     "mini-css-extract-plugin": "^2.10.2",
-    "postcss": "^8.5.10",
+    "postcss": "^8.5.14",
     "postcss-fontpath": "^1.0.0",
     "postcss-import": "^16.1.1",
     "postcss-loader": "^8.2.1",
@@ -98,16 +98,16 @@
     "postcss-url": "^10.1.3",
     "prop-types": "^15.8.1",
     "style-loader": "^4.0.0",
-    "stylelint": "^17.9.0",
+    "stylelint": "^17.11.0",
     "stylelint-config-standard": "^40.0.0",
-    "typescript-eslint": "^8.59.0",
+    "typescript-eslint": "^8.59.2",
     "ua-parser-js": "^2.0.9",
     "unzipper": "^0.12.3",
-    "web-component-wrapper": "^0.0.566",
-    "web-internationalization": "^2.0.11",
+    "web-component-wrapper": "^0.0.586",
+    "web-internationalization": "^2.0.17",
     "weboptimizer": "^3.0.22",
     "webpack-dev-server": "^5.2.3",
-    "website-utilities": "^1.0.389"
+    "website-utilities": "^1.0.399"
   },
   "engines": {
     "node": ">=24",

package/source/index.css

@@ -172,17 +172,19 @@ body {
 
     a:hover { color: var(--color11); }
 
-    .wu-scroll-to-top {
-        right: 45px;
-        z-index: 4;
-    }
+    website-utilities {
+        .wu-scroll-to-top {
+            right: 45px;
+            z-index: 4;
+        }
 
-    a.wu-scroll-to-top.wu-scroll-up {
-        bottom: calc(2 * 34px);
-    }
+        .wu-scroll-to-top.wu-scroll-up {
+            bottom: calc(2 * 34px);
+        }
 
-    a.wu-scroll-to-top.wu-scroll-down {
-        bottom: 34px;
+        .wu-scroll-to-top.wu-scroll-down {
+            bottom: 34px;
+        }
     }
     /** endregion */
     /** region image */

package/source/index.html.ejs

@@ -187,10 +187,9 @@ _%>
                 </div>
             </header>
             <!--endregion-->
-            <!--region sections-->
-            <section class="wu-section section">
+            <main class="wu-router-outlet section">
                 <!--region home-->
-                <div
+                <section
                     class="section__inner section__home"
                     data-website-utilities-section="home"
                 >
@@ -208,10 +207,10 @@ _%>
                     _%>
 
                     <%- content %>
-                </div>
+                </section>
                 <!--endregion-->
                 <!--region about this website-->
-                <div
+                <section
                     class="section__inner section__about-this-website"
                     data-website-utilities-section="about-this-website"
                 >
@@ -250,9 +249,13 @@ _%>
                         Website:
                         <!--deDE:Webseite:-->
                         <!--frFR:Site:-->
-                        <a href="https://torben.website">https://torben.website</a>
+                        <a href="https://torben.website">
+                            https://torben.website
+                        </a>
                         <br>
-                        <span class="section__inner__arrow-left-home icon icon-arrow-left"></span>
+                        <span
+                            class="section__inner__arrow-left-home icon icon-arrow-left"
+                        ></span>
                         <a href="#home">
                             home
                             <!--deDE:Startseite-->
@@ -260,9 +263,9 @@ _%>
                         </a>
                     </p>
                     <%- _.include('legal-notes') %>
-                </div>
+                </section>
                 <!--endregion-->
-            </section>
+            </main>
             <!--endregion-->
             <!--region footer-->
             <footer class="footer">

package/source/index.ts

@@ -57,6 +57,9 @@ export const log = new Logger({name: 'web-documentation'})
  * @property _defaultOptions.showExample.htmlWrapper - HTML example wrapper.
  * @property _defaultOptions.section - Configuration object for section
  * switches between the main page and legal notes descriptions.
+ * @property self - Reference to this class.
+ * @property doRender - Indicates that this components should evaluate given
+ * body content.
  * @property options - Finally configured given options.
  */
 export class WebDocumentation<
@@ -110,6 +113,8 @@ export class WebDocumentation<
         }
     }
 
+    static doRender = true
+
     readonly self = WebDocumentation
     // region api properties
     @property({type: object})
@@ -158,13 +163,21 @@ export class WebDocumentation<
     /**
      * Updates controlled dom elements.
      * @param reason - Why an update has been triggered.
+     * @param resolveRendering - Indicates whether rendering should be resolved
+     * finally. Should be set to "false" via super calls in inherited render
+     * methods which do further dom manipulations afterwards and resolve the
+     * rendering process by their own.
+     * @returns A promise resolving when rendering has finished. A promise may
+     * be needed for classes inheriting from this class.
      */
-    async render(reason?: string): Promise<void> {
-        await super.render(reason)
+    async render(reason = 'unknown', resolveRendering = true): Promise<void> {
+        await super.render(reason, false)
 
         if (Object.keys(this.options).length === 0)
             this._extendOptions()
 
+        await this.waitForNestedComponentRendering()
+
         this.grabDomNodes()
 
         /*
@@ -173,29 +186,29 @@ export class WebDocumentation<
         */
         this._showExamples()
 
-        // TODO we may need to delay internationalization until this has been
-        // finished rendering
-
         this._makeCodeEllipsis()
 
         this._generateTableOfContentsLinks()
+
+        await this.resolveRenderingPromiseIfSet(reason, resolveRendering)
     }
     /// endregion
     grabDomNodes(): void {
-        this.aboutThisWebsiteLinkDomNodes = this.root.querySelectorAll(
+        this.aboutThisWebsiteLinkDomNodes = this.hostDomNode.querySelectorAll(
             this.options.selectors.aboutThisWebsiteLink
         )
-        this.aboutThisWebsiteSectionDomNode = this.root.querySelector(
+        this.aboutThisWebsiteSectionDomNode = this.hostDomNode.querySelector(
             this.options.selectors.aboutThisWebsiteSection
         )
 
         this.codeDomNodes =
-            this.root.querySelectorAll(this.options.selectors.code)
+            this.hostDomNode.querySelectorAll(this.options.selectors.code)
 
         this.headlineDomNodes =
-            this.root.querySelectorAll(this.options.selectors.headlines)
-        this.tableOfContentDomNode =
-            this.root.querySelector(this.options.selectors.tableOfContent)
+            this.hostDomNode.querySelectorAll(this.options.selectors.headlines)
+        this.tableOfContentDomNode = this.hostDomNode.querySelector(
+            this.options.selectors.tableOfContent
+        )
     }
     // endregion
     // region protected methods
@@ -205,8 +218,13 @@ export class WebDocumentation<
      * Extends given options by default options.
      */
     _extendOptions() {
-        this.options = extend<Options>(
-            true, {}, this.self._defaultOptions, this.options
+        /*
+            NOTE: Using the internal setter avoids to trigger an additinal
+            rendering.
+        */
+        this.setPropertyValue(
+            'options',
+            extend<Options>(true, {}, this.self._defaultOptions, this.options)
         )
     }
     /**
@@ -353,7 +371,7 @@ export class WebDocumentation<
      * Shows marked example codes directly in browser.
      */
     _showExamples(): void {
-        for (const domNode of getAll(this.root))
+        for (const domNode of getAll(this.hostDomNode))
             if (domNode.nodeName === this.options.showExample.domNodeName) {
                 const match: null | RegExpMatchArray =
                     (domNode.textContent || '').match(