feat: interpret markdown on application description

package.json

@@ -60,6 +60,7 @@
         "eva-icons": "^1.1.3",
         "font-awesome": "^4.7.0",
         "loglevel": "^1.7.1",
+        "marked": "^4.0.12",
         "ngx-electron": "^2.2.0",
         "rxjs": "~6.6.0",
         "sqlite3": "^5.0.2",
@@ -76,6 +77,7 @@
         "@commitlint/config-conventional": "^14.1.0",
         "@schematics/angular": "^13.0.2",
         "@types/jest": "^27.0.2",
+        "@types/marked": "^4.0.2",
         "@types/node": "^16.11.7",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",

src/app/ui/pages/application/application.component.html

@@ -39,7 +39,9 @@ <h1>{{ application?.name }}</h1>
 <div class="row" *ngIf="!isLoading">
     <div class="col-8">
         <nb-card>
-            <nb-card-body [innerHTML]="application?.description"></nb-card-body>
+            <nb-card-body
+                [innerHTML]="application?.description | markdown"
+            ></nb-card-body>
         </nb-card>
     </div>
     <div class="col-4">

src/app/ui/pages/application/application.module.ts

@@ -11,11 +11,12 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 import { GalleryModule } from '../../components/gallery/gallery.module';
 import { InstallButtonModule } from '../../components/install-button/install-button.module';
+import { MarkdownPipe } from '../../../util/markdown-pipe/markdown.pipe';
 
 const routes: Routes = [{ path: '', component: ApplicationComponent }];
 
 @NgModule({
-    declarations: [ApplicationComponent],
+    declarations: [ApplicationComponent, MarkdownPipe],
     imports: [
         CommonModule,
         RouterModule.forChild(routes),

src/app/util/markdown-pipe/markdown.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { MarkdownPipe } from './markdown.pipe';
+
+describe('MarkdownPipe', () => {
+    it('create an instance', () => {
+        const pipe = new MarkdownPipe();
+        expect(pipe).toBeTruthy();
+    });
+});

src/app/util/markdown-pipe/markdown.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { marked } from 'marked';
+
+@Pipe({
+    name: 'markdown',
+})
+export class MarkdownPipe implements PipeTransform {
+    transform(value: string | undefined): string | undefined {
+        if (value && value.length > 0) {
+            return marked(value);
+        }
+        return value;
+    }
+}