Styled Page

.github/workflows/rust.yml

@@ -18,5 +18,9 @@ jobs:
     - uses: actions/checkout@v3
     - name: Build
       run: cargo build --verbose
-    - name: Run tests
+    - name: Build Release
+      run: cargo build --verbose --release
+    - name: Run Tests
       run: cargo test --verbose
+    - name: Run Tests in Release
+      run: cargo test --verbose --release

english_words.txt

@@ -320399,12 +320399,6 @@ tezcatzoncatl
 tezcucan
 tezkere
 tezkirah
-tfr
-tg
-tgn
-tgt
-th
-tha
 thack
 thacked
 thacker

lt-core/benches/spellcheck.rs

@@ -11,7 +11,7 @@ fn criterion_benchmark(c: &mut Criterion) {
     let dictionary = Dictionary::new();
 
     group.bench_function("dict create", |b| b.iter(Dictionary::new));
-    group.bench_function("hello 5", |b| b.iter(|| spellcheck(&dictionary)));
+    group.bench_function("hello 5", |b| b.iter(|| spellcheck(dictionary)));
 }
 
 criterion_group!(benches, criterion_benchmark);

lt-core/src/linting/spell_check.rs

@@ -13,7 +13,7 @@ pub fn spell_check(document: &Document, _dictionary: &Dictionary) -> Vec<Lint> {
             continue;
         }
 
-        let possibilities = suggest_correct_spelling(word_chars, 3, 3, &dictionary);
+        let possibilities = suggest_correct_spelling(word_chars, 3, 3, dictionary);
 
         let suggestions = possibilities
             .into_iter()

web/src/lib/Editor.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { Card } from 'flowbite-svelte';
+	import alice from '../../../alice.txt?raw';
+	import Underlines from '$lib/Underlines.svelte';
+	import { Button } from 'flowbite-svelte';
+	import { lintText, applySuggestion, spanContent } from '$lib/analysis';
+	import type { Lint } from '$lib/analysis';
+
+	let content = alice;
+
+	let lints: Lint[] = [];
+	let focused: number | undefined;
+
+	$: lintText(content).then((newLints) => (lints = newLints));
+
+	$: console.log(focused);
+</script>
+
+<div class="flex flex-row w-full h-full [&>*]:m-5">
+	<Card class="flex-auto max-w-full p-5 grid z-10 text-lg overflow-auto">
+		<div class="m-0 p-0" style="grid-row: 1; grid-column: 1">
+			<Underlines {content} focusLintIndex={focused} />
+		</div>
+		<textarea
+			class="w-full m-0 rounded-none p-0 z-0 bg-transparent border-none text-lg resize-none"
+			rows={content.length - content.replaceAll('\n', '').length + 1}
+			spellcheck="false"
+			style="grid-row: 1; grid-column: 1"
+			bind:value={content}
+		></textarea>
+	</Card>
+	<Card class="flex flex-col flex-grow overflow-auto h-full">
+		<h2 class="text-2xl font-bold m-1">Suggestions</h2>
+		{#each lints as lint, i}
+			<Card class="m-1 hover:translate-x-3 transition-all" on:click={() => (focused = i)}>
+				<div class="pl-2 border-l-[3px] border-l-primary-500">
+					<div class="flex flex-row">
+						<h3 class="font-bold">
+							{lint.lint_kind} - “<span class="italic">
+								{spanContent(lint.span, content)}
+							</span> ”
+						</h3>
+					</div>
+					<div
+						class="transition-all overflow-hidden flex flex-col justify-evenly"
+						style={`height: ${
+							focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px'
+						}`}
+					>
+						<p style="height: 50px">{lint.message}</p>
+						{#each lint.suggestions as suggestion}
+							<Button
+								color="primary"
+								class="w-full mb-1"
+								style="height: 40px; margin: 5px 0px;"
+								on:click={() =>
+									applySuggestion(content, suggestion, lint.span).then(
+										(edited) => (content = edited)
+									)}
+							>
+								Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
+									(p, c) => p + c
+								)}"
+							</Button>
+						{/each}
+					</div>
+				</div>
+			</Card>
+		{/each}
+	</Card>
+</div>

web/src/lib/Underlines.svelte

@@ -25,7 +25,6 @@
 			if (output.length > 0) {
 				output.push(undefined);
 			}
-			console.log(chunk);
 			output.push(chunk);
 		}
 

web/src/routes/+page.svelte

