Test markdown alerts

marketplace-ui/angular.json

@@ -30,7 +30,11 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss",
-              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "node_modules/markdown-it-github-alerts/styles/github-base.css",
+              "node_modules/markdown-it-github-alerts/styles/github-colors-dark-class.css",
+              "node_modules/markdown-it-github-alerts/styles/github-colors-dark-media.css",
+              "node_modules/markdown-it-github-alerts/styles/github-colors-light.css"
             ],
             "scripts": [
               "node_modules/emoji-toolkit/lib/js/joypixels.min.js",

marketplace-ui/package.json

@@ -29,6 +29,7 @@
     "emoji-toolkit": "^9.0.0",
     "jwt-decode": "^4.0.0",
     "karma-viewport": "^1.0.9",
+    "markdown-it-github-alerts": "^0.3.0",
     "marked": "^12.0.0",
     "ngx-cookie-service": "^18.0.0",
     "ngx-markdown": "^18.0.0",
@@ -46,6 +47,7 @@
     "@angular/localize": "^18.1.2",
     "@types/bootstrap": "^5.2.10",
     "@types/jasmine": "~5.1.0",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^18.18.0",
     "jasmine": "^5.1.0",
     "jasmine-core": "~5.1.0",

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html

@@ -166,14 +166,22 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
                       [selectedVersion]="selectedVersion">
                     </app-product-detail-maven-content>
                   } @else {
-                    <markdown emoji
+                    <!-- <markdown emoji
                       [lang]="languageService.selectedLanguage()"
                       class="readme-content"
                       [data]="
                         getProductModuleContentValue(displayedTab)
                           | multilingualism: languageService.selectedLanguage()
-                      "></markdown>
+                      "></markdown> -->
+
+
+                      <div [innerHTML]="renderGithubAlerts()"></div>
+                      <div class="markdown-alert markdown-alert-note"><p class="markdown-alert-title"><svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>> Highlights information that users should take into account, even when skimming.</p><p></p> </div>
+                     <div>
+                      {{renderGithubAlerts()}}
+                     </div>
                   }
+
                 </div>
               }
           </div>

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts

@@ -1,3 +1,4 @@
+import MarkdownIt from 'markdown-it';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import {
   Component,
@@ -51,6 +52,7 @@ import { CookieService } from 'ngx-cookie-service';
 import { ROUTER } from '../../../shared/constants/router.constant';
 import { Title } from '@angular/platform-browser';
 import { API_URI } from '../../../shared/constants/api.constant';
+import MarkdownItGitHubAlerts from 'markdown-it-github-alerts';
 
 export interface DetailTab {
   activeClass: string;
@@ -140,6 +142,7 @@ export class ProductDetailComponent {
   }
 
   ngOnInit(): void {
+    this.renderGithubAlerts();
     this.router.navigate([], {
       relativeTo: this.route,
       queryParamsHandling: 'merge',
@@ -417,4 +420,16 @@ export class ProductDetailComponent {
 
     return productDetail;
   }
+
+  renderGithubAlerts(): string {
+    // const html = md.render(this.getProductModuleContentValue(displayedTab))
+
+    const md = MarkdownIt();
+    md.use(MarkdownItGitHubAlerts, /* Options */)
+
+    const result = md.render('> [!NOTE] > Highlights information that users should take into account, even when skimming.');
+    console.log(result);
+
+    return result;
+  }
 }

marketplace-ui/src/app/shared/components/redirect-page/redirect-page.component.ts

@@ -37,7 +37,7 @@ export class RedirectPageComponent implements OnInit {
         this.fetchLatestLibVersionDownloadUrl(product, version, artifact);
         return;
       }
-      this.fetchDocumentUrl(product, version, currentUrl);
+      // this.fetchDocumentUrl(product, version, currentUrl);
     }
   }
 

marketplace-ui/src/app/shared/pipes/multilingualism.pipe.ts

@@ -1,6 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { Language } from '../enums/language.enum';
 import { DisplayValue } from '../models/display-value.model';
+import MarkdownIt from 'markdown-it';
+// import MarkdownItGitHubAlerts from 'markdown-it-github-alerts/index';
 
 @Pipe({
   standalone: true,
@@ -16,5 +18,15 @@ export class MultilingualismPipe implements PipeTransform {
       }
     }
     return displayValue;
+    // return this.renderGithubAlerts(displayValue);
   }
+
+  // public renderGithubAlerts(value: string) {
+  //   const md = MarkdownIt()
+
+  //   md.use(MarkdownItGitHubAlerts, /* Options */)
+
+  //   const html = md.render(value)
+  //   return html;
+  // }
 }