From 5a8441b0e7f7f85bd68a7b62935ceaf3433449b2 Mon Sep 17 00:00:00 2001 From: Hoang Vu Huy Date: Thu, 19 Dec 2024 16:51:22 +0700 Subject: [PATCH] Test markdown alerts --- marketplace-ui/angular.json | 6 +- marketplace-ui/package-lock.json | 92 ++++++++++++++++++- marketplace-ui/package.json | 2 + .../product-detail.component.html | 12 ++- .../product-detail.component.ts | 15 +++ .../redirect-page/redirect-page.component.ts | 2 +- .../app/shared/pipes/multilingualism.pipe.ts | 12 +++ 7 files changed, 136 insertions(+), 5 deletions(-) diff --git a/marketplace-ui/angular.json b/marketplace-ui/angular.json index 2999e3a75..c1435d4ab 100644 --- a/marketplace-ui/angular.json +++ b/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", diff --git a/marketplace-ui/package-lock.json b/marketplace-ui/package-lock.json index 275e7d6d0..22b222d35 100644 --- a/marketplace-ui/package-lock.json +++ b/marketplace-ui/package-lock.json @@ -27,6 +27,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", @@ -44,6 +45,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", @@ -5188,6 +5190,24 @@ "log4js": "^6.4.1" } }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, "node_modules/@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -5197,6 +5217,13 @@ "@types/unist": "^2" } }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/mime": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", @@ -8009,7 +8036,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -10658,6 +10684,16 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "uc.micro": "^2.0.0" + } + }, "node_modules/listr2": { "version": "8.2.3", "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.3.tgz", @@ -11143,6 +11179,36 @@ "node": "^16.14.0 || >=18.0.0" } }, + "node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "license": "MIT", + "peer": true, + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, + "node_modules/markdown-it-github-alerts": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/markdown-it-github-alerts/-/markdown-it-github-alerts-0.3.0.tgz", + "integrity": "sha512-qyIuDyfdrVGHhY+E/44yMyNA3ZnayaT/KKT2VgkIz1nmrgiuPkdgPUh4YBZwgJ9VKEGJvGd82Ndrc4oGftrJWg==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "markdown-it": "^14.0.0" + } + }, "node_modules/marked": { "version": "12.0.2", "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz", @@ -11191,6 +11257,13 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", + "license": "MIT", + "peer": true + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -13452,6 +13525,16 @@ "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==", "dev": true }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/qjobs": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz", @@ -15364,6 +15447,13 @@ "node": "*" } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", + "license": "MIT", + "peer": true + }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", diff --git a/marketplace-ui/package.json b/marketplace-ui/package.json index 4951035e0..f010f5904 100644 --- a/marketplace-ui/package.json +++ b/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", diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html index a7a2515f6..84a4d8a90 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html @@ -166,14 +166,22 @@

[selectedVersion]="selectedVersion"> } @else { - + "> --> + + +
+

> Highlights information that users should take into account, even when skimming.

+
+ {{renderGithubAlerts()}} +
} + } diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts index eda8701dc..89e1b085e 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts +++ b/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; + } } diff --git a/marketplace-ui/src/app/shared/components/redirect-page/redirect-page.component.ts b/marketplace-ui/src/app/shared/components/redirect-page/redirect-page.component.ts index 964cc0045..2ed8f01f2 100644 --- a/marketplace-ui/src/app/shared/components/redirect-page/redirect-page.component.ts +++ b/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); } } diff --git a/marketplace-ui/src/app/shared/pipes/multilingualism.pipe.ts b/marketplace-ui/src/app/shared/pipes/multilingualism.pipe.ts index f001c231d..3b6a22a4a 100644 --- a/marketplace-ui/src/app/shared/pipes/multilingualism.pipe.ts +++ b/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; + // } }