Refactor markdown component

angular.json

@@ -39,7 +39,6 @@
               "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
               "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
               "node_modules/prismjs/prism.js",
-              "node_modules/marked/marked.min.js",
               "node_modules/prismjs/components/prism-yaml.min.js",
               "node_modules/prismjs/components/prism-python.min.js",
               "node_modules/prismjs/components/prism-go.min.js",

src/app/app.module.ts

@@ -65,7 +65,7 @@ import { VMClaimService } from './data/vmclaim.service';
 import { HfMarkdownComponent } from './step/hf-markdown.component';
 import { AngularSplitModule } from 'angular-split';
 import { DynamicHooksModule } from 'ngx-dynamic-hooks';
-import { CtrComponent } from './step/ctr.component';
+import { CtrComponent } from './step/ctr-component/ctr.component';
 import { TerminalComponent } from './step/terminal/terminal.component';
 import { ProgressService } from './data/progress.service';
 import { PredefinedServiceService } from './data/predefinedservice.service';
@@ -154,6 +154,10 @@ import {
   downloadIcon,
 } from '@cds/core/icon';
 import { ReadonlyTaskComponent } from './scenario/task/readonly-task/readonly-task.component';
+import { HiddenMdComponent } from './step/hidden-md-component/hidden-md.component';
+import { GlossaryMdComponent } from './step/glossary-md-component/glossary-md.component';
+import { MermaidMdComponent } from './step/mermaid-md-component/mermaid-md.component';
+import { NoteMdComponent } from './step/note-md-component/note-md.component';
 
 ClarityIcons.addIcons(
   plusIcon,
@@ -292,6 +296,10 @@ export function jwtOptionsFactory(): JwtConfig {
     TaskFormComponent,
     ReadonlyTaskComponent,
     SingleTaskVerificationMarkdownComponent,
+    GlossaryMdComponent,
+    HiddenMdComponent,
+    MermaidMdComponent,
+    NoteMdComponent,
   ],
   imports: [
     BrowserModule,

src/app/configuration/settings/settings.component.ts

@@ -5,8 +5,8 @@ import {
   TypedSettingsService,
 } from 'src/app/data/typedSettings.service';
 import { AlertComponent } from 'src/app/alert/alert.component';
-import { ServerResponse } from 'src/app/step/ServerResponse';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ServerResponse } from 'src/app/data/serverresponse';
 
 @Component({
   selector: 'app-settings',

src/app/data/ctr.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
-import { CodeExec } from '../step/CodeExec';
+import { CodeExec } from './CodeExec';
 
 @Injectable()
 export class CtrService {

src/app/data/gargantua.service.ts

@@ -2,9 +2,9 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { finalize, first, map, shareReplay, take, tap } from 'rxjs/operators';
-import { ServerResponse } from '../step/ServerResponse';
 import { atou } from '../unicode';
 import { environment } from 'src/environments/environment';
+import { ServerResponse } from './serverresponse';
 
 type GargantuaClientDefaults = {
   get<T = ServerResponse>(path: string): Observable<T>;

src/app/step/ctr-component/ctr.component.html

@@ -0,0 +1,13 @@
+<pre
+  [attr.executed]="executed"
+  class="file-{{ file }}"
+  title="{{ title }}"
+  (click)="ctr()"
+  #code
+><ng-content></ng-content></pre>
+<i>
+  <cds-icon [attr.shape]="shape"></cds-icon> {{ statusText }}
+  <b>{{ target }}</b>
+  <span> {{ countContent }}</span>
+  <span> {{ disabledText }}</span>
+</i>

src/app/step/ctr.component.ts → src/app/step/ctr-component/ctr.component.ts

@@ -1,24 +1,10 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { CtrService } from '../data/ctr.service';
+import { CtrService } from '../../data/ctr.service';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'ctr',
-  template: `
-    <pre
-      [attr.executed]="executed"
-      class="file-{{ file }}"
-      title="{{ title }}"
-      (click)="ctr()"
-      #code
-    ><ng-content></ng-content></pre>
-    <i>
-      <cds-icon [attr.shape]="shape"></cds-icon> {{ statusText }}
-      <b>{{ target }}</b>
-      <span> {{ countContent }}</span>
-      <span> {{ disabledText }}</span>
-    </i>
-  `,
+  templateUrl: './ctr.component.html',
   styleUrls: ['ctr.component.scss'],
 })
 export class CtrComponent implements OnInit {

src/app/step/glossary-md-component/glossary-md.component.html

@@ -0,0 +1,6 @@
+<div class="glossary">
+  {{ term }}
+  <ng-container *ngIf="parsedContent | async as content">
+    <span class="glossary-content" [innerHTML]="content"></span>
+  </ng-container>
+</div>

src/app/step/glossary-md-component/glossary-md.component.scss

@@ -0,0 +1,30 @@
+.glossary {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+.glossary .glossary-content {
+  visibility: hidden;
+  width: 200px;
+  background-color: black;
+  text-align: center;
+  padding: 10px;
+  border-radius: 6px;
+  width: 120px;
+  top: 100%;
+  left: 60px;
+  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
+
+  position: absolute;
+  z-index: 1;
+
+  p {
+    color: #fff;
+    margin-top: 0;
+  }
+}
+
+.glossary:hover .glossary-content {
+  visibility: visible;
+}

src/app/step/glossary-md-component/glossary-md.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from "@angular/core";
+
+
+@Component({
+    selector: 'app-glossary-md',
+    templateUrl: './glossary-md.component.html',
+    styleUrls: ['./glossary-md.component.scss'],
+  })
+  export class GlossaryMdComponent {
+    @Input() term: string;
+    @Input() parsedContent: Promise<string>;
+  }

src/app/step/hf-markdown.component.scss

@@ -41,111 +41,13 @@
     }
   }
 
-  details {
-    margin: 10px 0;
-  }
-
   img {
     width: 100%;
     height: auto;
   }
 
-  .note {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding: 5px;
-    border: 1px solid;
-    border-left: 3px solid;
-    border-top-color: var(--clr-color-neutral-400, #cccccc);
-    border-right-color: var(--clr-color-neutral-400, #cccccc);
-    border-bottom-color: var(--clr-color-neutral-400, #cccccc);
-    border-radius: 5px;
-
-    .note-title {
-      cds-icon {
-        font-size: 20px;
-        width: 20px;
-        height: 20px;
-      }
-      color: black;
-      font-weight: bold;
-    }
-
-    .note-content {
-      padding-left: 10px;
-    }
-
-    &.info {
-      border-left-color: #54cbf2;
-    }
-
-    &.caution {
-      border-left-color: #f0ad4e;
-    }
-
-    &.warning {
-      border-left-color: var(--clr-color-danger-500, red);
-    }
-
-    &.task {
-      border-left-color: var(--clr-color-success-500, green);
-    }
-  }
-
   :not(pre) > code[class*="language-"],
   pre[class*="language-"] {
     background: #f8f8f8 !important;
   }
-
-  .glossary {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-  }
-
-  .glossary .glossary-content {
-    visibility: hidden;
-    width: 200px;
-    background-color: black;
-    text-align: center;
-    padding: 10px;
-    border-radius: 6px;
-    width: 120px;
-    top: 100%;
-    left: 60px;
-    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
-
-    position: absolute;
-    z-index: 1;
-
-    p {
-      color: #fff;
-      margin-top: 0;
-    }
-  }
-
-  .glossary:hover .glossary-content {
-    visibility: visible;
-  }
-
-  details {
-    border: 1px solid var(--clr-color-neutral-400, #cccccc);
-    border-left: 3px solid #54cbf2;
-    border-radius: 4px;
-    padding: 0.5em 0.5em 0;
-    &[open] {
-      padding: 0.5em;
-      summary {
-        margin-bottom: 0.5em;
-      }
-    }
-  }
-
-  summary {
-    font-weight: bold;
-    margin: -0.5em -0.5em 0;
-    padding: 0.5em;
-    display: list-item;
-    cursor: pointer;
-  }
 }