feat(learning): add markdown support for full term and definition

package.json

@@ -25,6 +25,7 @@
     "clsx": "^2.1.1",
     "csv-parse": "^5.5.6",
     "nanoid": "^5.0.7",
+    "ngx-markdown": "^18.1.0",
     "rxdb": "^15.34.1",
     "rxjs": "~7.8.0",
     "ts-fsrs": "^4.3.1",

src/app/app.config.ts

@@ -2,6 +2,7 @@ import { DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
 import { type ApplicationConfig, ErrorHandler, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { createErrorHandler } from '@sentry/angular';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { routes } from './app.routes';
 import { provideBarnDbAsync } from './barn/barnDb.service';
@@ -16,5 +17,6 @@ export const appConfig: ApplicationConfig = {
       useValue: createErrorHandler({ showDialog: false }),
     },
     { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { dateFormat: 'MMM d, y, HH:mm:ss' } },
+    provideMarkdown(),
   ],
 };

src/app/cards/cards-list-item/cards-list-item.component.ts

@@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
   selector: 'app-cards-list-item',
   template: `
     <button class="flex w-full items-center gap-2 px-2 py-1 text-left" (click)="showDetails.emit(card())">
-      <span class="line-clamp-1 grow">{{ card().term }}</span>
+      <span class="grow truncate">{{ card().term }}</span>
     </button>
   `,
   imports: [],

src/app/learning/cards/cards.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
+import { MarkdownComponent } from 'ngx-markdown';
 
 import { ButtonDirective } from '../../ui/button/button';
 import { CardGrade } from '../learning.service';
@@ -29,9 +30,13 @@ import { CardGrade } from '../learning.service';
       >
         @if (currentCard(); as currentCard) {
           @if (showCardDefinition()) {
-            <span class="break-all text-2xl text-primary">{{ currentCard.fullTerm || currentCard.term }}</span>
+            <span class="break-all text-2xl text-primary">
+              <markdown [data]="currentCard.fullTerm || currentCard.term" [inline]="true" />
+            </span>
             @if (currentCard.definition) {
-              <p class="text-left text-secondary">{{ currentCard.definition }}</p>
+              <p class="text-left text-secondary">
+                <markdown [data]="currentCard.definition" />
+              </p>
             }
           } @else {
             <span class="break-all text-2xl text-primary">{{ currentCard.term }}</span>
@@ -49,7 +54,7 @@ import { CardGrade } from '../learning.service';
       </div>
     </div>
   `,
-  imports: [ButtonDirective],
+  imports: [ButtonDirective, MarkdownComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/pages/cards/cards-page.component.ts

@@ -10,7 +10,7 @@ import { CardsListComponent } from './cards-list/cards-list.component';
 @Component({
   selector: 'app-cards-page',
   template: `
-    <div class="flex flex-col items-start gap-4">
+    <div class="flex flex-col gap-4">
       <app-learn-cards />
 
       <app-cards-list [cards]="cards() ?? []" (showDetails)="onShowDetails($event)" />

src/app/pages/home/unsorted-cards/unsorted-cards.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@a
 import { BarnService } from '../../../barn/barn.service';
 import { CardDetailsDialogComponent } from '../../../cards/card-details-dialog/card-details-dialog.component';
 import { type CardDetailsCard } from '../../../cards/card-details/card-details.component';
+import { CardsListItemComponent } from '../../../cards/cards-list-item/cards-list-item.component';
 
 @Component({
   selector: 'app-unsorted-cards',
@@ -14,9 +15,7 @@ import { type CardDetailsCard } from '../../../cards/card-details/card-details.c
         <ul class="columns-2 gap-4">
           @for (card of someUnsortedCards(); track card.id) {
             <li>
-              <button class="w-full truncate px-2 py-1 text-left" (click)="cardDetailsDialog.set({ open: true, card })">
-                {{ card.term }}
-              </button>
+              <app-cards-list-item [card]="card" (showDetails)="cardDetailsDialog.set({ open: true, card })" />
             </li>
           }
         </ul>
@@ -29,7 +28,7 @@ import { type CardDetailsCard } from '../../../cards/card-details/card-details.c
       />
     }
   `,
-  imports: [CardDetailsDialogComponent],
+  imports: [CardDetailsDialogComponent, CardsListItemComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/styles.css

@@ -3,3 +3,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* global markdown styles */
+markdown strong {
+  @apply text-action-secondary;
+}