+ {{ term }}
+
diff --git a/src/app/hf-markdown/glossary-md-component/glossary-md.component.scss b/src/app/hf-markdown/glossary-md-component/glossary-md.component.scss
new file mode 100644
index 00000000..1e13741d
--- /dev/null
+++ b/src/app/hf-markdown/glossary-md-component/glossary-md.component.scss
@@ -0,0 +1,5 @@
+.glossary {
+ position: relative;
+ border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+ width: fit-content;
+}
diff --git a/src/app/hf-markdown/glossary-md-component/glossary-md.component.ts b/src/app/hf-markdown/glossary-md-component/glossary-md.component.ts
new file mode 100644
index 00000000..19014f1e
--- /dev/null
+++ b/src/app/hf-markdown/glossary-md-component/glossary-md.component.ts
@@ -0,0 +1,11 @@
+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() code: string;
+}
diff --git a/src/app/hf-markdown/hf-markdown.component.scss b/src/app/hf-markdown/hf-markdown.component.scss
index 954c1411..4ff94a2d 100644
--- a/src/app/hf-markdown/hf-markdown.component.scss
+++ b/src/app/hf-markdown/hf-markdown.component.scss
@@ -8,7 +8,12 @@
ol li,
ul li {
code {
- font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+ font-family:
+ Consolas,
+ Monaco,
+ Andale Mono,
+ Ubuntu Mono,
+ monospace;
padding: 1px 10px 2px 10px;
font-weight: bold;
color: #000;
@@ -20,7 +25,7 @@
pre {
padding: 5px 10px;
overflow-x: auto;
- background-color: #f8f8f8;
+ background-color: var(--clr-card-bg-color, #f8f8f8);
margin-bottom: 0px;
.filename,
.language {
@@ -41,10 +46,6 @@
}
}
- details {
- margin: 10px 0;
- }
-
img {
width: 100%;
height: auto;
@@ -56,102 +57,8 @@
}
}
- .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;
- }
}
diff --git a/src/app/hf-markdown/hf-markdown.component.ts b/src/app/hf-markdown/hf-markdown.component.ts
index d99918f2..bf9834ee 100644
--- a/src/app/hf-markdown/hf-markdown.component.ts
+++ b/src/app/hf-markdown/hf-markdown.component.ts
@@ -1,7 +1,8 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { MarkdownService } from 'ngx-markdown';
import { CtrService } from '../scenario/ctr.service';
import { VM } from '../VM';
+import { escape, uniqueString } from '../utils';
import Prism from 'prismjs';
import mermaid from 'mermaid';
@@ -18,12 +19,9 @@ import 'prismjs/components/prism-go';
import 'prismjs/components/prism-docker';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-yaml';
+import { isNoteType, NoteType } from '../notetype';
import 'prismjs/components/prism-hcl';
-// Replacement for lodash's escape
-const escape = (s: string) =>
- s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
-
export interface HfMarkdownRenderContext {
vmInfo: { [vmName: string]: VM };
session: string;
@@ -32,41 +30,21 @@ export interface HfMarkdownRenderContext {
@Component({
selector: 'app-hf-markdown',
template: `
-
-
- `;
+ // ngx-dynamic-hooks can only process stringified input objects
+ const ctxString = JSON.stringify(this.context);
+ return `${summary}
- ${this.markdownService.parse(code)} -
- ${term}
-
- ${this.markdownService.parse(code)}
-
-
- `;
- },
-
- quiz(code: string, quizTitle: string, allowedAttempts?: string) {
- const tempAtts = Number(allowedAttempts);
- const allowedAtts = isNaN(tempAtts) || tempAtts < 1 ? 1 : tempAtts;
- return `
-
-
- ${message ?? type.toUpperCase()}:
-
-
- `;
+ let noteType: NoteType = 'info';
+ if (isNoteType(type)) {
+ noteType = type;
+ }
+ const ctxString = JSON.stringify(this.context);
+ return `
- ${this.markdownService.parse(code)}
-
- Loading mermaid graph...
`;
- },
};
private renderHighlightedCode(
code: string,
language: string,
fileName?: string,
- copyCode: boolean = true,
) {
- let copyCodeDiv = '';
- if (copyCode) {
- const id = this.ctrService.registerCode(code);
- copyCodeDiv = `${fileName} ${copyCodeDiv}
` - : `${language} ${copyCodeDiv}
`; + ? `${fileName}
` + : `${language}
`; const classAttr = `language-${language}`; if (Prism.languages[language]) { code = Prism.highlight(code, Prism.languages[language], language); } - return `${fileNameTag}${code}`;
}
- private renderMermaidGraph(code: string, containerId: string) {
- mermaid
- .render('svg-' + containerId, code)
- .then((renderResult) => {
- const container = document.getElementById(containerId);
- if (container) {
- container.innerHTML = renderResult.svg;
- }
- })
- .catch((error) => {
- console.error('Mermaid rendering failed:', error);
- });
- }
-
private renderNestedPlainCode(code: string) {
let content = '';
const codeArray: string[] = code.split('~~~');
@@ -224,7 +148,21 @@ ${token}`;
// This case occurs inside nested blocks
} else if (codePart) {
- content += this.markdownService.parse('~~~' + codePart + '~~~');
+ const [infoString, ...codeParts] = codePart.split('\n');
+ const processedCodePart = codeParts.join('\n');
+ if (infoString.trim().length > 0) {
+ content += this.markdownService.renderer.code(
+ processedCodePart,
+ infoString,
+ false,
+ );
+ } else {
+ content += this.markdownService.renderer.code(
+ processedCodePart,
+ undefined,
+ false,
+ );
+ }
} else {
content += '~~~~~~';
}
@@ -245,14 +183,51 @@ ${token}`;
}
}
+ constructor(
+ public markdownService: MarkdownService,
+ private ctrService: CtrService,
+ ) {}
+
+ ngOnInit(): void {
+ mermaid.initialize({
+ startOnLoad: false,
+ });
+ this.markdownService.renderer.code = (code: string, language = '') => {
+ const [tag, ...args] = language.split(':');
+ if (tag in this.taggedCodeRenderers) {
+ const renderer = this.taggedCodeRenderers[tag];
+ return renderer.call(this, code, ...args);
+ } else if (language.length > 0) {
+ return this.renderHighlightedCode(code, tag, ...args);
+ } else if (/~~~([\s\S]*?)~~~/.test(code)) {
+ return this.renderNestedPlainCode(code);
+ } else {
+ return this.renderSimplePlainCode(code);
+ }
+ };
+ }
+
ngOnChanges() {
+ if (!this.content) {
+ return;
+ }
+
const contentWithReplacedTokens = this.replaceSessionToken(
this.replaceVmInfoTokens(this.content),
);
// the parse method internally uses the Angular Dom Sanitizer and is therefore safe to use
- this.processedContent = this.markdownService.parse(
- contentWithReplacedTokens,
- );
+ const parsedContent = this.markdownService.parse(contentWithReplacedTokens);
+
+ if (typeof parsedContent === 'string') {
+ this.processedContent = Promise.resolve(parsedContent);
+ } else {
+ this.processedContent = parsedContent
+ .then((processed) => processed)
+ .catch((err) => {
+ console.error('Failed to parse Markdown content: ', err);
+ return 'Failed to parse Markdown content';
+ });
+ }
}
private replaceVmInfoTokens(content: string) {
@@ -268,8 +243,4 @@ ${token}`;
private replaceSessionToken(content: string) {
return content.replace(/\$\{session\}/g, this.context.session);
}
-
- private uniqueString(n: number) {
- return `${(Math.random().toString(36) + '0000').slice(2, n + 2)}`;
- }
}
diff --git a/src/app/hf-markdown/hidden-md-component/hidden-md.component.html b/src/app/hf-markdown/hidden-md-component/hidden-md.component.html
new file mode 100644
index 00000000..51842927
--- /dev/null
+++ b/src/app/hf-markdown/hidden-md-component/hidden-md.component.html
@@ -0,0 +1,4 @@
+
+
diff --git a/src/app/hf-markdown/hidden-md-component/hidden-md.component.scss b/src/app/hf-markdown/hidden-md-component/hidden-md.component.scss
new file mode 100644
index 00000000..05c52e4d
--- /dev/null
+++ b/src/app/hf-markdown/hidden-md-component/hidden-md.component.scss
@@ -0,0 +1,22 @@
+details {
+ margin: 10px 0;
+ border: 1px solid var(--clr-color-neutral-400, #cccccc);
+ border-left: 3px solid #54cbf2;
+ border-radius: 4px;
+ padding: 0.5em 0.5em 0;
+ white-space: normal;
+ &[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;
+}
diff --git a/src/app/hf-markdown/hidden-md-component/hidden-md.component.ts b/src/app/hf-markdown/hidden-md-component/hidden-md.component.ts
new file mode 100644
index 00000000..c171fea3
--- /dev/null
+++ b/src/app/hf-markdown/hidden-md-component/hidden-md.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { HfMarkdownRenderContext } from '../hf-markdown.component';
+
+@Component({
+ selector: 'app-hidden-md',
+ templateUrl: './hidden-md.component.html',
+ styleUrls: ['./hidden-md.component.scss'],
+})
+export class HiddenMdComponent {
+ @Input() summary: string;
+ @Input() code: string;
+ @Input() ctx: HfMarkdownRenderContext = { vmInfo: {}, session: '' };
+}
diff --git a/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.html b/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.html
new file mode 100644
index 00000000..699ffbac
--- /dev/null
+++ b/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.html
@@ -0,0 +1,6 @@
+@if (svgContent | async; as content) {
+ {{ summary }}
+Loading mermaid graph...
+}
diff --git a/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.scss b/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.ts b/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.ts
new file mode 100644
index 00000000..6a9fa37a
--- /dev/null
+++ b/src/app/hf-markdown/mermaid-md-component/mermaid-md.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import mermaid, { RenderResult } from 'mermaid';
+import { uniqueString, unescape } from 'src/app/utils';
+
+@Component({
+ selector: 'app-mermaid-md',
+ templateUrl: './mermaid-md.component.html',
+ styleUrls: ['./mermaid-md.component.scss'],
+})
+export class MermaidMdComponent implements OnChanges {
+ @Input() code: string;
+ public svgContent: Promise
+
+ {{ message || noteType.toUpperCase() }}:
+
+
diff --git a/src/app/hf-markdown/note-md-component/note-md.component.scss b/src/app/hf-markdown/note-md-component/note-md.component.scss
new file mode 100644
index 00000000..1443abce
--- /dev/null
+++ b/src/app/hf-markdown/note-md-component/note-md.component.scss
@@ -0,0 +1,42 @@
+.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;
+ white-space: normal;
+
+ .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);
+ }
+}
diff --git a/src/app/hf-markdown/note-md-component/note-md.component.ts b/src/app/hf-markdown/note-md-component/note-md.component.ts
new file mode 100644
index 00000000..3c433475
--- /dev/null
+++ b/src/app/hf-markdown/note-md-component/note-md.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { NoteType } from 'src/app/notetype';
+import { HfMarkdownRenderContext } from '../hf-markdown.component';
+
+@Component({
+ selector: 'app-note-md',
+ templateUrl: './note-md.component.html',
+ styleUrls: ['./note-md.component.scss'],
+})
+export class NoteMdComponent {
+ @Input() noteType: NoteType;
+ @Input() message: string;
+ @Input() code: string;
+ @Input() ctx: HfMarkdownRenderContext = { vmInfo: {}, session: '' };
+}
diff --git a/src/app/hf-markdown/single-task-verification-markdown/single-task-verification-markdown.component.html b/src/app/hf-markdown/single-task-verification-markdown/single-task-verification-markdown.component.html
index 0176dd62..ff4f46e9 100644
--- a/src/app/hf-markdown/single-task-verification-markdown/single-task-verification-markdown.component.html
+++ b/src/app/hf-markdown/single-task-verification-markdown/single-task-verification-markdown.component.html
@@ -24,107 +24,118 @@
inverse
>
-
+
+
-
-
-
+ @if (task?.success) {
+
+
+ } @else {
+
+
+ }