@@ -1,89 +1,22 @@
-<script lang="ts">
-	import { Card } from 'flowbite-svelte';
-	import alice from '../../../alice.txt?raw';
-	import Underlines from '$lib/Underlines.svelte';
-	import { Button } from 'flowbite-svelte';
-	import { lintText, applySuggestion, spanContent } from '$lib/analysis';
-	import type { Lint } from '$lib/analysis';
-
-	let content = alice;
-	let editor: HTMLTextAreaElement;
-
-	let lints: Lint[] = [];
-	let focused: number | undefined;
-
-	$: lintText(content).then((newLints) => (lints = newLints));
-
-	function ping() {
-		lintText(content).then((newLints) => (lints = newLints));
-		setTimeout(ping, 1000);
-	}
-
-	type Category = 'mild' | 'moderate';
-
-	function categoryToColor(category: Category): string {
-		switch (category) {
-			case 'mild':
-				return '#708b75';
-			case 'moderate':
-				return '#f3a712';
-		}
-	}
-
-	ping();
-
-	$: console.log(focused);
+<script>
+	import Editor from '$lib/Editor.svelte';
 </script>
 
-<div class="flex flex-row w-full h-screen [&>*]:m-5">
-	<Card class="flex-auto max-w-full h-full p-5 grid z-10 text-lg">
-		<div class="overflow-auto p-0" style="grid-row: 1; grid-column: 1">
-			<Underlines {content} focusLintIndex={focused} />
+<div class="w-full h-screen flex flex-col items-center justify-evenly">
+	<div>
+		<h1 class="text-5xl font-bold text-center">Hi! I'm Audrey</h1>
+		<h2 class="text-3xl italic text-center">The Grammar Checker for Artists</h2>
+		<div class="flex flex-row justify-evenly mt-5">
+			<a href="https://github.com/chilipepperhott/lt-rs" class="hover:scale-105 transition-all"
+				><img width="40" height="40" src="/icons/github.svg" alt="Project Repository" /></a
+			>
+			<a href="https://elijahpotter.dev" class="hover:scale-105 transition-all"
+				><img width="40" height="40" src="/icons/profile.svg" alt="Author" /></a
+			>
 		</div>
-		<textarea
-			class="w-full h-full m-0 rounded-none p-0 z-0 bg-transparent border-none text-lg"
-			spellcheck="false"
-			style="grid-row: 1; grid-column: 1"
-			bind:value={content}
-			bind:this={editor}
-		></textarea>
-	</Card>
-	<Card class="flex flex-col flex-grow">
-		{#each lints as lint, i}
-			<Card class="m-1 hover:translate-x-3 transition-all" on:click={() => (focused = i)}>
-				<div class="pl-2" style={`border-left: 3px solid ${categoryToColor('mild')}`}>
-					<div class="flex flex-row">
-						<h3 class="font-bold">
-							{lint.lint_kind} - “<span class="italic">
-								{spanContent(lint.span, content)}
-							</span> ”
-						</h3>
-					</div>
-					<div
-						class="transition-all overflow-hidden"
-						style={`height: ${
-							focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px'
-						}`}
-					>
-						<p style="height: 50px">{lint.message}</p>
-						{#each lint.suggestions as suggestion}
-							<Button
-								color="alternative"
-								class="w-full mb-1"
-								style="height: 40px; margin: 5px 0px;"
-								on:click={() =>
-									applySuggestion(content, suggestion, lint.span).then(
-										(edited) => (content = edited)
-									)}
-							>
-								Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
-									(p, c) => p + c
-								)}"
-							</Button>
-						{/each}
-					</div>
-				</div>
-			</Card>
-		{/each}
-	</Card>
+	</div>
+	<div class="w-full 2xl:w-3/4 h-1/2">
+		<Editor />
+	</div>
 </div>
+

web/tailwind.config.js

@@ -1,27 +1,30 @@
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
+	],
 
-  plugins: [require('flowbite/plugin')],
+	plugins: [require('flowbite/plugin')],
 
-  darkMode: 'class',
+	darkMode: 'class',
 
-  theme: {
-    extend: {
-      colors: {
-        // flowbite-svelte
-        primary: {
-          50: '#FFF5F2',
-          100: '#FFF1EE',
-          200: '#FFE4DE',
-          300: '#FFD5CC',
-          400: '#FFBCAD',
-          500: '#FE795D',
-          600: '#EF562F',
-          700: '#EB4F27',
-          800: '#CC4522',
-          900: '#A5371B'
-        }
-      }
-    }
-  }
+	theme: {
+		extend: {
+			colors: {
+				// flowbite-svelte
+				primary: {
+					900: '#133f71',
+					800: '#355280',
+					700: '#50658f',
+					600: '#69799f',
+					500: '#818eae',
+					400: '#9aa4be',
+					300: '#b3bace',
+					200: '#ccd0de',
+					100: '#e5e7ef',
+					50: '#ffffff'
+				}
+			}
+		}
+	}
 };