feat(web): added a splash of color to the demo

demo.md

@@ -8,9 +8,10 @@ Like if you break up words you shoul dn't.
 Harper can be a lifesaver when writing technical documents, 
 emails or other formal forms of communication.
 
-Harper works everywhere, even offline. Since you r data
+Harper works everywhere, even offline. Since your data
-never leaves your device, you don't ned to worry aout us
+never leaves your device, you don't need to worry aout us
-selling it or using it to train large language models.
+selling it or using it to train large language models, 
+despite of the consequences.
 
 The best part: Harper can give you feedback instantly.
 For most documents, Harper can serve up suggestions in

harper-core/src/linting/lint_kind.rs

@@ -20,6 +20,24 @@ pub enum LintKind {
     Miscellaneous,
 }
 
+impl LintKind {
+    /// Produce a string representation, which can be used as keys in a map or CSS variables.
+    pub fn to_string_key(&self) -> String {
+        match self {
+            LintKind::Spelling => "Spelling",
+            LintKind::Capitalization => "Capitalization",
+            LintKind::Formatting => "Formatting",
+            LintKind::Repetition => "Repetition",
+            LintKind::Readability => "Readability",
+            LintKind::Miscellaneous => "Miscellaneous",
+            LintKind::Enhancement => "Enhancement",
+            LintKind::WordChoice => "WordChoice",
+            LintKind::Style => "Style",
+        }
+        .to_owned()
+    }
+}
+
 impl Display for LintKind {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         let s = match self {

harper-wasm/src/lib.rs

@@ -282,6 +282,11 @@ impl Lint {
 
     /// Get a string representing the general category of the lint.
     pub fn lint_kind(&self) -> String {
+        self.inner.lint_kind.to_string_key()
+    }
+
+    /// Get a string representing the general category of the lint.
+    pub fn lint_kind_pretty(&self) -> String {
         self.inner.lint_kind.to_string()
     }
 

packages/web/src/lib/Editor.svelte

@@ -7,6 +7,7 @@
 	import type { Lint } from 'harper.js';
 	import CheckMark from '$lib/CheckMark.svelte';
 	import { fly } from 'svelte/transition';
+	import lintKindColor from './lintKindColor';
 
 	export let content = demo;
 
@@ -79,10 +80,10 @@
 					on:click={() => (focused = i)}
 					bind:this={lintCards[i]}
 				>
-					<div class="pl-2 border-l-[3px] border-l-primary-500">
+					<div class={`pl-2`} style={`border-left: 4px solid ${lintKindColor(lint.lint_kind())}`}>
 						<div class="flex flex-row">
 							<h3 class="font-bold text-base p-0">
-								{lint.lint_kind()} - “<span class="italic">
+								{lint.lint_kind_pretty()} - “<span class="italic">
 									{lint.get_problem_text()}
 								</span>”
 							</h3>

packages/web/src/lib/Underlines.svelte

@@ -6,6 +6,7 @@
 
 	import type { Lint } from 'harper.js';
 	import { WorkerLinter } from 'harper.js';
+	import lintKindColor from '$lib/lintKindColor';
 
 	export let content: string;
 	export let focusLintIndex: number | undefined;
@@ -47,6 +48,7 @@
 		focused: boolean;
 		content: string;
 		index: number;
+		color: string;
 	};
 
 	type UnderlineToken = string | null | undefined | UnderlineDetails;
@@ -72,7 +74,8 @@
 				let lintContent: UnderlineDetails = {
 					focused: lintIndex === focusLintIndex,
 					index: lintIndex,
-					content: lint.get_problem_text().replaceAll(' ', '\u00A0')
+					content: lint.get_problem_text().replaceAll(' ', '\u00A0'),
+					color: lintKindColor(lint.lint_kind())
 				};
 
 				return [...prevContent, lintContent];
@@ -112,7 +115,7 @@
 						bind:this={lintHighlights[chunk.index]}
 						on:click={() =>
 							chunk != null && typeof chunk == 'object' && (focusLintIndex = chunk.index)}
-						style={`--line-color: #DB2B39; --line-width: ${chunk.focused ? '4px' : '2px'}; --bg-color: ${chunk.focused ? '#dbafb3' : 'transparent'};`}
+						style={`--line-color: ${chunk.color}; --line-width: ${chunk.focused ? '4px' : '2px'}; --bg-color: ${chunk.focused ? '#dbafb3' : 'transparent'};`}
 					>
 						{chunk.content}
 					</button>

packages/web/src/lib/lintKindColor.ts

@@ -0,0 +1,24 @@
+export default function lintKindColor(lintKindKey: string): string {
+	switch (lintKindKey) {
+		case 'Spelling':
+			return '#EE4266';
+		case 'Capitalization':
+			return '#540D6E';
+		case 'Style':
+			return '#FFD23F';
+		case 'Formatting':
+			return '#540D6E';
+		case 'Repetition':
+			return '#3BCEAC';
+		case 'Enhancement':
+			return '#0EAD69';
+		case 'Readability':
+			return '#0EAD69';
+		case 'WordChoice':
+			return '#0EAD69';
+		case 'Miscellaneous':
+			return '#3BCEAC';
+		default:
+			throw new Error(`Unexpected lint kind: ${lintKindKey}`);
+	}
+}