From f1c4d2dc7817e0ce1c7dab676c678b6980f2c1e5 Mon Sep 17 00:00:00 2001
From: Alexander Petric <petric.al@gmail.com>
Date: Wed, 8 Jan 2025 10:47:06 -0500
Subject: [PATCH 1/2] support html in github markdown plugin

---
 frontend/package-lock.json                    | 187 +++++++++++++++++-
 frontend/package.json                         |   1 +
 .../src/lib/components/GfmMarkdown.svelte     |   6 +-
 3 files changed, 191 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ae323588ca7c4..5fb76d1afd714 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -58,6 +58,7 @@
 				"panzoom": "^9.4.3",
 				"pdfjs-dist": "4.8.69",
 				"quill": "^1.3.7",
+				"rehype-raw": "^7.0.0",
 				"rfc4648": "^1.5.3",
 				"svelte-carousel": "^1.0.25",
 				"svelte-chartjs": "^3.1.5",
@@ -5870,6 +5871,16 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6707,7 +6718,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"
 			},
@@ -7911,6 +7921,100 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/hast-util-from-parse5": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.2.tgz",
+			"integrity": "sha512-SfMzfdAi/zAoZ1KkFEyyeXBn7u/ShQrfd675ZEE9M3qj+PMFX05xubzRyF76CCSJu8au9jgVxDV1+okFvgZU4A==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"devlop": "^1.0.0",
+				"hastscript": "^9.0.0",
+				"property-information": "^6.0.0",
+				"vfile": "^6.0.0",
+				"vfile-location": "^5.0.0",
+				"web-namespaces": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-parse-selector": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+			"integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+			"integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"hast-util-from-parse5": "^8.0.0",
+				"hast-util-to-parse5": "^8.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"parse5": "^7.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-parse5": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+			"integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"devlop": "^1.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hastscript": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.0.tgz",
+			"integrity": "sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-parse-selector": "^4.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/highlight.js": {
 			"version": "11.9.0",
 			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
@@ -7947,6 +8051,16 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/html-void-elements": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@@ -10415,6 +10529,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/parse5": {
+			"version": "7.2.1",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+			"integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+			"license": "MIT",
+			"dependencies": {
+				"entities": "^4.5.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
 		"node_modules/pascal-case": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -11349,6 +11475,16 @@
 				"svelte": "^3.2.0 || ^4.0.0-next.0"
 			}
 		},
+		"node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/protocol-buffers-schema": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
@@ -11669,6 +11805,21 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/rehype-raw": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+			"integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"hast-util-raw": "^9.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/remark-gfm": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
@@ -12155,6 +12306,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/spdx-correct": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -13484,6 +13645,20 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/vfile-location": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+			"integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vfile-message": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
@@ -13702,6 +13877,16 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/web-namespaces": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+			"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/web-worker": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index dd4a8d862faad..89425b0799405 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -133,6 +133,7 @@
 		"panzoom": "^9.4.3",
 		"pdfjs-dist": "4.8.69",
 		"quill": "^1.3.7",
+		"rehype-raw": "^7.0.0",
 		"rfc4648": "^1.5.3",
 		"svelte-carousel": "^1.0.25",
 		"svelte-chartjs": "^3.1.5",
diff --git a/frontend/src/lib/components/GfmMarkdown.svelte b/frontend/src/lib/components/GfmMarkdown.svelte
index 59ed3871663d7..09a7b05a168df 100644
--- a/frontend/src/lib/components/GfmMarkdown.svelte
+++ b/frontend/src/lib/components/GfmMarkdown.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-	import Markdown from 'svelte-exmarkdown'
+	import {Markdown, type Plugin} from 'svelte-exmarkdown'
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
+	import rehypeRaw from 'rehype-raw';
 
 	export let md: string
+	const plugins: Plugin[] = [gfmPlugin(),{ rehypePlugin: [rehypeRaw] }];
 </script>
 
 <div class="!prose-xs pgap">
-	<Markdown {md} plugins={[gfmPlugin()]} />
+	<Markdown {md} plugins={plugins} />
 </div>
 
 <style global>

From 28dc88130a0dbad3803210fbf70a1c974a01b1e8 Mon Sep 17 00:00:00 2001
From: Alexander Petric <petric.al@gmail.com>
Date: Wed, 8 Jan 2025 11:57:36 -0500
Subject: [PATCH 2/2] also support github alerts in markdown

---
 frontend/package-lock.json                    | 43 ++++++++
 frontend/package.json                         |  1 +
 .../src/lib/components/GfmMarkdown.svelte     | 98 ++++++++++++++++++-
 3 files changed, 137 insertions(+), 5 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5fb76d1afd714..1cb3b75f390de 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -58,6 +58,7 @@
 				"panzoom": "^9.4.3",
 				"pdfjs-dist": "4.8.69",
 				"quill": "^1.3.7",
+				"rehype-github-alerts": "^3.0.0",
 				"rehype-raw": "^7.0.0",
 				"rfc4648": "^1.5.3",
 				"svelte-carousel": "^1.0.25",
@@ -7921,6 +7922,24 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/hast-util-from-html": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+			"integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"devlop": "^1.1.0",
+				"hast-util-from-parse5": "^8.0.0",
+				"parse5": "^7.0.0",
+				"vfile": "^6.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/hast-util-from-parse5": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.2.tgz",
@@ -7941,6 +7960,19 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-is-element": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+			"integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/hast-util-parse-selector": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
@@ -11805,6 +11837,17 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/rehype-github-alerts": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/rehype-github-alerts/-/rehype-github-alerts-3.0.0.tgz",
+			"integrity": "sha512-m8Lm+V0Ee0T9JqaLN0eBqtyUSfMUDFhAOIjbvoAQfI6EKtxKsIGWP6PaQE01UBHat0K7dBtnaeyCmJuUO7ylHg==",
+			"license": "MIT",
+			"dependencies": {
+				"hast-util-from-html": "^2.0.1",
+				"hast-util-is-element": "^3.0.0",
+				"unist-util-visit": "^5.0.0"
+			}
+		},
 		"node_modules/rehype-raw": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 89425b0799405..18138448b2a2b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -133,6 +133,7 @@
 		"panzoom": "^9.4.3",
 		"pdfjs-dist": "4.8.69",
 		"quill": "^1.3.7",
