fix: layout on web client

Automattic · Jan 31, 2024 · c04817a · c04817a
1 parent 060c17c
commit c04817a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ I created it after years of dealing with the shortcomings of the competition.
 
 Grammarly was too expensive and too overbearing. 
 It's suggestions lacked context, and were often just plain _wrong_.
-No to mention: it's a privacy nightmare.
+Not to mention: it's a privacy nightmare.
 Everything you write with Grammarly is sent to their servers.
 Their privacy policy claims they don't sell the data, but that doesn't mean they don't use it to train large language models god knows what else.
 Not only that, but the round-trip-time of the network request makes revising your work all the more tedious.

diff --git a/harper-core/src/linting/matcher.rs b/harper-core/src/linting/matcher.rs
@@ -93,6 +93,9 @@ pub struct Matcher {
 impl Matcher {
     pub fn new() -> Self {
         let mut triggers = pt! {
+            "your","doing" => "you're doing",
+            "no","to" => "not to",
+            "No","to" => "not to",
             "ngram" => "n-gram",
             "grammer" => "grammar",
             "There","fore" => "Therefore",

diff --git a/web/src/app.html b/web/src/app.html
@@ -11,7 +11,7 @@
 </head>
 
 <body data-sveltekit-preload-data="hover" class="m-0 p-0 w-full h-full">
-  <div style="display: contents" class="m-0 p-0 w-full h-full">%sveltekit.body%</div>
+  <div style="display: contents" class="m-0 p-0">%sveltekit.body%</div>
 </body>
 
 </html>
diff --git a/web/src/lib/Graph.svelte b/web/src/lib/Graph.svelte
diff --git a/web/src/lib/GutterCenter.svelte b/web/src/lib/GutterCenter.svelte
@@ -0,0 +1,5 @@
+<div class="w-screen flex flex-row justify-center">
+	<div class="w-[1080px]">
+		<slot />
+	</div>
+</div>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Editor from '$lib/Editor.svelte';
-	import Graph from '$lib/Graph.svelte';
+	import GutterCenter from '$lib/GutterCenter.svelte';
 
 	let width = window.innerWidth;
 
@@ -9,27 +9,29 @@
 	});
 </script>
 
-<div class="w-full h-screen flex flex-col items-center m-0 p-0">
-	<div class="p-8 flex-initial">
-		<h1 class="text-5xl font-bold text-center">Hi. I'm Harper.</h1>
-		<h2 class="text-3xl text-center">The Grammar Checker for Artists</h2>
-		<h2 class="text-2xl font-light italic text-center">Private. Free. Unobtrusive.</h2>
-		<div class="flex flex-row justify-evenly mt-5">
-			<a href="https://github.com/chilipepperhott/harper" 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>
+<div class="h-16" />
+
+<GutterCenter>
+	<h1 class="text-5xl font-bold text-center">Hi. I'm Harper.</h1>
+	<h2 class="text-3xl text-center">The Grammar Checker for Developers</h2>
+	<h2 class="text-2xl font-light italic text-center">Private. Free. Unobtrusive.</h2>
+
+	<div class="flex flex-row justify-evenly mt-5">
+		<a href="https://github.com/chilipepperhott/harper" 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>
-	<div class="w-full 2xl:w-3/4 flex-shrink flex-grow overflow-hidden">
-		{#if width > 768}
+
+	<div class="w-full h-[600px] overflow-hidden">
+		{#if width > 1080}
 			<Editor />
 		{:else}
 			<p class="italic text-lg w-full text-center">
 				Open this page on a bigger screen to start checking your work.
 			</p>
 		{/if}
 	</div>
-</div>
+</GutterCenter>