Added read-only keyword labels to documentation

website/docs/src/routes/_layout.svelte

@@ -466,11 +466,25 @@
 				}
 			}
 		}
+		.keyword-container {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: start;
+			margin-bottom: 38px;
+		}
+		label.keyword {
+			border: 1px solid $powder-blue;
+			padding: 0 14px;
+			font-size: 14px;
+			background-color: rgba(237, 242, 247, 0.1);
+			border-radius: 6px;
+			margin-right: 10px;
+		}
 	}
 </style>
 
 <main>
 		<div class="docu-content">
 		<slot></slot>
 		</div>
-</main>
+</main>

website/docs/src/services/markdown.service.js

@@ -12,6 +12,7 @@ import addCopyToClipboard from '../unified-plugins/rehype-copy-to-clipboard';
 import addCustomAttributes from '../unified-plugins/rehype-add-custom-attributes';
 import wrapAccordion from '../unified-plugins/rehype-accordion';
 import luigiNavigationBuilder from '../unified-plugins/remark-generate-luigi-navigation';
+import addKeyWords from '../unified-plugins/rehype-add-keywords';
 
 // import highlight from 'rehype-highlight' // syntax highlight code blocks with lowlight: https://github.com/wooorm/lowlight
 import rehypeSection from '@agentofuser/rehype-section';
@@ -32,6 +33,7 @@ class MarkdownService {
         .use(luigiLinkParser, data)
         .use(addIdsToHeadings)
         .use(addCopyToClipboard)
+        .use(addKeyWords)
         .use(section) // section should be the last one
         .use(format)
         .use(html)

website/docs/src/unified-plugins/rehype-add-keywords.js

@@ -0,0 +1,41 @@
+import visit from 'unist-util-visit';
+import h from 'hastscript';
+
+/**
+ * This unified plugin function adds keyword labels
+ * example markdown comment: <!-- keywords: key1, key2-->
+ * result : <div class="keyword-container">
+ *              <label class="keyword">key1</label>
+ *              <label class="keyword">key2</label> 
+ *          </div>
+ */
+export default function addKeyWords() {
+  return function transformer(tree) {
+    visit(tree, ['element', 'comment'], function (node) {
+      processComment(node);
+    });
+  }
+
+  function processComment(node) {
+    if (node.type === 'comment') {
+      if (node.value.trim().startsWith('keywords')) {
+        const parts = node.value.trim().split(':');
+        // retrieve the list of words from the comment
+        const words = parts[1].split(',').map( word => {
+            return word.trim()
+        });
+        // check if no keywords added
+        // When the string is empty, split returns an array containing one empty string
+        if (words[0] != '') {
+            // create a div containing multiple labels
+            const newNodeData = h('div.keyword-container', 
+                words.map( word => {
+                    return h('label.keyword', [ word ] )
+                })
+            );
+            Object.assign(node, newNodeData);
+        }
+      }
+    }
+  }
+}