Add links to components in Markdown

src/components/app/app.tsx

@@ -2,6 +2,7 @@ import { Component, h, State, Prop, Watch } from '@stencil/core';
 import { KompendiumData, KompendiumDocument } from '../../types';
 import { setTypes } from '../markdown/markdown-types';
 import Fuse from 'fuse.js';
+import { setComponents } from '../markdown/markdown-components';
 
 @Component({
     tag: 'kompendium-app',
@@ -76,6 +77,10 @@ export class App {
         this.data = await data.json();
         const typeNames = this.data.types.map((type) => type.name);
         setTypes(typeNames);
+        const componentNames = this.data.docs.components.map(
+            (component) => component.tag
+        );
+        setComponents(componentNames);
     }
 
     protected render(): HTMLElement {

src/components/markdown/markdown-components.ts

@@ -0,0 +1,9 @@
+let components: string[] = [];
+
+export function getComponents(): string[] {
+    return components;
+}
+
+export function setComponents(newComponents: string[]): void {
+    components = newComponents;
+}

src/components/markdown/markdown.tsx

@@ -1,6 +1,7 @@
 import { Component, h, Prop, Element } from '@stencil/core';
 import { markdownToHtml } from '../../kompendium/markdown';
 import { getTypes } from './markdown-types';
+import { getComponents } from './markdown-components';
 
 /**
  * This component renders markdown
@@ -32,7 +33,8 @@ export class Markdown {
 
     private async renderMarkdown() {
         const types = getTypes();
-        const file = await markdownToHtml(this.text, types);
+        const components = getComponents();
+        const file = await markdownToHtml(this.text, types, components);
         this.host.shadowRoot.querySelector('#root').innerHTML = file.toString();
     }
 

src/kompendium/markdown-componentlinks.ts

@@ -0,0 +1,117 @@
+import flatMap from 'unist-util-flatmap';
+import { Node } from 'unist';
+import { Transformer } from 'unified';
+
+/**
+ * Find references to components inside code blocks and wrap them in links.
+ *
+ * @param {any} options Options
+ * @returns {Transformer} Transformer
+ */
+export function componentLinks(options: any = {}): Transformer {
+    return transformer(options.components);
+}
+
+const transformer =
+    (components: string[] = []): Transformer =>
+    (tree): any => {
+        if (components.length === 0) {
+            return tree;
+        }
+
+        return flatMap(tree, mapCodeNode(components));
+    };
+
+const mapCodeNode =
+    (components: string[] = []) =>
+    (node, _, parent) => {
+        if (node.type !== 'element') {
+            return [node];
+        }
+
+        // only look inside code
+        if (node.tagName !== 'code') {
+            return [node];
+        }
+
+        // don't look inside inline code
+        if (parent.parent?.tagName === 'pre') {
+            return [node];
+        }
+
+        if (node.children.some((child: Node) => child.type !== 'text')) {
+            return [node];
+        }
+
+        return wrapText(node, components);
+    };
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function wrapText(node: any, components: string[] = []) {
+    const componantsstring = node.children.map((c) => c.value).join('');
+
+    return [
+        {
+            ...node,
+            children: splitComponentstring(componantsstring).map(
+                createNode(components)
+            ),
+        },
+    ];
+}
+
+const createNode =
+    (components: string[] = []) =>
+    (component: string) => {
+        if (!components.includes(component)) {
+            return createTextNode(component);
+        }
+
+        return createLinkNode(component);
+    };
+
+function createTextNode(text: string) {
+    return {
+        type: 'text',
+        value: text,
+    };
+}
+
+function createLinkNode(component: string) {
+    return {
+        type: 'element',
+        tagName: 'a',
+        properties: {
+            href: `#/component/${component}/`,
+        },
+        children: [
+            {
+                type: 'text',
+                value: component,
+            },
+        ],
+    };
+}
+
+export function splitComponentstring(componentstring: string): string[] {
+    const pattern = /(\b[\w-]+\b)+/g;
+    const components = componentstring.match(pattern);
+    const result: string[] = [];
+
+    let currentString = componentstring;
+    components.forEach((component: string) => {
+        const index = currentString.indexOf(component);
+        if (index > 0) {
+            result.push(currentString.substr(0, index));
+        }
+
+        result.push(component);
+        currentString = currentString.substr(index + component.length);
+    });
+
+    if (currentString.length > 0) {
+        result.push(currentString);
+    }
+
+    return result;
+}

src/kompendium/markdown-typelinks.ts

@@ -59,7 +59,7 @@ function createLinkNode(type: string) {
         type: 'element',
         tagName: 'a',
         properties: {
-            href: `#/type/${type}`,
+            href: `#/type/${type}/`,
         },
         children: [
             {

src/kompendium/markdown.ts

@@ -9,6 +9,7 @@ import html from 'rehype-stringify';
 import { saveFrontmatter } from './markdown-frontmatter';
 import { kompendiumCode } from './markdown-code';
 import { typeLinks } from './markdown-typelinks';
+import { componentLinks } from './markdown-componentlinks';
 
 export interface File {
     data: {
@@ -19,7 +20,11 @@ export interface File {
     toString(): string;
 }
 
-export async function markdownToHtml(text: string, types = []): Promise<File> {
+export async function markdownToHtml(
+    text: string,
+    types = [],
+    components = []
+): Promise<File> {
     return new Promise((resolve) => {
         unified()
             .use(markdown)
@@ -30,6 +35,7 @@ export async function markdownToHtml(text: string, types = []): Promise<File> {
             .use(remark2rehype, { allowDangerousHtml: true })
             .use(raw)
             .use(typeLinks, { types: types })
+            .use(componentLinks, { components: components })
             .use(kompendiumCode)
             .use(html)
             .process(text, (_, file) => {