web-documentation 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-documentation",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Declarative multilanguage documentation website generator",
   "keywords": [
     "documentation",
@@ -68,7 +68,7 @@
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "archiver": "^8.0.0",
     "bootstrap-icons": "^1.13.1",
-    "clientnode": "^4.0.1413",
+    "clientnode": "^4.0.1414",
     "css-loader": "^7.1.4",
     "cssnano": "^8.0.1",
     "default-gateway": "^7.2.2",

package/source/dummyReadme.md

@@ -60,11 +60,10 @@ You need utilities for:<!--deDE:Sie benötigen Hilfsfunktionen für:-->
 - URLs
 
 <!--Place for automatic generated table of contents.-->
-<!--Backend generated one indicator: "# heading"-->
-<!--Clientside generated version indicator:-->
-<div class="doc-toc" style="display: none">
+<div class="wd-table-of-contents" style="display: none">
     <!--|deDE:Inhalt-->
     <h2 id="content">Content</h2>
+    <!--wd-table-of-contents-->
 </div>
 
 <!--|deDE:Installation-->

package/source/index.ts

@@ -76,7 +76,9 @@ export class WebDocumentation<
             }}"
         >
             <web-internationalization
-                options="{selectors: {knownTranslation: '.doc-toc'}}"
+                options="{selectors: {
+                    knownTranslation: '.wd-table-of-contents'
+                }}"
             >
                 <slot>Please provide a template to transclude.</slot>
             </web-internationalization>
@@ -97,8 +99,8 @@ export class WebDocumentation<
                 '.section__home h1, .section__home h2, ' +
                 '.section__home h3, .section__home h4, ' +
                 '.section__home h5, .section__home h6',
-            tableOfContent: '.doc-toc',
-            tableOfContentLinks: '.doc-toc ul li a[href^="#"]'
+            tableOfContent: '.wd-table-of-contents',
+            tableOfContentLinks: '.wd-table-of-contents ul li a[href^="#"]'
         },
 
         showExample: {
@@ -170,7 +172,7 @@ export class WebDocumentation<
      * @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
+     * methods which do further dom manipulations afterward 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.
@@ -253,8 +255,6 @@ export class WebDocumentation<
             if (first)
                 firstLevel = newLevel
 
-            console.log('A', newLevel)
-
             if (newLevel > level)
                 listItemsHTML += '<ul>'
             else if (newLevel < level)
@@ -277,7 +277,14 @@ export class WebDocumentation<
             level += 1
         }
 
-        this.tableOfContentDomNode.append(createDomNodes(listItemsHTML))
+        for (const domNode of this.tableOfContentDomNode.childNodes)
+            if (
+                domNode.nodeType === Node.COMMENT_NODE &&
+                domNode.nodeValue === 'wd-table-of-contents'
+            ) {
+                domNode.after(createDomNodes(listItemsHTML))
+                domNode.remove()
+            }
 
         this.tableOfContentLinkDomNodes =
             this.tableOfContentDomNode.querySelectorAll<HTMLAnchorElement>(
@@ -302,7 +309,8 @@ export class WebDocumentation<
                 }
             )
 
-        this.tableOfContentDomNode.style.display = 'initial'
+        if (this.tableOfContentDomNode.style.display === 'none')
+            this.tableOfContentDomNode.style.display = 'initial'
     }
     /**
      * This method makes dotes after code lines which are too long. This

package/source/renderMarkdown.mjs

@@ -1,11 +1,13 @@
 import {Marked} from 'marked'
-import {gfmHeadingId} from 'marked-gfm-heading-id'
+import {gfmHeadingId, getHeadingList} from 'marked-gfm-heading-id'
 import {markedHighlight} from 'marked-highlight'
 import highlightJSModule from 'highlight.js'
 import {markedXhtml} from 'marked-xhtml'
 
 const {getLanguage, highlight} = highlightJSModule
 
+const TOC_INDICATOR_HTML = '<!--wd-table-of-contents-->'
+
 const marked = new Marked(
     markedHighlight({
         /*
@@ -22,32 +24,30 @@ const marked = new Marked(
 
 export default (options) => {
     marked.setOptions(options)
-    // Include an id attribute when emitting headings (h1, h2, h3, ...).
-    marked.use(gfmHeadingId(
-        {prefix: 'doc-'}/* TODO,
-
-    {
-        hooks: {
-            postprocess(html) {
-                const headings = getHeadingList()
 
-
-                    NOTE: We do not wrap with an initial UL tag since H1
-                    should be ignored. It is only existing once for SEO
-                    purposes.
-                * /
-                    return `
-                        ${headings.map(({
-                            id,
-                            raw,
-                            level
-                        }) => `<li><a href="#${id}">${raw}</a></li>`)}
-                        ${html}
+    // Include an id attribute when emitting headings (h1, h2, h3, ...).
+    marked.use(
+        gfmHeadingId({prefix: 'wd-heading-'}),
+        {
+            hooks: {
+                // Adds an autogenerated table of contents list.
+                postprocess: (html) => {
+                    const headings = getHeadingList()
+                    const tableOfContents = `
+                        <ul>${
+                            headings
+                                .map(({id, raw, level}) =>
+                                    `<li><a href="#${id}">${raw}</a></li>`
+                                )
+                                .join('\n')
+                        }</ul>
                     `
+
+                    return html.replace(TOC_INDICATOR_HTML, tableOfContents)
                 }
             }
-        }*/
-    ))
+        }
+    )
     // Favors self-closing xhtml tags.
     marked.use(markedXhtml())