feat(web): Add Markdown support for displaying formatted text

- Added "marked" package as a dependency in the package.json file
- Imported and added "MarkdownModule" to the app.module.ts file
- Updated the profile.component.html file to use the "markdown" directive for displaying clan descriptions
- Updated the view-post.component.html file to use the "markdown" directive for displaying mod action reasons
- Updated the post.component.html file to use the "markdown" directive for displaying post content
- Added CSS styles for markdown rendering in styles.scss

wowskarma.app/package.json

@@ -30,7 +30,9 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "bootswatch": "^5.3.2",
+    "marked": "^9.0.0",
     "ng-openapi-gen": "^0.51.0",
+    "ngx-markdown": "^17.1.1",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"

wowskarma.app/src/app/app.module.ts

@@ -66,6 +66,7 @@ import { ProfileModActionsViewComponent } from './shared/modals/profile-mod-acti
 import { ProfilePlatformBansViewComponent } from './shared/modals/profile-platform-bans-view/profile-platform-bans-view.component';
 import { UserRolesComponent } from './shared/components/icons/user-roles/user-roles.component';
 import { NgOptimizedImage } from "@angular/common";
+import { MarkdownComponent, MarkdownModule } from "ngx-markdown";
 
 @NgModule({
     declarations: [
@@ -138,7 +139,8 @@ import { NgOptimizedImage } from "@angular/common";
     NgbPaginationModule,
     NgbTooltipModule,
     NgbModule,
-    NgOptimizedImage
+    NgOptimizedImage,
+    MarkdownModule.forRoot()
   ],
     providers: [
         AuthService,

wowskarma.app/src/app/pages/clan/profile/profile.component.html

@@ -9,7 +9,7 @@ <h1 id="clan-name" class="mb-5">
 
         <div class="my-5">
           <hr/>
-          <p class="my-3" style="white-space: pre-line;">{{clan.description}}</p>
+          <div markdown class="my-3" [data]="clan.description"></div>
           <hr/>
         </div>
       </div>

wowskarma.app/src/app/pages/post/view/view-post.component.html

@@ -49,10 +49,10 @@ <h4>Mod Action</h4>
                 <dd class="col-sm-9 col-lg-10">{{ modAction.modUsername }}</dd>
 
                 <dt class="col-sm-3 col-lg-2">Reason</dt>
-                <dd class="col-sm-9 col-lg-10" style="white-space: pre-wrap;">{{ modAction.reason }}</dd>
+                <dd class="col-sm-9 col-lg-10" markdown [data]="modAction.reason"></dd>
             </dl>
         </div>
-        
+
         <div *ngIf="p.replay as replay">
             <h2>Replay
                 <a class="btn btn-primary btn-lg ms-5 px-4" [href]="p.replay.downloadUri">Download Replay</a>

wowskarma.app/src/app/shared/post/post.component.html

@@ -11,7 +11,7 @@ <h5 class="my-2">{{ p.title }}</h5>
         </div>
 
         <div class="card-body">
-            <p class="card-text" style="white-space: pre-wrap;">{{ p.content }}</p>
+            <markdown class="card-text markdown" [data]="p.content" />
         </div>
 
         <div class="card-body py-0 my-1" style="line-height: normal;">
@@ -28,15 +28,15 @@ <h5 class="my-2">{{ p.title }}</h5>
                         @case (2) {
                             <a class="text-body" [routerLink]="['/posts', 'view', p.id]">
                                 <i class="bi bi-camera-video text-success lead mx-1"></i>
-                            </a> 
+                            </a>
                         }
-                        
+
                         @case (1) {
                             <a class="text-body" [routerLink]="['/posts', 'view', p.id]" title="Replay minimap is being processed.">
                                 <i class="bi bi-camera-video text-warning lead mx-1"></i>
                             </a>
                         }
-                        
+
                         @case (0) {
                             <i class="bi bi-camera-video-off text-danger lead mx-1"></i>
                         }

wowskarma.app/src/styles.scss

@@ -128,3 +128,12 @@ body {
   --bs-tooltip-color: #fff;
   --bs-tooltip-bg: #222;
 }
+
+
+.markdown {
+  img {
+    display: block;
+    width: 100%;
+    object-fit: contain;
+  }
+}