+		"rehype-github-alerts": "^3.0.0",
 		"rehype-raw": "^7.0.0",
 		"rfc4648": "^1.5.3",
 		"svelte-carousel": "^1.0.25",
diff --git a/frontend/src/lib/components/GfmMarkdown.svelte b/frontend/src/lib/components/GfmMarkdown.svelte
index 09a7b05a168df..7392de5484568 100644
--- a/frontend/src/lib/components/GfmMarkdown.svelte
+++ b/frontend/src/lib/components/GfmMarkdown.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-	import {Markdown, type Plugin} from 'svelte-exmarkdown'
+	import { Markdown, type Plugin } from 'svelte-exmarkdown'
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
-	import rehypeRaw from 'rehype-raw';
-
+	import rehypeRaw from 'rehype-raw'
+	import { rehypeGithubAlerts } from 'rehype-github-alerts'
 	export let md: string
-	const plugins: Plugin[] = [gfmPlugin(),{ rehypePlugin: [rehypeRaw] }];
+	const plugins: Plugin[] = [
+		gfmPlugin(),
+		{ rehypePlugin: [rehypeRaw] },
+		{ rehypePlugin: [rehypeGithubAlerts] }
+	]
 </script>
 
 <div class="!prose-xs pgap">
-	<Markdown {md} plugins={plugins} />
+	<Markdown {md} {plugins} />
 </div>
 
 <style global>
@@ -16,4 +20,88 @@
 		margin-top: 0.5rem;
 		margin-bottom: 0.5rem;
 	}
+
+	:root {
+		--github-alert-default-color: rgb(208, 215, 222);
+		--github-alert-note-color: rgb(9, 105, 218);
+		--github-alert-tip-color: rgb(26, 127, 55);
+		--github-alert-important-color: rgb(130, 80, 223);
+		--github-alert-warning-color: rgb(191, 135, 0);
+		--github-alert-caution-color: rgb(207, 34, 46);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:root {
+			--github-alert-default-color: rgb(48, 54, 61);
+			--github-alert-note-color: rgb(31, 111, 235);
+			--github-alert-tip-color: rgb(35, 134, 54);
+			--github-alert-important-color: rgb(137, 87, 229);
+			--github-alert-warning-color: rgb(158, 106, 3);
+			--github-alert-caution-color: rgb(248, 81, 73);
+		}
+	}
+
+	.markdown-alert {
+		padding: 0.5rem 1rem;
+		margin-bottom: 16px;
+		border-left: 0.25em solid var(--github-alert-default-color);
+	}
+
+	.markdown-alert > :first-child {
+		margin-top: 0;
+	}
+
+	.markdown-alert > :last-child {
+		margin-bottom: 0;
+	}
+
+	.markdown-alert-note {
+		border-left-color: var(--github-alert-note-color);
+	}
+
+	.markdown-alert-tip {
+		border-left-color: var(--github-alert-tip-color);
+	}
+
+	.markdown-alert-important {
+		border-left-color: var(--github-alert-important-color);
+	}
+
+	.markdown-alert-warning {
+		border-left-color: var(--github-alert-warning-color);
+	}
+
+	.markdown-alert-caution {
+		border-left-color: var(--github-alert-caution-color);
+	}
+
+	.markdown-alert-title {
+		display: flex;
+		margin-bottom: 4px;
+		align-items: center;
+	}
+
+	.markdown-alert-title > svg {
+		margin-right: 8px;
+	}
+
+	.markdown-alert-note .markdown-alert-title {
+		color: var(--github-alert-note-color);
+	}
+
+	.markdown-alert-tip .markdown-alert-title {
+		color: var(--github-alert-tip-color);
+	}
+
+	.markdown-alert-important .markdown-alert-title {
+		color: var(--github-alert-important-color);
+	}
+
+	.markdown-alert-warning .markdown-alert-title {
+		color: var(--github-alert-warning-color);
+	}
+
+	.markdown-alert-caution .markdown-alert-title {
+		color: var(--github-alert-caution-color);
+	}
 </style>